🎟 用户模块测试完毕

kicc-ui/src/views/system/user/DeptTree.vue

@@ -11,6 +11,12 @@
   </div>
 </template>
 <script lang="ts">
+  /**
+   * 提供模板规范代码参考,请尽量保证编写代码风格跟模板规范代码一致
+   * 采用vben-树形选择封装组件编写,不采用 setup 写法
+   * Copyright © 2020-2022 <a href="http://www.entfrm.com/">entfrm</a> All rights reserved.
+   * author entfrm开发团队-王翔
+   */
   import { defineComponent, onMounted, ref } from 'vue';
   import { BasicTree, TreeItem } from '/@/components/Tree';
   import { deptList } from '/@/api/system/dept';
@@ -21,19 +27,27 @@
     components: { BasicTree },
     emits: ['select'],
     setup(props, { emit }) {
+
+      /** 通用变量统一声明区域 */
       const treeData = ref<TreeItem[]>([]);
 
-      async function fetch() {
+      /** 生命周期钩子回调处理区域 */
+      onMounted(() => handleFetch());
+
+      /** 处理获取树形数据 */
+      async function handleFetch() {
         treeData.value = listToTree(await deptList());
       }
 
-      function handleSelect(keys: string, e) {
+      /** 处理树形选择 */
-        emit('select', keys[0]);
+      function handleSelect(selectedKeys: string) {
-        console.log(keys, e);
+        emit('select', selectedKeys[0]);
       }
 
-      onMounted(() => fetch());
+      return {
-      return { treeData, handleSelect };
+        treeData,
+        handleSelect
+      };
     }
   });
 </script>

kicc-ui/src/views/system/user/ResetPwdModal.vue

@@ -7,7 +7,7 @@
   >
     <Form :model="modelRef" :rules="rulesRef">
       <FormItem name="newPassword" v-bind="validateInfos.newPassword">
-        <StrengthMeter v-model:value="modelRef.newPassword" placeholder="密码"/>
+        <StrengthMeter v-model:value="modelRef.newPassword" placeholder="请输入重置密码"/>
       </FormItem>
     </Form>
   </BasicModal>
@@ -15,7 +15,8 @@
 
 <script lang="ts" setup>
   /**
-   * 采用ant-design-vue原生组件编写form
+   * 提供模板规范代码参考,请尽量保证编写代码风格跟模板规范代码一致
+   * 采用ant-design-vue原生组件编写表单,采用 setup 写法
    * Copyright © 2020-2022 <a href="http://www.entfrm.com/">entfrm</a> All rights reserved.
    * author entfrm开发团队-王翔
    */
@@ -26,16 +27,16 @@
   import { resetPwd } from '/@/api/system/user';
   import { useMessage } from '/@/hooks/web/useMessage';
 
-  /** 表单信息类型规范 */
+  /** 类型规范统一声明定义区域 */
   interface FormState {
     id: string;
     newPassword: string;
   }
 
+  /** 通用变量统一声明区域 */
   const { createMessage } = useMessage();
   /** https://v3.cn.vuejs.org/api/options-data.html#emits */
   const emit = defineEmits(['success', 'register']);
-
   const FormItem = Form.Item;
   const useForm = Form.useForm;
   const modelRef = reactive<FormState>({
@@ -61,24 +62,28 @@
       }
     ]
   });
-
   const { resetFields, clearValidate, validate, validateInfos } = useForm(modelRef, rulesRef);
-
   const [registerModal, { setModalProps, closeModal }] = useModalInner( (data: WindowInnerData) => {
+    // 处理清除脏数据
     resetFields();
     clearValidate();
+    // 处理设置数据
     modelRef.id = data.record?.id;
     const props: Partial<ModalProps> = { confirmLoading: false };
+    // 尾部:设置处理后的最终配置数据
     setModalProps(props);
   });
 
+  /** 处理模态框提交 */
   async function handleSubmit() {
     try {
+      // 提取验证数据
+      const formData = await validate();
+      // 处理提交之前逻辑
       setModalProps({ confirmLoading: true });
       if (!modelRef.id) return createMessage.error('用户编号ID不存在,请检查!');
-      // 重置用户密码信息
-      const formData = await validate();
       await resetPwd(formData);
+      // 处理提交完成之后逻辑
       closeModal();
       emit('success');
     } finally {

kicc-ui/src/views/system/user/UserModal.vue

@@ -9,6 +9,8 @@
 </template>
 <script lang="ts">
   /**
+   * 提供模板规范代码参考,请尽量保证编写代码风格跟模板规范代码一致
+   * 采用vben-动态表格表单封装组件编写,不采用 setup 写法
    * Copyright © 2020-2022 <a href="http://www.entfrm.com/">entfrm</a> All rights reserved.
    * author entfrm开发团队-王翔
    */
@@ -24,21 +26,20 @@
   import { TreeItem } from "/@/components/Tree";
   import { useMessage } from '/@/hooks/web/useMessage';
 
-  const { createMessage } = useMessage();
-
   export default defineComponent({
     name: 'UserModal',
     components: { BasicModal, BasicForm },
     emits: ['success', 'register'],
     setup(props, { emit }) {
 
+      /** 通用变量统一声明区域 */
       const state = reactive({
         // 操作标签
         tag: '',
         // 部门树形数据
         deptTree: [] as TreeItem[],
       });
-
+      const { createMessage } = useMessage();
       const [registerForm, { resetFields, setFieldsValue, updateSchema, validate, clearValidate }] = useForm({
         labelWidth: 100,
         schemas: userFormSchema,
@@ -47,10 +48,11 @@
           span: 24
         }
       });
-
+      const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data: WindowInnerData = { _tag: '' }) => {
-      const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+        // 处理清除脏数据
         await resetFields();
         await clearValidate();
+        // 处理设置数据
         state.tag = data._tag;
         state.deptTree = listToTree(await deptList());
         const userId = data.record?.id;
@@ -65,6 +67,7 @@
             show: state.tag == 'add'
           }
         ]);
+        // 采用tag标签区分操作
         switch (state.tag) {
           case 'add':
             props.title = '新增用户';
@@ -75,15 +78,20 @@
             await setFieldsValue(result.result);
             break;
         }
+        // 尾部:设置处理后的最终配置数据
         setModalProps(props);
       });
 
+      /** 处理模态框提交 */
       async function handleSubmit() {
         try {
+          // 提取验证数据
           const formData = await validate();
+          // 处理提交之前逻辑
           setModalProps({ confirmLoading: true });
           formData.deptName = findListNameById(formData.deptId, toRaw(state.deptTree), { idField: 'deptId' });
           if (!formData.deptName) return createMessage.error('部门名称数据为空,请重试!');
+          // 采用tag标签区分操作
           switch (state.tag) {
             case 'add':
               await addUser(formData);
@@ -92,6 +100,7 @@
               await editUser(formData);
               break;
           }
+          // 处理提交完成之后逻辑
           closeModal();
           emit('success');
         } finally {

kicc-ui/src/views/system/user/index.vue

@@ -1,8 +1,8 @@
 <template>
-  <PageWrapper dense
+  <PageWrapper contentClass="flex"
                contentFullHeight
                fixedHeight
-               contentClass="flex"
+               dense
   >
     <DeptTree class="w-1/4 xl:w-1/5" @select="handleSelect"/>
     <BasicTable class="w-3/4 xl:w-5/5"
@@ -50,12 +50,19 @@
         />
       </template>
     </BasicTable>
+    <!--弹出窗体区域-->
     <UserModal @register="registerModal" @success="handleSuccess"/>
     <ResetPwdModal @register="registerResetPwdModal" @success="handleSuccess"/>
   </PageWrapper>
 </template>
 
 <script lang="ts">
+  /**
+   * 提供模板规范代码参考,请尽量保证编写代码风格跟模板规范代码一致
+   * 采用vben-动态表格表单封装组件编写,不采用 setup 写法
+   * Copyright © 2020-2022 <a href="http://www.entfrm.com/">entfrm</a> All rights reserved.
+   * author entfrm开发团队-王翔
+   */
   import { defineComponent, reactive, toRaw } from 'vue';
   import { BasicTable, useTable, TableAction } from '/@/components/Table';
   import { listUser, delUser } from '/@/api/system/user';
@@ -68,9 +75,6 @@
   import { useMessage } from '/@/hooks/web/useMessage';
   import { convertDateRange } from "/@/utils/dateUtil";
 
-  const { createConfirm } = useMessage();
-  const { createMessage } = useMessage();
-
   export default defineComponent({
     name: 'UserManagement',
     components: {
@@ -82,6 +86,8 @@
       ResetPwdModal
     },
     setup() {
+
+      /** 通用变量统一声明区域 */
       const state = reactive({
         // 选中数组
         ids: [],
@@ -92,7 +98,8 @@
         // 搜索信息
         searchInfo: {} as Recordable
       });
-
+      const { createConfirm } = useMessage();
+      const { createMessage } = useMessage();
       const [registerModal, { openModal }] = useModal();
       const [registerResetPwdModal, { openModal: openResetPwdModal }] = useModal();
       const [registerTable, { reload }] = useTable({
@@ -124,10 +131,10 @@
 
       /** 处理多选框选中数据 */
       function handleSelectionChange(selection?: Recordable) {
-        const rawRows = toRaw(selection?.rows) || [];
+        const rowSelection = toRaw(selection?.keys);
-        state.ids = rawRows.map(item => item.id);
+        state.ids = rowSelection;
-        state.single = rawRows.length != 1;
+        state.single = rowSelection.length != 1;
-        state.multiple = !rawRows.length;
+        state.multiple = !rowSelection.length;
       }
 
       /** 新增按钮操作,行内新增与工具栏局域新增通用 */

kicc-ui/src/views/system/user/user.data.ts

@@ -12,28 +12,31 @@ 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[] = [
   {
     title: '用户名称',
     dataIndex: 'userName',
-    width: 120,
+    width: 120
   },
   {
     title: '用户昵称',
     dataIndex: 'nickName',
-    width: 120,
+    width: 120
   },
   {
     title: '机构名称',
     dataIndex: 'deptName',
-    width: 200,
+    width: 200
   },
   {
     title: '手机号码',
     dataIndex: 'phone',
-    width: 200,
+    width: 200
   },
   {
     title: '状态',
@@ -74,19 +77,20 @@ export const columns: BasicColumn[] = [
   {
     title: '创建时间',
     dataIndex: 'createTime',
-    width: 180,
+    width: 180
-  },
+  }
 ];
 
+/** 搜索表单配置 */
 export const searchFormSchema: FormSchema[] = [
   {
     field: 'userName',
     label: '用户名称',
     component: 'Input',
     componentProps: {
-      placeholder: '请输入名称/编码',
+      placeholder: '请输入用户名称',
     },
-    colProps: { span: 8 },
+    colProps: { span: 8 }
   },
   {
     field: 'dateRange',
@@ -101,6 +105,7 @@ export const searchFormSchema: FormSchema[] = [
   }
 ];
 
+/** 用户表单配置 */
 export const userFormSchema: FormSchema[] = [
   {
     field: 'id',
@@ -138,7 +143,6 @@ export const userFormSchema: FormSchema[] = [
     field: 'phone',
     label: '手机号',
     component: 'Input',
-    required: true,
     rules: [
       {
         required: true,
@@ -155,7 +159,6 @@ export const userFormSchema: FormSchema[] = [
     field: 'email',
     label: '邮箱',
     component: 'Input',
-    required: true,
     rules: [
       {
         required: true,
@@ -181,10 +184,26 @@ export const userFormSchema: FormSchema[] = [
     field: 'password',
     label: '密码',
     component: 'InputPassword',
-    required: true,
     colProps: {
       span: 12
+    },
+    rules: [
+      {
+        required: true,
+        whitespace: true,
+        message: '请输入密码！',
+      },
+      {
+        pattern: new RegExp('[^\\u4e00-\\u9fa5]+'),
+        type: 'string',
+        message: '密码不能输入汉字！',
+      },
+      {
+        min: 6,
+        max: 32,
+        message: '长度必需在6-32之间！',
       }
+    ]
   },
   {
     field: 'sex',
@@ -234,6 +253,9 @@ export const userFormSchema: FormSchema[] = [
     label: '备注',
     field: 'remarks',
     component: 'InputTextArea',
+    componentProps: {
+      rows: 6
+    },
     colProps: {
       span: 24
     }