FEV2 / fw-cms

  import React, { useEffect, useState } from "react";

  import {
    Card,
    Table,
    DatePicker,
    Row,
    message,
    Input,
    Button,
    Modal,
  } from "antd";
  import * as API from "./api";
  import { PageHeaderWrapper } from "@ant-design/pro-layout";
  import { history } from "umi";

  import moment, { Moment } from "moment";

  import useInitial from "@/hooks/useInitail";
  import { Provider, useStore } from "./store";

  import ApprovalProgressModal from "@/pages/stock/AdvanceProgress/components/ApproveModal";

  import EntryTaskPreview from "./components/EntryTaskPreview";
  import { OrderTaskApprovalType } from "./entity";
  import AdviserTaskPreview from "./components/AdviserTaskPreview";
  import SeriesTaskPreview from "./components/SeriesTaskPreview";

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

  import SaleTaskAutoAssign from "./components/SaleTaskAutoAssign";
  import SaleTaskBatchSet from "./components/SaleTaskBatchSet";

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

  
  export default () => (
    <Provider>
      <SaleTaskList />
    </Provider>
  );
  
  function SaleTaskList() {

    const { isReadOnly, setShopTaskItem, setIsReadOnly } = useStore();
    const [approve, setApprove] = useState({ visible: false, orderNo: "" });

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

    const [targetMonth, setTargetMonth] = useState(moment());

    const [etpVisible, setEtpVisible] = useState(false);
    const [previewTaskParams, setPreviewTaskParams] = useState({});
    const [atpVisible, setAtpVisible] = useState(false);
    const [adviserTaskParams, setAdviserTaskParams] = useState({});
    const [stpVisible, setStpVisible] = useState(false);
    const [seriesTaskParams, setSeriesTaskParams] = useState({});

    const [autoVisible, setAutoVisible] = useState(false);
    const [batchVisible, setBatchVisible] = useState(false);
  

    const { data, loading, setParams } = useInitial(
      API.getSaleTaskApi,
      {} as API.GetSaleTaskApiRes,
      {

        taskDate: targetMonth.valueOf(),

      }
    );
  

    useEffect(() => {

      setIsReadOnly(!data.canModified);

    }, [data]);
  

    const handleChangeMonth = (date: Moment | null) => {
      setTargetMonth(moment(date));
      setParams({ taskDate: moment(date).valueOf() }, true);
    };
  
    const goToEditPage = (record: API.ShopTaskItem) => {

      setShopTaskItem(record);

      history.push({
        pathname: "/order3/saleTask/edit",

        query: {
          readOnly: isReadOnly ? "1" : "0",
          shopId: String(record.shopId),
          taskDate: String(targetMonth.valueOf()),

        },

      });
    };
  

    // 查看销顾任务
    const goToAdviserPage = (record: API.ShopTaskItem) => {
      history.push({
        pathname: "/order3/saleTask/edit",
        query: {
          readOnly: isReadOnly ? "1" : "0",
          shopId: String(record.shopId),
          taskDate: String(targetMonth.valueOf()),
          currTab: "2",
        },
      });
    };
  

    // 查看流程进度
    const viewProcess = () => {

      setApprove({

        visible: true,

        orderNo: data.approvalNumber,
      });
    };
  

    const cancelSaleTask = () => {

      Modal.confirm({
        title: "提示",

        content: `确认撤销【${targetMonth.format("YYYY-MM")}】零售任务审批吗？`,

        zIndex: 1002,
        onOk: () => {
          API.cancelSaleTask({
            id: data.id,
          })
            .then((res) => {
              message.success("撤销成功");
            })
            .catch((error: any) => {
              message.error(error.message ?? "请求失败");
            })
            .finally(() => {
              setParams({}, true);
            });
        },
      });
    };
  

    const submitSaleTask = (parmas: any) => {
      const hide = message.loading("提交中", 0);
      API.submitSaleTask({
        id: data.id,
        ...parmas,
      })
        .then((res) => {
          message.success("提交成功");
        })
        .catch((error: any) => {
          message.error(error.message ?? "请求失败");
        })
        .finally(() => {
          hide();
          setParams({}, true);
        });

    };
  

    const handlePreviewTask = () => {
      const params: any = {
        id: data.id,
        orderTaskApprovalType: OrderTaskApprovalType.门店维度,
      };
      setPreviewTaskParams(params);
      setEtpVisible(true);
    };
  

    // 销顾任务
    const showAdviserModal = (
      record: API.TaskListItem,
      type: OrderTaskApprovalType
    ) => {
      const params: any = {
        id: data.id,
        taskId: record.id,
        orderTaskApprovalType: OrderTaskApprovalType.门店维度, // 只有门店有查看销顾任务
      };
      switch (type) {
        case OrderTaskApprovalType.门店维度:
          params.shopId = record.dataId;
          break;
        case OrderTaskApprovalType.销售顾问维度:
          params.staffId = record.dataId;
          break;
        case OrderTaskApprovalType.新车一级管理维度:
          params.firstManageId = record.dataId;
          break;
        case OrderTaskApprovalType.新车二级管理维度:
          params.secondManageId = record.dataId;
          break;
        case OrderTaskApprovalType.新车三级管理维度:
          params.thirdManageId = record.dataId;
          break;
        default:
          break;
      }
      setAdviserTaskParams(params);
      setAtpVisible(true);
    };
  
    // 销顾任务--查看车系任务
    const showSeriesModalByAdviser = (record: API.TaskListItem) => {
      const params = { ...adviserTaskParams } as any;
      params.taskId = record.id;
      params.orderTaskApprovalType = OrderTaskApprovalType.车系;
      params.staffId = record.dataId;
      setSeriesTaskParams(params);
      setStpVisible(true);
    };
  
    // 车系任务
    const showSeriesModal = (
      record: API.TaskListItem,
      type: OrderTaskApprovalType
    ) => {
      const params: any = {
        id: data.id,
        taskId: record.id,
        orderTaskApprovalType: OrderTaskApprovalType.车系,
      };
      switch (type) {
        case OrderTaskApprovalType.门店维度:
          params.shopId = record.dataId;
          break;
        case OrderTaskApprovalType.销售顾问维度:
          params.staffId = record.dataId;
          break;
        case OrderTaskApprovalType.新车一级管理维度:
          params.firstManageId = record.dataId;
          break;
        case OrderTaskApprovalType.新车二级管理维度:
          params.secondManageId = record.dataId;
          break;
        case OrderTaskApprovalType.新车三级管理维度:
          params.thirdManageId = record.dataId;
          break;
        default:
          break;
      }
      setSeriesTaskParams(params);
      setStpVisible(true);
    };
  

    const handleAutoAssignRefresh = () => {
      setAutoVisible(false);
      setParams({}, true);
    };
    const handleBatchSetRefresh = () => {
      setBatchVisible(false);
      setParams({}, true);
    };
  

    const columns: ColumnsType<API.ShopTaskItem> = [
      {
        title: "门店",
        dataIndex: "shopName",
      },
      {
        title: "零售任务(台)",
        width: 100,
        children: [
          {
            title: "合计",
            dataIndex: "taskCount",
            key: "taskCount",
          },
          {
            title: "新能源车",
            dataIndex: "newEnergyTaskCount",
            key: "newEnergyTaskCount",
          },
          {
            title: "传统燃油车",
            dataIndex: "fuelVehicleTaskCount",
            key: "fuelVehicleTaskCount",
          },
          {
            title: "毛利任务(元)",
            children: [
              {
                title: "单车",
                dataIndex: "vehicleGrossProfitTask",
                key: "vehicleGrossProfitTask",
              },
              {
                title: "合计",
                dataIndex: "grossProfitTaskTotal",
                key: "grossProfitTaskTotal",
                render: (text: string, record: API.ShopTaskItem) => {
                  return (
                    record.taskCount * record.vehicleGrossProfitTask
                  ).toFixed(2);
                },
              },
            ],
          },
        ],
      },
      {
        title: "其中（台）",
        children: [
          {
            title: "线索到店零售",
            dataIndex: "clueDealTaskCount",
            key: "clueDealTaskCount",
          },
          {
            title: "首客试驾成交",
            dataIndex: "testDriveTaskCount",
            key: "testDriveTaskCount",
          },
          {
            title: "攻坚车",
            dataIndex: "tackCarTaskCount",
            key: "tackCarTaskCount",
          },
          {
            title: "车系",
            dataIndex: "seriesTaskCount",
            key: "seriesTaskCount",
          },
        ],
      },
      {
        title: "销顾任务",
        render: (text: string, record: API.ShopTaskItem) => {
          return (
            <a
              onClick={() => {
                goToAdviserPage(record);
              }}
            >
              查看
            </a>
          );
        },
      },
      {
        title: "操作",
        render: (text: string, record: API.ShopTaskItem) => {
          return (
            <a
              onClick={() => {
                goToEditPage(record);
              }}
            >
              {isReadOnly ? "查看" : "编辑"}
            </a>
          );
        },
      },
    ];
  

    return (
      <PageHeaderWrapper title="零售任务分配">
        <Card>

          <Row
            align="middle"
            justify="space-between"
            style={{ marginBottom: 20 }}
          >
            <Row align="middle" justify="start" style={{ marginBottom: 20 }}>
              <DatePicker
                placeholder="月度"
                style={{ width: 260 }}
                picker="month"
                value={targetMonth}
                onChange={handleChangeMonth}
                allowClear={false}
              />
              <Input.Search
                allowClear
                placeholder="门店名称"
                style={{ width: 260, marginLeft: 15 }}
                onSearch={(v) => {
                  setParams({ shopName: v }, true);
                }}
              />
            </Row>
            {!isReadOnly && (
              <Row align="middle" justify="start" style={{ marginBottom: 20 }}>
                <Button type="primary" onClick={() => setAutoVisible(true)}>
                  零售任务快捷分配
                </Button>
                <Button
                  type="primary"
                  style={{ marginLeft: 10 }}
                  onClick={() => setBatchVisible(true)}
                >
                  批量设置
                </Button>
              </Row>
            )}

          </Row>
          <Table
            rowKey="id"

            bordered

            loading={loading}

            columns={columns}

            dataSource={data.shopTaskList}
            pagination={false}

            scroll={{ y: 450 }}

            summary={() => {

              if (!data || !data.shopTaskList || data.shopTaskList.length <= 0) {
                return null;
              }

              return (
                <Table.Summary fixed="bottom">
                  <Table.Summary.Row
                    style={{
                      background: "#FAFAFA",
                      fontSize: 18,
                      fontWeight: 500,
                    }}
                  >

                    <Table.Summary.Cell index={1}>合计</Table.Summary.Cell>
                    <Table.Summary.Cell index={2}>

                      {data.totalTaskCount}
                    </Table.Summary.Cell>

                    <Table.Summary.Cell index={3}>

                      {data.newEnergyTaskCount}
                    </Table.Summary.Cell>

                    <Table.Summary.Cell index={4}>

                      {data.fuelVehicleTaskCount}
                    </Table.Summary.Cell>

                    <Table.Summary.Cell index={5}>-</Table.Summary.Cell>
                    <Table.Summary.Cell index={6}>-</Table.Summary.Cell>

                    <Table.Summary.Cell index={7}>

                      {data.clueDealTaskCount}

                    </Table.Summary.Cell>

                    <Table.Summary.Cell index={8}>

                      {data.testDriveTaskCount}
                    </Table.Summary.Cell>

                    <Table.Summary.Cell index={9}>

                      {data.tackCarTaskCount}

                    </Table.Summary.Cell>

                    <Table.Summary.Cell index={10}>

                      {data.seriesTaskCount}
                    </Table.Summary.Cell>

                    <Table.Summary.Cell index={11} />
                    <Table.Summary.Cell index={12} />

                  </Table.Summary.Row>
                </Table.Summary>
              );
            }}

          />

          {data.revoke ? (

            <Row align="middle" justify="center" style={{ marginTop: 50 }}>

              <Button onClick={cancelSaleTask}>撤销</Button>
              <Button
                type="primary"
                style={{ marginLeft: 10 }}
                onClick={viewProcess}
              >
                审批进度
              </Button>

              <Button
                type="primary"
                style={{ marginLeft: 10 }}
                onClick={handlePreviewTask}
              >
                预览任务
              </Button>

            </Row>
          ) : (

            <Row align="middle" justify="center" style={{ marginTop: 50 }}>
              {!isReadOnly && (

                <Button type="primary" onClick={() => setApproveOpen(true)}>

                  提交审批

                </Button>

              )}
              <Button
                type="primary"
                style={{ marginLeft: 10 }}
                onClick={handlePreviewTask}
              >
                预览任务
              </Button>
            </Row>

          )}

        </Card>

        <Modal

          width={1200}
          title="预览任务"
          open={etpVisible}
          onCancel={() => setEtpVisible(false)}

          destroyOnClose
          footer={null}
        >

          <Row align="middle" justify="start" style={{ marginBottom: 20 }}>
            <DatePicker
              placeholder="月度"
              style={{ width: 230 }}
              picker="month"
              value={targetMonth}
              allowClear={false}
              disabled
            />

            {/* <Input.Search

              allowClear
              placeholder="门店名称"
              style={{ width: 263, marginLeft: 20 }}
              onSearch={(v) => {
                // todo setParams({ shopName: v }, true);
              }}

            /> */}

          </Row>
          <EntryTaskPreview
            params={previewTaskParams}

            showAdviserModal={showAdviserModal}
            showSeriesModal={showSeriesModal}

          />
        </Modal>
        <Modal
          width={1200}
          title="销顾任务"
          open={atpVisible}
          onCancel={() => setAtpVisible(false)}
          destroyOnClose
          footer={null}
        >
          <AdviserTaskPreview
            params={adviserTaskParams}

            showSeriesModal={showSeriesModalByAdviser}

          />
        </Modal>
        <Modal
          width={600}
          title="车系任务"
          open={stpVisible}
          onCancel={() => setStpVisible(false)}
          destroyOnClose
          footer={null}
        >
          <SeriesTaskPreview params={seriesTaskParams} />

        </Modal>

        <Modal
          width={800}
          title="零售任务快捷分配"
          open={autoVisible}

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

          destroyOnClose
          footer={null}

          maskClosable={false}

        >
          <SaleTaskAutoAssign
            id={data.id}
            value={data.shopTaskList}

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

            onRefresh={handleAutoAssignRefresh}

          />
        </Modal>
        <Modal
          width={800}
          title="批量设置"
          open={batchVisible}

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

          destroyOnClose
          footer={null}

          maskClosable={false}

        >

          <SaleTaskBatchSet
            id={data.id}
            onCancel={() => setBatchVisible(false)}
            onRefresh={handleBatchSetRefresh}
          />

        </Modal>

        <ApprovalProgressModal
          visible={approve.visible}
          orderNo={approve.orderNo}
          onCancel={() => setApprove({ visible: false, orderNo: "" })}
        />

        <ApproveModal
          callback={submitSaleTask}
          open={approveOpen}
          setOpen={setApproveOpen}
        />

      </PageHeaderWrapper>
    );
  }