chore: done

Author: xiaoxian521

mock/system.ts

@@ -11,7 +11,8 @@ export default [
           username: "admin",
           nickname: "admin",
           avatar: "https://avatars.githubusercontent.com/u/44761321",
-          mobile: "15888886789",
+          phone: "15888886789",
+          email: "@email",
           sex: 0,
           id: 1,
           status: 1,
@@ -28,7 +29,8 @@ export default [
           username: "common",
           nickname: "common",
           avatar: "https://avatars.githubusercontent.com/u/52823142",
-          mobile: "18288882345",
+          phone: "18288882345",
+          email: "@email",
           sex: 1,
           id: 2,
           status: 1,
@@ -44,7 +46,7 @@ export default [
       list = list.filter(item =>
         String(item.status).includes(String(body?.status))
       );
-      if (body.mobile) list = list.filter(item => item.mobile === body.mobile);
+      if (body.phone) list = list.filter(item => item.phone === body.phone);
       if (body.deptId) list = list.filter(item => item.dept.id === body.deptId);
       return {
         success: true,

src/views/system/user/form/index.vue

@@ -7,18 +7,30 @@ import { usePublicHooks } from "../../hooks";
 
 const props = withDefaults(defineProps<FormProps>(), {
   formInline: () => ({
+    title: "新增",
     higherDeptOptions: [],
     parentId: 0,
-    name: "",
-    principal: "",
+    nickname: "",
+    username: "",
+    password: "",
     phone: "",
     email: "",
-    sort: 0,
+    sex: "",
     status: 1,
     remark: ""
   })
 });
 
+const sexOptions = [
+  {
+    value: 0,
+    label: "男"
+  },
+  {
+    value: 1,
+    label: "女"
+  }
+];
 const ruleFormRef = ref();
 const { switchStyle } = usePublicHooks();
 const newFormInline = ref(props.formInline);
@@ -39,57 +51,38 @@ defineExpose({ getRef });
   >
     <el-row :gutter="30">
       <re-col :value="12" :xs="24" :sm="24">
-        <el-form-item label="用户昵称" prop="name">
+        <el-form-item label="用户昵称" prop="nickname">
           <el-input
-            v-model="newFormInline.name"
+            v-model="newFormInline.nickname"
             clearable
-            placeholder="请输入部门名称"
+            placeholder="请输入用户昵称"
           />
         </el-form-item>
       </re-col>
       <re-col :value="12" :xs="24" :sm="24">
-        <el-form-item label="归属部门">
-          <el-cascader
-            class="w-full"
-            v-model="newFormInline.parentId"
-            :options="newFormInline.higherDeptOptions"
-            :props="{
-              value: 'id',
-              label: 'name',
-              emitPath: false,
-              checkStrictly: true
-            }"
-            clearable
-            filterable
-            placeholder="请选择归属部门"
-          >
-            <template #default="{ node, data }">
-              <span>{{ data.name }}</span>
-              <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
-            </template>
-          </el-cascader>
-        </el-form-item>
-      </re-col>
-
-      <re-col :value="12" :xs="24" :sm="24">
-        <el-form-item label="用户名称" prop="name">
+        <el-form-item label="用户名称" prop="username">
           <el-input
-            v-model="newFormInline.name"
+            v-model="newFormInline.username"
             clearable
             placeholder="请输入用户名称"
           />
         </el-form-item>
       </re-col>
-      <re-col :value="12" :xs="24" :sm="24">
-        <el-form-item label="用户密码" prop="name">
+
+      <re-col
+        :value="12"
+        :xs="24"
+        :sm="24"
+        v-if="newFormInline.title === '新增'"
+      >
+        <el-form-item label="用户密码" prop="password">
           <el-input
-            v-model="newFormInline.name"
+            v-model="newFormInline.password"
             clearable
             placeholder="请输入用户密码"
           />
         </el-form-item>
       </re-col>
-
       <re-col :value="12" :xs="24" :sm="24">
         <el-form-item label="手机号" prop="phone">
           <el-input
@@ -99,6 +92,7 @@ defineExpose({ getRef });
           />
         </el-form-item>
       </re-col>
+
       <re-col :value="12" :xs="24" :sm="24">
         <el-form-item label="邮箱" prop="email">
           <el-input
@@ -108,18 +102,53 @@ defineExpose({ getRef });
           />
         </el-form-item>
       </re-col>
-
       <re-col :value="12" :xs="24" :sm="24">
         <el-form-item label="用户性别">
-          <el-input-number
-            v-model="newFormInline.sort"
-            :min="0"
-            :max="9999"
-            controls-position="right"
-          />
+          <el-select
+            v-model="newFormInline.sex"
+            placeholder="请选择用户性别"
+            class="w-full"
+            clearable
+          >
+            <el-option
+              v-for="(item, index) in sexOptions"
+              :key="index"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
         </el-form-item>
       </re-col>
+
       <re-col :value="12" :xs="24" :sm="24">
+        <el-form-item label="归属部门">
+          <el-cascader
+            class="w-full"
+            v-model="newFormInline.parentId"
+            :options="newFormInline.higherDeptOptions"
+            :props="{
+              value: 'id',
+              label: 'name',
+              emitPath: false,
+              checkStrictly: true
+            }"
+            clearable
+            filterable
+            placeholder="请选择归属部门"
+          >
+            <template #default="{ node, data }">
+              <span>{{ data.name }}</span>
+              <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
+            </template>
+          </el-cascader>
+        </el-form-item>
+      </re-col>
+      <re-col
+        :value="12"
+        :xs="24"
+        :sm="24"
+        v-if="newFormInline.title === '新增'"
+      >
         <el-form-item label="用户状态">
           <el-switch
             v-model="newFormInline.status"

src/views/system/user/index.vue

@@ -74,9 +74,9 @@ const {
             class="!w-[160px]"
           />
         </el-form-item>
-        <el-form-item label="手机号码：" prop="mobile">
+        <el-form-item label="手机号码：" prop="phone">
           <el-input
-            v-model="form.mobile"
+            v-model="form.phone"
             placeholder="请输入手机号码"
             clearable
             class="!w-[160px]"
@@ -148,6 +148,7 @@ const {
             </el-popconfirm>
           </div>
           <pure-table
+            row-key="id"
             ref="tableRef"
             adaptive
             align-whole="center"
@@ -177,15 +178,17 @@ const {
               >
                 修改
               </el-button>
-              <el-popconfirm title="是否确认删除?">
+              <el-popconfirm
+                :title="`是否确认删除用户编号为${row.id}的这条数据`"
+                @confirm="handleDelete(row)"
+              >
                 <template #reference>
                   <el-button
                     class="reset-margin"
                     link
                     type="primary"
                     :size="size"
                     :icon="useRenderIcon(Delete)"
-                    @click="handleDelete(row)"
                   >
                     删除
                   </el-button>

src/views/system/user/utils/hook.tsx

@@ -6,6 +6,7 @@ import { zxcvbn } from "@zxcvbn-ts/core";
 import { handleTree } from "@/utils/tree";
 import { message } from "@/utils/message";
 import croppingUpload from "../upload.vue";
+import { usePublicHooks } from "../../hooks";
 import { addDialog } from "@/components/ReDialog";
 import { type PaginationProps } from "@pureadmin/table";
 import type { FormItemProps, RoleFormItemProps } from "../utils/types";
@@ -39,7 +40,7 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
     // 左侧部门树的id
     deptId: "",
     username: "",
-    mobile: "",
+    phone: "",
     status: ""
   });
   const formRef = ref();
@@ -49,6 +50,7 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
   // 上传头像信息
   const avatarInfo = ref();
   const switchLoadMap = ref({});
+  const { switchStyle } = usePublicHooks();
   const higherDeptOptions = ref();
   const treeData = ref([]);
   const treeLoading = ref(true);
@@ -63,7 +65,8 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
     {
       label: "勾选列", // 如果需要表格多选，此处label必须设置
       type: "selection",
-      fixed: "left"
+      fixed: "left",
+      reserveSelection: true // 数据刷新后保留选项
     },
     {
       label: "用户编号",
@@ -115,9 +118,9 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
     },
     {
       label: "手机号码",
-      prop: "mobile",
+      prop: "phone",
       minWidth: 90,
-      formatter: ({ mobile }) => hideTextAtIndex(mobile, { start: 3, end: 6 })
+      formatter: ({ phone }) => hideTextAtIndex(phone, { start: 3, end: 6 })
     },
     {
       label: "状态",
@@ -130,9 +133,10 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
           v-model={scope.row.status}
           active-value={1}
           inactive-value={0}
-          active-text="已开启"
-          inactive-text="已关闭"
+          active-text="已启用"
+          inactive-text="已停用"
           inline-prompt
+          style={switchStyle.value}
           onChange={() => onChange(scope as any)}
         />
       )
@@ -222,7 +226,7 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
   }
 
   function handleDelete(row) {
-    message(`您删除了角色名称为${row.name}的这条数据`, { type: "success" });
+    message(`您删除了用户编号为${row.id}的这条数据`, { type: "success" });
     onSearch();
   }
 
@@ -253,7 +257,7 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
     // 返回当前选中的行
     const curSelected = tableRef.value.getTableRef().getSelectionRows();
     // 接下来根据实际业务，通过选中行的某项数据，比如下面的id，调用接口进行批量删除
-    message(`已删除id为 ${getKeyList(curSelected, "id")} 的数据`, {
+    message(`已删除用户编号为 ${getKeyList(curSelected, "id")} 的数据`, {
       type: "success"
     });
     tableRef.value.getTableRef().clearSelection();
@@ -302,18 +306,20 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
       title: `${title}用户`,
       props: {
         formInline: {
+          title,
           higherDeptOptions: formatHigherDeptOptions(higherDeptOptions.value),
-          parentId: row?.parentId ?? 0,
-          name: row?.name ?? "",
-          principal: row?.principal ?? "",
+          parentId: row?.dept.id ?? 0,
+          nickname: row?.nickname ?? "",
+          username: row?.username ?? "",
+          password: row?.password ?? "",
           phone: row?.phone ?? "",
           email: row?.email ?? "",
-          sort: row?.sort ?? 0,
+          sex: row?.sex ?? "",
           status: row?.status ?? 1,
           remark: row?.remark ?? ""
         }
       },
-      width: "40%",
+      width: "46%",
       draggable: true,
       fullscreenIcon: true,
       closeOnClickModal: false,
@@ -322,7 +328,7 @@ export function useUser(tableRef: Ref, treeRef: Ref) {
         const FormRef = formRef.value.getRef();
         const curData = options.props.formInline as FormItemProps;
         function chores() {
-          message(`您${title}了用户名称为${curData.name}的这条数据`, {
+          message(`您${title}了用户名称为${curData.username}的这条数据`, {
             type: "success"
           });
           done(); // 关闭弹框

src/views/system/user/utils/rule.ts

@@ -4,7 +4,9 @@ import { isPhone, isEmail } from "@pureadmin/utils";
 
 /** 自定义表单规则校验 */
 export const formRules = reactive(<FormRules>{
-  name: [{ required: true, message: "部门名称为必填项", trigger: "blur" }],
+  nickname: [{ required: true, message: "用户昵称为必填项", trigger: "blur" }],
+  username: [{ required: true, message: "用户名称为必填项", trigger: "blur" }],
+  password: [{ required: true, message: "用户密码为必填项", trigger: "blur" }],
   phone: [
     {
       validator: (rule, value, callback) => {

src/views/system/user/utils/types.ts

@@ -1,12 +1,20 @@
 interface FormItemProps {
+  id?: number;
+  /** 用于判断是`新增`还是`修改` */
+  title: string;
   higherDeptOptions: Record<string, unknown>[];
   parentId: number;
-  name: string;
-  principal: string;
+  nickname: string;
+  username: string;
+  password: string;
   phone: string | number;
   email: string;
-  sort: number;
+  sex: string | number;
   status: number;
+  dept?: {
+    id?: number;
+    name?: string;
+  };
   remark: string;
 }
 interface FormProps {