更新菜单管理

src/api/menu.js

@@ -37,17 +37,17 @@ export function roleMenuTreeselect(roleId) {
 // 新增菜单
 export function addMenu(data) {
   return request({
-    url: '/api/v1/menu',
+    url: '/menu/AddMenu',
     method: 'post',
     data: data
   })
 }
 
 // 修改菜单
-export function updateMenu(data, id) {
+export function updateMenu(data ) {
   return request({
-    url: '/api/v1/menu/' + id,
-    method: 'put',
+    url: '/menu/menuEdit',
+    method: 'post',
     data: data
   })
 }
@@ -55,8 +55,8 @@ export function updateMenu(data, id) {
 // 删除菜单
 export function delMenu(data) {
   return request({
-    url: '/api/v1/menu',
-    method: 'delete',
+    url: '/menu/menuDel',
+    method: 'post',
     data: data
   })
 }

src/styles/scss/index.scss

@@ -4,6 +4,7 @@
 @import './element-ui.scss';
 @import './sidebar.scss';
 @import './btn.scss';
+@import './admin.scss';
 
 body {
   margin: 0;

src/views/menu/index.vue

@@ -22,12 +22,7 @@
       </el-form-item>
       <el-form-item>
         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-            <el-button
-              type="primary"
-              icon="el-icon-plus"
-              size="mini"
-              @click="handleAdd"
-            >新增</el-button>
+        <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
       </el-form-item>
     </el-form>
 
@@ -36,7 +31,7 @@
       :data="menuList"
       border
       row-key="id"
-          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
     >
       <el-table-column prop="title" label="菜单名称" :show-overflow-tooltip="true" width="180px" />
       <el-table-column prop="icon" label="图标" align="center" width="100px">
@@ -47,7 +42,7 @@
       <el-table-column prop="sort" label="排序" width="60px" />
       <el-table-column prop="path" label="组件路径" :show-overflow-tooltip="true">
         <template slot-scope="scope">
-              <span v-if="scope.row.menuType=='A'">{{ scope.row.path }}</span>
+          <span v-if="scope.row.menuType == 'A'">{{ scope.row.path }}</span>
           <span v-else>{{ scope.row.component }}</span>
         </template>
       </el-table-column>
@@ -58,18 +53,8 @@
       </el-table-column>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180">
         <template slot-scope="scope">
-              <el-button
-                size="mini"
-                type="text"
-                icon="el-icon-edit"
-                @click="handleUpdate(scope.row)"
-              >修改</el-button>
-              <el-button
-                size="mini"
-                type="text"
-                icon="el-icon-plus"
-                @click="handleAdd(scope.row)"
-              >新增</el-button>
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
+          <el-button size="mini" type="text" icon="el-icon-plus" @click="handleAdd(scope.row)">新增</el-button>
           <el-button
             size="mini"
             type="text"
@@ -101,13 +86,13 @@
                     <i class="el-icon-question" />
                   </el-tooltip>
                 </span>
-                    <!-- <treeselect
-                      v-model="form.parentId"
+                <treeselect
+                  v-model="form.fid"
                   :options="menuOptions"
                   :normalizer="normalizer"
                   :show-count="true"
                   placeholder="选择上级菜单"
-                    /> -->
+                />
               </el-form-item>
             </el-col>
             <el-col :span="12">
@@ -133,60 +118,26 @@
               </el-form-item>
             </el-col>
 
-                <el-col :span="24">
-                  <el-form-item prop="menuType">
-                    <span slot="label">
-                      菜单类型
-                      <el-tooltip content="包含目录：以及菜单或者菜单组，菜单：具体对应某一个页面，按钮：功能才做按钮；" placement="top">
-                        <i class="el-icon-question" />
-                      </el-tooltip>
-                    </span>
-                    <el-radio-group v-model="form.menuType">
-                      <el-radio label="M">目录</el-radio>
-                      <el-radio label="C">菜单</el-radio>
-                      <el-radio label="F">按钮</el-radio>
-                    </el-radio-group>
-                  </el-form-item>
-                </el-col>
-                <el-col :span="24">
-                  <el-form-item label="菜单图标">
-                    <el-popover
-                      placement="bottom-start"
-                      width="460"
-                      trigger="click"
-                      @show="$refs['iconSelect'].reset()"
-                    >
-                      <IconSelect ref="iconSelect" @selected="selected" />
-                      <el-input slot="reference" v-model="form.icon" placeholder="点击选择图标" readonly>
-                        <svg-icon
-                          v-if="form.icon"
-                          slot="prefix"
-                          :icon-class="form.icon"
-                          class="el-input__icon"
-                          style="height: 32px;width: 16px;"
-                        />
-                        <i v-else slot="prefix" class="el-icon-search el-input__icon" />
-                      </el-input>
-                    </el-popover>
-                  </el-form-item>
-                </el-col>
             <el-col :span="12">
-                  <el-form-item v-if="form.menuType == 'M' || form.menuType == 'C'" prop="menuName">
+              <el-form-item prop="menu_name">
                 <span slot="label">
                   路由名称
                   <el-tooltip content="需要和页面name保持一致，对应页面即可选择缓存" placement="top">
                     <i class="el-icon-question" />
                   </el-tooltip>
                 </span>
-                    <el-input v-model="form.menuName" placeholder="请输入路由名称" />
+                <el-input v-model="form.menu_name" placeholder="请输入路由名称" />
               </el-form-item>
             </el-col>
 
-                <el-col v-if="form.menuType == 'M' || form.menuType == 'C'" :span="12">
+            <el-col :span="12">
               <el-form-item prop="component">
                 <span slot="label">
                   组件路径
-                      <el-tooltip content="菜单对应的具体vue页面文件路径views的下级路径/admin/sys-api/index；目录类型：填写Layout，如何有二级目录请参照日志目录填写；" placement="top">
+                  <el-tooltip
+                    content="菜单对应的具体vue页面文件路径views的下级路径/admin/sys-api/index；目录类型：填写Layout，如何有二级目录请参照日志目录填写；"
+                    placement="top"
+                  >
                     <i class="el-icon-question" />
                   </el-tooltip>
                 </span>
@@ -194,26 +145,14 @@
               </el-form-item>
             </el-col>
 
-                <el-col :span="12">
-                  <el-form-item v-if="form.menuType == 'M' || form.menuType == 'C'">
-                    <span slot="label">
-                      是否外链
-                      <el-tooltip content="可以通过iframe打开指定地址" placement="top">
-                        <i class="el-icon-question" />
-                      </el-tooltip>
-                    </span>
-                    <el-radio-group v-model="form.isFrame">
-                      <el-radio label="0">是</el-radio>
-                      <el-radio label="1">否</el-radio>
-                    </el-radio-group>
-                  </el-form-item>
-                </el-col>
-
             <el-col :span="12">
               <el-form-item v-if="form.menuType != 'F'" prop="path">
                 <span slot="label">
                   路由地址
-                      <el-tooltip content="访问此页面自定义的url地址，建议/开头书写，例如 /app-name/menu-name" placement="top">
+                  <el-tooltip
+                    content="访问此页面自定义的url地址，建议/开头书写，例如 /app-name/menu-name"
+                    placement="top"
+                  >
                     <i class="el-icon-question" />
                   </el-tooltip>
                 </span>
@@ -249,6 +188,85 @@
                 </el-radio-group>
               </el-form-item>
             </el-col>
+            <el-col :span="12">
+              <el-form-item>
+                <span slot="label">
+                  菜单栏状态
+                  <el-tooltip content="需要显示菜单列表的设置为显示，否则设置为隐藏" placement="top">
+                    <i class="el-icon-question" />
+                  </el-tooltip>
+                </span>
+                <el-radio-group v-model="form.show_sidebar">
+                  <el-radio
+                    v-for="dict in visibleOptions"
+                    :key="dict.value"
+                    :label="dict.value"
+                  >{{ dict.label }}</el-radio>
+                </el-radio-group>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item>
+                <span slot="label">
+                  标签栏状态
+                  <el-tooltip content="需要显示标签栏的设置为显示，否则设置为隐藏" placement="top">
+                    <i class="el-icon-question" />
+                  </el-tooltip>
+                </span>
+                <el-radio-group v-model="form.show_tags">
+                  <el-radio
+                    v-for="dict in showTagsOptions"
+                    :key="dict.value"
+                    :label="dict.value"
+                  >{{ dict.label }}</el-radio>
+                </el-radio-group>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item>
+                <span slot="label">
+                  底部栏状态
+                  <el-tooltip content="需要显示底部工具栏的设置为显示，否则设置为隐藏" placement="top">
+                    <i class="el-icon-question" />
+                  </el-tooltip>
+                </span>
+                <el-radio-group v-model="form.show_bottom">
+                  <el-radio
+                    v-for="dict in showBottomOptions"
+                    :key="dict.value"
+                    :label="dict.value"
+                  >{{ dict.label }}</el-radio>
+                </el-radio-group>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item>
+                <span slot="label">
+                  是否隐藏面包屑
+                </span>
+                <el-radio-group v-model="form.hide_breadcrumb">
+                  <el-radio
+                    v-for="dict in hideBreadcrumbOptions"
+                    :key="dict.value"
+                    :label="dict.value"
+                  >{{ dict.label }}</el-radio>
+                </el-radio-group>
+              </el-form-item>
+            </el-col>
+            <el-col :span="24">
+              <el-form-item>
+                <span slot="label">
+                  参数
+                  <el-tooltip
+                    content="非技术人员请勿修改"
+                    placement="top"
+                  >
+                    <i class="el-icon-question" />
+                  </el-tooltip>
+                </span>
+                <el-input v-model="form.params" placeholder="" />
+              </el-form-item>
+            </el-col>
           </el-row>
         </el-form>
         <div class="demo-drawer__footer">
@@ -256,7 +274,6 @@
           <el-button @click="cancel">取 消</el-button>
         </div>
       </div>
-
     </el-drawer>
   </el-card>
 </template>
@@ -264,7 +281,7 @@
 <script>
 import { listMenu, getMenu, delMenu, addMenu, updateMenu } from '@/api/menu'
 
-const Treeselect = require('@riophae/vue-treeselect')
+import Treeselect from '@riophae/vue-treeselect'
 import '@riophae/vue-treeselect/dist/vue-treeselect.css'
 import IconSelect from '@/components/IconSelect'
 
@@ -284,7 +301,22 @@ export default {
       // 是否显示弹出层
       open: false,
       // 菜单状态数据字典
-      visibleOptions: [],
+      visibleOptions: [
+        {value: false, label: "隐藏"},
+        {value: true, label: "显示"}
+      ],
+      showBottomOptions: [
+        {value: false, label: "隐藏"},
+        {value: true, label: "显示"}
+      ],
+      showTagsOptions: [
+        {value: false, label: "隐藏"},
+        {value: true, label: "显示"}
+      ],
+      hideBreadcrumbOptions: [
+        {value: false, label: "否"},
+        {value: true, label: "是"}
+      ],
       // 查询参数
       queryParams: {
         title: undefined,
@@ -293,7 +325,22 @@ export default {
       },
       // 表单参数
       form: {
-        apis: [],
+        id: undefined,
+        fid: 0,
+        title: undefined,
+        menu_name: undefined,
+        icon: undefined,
+        menu_type: 'user',
+        component: undefined,
+        path: undefined,
+        sort: 0,
+        visible: '0',
+        no_cache: 1,
+        show_sidebar: 1,
+        show_tags: 1,
+        show_bottom: 1,
+        is_hot: 0,
+        params: undefined
       },
       // 表单校验
       rules: {
@@ -341,19 +388,17 @@ export default {
         delete node.children
       }
       return {
-        id: node.menuId,
+        id: node.id,
         label: node.title,
         children: node.children
       }
     },
     /** 查询菜单下拉树结构 */
     getTreeselect() {
-      listMenu().then(response => {
       this.menuOptions = []
-        const menu = { menuId: 0, title: '主类目', children: [] }
-        menu.children = response.data
+      const menu = { id: 0, title: '主类目', children: [] }
+      menu.children = this.menuList
       this.menuOptions.push(menu)
-      })
     },
     // 取消按钮
     cancel() {
@@ -363,18 +408,23 @@ export default {
     // 表单重置
     reset() {
       this.form = {
-        menuId: undefined,
-        parentId: 0,
-        menuName: undefined,
+        id: undefined,
+        fid: 0,
+        title: undefined,
+        menu_name: undefined,
         icon: undefined,
-        menuType: 'M',
-        apis: [],
+        menu_type: 'user',
+        component: undefined,
+        path: undefined,
         sort: 0,
-        action: this.form.menuType === 'A' ? this.form.action : '',
-        isFrame: '1',
-        visible: '0'
+        visible: '0',
+        no_cache: 1,
+        show_sidebar: 1,
+        show_tags: 1,
+        show_bottom: 1,
+        is_hot: 0,
+        params: undefined
       }
-      this.resetForm('form')
     },
     /** 搜索按钮操作 */
     handleQuery() {
@@ -385,51 +435,57 @@ export default {
       this.reset()
       this.getTreeselect()
       if (row != null) {
-        this.form.parentId = row.menuId
+        this.form.fid = row.id
       }
       this.open = true
       this.title = '添加菜单'
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
+      console.log(row)
       this.reset()
       this.getTreeselect()
-      getMenu(row.menuId).then(response => {
-        this.form = response.data
+      // getMenu(row.menuId).then(response => {
+      this.form = row
       this.open = true
       this.title = '修改菜单'
-      })
-    },
-    setApis(apiArray) {
-      var l = []
-      for (var index = 0; index < apiArray.length; index++) {
-        const element = apiArray[index]
-        l.push(element.id)
-      }
-      this.form.apis = l
+      // })
     },
     /** 提交按钮 */
-    submitForm: function() {
+    submitForm: function () {
+      delete this.form.children
       this.$refs['form'].validate(valid => {
         if (valid) {
-          if (this.form.menuId !== undefined) {
-            updateMenu(this.form, this.form.menuId).then(response => {
+          if (this.form.id !== undefined) {
+            updateMenu(this.form).then(response => {
               if (response.code === 200) {
-                this.msgSuccess(response.msg)
+                this.$message({
+                  message: response.msg,
+                  type: 'success'
+                })
                 this.open = false
                 this.getList()
               } else {
-                this.msgError(response.msg)
+                this.$message({
+                  message: response.msg,
+                  type: 'error'
+                })
               }
             })
           } else {
             addMenu(this.form).then(response => {
               if (response.code === 200) {
-                this.msgSuccess(response.msg)
+                this.$message({
+                  message: response.msg,
+                  type: 'success'
+                })
                 this.open = false
                 this.getList()
               } else {
-                this.msgError(response.msg)
+                this.$message({
+                  message: response.msg,
+                  type: 'error'
+                })
               }
             })
           }
@@ -442,37 +498,42 @@ export default {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
-      }).then(function() {
-        var Ids = (row.menuId && [row.menuId]) || this.ids
-        return delMenu({ 'ids': Ids })
+      }).then(function () {
+        return delMenu({ 'id': row.id })
       }).then((response) => {
         if (response.code === 200) {
-          this.msgSuccess(response.msg)
+          this.$message({
+            message: response.msg,
+            type: 'success'
+          })
           this.open = false
           this.getList()
         } else {
-          this.msgError(response.msg)
+          this.$message({
+            message: response.msg,
+            type: 'error'
+          })
         }
-      }).catch(function() {})
+      }).catch(function () { })
     }
   }
 }
 </script>
 <style lang="css">
-.panel .el-transfer__buttons{
+.panel .el-transfer__buttons {
   width: 150px;
 }
-.panel .el-transfer__buttons .el-button + .el-button{
-  margin-left:0;
+.panel .el-transfer__buttons .el-button + .el-button {
+  margin-left: 0;
 }
-.panel .el-transfer-panel{
+.panel .el-transfer-panel {
   width: 300px;
 }
 
 .el-col {
-padding: 0 5px;
+  padding: 0 5px;
 }
-.el-drawer__header{
-margin-bottom: 0;
+.el-drawer__header {
+  margin-bottom: 0;
 }
 </style>