feat-wip(components): 行政区划相关页面代码提交

src/typings/api/sys/rbac.d.ts

@@ -10,9 +10,9 @@ declare namespace Api {
         rootCode: string | null;
         name: string;
         code: string;
-        extCode: string;
+        extCode: string | null;
         sort: number;
-        description: string;
+        description: string | null;
         createTime: string;
         updateTime: string;
         children: RegionVO[];

src/views/sys/rbac/region/index.vue

@@ -1,12 +1,14 @@
 <script setup lang="tsx">
 import { reactive } from 'vue';
 import { NButton, NPopconfirm } from 'naive-ui';
+import { jsonClone } from '@sa/utils';
 import { fetchRegionDelete, fetchRegionDeleteBatch, fetchRegionPaginate } from '@/service/api';
 import { useAppStore } from '@/store/modules/app';
 import { defaultTransform, useNaivePaginatedTable, useTableOperate } from '@/hooks/common/table';
 import { $t } from '@/locales';
 import RegionSearch from '@/views/sys/rbac/region/modules/region-search.vue';
 import RegionOperateDrawer from '@/views/sys/rbac/region/modules/region-operate-drawer.vue';
+import RegionVO = Api.Sys.Rbac.RegionVO;
 
 // ******************** 数据定义 ********************
 
@@ -43,13 +45,6 @@ const { columns, columnChecks, data, loading, getData, getDataByPage, pagination
       type: 'selection',
       align: 'center'
     },
-    {
-      key: 'index',
-      title: $t('common.index'),
-      width: 50,
-      align: 'center',
-      render: (_, index) => index + 1
-    },
     {
       key: 'name',
       title: $t('page.sys.rbac.region.fields.name'),
@@ -92,10 +87,10 @@ const { columns, columnChecks, data, loading, getData, getDataByPage, pagination
       align: 'center',
       render: row => (
         <div class="flex-center gap-8px">
-          <NButton type="primary" ghost size="small" onClick={() => handleAddChildren(row.id)}>
+          <NButton type="primary" ghost size="small" onClick={() => handleAddChildren(row)}>
             {$t('common.children')}
           </NButton>
-          <NButton type="primary" ghost size="small" onClick={() => edit(row.id)}>
+          <NButton type="primary" ghost size="small" onClick={() => edit(row)}>
             {$t('common.edit')}
           </NButton>
           <NPopconfirm onPositiveClick={() => handleDelete(row.id)}>
@@ -114,7 +109,7 @@ const { columns, columnChecks, data, loading, getData, getDataByPage, pagination
   ]
 });
 // 表格操作
-const { drawerVisible, operateType, editingData, checkedRowKeys, handleAdd, handleEdit, onDeleted, onBatchDeleted } =
+const { drawerVisible, operateType, editingData, checkedRowKeys, openDrawer, onDeleted, onBatchDeleted } =
   useTableOperate(data, 'id', getData);
 
 // ******************** 触发事件 ********************
@@ -131,11 +126,25 @@ function handleDelete(id: string) {
   });
 }
 
-function edit(id: string) {
-  handleEdit(id);
+function edit(row: RegionVO) {
+  operateType.value = 'edit';
+  editingData.value = jsonClone(row);
+  openDrawer();
 }
 
-function handleAddChildren(_: string) {}
+function add() {
+  operateType.value = 'add';
+  editingData.value = null;
+  openDrawer();
+}
+
+function handleAddChildren(row: RegionVO) {
+  operateType.value = 'add';
+  // 数据准备
+  editingData.value = jsonClone(row);
+  // 打开抽屉
+  openDrawer();
+}
 </script>
 
 <template>
@@ -152,7 +161,7 @@ function handleAddChildren(_: string) {}
           v-model:columns="columnChecks"
           :disabled-delete="checkedRowKeys.length === 0"
           :loading="loading"
-          @add="handleAdd"
+          @add="add"
           @delete="handleBatchDelete"
           @refresh="getData"
         />

src/views/sys/rbac/region/modules/region-operate-drawer.vue

@@ -46,12 +46,14 @@ function createDefaultModel(): Api.Sys.Rbac.RegionDTO {
 }
 
 // 抽屉标题
+const realOperateType = ref('');
 const title = computed(() => {
-  const titles: Record<NaiveUI.TableOperateType, string> = {
+  const titles: Record<string, string> = {
     add: $t('common.add'),
-    edit: $t('common.edit')
+    edit: $t('common.edit'),
+    children: $t('common.children')
   };
-  return titles[props.operateType];
+  return titles[realOperateType.value];
 });
 
 // Form校验规则
@@ -67,8 +69,17 @@ const rules: Record<RuleKey, App.Global.FormRule> = {
 // ******************** 事件定义 ********************
 function handleInitModel() {
   model.value = createDefaultModel();
+
+  realOperateType.value = 'add';
   if (props.operateType === 'edit' && props.rowData) {
+    realOperateType.value = 'edit';
     Object.assign(model.value, jsonClone(props.rowData));
+  } else if (props.operateType === 'add' && props.rowData && props.rowData.id) {
+    realOperateType.value = 'children';
+    model.value.parentId = props.rowData.id;
+    model.value.parentCode = props.rowData.code;
+    model.value.rootId = props.rowData.rootId;
+    model.value.rootCode = props.rowData.rootCode;
   }
 }