upp

src/assets/styles/base.css

@@ -147,6 +147,14 @@ textarea {
 #root .ant-table-cell {
   text-align: center !important;
 }
+#root #A2Table3 .ant-table-row-expand-icon {
+  background-color: var(--themeColor);
+  color: #fff;
+}
+#root #A2Table3 .ant-table-cell-with-append {
+  display: flex;
+  justify-content: start;
+}
 [hidden] {
   display: none !important;
 }

src/assets/styles/base.less

@@ -83,11 +83,12 @@ textarea {
   overflow-y: overlay;
 
   // ？的提示
-  .iconHoverTit{
+  .iconHoverTit {
     display: flex;
     align-items: center;
     justify-content: center;
-    .iconHoverTitTxt{
+
+    .iconHoverTitTxt {
       background-color: var(--themeColor);
       color: #fff;
       width: 16px;
@@ -196,6 +197,22 @@ textarea {
   .ant-table-cell {
     text-align: center !important;
   }
+
+
+  // 树型 表格 定制化
+  #A2Table3 {
+    .ant-table-row-expand-icon {
+      background-color: var(--themeColor);
+      color: #fff;
+    }
+
+    .ant-table-cell-with-append {
+      display: flex;
+      justify-content: start;
+    }
+  }
+
+
 }
 
 

src/pages/A2Dict/A2Tab1/A2Table3.tsx

@@ -1,21 +1,26 @@
 import React, { useCallback, useMemo } from "react";
-import styles from "./index.module.scss";
 import { Button, Popconfirm, Table } from "antd";
 import { useSelector } from "react-redux";
 import { RootState } from "@/store";
 import { A2_APIdel, A2_APIsort } from "@/store/action/A2Dict";
 import { MessageFu } from "@/utils/message";
 import { A5TableType } from "@/types";
+import { A5_APIdel, A5_APIsort } from "@/store/action/A5Section";
 
 type Props = {
   editFu: (item: A5TableType) => void;
   upTaleFu: () => void;
-  type: "job" | "status";
+  myType: "字典" | "部门";
 };
 
-function A2Table3({ editFu, upTaleFu, type }: Props) {
+function A2Table3({ editFu, upTaleFu, myType }: Props) {
   // 获取表格数据
-  const tableList = useSelector((state: RootState) => state.A2Dict.A2Tab1_2Arr);
+  const arr1 = useSelector((state: RootState) => state.A2Dict.A2Tab1_2Arr);
+  const arr2 = useSelector((state: RootState) => state.A5Section.tableList);
+  const tableList = useMemo(() => {
+    if (myType === "字典") return arr1;
+    else return arr2;
+  }, [arr1, arr2, myType]);
 
   // 树型数组扁平化
   const arrAllArr = useMemo(() => {
@@ -53,38 +58,41 @@ function A2Table3({ editFu, upTaleFu, type }: Props) {
     [arrAllArr]
   );
 
+  // 点击删除
+  const delById = useCallback(
+    async (id: string) => {
+      const res = myType === "字典" ? await A2_APIdel(id) : await A5_APIdel(id);
+      if (res.code === 0) {
+        MessageFu.success("删除成功!");
+        upTaleFu();
+      }
+    },
+    [myType, upTaleFu]
+  );
+
   // 点击 上移 和下移
   const sortMoveFu = useCallback(
     async (flag: 1 | -1, index: number, oldId: string, fId: string) => {
       const arr = sonArrFu(fId);
       const newId = arr[index + flag].id;
 
-      const res = await A2_APIsort(oldId, newId);
+      const res =
+        myType === "字典"
+          ? await A2_APIsort(oldId, newId)
+          : await A5_APIsort(oldId, newId);
 
       if (res.code === 0) {
         upTaleFu();
         MessageFu.success("排序修改成功!");
       }
     },
-    [upTaleFu, sonArrFu]
-  );
-
-  // 点击删除
-  const delById = useCallback(
-    async (id: string) => {
-      const res = await A2_APIdel(id);
-      if (res.code === 0) {
-        MessageFu.success("删除成功!");
-        upTaleFu();
-      }
-    },
-    [upTaleFu]
+    [sonArrFu, myType, upTaleFu]
   );
 
   const columns = useMemo(() => {
     return [
       {
-        title: <>&emsp;&nbsp;部门名称</>,
+        title: <>&emsp;&nbsp;{myType === "字典" ? "字典值" : "部门名称"}</>,
         dataIndex: "name",
       },
       {
@@ -104,8 +112,8 @@ function A2Table3({ editFu, upTaleFu, type }: Props) {
       },
       {
         title: "同级排序",
-        render: (item: A5TableType) =>
-          item.name === "未分类" ? "-" : item.level + "级 - " + item.sort,
+        render: (item: A5TableType, _: any, index: number) =>
+          item.name === "未分类" ? "-" : item.level + "级 - " + (index + 1),
       },
       {
         title: "操作",
@@ -169,12 +177,14 @@ function A2Table3({ editFu, upTaleFu, type }: Props) {
         ),
       },
     ];
-  }, [delById, editFu, sonArrFu, sortMoveFu]);
+  }, [delById, editFu, myType, sonArrFu, sortMoveFu]);
 
   return (
-    <div className={styles.A2Table3}>
+    <div id="A2Table3">
       {tableList.length ? (
         <Table
+          size={myType === "字典" ? "small" : "large"}
+          scroll={{ y: myType === "字典" ? 750 : "null" }}
           dataSource={tableList}
           columns={columns}
           rowKey="id"

src/pages/A2Dict/A2Tab1/index.module.scss

@@ -16,6 +16,13 @@
           font-weight: 700;
         }
       }
+
+      #A2Table3 {
+        .ant-table-cell-with-append {
+          display: flex;
+          justify-content: start;
+        }
+      }
     }
 
 

src/pages/A2Dict/A2Tab1/index.tsx

@@ -81,7 +81,7 @@ function A2Tab1() {
         <A2Table3
           editFu={(item) => setAddInfo2(item)}
           upTaleFu={() => getListFu2()}
-          type="status"
+          myType="字典"
         />
       </div>
 

src/pages/A5Section/index.module.scss

@@ -27,22 +27,6 @@
               padding: 10px;
             }
           }
-
-          .ant-table-cell-with-append {
-            display: flex;
-            justify-content: start;
-          }
-
-          .ant-table-row-expand-icon {
-            background-color: var(--themeColor);
-            color: #fff;
-          }
-
-          .A5Sort {
-            .A5Sort1 {
-              cursor: pointer;
-            }
-          }
         }
       }
     }

src/pages/A5Section/index.tsx

@@ -7,6 +7,7 @@ import { RootState } from "@/store";
 import { A5TableType } from "@/types";
 import { MessageFu } from "@/utils/message";
 import A5Add from "./A5Add";
+import A2Table3 from "../A2Dict/A2Tab1/A2Table3";
 
 function A5Section() {
   const dispatch = useDispatch();
@@ -111,8 +112,8 @@ function A5Section() {
       },
       {
         title: "同级排序",
-        render: (item: A5TableType) =>
-          item.name === "未分类" ? "-" : item.level + "级 - " + item.sort,
+        render: (item: A5TableType, _: any, index: number) =>
+          item.name === "未分类" ? "-" : item.level + "级 - " + (index + 1),
       },
       {
         title: "操作",
@@ -126,8 +127,8 @@ function A5Section() {
                   setAddInfo({
                     id: "-1",
                     parentId: item.id,
-                    name:item.name,
-                    level:item.level
+                    name: item.name,
+                    level: item.level,
                   } as A5TableType)
                 }
               >
@@ -198,6 +199,11 @@ function A5Section() {
 
         {/* 表格主体 */}
         <div className="A5tableBox">
+        <A2Table3
+          editFu={(item) => setAddInfo2(item)}
+          upTaleFu={() => getListFu2()}
+          myType='字典'
+        />
           {tableList.length ? (
             <Table
               scroll={{ y: 750 }}

src/store/action/A2Dict.ts

@@ -32,7 +32,7 @@ export const A2_APIgetList1 = () => {
 export const A2_APIgetList2 = () => {
   return async (dispatch: AppDispatch) => {
     // 获取阶段
-    const res = await http.post("cms/dict/getTree", { type: "stage" });
+    const res = await http.get(`cms/dict/getTree?type=stage`);
     if (res.code === 0) {
       const arr3: A5TableType[] = res.data;
       arr3.forEach((v) => {
@@ -68,14 +68,13 @@ export const A2_APIadd1 = (data: any) => {
 /**
  * 删除 项目属性
  */
-export const A2_APIdel = (id: number|string) => {
+export const A2_APIdel = (id: number | string) => {
   return http.get(`cms/dict/remove/${id}`);
 };
 
 /**
  * 排序
  */
-export const A2_APIsort = (id1: number|string,id2:number|string) => {
+export const A2_APIsort = (id1: number | string, id2: number | string) => {
   return http.get(`cms/dict/sort/${id1}/${id2}`);
 };
-