用户管理页面调整

src/api/dept/index.ts

@@ -20,7 +20,7 @@ export function listDepts(queryParams?: DeptQuery): AxiosPromise<DeptVO[]> {
  */
 export function getDeptOptions(): AxiosPromise<OptionType[]> {
   return request({
-    url: "/api/v1/dept/options",
+    url: '/system/dept/treeSelect',
     method: "get",
   });
 }

src/api/role/index.ts

@@ -26,7 +26,7 @@ export function getRoleOptions(
   queryParams?: RoleQuery
 ): AxiosPromise<OptionType[]> {
   return request({
-    url: "/api/v1/roles/options",
+    url: 'system/role/listAll',
     method: "get",
     params: queryParams,
   });

src/api/user/index.ts

 import request from "@/utils/request";
 import { AxiosPromise } from "axios";
 import { User, UserForm, UserInfo, UserPageVO, UserQuery } from "./types";
-
+import {praseStrEmpty} from '@/utils/common'
 /**
  * 登录成功后获取用户信息（昵称、头像、权限集合和角色集合）
  */
@@ -17,11 +17,9 @@ export function getUserInfoApi() {
  *
  * @param queryParams
  */
-export function getUserPage(
-  queryParams: UserQuery
-): AxiosPromise<PageResult<UserPageVO[]>> {
+export function getUserPage(queryParams: UserQuery): AxiosPromise<PageResult<UserPageVO[]>> {
   return request({
-    url: "/api/v1/users/page",
+    url: '/system/user/list',
     method: "get",
     params: queryParams,
   });
@@ -34,7 +32,7 @@ export function getUserPage(
  */
 export function getUserForm(userId: number): AxiosPromise<UserForm> {
   return request({
-    url: "/api/v1/users/" + userId + "/form",
+    url: '/system/user/' + praseStrEmpty(userId),
     method: "get",
   });
 }
@@ -46,7 +44,7 @@ export function getUserForm(userId: number): AxiosPromise<UserForm> {
  */
 export function addUser(data: any) {
   return request({
-    url: "/api/v1/users",
+    url: '/system/user/add',
     method: "post",
     data: data,
   });
@@ -58,9 +56,9 @@ export function addUser(data: any) {
  * @param id
  * @param data
  */
-export function updateUser(id: number, data: UserForm) {
+export function updateUser( data: UserForm) {
   return request({
-    url: "/api/v1/users/" + id,
+    url: '/system/user/update',
     method: "put",
     data: data,
   });
@@ -72,11 +70,15 @@ export function updateUser(id: number, data: UserForm) {
  * @param id
  * @param password
  */
-export function updateUserPassword(id: number, password: string) {
+export function updateUserPassword(businessId: number, password: string) {
+  const data = {
+    businessId,
+    password
+  }
   return request({
-    url: "/api/v1/users/" + id + "/password",
-    method: "patch",
-    params: { password: password },
+    url: '/system/user/resetPassword',
+    method: 'put',
+    params: data
   });
 }
 
@@ -85,9 +87,9 @@ export function updateUserPassword(id: number, password: string) {
  *
  * @param ids
  */
-export function deleteUsers(ids: string) {
+export function deleteUsers(id: number) {
   return request({
-    url: "/api/v1/users/" + ids,
+    url: '/system/user/deleteLogical/' + id,
     method: "delete",
   });
 }
@@ -99,7 +101,7 @@ export function deleteUsers(ids: string) {
  */
 export function downloadTemplateApi() {
   return request({
-    url: "/api/v1/users/template",
+    url: '/system/user/importTemplate',
     method: "get",
     responseType: "arraybuffer",
   });
@@ -113,7 +115,7 @@ export function downloadTemplateApi() {
  */
 export function exportUser(queryParams: UserQuery) {
   return request({
-    url: "/api/v1/users/_export",
+    url: '/system/user/export',
     method: "get",
     params: queryParams,
     responseType: "arraybuffer",

src/api/user/types.ts

@@ -60,11 +60,19 @@ export interface UserInfo {
  * 用户查询对象类型
  */
 export interface UserQuery extends PageQuery {
-  keywords?: string;
-  status?: number;
-  deptId?: number;
-  startTime?: string;
-  endTime?: string;
+  /**
+   * 部门ID
+   */
+  deptId?: number | undefined;
+  /**
+   * 登录名
+   */
+  username?: string;
+  /**
+   * 状态
+   */
+  flag?: string;
+
 }
 
 /**
@@ -72,90 +80,89 @@ export interface UserQuery extends PageQuery {
  */
 export interface UserPageVO {
   /**
-   * 用户头像地址
+   * 用户ID
    */
-  avatar?: string;
+  businessId?: number;
   /**
-   * 创建时间
+   * 登录名
    */
-  createTime?: Date;
+  username?: string;
   /**
-   * 部门名称
+   * 姓名
    */
-  deptName?: string;
+  name?: string;
   /**
-   * 用户邮箱
+   * 手机号
    */
-  email?: string;
+  phone?: string;
   /**
-   * 性别
+   * 状态
    */
-  genderLabel?: string;
+  flag?: string;
+  /**
+   * 创建时间
+   */
+  createTime?: Date;
+}
+
+/**
+ * 用户表单类型
+ */
+export interface UserForm {
   /**
    * 用户ID
    */
-  id?: number;
+  businessId?: number | undefined;
   /**
-   * 手机号
+   * 登录名
    */
-  mobile?: string;
+  username?: string;
   /**
-   * 用户昵称
+   * 密码
    */
-  nickname?: string;
+  password?: string;
   /**
-   * 角色名称，多个使用英文逗号(,)分割
+   * 姓名
    */
-  roleNames?: string;
+  name?: string;
   /**
-   * 用户状态(1:启用;0:禁用)
+   * 昵称
    */
-  status?: number;
+  nickName?: string;
   /**
-   * 用户名
+   * 性别
    */
-  username?: string;
-}
-
-/**
- * 用户表单类型
- */
-export interface UserForm {
+  sex?: string;
   /**
-   * 用户头像
+   * 手机号码
    */
-  avatar?: string;
+  phone?: string;
   /**
-   * 部门ID
+   * 身份证号
    */
-  deptId?: number;
+  idNumber?: string;
   /**
    * 邮箱
    */
   email?: string;
   /**
-   * 性别
-   */
-  gender?: number;
-  /**
-   * 用户ID
+   * 状态(1:启用;0:停用)
    */
-  id?: number;
-  mobile?: string;
+  flag?: string;
   /**
-   * 昵称
+   * 部门ID
    */
-  nickname?: string;
+  deptId?: number | null;
   /**
-   * 角色ID集合
+   * 角色
    */
-  roleIds?: number[];
+  roleList?: number[];
   /**
-   * 用户状态(1:正常;0:禁用)
+   * 角色返参字符串
    */
-  status?: number;
+  roleIds?: string;
   /**
-   * 用户名
+   * 备注
    */
-  username?: string;
+  remarks?: string;
 }

src/utils/common.ts

@@ -22,4 +22,10 @@ export function handleTree(data, id, parentId, children, rootId) {
   })
   return treeData !== '' ? treeData : data
 }
-
+// 转换字符串，undefined,null等转化为""
+export function praseStrEmpty(str) {
+  if (!str || str === 'undefined' || str === 'null') {
+    return ''
+  }
+  return str
+}

src/views/system/user/components/dept-tree.vue

@@ -57,7 +57,7 @@ function handleFilter(value: string, data: any) {
 
 /** 部门树节点 Click */
 function handleNodeClick(data: { [key: string]: any }) {
-  deptId.value = data.value;
+  deptId.value = data.id;
   emits("node-click");
 }
 

src/views/system/user/index.vue

 <!-- 用户管理 -->
 <script setup lang="ts">
+import {deleteMenu} from "@/api/menu";
+
 defineOptions({
   name: "User",
   inheritAttrs: false,
@@ -22,6 +24,15 @@ import { getRoleOptions } from "@/api/role";
 import { UserForm, UserQuery, UserPageVO } from "@/api/user/types";
 import type { UploadInstance } from "element-plus";
 import { genFileId } from "element-plus";
+import { commonField } from "@/utils/commonField";
+import Treeselect from 'vue3-treeselect'
+import 'vue3-treeselect/dist/vue3-treeselect.css'
+const hasAddPerm = ref(['sys:user:add']);
+const hasUpdatePerm = ref(['sys:user:update']);
+const hasDelPerm = ref(['sys:user:delete']);
+const hasImportPerm = ref(['sys:user:import']);
+const hasExportPerm = ref(['sys:user:export']);
+const hasResetPerm = ref(['sys:user:resetPwd']);
 
 const queryFormRef = ref(ElForm); // 查询表单
 const userFormRef = ref(ElForm); // 用户表单
@@ -29,6 +40,12 @@ const uploadRef = ref<UploadInstance>(); // 上传组件
 
 const loading = ref(false); //  加载状态
 const removeIds = ref([]); // 删除用户ID集合 用于批量删除
+const sexOptions = ref(
+  [
+    { label: '男', value: '0' },
+    { label: '女', value: '1' }
+  ]
+);
 const queryParams = reactive<UserQuery>({
   pageNum: 1,
   pageSize: 10,
@@ -37,7 +54,7 @@ const dateTimeRange = ref("");
 const total = ref(0); // 数据总数
 const pageData = ref<UserPageVO[]>(); // 用户分页数据
 const deptList = ref<OptionType[]>(); // 部门下拉数据源
-const roleList = ref<OptionType[]>(); // 角色下拉数据源
+const roleListOptions = ref<OptionType[]>(); // 角色下拉数据源
 
 watch(dateTimeRange, (newVal) => {
   if (newVal) {
@@ -56,7 +73,8 @@ const dialog = reactive({
 
 // 用户表单数据
 const formData = reactive<UserForm>({
-  status: 1,
+  flag: 1,
+  roleList: [],
 });
 
 // 用户导入数据
@@ -65,36 +83,35 @@ const importData = reactive({
   file: undefined,
   fileList: [],
 });
-
+const passwordCheck = (rule: any, value: any, callback: any) => {
+  const pattern = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/
+  if (!pattern.test(value)) {
+    callback(new Error('新密码必须为数字与字母的组合'))
+  }
+  callback()
+}
 // 校验规则
 const rules = reactive({
   username: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
-  nickname: [{ required: true, message: "用户昵称不能为空", trigger: "blur" }],
-  deptId: [{ required: true, message: "所属部门不能为空", trigger: "blur" }],
-  roleIds: [{ required: true, message: "用户角色不能为空", trigger: "blur" }],
-  email: [
-    {
-      pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,
-      message: "请输入正确的邮箱地址",
-      trigger: "blur",
-    },
-  ],
-  mobile: [
-    {
-      pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
-      message: "请输入正确的手机号码",
-      trigger: "blur",
-    },
+  password: [
+    { required: true, message: '请输入用户密码', trigger: 'blur' },
+    { min: 8, max: 16, message: '长度在 8 到 16 个字符', trigger: 'blur' },
+    { validator: passwordCheck,
+      trigger: 'blur'
+    }
   ],
+  name: [{ required: true, message: "姓名不能为空", trigger: ["blur","change"]  }],
+  roleList: [{ required: true, message: "用户角色不能为空", trigger: "change" }],
 });
 
 /** 查询 */
 function handleQuery() {
   loading.value = true;
   getUserPage(queryParams)
-    .then(({ data }) => {
-      pageData.value = data.list;
-      total.value = data.total;
+    .then(res => {
+      console.log('res',res)
+      pageData.value = res.rows;
+      total.value = res.total;
     })
     .finally(() => {
       loading.value = false;
@@ -104,18 +121,11 @@ function handleQuery() {
 /** 重置查询 */
 function resetQuery() {
   queryFormRef.value.resetFields();
-  dateTimeRange.value = "";
   queryParams.pageNum = 1;
   queryParams.deptId = undefined;
-  queryParams.startTime = undefined;
-  queryParams.endTime = undefined;
   handleQuery();
 }
 
-/** 行选中 */
-function handleSelectionChange(selection: any) {
-  removeIds.value = selection.map((item: any) => item.id);
-}
 
 /** 重置密码 */
 function resetPassword(row: { [key: string]: any }) {
@@ -131,7 +141,7 @@ function resetPassword(row: { [key: string]: any }) {
       ElMessage.warning("请输入新密码");
       return false;
     }
-    updateUserPassword(row.id, value).then(() => {
+    updateUserPassword(row.businessId, value).then(() => {
       ElMessage.success("密码重置成功，新密码是：" + value);
     });
   });
@@ -140,7 +150,7 @@ function resetPassword(row: { [key: string]: any }) {
 /** 加载角色下拉数据源 */
 async function loadRoleOptions() {
   getRoleOptions().then((response) => {
-    roleList.value = response.data;
+    roleListOptions.value = response.data;
   });
 }
 
@@ -158,17 +168,20 @@ async function loadDeptOptions() {
  * @param id 用户ID
  */
 async function openDialog(type: string, id?: number) {
-  dialog.visible = true;
-  dialog.type = type;
-
   if (dialog.type === "user-form") {
     // 用户表单弹窗
-    await loadDeptOptions();
-    await loadRoleOptions();
+    await loadDeptOptions(); // 加载部门下拉数据源
+    await loadRoleOptions(); // 加载角色下拉数据源
     if (id) {
       dialog.title = "修改用户";
-      getUserForm(id).then(({ data }) => {
+      await getUserForm(id).then(({ data }) => {
         Object.assign(formData, { ...data });
+        const roleIdsList = formData.roleIds.split(',')
+        formData.roleList = []
+        roleIdsList.forEach(item => {
+          const id = Number(item)
+          formData.roleList.push(id)
+        })
       });
     } else {
       dialog.title = "新增用户";
@@ -177,8 +190,10 @@ async function openDialog(type: string, id?: number) {
     // 用户导入弹窗
     dialog.title = "导入用户";
     dialog.width = 600;
-    loadDeptOptions();
   }
+  dialog.visible = true;
+  dialog.type = type;
+
 }
 
 /**
@@ -192,8 +207,20 @@ function closeDialog() {
     userFormRef.value.resetFields();
     userFormRef.value.clearValidate();
 
-    formData.id = undefined;
-    formData.status = 1;
+      formData.businessId = undefined
+      formData.username = ''
+      formData.password = ''
+      formData.name = ''
+      formData.nickName = ''
+      formData.sex = ''
+      formData.phone = ''
+      formData.idNumber = ''
+      formData.email = ''
+      formData.flag = 1
+      formData.deptId = null
+      formData.roleList = []
+      formData.roleIds = ''
+      formData.remarks = ''
   } else if (dialog.type === "user-import") {
     importData.file = undefined;
     importData.fileList = [];
@@ -205,10 +232,10 @@ const handleSubmit = useThrottleFn(() => {
   if (dialog.type === "user-form") {
     userFormRef.value.validate((valid: any) => {
       if (valid) {
-        const userId = formData.id;
+        const userId = formData.businessId;
         loading.value = true;
         if (userId) {
-          updateUser(userId, formData)
+          updateUser(formData)
             .then(() => {
               ElMessage.success("修改用户成功");
               closeDialog();
@@ -244,32 +271,28 @@ const handleSubmit = useThrottleFn(() => {
 }, 3000);
 
 /** 删除用户 */
-function handleDelete(id?: number) {
-  const userIds = [id || removeIds.value].join(",");
-  if (!userIds) {
-    ElMessage.warning("请勾选删除项");
-    return;
-  }
-
+function handleDelete(id: number) {
   ElMessageBox.confirm("确认删除用户?", "警告", {
     confirmButtonText: "确定",
     cancelButtonText: "取消",
     type: "warning",
-  }).then(function () {
-    deleteUsers(userIds).then(() => {
-      ElMessage.success("删除成功");
-      resetQuery();
-    });
-  });
+  })
+    .then(() => {
+      deleteUsers(id).then(() => {
+        ElMessage.success("删除成功");
+        resetQuery();
+      });
+    })
+    .catch(() => ElMessage.info("已取消删除"));
 }
 
 /** 下载导入模板 */
 function downloadTemplate() {
   downloadTemplateApi().then((response: any) => {
     const fileData = response.data;
-    const fileName = decodeURI(
-      response.headers["content-disposition"].split(";")[1].split("=")[1]
-    );
+    // const fileName = decodeURI(
+    //   response.headers["content-disposition"].split(";")[1].split("=")[1]
+    // );
     const fileType =
       "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8";
 
@@ -278,7 +301,7 @@ function downloadTemplate() {
 
     const downloadLink = document.createElement("a");
     downloadLink.href = downloadUrl;
-    downloadLink.download = fileName;
+    downloadLink.download = '用户导入模板' + '.xls' // 下载后文件名
 
     document.body.appendChild(downloadLink);
     downloadLink.click();
@@ -304,27 +327,34 @@ function handleFileExceed(files: any) {
 
 /** 导出用户 */
 function handleExport() {
-  exportUser(queryParams).then((response: any) => {
-    const fileData = response.data;
-    const fileName = decodeURI(
-      response.headers["content-disposition"].split(";")[1].split("=")[1]
-    );
-    const fileType =
-      "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8";
-
-    const blob = new Blob([fileData], { type: fileType });
-    const downloadUrl = window.URL.createObjectURL(blob);
-
-    const downloadLink = document.createElement("a");
-    downloadLink.href = downloadUrl;
-    downloadLink.download = fileName;
-
-    document.body.appendChild(downloadLink);
-    downloadLink.click();
-
-    document.body.removeChild(downloadLink);
-    window.URL.revokeObjectURL(downloadUrl);
-  });
+  ElMessageBox.confirm("是否确认操作?", "警告", {
+    cancelButtonText: "取消",
+    confirmButtonText: "确定",
+    type: "warning",
+  })
+    .then(() => {
+      exportUser(queryParams).then((response: any) => {
+        const fileData = response.data;
+        const fileName = decodeURI(
+          response.headers["content-disposition"].split(";")[1].split("=")[1]
+        );
+        const fileType =
+          "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8";
+
+        const blob = new Blob([fileData], { type: fileType });
+        const downloadUrl = window.URL.createObjectURL(blob);
+
+        const downloadLink = document.createElement("a");
+        downloadLink.href = downloadUrl;
+        downloadLink.download = fileName;
+
+        document.body.appendChild(downloadLink);
+        downloadLink.click();
+
+        document.body.removeChild(downloadLink);
+        window.URL.revokeObjectURL(downloadUrl);
+      });
+    })
 }
 
 onMounted(() => {
@@ -344,19 +374,19 @@ onMounted(() => {
       <el-col :lg="20" :xs="24">
         <div class="search-container">
           <el-form ref="queryFormRef" :model="queryParams" :inline="true">
-            <el-form-item label="关键字" prop="keywords">
+            <el-form-item label="登录名" prop="username">
               <el-input
-                v-model="queryParams.keywords"
-                placeholder="用户名/昵称/手机号"
+                v-model="queryParams.username"
+                placeholder="请输入登录名"
                 clearable
                 style="width: 200px"
                 @keyup.enter="handleQuery"
               />
             </el-form-item>
 
-            <el-form-item label="状态" prop="status">
+            <el-form-item label="状态" prop="flag">
               <el-select
-                v-model="queryParams.status"
+                v-model="queryParams.flag"
                 placeholder="全部"
                 clearable
                 class="!w-[100px]"
@@ -366,18 +396,6 @@ onMounted(() => {
               </el-select>
             </el-form-item>
 
-            <el-form-item label="创建时间">
-              <el-date-picker
-                class="!w-[240px]"
-                v-model="dateTimeRange"
-                type="daterange"
-                range-separator="~"
-                start-placeholder="开始时间"
-                end-placeholder="截止时间"
-                value-format="YYYY-MM-DD"
-              />
-            </el-form-item>
-
             <el-form-item>
               <el-button type="primary" @click="handleQuery"
                 ><i-ep-search />搜索</el-button
@@ -394,19 +412,15 @@ onMounted(() => {
           <template #header>
             <div class="flex justify-between">
               <div>
+                <!--          //新增-->
                 <el-button
-                  v-hasPerm="['sys:user:add']"
-                  type="success"
+                  v-hasPermi="hasAddPerm"
+                  :class="commonField.addClass"
+                  :type="commonField.typePrimary"
+                  :icon="commonField.addIcon"
+                  :size="commonField.smallSize"
                   @click="openDialog('user-form')"
-                  ><i-ep-plus />新增</el-button
-                >
-                <el-button
-                  v-hasPerm="['sys:user:delete']"
-                  type="danger"
-                  :disabled="removeIds.length === 0"
-                  @click="handleDelete()"
-                  ><i-ep-delete />删除</el-button
-                >
+                >{{ commonField.addName }}</el-button>
               </div>
               <div>
                 <el-dropdown split-button>
@@ -432,88 +446,69 @@ onMounted(() => {
           <el-table
             v-loading="loading"
             :data="pageData"
-            @selection-change="handleSelectionChange"
           >
-            <el-table-column type="selection" width="50" align="center" />
-            <el-table-column
-              key="id"
-              label="编号"
-              align="center"
-              prop="id"
-              width="100"
-            />
-            <el-table-column
-              key="username"
-              label="用户名"
-              align="center"
-              prop="username"
-            />
-            <el-table-column
-              label="用户昵称"
-              width="120"
-              align="center"
-              prop="nickname"
-            />
-
-            <el-table-column
-              label="性别"
-              width="100"
-              align="center"
-              prop="genderLabel"
-            />
-
-            <el-table-column
-              label="部门"
-              width="120"
-              align="center"
-              prop="deptName"
-            />
-            <el-table-column
-              label="手机号码"
-              align="center"
-              prop="mobile"
-              width="120"
-            />
-
-            <el-table-column label="状态" align="center" prop="status">
+            <el-table-column type="index" label="序号" width="90" />
+            <el-table-column label="登录名" prop="username" :show-overflow-tooltip="true">
               <template #default="scope">
-                <el-tag :type="scope.row.status == 1 ? 'success' : 'info'">{{
-                  scope.row.status == 1 ? "启用" : "禁用"
-                }}</el-tag>
+                {{ scope.row.username || '-' }}
+              </template>
+            </el-table-column>
+            <el-table-column label="姓名" prop="name" :show-overflow-tooltip="true">
+              <template #default="scope">
+                {{ scope.row.name || '-' }}
+              </template>
+            </el-table-column>
+            <el-table-column label="手机号" prop="phone" :show-overflow-tooltip="true">
+              <template #default="scope">
+                {{ scope.row.phone || '-' }}
+              </template>
+            </el-table-column>
+            <el-table-column width="120" label="状态" prop="flag">
+              <template #default="scope">
+                <el-switch
+                  v-model="scope.row.flag"
+                  class="switchDisabledStyle"
+                  inactive-value="0"
+                  active-value="1"
+                  @click.native="handleStatusChange(scope.row)"
+                />
+              </template>
+            </el-table-column>
+            <el-table-column :show-overflow-tooltip="true" label="创建时间" prop="createDate" width="160">
+              <template #default="scope">
+                <span>{{ scope.row.createDate || '-' }}</span>
               </template>
             </el-table-column>
-            <el-table-column
-              label="创建时间"
-              align="center"
-              prop="createTime"
-              width="180"
-            />
             <el-table-column label="操作" fixed="right" width="220">
               <template #default="scope">
+                <!--              //修改-->
                 <el-button
-                  v-hasPerm="['sys:user:reset_pwd']"
-                  type="primary"
-                  size="small"
+                  v-hasPermi="hasUpdatePerm"
+                  :class="commonField.updateClass"
+                  :type="commonField.typeParent"
                   link
-                  @click="resetPassword(scope.row)"
-                  ><i-ep-refresh-left />重置密码</el-button
-                >
+                  :size="commonField.size"
+                  @click="openDialog('user-form', scope.row.businessId)"
+                >{{ commonField.updateName }}</el-button>
+                <!--              //重置密码-->
                 <el-button
-                  v-hasPerm="['sys:user:edit']"
-                  type="primary"
+                  v-hasPermi="hasResetPerm"
+                  :class="commonField.resetPasClass"
+                  :type="commonField.typeParent"
                   link
-                  size="small"
-                  @click="openDialog('user-form', scope.row.id)"
-                  ><i-ep-edit />编辑</el-button
-                >
+                  :size="commonField.size"
+                  @click="resetPassword(scope.row)"
+                >{{ commonField.resetPassword }}</el-button>
+                <!--              //删除-->
                 <el-button
-                  v-hasPerm="['sys:user:delete']"
-                  type="primary"
+                  v-if="scope.row.businessId !== 1"
+                  v-hasPermi="hasDelPerm"
+                  :class="commonField.delClass"
+                  :type="commonField.typeParent"
                   link
-                  size="small"
-                  @click="handleDelete(scope.row.id)"
-                  ><i-ep-delete />删除</el-button
-                >
+                  :size="commonField.size"
+                  @click="handleDelete(scope.row.businessId)"
+                >{{ commonField.deleteName }}</el-button>
               </template>
             </el-table-column>
           </el-table>
@@ -545,66 +540,104 @@ onMounted(() => {
         :rules="rules"
         label-width="80px"
       >
-        <el-form-item label="用户名" prop="username">
-          <el-input
-            v-model="formData.username"
-            :readonly="!!formData.id"
-            placeholder="请输入用户名"
-          />
-        </el-form-item>
-
-        <el-form-item label="用户昵称" prop="nickname">
-          <el-input v-model="formData.nickname" placeholder="请输入用户昵称" />
-        </el-form-item>
-
-        <el-form-item label="所属部门" prop="deptId">
-          <el-tree-select
+        <el-row>
+          <el-col :span="12">
+            <el-form-item v-if="formData.businessId == undefined" label="登录名" prop="username">
+              <el-input show-word-limit maxlength="20" v-model="formData.username" placeholder="请输入登录名" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item v-if="formData.businessId == undefined" label="密码" prop="password">
+              <el-input v-model="formData.password" placeholder="请输入密码" type="password" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="姓名" prop="name">
+              <el-input v-model.trim="formData.name" placeholder="请输入用户名称" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="昵称" prop="nickName">
+              <el-input v-model="formData.nickName" placeholder="请输入用户昵称" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="性别">
+              <el-select v-model="formData.sex" placeholder="请选择">
+                <el-option
+                  v-for="dict in sexOptions"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="手机号码" prop="phone">
+              <el-input
+                v-model.trim="formData.phone"
+                placeholder="请输入手机号码"
+                maxlength="11"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="身份证号" prop="idNumber">
+              <el-input v-model.trim="formData.idNumber" placeholder="请输入身份证号" maxlength="18" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="邮箱" prop="email">
+              <el-input v-model.trim="formData.email" placeholder="请输入邮箱" maxlength="25" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item v-if="formData.businessId == undefined" label="状态">
+              <el-radio-group v-model="formData.flag">
+                <el-radio :label="1">启用</el-radio>
+                <el-radio :label="0">停用</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-form-item label="部门" prop="deptId">
+          <treeselect
             v-model="formData.deptId"
+            :options="deptList"
+            :show-count="true"
             placeholder="请选择所属部门"
-            :data="deptList"
-            filterable
-            check-strictly
-            :render-after-expand="false"
           />
         </el-form-item>
-
-        <el-form-item label="性别" prop="gender">
-          <dictionary v-model="formData.gender" type-code="gender" />
-        </el-form-item>
-
-        <el-form-item label="角色" prop="roleIds">
-          <el-select v-model="formData.roleIds" multiple placeholder="请选择">
+        <el-row>
+          <el-col :span="24">
+        <el-form-item label="角色" prop="roleList">
+          <el-select v-model="formData.roleList" multiple placeholder="请选择">
             <el-option
-              v-for="item in roleList"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
+              v-for="item in roleListOptions"
+              :key="item.businessId"
+              :label="item.roleName"
+              :value="item.businessId"
             />
           </el-select>
         </el-form-item>
-
-        <el-form-item label="手机号码" prop="mobile">
-          <el-input
-            v-model="formData.mobile"
-            placeholder="请输入手机号码"
-            maxlength="11"
-          />
-        </el-form-item>
-
-        <el-form-item label="邮箱" prop="email">
-          <el-input
-            v-model="formData.email"
-            placeholder="请输入邮箱"
-            maxlength="50"
-          />
-        </el-form-item>
-
-        <el-form-item label="状态" prop="status">
-          <el-radio-group v-model="formData.status">
-            <el-radio :label="1">正常</el-radio>
-            <el-radio :label="0">禁用</el-radio>
-          </el-radio-group>
-        </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="备注"  prop="remarks">
+              <el-input v-model="formData.remarks" type="textarea" placeholder="请输入内容" />
+            </el-form-item>
+          </el-col>
+        </el-row>
       </el-form>
 
       <!-- 用户导入表单 -->
@@ -613,22 +646,12 @@ onMounted(() => {
         :model="importData"
         label-width="100px"
       >
-        <el-form-item label="部门">
-          <el-tree-select
-            v-model="importData.deptId"
-            placeholder="请选择部门"
-            :data="deptList"
-            filterable
-            check-strictly
-          />
-        </el-form-item>
-
         <el-form-item label="Excel文件">
           <el-upload
             ref="uploadRef"
             action=""
             drag
-            accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
+            accept=".xlsx, .xls"
             :limit="1"
             :auto-upload="false"
             :file-list="importData.fileList"