add /api/setRole /api/disableUser

frontend/vben/src/api/sys/user.ts

@@ -29,6 +29,8 @@ enum Api {
   GetUsersCount = '/getUsersCount',
   GetUsersList = '/getUsersList',
   IsNameExist = '/isNameExist',
+  SetRole = '/setRole',
+  SetStatus = '/setStatus',
 }
 
 /**
@@ -162,3 +164,9 @@ export function isNameExist(username: string) {
 export function doLogout() {
   return defHttp.get({ url: Api.Logout }, { errorMessageMode: 'none' })
 }
+
+export const setRole = (id: number, role: number) =>
+  defHttp.post({ url: Api.SetRole, params: { id, role } })
+
+export const setStatus = (id: number, stat: boolean) =>
+  defHttp.post({ url: Api.SetStatus, params: { id, stat } })

frontend/vben/src/views/dashboard/account/AccountModal.vue

@@ -25,6 +25,9 @@
             field: 'name',
             label: '用户名',
             component: 'Input',
+            ifShow: () => {
+              return !unref(isUpdate)
+            },
             rules: [
               {
                 required: true,

frontend/vben/src/views/dashboard/account/account.data.ts

@@ -1,5 +1,9 @@
 import { BasicColumn } from '/@/components/Table'
 import { FormSchema } from '/@/components/Table'
+import { h } from 'vue'
+import { Switch } from 'ant-design-vue'
+import { useMessage } from '/@/hooks/web/useMessage'
+import { setStatus } from '/@/api/sys/user'
 
 export const columns: BasicColumn[] = [
   {
@@ -12,15 +16,51 @@ export const columns: BasicColumn[] = [
     dataIndex: 'nick',
     width: 120,
   },
+  {
+    title: '状态',
+    dataIndex: 'stat',
+    width: 120,
+    customRender: ({ record }) => {
+      if (!Reflect.has(record, 'pendingStatus')) {
+        record.pendingStatus = false
+      }
+      return h(Switch, {
+        checked: record.stat,
+        checkedChildren: '已启用',
+        unCheckedChildren: '已禁用',
+        loading: record.pendingStatus,
+        onChange(checked: boolean) {
+          const { createMessage } = useMessage()
+          if (checked) {
+            record.stat = false
+            createMessage.error('请让用户通过找回密码启用账户')
+            return
+          }
+          record.pendingStatus = true
+          setStatus(record.id, checked)
+            .then(() => {
+              record.stat = checked
+              createMessage.success(`已成功禁用账户并清空密码, 如需重新启用, 请让用户找回密码`)
+            })
+            .catch((error) => {
+              createMessage.error('禁用失败: ' + (error as unknown as Error).message)
+            })
+            .finally(() => {
+              record.pendingStatus = false
+            })
+        },
+      })
+    },
+  },
   {
     title: '创建时间',
     dataIndex: 'date',
-    width: 180,
+    width: 240,
   },
   {
     title: '角色',
     dataIndex: 'role',
-    width: 200,
+    width: 120,
   },
   {
     title: '简介',

frontend/vben/src/views/dashboard/account/index.vue

@@ -97,8 +97,7 @@
         if (isUpdate) {
           // 演示不刷新表格直接更新内部数据。
           // 注意：updateTableDataRecord要求表格的rowKey属性为string并且存在于每一行的record的keys中
-          const result = updateTableDataRecord(values.id, values)
-          console.log(result)
+          updateTableDataRecord(values.id, values)
         } else {
           reload()
         }