feat:新增编辑增加类型选项

src/views/setting/menu.vue

@@ -3,9 +3,12 @@
     <div class="mymain-container">
       <div class="btn-group clearfix">
         <div class="fl">
-          <el-button size="small" type="primary" icon="el-icon-plus" @click="addOrEditParent('add')"
-            >添加菜单</el-button
-          >
+          <el-button
+            size="small"
+            type="primary"
+            icon="el-icon-plus"
+            @click="addOrEditParent('add')"
+          >添加菜单</el-button>
         </div>
         <div class="fr">
           <!-- <el-input placeholder="请输入菜单名称进行搜索" v-model="screenForm.keyword" size="small" style="width: 240px;" clearable>
@@ -16,14 +19,14 @@
 
       <div class="table">
         <el-table :data="dataList" row-key="moduleId" border default-expand-all :tree-props="{ children: 'children' }">
-          <el-table-column prop="moduleName" label="菜单名称" min-width="150"></el-table-column>
-          <el-table-column prop="url" label="菜单URL" min-width="150"></el-table-column>
+          <el-table-column prop="moduleName" label="菜单名称" min-width="150" />
+          <el-table-column prop="url" label="菜单URL" min-width="150" />
           <el-table-column align="center" prop="icon" label="菜单图标">
             <template slot-scope="scope">
-              <i :class="scope.row.icon" style="font-size: 18px"></i>
+              <i :class="scope.row.icon" style="font-size: 18px" />
             </template>
           </el-table-column>
-          <el-table-column align="center" prop="sortNum" label="排序"></el-table-column>
+          <el-table-column align="center" prop="sortNum" label="排序" />
 
           <el-table-column align="right" label="操作" width="150" fixed="right">
             <template slot-scope="scope">
@@ -32,27 +35,27 @@
                 size="mini"
                 icon="el-icon-plus"
                 @click="addOrEditChild('add', scope.row.moduleId)"
-              ></el-button>
+              />
               <el-button
+                v-if="scope.row.level == 1"
                 type="primary"
                 size="mini"
                 icon="el-icon-edit"
-                v-if="scope.row.level == 1"
                 @click="addOrEditParent('edit', scope.row.moduleId)"
-              ></el-button>
+              />
               <el-button
+                v-if="scope.row.level > 1"
                 type="primary"
                 size="mini"
                 icon="el-icon-edit"
-                v-if="scope.row.level > 1"
                 @click="addOrEditChild('edit', scope.row.moduleId)"
-              ></el-button>
+              />
               <el-popconfirm
                 style="margin-left: 10px"
                 title="确定删除吗？"
                 @onConfirm="handleDelete(scope.row.moduleId)"
               >
-                <el-button slot="reference" size="mini" icon="el-icon-delete"></el-button>
+                <el-button slot="reference" size="mini" icon="el-icon-delete" />
               </el-popconfirm>
             </template>
           </el-table-column>
@@ -75,33 +78,40 @@
         label-position="left"
         label-width="80px"
       >
+        <el-form-item label="类型" prop="type">
+          <el-radio-group v-model="addParentForm.type">
+            <el-radio v-for="item in menuTypeList" :key="item.value" :label="item.label">
+              {{ item.value }}
+            </el-radio>
+          </el-radio-group>
+        </el-form-item>
         <el-form-item label="一级菜单" prop="oneMenu">
           <el-input
+            v-model="addParentForm.oneMenu"
             type="text"
             placeholder="请输入一级菜单名称"
-            v-model="addParentForm.oneMenu"
             maxlength="10"
             show-word-limit
-          ></el-input>
+          />
         </el-form-item>
         <el-form-item label="CODE" prop="code">
-          <el-input placeholder="请输入CODE" v-model="addParentForm.code"></el-input>
+          <el-input v-model="addParentForm.code" placeholder="请输入CODE" />
         </el-form-item>
         <el-form-item label="URL" prop="url">
-          <el-input placeholder="请输入URL" v-model="addParentForm.url"></el-input>
+          <el-input v-model="addParentForm.url" placeholder="请输入URL" />
         </el-form-item>
         <el-form-item label="全URL" prop="fullUrl">
-          <el-input placeholder="请输入全URL" v-model="addParentForm.fullUrl"></el-input>
+          <el-input v-model="addParentForm.fullUrl" placeholder="请输入全URL" />
         </el-form-item>
         <el-form-item label="图标" prop="icon">
           <div class="iconInput">
-            <div class="icon" v-if="addParentForm.icon"><i :class="addParentForm.icon"></i></div>
-            <el-input placeholder="请选择图标" v-model="addParentForm.icon"></el-input>
+            <div v-if="addParentForm.icon" class="icon"><i :class="addParentForm.icon" /></div>
+            <el-input v-model="addParentForm.icon" placeholder="请选择图标" />
             <el-button type="primary" @click="toChooseIcon(1)">选择</el-button>
           </div>
         </el-form-item>
         <el-form-item label="排序" prop="sort">
-          <el-input placeholder="请输入排序" v-model.number="addParentForm.sort"></el-input>
+          <el-input v-model.number="addParentForm.sort" placeholder="请输入排序" />
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -125,47 +135,54 @@
         label-position="left"
         label-width="80px"
       >
+        <el-form-item label="类型" prop="type">
+          <el-radio-group v-model="addChildForm.type">
+            <el-radio v-for="item in menuTypeList" :key="item.value" :label="item.label">
+              {{ item.value }}
+            </el-radio>
+          </el-radio-group>
+        </el-form-item>
         <el-form-item label="上级菜单" prop="oneMenu">
           <!-- <el-select v-model="addChildForm.oneMenu" placeholder="请选择一级菜单" style="width: 100%">
             <el-option :label="item.moduleName" :value="item.moduleId" v-for="(item, index) in dataList" :key="index"></el-option>
           </el-select> -->
           <el-cascader
+            v-model="addChildForm.oneMenu"
             style="width: 100%"
             :options="dataList"
             :props="{ checkStrictly: true, value: 'moduleId', label: 'moduleName' }"
-            v-model="addChildForm.oneMenu"
             filterable
             clearable
-          >
-          </el-cascader>
+          />
         </el-form-item>
+
         <el-form-item label="二级菜单" prop="twoMenu">
           <el-input
+            v-model="addChildForm.twoMenu"
             type="text"
             placeholder="请输入二级菜单名称"
-            v-model="addChildForm.twoMenu"
             maxlength="10"
             show-word-limit
-          ></el-input>
+          />
         </el-form-item>
         <el-form-item label="CODE" prop="code">
-          <el-input placeholder="请输入CODE" v-model="addChildForm.code"></el-input>
+          <el-input v-model="addChildForm.code" placeholder="请输入CODE" />
         </el-form-item>
         <el-form-item label="URL" prop="url">
-          <el-input placeholder="请输入URL" v-model="addChildForm.url"></el-input>
+          <el-input v-model="addChildForm.url" placeholder="请输入URL" />
         </el-form-item>
         <el-form-item label="全URL" prop="fullUrl">
-          <el-input placeholder="请输入全URL" v-model="addChildForm.fullUrl"></el-input>
+          <el-input v-model="addChildForm.fullUrl" placeholder="请输入全URL" />
         </el-form-item>
         <el-form-item label="图标" prop="icon">
           <div class="iconInput">
-            <div class="icon" v-if="addChildForm.icon"><i :class="addChildForm.icon"></i></div>
-            <el-input placeholder="请选择图标" v-model="addChildForm.icon"></el-input>
+            <div v-if="addChildForm.icon" class="icon"><i :class="addChildForm.icon" /></div>
+            <el-input v-model="addChildForm.icon" placeholder="请选择图标" />
             <el-button type="primary" @click="toChooseIcon(2)">选择</el-button>
           </div>
         </el-form-item>
         <el-form-item label="排序" prop="sort">
-          <el-input placeholder="请输入排序" v-model.number="addChildForm.sort"></el-input>
+          <el-input v-model.number="addChildForm.sort" placeholder="请输入排序" />
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -183,8 +200,8 @@
       :close-on-click-modal="false"
     >
       <div class="iconList">
-        <div class="item" v-for="(item, index) in iconList" :key="index" @click="chooseIcon(item.value)">
-          <i :class="item.value"></i>
+        <div v-for="(item, index) in iconList" :key="index" class="item" @click="chooseIcon(item.value)">
+          <i :class="item.value" />
         </div>
       </div>
     </el-dialog>
@@ -218,9 +235,11 @@ export default {
         url: '',
         fullUrl: '',
         icon: '',
-        sort: 0
+        sort: 0,
+        type: 1
       },
       addParentFormRules: {
+        type: [{ required: true, message: '请选择类型', trigger: 'change' }],
         oneMenu: [{ required: true, message: '请填写一级菜单名称', trigger: 'blur' }],
         code: [{ required: true, message: '请填写菜单CODE', trigger: 'blur' }],
         url: [{ required: true, message: '请填写菜单URL', trigger: 'blur' }],
@@ -237,9 +256,11 @@ export default {
         url: '',
         fullUrl: '',
         icon: '',
-        sort: 0
+        sort: 0,
+        type: 1
       },
       addChildFormRules: {
+        type: [{ required: true, message: '请选择类型', trigger: 'change' }],
         oneMenu: [{ required: true, message: '请选择一级菜单', trigger: 'change' }],
         twoMenu: [{ required: true, message: '请填写二级菜单', trigger: 'blur' }],
         code: [{ required: true, message: '请填写菜单CODE', trigger: 'blur' }],
@@ -558,13 +579,27 @@ export default {
         { label: 'el-icon-ice-cream-square', value: 'el-icon-ice-cream-square' },
         { label: 'el-icon-ice-cream-round', value: 'el-icon-ice-cream-round' }
       ],
-      chooseIconType: null
+      chooseIconType: null,
+      menuTypeList: [
+        {
+          label: 1,
+          value: '目录'
+        },
+        {
+          label: 2,
+          value: '页面'
+        },
+        {
+          label: 4,
+          value: '外链'
+        }
+      ]
     }
   },
   computed: {
     ...mapGetters(['userid', 'name']),
     isAdmin() {
-      let type = JSON.parse(localStorage.getItem('supply_user')).type
+      const type = JSON.parse(localStorage.getItem('supply_user')).type
       return type === 2
     }
   },
@@ -601,7 +636,9 @@ export default {
             url: res.data.url,
             fullUrl: res.data.fullUrl,
             icon: res.data.icon,
-            sort: res.data.sortNum
+            sort: res.data.sortNum,
+            parentId: res.data.parentId,
+            type: res.data.type
           }
         })
       }
@@ -617,14 +654,15 @@ export default {
     submitAddParentForm() {
       this.$refs.addParentForm.validate(valid => {
         if (valid) {
-          let params = {
+          const params = {
             moduleName: this.addParentForm.oneMenu,
             code: this.addParentForm.code,
             url: this.addParentForm.url,
             fullUrl: this.addParentForm.fullUrl,
             icon: this.addParentForm.icon,
             sortNum: this.addParentForm.sort,
-            parentId: 0
+            parentId: 0,
+            type: this.addParentForm.type
           }
           if (this.addParentFormType == 'edit') {
             params.moduleId = this.editParentId
@@ -664,7 +702,9 @@ export default {
             url: res.data.url,
             fullUrl: res.data.fullUrl,
             icon: res.data.icon,
-            sort: res.data.sortNum
+            sort: res.data.sortNum,
+            parentId: res.data.parentId,
+            type: res.data.type
           }
         })
       }
@@ -683,9 +723,9 @@ export default {
           let params = {}
           let parentId = null
           if (this.addChildForm.oneMenu instanceof Array) {
-            parentId = this.addChildForm.oneMenu[this.addChildForm.oneMenu.length - 1]
+            parentId = this.addChildForm.oneMenu[this.addChildForm.oneMenu.length - 1] || 0
           } else {
-            parentId = this.addChildForm.oneMenu
+            parentId = this.addChildForm.oneMenu || 0
           }
           if (this.addChildFormType == 'edit') {
             params = {
@@ -696,7 +736,8 @@ export default {
               url: this.addChildForm.url,
               fullUrl: this.addChildForm.fullUrl,
               icon: this.addChildForm.icon,
-              sortNum: this.addChildForm.sort
+              sortNum: this.addChildForm.sort,
+              type: this.addChildForm.type
             }
             editMenu(params).then(res => {
               this.cancelAddChildForm()
@@ -711,7 +752,8 @@ export default {
               url: this.addChildForm.url,
               fullUrl: this.addChildForm.fullUrl,
               icon: this.addChildForm.icon,
-              sortNum: this.addChildForm.sort
+              sortNum: this.addChildForm.sort,
+              type: this.addChildForm.type
               // type: 2
             }
             addMenu(params).then(res => {