二级表头

Shinner
1 parent 33bc0462
Showing 2 changed files with 109 additions and 90 deletions
src/pages/order3/SaleTask/components/EntryTaskPreview.tsx
src/pages/order3/SaleTask/subpages/TaskEdit/components/AdviserTask.tsx
@@ -5,8 +5,8 @@ import * as API from &quot;../api&quot;;
 import { OrderTaskApprovalType } from "../entity";
 import useInitial from "@/hooks/useInitail";
 import ModifiedTableCell from "./ModifiedTableCell";
+import { ColumnsType } from "antd/es/table";
-const { Column } = Table;
 const RadioButton = Radio.Button;
 const RadioGroup = Radio.Group;
@@ -67,6 +67,102 @@ const EntryTaskPreview = ({
     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) => {
+        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 (
     <Card
       title={
@@ -102,94 +198,18 @@ const EntryTaskPreview = ({
       }
     >
       <Table
+        bordered
         rowKey="dataId"
+        columns={
+          type === OrderTaskApprovalType.门店维度
+            ? columns.concat(extraColumns)
+            : columns
+        }
         loading={loading}
         dataSource={data.taskList}
         pagination={false}
         scroll={{ y: 450 }}
-      >
-        <Column
-          title={type === OrderTaskApprovalType.门店维度 ? "门店" : "姓名"}
-          dataIndex="dataName"
-          filterSearch
-          onFilter={(
-            value: string | number | boolean,
-            record: API.TaskListItem
-          ) => {
-            return record.dataName.startsWith(value.toString());
-          }}
-        />
-        <Column
-          title="零售任务(台)"
-          dataIndex="taskCount"
-          render={(text: string, record: API.TaskListItem) => {
-            return ModifiedTableCell(record, "taskCount");
-          }}
-        />
-        <Column
-          title="新能源车任务(台)"
-          dataIndex="newEnergyTaskCount"
-          render={(text: string, record: API.TaskListItem) => {
-            return ModifiedTableCell(record, "newEnergyTaskCount");
-          }}
-        />
-        <Column
-          title="传统燃油车任务(台)"
-          dataIndex="fuelVehicleTaskCount"
-          render={(text: string, record: API.TaskListItem) => {
-            return ModifiedTableCell(record, "fuelVehicleTaskCount");
-          }}
-        />
-        <Column
-          title="单车毛利任务(元)"
-          dataIndex="vehicleGrossProfitTask"
-          render={(text: string, record: API.TaskListItem) => {
-            return ModifiedTableCell(record, "vehicleGrossProfitTask");
-          }}
-        />
-        <Column
-          title="线索到店零售台数(台)"
-          dataIndex="clueDealTaskCount"
-          render={(text: string, record: API.TaskListItem) => {
-            return ModifiedTableCell(record, "clueDealTaskCount");
-          }}
-        />
-        <Column
-          title="首客试驾成交任务数(台)"
-          dataIndex="testDriveTaskCount"
-          render={(text: string, record: API.TaskListItem) => {
-            return ModifiedTableCell(record, "testDriveTaskCount");
-          }}
-        />
-        <Column
-          title="攻坚车任务数(台)"
-          dataIndex="tackCarTaskCount"
-          render={(text: string, record: API.TaskListItem) => {
-            return ModifiedTableCell(record, "tackCarTaskCount");
-          }}
-        />
-        <Column
-          title="车系任务数(台)"
-          dataIndex="seriesTaskCount"
-          render={(text: string, record: API.TaskListItem) => {
-            if (record.dataId === -999) return text;
-            return (
-              <a onClick={() => handlePreviewSeriesTask(record)}>{text}</a>
-            );
-          }}
-        />
-        {type === OrderTaskApprovalType.门店维度 && (
-          <Column
-            title="销顾"
-            render={(text: string, record: API.TaskListItem) => {
-              if (record.dataId === -999) return "-";
-              return (
-                <a onClick={() => handlePreviewAdviserTask(record)}>查看</a>
-              );
-            }}
-          />
-        )}
-      </Table>
+      />
     </Card>
   );
 };
@@ -121,30 +121,28 @@ export default function AdviserTask({ form }: AdviserTaskProps) {
       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",
     },
+  ];
+
+  const extraColumns: ColumnsType<API.StaffTaskItem> = [
     {
       title: "操作",
       render: (text: string, record: API.StaffTaskItem) => {
-        if (isReadOnly) return "-";
         return (
           <a
             onClick={() => {
@@ -174,7 +172,8 @@ export default function AdviserTask({ form }: AdviserTaskProps) {
         />
       </Row>
       <Table
-        columns={columns}
+        bordered
+        columns={isReadOnly ? columns : columns.concat(extraColumns)}
         dataSource={[...advisersFiltered]}
         pagination={false}
         rowKey="id"