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

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

@@ -11,6 +11,7 @@ import { h } from 'vue';
 import { Tag } from 'ant-design-vue';
 import { Icon } from '/@/components/Icon';
 
+/** 表格列配置 */
 export const columns: BasicColumn[] = [
   {
     title: '菜单名称',

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

@@ -20,6 +20,8 @@
 </template>
 <script lang="ts" setup>
   /**
+   * 提供模板规范代码参考,请尽量保证编写代码风格跟模板规范代码一致
+   * 采用vben-动态表格表单封装组件编写,采用 setup 写法
    * Copyright © 2020-2022 <a href="http://www.entfrm.com/">entfrm</a> All rights reserved.
    * author entfrm开发团队-王翔
    */
@@ -32,30 +34,31 @@
   import { addRole, editRole, getRole } from '/@/api/system/role';
   import { listToTree } from "/@/utils/helper/treeHelper";
 
-  /** https://v3.cn.vuejs.org/api/options-data.html#emits */
+  /** 通用变量统一声明区域 */
-  const emit = defineEmits(['success', 'register']);
-
   const state = reactive({
     // 操作标签
     tag: '',
     // 菜单树形数据
     menuTree: [] as TreeItem[],
   });
-
+  /** https://v3.cn.vuejs.org/api/options-data.html#emits */
+  const emit = defineEmits(['success', 'register']);
   const [registerForm, { resetFields, setFieldsValue, validate, clearValidate }] = useForm({
     labelWidth: 100,
     schemas: formSchema,
     showActionButtonGroup: false,
     baseColProps: { span: 24 }
   });
-
   const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data: WindowInnerData = { _tag: '' }) => {
+    // 处理清除脏数据
     await resetFields();
     await clearValidate();
-    state.menuTree = listToTree(await listMenu());
+    // 处理设置数据
     state.tag = data._tag;
+    state.menuTree = listToTree(await listMenu());
     const roleId = data.record?.id;
     const props: Partial<DrawerProps> = { confirmLoading: false };
+    // 采用tag标签区分操作
     switch (state.tag) {
       case 'add':
         props.title = '新增角色';
@@ -67,13 +70,17 @@
         await setFieldsValue(Object.assign(role, { menuIds: result.extend }));
         break;
     }
+    // 尾部:设置处理后的最终配置数据
     setDrawerProps(props);
   });
 
   async function handleSubmit() {
     try {
+      // 提取验证数据
       const formData = await validate();
+      // 处理提交之前逻辑
       setDrawerProps({ confirmLoading: true });
+      // 采用tag标签区分操作
       switch (state.tag) {
         case 'add':
           await addRole(formData);
@@ -82,6 +89,7 @@
           await editRole(formData);
           break;
       }
+      // 处理提交完成之后逻辑
       closeDrawer();
       emit('success');
     } finally {

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

@@ -1,7 +1,6 @@
 <template>
   <div>
     <BasicTable @register="registerTable"
-                @fetch-success="handleSelectionChange"
                 @selection-change="handleSelectionChange"
     >
       <template #toolbar>
@@ -38,11 +37,14 @@
         />
       </template>
     </BasicTable>
-    <RoleDrawer @register="registerDrawer" @success="handleSuccess"/>
+    <!--弹出窗体区域-->
+    <RoleDrawer @register="registerDrawer" @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开发团队-王翔
    */
@@ -54,9 +56,7 @@
   import { useMessage } from '/@/hooks/web/useMessage';
   import { reactive, toRaw } from 'vue';
 
-  const { createConfirm } = useMessage();
+  /** 通用变量统一声明区域 */
-  const { createMessage } = useMessage();
-
   const state = reactive({
     // 选中数组
     ids: [],
@@ -65,20 +65,23 @@
     // 非多个禁用
     multiple: true
   });
-
+  const { createConfirm } = useMessage();
+  const { createMessage } = useMessage();
   const [registerDrawer, { openDrawer }] = useDrawer();
-  const [registerTable, { reload }] = useTable({
+  const [registerTable, { reload, clearSelectedRowKeys }] = useTable({
     title: '角色列表',
     api: listRole,
+    rowKey: 'id',
     columns,
     formConfig: {
       labelWidth: 120,
-      schemas: searchFormSchema
+      schemas: searchFormSchema,
+      autoSubmitOnEnter: true
     },
+    rowSelection: { type: 'checkbox' },
     useSearchForm: true,
     showTableSetting: true,
     bordered: true,
-    rowSelection: { type: 'checkbox' },
     showIndexColumn: false,
     clickToRowSelect: false,
     actionColumn: {
@@ -92,10 +95,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;
   }
 
   /** 新增按钮操作,行内新增与工具栏局域新增通用 */
@@ -119,13 +122,14 @@
       onOk: async () => {
         await delRole(ids);
         createMessage.success('删除成功!');
-        handleSuccess();
+        handleRefreshTable();
       }
     });
   }
 
-  /** 处理表单提交成功 */
+  /** 处理表格刷新 */
-  function handleSuccess() {
+  function handleRefreshTable() {
+    clearSelectedRowKeys();
     reload();
   }
 

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

@@ -11,8 +11,11 @@ import { h } from 'vue';
 import { Switch, Tag } from 'ant-design-vue';
 import { changeStatus } from '/@/api/system/role';
 import { useMessage } from '/@/hooks/web/useMessage';
+
+/** 通用变量统一声明区域 */
 const { createConfirm } = useMessage();
 
+/** 表格列配置 */
 export const columns: BasicColumn[] = [
   {
     title: '角色名称',
@@ -73,6 +76,7 @@ export const columns: BasicColumn[] = [
   }
 ];
 
+/** 搜索表单配置 */
 export const searchFormSchema: FormSchema[] = [
   {
     field: 'name',
@@ -97,6 +101,7 @@ export const searchFormSchema: FormSchema[] = [
   }
 ];
 
+/** 用户表单配置 */
 export const formSchema: FormSchema[] = [
   {
     field: 'id',

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

@@ -44,9 +44,7 @@
         labelWidth: 100,
         schemas: userFormSchema,
         showActionButtonGroup: false,
-        actionColOptions: {
+        actionColOptions: { span: 24 }
-          span: 24
-        }
       });
       const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data: WindowInnerData = { _tag: '' }) => {
         // 处理清除脏数据