FEV2 / fw-cms

  import React, { useState } from 'react';
  import { Row, Modal, Table, Button, InputNumber, message } from 'antd';
  import Column from 'antd/lib/table/Column';

  import { ShopTaskList, ListItem } from '../api';

  import { isNil } from 'lodash';

  
  interface Props {
    setVisible: any,
    visible: boolean,
    current: ShopTaskList,
    index?: number,
    setList: (value: any) => any,
    list: ListItem,
    setCurrent: (value: any) => any,
    isHandledit: boolean
  }
  
  export default function EModal({ setVisible, visible, current = {}, index, setList, list = {}, setCurrent, isHandledit }: Props) {
    const [editable, setEditable] = useState<boolean>(false);
  
    function _onChange(e: number, innerIndex: number) {
      //改变整体外层数据

      const data = JSON.parse(JSON.stringify(list));
      const currentData = JSON.parse(JSON.stringify(current));

      if (!isNil(index)) {
        data.shopTaskList![index].staffTaskList![innerIndex].taskCount = e || 0;

        data.shopTaskList![index].staffTaskList![innerIndex].clueDealTaskCount = Math.ceil((data.shopTaskList![index].clueDealTaskRate || 0)/100 *(e || 0));

        currentData.staffTaskList![innerIndex].taskCount = e || 0;

        currentData.staffTaskList![innerIndex].clueDealTaskCount = Math.ceil((data.shopTaskList![index].clueDealTaskRate || 0)/100 *(e || 0));
      }
      setList({ ...data });

      //回显改变数据

      setCurrent({ ...currentData });
    }

  
    /**
     * 修改零售任务
     * @param e 
     * @param innerIndex 
     */
    function hanldeChangeClue(e: number, innerIndex: number) {
      //改变整体外层数据
      const data = JSON.parse(JSON.stringify(list));
      const currentData = JSON.parse(JSON.stringify(current));
      if (!isNil(index) && data.shopTaskList![index].staffTaskList[innerIndex].taskCount < e) {
        message.error("线索到店零售台数不能大于零售任务！");
        return;
      }

      if (!isNil(index)) {
        data.shopTaskList![index].staffTaskList![innerIndex].clueDealTaskCount = e || 0;
        currentData.staffTaskList![innerIndex].clueDealTaskCount = e || 0;

      }
      setList({ ...data });
      //回显改变数据
      setCurrent({ ...currentData });
    }
  

    function handleClick() {
      setVisible(false);
      setEditable(false);
    }
  
    return (
      <Modal
        visible={visible}
        onCancel={() => setVisible(false)}
        maskClosable={false}
        width={600}
        footer={null}
      >
        <Table
          style={{ marginTop: 20 }}
          dataSource={current.staffTaskList}
          rowKey="staffId"
          pagination={false}
        >

          <Column 
            title="销售顾问" 
            align="center"

            render={(value: any) => {
              if (value.regularMonth) {

                return <span>{value.staffName}(转正第{value.regularMonth}个月)</span>;

              } else {

                return <span>{value.staffName}</span>;

              }
            }}
          />

          <Column 
            title="零售任务(台)" 
            dataIndex="taskCount" 
            align="center"

            render={(value, record, index) => {
              if (editable) {

                return <InputNumber min={0} value={value} onChange={(e: any) => _onChange(e, index)} />;
              } else {
                return <span>{value}</span>;
              }
            }}
          />
          <Column 
            title="线索到店零售台数"
            dataIndex="clueDealTaskCount" 
            align="center"
            render={(value, record, index) => {
              if (editable) {
                return <InputNumber min={0} value={value} onChange={(e: any) => hanldeChangeClue(e, index)} />;

              } else {

                return <span>{value}</span>;

              }
            }}
          />
        </Table>
        <Row justify="center" style={{ marginTop: 20 }}>

          {isHandledit ? (

            <>

              <Button type="primary" style={{ marginRight: 15, width: 110 }} onClick={handleClick}>确定</Button>
              <Button type="default" style={{ width: 110 }} onClick={() => setEditable(!editable)}>手动编辑</Button>
            </>
          ) : null}

        </Row>
      </Modal>

    );

  }