feature: 售后作业项标准管理列表工时标准添加排序功能

杜志良
1 parent f9572dfa
Showing 1 changed file with 54 additions and 47 deletions
src/pages/cas/afterSaleConfiguration/jobManagement/index.tsx
 import React, { useState, useEffect } from 'react';
-import { Button, message, Table, Popconfirm, Select, Card, Dropdown, Menu, Divider } from 'antd';
+import { Button, message, Table, Popconfirm, Select, Card, Dropdown, Menu, Divider, TableProps } from 'antd';
 import CreateModal from './components/CreateModal';
 import UploadModal from './components/UploadModal';
 import { DownOutlined } from '@ant-design/icons';
@@ -16,6 +16,18 @@ const { Column } = Table;
 const { Option } = Select;
 const indexS = require('@/pages/cas/afterSaleConfiguration/jobManagement/index.less');
  
+interface DataType {
+  key: React.Key;
+  name: string;
+  age: number;
+  address: string;
+}
+
+const sortTypes = {
+  ascend: "asc",
+  descend: "desc",
+};
+
 export default function FactoryList() {
   const [visibleEdit, setVisibleEdit] = useState<boolean>(false);
   const [visibleUpload, setVisibleUpload] = useState<boolean>(false);
@@ -23,11 +35,15 @@ export default function FactoryList() {
   const [brand, setBrand] = useState<WorkProject.optionItem[]>([]);
   const [brandItem, setBrandItem] = useState<number>();
   const [brandName, setBrandName] = useState<string>();
-  const { loading, setLoading, list, setParams, paginationConfig } = usePagination(getWorkControl, {});
  
   const [specVisible, setSpecVisible] = useState(false);
   const [specList, setSpecList] = useState<any>([]);
  
+  // 记录排序方式，当排序方式改变时，重置分页current为1
+  const [sortType, setSortType] = useState<"asc" | "desc" | undefined>(undefined);
+
+  const { loading, setLoading, list, setParams, paginationConfig } = usePagination(getWorkControl, {});
+
   useEffect(() => {
     fetchBrand();
   }, []);
@@ -37,40 +53,51 @@ export default function FactoryList() {
   }, 800);
  
   function fetchBrand() {
-    getBrandFilterApi().then(res => {
-      const { data } = res;
-      setBrand(data || []);
-    }).catch(e => {
-      message.error(e.message);
-    });
+    getBrandFilterApi()
+      .then((res) => {
+        const { data } = res;
+        setBrand(data || []);
+      })
+      .catch((e) => {
+        message.error(e.message);
+      });
   }
  
   function handleDelete(param?: number) {
-    deleteProject(param).then(res => {
-      message.success("删除成功");
-      setLoading(true);
-    }).catch(e => {
-      message.error(e.message);
-    });
+    deleteProject(param)
+      .then((res) => {
+        message.success("删除成功");
+        setLoading(true);
+      })
+      .catch((e) => {
+        message.error(e.message);
+      });
   }
  
   function handleMenuClick(e: any) {
     // const brandName =
-    //   e.item.props.children[1].props.props.children[1].props.children;
+    // e.item.props.children[1].props.props.children[1].props.children;
     // setBrandName(brandName || '');
     // setBrandItem(e.key);
     setItem({});
     setVisibleEdit(true);
   }
  
+  const handleTableChange: TableProps<DataType>["onChange"] = (pagination, filters, sorter) => {
+    const isReset = sortType !== sortTypes[sorter.order];
+    setParams({ 
+      current: isReset ? 1 : pagination.current,
+      pageSize: pagination.pageSize,
+      orderType: sortTypes[sorter.order],
+    }, true);
+    setSortType(sortTypes[sorter.order]);
+  };
+
   return (
     <PageHeaderWrapper title="作业项标准管理">
       <Card className={indexS.page}>
         <div className={indexS.header}>
-          <Filter
-            onFilter={(value) => setParams({ ...value, current: 1 }, true)}
-            brandList={brand}
-          />
+          <Filter onFilter={(value) => setParams({ ...value, current: 1 }, true)} brandList={brand} />
           {/* <Dropdown
             overlay={
               <Menu onClick={handleMenuClick}>
@@ -84,11 +111,7 @@ export default function FactoryList() {
               新增 <DownOutlined />
             </Button>
           </Dropdown> */}
-          <Button
-            className={indexS.add}
-            type="primary"
-            onClick={handleMenuClick}
-          >
+          <Button className={indexS.add} type="primary" onClick={handleMenuClick}>
             新增
           </Button>
         </div>
@@ -98,16 +121,12 @@ export default function FactoryList() {
           loading={loading}
           rowKey={(record) => String(record.id)}
           style={{ marginTop: 20 }}
+          onChange={handleTableChange}
         >
           <Column title="作业项代码" dataIndex="itemCode" align="center" />
           {/* <Column title="分组代码" dataIndex="specGroupCode" align="center" /> */}
           <Column title="作业项名称" dataIndex="itemName" align="center" />
-          <Column
-            title="品牌"
-            dataIndex="brandName"
-            align="center"
-            render={(text) => <span>{text || "--"}</span>}
-          />
+          <Column title="品牌" dataIndex="brandName" align="center" render={(text) => <span>{text || "--"}</span>} />
           <Column
             title="车系"
             dataIndex="seriesName"
@@ -140,7 +159,7 @@ export default function FactoryList() {
             align="center"
             // render={(text) => workTypeEnum[text]}
           />
-          <Column title="标准工时" dataIndex="stdManHours" align="center" />
+          <Column title="标准工时" dataIndex="stdManHours" align="center" sorter />
           <Column
             title="操作"
             width="16%"
@@ -166,10 +185,7 @@ export default function FactoryList() {
                     okText="确定"
                     cancelText="取消"
                   >
-                    <a
-                      onClick={(e) => e.preventDefault()}
-                      style={{ color: "red" }}
-                    >
+                    <a onClick={(e) => e.preventDefault()} style={{ color: "red" }}>
                       删除
                     </a>
                   </Popconfirm>
@@ -178,12 +194,7 @@ export default function FactoryList() {
             )}
           />
         </Table>
-        {visibleUpload && (
-          <UploadModal
-            brandList={brand}
-            onCancel={() => setVisibleUpload(false)}
-          />
-        )}
+        {visibleUpload && <UploadModal brandList={brand} onCancel={() => setVisibleUpload(false)} />}
         {visibleEdit && (
           <CreateModal
             item={item}
@@ -193,12 +204,8 @@ export default function FactoryList() {
             brandName={brandName}
           />
         )}
-        <SpecModal
-          list={specList}
-          visible={specVisible}
-          setVisible={setSpecVisible}
-        />
+        <SpecModal list={specList} visible={specVisible} setVisible={setSpecVisible} />
       </Card>
     </PageHeaderWrapper>
   );
-}
 \ No newline at end of file
+}