表格组件封装

src/components/TableSelect/index.tsx

@@ -0,0 +1,62 @@
+import { ElMessageBox } from "element-plus";
+
+/*
+ * @Author: Gui
+ * @Date: 2023-10-10 11:13:51
+ * @LastEditors: guicheng 1625811865@qq.com
+ * @LastEditTime: 2024-09-30 18:07:52
+ * @Description: kxs files
+ * @filePath:
+ */
+export const tableSelect = (option) => {
+  let lastSelectValue = option.scope.row[option.mode]
+  const sexChange = ({ row }, show) => {
+    option.list.value[option.list.value.findIndex(item => row.id == item.id)].isSelectChange = show;
+  }
+ return <div>
+    {
+      option.scope.row.isSelectChange ?
+      <el-select
+        class="!w-[100px]"
+        size="small"
+        v-model={option.scope.row[option.mode]}
+        placeholder="请选择修改项"
+        onChange={() => { 
+          option.tips ?
+            ElMessageBox.confirm(
+              `是否调整当前属性? `,
+              "提示",
+              {
+                confirmButtonText: "调整",
+                cancelButtonText: "取消",
+                type: "warning"
+              }
+            ).then(async () => {
+              lastSelectValue = option.scope.row[option.mode];
+              sexChange(option.scope as any, false)
+              option.callback(option.scope as any)
+            }).catch(() => {
+              option.scope.row[option.mode] = lastSelectValue;
+              sexChange(option.scope as any, false)
+            }) : () => {
+              sexChange(option.scope as any, false);
+              option.callback(option.scope as any)
+            };
+        }}
+        >
+        {option.mapList.map((item: any) => (
+          <el-option label={item.label} value={item.id} />
+        ))}
+      </el-select>
+      :
+        <el-tag
+          size={option.scope.props.size}
+          type={option.mapList.find(item => item.id === option.scope.row[option.mode])?.type}
+          effect={option.mapList.find(item => item.id === option.scope.row[option.mode])?.effect}
+          onClick={() =>sexChange(option.scope as any, true)}
+      >
+        {option.mapList.find(item => item.id === option.scope.row[option.mode])?.label}
+      </el-tag>
+    }
+  </div>
+};

src/components/TableSort/index.tsx

@@ -0,0 +1,53 @@
+import { ElMessageBox } from "element-plus";
+
+/*
+ * @Author: Gui
+ * @Date: 2023-10-10 11:13:51
+ * @LastEditors: guicheng 1625811865@qq.com
+ * @LastEditTime: 2024-09-30 18:05:09
+ * @Description: kxs files
+ * @filePath:
+ */
+export const tableSort = (option) => {
+  let lastSelectValue = option.scope.row[option.mode]
+  const sortChange = ({ row }, show) => {
+    option.list.value[option.list.value.findIndex(item => row.id == item.id)].isSortChange = show;
+  }
+ return <div>
+    {
+      option.scope.row.isSortChange ?
+      <el-input-number
+         el-input-number
+         size="small"
+         class="!w-[120px]"
+         min="0"
+         v-model={option.scope.row[option.mode]}
+        onChange={() => { 
+          option.tips ?
+            ElMessageBox.confirm(
+              `是否调整当前属性? `,
+              "提示",
+              {
+                confirmButtonText: "调整",
+                cancelButtonText: "取消",
+                type: "warning"
+              }
+            ).then(async () => {
+              lastSelectValue = option.scope.row[option.mode];
+              sortChange(option.scope as any, false)
+              option.callback(option.scope as any)
+            }).catch(() => {
+              option.scope.row[option.mode] = lastSelectValue;
+              sortChange(option.scope as any, false)
+            }) : () => {
+              sortChange(option.scope as any, false);
+              option.callback(option.scope as any)
+            };
+        }}
+        >
+      </el-input-number>
+       :
+       <div onClick={() =>sortChange(option.scope as any, true)}>{ option.scope.row[option.mode] }</div> 
+    }
+  </div>
+};

src/views/Template/template/hook.tsx

@@ -1,3 +1,5 @@
+import { tableSelect } from "@/components/TableSelect";
+import { tableSort } from "@/components/TableSort";
 import { reactive, onMounted, ref, usePublicHooks, ElMessage, ElMessageBox, http, getGroupUrl, RegularVerification, verification, PaginationProps, hasAuth } from "@/utils/importUsed"
 // 接口列表实例
 const UserUrl = ref(null)
@@ -58,9 +60,9 @@ export function useUser() {
     }
   ]);
   // 表格数据列表
-  const dataList = ref([
-    { sort:0, Id: 1, status:false,sex:1, name:'角色名称1', rank:3, dept:"行政部", post:["人事专员", "行政主管"]},
-    { sort:1, Id: 2, status:true,sex:0, name:'角色名称2', rank:9, dept:"运营部", post:["数据分析", "运营专员", "运营主管"] }
+  const dataList:any = ref([
+    { sort:0, id: 1, status:false,sex:1, name:'角色名称1', rank:3, dept:"行政部", post:["人事专员", "行政主管"]},
+    { sort:1, id: 2, status:true,sex:0, name:'角色名称2', rank:9, dept:"运营部", post:["数据分析", "运营专员", "运营主管"] }
   ]);
   // 页面加载状态
   const loading = ref(false);
@@ -87,7 +89,7 @@ export function useUser() {
     },
     {
       label: "角色ID",
-      prop: "Id",
+      prop: "id",
       minWidth: 130
     },
     {
@@ -131,28 +133,28 @@ export function useUser() {
     {
       label: "性别",
       minWidth: 200,
-      cellRenderer: ({ row, props }) => (
-        <div>
-          
-          <el-select
-            class="!w-[100px]"
-            v-model={row.sex}
-            placeholder="请选择性别"
-            clearable>
-            {sexMapList.map((item: any) => (
-              <el-option label={item.label} value={item.id}/>
-            ))}
-          </el-select>
-        </div>
+      cellRenderer: (scope) => (
+        tableSelect({
+          fields: 'sex',
+          dataList,
+          scope,
+          mapList: sexMapList,
+          callback: changeSex,
+          isTip:true
+        })
       )
     },
     {
       label: "排序",
       minWidth: 200,
       cellRenderer: (scope) => (
-        <div>
-          <el-input-number class="!w-[120px]" min="0" v-model={scope.row.sort} onChange={() => changeSort(scope as any) } />
-        </div>
+       tableSort({
+          fields: 'sort',
+          dataList,
+          scope,
+          callback: changeSort,
+          isTip:false
+        })
       )
     },
     {
@@ -187,7 +189,25 @@ export function useUser() {
       slot: "operation"
     }
   ];
-  // 调整表单顺序函数
+  // 下拉框调整函数
+  const changeSex = (row) => {
+    const params = {
+      id: row.Id,
+      sex: row.sex
+    };
+    const { data }: any = http.request(
+      UserUrl.User.userChangeSex.method,
+      UserUrl.User.userChangeSex.url,
+      params,
+    );
+    if (data.status != 1) {
+      return
+    } else {
+      onSearch(ruleFormRef);
+    }
+    
+  }
+  // 表单顺序调整函数
   const changeSort = ({ row }) => {
     const params = {
       id: row.id,