修改用户列表

web-vue3/src/pages/user/index.vue

@@ -1,272 +1,163 @@
 <template>
   <div class="full-content">
-    <!-- <div ref="filter" class="filter"></div> -->
+    <div class="search-wrapper">
-    <!-- 数据表格 -->
-    <a-table
-      :data-source="list"
-      size="middle"
-      :columns="columns"
-      :pagination="pagination"
-      @change="changePage"
-      bordered
-      :rowKey="(record, index) => index"
-    >
-      <template #title>
       <a-space>
-          <a-input v-model="listQuery.id" @pressEnter="loadData" placeholder="用户名ID" class="search-input-item" />
+        <a-input v-model:value:value="listQuery.id" @pressEnter="loadData" placeholder="用户名ID"
-          <a-input
+          class="search-input-item" />
-            v-model="listQuery['%name%']"
+        <a-input v-model:value="listQuery['%name%']" @pressEnter="loadData" placeholder="用户名" class="search-input-item" />
-            @pressEnter="loadData"
-            placeholder="用户名"
-            class="search-input-item"
-          />
         <a-tooltip title="按住 Ctr 或者 Alt/Option 键点击按钮快速回到第一页">
           <a-button type="primary" :loading="loading" @click="loadData">搜索</a-button>
         </a-tooltip>
         <a-button type="primary" @click="handleAdd">新增</a-button>
-        </a-space></template
+      </a-space>
-      >
+    </div>
-      <template #operation slot-scope="text, record">
+    <!-- 数据表格 -->
+    <a-table :data-source="list" size="middle" :columns="columns" :pagination="pagination" @change="changePage" bordered
+      rowKey="id">
+      <template #bodyCell="{ column, text, record }">
+        <template v-if="column.dataIndex === 'systemUser'">
+          <a-switch size="small" checked-children="是" un-checked-children="否" disabled
+            :checked="record.systemUser == 1" />
+        </template>
+
+        <template v-if="column.dataIndex === 'status'">
+          <a-switch size="small" checked-children="启用" un-checked-children="禁用" disabled :checked="record.status != 0" />
+        </template>
+
+        <template v-if="column.dataIndex === 'twoFactorAuthKey'">
+          <a-switch size="small" checked-children="开" un-checked-children="关" disabled
+            :checked="record.twoFactorAuthKey ? true : false" />
+        </template>
+
+        <template v-if="column.dataIndex === 'id'">
+          <a-tooltip :title="text">
+            {{ text }}
+          </a-tooltip>
+        </template>
+
+        <template v-if="column.dataIndex === 'email'">
+          <a-tooltip :title="text">
+            {{ text }}
+          </a-tooltip>
+        </template>
+
+        <template v-if="column.dataIndex === 'operation'">
           <a-space>
             <a-button size="small" type="primary" @click="handleEdit(record)">编辑</a-button>
             <a-dropdown>
-            <a class="ant-dropdown-link" @click="(e) => e.preventDefault()"> 更多 <down-outlined /> </a>
+              <a class="ant-dropdown-link" @click="(e) => e.preventDefault()"> 更多 <a-icon type="down" /> </a>
-            <template #overlay>
+              <a-menu #overlay>
-              <a-menu>
                 <a-menu-item>
-                  <a-button type="danger" size="small" :disabled="record.parent === 'sys'" @click="handleDelete(record)"
+                  <a-button type="danger" size="small" :disabled="record.parent === 'sys'"
-                    >删除</a-button
+                    @click="handleDelete(record)">删除</a-button>
-                  >
                 </a-menu-item>
                 <a-menu-item>
-                  <a-button
+                  <a-button type="danger" size="small" :disabled="record.pwdErrorCount === 0"
-                    type="danger"
+                    @click="handleUnlock(record)">解锁</a-button>
-                    size="small"
-                    :disabled="record.pwdErrorCount === 0"
-                    @click="handleUnlock(record)"
-                    >解锁</a-button
-                  >
                 </a-menu-item>
                 <a-menu-item>
-                  <a-button
+                  <a-button type="danger" size="small" :disabled="record.parent === 'sys'"
-                    type="danger"
+                    @click="restUserPwdHander(record)">重置密码</a-button>
-                    size="small"
-                    :disabled="record.parent === 'sys'"
-                    @click="restUserPwdHander(record)"
-                    >重置密码</a-button
-                  >
                 </a-menu-item>
                 <a-menu-item>
-                  <a-button
+                  <a-button type="danger" size="small" :disabled="record.twoFactorAuthKey ? false : true"
-                    type="danger"
+                    @click="handleCloseMfa(record)">关闭MFA</a-button>
-                    size="small"
-                    :disabled="record.twoFactorAuthKey ? false : true"
-                    @click="handleCloseMfa(record)"
-                    >关闭MFA</a-button
-                  >
                 </a-menu-item>
               </a-menu>
-            </template>
             </a-dropdown>
           </a-space>
         </template>
-      <template #systemUser slot-scope="text, record">
-        <a-switch
-          size="small"
-          checked-children="是"
-          un-checked-children="否"
-          disabled
-          :checked="record.systemUser == 1"
-        />
       </template>
-      <template #status slot-scope="text, record">
-        <a-switch
-          size="small"
-          checked-children="启用"
-          un-checked-children="禁用"
-          disabled
-          :checked="record.status != 0"
-        />
-      </template>
-
-      <template #twoFactorAuthKey slot-scope="text, record">
-        <a-switch
-          size="small"
-          checked-children="开"
-          un-checked-children="关"
-          disabled
-          :checked="record.twoFactorAuthKey ? true : false"
-        />
-      </template>
-
-      <a-tooltip #id slot-scope="text" :title="text">
-        <span>{{ text }}</span>
-      </a-tooltip>
-
-      <a-tooltip #email slot-scope="text" :title="text">
-        <span>{{ text }}</span>
-      </a-tooltip>
     </a-table>
     <!-- 编辑区 -->
-    <a-modal
+    <a-modal destroyOnClose v-model:value="editUserVisible" width="60vw" title="编辑用户" @ok="handleEditUserOk"
-      destroyOnClose
+      :maskClosable="false">
-      v-model="editUserVisible"
+      <a-from ref="editUserForm" :rules="rules" :model="temp" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }">
-      width="60vw"
+        <a-from-item label="登录名称" name="id">
-      title="编辑用户"
+          <a-input @change="checkTipUserName" :maxLength="50" v-model:value="temp.id" placeholder="登录名称,账号,创建之后不能修改"
-      @ok="handleEditUserOk"
+            :disabled="createOption == false" />
-      :maskClosable="false"
+        </a-from-item>
-    >
-      <a-form ref="editUserForm" :rules="rules" :model="temp" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }">
-        <a-form-item label="登录名称" prop="id">
-          <a-input
-            @change="checkTipUserName"
-            :maxLength="50"
-            v-model="temp.id"
-            placeholder="登录名称,账号,创建之后不能修改"
-            :disabled="createOption == false"
-          />
-        </a-form-item>
 
-        <a-form-item label="昵称" prop="name">
+        <a-from-item label="昵称" name="name">
-          <a-input v-model="temp.name" :maxLength="50" placeholder="昵称" />
+          <a-input v-model:value="temp.name" :maxLength="50" placeholder="昵称" />
-        </a-form-item>
+        </a-from-item>
-        <a-form-item prop="systemUser">
+        <a-from-item name="systemUser">
-          <template #label>
+          <template slot="label">
             管理员
             <a-tooltip v-if="createOption">
-              <template #title> 管理员拥有：管理服务端的部分权限 </template>
+              <template slot="title"> 管理员拥有：管理服务端的部分权限 </template>
-              <question-circle-filled />
+              <a-icon type="question-circle" theme="filled" />
             </a-tooltip>
           </template>
           <a-row>
             <a-col :span="4">
               <a-tooltip title="管理员拥有：管理服务端的部分权限">
-                <a-switch
+                <a-switch :checked="temp.systemUser == 1" @change="(checked: boolean) => {
-                  :checked="temp.systemUser == 1"
+                  temp.systemUser = checked ? 1 : 0;
-                  @change="
-                    (checked) => {
-                      temp.systemUser = checked ? 1 : 0
                 }
-                  "
+                  " :disabled="temp.parent === 'sys'" checked-children="是" un-checked-children="否" default-checked />
-                  :disabled="temp.parent === 'sys'"
-                  checked-children="是"
-                  un-checked-children="否"
-                  default-checked
-                />
               </a-tooltip>
             </a-col>
             <a-col :span="4" style="text-align: right">
               <a-tooltip>
-                <template #title> 禁用后该用户不能登录平台 </template>
+                <template slot="title"> 禁用后该用户不能登录平台 </template>
                 <a-icon v-if="createOption" type="question-circle" theme="filled" />
                 状态：
               </a-tooltip>
             </a-col>
             <a-col :span="4">
-              <a-switch
+              <a-switch :checked="temp.status != 0" @change="(checked: boolean) => {
-                :checked="temp.status != 0"
+                temp.status = checked ? 1 : 0;
-                @change="
-                  (checked) => {
-                    temp.status = checked ? 1 : 0
               }
-                "
+                " :disabled="temp.parent === 'sys'" checked-children="启用" un-checked-children="禁用" default-checked />
-                :disabled="temp.parent === 'sys'"
-                checked-children="启用"
-                un-checked-children="禁用"
-                default-checked
-              />
             </a-col>
           </a-row>
-        </a-form-item>
+        </a-from-item>
-        <a-form-item label="权限组" prop="permissionGroup">
+        <a-from-item label="权限组" name="permissionGroup">
-          <a-select
+          <a-select show-search option-filter-prop="children" placeholder="请选择用户的权限组" v-model:value="temp.permissionGroup"
-            show-search
+            mode="multiple">
-            option-filter-prop="children"
-            placeholder="请选择用户的权限组"
-            v-model="temp.permissionGroup"
-            mode="multiple"
-          >
             <a-select-option v-for="item in permissionGroup" :key="item.id">
               {{ item.name }}
             </a-select-option>
           </a-select>
-        </a-form-item>
+        </a-from-item>
-      </a-form>
+      </a-from>
     </a-modal>
-    <a-modal destroyOnClose v-model:visible="showUserPwd" title="用户密码提示" :maskClosable="false" :footer="null">
+    <a-modal destroyOnClose v-model:value="showUserPwd" title="用户密码提示" :maskClosable="false" :footer="null">
       <a-result status="success" :title="temp.title">
         <template #subTitle>
           账号新密码为：
-          <b
+          <a-typography-paragraph copyable strong>{{ temp.randomPwd }}</a-typography-paragraph>
-            style="color: red; font-size: 20px"
-            v-clipboard:copy="temp.randomPwd"
-            v-clipboard:success="
-              () => {
-                tempVue.prototype.$notification.success({
-                  message: '复制成功'
-                })
-              }
-            "
-            v-clipboard:error="
-              () => {
-                tempVue.prototype.$notification.error({
-                  message: '复制失败'
-                })
-              }
-            "
-          >
-            {{ temp.randomPwd }}
-            <a-icon type="copy" />
-          </b>
           请将此密码复制告知该用户
         </template>
       </a-result>
     </a-modal>
   </div>
 </template>
-<script>
+
-import { closeUserMfa, deleteUser, editUser, getUserList, unlockUser, restUserPwd } from '@/api/user/user'
+
-import { getUserPermissionListAll } from '@/api/user/user-permission'
+<script setup lang="ts">
-import { CHANGE_PAGE, COMPUTED_PAGINATION, PAGE_DEFAULT_LIST_QUERY, parseTime } from '@/utils/const'
+import { closeUserMfa, deleteUser, editUser, getUserList, unlockUser, restUserPwd } from '@/api/user/user';
-export default {
+import { getUserPermissionListAll } from '@/api/user/user-permission';
-  data() {
+import { IPageQuery } from '@/interface/common';
-    return {
+import { CHANGE_PAGE, COMPUTED_PAGINATION, PAGE_DEFAULT_LIST_QUERY, parseTime } from '@/utils/const';
-      loading: false,
+
-      list: [],
+const loading = ref(false);
-      temp: {},
+const list = ref([]);
-      tempVue: null,
+const temp = ref<any>({});
-      createOption: true,
+const createOption = ref(true);
-      editUserVisible: false,
+const editUserVisible = ref(false);
-      listQuery: Object.assign({}, PAGE_DEFAULT_LIST_QUERY),
+const listQuery = ref<IPageQuery>({ ...PAGE_DEFAULT_LIST_QUERY });
-      permissionGroup: [],
+const permissionGroup = ref<any[]>([]);
-      columns: [
+const showUserPwd = ref(false);
+const editUserForm = ref();
+
+const columns = [
   { title: 'ID', dataIndex: 'id', ellipsis: true, scopedSlots: { customRender: 'id' } },
   { title: '昵称', dataIndex: 'name', ellipsis: true },
-        {
+  { title: '管理员', dataIndex: 'systemUser', align: 'center', ellipsis: true, width: 90, scopedSlots: { customRender: 'systemUser' } },
-          title: '管理员',
+  { title: '状态', dataIndex: 'status', align: 'center', ellipsis: true, width: 90, scopedSlots: { customRender: 'status' } },
-          dataIndex: 'systemUser',
+  { title: '两步验证', dataIndex: 'twoFactorAuthKey', align: 'center', ellipsis: true, width: 90, scopedSlots: { customRender: 'twoFactorAuthKey' } },
-          align: 'center',
-          ellipsis: true,
-          width: 90,
-          scopedSlots: { customRender: 'systemUser' }
-        },
-        {
-          title: '状态',
-          dataIndex: 'status',
-          align: 'center',
-          ellipsis: true,
-          width: 90,
-          scopedSlots: { customRender: 'status' }
-        },
-        {
-          title: '两步验证',
-          dataIndex: 'twoFactorAuthKey',
-          align: 'center',
-          ellipsis: true,
-          width: 90,
-          scopedSlots: { customRender: 'twoFactorAuthKey' }
-        },
-
   { title: '邮箱', dataIndex: 'email', ellipsis: true, scopedSlots: { customRender: 'email' } },
   { title: '创建人', dataIndex: 'parent', ellipsis: true, width: 150 },
   {
@@ -274,225 +165,186 @@ export default {
     dataIndex: 'modifyTimeMillis',
     sorter: true,
     ellipsis: true,
-          customRender: (text) => {
+    customRender: ({ text }) => parseTime(text),
-            return parseTime(text)
+    width: 170,
   },
-          width: 170
+  { title: '操作', align: 'center', dataIndex: 'operation', scopedSlots: { customRender: 'operation' }, width: 120 },
-        },
+];
-        {
+
-          title: '操作',
+const rules = {
-          align: 'center',
-          dataIndex: 'operation',
-          scopedSlots: { customRender: 'operation' },
-          width: 120
-        }
-      ],
-      // 表单校验规则
-      rules: {
   id: [{ required: true, message: '请填写用户账号', trigger: 'blur' }],
   name: [{ required: true, message: '请填写用户昵称', trigger: 'blur' }],
-        permissionGroup: [{ required: true, message: '请选择用户权限组', trigger: 'blur' }]
+  permissionGroup: [{ required: true, message: '请选择用户权限组', trigger: 'blur' }],
-      },
+};
-      showUserPwd: false
-    }
-  },
-  computed: {
-    pagination() {
-      return COMPUTED_PAGINATION(this.listQuery)
-    }
-  },
-  watch: {},
-  created() {
-    this.loadData()
-  },
-  methods: {
-    // 加载数据
-    loadData(pointerEvent) {
-      this.loading = true
-      this.listQuery.page = pointerEvent?.altKey || pointerEvent?.ctrlKey ? 1 : this.listQuery.page
-      getUserList(this.listQuery).then((res) => {
-        if (res.code === 200) {
-          this.list = res.data.result
-          this.listQuery.total = res.data.total
-        }
-        this.loading = false
-      })
-    },
 
-    // 新增用户
+const pagination = COMPUTED_PAGINATION(listQuery.value);
-    handleAdd() {
+
-      this.temp = { systemUser: 0 }
+const loadData = (pointerEvent?: any) => {
-      this.createOption = true
+  loading.value = true;
-      this.listUserPermissionListAll()
+  listQuery.value.page = pointerEvent?.altKey || pointerEvent?.ctrlKey ? 1 : listQuery.value.page;
-      this.editUserVisible = true
+  getUserList(listQuery.value).then((res) => {
-      this.$refs['editUserForm'] && this.$refs['editUserForm'].resetFields()
+    if (res.code === 200) {
-    },
+      list.value = res.data.result;
-    //
+      listQuery.value.total = res.data.total;
-    listUserPermissionListAll() {
+    }
+    loading.value = false;
+  });
+};
+
+const handleAdd = () => {
+  temp.value = { systemUser: 0 };
+  createOption.value = true;
+  listUserPermissionListAll();
+  editUserVisible.value = true;
+  editUserForm.value?.resetFields();
+};
+
+const listUserPermissionListAll = () => {
   getUserPermissionListAll().then((res) => {
     if (res.code === 200 && res.data) {
-          this.permissionGroup = res.data
+      permissionGroup.value = res.data;
     }
-        if (!this.permissionGroup || this.permissionGroup.length <= 0)
+    if (!permissionGroup.value || permissionGroup.value.length <= 0) {
       $notification.warn({
-            message: '还没有配置权限组,不能创建用户'
+        message: '还没有配置权限组，不能创建用户',
-          })
+      });
-      })
+    }
-    },
+  });
-    // 修改用户
+};
-    handleEdit(record) {
+
-      this.createOption = false
+const handleEdit = (record: any) => {
-      this.temp = {
+  createOption.value = false;
+  temp.value = {
     ...record,
-        permissionGroup: (record.permissionGroup || '').split('@').filter((item) => item),
+    permissionGroup: (record.permissionGroup || '').split('@').filter((item: any) => item),
-        status: record.status === undefined ? 1 : record.status
+    status: record.status === undefined ? 1 : record.status,
-      }
+  };
-      this.listUserPermissionListAll()
+  listUserPermissionListAll();
-      this.editUserVisible = true
+  editUserVisible.value = true;
-      this.$refs['editUserForm'] && this.$refs['editUserForm'].resetFields()
+  editUserForm.value?.resetFields();
-    },
+};
-    // 提交用户数据
-    handleEditUserOk() {
-      // 检验表单
-      this.$refs['editUserForm'].validate((valid) => {
-        if (!valid) {
-          return false
-        }
-        const paramsTemp = Object.assign({}, this.temp)
 
-        paramsTemp.type = this.createOption ? 'add' : 'edit'
+const handleEditUserOk = () => {
-        paramsTemp.permissionGroup = (paramsTemp.permissionGroup || []).join('@')
+  editUserForm.value?.validate.then(() => {
-
+    const paramsTemp = { ...temp.value };
-        // 需要判断当前操作是【新增】还是【修改】
+    paramsTemp.type = createOption.value ? 'add' : 'edit';
+    paramsTemp.permissionGroup = (paramsTemp.permissionGroup || []).join('@');
     editUser(paramsTemp).then((res) => {
       if (res.code === 200) {
         if (paramsTemp.type === 'add') {
-              this.temp = {
+          temp.value = {
             title: '账号添加成功',
-                randomPwd: res.data.randomPwd
+            randomPwd: res.data.randomPwd,
-              }
+          };
-              this.tempVue = Vue
+          showUserPwd.value = true;
-              this.showUserPwd = true
         } else {
           $notification.success({
-                message: res.msg
+            message: res.msg,
-              })
+          });
         }
+        editUserVisible.value = false;
+        loadData();
+      }
+    });
+  });
+};
 
-            this.editUserVisible = false
+const handleDelete = (record: any) => {
-            this.loadData()
-          }
-        })
-      })
-    },
-    // 删除用户
-    handleDelete(record) {
   $confirm({
     title: '系统提示',
     content: '真的要删除用户么？',
     okText: '确认',
     cancelText: '取消',
     onOk: () => {
-          // 删除
       deleteUser(record.id).then((res) => {
         if (res.code === 200) {
           $notification.success({
-                message: res.msg
+            message: res.msg,
-              })
+          });
-              this.loadData()
+          loadData();
         }
-          })
+      });
-        }
-      })
     },
-    // 解锁
+  });
-    handleUnlock(record) {
+};
+
+const handleUnlock = (record: any) => {
   $confirm({
     title: '系统提示',
     content: '真的要解锁用户么？',
     okText: '确认',
     cancelText: '取消',
     onOk: () => {
-          // 解锁用户
       unlockUser(record.id).then((res) => {
         if (res.code === 200) {
           $notification.success({
-                message: res.msg
+            message: res.msg,
-              })
+          });
-              this.loadData()
+          loadData();
         }
-          })
+      });
-        }
-      })
     },
-    //
+  });
-    handleCloseMfa(record) {
+};
+
+const handleCloseMfa = (record: any) => {
   $confirm({
     title: '系统提示',
     content: '真的关闭当前用户的两步验证么？',
     okText: '确认',
     cancelText: '取消',
     onOk: () => {
-          // 解锁用户
       closeUserMfa(record.id).then((res) => {
         if (res.code === 200) {
           $notification.success({
-                message: res.msg
+            message: res.msg,
-              })
+          });
-              this.loadData()
+          loadData();
         }
-          })
+      });
-        }
-      })
     },
-    // 分页、排序、筛选变化时触发
+  });
-    changePage(pagination, filters, sorter) {
+};
-      this.listQuery = CHANGE_PAGE(this.listQuery, { pagination, sorter })
+
-      this.loadData()
+const changePage = (pagination: any, filters: any, sorter: any) => {
-    },
+  listQuery.value = CHANGE_PAGE(listQuery.value, { pagination, sorter });
-    //
+  loadData();
-    checkTipUserName() {
+};
-      if (this.temp?.id === 'demo') {
+
+const checkTipUserName = () => {
+  if (temp.value?.id === 'demo') {
     $confirm({
       title: '系统提示',
-          content:
+      content: 'demo 账号是系统特定演示使用的账号，系统默认将对 demo 账号限制很多权限。非演示场景不建议使用 demo 账号',
-            'demo 账号是系统特定演示使用的账号,系统默认将对 demo 账号限制很多权限。非演示场景不建议使用 demo 账号',
       okText: '确认',
       cancelText: '取消',
-          onOk: () => {},
+      onOk: () => { },
       onCancel: () => {
-            this.temp.id = ''
+        temp.value.id = '';
-          }
-        })
-      }
       },
-    //
+    });
-    restUserPwdHander(record) {
+  }
+};
+
+const restUserPwdHander = (record: any) => {
   $confirm({
     title: '系统提示',
     content: '确定要重置用户密码吗？',
     okText: '确认',
     cancelText: '取消',
     onOk: () => {
-          // 解锁用户
       restUserPwd(record.id).then((res) => {
         if (res.code === 200) {
-              this.temp = {
+          temp.value = {
             title: '用户密码重置成功',
-                randomPwd: res.data.randomPwd
+            randomPwd: res.data.randomPwd,
+          };
+          showUserPwd.value = true;
         }
-              this.tempVue = Vue
+      });
-              this.showUserPwd = true
+    },
-            }
+  });
-          })
+};
-        }
+
-      })
+onMounted(loadData);
-    }
-  }
-}
 </script>
-<style scoped>
-/* .filter {
-  margin-bottom: 10px;
-} */
-</style>