123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224 |
- import React, { Component } from 'react';
- import { Card, Modal, Form, Button, Tag, Icon } from 'antd';
- import { connect } from 'dva';
- import { routerRedux } from 'dva/router';
- import TableForm from './TableForm';
- import FooterToolbar from '../../../components/FooterToolbar';
- import Selector from '../../../components/AXTableSelector/Selector';
- import { addRowKey } from '../../../utils/utils';
- import { Hotax } from '../../../utils/config';
- @connect(({ loading, shelves, tag }) => ({
- tag,
- shelves,
- tLoading: loading.models.tag,
- submitting: loading.models.shelves,
- }))
- @Form.create()
- export default class PackageEdit extends Component {
- constructor(props) {
- super(props);
- const { location } = props;
- const { state } = location;
- const { merchantId, pid, productType } = state;
- this.state = {
- pid,
- merchantId,
- productType,
- tagSelectorDestroy: true,
- };
- }
- componentDidMount() {
- const { merchantId, pid } = this.state;
- this.props.dispatch({
- type: 'shelves/fetchItemDetail',
- payload: {
- pid,
- merchantId,
- },
- });
- }
- handleGoodsCreate=(data) => {
- const { pid, merchantId } = this.state;
- this.props.dispatch({
- type: 'shelves/createItemPrice',
- payload: {
- ...data,
- ...this.state,
- productType: Hotax.PRODUCT_PACKAGE,
- status: Hotax.STATUS_NORMAL,
- },
- states: {
- pid,
- merchantId,
- },
- });
- };
- handleGoodsUpdate=(data) => {
- const { pid, merchantId } = this.state;
- this.props.dispatch({
- type: 'shelves/updateItemPrice',
- payload: {
- ...data,
- ...this.state,
- },
- states: {
- pid,
- merchantId,
- },
- });
- };
- handleGoodsDelete=(data) => {
- const { pid, merchantId } = this.state;
- this.props.dispatch({
- type: 'shelves/deleteItemPrice',
- payload: data,
- states: {
- pid,
- merchantId,
- },
- });
- };
- handleTagClose=(index) => {
- const { pid, merchantId } = this.state;
- const { shelves } = this.props;
- const { currentItem } = shelves;
- const { tags } = currentItem;
- const newTags = tags.filter((item, location) => location !== index);
- const newTagIds = newTags.map(item => item.id);
- this.props.dispatch({
- type: 'shelves/updateItemTags',
- payload: {
- pid,
- merchantId,
- tags: newTagIds,
- },
- states: {
- pid,
- merchantId,
- },
- });
- };
- handleTagSelectorModalShow = () => {
- this.setState({
- tagSelectorDestroy: false,
- });
- const { merchantId } = this.state;
- this.props.dispatch({
- type: 'tag/fetchTagList',
- payload: { merchantId },
- });
- };
- handleTagSelectorCancel = () => {
- this.setState({
- tagSelectorDestroy: true,
- });
- };
- handleTagSelectorChange = (params) => {
- const { merchantId } = this.state;
- this.props.dispatch({
- type: 'tag/fetchTagList',
- payload: { merchantId, ...params },
- });
- };
- handleTagSelectorFinish = (rows) => {
- const { pid, merchantId } = this.state;
- const newTagIds = (rows || []).map(row => row.id);
- this.props.dispatch({
- type: 'shelves/updateItemTags',
- payload: {
- pid,
- merchantId,
- tags: newTagIds,
- },
- states: {
- pid,
- merchantId,
- },
- });
- this.setState({
- tagSelectorDestroy: true,
- });
- };
- handlePageBack=() => {
- this.props.dispatch(routerRedux.push({
- pathname: '/shelves/package',
- state: this.props.location.state,
- }));
- };
- render() {
- const { tagSelectorDestroy } = this.state;
- const { submitting, tLoading, shelves, tag, form } = this.props;
- const { getFieldDecorator } = form;
- const { currentItem } = shelves;
- const { goods, tags } = currentItem;
- return (
- <div>
- <Card title="价格管理" style={{ marginBottom: 16 }}>
- {getFieldDecorator('goods', {
- initialValue: addRowKey(goods),
- })(
- <TableForm
- loading={submitting}
- onCreate={this.handleGoodsCreate}
- onUpdate={this.handleGoodsUpdate}
- onDelete={this.handleGoodsDelete}
- />
- )}
- </Card>
- <Card title="栏目管理" style={{ marginBottom: 70 }}>
- {tags && tags.map((item, index) => (
- <Tag
- closable
- afterClose={() => this.handleTagClose(index)}
- color="#87d068"
- key={item.id}
- >
- {item.name}
- </Tag>
- ))}
- <Tag
- style={{ borderStyle: 'dashed' }}
- onClick={this.handleTagSelectorModalShow}
- >
- <Icon type="plus" />添加栏目
- </Tag>
- {!tagSelectorDestroy && (
- <Modal
- width={1100}
- footer={null}
- visible
- title="标签列表"
- maskClosable={false}
- onCancel={this.handleMerchantSelectorCancel}
- >
- <Selector
- multiple
- loading={tLoading}
- selectorName="Tag"
- list={tag.list}
- pageNo={tag.pageNo}
- pageSize={tag.pageSize}
- totalSize={tag.totalSize}
- selectedRows={tags}
- onCancel={this.handleTagSelectorCancel}
- onChange={this.handleTagSelectorChange}
- onFinish={this.handleTagSelectorFinish}
- />
- </Modal>
- )}
- </Card>
- <FooterToolbar style={{ width: '100%' }}>
- <Button
- type="primary"
- onClick={this.handlePageBack}
- style={{ marginRight: 10 }}
- >返回上一页
- </Button>
- </FooterToolbar>
- </div>
- );
- }
- }
|