switch 组件封装

src/components/TableSwitch/index.tsx

@@ -0,0 +1,50 @@
+import { usePublicHooks } from "@/utils/switchStyle";
+import { ElMessageBox } from "element-plus";
+import { ref } from "vue";
+
+const { switchStyle } = usePublicHooks();
+const switchLoadMap = ref({});
+export const tableSwitch = (option) => {
+  const loadingChange = (index, status) => {
+    switchLoadMap.value[index] = Object.assign(
+      {},
+      switchLoadMap.value[index],
+      {
+        loading: status
+      }
+    );
+  }
+  const onChange = (scope, index) => {
+    loadingChange(index, true)
+     option.isTip ? ElMessageBox.confirm(
+      `是否确认该操作?`,
+      "提示",
+      {
+        confirmButtonText: "确认",
+        cancelButtonText: "取消",
+        type: "warning"
+      }
+     ).then(async () => {
+        option.callback(scope,()=>{loadingChange(index, false)})
+      }).catch(() => {
+      !scope.row[option.fields] ? (scope.row[option.fields] = true) : (scope.row[option.fields] = false);
+      loadingChange(index, false)
+     }) : option.callback(scope,()=>{loadingChange(index, false)})
+  }
+ return <div>
+    {
+      <el-switch
+        size={option.scope.props.size === "small" ? "small" : "default"}
+        loading={switchLoadMap.value[option.scope.index]?.loading}
+        v-model={option.scope.row[option.fields]}
+        active-value={option.activeValue}
+        inactiveV-value={option.inactiveValue}
+        active-text={option.activeText}
+        inactive-text={option.inactiveText}
+        inline-prompt
+        style={switchStyle.value}
+        onChange={() => onChange(option.scope as any, option.scope.index)}
+      />
+    }
+  </div>
+};

src/views/Template/template/hook.tsx

@@ -1,5 +1,6 @@
 import { tableSelect } from "@/components/TableSelect";
 import { tableSort } from "@/components/TableSort";
+import { tableSwitch } from "@/components/TableSwitch";
 import { reactive, onMounted, ref, usePublicHooks, ElMessage, ElMessageBox, http, getGroupUrl, RegularVerification, verification, PaginationProps, hasAuth, getConfig } from "@/utils/importUsed"
 // 接口列表实例
 const UserUrl = ref(null)
@@ -114,20 +115,16 @@ export function useUser() {
       label: "锁定状态",
       minWidth: 200,
       cellRenderer: (scope) => (
-        <div>
-           <el-switch
-            size={scope.props.size === "small" ? "small" : "default"}
-            loading={switchLoadMap.value[scope.index]?.loading}
-            v-model={scope.row.status}
-            active-value={true}
-            inactive-value={false}
-            active-text="未锁定"
-            inactive-text="已锁定"
-            inline-prompt
-            style={switchStyle.value}
-            onChange={() => onChange(scope as any)}
-          />
-          </div>
+        tableSwitch({
+          fields: 'status',
+          scope,
+          activeText:'未锁定',
+          inactiveText:'已锁定',
+          activeValue:true,
+          inactiveValue:false,
+          callback: onChange,
+          isTip:true
+        })
       )
     },
     {
@@ -240,112 +237,54 @@ export function useUser() {
     }
   }
   // 表格开关
-  const switchLoadMap = ref({});
-  function onChange({ row, index }) {
-    switchLoadMap.value[index] = Object.assign(
-      {},
-      switchLoadMap.value[index],
-      {
-        loading: true
-      }
-    );
+  function onChange({ row }, loadinClose) {
     if (row.status == 0) {
-      handleUnlockUser(row, index)
+      handleUnlockUser(row, loadinClose)
     } else {
-      handleLockUser(row, index)
+      handleLockUser(row, loadinClose)
     }
   }
     // 锁定用户
-  function handleLockUser(row, index) {
-    ElMessageBox.confirm(
-      `是否锁定该角色?  角色名称为:${row.name}`,
-      "提示",
-      {
-        confirmButtonText: "锁定",
-        cancelButtonText: "取消",
+  async function handleLockUser(row, loadinClose) {
+    const { status, msg }: any = await http.Request({
+      method: UserUrl.llbMech.llbUserlockUser.method,
+      url: UserUrl.llbMech.llbUserlockUser.url,
+      params: {id: row.id,lockFlag:1}
+    });
+    if (status == 1) {
+      ElMessage({
+        message: "锁定成功",
+        type: "success"
+      });
+    } else {
+      ElMessageBox.alert(msg, "提示", {
+        confirmButtonText: "关闭",
         type: "warning"
-      }
-    ).then(async () => {
-      const { status, msg }: any = await http.Request({
-        method: UserUrl.llbMech.llbUserlockUser.method,
-        url: UserUrl.llbMech.llbUserlockUser.url,
-        params: {id: row.id,lockFlag:1}
       });
-      if (status == 1) {
-        ElMessage({
-          message: "锁定成功",
-          type: "success"
-        });
-        onSearch(ruleFormRef.value);
-      } else {
-        ElMessageBox.alert(msg, "提示", {
-          confirmButtonText: "关闭",
-          type: "warning"
-        });
-      }
-      switchLoadMap.value[index] = Object.assign(
-        {},
-        switchLoadMap.value[index],
-        {
-          loading: false
-        }
-      );
-    }).catch(() => {
-      !row.status ? (row.status = true) : (row.status = false);
-      switchLoadMap.value[index] = Object.assign(
-        {},
-        switchLoadMap.value[index],
-        {
-          loading: false
-        }
-      );
-    })
+      onSearch(ruleFormRef.value);
+    }
+    loadinClose()
   };
     // 解锁用户
-  function handleUnlockUser(row, index) {
-    ElMessageBox.confirm(
-      `是否解锁该角色?  角色名称为:${row.name}`,
-      "提示",
-      {
-        confirmButtonText: "解锁",
-        cancelButtonText: "取消",
+  async function handleUnlockUser(row, loadinClose) {
+    const { status, msg }: any = await http.Request({
+      method: UserUrl.llbMech.llbUserlockUser.method,
+      url: UserUrl.llbMech.llbUserlockUser.url,
+      params: {id: row.id,lockFlag:0}
+    });
+    if (status == 1) {
+      ElMessage({
+        message: "解锁成功",
+        type: "success"
+      });
+    } else {
+      ElMessageBox.alert(msg, "提示", {
+        confirmButtonText: "关闭",
         type: "warning"
-      }
-    ).then(async () => {
-      const { status, msg }: any = await http.Request({
-        method: UserUrl.llbMech.llbUserlockUser.method,
-        url: UserUrl.llbMech.llbUserlockUser.url,
-        params: {id: row.id,lockFlag:0}
       });
-      if (status == 1) {
-        ElMessage({
-          message: "解锁成功",
-          type: "success"
-        });
-        onSearch(ruleFormRef.value);
-      } else {
-        ElMessageBox.alert(msg, "提示", {
-          confirmButtonText: "关闭",
-          type: "warning"
-        });
-      }
-      switchLoadMap.value[index] = Object.assign(
-        {},
-        switchLoadMap.value[index],
-        {
-          loading: false
-        }
-      );
-    }).catch(() => {
-      !row.status ? (row.status = true) : (row.status = false);
-      switchLoadMap.value[index] = Object.assign(
-        {},
-        switchLoadMap.value[index],
-        {
-          loading: false
-        }
-      );
-    })
+      onSearch(ruleFormRef.value);
+    }
+    loadinClose()
   };
   // 当前页数量切换
   function handleSizeChange(val: number) {