🎟 框架升级

kicc-ui/src/api/system/user.ts

@@ -9,7 +9,8 @@ enum Api {
   edit = '/system_proxy/system/user/update',
   del = '/system_proxy/system/user/remove',
   updatePwd = '/system_proxy/system/user/updatePwd',
-  resetPwd='/system_proxy/system/user/resetPwd'
+  resetPwd='/system_proxy/system/user/resetPwd',
+  changeStatus='/system_proxy/system/user/changeStatus'
 }
 
 // 查询用户列表
@@ -32,3 +33,6 @@ export const updatePwd = (params: Partial<User>) => defHttp.put({ url: Api.updat
 
 // 重置密码
 export const resetPwd = (params: Partial<User>) => defHttp.put({ url: Api.resetPwd, data: params });
+
+// 修改用户状态
+export const changeStatus = (id: string, status: string) => defHttp.put({ url: Api.changeStatus, data: { id: id, status: status } });

kicc-ui/src/views/system/user/user.data.ts

@@ -8,8 +8,11 @@
 import { BasicColumn } from '/@/components/Table';
 import { FormSchema } from '/@/components/Table';
 import { h } from 'vue';
-import { Tag } from 'ant-design-vue';
+import { Switch } from 'ant-design-vue';
 import { listRole } from '/@/api/system/role';
+import { changeStatus } from '/@/api/system/user';
+import { useMessage } from "/@/hooks/web/useMessage";
+const { createConfirm } = useMessage();
 
 export const columns: BasicColumn[] = [
   {
@@ -35,14 +38,38 @@ export const columns: BasicColumn[] = [
   {
     title: '状态',
     dataIndex: 'status',
-    width: 100,
+    width: 120,
     customRender: ({ record }) => {
-      const status = record.status;
+      // 设置请求加载状态标识
-      const enable = status === '0';
+      if (!Reflect.has(record, 'pendingStatus')) {
-      const color = enable ? 'green' : 'red';
+        record.pendingStatus = false;
-      const text = enable ? '启动' : '停用';
+      }
-      return h(Tag, { color: color }, () => text);
+      return h(Switch, {
-    },
+        checked: record.status === '0',
+        checkedChildren: '已启用',
+        unCheckedChildren: '已禁用',
+        loading: record.pendingStatus,
+        onChange(checked: boolean) {
+          const text = checked ? "启用" : "停用";
+          createConfirm({
+            iconType: 'warning',
+            title: '警告',
+            content: `确认要"${text}${record.userName}用户吗?`,
+            onOk: async () => {
+              record.pendingStatus = true;
+              const newStatus = checked ? '0' : '1';
+              const { createMessage } = useMessage();
+              changeStatus(record.id, newStatus).then(() => {
+                record.status = newStatus;
+                createMessage.success(`${text}成功`);
+              }).catch(() => {
+                createMessage.error(`${text}失败`);
+              }).finally(() => record.pendingStatus = false);
+            }
+          });
+        }
+      });
+    }
   },
   {
     title: '创建时间',