👣 制定团队规则,提供菜单参考代码规范模板

kicc-ui/src/views/system/menu/MenuModal.vue

@@ -9,6 +9,8 @@
 </template>
 <script lang="ts" setup>
   /**
+   * 提供模板规范代码参考,请尽量保证编写代码风格跟模板规范代码一致
+   * 采用vben-动态表格表单封装组件编写,采用 setup 写法
    * Copyright © 2020-2022 <a href="http://www.entfrm.com/">entfrm</a> All rights reserved.
    * author entfrm开发团队-王翔
    */
@@ -19,21 +21,22 @@
   import { listMenu, addMenu, editMenu, getMenu } from '/@/api/system/menu';
   import { listToTree } from '/@/utils/helper/treeHelper';
 
+  /** 通用变量统一声明区域 */
+  const tag = ref('');
   /** https://v3.cn.vuejs.org/api/options-data.html#emits */
   const emit = defineEmits(['success', 'register']);
-
-  const tag = ref('');
-
   const [registerForm, { resetFields, setFieldsValue, updateSchema, validate, clearValidate }] = useForm({
     labelWidth: 100,
     schemas: formSchema,
     showActionButtonGroup: false,
     baseColProps: { span: 24 }
   });
-
   const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data: WindowInnerData = { _tag: '' }) => {
+    // 处理清除脏数据
     await resetFields();
     await clearValidate();
+    // 处理设置数据
+    tag.value = data._tag;
     const topMenu = { id: '0', name: '顶级菜单', children: [] };
     topMenu.children = listToTree(await listMenu());
     await updateSchema({
@@ -42,9 +45,9 @@
         treeData: [topMenu]
       }
     });
-    tag.value = data._tag;
     const menuId = data.record?.id;
     const props: Partial<ModalProps> = { confirmLoading: false };
+    // 采用tag标签区分操作
     switch (unref(tag)) {
       case 'add':
         props.title = '新增菜单';
@@ -55,13 +58,18 @@
         await setFieldsValue(await getMenu(menuId));
         break;
     }
+    // 尾部:设置处理后的最终配置数据
     setModalProps(props);
   });
 
+  /** 处理弹出框提交 */
   async function handleSubmit() {
     try {
+      // 提取验证数据
       const formData = await validate();
+      // 处理提交之前逻辑
       setModalProps({ confirmLoading: true });
+      // 采用tag标签区分操作
       switch (unref(tag)) {
         case 'add':
           await addMenu(formData);
@@ -70,10 +78,12 @@
           await editMenu(formData);
           break;
       }
+      // 处理提交完成之后逻辑
       closeModal();
       emit('success');
     } finally {
       setModalProps({ confirmLoading: false });
     }
   }
+
 </script>

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

@@ -25,7 +25,7 @@
             label: '新增',
             icon: 'ant-design:plus-circle-outlined',
             auth: ['menu_add'],
-            onClick: handleAdd.bind(null, record),
+            onClick: handleAdd.bind(null, record)
           },
           {
             label: '删除',
@@ -34,17 +34,19 @@
             color: 'error',
             popConfirm: {
               title: '是否确认删除',
-              confirm: handleDel.bind(null, record),
-            },
+              confirm: handleDel.bind(null, record)
+            }
           }]"
         />
       </template>
     </BasicTable>
-    <MenuModal @register="registerModal" @success="handleSuccess"/>
+    <MenuModal @register="registerModal" @success="handleRefreshTable"/>
   </div>
 </template>
 <script lang="ts" setup>
   /**
+   * 提供模板规范代码参考,请尽量保证编写代码风格跟模板规范代码一致
+   * 采用vben-动态表格表单封装组件编写,采用 setup 写法
    * Copyright © 2020-2022 <a href="http://www.entfrm.com/">entfrm</a> All rights reserved.
    * author entfrm开发团队-王翔
    */
@@ -57,15 +59,18 @@
   import { convertDateRange } from '/@/utils/dateUtil';
   import MenuModal from './MenuModal.vue';
 
+  /** 通用变量统一声明区域 */
   const { createMessage } = useMessage();
   const [registerModal, { openModal }] = useModal();
-  const [registerTable, { reload, expandAll,collapseAll }] = useTable({
+  const [registerTable, { reload, expandAll, collapseAll }] = useTable({
     title: '菜单列表',
     api: listMenu,
+    rowKey: 'id',
     columns,
     formConfig: {
       labelWidth: 120,
-      schemas: searchFormSchema
+      schemas: searchFormSchema,
+      autoSubmitOnEnter: true
     },
     isTreeTable: true,
     pagination: false,
@@ -100,11 +105,11 @@
   async function handleDel(record: Recordable) {
     await delMenu(record.id);
     createMessage.success('删除成功!');
-    handleSuccess();
+    handleRefreshTable();
   }
 
-  /** 处理表单提交成功 */
-  function handleSuccess() {
+  /** 处理表格刷新 */
+  function handleRefreshTable() {
     reload();
   }
 

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

@@ -11,6 +11,10 @@ import { h } from 'vue';
 import { Tag } from 'ant-design-vue';
 import { Icon } from '/@/components/Icon';
 
+/** 通用变量统一声明区域 */
+const isMenu = (type: string) => type === 'C';
+const isButton = (type: string) => type === 'F';
+
 /** 表格列配置 */
 export const columns: BasicColumn[] = [
   {
@@ -65,11 +69,7 @@ export const columns: BasicColumn[] = [
   }
 ];
 
-/** 菜单类型 */
-const isMenu = (type: string) => type === 'C';
-/** 按钮类型 */
-const isButton = (type: string) => type === 'F';
-
+/** 搜索表单配置 */
 export const searchFormSchema: FormSchema[] = [
   {
     field: 'name',

kicc-ui/src/views/system/role/RoleDrawer.vue

@@ -74,6 +74,7 @@
     setDrawerProps(props);
   });
 
+  /** 处理弹出框提交 */
   async function handleSubmit() {
     try {
       // 提取验证数据

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

@@ -23,7 +23,7 @@ export const columns: BasicColumn[] = [
     width: 200
   },
   {
-    title: '显示顺序',
+    title: '角色排序',
     dataIndex: 'sort',
     width: 200
   },

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

@@ -80,7 +80,7 @@
         setModalProps(props);
       });
 
-      /** 处理模态框提交 */
+      /** 处理弹出框提交 */
       async function handleSubmit() {
         try {
           // 提取验证数据