fix: 菜单设置模块的新增功能完成

src/api/system.js

@@ -50,6 +50,20 @@ export const delMenu = (id) => {
     }
   })
 }
+
+// 根据父id查询菜单
+export const getMenuListByParentId = (id) => {
+  return request({
+    url: '/menu/queryListByParentId',
+    method: 'POST',
+    data: {
+      reqdata: {
+        id
+      }
+    }
+  })
+}
+
 // 获取职位列表信息
 export const getJobList = (data = {}) => {
   data.page = data.page || 1 // 当前页码

src/views/system/menu-settings/index.vue

@@ -72,23 +72,28 @@
     <!--  添加服务器信息dialog  -->
     <el-dialog :visible.sync="dialogFormVisible" width="600px" :close-on-click-modal="false" @close="close('addMenuForm')">
       <el-form ref="addMenuForm" :model="menuFormData" label-width="140px" :rules="rules" label-position="right">
-        <el-form-item label="服务器IP" prop="ip">
-          <el-input v-model="menuFormData.ip" />
+        <el-form-item label="菜单名" prop="menuName">
+          <el-input v-model="menuFormData.menuName" />
         </el-form-item>
-        <el-form-item label="所属公司" prop="own">
-          <el-input v-model="menuFormData.own" />
+        <el-form-item label="父级菜单" prop="parentId">
+          <el-input v-model="menuFormData.parentId" />
         </el-form-item>
-        <el-form-item label="操作系统" prop="osinfo">
-          <el-input v-model="menuFormData.osinfo" />
+        <el-form-item
+          v-for="(item, index) in menuFormData.menuUrls"
+          :key="index"
+          prop="menuUrls"
+          :label="index < 1 ? '菜单URL': ''"
+          class="inline-input"
+        >
+          <el-input v-model="item.menuUrl" placeholder="URL描述" :style="{marginRight: '15px'}" />
+          <el-input v-model="item.urldesc" placeholder="URL链接" />
+          <span :style="{marginLeft: '5px'}">
+            <el-button size="small" icon="el-icon-minus" @click.prevent="removeMenuUrl(index)" />
+            <el-button size="small" icon="el-icon-plus" @click.prevent="addMenuUrl()" />
+          </span>
         </el-form-item>
-        <el-form-item label="CPU核数" prop="cpu">
-          <el-input v-model.number="menuFormData.cpu" type="number" />
-        </el-form-item>
-        <el-form-item label="内存大小" prop="memory">
-          <el-input v-model.number="menuFormData.memory" type="number" />
-        </el-form-item>
-        <el-form-item label="备注" prop="remark">
-          <el-input v-model="menuFormData.remark" type="textarea" />
+        <el-form-item label="排序" prop="sort">
+          <el-input v-model="menuFormData.sort" />
         </el-form-item>
         <el-form-item>
           <el-button @click="close('addMenuForm')">取 消</el-button>
@@ -100,7 +105,7 @@
 </template>
 
 <script>
-import { getMenuList, addMenu, delMenu, updateMenu } from '@/api/system'
+import { getMenuList, addMenu, delMenu, updateMenu, getMenuListByParentId } from '@/api/system'
 import Pagination from '@/components/Pagination/index'
 export default {
   name: 'MenuSettings',
@@ -123,57 +128,28 @@ export default {
       dialogFormVisible: false,
       // 服务器信息
       menuFormData: {
-        ip: '',
-        own: '',
-        osinfo: '',
-        cpu: '',
-        memory: '',
-        remark: ''
-      },
-      // 服务器信息表单校验规则
-      rules: {
-        cpu: [
+        menuName: '',
+        menuUrls: [
           {
-            required: true,
-            message: 'CPU核数不能为空'
-          },
-          {
-            type: 'number',
-            message: 'CPU核数必须为数字'
+            menuUrl: '',
+            urldesc: ''
           }
         ],
-        memory: [
-          {
-            required: true,
-            message: '内存不能为空'
-          },
-          {
-            type: 'number',
-            message: '内存必须为数字'
-          }
-        ],
-        ip: [
-          {
-            required: true,
-            message: 'IP地址不能为空'
-          }
-        ],
-        osinfo: [
-          {
-            required: true,
-            message: '操作系统信息不能为空'
-          }
-        ],
-        own: [
+        parentId: '',
+        sort: ''
+      },
+      // 服务器信息表单校验规则
+      rules: {
+        menuName: [
           {
             required: true,
-            message: '拥有者不能为空'
+            message: '菜单名不能为空'
           }
         ],
-        remark: [
+        menuUrls: [
           {
             required: true,
-            message: '备注不能为空'
+            message: '菜单URL不能为空'
           }
         ]
       }
@@ -203,9 +179,19 @@ export default {
       this.fetchList(params)
     },
     // 显示更新服务器dialog
-    showUpdate(item) {
+    async showUpdate(item) {
       // console.log(item)
-      this.menuFormData = item
+      this.menuFormData = Object.assign(item, {
+        menuUrls: [
+          {
+            menuUrl: '',
+            urldesc: ''
+          }
+        ]
+      })
+      // 根据父id去发送请求
+      const res = await getMenuListByParentId(item.parentId)
+      console.log(res)
       this.dialogFormVisible = true
     },
     // 根据id删除服务器数据
@@ -251,7 +237,17 @@ export default {
       // 隐藏dialog
       this.dialogFormVisible = false
       // 清空menuFormData
-      this.menuFormData = {}
+      this.menuFormData = {
+        menuName: '',
+        menuUrls: [
+          {
+            menuUrl: '',
+            urldesc: ''
+          }
+        ],
+        parentId: '',
+        sort: ''
+      }
       // 清除校验的效果
       this.$refs[formName].resetFields()
     },
@@ -287,6 +283,17 @@ export default {
           return false
         }
       })
+    },
+    // 删除一个menuUrl项
+    removeMenuUrl(index) {
+      this.menuFormData.menuUrls.splice(index, 1)
+    },
+    // 增加一个menuUrl项
+    addMenuUrl(item) {
+      this.menuFormData.menuUrls.push({
+        menuUrl: '',
+        urldesc: ''
+      })
     }
   }
 }
@@ -309,6 +316,11 @@ export default {
       margin-right: 30px;
     }
   }
+  .inline-input {
+    ::v-deep .el-input {
+      width: 150px;
+    }
+  }
   ::v-deep .el-pagination {
     display: flex;
     justify-content: flex-end;