FEV2 / fw-cms

  import React, { useEffect, useRef, useState } from "react";
  import { Table, Row, Input, Modal, Button, message } from "antd";

  import { useStore } from "../../../store";

  import * as API from "../../../api";

  import AdviserTaskEdit from "./AdviserTaskEdit";

  import { history, useRequest } from "umi";

  import { cloneDeep } from "lodash";

  import { ColumnsType } from "antd/es/table";

  interface AdviserTaskEditForm {
    submit: (callback: (data: any) => void) => void;
  }
  

  interface AdviserTaskProps {
    form: any;
  }
  
  export default function AdviserTask({ form }: AdviserTaskProps) {

    const adviserTaskEditRef = useRef<AdviserTaskEditForm>(null);

    const {
      shopTaskItem,
      isReadOnly,
      setShopTaskItem,
      editAdviser,
      setEditAdviser,
    } = useStore();

    const [advisersFiltered, setAdvisersFiltered] = useState<API.StaffTaskItem[]>(
      []

    );

    const [visible, setVisible] = useState(false);

    const saveShopSaleTaskHook = useRequest(API.saveShopSaleTask, {
      manual: true,

      throwOnError: true,

    });
  

    // 用于顾问前端搜索

    useEffect(() => {
      setAdvisersFiltered(shopTaskItem?.staffTaskList ?? []);
    }, [shopTaskItem]);
  
    const filterByAdviserName = (value: string) => {
      const list = (shopTaskItem?.staffTaskList ?? []).filter(
        (item: any) => item.staffName.indexOf(value) !== -1
      );
      setAdvisersFiltered(list);
    };

    // 前端更新编辑后的顾问分配任务

    const onOk = () => {
      adviserTaskEditRef.current?.submit((newTask) => {

        setShopTaskItem(newTask);

        setAdvisersFiltered(newTask?.staffTaskList); // 刷新列表

        setVisible(false);
      });
    };
  

    const handleGoBack = () => {
      history.goBack(); // todo 提示是否有未保存的修改
    };
  
    const handleSaveTask = async () => {

      const shopFormValue = form.getFieldsValue();
      const { taskId, ...other } = shopTaskItem!; // 因为门店零售任务分配表格数据填写时未修改 store

      saveShopSaleTaskHook

        .run({ ...other, id: taskId, ...shopFormValue })

        .then(() => {
          message.success("保存草稿成功");

        })
        .catch((error: any) => {
          message.error(error.message ?? "请求失败");
        });
    };
  

    const columns: ColumnsType<API.StaffTaskItem> = [
      {
        title: "销售顾问",
        width: 100,
        dataIndex: "staffName",
      },
      {
        title: "零售任务(台)",
        children: [
          {
            title: "合计",
            dataIndex: "taskCount",
            key: "taskCount",
          },
          {
            title: "新能源车",
            dataIndex: "newEnergyTaskCount",
            key: "newEnergyTaskCount",
          },
          {
            title: "传统燃油车",
            dataIndex: "fuelVehicleTaskCount",
            key: "fuelVehicleTaskCount",
          },
        ],
      },
      {
        title: "毛利任务(元)",
        children: [
          {
            title: "合计",
            dataIndex: "grossProfitTaskTotal",
            key: "grossProfitTaskTotal",
            render: (text: string, record: API.StaffTaskItem) => {
              return (record.taskCount * record.vehicleGrossProfitTask).toFixed(
                2
              );
            },
          },
          {
            title: "单车",
            dataIndex: "vehicleGrossProfitTask",
            key: "vehicleGrossProfitTask",
          },
        ],
      },
      {
        title: "线索到店成交(台)",
        width: 100,
        dataIndex: "clueDealTaskCount",
        key: "clueDealTaskCount",
      },
      {
        title: "首客试驾成交(台)",
        width: 100,
        dataIndex: "testDriveTaskCount",
        key: "testDriveTaskCount",
      },
      {
        title: "攻坚车任务(台)",
        width: 100,
        dataIndex: "tackCarTaskCount",
        key: "tackCarTaskCount",
      },
      {
        title: "车系任务(台)",
        width: 100,
        dataIndex: "seriesTaskCount",
        key: "seriesTaskCount",
      },
      {
        title: "操作",
        render: (text: string, record: API.StaffTaskItem) => {
          if (isReadOnly) return "-";
          return (
            <a
              onClick={() => {
                setEditAdviser(cloneDeep(record)); // 注意对象引用
                setVisible(true);
              }}
            >
              编辑
            </a>
          );
        },
      },
    ];
  

    return (
      <>
        <Row
          align="middle"
          justify="start"

          style={{ marginBottom: 20, marginTop: 14 }}

        >

          <Input.Search
            allowClear
            placeholder="顾问名称"
            style={{ width: 260, marginLeft: 15 }}

            onSearch={filterByAdviserName}

          />
        </Row>

        <Table

          columns={columns}

          dataSource={[...advisersFiltered]}

          pagination={false}
          rowKey="id"
          loading={false}

        />

        <Row align="middle" justify="center" style={{ marginTop: 50 }}>
          <Button onClick={handleGoBack}>返回列表</Button>
          {!isReadOnly && (
            <Button
              type="primary"
              style={{ marginLeft: 10 }}
              loading={saveShopSaleTaskHook.loading}
              onClick={handleSaveTask}
            >
              保存草稿
            </Button>
          )}
        </Row>

        <Modal
          width={1200}

          title={`当前选择顾问：${editAdviser?.staffName}`}

          open={visible}

          onOk={onOk}

          okText="确认"

          onCancel={() => setVisible(false)}

          maskClosable={false}
          keyboard={false}
          destroyOnClose

        >

          {/* @ts-ignore */}

          <AdviserTaskEdit ref={adviserTaskEditRef} />

        </Modal>

      </>
    );
  }