From ceca28ac6673f3263c5c08eacd91a06b1de6f5d6 Mon Sep 17 00:00:00 2001
From: chenke <ck2013@qq.com>
Date: Wed, 16 Feb 2022 16:16:26 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E8=8F=9C=E5=8D=95=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/menu.js            |  12 +-
 src/styles/scss/index.scss |   1 +
 src/views/menu/index.vue   | 675 ++++++++++++++++++++-----------------
 3 files changed, 375 insertions(+), 313 deletions(-)

diff --git a/src/api/menu.js b/src/api/menu.js
index c11c617..4017529 100644
--- a/src/api/menu.js
+++ b/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
   })
 }
diff --git a/src/styles/scss/index.scss b/src/styles/scss/index.scss
index 1ae9715..a7d0ef8 100644
--- a/src/styles/scss/index.scss
+++ b/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;
diff --git a/src/views/menu/index.vue b/src/views/menu/index.vue
index 80de1f2..702ddb8 100644
--- a/src/views/menu/index.vue
+++ b/src/views/menu/index.vue
@@ -1,270 +1,287 @@
 <template>
-      <el-card class="box-card">
-        <el-form :inline="true">
-          <el-form-item label="菜单名称">
-            <el-input
-              v-model="queryParams.title"
-              placeholder="请输入菜单名称"
-              clearable
-              size="small"
-              @keyup.enter.native="handleQuery"
-            />
-          </el-form-item>
-          <el-form-item label="状态">
-            <el-select v-model="queryParams.visible" placeholder="菜单状态" clearable size="small">
-              <el-option
-                v-for="dict in visibleOptions"
-                :key="dict.value"
-                :label="dict.label"
-                :value="dict.value"
-              />
-            </el-select>
-          </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-form-item>
-        </el-form>
-
-        <el-table
-          v-loading="loading"
-          :data="menuList"
-          border
-          row-key="id"
-          :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">
-            <template slot-scope="scope">
-              <svg-icon :icon-class="scope.row.icon" />
-            </template>
-          </el-table-column>
-          <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-else>{{ scope.row.component }}</span>
-            </template>
-          </el-table-column>
-          <el-table-column label="创建时间" align="center" prop="createdAt" width="180">
-            <template slot-scope="scope">
-              <span>{{ scope.row.create_time }}</span>
-            </template>
-          </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-delete"
-                @click="handleDelete(scope.row)"
-              >删除</el-button>
-            </template>
-          </el-table-column>
-        </el-table>
+  <el-card class="box-card">
+    <el-form :inline="true">
+      <el-form-item label="菜单名称">
+        <el-input
+          v-model="queryParams.title"
+          placeholder="请输入菜单名称"
+          clearable
+          size="small"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="状态">
+        <el-select v-model="queryParams.visible" placeholder="菜单状态" clearable size="small">
+          <el-option
+            v-for="dict in visibleOptions"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </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-form-item>
+    </el-form>
 
-        <!-- 添加或修改菜单对话框 -->
-        <el-drawer
-          ref="drawer"
-          :title="title"
-          :before-close="cancel"
-          :visible.sync="open"
-          direction="rtl"
-          custom-class="demo-drawer"
-          size="830px"
-        >
-          <div class="demo-drawer__content">
-            <el-form ref="form" :model="form" :rules="rules" label-position="top" label-width="106px">
-              <el-row>
-                <el-col :span="24">
-                  <el-form-item prop="parentId">
-                    <span slot="label">
-                      上级菜单
-                      <el-tooltip content="指当前菜单停靠的菜单归属" placement="top">
-                        <i class="el-icon-question" />
-                      </el-tooltip>
-                    </span>
-                    <!-- <treeselect
-                      v-model="form.parentId"
-                      :options="menuOptions"
-                      :normalizer="normalizer"
-                      :show-count="true"
-                      placeholder="选择上级菜单"
-                    /> -->
-                  </el-form-item>
-                </el-col>
-                <el-col :span="12">
-                  <el-form-item prop="title">
-                    <span slot="label">
-                      菜单标题
-                      <el-tooltip content="菜单位置显示的说明信息" placement="top">
-                        <i class="el-icon-question" />
-                      </el-tooltip>
-                    </span>
-                    <el-input v-model="form.title" placeholder="请输入菜单标题" />
-                  </el-form-item>
-                </el-col>
-                <el-col :span="12">
-                  <el-form-item prop="sort">
-                    <span slot="label">
-                      显示排序
-                      <el-tooltip content="根据序号升序排列" placement="top">
-                        <i class="el-icon-question" />
-                      </el-tooltip>
-                    </span>
-                    <el-input-number v-model="form.sort" controls-position="right" :min="0" />
-                  </el-form-item>
-                </el-col>
+    <el-table
+      v-loading="loading"
+      :data="menuList"
+      border
+      row-key="id"
+      :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">
+        <template slot-scope="scope">
+          <svg-icon :icon-class="scope.row.icon" />
+        </template>
+      </el-table-column>
+      <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-else>{{ scope.row.component }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="创建时间" align="center" prop="createdAt" width="180">
+        <template slot-scope="scope">
+          <span>{{ scope.row.create_time }}</span>
+        </template>
+      </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-delete"
+            @click="handleDelete(scope.row)"
+          >删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
 
-                <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">
-                    <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-form-item>
-                </el-col>
+    <!-- 添加或修改菜单对话框 -->
+    <el-drawer
+      ref="drawer"
+      :title="title"
+      :before-close="cancel"
+      :visible.sync="open"
+      direction="rtl"
+      custom-class="demo-drawer"
+      size="830px"
+    >
+      <div class="demo-drawer__content">
+        <el-form ref="form" :model="form" :rules="rules" label-position="top" label-width="106px">
+          <el-row>
+            <el-col :span="24">
+              <el-form-item prop="parentId">
+                <span slot="label">
+                  上级菜单
+                  <el-tooltip content="指当前菜单停靠的菜单归属" placement="top">
+                    <i class="el-icon-question" />
+                  </el-tooltip>
+                </span>
+                <treeselect
+                  v-model="form.fid"
+                  :options="menuOptions"
+                  :normalizer="normalizer"
+                  :show-count="true"
+                  placeholder="选择上级菜单"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item prop="title">
+                <span slot="label">
+                  菜单标题
+                  <el-tooltip content="菜单位置显示的说明信息" placement="top">
+                    <i class="el-icon-question" />
+                  </el-tooltip>
+                </span>
+                <el-input v-model="form.title" placeholder="请输入菜单标题" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item prop="sort">
+                <span slot="label">
+                  显示排序
+                  <el-tooltip content="根据序号升序排列" placement="top">
+                    <i class="el-icon-question" />
+                  </el-tooltip>
+                </span>
+                <el-input-number v-model="form.sort" controls-position="right" :min="0" />
+              </el-form-item>
+            </el-col>
 
-                <el-col v-if="form.menuType == 'M' || form.menuType == 'C'" :span="12">
-                  <el-form-item prop="component">
-                    <span slot="label">
-                      组件路径
-                      <el-tooltip content="菜单对应的具体vue页面文件路径views的下级路径/admin/sys-api/index；目录类型：填写Layout，如何有二级目录请参照日志目录填写；" placement="top">
-                        <i class="el-icon-question" />
-                      </el-tooltip>
-                    </span>
-                    <el-input v-model="form.component" placeholder="请输入组件路径" />
-                  </el-form-item>
-                </el-col>
+            <el-col :span="12">
+              <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.menu_name" placeholder="请输入路由名称" />
+              </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 prop="component">
+                <span slot="label">
+                  组件路径
+                  <el-tooltip
+                    content="菜单对应的具体vue页面文件路径views的下级路径/admin/sys-api/index；目录类型：填写Layout，如何有二级目录请参照日志目录填写；"
+                    placement="top"
+                  >
+                    <i class="el-icon-question" />
+                  </el-tooltip>
+                </span>
+                <el-input v-model="form.component" placeholder="请输入组件路径" />
+              </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">
-                        <i class="el-icon-question" />
-                      </el-tooltip>
-                    </span>
-                    <el-input v-model="form.path" placeholder="请输入路由地址" />
-                  </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"
+                  >
+                    <i class="el-icon-question" />
+                  </el-tooltip>
+                </span>
+                <el-input v-model="form.path" placeholder="请输入路由地址" />
+              </el-form-item>
+            </el-col>
 
-                <el-col :span="12">
-                  <el-form-item v-if="form.menuType == 'F' || form.menuType == 'C'">
-                    <span slot="label">
-                      权限标识
-                      <el-tooltip content="前端权限控制按钮是否显示" placement="top">
-                        <i class="el-icon-question" />
-                      </el-tooltip>
-                    </span>
-                    <el-input v-model="form.permission" placeholder="请权限标识" maxlength="50" />
-                  </el-form-item>
-                </el-col>
-                <el-col :span="12">
-                  <el-form-item v-if="form.menuType != 'F'">
-                    <span slot="label">
-                      菜单状态
-                      <el-tooltip content="需要显示在菜单列表的菜单设置为显示，否则设置为隐藏" placement="top">
-                        <i class="el-icon-question" />
-                      </el-tooltip>
-                    </span>
-                    <el-radio-group v-model="form.visible">
-                      <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-row>
-            </el-form>
-            <div class="demo-drawer__footer">
-              <el-button type="primary" @click="submitForm">确 定</el-button>
-              <el-button @click="cancel">取 消</el-button>
-            </div>
-          </div>
-
-        </el-drawer>
-      </el-card>
+            <el-col :span="12">
+              <el-form-item v-if="form.menuType == 'F' || form.menuType == 'C'">
+                <span slot="label">
+                  权限标识
+                  <el-tooltip content="前端权限控制按钮是否显示" placement="top">
+                    <i class="el-icon-question" />
+                  </el-tooltip>
+                </span>
+                <el-input v-model="form.permission" placeholder="请权限标识" maxlength="50" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item v-if="form.menuType != 'F'">
+                <span slot="label">
+                  菜单状态
+                  <el-tooltip content="需要显示在菜单列表的菜单设置为显示，否则设置为隐藏" placement="top">
+                    <i class="el-icon-question" />
+                  </el-tooltip>
+                </span>
+                <el-radio-group v-model="form.visible">
+                  <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_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">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </div>
+    </el-drawer>
+  </el-card>
 </template>
 
 <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
-        this.menuOptions.push(menu)
-      })
+      this.menuOptions = []
+      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
-        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
+      // getMenu(row.menuId).then(response => {
+      this.form = row
+      this.open = true
+      this.title = '修改菜单'
+      // })
     },
     /** 提交按钮 */
-    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>