src/pages/order3/SaleTask/components/EntryTaskPreview.tsx

import React, { useState } from "react";
import {
  Card,
  DatePicker,
  Input,
  Radio,
  RadioChangeEvent,
  Row,
  Table,
} from "antd";
import { observer } from "mobx-react-lite";
import * as API from "../api";
import { OrderTaskApprovalType } from "../entity";
import useInitial from "@/hooks/useInitail";
import ModifiedTableCell from "./ModifiedTableCell";
import { ColumnsType } from "antd/es/table";
import { Moment } from "moment";
const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;
// 预览任务入口弹框
interface EntryTaskPreviewProps {
  month: Moment;
  params: any; // API.PreviewTaskReq
  showAdviserModal: (
    record: API.TaskListItem,
    type: OrderTaskApprovalType
  ) => void;
  showSeriesModal: (
    record: API.TaskListItem,
    type: OrderTaskApprovalType
  ) => void;
}
const EntryTaskPreview = ({
  month,
  params,
  showAdviserModal,
  showSeriesModal,
}: EntryTaskPreviewProps) => {
  const [type, setType] = useState(OrderTaskApprovalType.门店维度);
  const [keywords, setKeywords] = useState("");
  const { data, loading, setParams } = useInitial<
    API.PreviewTaskRes,
    API.PreviewTaskReq
  >(API.previewTask, {} as API.PreviewTaskRes, params);
  const handleChangeType = (e: RadioChangeEvent) => {
    const value = e.target.value;
    if (value === 99) {
      setType(OrderTaskApprovalType.新车一级管理维度);
      setParams(
        { orderTaskApprovalType: OrderTaskApprovalType.新车一级管理维度 },
        true
      );
      return;
    }
    setType(value);
    setParams({ orderTaskApprovalType: value, keywords }, true);
  };
  // 查看顾问任务
  const handlePreviewAdviserTask = (record: API.TaskListItem) => {
    if (record.dataId === -999) {
      return;
    }
    showAdviserModal(record, type);
  };
  // 查看车系任务
  const handlePreviewSeriesTask = (record: API.TaskListItem) => {
    if (record.seriesTaskCount === 0) {
      return;
    }
    showSeriesModal(record, type);
  };
  const columns: ColumnsType<API.TaskListItem> = [
    {
      title: type === OrderTaskApprovalType.门店维度 ? "门店" : "姓名",
      width: type === OrderTaskApprovalType.门店维度 ? 150 : 100,
      dataIndex: "dataName",
      filterSearch: true,
      onFilter: (
        value: string | number | boolean,
        record: API.TaskListItem
      ) => {
        return record.dataName.startsWith(value.toString());
      },
    },
    {
      title: "零售任务(台)",
      children: [
        {
          title: "合计",
          dataIndex: "taskCount",
          key: "taskCount",
          render: (text: string, record: API.TaskListItem) => {
            return ModifiedTableCell(record, "taskCount");
          },
        },
        {
          title: "新能源车",
          dataIndex: "newEnergyTaskCount",
          key: "newEnergyTaskCount",
          render: (text: string, record: API.TaskListItem) => {
            return ModifiedTableCell(record, "newEnergyTaskCount");
          },
        },
        {
          title: "传统燃油车",
          dataIndex: "fuelVehicleTaskCount",
          key: "fuelVehicleTaskCount",
          render: (text: string, record: API.TaskListItem) => {
            return ModifiedTableCell(record, "fuelVehicleTaskCount");
          },
        },
      ],
    },
    {
      title: "单车毛利任务(元)",
      dataIndex: "vehicleGrossProfitTask",
      render: (text: string, record: API.TaskListItem) => {
        if (record.dataId === -999) {
          return <div style={{ textAlign: "center" }}>-</div>;
        }
        return ModifiedTableCell(record, "vehicleGrossProfitTask");
      },
    },
    {
      title: "线索到店成交(台)",
      width: 100,
      dataIndex: "clueDealTaskCount",
      render: (text: string, record: API.TaskListItem) => {
        return ModifiedTableCell(record, "clueDealTaskCount");
      },
    },
    {
      title: "首客试驾成交(台)",
      width: 100,
      dataIndex: "testDriveTaskCount",
      render: (text: string, record: API.TaskListItem) => {
        return ModifiedTableCell(record, "testDriveTaskCount");
      },
    },
    {
      title: "攻坚车任务(台)",
      width: 100,
      dataIndex: "tackCarTaskCount",
      render: (text: string, record: API.TaskListItem) => {
        return ModifiedTableCell(record, "tackCarTaskCount");
      },
    },
    {
      title: "车系任务(台)",
      width: 100,
      dataIndex: "seriesTaskCount",
      render: (text: string, record: API.TaskListItem) => {
        if (record.dataId === -999) return text;
        return <a onClick={() => handlePreviewSeriesTask(record)}>{text}</a>;
      },
    },
  ];
  const extraColumns: ColumnsType<API.TaskListItem> = [
    {
      title: "销顾任务",
      render: (text: string, record: API.TaskListItem) => {
        if (record.dataId === -999) {
          return "-";
        }
        return <a onClick={() => handlePreviewAdviserTask(record)}>查看</a>;
      },
    },
  ];
  return (
    <>
      <Row align="middle" justify="start" style={{ marginBottom: 20 }}>
        <DatePicker
          style={{ width: 245 }}
          picker="month"
          value={month}
          allowClear={false}
          disabled
        />
        <Input.Search
          allowClear
          placeholder="搜索门店或顾问"
          style={{ width: 263, marginLeft: 20 }}
          value={keywords}
          onChange={(e) => setKeywords(e.target.value)}
          onSearch={(v) => {
            setParams({ keywords: v }, true);
          }}
        />
      </Row>
      <Card
        title={
          <Row align="middle" justify="start">
            <RadioGroup onChange={handleChangeType} value={type}>
              <RadioButton value={OrderTaskApprovalType.门店维度}>
                门店
              </RadioButton>
              <RadioButton value={OrderTaskApprovalType.销售顾问维度}>
                销顾
              </RadioButton>
              <RadioButton value={99}>销售管理层</RadioButton>
            </RadioGroup>
            {type !== OrderTaskApprovalType.门店维度 &&
              type !== OrderTaskApprovalType.销售顾问维度 && (
                <RadioGroup
                  onChange={handleChangeType}
                  value={type}
                  style={{ marginLeft: 20 }}
                >
                  <RadioButton value={OrderTaskApprovalType.新车一级管理维度}>
                    销售一级管理
                  </RadioButton>
                  <RadioButton value={OrderTaskApprovalType.新车二级管理维度}>
                    销售二级管理
                  </RadioButton>
                  <RadioButton value={OrderTaskApprovalType.新车三级管理维度}>
                    销售三级管理
                  </RadioButton>
                </RadioGroup>
              )}
          </Row>
        }
      >
        <Table
          bordered
          rowKey="dataId"
          columns={
            type === OrderTaskApprovalType.门店维度
              ? columns.concat(extraColumns)
              : columns
          }
          loading={loading}
          dataSource={data.taskList}
          pagination={false}
          scroll={{ y: 450 }}
        />
      </Card>
    </>
  );
};
export default observer(EntryTaskPreview);