feat: 同步接口更新

Former-commit-id: 29a22a96043a55445d48a086aa0a9157bcf7d6c6

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

@@ -44,6 +44,16 @@
         </template>
       </el-table-column>
 
+      <el-table-column label="菜单类型" align="center" width="100">
+        <template #default="scope">
+          <el-tag v-if="scope.row.type === 'MENU'" type="success">菜单</el-tag>
+          <el-tag v-if="scope.row.type === 'CATALOG'" type="warning"
+            >目录</el-tag
+          >
+          <el-tag v-if="scope.row.type === 'EXTLINK'" type="info">外链</el-tag>
+        </template>
+      </el-table-column>
+
       <el-table-column label="状态" align="center" width="100">
         <template #default="scope">
           <el-tag v-if="scope.row.visible === 1" type="success">显示</el-tag>
@@ -261,7 +271,7 @@ const state = reactive({
     name: '',
     visible: 1,
     sort: 1,
-    component: 'Layout',
+    component: undefined,
     type: 'MENU',
   } as MenuFormData,
   rules: {
@@ -333,8 +343,12 @@ function handleRowClick(row: any) {
   emit('menuClick', row);
 }
 
+/**
+ * 新增菜单
+ * @param row
+ */
 async function handleAdd(row: any) {
-  state.formData.id = undefined;
+  formData.value.id = undefined;
   await loadMenuData();
   state.dialog = {
     title: '添加菜单',
@@ -342,7 +356,6 @@ async function handleAdd(row: any) {
   };
   if (row.id) {
     // 行点击新增
-
     state.formData.parentId = row.id;
     if (row.id == '0') {
       state.formData.type = 'CATALOG';
@@ -362,15 +375,15 @@ async function handleAdd(row: any) {
 }
 
 /**
- * 修改弹窗
+ * 编辑菜单
  */
-async function handleUpdate(row: any) {
+async function handleUpdate(row: MenuFormData) {
   await loadMenuData();
   state.dialog = {
-    title: '修改菜单',
+    title: '编辑菜单',
     visible: true,
   };
-  const id = row.id || state.ids;
+  const id = row.id as string;
   getMenuDetail(id).then(({ data }) => {
     state.formData = data;
     cacheData.value.menuType = data.type;
@@ -379,10 +392,10 @@ async function handleUpdate(row: any) {
 }
 
 /**
- * 菜单类型change事件
+ * 菜单类型 change
  */
-function handleMenuTypeChange(val: any) {
-  if (val !== cacheData.value.menuType) {
+function handleMenuTypeChange(menuType: any) {
+  if (menuType !== cacheData.value.menuType) {
     formData.value.path = '';
   } else {
     formData.value.path = cacheData.value.menuPath;
@@ -412,6 +425,11 @@ function submitForm() {
   });
 }
 
+/**
+ * 删除菜单
+ *
+ * @param row
+ */
 function handleDelete(row: any) {
   const ids = [row.id || state.ids].join(',');
   ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {

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

@@ -25,6 +25,7 @@ import {
   PermItem,
   PermQueryParam,
 } from '@/types/api/system/perm';
+import { MenuItem } from '@/types/api/system/menu';
 
 const { proxy }: any = getCurrentInstance();
 
@@ -32,19 +33,23 @@ const queryFormRef = ref(ElForm);
 const dataFormRef = ref(ElForm);
 
 const props = defineProps({
-  menuId: {
-    type: String,
+  menu: {
+    type: Object,
     default: () => {
-      return '';
+      return {} as MenuItem;
     },
   },
 });
 
 watch(
-  () => props.menuId,
+  () => props.menu,
   (value) => {
-    state.queryParams.menuId = value;
+    queryParams.value.menuId = value.id;
+    console.log('menu', value);
     handleQuery();
+  },
+  {
+    deep: true,
   }
 );
 
@@ -193,7 +198,7 @@ function submitForm() {
           state.urlPerm.requestPath;
       }
 
-      state.formData.menuId = props.menuId;
+      formData.value.menuId = props.menu.id;
       if (state.formData.id) {
         updatePerm(state.formData.id, state.formData).then(() => {
           ElMessage.success('修改成功');
@@ -258,7 +263,7 @@ onMounted(() => {
         <el-button
           type="success"
           :icon="Plus"
-          :disabled="!menuId"
+          v-if="menu.id && menu.type == 'MENU'"
           @click="handleAdd"
           >新增</el-button
         >
@@ -267,6 +272,7 @@ onMounted(() => {
           :icon="Delete"
           :disabled="multiple"
           @click="handleDelete"
+          v-if="menu.id && menu.type == 'MENU'"
           >删除</el-button
         >
       </el-form-item>

src/views/system/menu/index.vue

@@ -15,14 +15,14 @@
           <template #header>
             <svg-icon icon-class="perm" />
             <span style="margin: 0 5px">权限列表</span>
-            <el-tag type="success" v-if="menuId" size="small">{{
-              menuName
+            <el-tag type="success" v-if="menu.id" size="small">{{
+              menu.name
             }}</el-tag>
-            <el-tag type="warning" v-else size="small"
-              >请点击左侧菜单列表选择</el-tag
+            <el-link :underline="false" type="warning" v-else size="small"
+              ><el-icon><WarningFilled /></el-icon>请选中左侧菜单</el-link
             >
           </template>
-          <perm-table :menuId="menuId" :menuName="menuName" />
+          <perm-table :menu="menu" />
         </el-card>
       </el-col>
     </el-row>
@@ -35,21 +35,23 @@ import MenuTable from './components/Menu.vue';
 import PermTable from './components/Perm.vue';
 
 import { reactive, toRefs } from 'vue';
-
+import { WarningFilled } from '@element-plus/icons-vue';
+import { MenuItem } from '@/types/api/system/menu';
 const state = reactive({
-  menuId: undefined,
-  menuName: '',
+  menu: {} as MenuItem,
 });
 
-const { menuId, menuName } = toRefs(state);
+const { menu } = toRefs(state);
 
-function handleMenuClick(menuRow: any) {
+function handleMenuClick(menuRow: MenuItem) {
   if (menuRow) {
-    state.menuId = menuRow.id;
-    state.menuName = menuRow.name;
+    menu.value.id = menuRow.id;
+    menu.value.type = menuRow.type;
+    menu.value.name = menuRow.name;
   } else {
-    state.menuId = undefined;
-    state.menuName = '';
+    menu.value.id = undefined;
+    menu.value.type = undefined;
+    menu.value.name = '';
   }
 }
 </script>