2BCmsBrowser/src/routes/MProduct/Edit/index.js

import React, { PureComponent } from 'react';
import { Divider, Modal, Table, Form, Card, Button, Tag } from 'antd';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import queryString from 'query-string';
import PageHeaderLayout from '../../../layouts/PageHeaderLayout';
import FooterToolbar from '../../../components/FooterToolbar';
import DescriptionList from '../../../components/DescriptionList';
import NewPriceModal from './price';
import TagSelectModal from './tags';
import { pageSize, productType, Codes } from '../../../utils/config';

const { Description } = DescriptionList;
const confirm = Modal.confirm;

@Form.create()
@connect(state => ({
  mproductDetail: state.mproductDetail,
  goodsModel: state.goodsModel,
  tagModel: state.tagModel,
}))
export default class MerchantProductEdit extends PureComponent {

  handleAddPriceClick = () => {
    this.props.dispatch({
      type: 'goodsModel/showModal',
      payload: { operation: 'createItem' },
    });
  }

  handleEditPriceClick = (record) => {
    this.props.dispatch({
      type: 'goodsModel/showModal',
      payload: {
        operation: 'updateItem',
        goodsItem: record,
      },
    });
  }

  handleDelPriceClick = (record) => {
    const { dispatch, location } = this.props;
    const { search } = location;
    confirm({
      title: `您确定要删除此定价?`,
      onOk () {
        dispatch({
          type: 'goodsModel/removeItem',
          payload: { id: record.id },
          callback: () => {
            dispatch(routerRedux.push({
              pathname: '/goods/edit',
              search,
            }));
          }
        });
      },
    });
  }

  handleEditTagClick = () => {
    const { location } = this.props;
    const { search } = location;
    const { merchantId, pid } = queryString.parse(search);
    this.props.dispatch({
      type: 'goodsModel/showTagModal',
    });
    this.props.dispatch({
      type: 'tagModel/query',
      payload: {
        pageNo: 1,
        pageSize,
        merchantId,
      }
    });
  }

  handleTagModalCancel = () => {
    this.props.dispatch({
      type: 'goodsModel/hideTagModal',
    });
  }

  handleTagModalOk = (data) => {
    const { location } = this.props;
    const { search } = location;
    const { merchantId, pid } = queryString.parse(search);
    this.props.dispatch({
      type: 'goodsModel/bundleTags',
      payload: { pid, merchantId, tags: data.map(item => item.id) },
      callback: () => {
        this.props.dispatch(routerRedux.push({
          pathname: '/goods/edit',
          search,
        }));
      }
    });
  }

  handleTagModalSearch = (data) => {
    const { location } = this.props;
    const { search } = location;
    const { merchantId, pid } = queryString.parse(search);
    const newData = { ...data };
    if (newData.keyword) {
      newData[newData.field] = newData.keyword;
    }
    delete newData.field;
    delete newData.keyword;

    this.props.dispatch({
      type: 'tagModel/query',
      payload: {
        ...newData,
        pageNo: 1,
        pageSize,
        merchantId,
      }
    });
  }

  handlePageExit = () => {
    const { dispatch, mproductDetail } = this.props;
    const { filters } = mproductDetail;
    dispatch(routerRedux.push({
      pathname: '/goods',
      search: queryString.stringify(filters),
    }));
  }

  handleTagModalTableChange = (pagination) => {
    const { location, dispatch, mproductDetail } = this.props;
    const { filters } = mproductDetail;
    const { search } = location;
    const { merchantId, pid } = queryString.parse(search);

    const newFilters = { ...filters };
    if (newFilters.keyword) {
      newFilters[newFilters.field] = newFilters.keyword;
    }
    delete newFilters.field;
    delete newFilters.keyword;

    const data = {
      ...newFilters,
      pageNo: pagination.current,
      pageSize: pagination.pageSize,
      merchantId,
    };

    Object.keys(data).map(key => data[key] ? null : delete data[key]);
    dispatch({ type: 'tagModel/query', payload: { ...data } });
  }

  render(){
    const { mproductDetail, goodsModel, tagModel, location } = this.props;
    const { currentItem } = mproductDetail;
    const { modalShow, tagModalShow, operation, goodsItem } = goodsModel;
    const { list, listLoading, pagination } = tagModel;
    const { goods, tags, type, code, name, merchantName } = currentItem;

    const { search } = location;
    const { merchantId, pid } = queryString.parse(search);

    const priceModalProps = {
      data: operation === 'createItem' ? {} : goodsItem,
      title: operation === 'createItem' ? '添加价格' : '编辑价格',
      visible: modalShow,
      maskClosable: false,
      onCancel: () => {
        this.props.dispatch({ type: 'goodsModel/hideModal' });
      },
      onSubmit: (data) => {
        const newData = { ...data, merchantId, pid, productType: type };
        this.props.dispatch({
          type: `goodsModel/${operation}`,
          payload: newData,
          callback: () => {
            this.props.dispatch(routerRedux.push({
              pathname: '/goods/edit',
              search,
            }));
          }
        });
      },
    };

    const listTableProps = {
      simple: true,
      bordered: true,
      pagination: false,
      rowKey: (record) => record.id,
      dataSource: goods,
      columns: [{
        title: '计价单位',
        dataIndex: 'chargeUnit',
        key: 'chargeUnit',
      },{
        title: '供应商价格(¥)',
        dataIndex: 'cpPrice',
        key: 'cpPrice',
      },{
        title: '渠道方价格(¥)',
        dataIndex: 'merchantPrice',
        key: 'merchantPrice',
      },{
        title: '终端价格(¥)',
        dataIndex: 'terminalPrice',
        key: 'terminalPrice',
      },{
        title: '操作',
        key: 'action',
        render: (text, record) => (
          <span>
            <a onClick={() => this.handleEditPriceClick(record)}>编辑</a>
            <Divider type="vertical" />
            <a onClick={() => this.handleDelPriceClick(record)}>删除</a>
          </span>
        ),
      }],
    };

    return (
      <PageHeaderLayout>
        <Card
          bordered={false}
          title="详情"
          style={{ marginBottom: 15 }}
        >
          <DescriptionList size="large" col={2} style={{ marginBottom: 32 }}>
            <Description term="商品编号">{code}</Description>
            <Description term="商品名称">{name}</Description>
            <Description term="商品类型">{productType[type]}</Description>
            <Description term="渠道名称">{merchantName}</Description>
          </DescriptionList>
        </Card>
        <Card
          bordered={false}
          title={
            <div>定价
              <Divider type="vertical" />
              <Button onClick={this.handleAddPriceClick} size="small" type="primary">添加</Button>
            </div>
          }
          style={{ marginBottom: 15 }}
        >
          <Table { ...listTableProps }/>
          <NewPriceModal { ...priceModalProps } />
        </Card>
        <Card
          bordered={false}
          title={
            <div>标签
              <Divider type="vertical" />
              <Button onClick={this.handleEditTagClick} size="small" type="primary">选择</Button>
            </div>
          }
          style={{ marginBottom: 15 }}
        >
          {/*标签的模态选择框*/}
          <TagSelectModal
            rowKeyName="id"
            modalVisible={tagModalShow}
            selTableData={tags || []}
            style={{ top: 20 }}
            fsTableDataSource={list}
            fsTableLoading={listLoading}
            fsTablePagination={pagination}
            onOk={this.handleTagModalOk}
            onCancel={this.handleTagModalCancel}
            onSearch={this.handleTagModalSearch}
            fsTableOnChange={this.handleTagModalTableChange}
          />
          {tags ? tags.map(item => <Tag key={item.id} color="#f50">{item.name}</Tag>) : null}
        </Card>
        <FooterToolbar>
          <Button onClick={this.handlePageExit} type="primary">
            完成
          </Button>
        </FooterToolbar>
      </PageHeaderLayout>
    );
  }
}