refactor: 系统管理页面重构和ts类型声明优化

Former-commit-id: 40263bbb072596ada41ef33d9170841e7e66cd01

src/views/system/menu/components/Menu.vue

@@ -170,7 +170,7 @@
                 @click="iconSelectVisible = true"
               >
                 <template #prefix>
-                  <svg-icon :icon-class="formData.icon" style="margin: auto" />
+                  <svg-icon :icon-class="formData.icon" />
                 </template>
               </el-input>
             </template>
@@ -220,21 +220,21 @@ import { reactive, ref, onMounted, toRefs } from 'vue';
 import { Search, Plus, Edit, Refresh, Delete } from '@element-plus/icons-vue';
 import { ElForm, ElMessage, ElMessageBox, ElPopover } from 'element-plus';
 
+import { Dialog, Option } from '@/types/common';
+
 import {
-  Dialog,
-  Option,
   MenuFormData,
   MenuItem,
-  MenuQueryParam
-} from '@/types';
+  MenuQueryParam,
+} from '@/types/api/system/menu';
 // API 依赖
 import {
-  listTableMenus,
+  listMenus,
   getMenuDetail,
   listSelectMenus,
   addMenu,
   deleteMenus,
-  updateMenu
+  updateMenu,
 } from '@/api/system/menu';
 
 import SvgIcon from '@/components/SvgIcon/index.vue';
@@ -262,7 +262,7 @@ const state = reactive({
     visible: 1,
     sort: 1,
     component: 'Layout',
-    type: 'MENU'
+    type: 'MENU',
   } as MenuFormData,
   rules: {
     parentId: [{ required: true, message: '请选择顶级菜单', trigger: 'blur' }],
@@ -270,8 +270,8 @@ const state = reactive({
     type: [{ required: true, message: '请选择菜单类型', trigger: 'blur' }],
     path: [{ required: true, message: '请输入路由路径', trigger: 'blur' }],
     component: [
-      { required: true, message: '请输入组件完整路径', trigger: 'blur' }
-    ]
+      { required: true, message: '请输入组件完整路径', trigger: 'blur' },
+    ],
   },
   menuOptions: [] as Option[],
   currentRow: undefined,
@@ -279,8 +279,8 @@ const state = reactive({
   iconSelectVisible: false,
   cacheData: {
     menuType: '',
-    menuPath: ''
-  }
+    menuPath: '',
+  },
 });
 
 const {
@@ -292,7 +292,7 @@ const {
   rules,
   menuOptions,
   iconSelectVisible,
-  cacheData
+  cacheData,
 } = toRefs(state);
 
 /**
@@ -302,7 +302,7 @@ function handleQuery() {
   // 重置父组件
   emit('menuClick', null);
   state.loading = true;
-  listTableMenus(state.queryParams).then(({ data }) => {
+  listMenus(state.queryParams).then(({ data }) => {
     state.menuList = data;
     state.loading = false;
   });
@@ -338,7 +338,7 @@ async function handleAdd(row: any) {
   await loadMenuData();
   state.dialog = {
     title: '添加菜单',
-    visible: true
+    visible: true,
   };
   if (row.id) {
     // 行点击新增
@@ -368,7 +368,7 @@ async function handleUpdate(row: any) {
   await loadMenuData();
   state.dialog = {
     title: '修改菜单',
-    visible: true
+    visible: true,
   };
   const id = row.id || state.ids;
   getMenuDetail(id).then(({ data }) => {
@@ -417,7 +417,7 @@ function handleDelete(row: any) {
   ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
     confirmButtonText: '确定',
     cancelButtonText: '取消',
-    type: 'warning'
+    type: 'warning',
   })
     .then(() => {
       deleteMenus(ids).then(() => {

src/views/system/menu/components/Perm.vue

@@ -5,7 +5,7 @@ import {
   reactive,
   ref,
   getCurrentInstance,
-  toRefs
+  toRefs,
 } from 'vue';
 
 import {
@@ -13,18 +13,18 @@ import {
   getPermFormDetail,
   addPerm,
   updatePerm,
-  deletePerms
+  deletePerms,
 } from '@/api/system/perm';
 import { Search, Plus, Edit, Refresh, Delete } from '@element-plus/icons-vue';
 
 import { ElForm, ElMessage, ElMessageBox } from 'element-plus';
+import { Dialog, Option } from '@/types/common';
+
 import {
-  Dialog,
   PermFormData,
   PermItem,
   PermQueryParam,
-  Option
-} from '@/types';
+} from '@/types/api/system/perm';
 
 const { proxy }: any = getCurrentInstance();
 
@@ -34,13 +34,15 @@ const dataFormRef = ref(ElForm);
 const props = defineProps({
   menuId: {
     type: String,
-    default: () => {}
-  }
+    default: () => {
+      return '';
+    },
+  },
 });
 
 watch(
   () => props.menuId,
-  value => {
+  (value) => {
     state.queryParams.menuId = value;
     handleQuery();
   }
@@ -56,26 +58,26 @@ const state = reactive({
   multiple: true,
   queryParams: {
     pageNum: 1,
-    pageSize: 10
+    pageSize: 10,
   } as PermQueryParam,
   permList: [] as PermItem[],
   total: 0,
   dialog: {
-    visible: false
+    visible: false,
   } as Dialog,
   formData: {} as PermFormData,
   rules: {
     name: [{ required: true, message: '请输入权限名称', trigger: 'blur' }],
     perm: [{ required: true, message: '请输入权限标识', trigger: 'blur' }],
-    method: [{ required: true, message: '请选择请求方式', trigger: 'blur' }]
+    method: [{ required: true, message: '请选择请求方式', trigger: 'blur' }],
   },
   microServiceOptions: [] as Option[],
   requestMethodOptions: [] as Option[],
   urlPerm: {
     requestMethod: '',
     serviceName: '',
-    requestPath: ''
-  }
+    requestPath: '',
+  },
 });
 
 const {
@@ -89,7 +91,7 @@ const {
   microServiceOptions,
   requestMethodOptions,
   urlPerm,
-  queryParams
+  queryParams,
 } = toRefs(state);
 
 function handleQuery() {
@@ -123,11 +125,11 @@ function handleSelectionChange(selection: any) {
  * 加载字典数据
  */
 function loadDictOptions() {
-  proxy.$listDictsByCode('micro_service').then((response: any) => {
+  proxy.$getDictItemsByTypeCode('micro_service').then((response: any) => {
     state.microServiceOptions = response.data;
   });
 
-  proxy.$listDictsByCode('request_method').then((response: any) => {
+  proxy.$getDictItemsByTypeCode('request_method').then((response: any) => {
     state.requestMethodOptions = response.data;
   });
 }
@@ -136,7 +138,7 @@ function handleAdd() {
   loadDictOptions();
   state.dialog = {
     title: '添加权限',
-    visible: true
+    visible: true,
   };
 }
 
@@ -144,10 +146,10 @@ function handleUpdate(row: any) {
   loadDictOptions();
   state.dialog = {
     title: '修改权限',
-    visible: true
+    visible: true,
   };
   const id = row.id || state.ids;
-  getPermFormDetail(id).then(response => {
+  getPermFormDetail(id).then((response) => {
     const { data } = response;
     state.formData = data;
     if (data && data.urlPerm) {
@@ -169,6 +171,7 @@ function submitForm() {
   dataFormRef.value.validate((isValid: any) => {
     if (isValid) {
       // 接口权限和按钮权限必填其一
+      console.log(state.urlPerm.requestPath, state.formData.btnPerm);
       if (!(state.urlPerm.requestPath || state.formData.btnPerm)) {
         ElMessage.warning('请至少填写一种权限');
         return false;
@@ -217,7 +220,7 @@ function resetForm() {
   state.urlPerm = {
     requestMethod: '',
     serviceName: '',
-    requestPath: ''
+    requestPath: '',
   };
 }
 
@@ -231,7 +234,7 @@ function handleDelete(row: any) {
   ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
     confirmButtonText: '确定',
     cancelButtonText: '取消',
-    type: 'warning'
+    type: 'warning',
   })
     .then(() => {
       deletePerms(ids).then(() => {

src/views/system/menu/index.vue

@@ -4,7 +4,7 @@
       <el-col :span="10" :xs="24">
         <el-card class="box-card" shadow="always">
           <template #header>
-            <svg-icon color="#333" icon-class="menu" />
+            <svg-icon icon-class="menu" />
             菜单列表
           </template>
           <menu-table @menuClick="handleMenuClick" />
@@ -13,7 +13,7 @@
       <el-col :span="14" :xs="24">
         <el-card class="box-card" shadow="always">
           <template #header>
-            <svg-icon color="#333" icon-class="perm" />
+            <svg-icon icon-class="perm" />
             <span style="margin: 0 5px">权限列表</span>
             <el-tag type="success" v-if="menuId" size="small">{{
               menuName
@@ -38,7 +38,7 @@ import { reactive, toRefs } from 'vue';
 
 const state = reactive({
   menuId: undefined,
-  menuName: ''
+  menuName: '',
 });
 
 const { menuId, menuName } = toRefs(state);