FEV2 / fw-cms

  import React, { useState, useEffect } from 'react';
  import { PageHeaderWrapper } from '@ant-design/pro-layout';
  import { Card, Table, Button, Row, DatePicker, Col, InputNumber, message } from 'antd';
  import { getTackList, ListItem, saveHandelTack, ShopTaskList, save, saveParams } from './api';
  import EModal from './component/Modal';
  import moment from 'moment';

  import ApproveModal from '@/pages/order3/Common/ApproveModal';

  
  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 [date, setDate] = useState<number>(newDay);
    const [edit, setEdit] = useState<boolean>(false);
    const [list, setList] = useState<ListItem>({});
    const [orginDara, setOrginDara] = useState<ListItem>({});
    let index;

    const [approveOpen, setApproveOpen] = useState<boolean>(false);

  
    useEffect(() => {
      getList(newDay);
    }, []);
  
    function setReset() {
      setList({...orginDara});
      setEdit(false);
      getList(newDay);
    }
  
    //查询列表
    function getList(date: number) {
      const params = {
        taskDate: date.valueOf(),
        autoAssign: false,
      };
      getTackList(params).then(res => {
        setLoading(false);
        const data = res.data;
        setOrginDara(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 = list;
      data.shopTaskList![index].taskCount = e;
      setList({ ...data });
    }
    //保存
    function handleClick() {
      setLoading(true);
      const params = {
        id: list.id,
        shopTaskList: list.shopTaskList
      };
      handleSave(params);
    }
    //提交审批

    function saveClick(params?: any) {

      setLoading(true);
      setSaveLoading(true);

      save({...params, id: 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);
      });
    }
  

    function handleOpenApprove() {
      setApproveOpen(true);
    }
  

    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="操作"
              align="center"
              render={(value, record, _index) => (

                <>

                  <Button type="link" onClick={() => { setVisible(true); setCurrent(value); index = _index; }}>销售顾问任务</Button>

                </>
              )}
            />
          </Table>
          <EModal setVisible={setVisible} visible={visible} current={current} index={index} 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={handleOpenApprove} loading={saveLoading}>提交审批</Button>}

                <Button style={{ width: 110, marginLeft: 15, backgroundColor: '#FFF' }} type="default" onClick={() => setEdit(true)}>手动编辑</Button>
                {edit ?
                  <Button style={{ width: 110, marginLeft: 15 }} type="default" onClick={setReset} loading={confirmLoading}>取消</Button> :

                  null}
              </>
            ) : null}

          </Row>
        </Card>

        <ApproveModal callback={saveClick} open={approveOpen} setOpen={setApproveOpen} />
      </PageHeaderWrapper>
    );

  }