From c4e3323d099fa62de41a652a0d2d818d39ad18a8 Mon Sep 17 00:00:00 2001
From: wangxiang <1827945911@qq.com>
Date: Sun, 1 May 2022 00:46:27 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=9F=20=E6=A1=86=E6=9E=B6=E5=8D=87?=
 =?UTF-8?q?=E7=BA=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 kicc-ui/src/api/system/user.ts             |  6 ++-
 kicc-ui/src/views/system/user/user.data.ts | 43 ++++++++++++++++++----
 2 files changed, 40 insertions(+), 9 deletions(-)

diff --git a/kicc-ui/src/api/system/user.ts b/kicc-ui/src/api/system/user.ts
index 2bdac744..2d8d7b60 100644
--- a/kicc-ui/src/api/system/user.ts
+++ b/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 } });
diff --git a/kicc-ui/src/views/system/user/user.data.ts b/kicc-ui/src/views/system/user/user.data.ts
index d6f8f7cb..aa102697 100644
--- a/kicc-ui/src/views/system/user/user.data.ts
+++ b/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';
-      const color = enable ? 'green' : 'red';
-      const text = enable ? '启动' : '停用';
-      return h(Tag, { color: color }, () => text);
-    },
+      // 设置请求加载状态标识
+      if (!Reflect.has(record, 'pendingStatus')) {
+        record.pendingStatus = false;
+      }
+      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: '创建时间',