src/pages/order3/RetailTask/index.tsx

import React, { useState, useEffect, useRef } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Card, Table, Button, Row, DatePicker, Col, InputNumber, message } from 'antd';
import { getRetailList, ListItem, saveHandelTack, ShopTaskList, save, saveParams } from './api';
import EModal from './component/Modal';
import moment from 'moment';
const { Column } = Table;
const day = new Date();
const month = day.getMonth() + 1;
const year = day.getFullYear();
const strtime = year + '-' + month;
let newDate = new Date(strtime);
const newDay = newDate.getTime();
export default function TacklingCarModels() {
  const [visible, setVisible] = useState<boolean>(false);
  const [loading, setLoading] = useState<boolean>(false);
  const [current, setCurrent] = useState<ShopTaskList>({});
  const [confirmLoading, setConfirmLoading] = useState<boolean>(false);
  const [saveLoading, setSaveLoading] = useState<boolean>(false);
  const [edit, setEdit] = useState<boolean>(false);
  const [date, setDate] = useState<number>(newDay);
  const [list, setList] = useState<ListItem>({});
  const [orginDara, setOrginDara] = useState<ListItem>({});
  const index = useRef(0);
  useEffect(() => {
    getList(newDay);
  }, []);
  function setReset() {
    setList({ ...orginDara });
    getList(newDay);
  }
  //查询列表
  function getList(date: number) {
    const params = {
      taskDate: date.valueOf(),
      autoAssign: false,
    };
    getRetailList(params).then(res => {
      setLoading(false);
      const data = res.data;
      setOrginDara(res.data || {});
      setList(data || {});
      message.success('请求成功!');
    }).catch(e => {
      setLoading(false);
      message.warning(e.message);
    });
  }
  function _ChangeMoth(date: any) {
    setLoading(true);
    setDate(date.valueOf());
    getList(date);
  }
  function _onChange(e: number, index: number) {
    const data = JSON.parse(JSON.stringify(list));
    data.shopTaskList![index].taskCount = e || 0;
    data.shopTaskList![index].clueDealTaskCount = Math.ceil((e || 0)*((data.shopTaskList![index].clueDealTaskRate || 0)/100));
    setList({ ...data });
  }
  /**
   * 修改线索到店零售台数
   * @param e 
   * @param index 
   */
  function handleChangeClue(e: number, index: number) {
    const data = JSON.parse(JSON.stringify(list));
    if (data.shopTaskList[index].taskCount < e) {
      message.error("线索到店零售台数不能大于零售任务！");
      return;
    }
    data.shopTaskList![index].clueDealTaskCount = e || 0;
    setList({ ...data });
  }
  //保存
  function handleClick() {
    setLoading(true);
    const params = {
      id: list.id,
      shopTaskList: list.shopTaskList
    };
    if (edit) {
      handleSave(params);
    }
  }
  //提交审批
  function saveClick() {
    setLoading(true);
    setSaveLoading(true);
    save(list.id).then(() => {
      setSaveLoading(false);
      setLoading(false);
      setList({ ...list, canModified: false });
      message.success('提交成功！');
    }).catch(e => {
      setLoading(false);
      message.warning(e.message);
      setSaveLoading(false);
    });
  }
  //手动提交
  function handleSave(params: saveParams) {
    setConfirmLoading(true);
    saveHandelTack(params).then(() => {
      message.success('提交成功！');
      getList(date);
      setConfirmLoading(false);
      setEdit(false);
    }).catch(e => {
      message.warning(e.message);
      setLoading(false);
      setConfirmLoading(false);
    });
  }
  return (
    <PageHeaderWrapper title="零售任务手动调整">
      <Card>
        <Row style={{ marginTop: 20, marginBottom: 20 }}>
          <Col span={4}><DatePicker defaultValue={moment(newDay)} picker="month" onChange={_ChangeMoth} /></Col>
        </Row>
        <Table
          dataSource={list.shopTaskList}
          loading={loading}
          rowKey="shopId"
          pagination={false}
          summary={pageData => {
            let total = 0;
            pageData.forEach(({ taskCount }) => {
              total += taskCount || 0;
            });
            return (
              <>
                {total == 0 ? null : (
                  <Table.Summary.Row>
                    <Table.Summary.Cell index={1}><span style={{ display: 'block', textAlign: 'center' }}>合计</span></Table.Summary.Cell>
                    <Table.Summary.Cell index={2}>
                      <span style={{ display: 'block', textAlign: 'center' }}>{total}</span>
                    </Table.Summary.Cell>
                    <Table.Summary.Cell index={3} />
                  </Table.Summary.Row>
                )}
              </>
            );
          }}
        >
          <Column title="门店" dataIndex="shopName" width={400} align="center" />
          <Column
            title="零售任务(台)"
            dataIndex="taskCount"
            align="center"
            render={(value, record, index) => {
              if (edit) {
                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 (edit) {
                return <InputNumber min={0} value={value} onChange={(e: any) => handleChangeClue(e, index)} />;
              } else {
                return <span>{value}</span>;
              }
            }}
          />
          <Column
            title="操作"
            align="center"
            render={(value, record, _index) => (
              <>
                <Button type="link" onClick={() => { setVisible(true); setCurrent(value); index.current = _index; }}>销售顾问任务</Button>
              </>
            )}
          />
        </Table>
        <EModal setVisible={setVisible} visible={visible} current={current} index={index.current} setList={setList} list={list} setCurrent={setCurrent} isHandledit={edit} />
        <Row justify="center" style={{ marginTop: 15 }}>
          {list.canModified ? (
            <>
              {edit ?
                <Button style={{ width: 110 }} type="primary" onClick={handleClick} loading={confirmLoading}>确定</Button> :
                <Button style={{ width: 110 }} type="primary" onClick={saveClick} loading={saveLoading}>提交审批</Button>}
              <Button style={{ width: 110, marginLeft: 15, backgroundColor: '#FFF' }} type="default" onClick={() => setEdit(!edit)}>手动编辑</Button>
              {edit ?
                <Button style={{ width: 110, marginLeft: 15 }} type="default" onClick={setReset} loading={confirmLoading}>取消</Button> :
                null}
            </>
          ) : null}
        </Row>
      </Card>
    </PageHeaderWrapper>
  );
}