yh-pub 1.0.0 → 1.0.2

package/layout/admin/menu/MenuIndex.vue

@@ -1,648 +1,648 @@
-<template>
-  <div class="search">
-    <el-row class="operation">
-      <div>
-        <el-button @click="addNew">
-          <i class="iconfont icon-plus"></i>
-          新增
-        </el-button>
-        <el-button @click="delAll">
-          <i class="iconfont icon-delete"></i>
-          删除
-        </el-button>
-        <el-button @click="getAllList">
-          <i class="iconfont icon-refresh"></i>
-          刷新
-        </el-button>
-      </div>
-    </el-row>
-    <el-row
-      type="flex"
-      justify="start"
-      :gutter="16"
-      v-show="showType === 'tree'">
-      <el-col
-        :sm="8"
-        :md="8"
-        :lg="8"
-        :xl="6">
-        <el-alert
-          class="tree-tips"
-          show-icon
-          :closable="false"
-          :title="`当前选择编辑：${editTitle}`"></el-alert>
-        <a
-          class="select-clear"
-          v-show="form.adMenuId"
-          @click="cancelEdit">
-          取消选择
-        </a>
-        <el-input
-          v-model="searchKey"
-          @change="search"
-          placeholder="输入菜单名搜索"
-          clearable>
-          <template #prepend>
-            <i class="iconfont icon-search"></i>
-          </template>
-        </el-input>
-        <div v-loading="loading">
-          <div
-            class="tree-bar"
-            :style="{ maxHeight: maxHeight }">
-            <el-tree
-              ref="tree"
-              :data="data"
-              :props="menuTreeProps"
-              node-key="key"
-              default-expand-all
-              highlight-current
-              :current-node-key="treeSelectedKeys"
-              @current-change="selectTree"></el-tree>
-          </div>
-        </div>
-      </el-col>
-      <el-col
-        :sm="16"
-        :md="16"
-        :lg="16"
-        :xl="9">
-        <el-form
-          ref="form"
-          class="menu-edit-form"
-          :model="form"
-          :rules="formValidate"
-          label-width="90px">
-          <el-form-item
-            label="名称"
-            prop="name">
-            <el-input
-              v-model="form.name"
-              ref="orgNameRef" />
-          </el-form-item>
-          <el-form-item
-            label="类型"
-            prop="menuType">
-            <el-select
-              v-model="form.menuType"
-              placeholder="请选择或输入搜索"
-              filterable
-              clearable>
-              <el-option
-                value="WINDOW"
-                label="窗口"></el-option>
-              <el-option
-                value="LINK"
-                label="访问链接"></el-option>
-              <el-option
-                value="SUBPAGE"
-                label="子页面"></el-option>
-              <el-option
-                value="JOIN"
-                label="关联弹窗"></el-option>
-              <el-option
-                value="GROUP"
-                label="菜单分组"></el-option>
-              <el-option
-                value="APP"
-                label="手机页面"></el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item
-            label="所属模块"
-            prop="sysModuleId">
-            <dict
-              dict="sysModuleId"
-              _select_id="59C1E77AE78D44DF8876688FE78DB53E"
-              v-model="form.sysModuleId"
-              placeholder="请选择或输入搜索"
-              filterable
-              clearable />
-          </el-form-item>
-          <el-form-item
-            label="请求地址"
-            prop="url"
-            v-show="['LINK', 'SUBPAGE'].includes(form.menuType)">
-            <el-input v-model="form.url" />
-          </el-form-item>
-          <el-form-item
-            label="访问窗口"
-            prop="sysWindowId"
-            v-show="['WINDOW', 'JOIN'].includes(form.menuType)">
-            <dict
-              dict="sysWindowId"
-              _select_id="F56B868C8FF44053926920588FB3C76C"
-              v-model="form.sysWindowId"
-              placeholder="请选择或输入搜索"
-              filterable
-              clearable />
-          </el-form-item>
-          <el-form-item
-            label="App页面"
-            prop="sysAppDesignId"
-            v-show="form.menuType === 'APP'">
-            <dict
-              dict="sysAppDesignId"
-              _select_id="1352728B367842EDAFF195BF073DD817"
-              v-model="form.sysAppDesignId"
-              placeholder="请选择或输入搜索"
-              filterable
-              clearable />
-          </el-form-item>
-          <el-form-item
-            label="上级菜单"
-            prop="parentId">
-            <el-select
-              v-model="form.parentId"
-              placeholder="请选择或输入搜索"
-              filterable
-              clearable>
-              <el-option
-                v-for="m in menuListOptions"
-                :value="m.adMenuId"
-                :label="m.name"
-                :key="m.adMenuId"></el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item
-            label="显示模式"
-            prop="showMode">
-            <el-select
-              v-model="form.showMode"
-              placeholder="请选择或输入搜索"
-              filterable
-              clearable>
-              <el-option
-                value="P"
-                label="电脑端"></el-option>
-              <el-option
-                value="M"
-                label="手机端"></el-option>
-              <el-option
-                value="PM"
-                label="电脑+手机"></el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item
-            label="排序"
-            prop="seq">
-            <el-input
-              type="number"
-              v-model="form.seq" />
-          </el-form-item>
-          <el-form-item
-            label="图标地址"
-            prop="iconPath"
-            class="icon-select-form-item">
-            <el-button
-              type="info"
-              @click="getIcon()">
-              图标选择
-            </el-button>
-            <el-input v-model="form.iconPath" />
-            <span class="icon-preview">
-              <i :class="form.iconPath"></i>
-            </span>
-          </el-form-item>
-          <el-form-item
-            label="备注"
-            prop="description">
-            <el-input
-              v-model="form.description"
-              type="textarea" />
-          </el-form-item>
-          <el-form-item label="是否有效">
-            <el-switch
-              v-model="form.active"
-              active-value="Y"
-              inactive-value="N" />
-          </el-form-item>
-          <el-form-item>
-            <el-button
-              style="margin-right: 5px"
-              @click="submitEdit"
-              :loading="submitLoading"
-              :disabled="form.adMenuId != ''"
-              type="primary">
-              <i class="iconfont icon-plus"></i>
-              保存新增
-            </el-button>
-            <el-button
-              style="margin-right: 5px"
-              @click="submitEdit"
-              :loading="submitLoading"
-              :disabled="form.adMenuId === ''"
-              type="primary">
-              <i class="iconfont icon-save"></i>
-              保存修改
-            </el-button>
-            <el-button @click="handleReset">重置</el-button>
-          </el-form-item>
-        </el-form>
-      </el-col>
-    </el-row>
-    <icon
-      :actionData="toIconData"
-      @clickSure="iconSure"></icon>
-  </div>
-</template>
-
-<script>
-import dict from "yh-pub/layout/main/system/dict.vue";
-import icon from "./icon.vue";
-import { deepClone } from "@/libs/util.js";
-
-export default {
-  name: "menu-manage",
-  components: {
-    dict,
-    icon,
-  },
-  data() {
-    return {
-      showType: "tree",
-      loading: true,
-      strict: false,
-      maxHeight: "500px",
-      expandLevel: 1,
-      menuModalVisible: false,
-      iconModalVisible: false,
-      selectList: [],
-      showParent: false,
-      searchKey: "",
-      parentTitle: "",
-      editTitle: "",
-      modalTitle: "",
-      treeExpandKeys: [],
-      menuTreeProps: {
-        label: "title",
-      },
-      form: {
-        name: "",
-        menuType: "",
-        sysModuleId: "",
-        sysWindowId: "",
-        sysAppDesignId: "",
-        url: "",
-        parentId: "",
-        showMode: null,
-        seq: null,
-        iconPath: "",
-        description: "",
-        adMenuId: "",
-        active: "Y",
-      },
-      formAdd: {},
-      formValidate: {
-        name: [{ required: true, message: "名称不能为空", trigger: "blur" }],
-        menuType: [{ required: true, message: "菜单类型不能为空", trigger: "blur" }],
-        sysModuleId: [{ required: true, message: "所属模块不能为空", trigger: "blur" }],
-        // parentId: [{ required: false, message: '上级菜单不能为空', trigger: 'blur' }],
-        showMode: [{ required: true, message: "显示模式不能为空", trigger: "blur" }],
-        seq: [
-          {
-            required: true,
-            message: "排序值不能为空",
-            trigger: "blur",
-          },
-        ],
-      },
-      submitLoading: false,
-      data: [],
-      allMenu: [],
-      menuList: [],
-      toIconData: {},
-      dictPermissions: [],
-      selectedNodes: [],
-      treeSelectedKeys: [],
-    };
-  },
-  computed: {
-    menuListOptions() {
-      return this.menuList.filter((menu) => {
-        return this.form.menuType == "JOIN" || (menu.menuType == "GROUP" && this.form.menuType != "JOIN");
-      });
-    },
-  },
-  methods: {
-    init() {
-      this.getAllList();
-    },
-    loadData(item, callback) {},
-    renderContent(h, { root, node, data }) {
-      let icon = "";
-      if (data.level === 0) {
-        icon = "ios-navigate";
-      } else if (data.level === 1) {
-        icon = "md-list-box";
-      } else if (data.level === 2) {
-        icon = "md-list";
-      } else if (data.level === 3) {
-        icon = "md-radio-button-on";
-      } else {
-        icon = "md-radio-button-off";
-      }
-      return h("span", [
-        h("span", [
-          h("Icon", {
-            props: {
-              type: icon,
-              size: "16",
-            },
-            style: {
-              "margin-right": "8px",
-              "margin-bottom": "3px",
-            },
-          }),
-          h("span", data.title),
-        ]),
-      ]);
-    },
-    getMenuKeys(level) {
-      let keys = [];
-      let cLevel = 1;
-      function getKeys(menus, cl) {
-        if (cl <= level && level > 0) {
-          menus.forEach((item) => {
-            if (item._childs) {
-              getKeys(item._childs, cl + 1);
-            }
-            keys.push(item.adMenuId);
-          });
-        }
-      }
-      getKeys(this.allMenu, cLevel);
-      return keys;
-    },
-    handleDropdown(name) {
-      if (name === "expandOne") {
-        this.expandLevel = 1;
-      } else if (name === "expandTwo") {
-        this.expandLevel = 2;
-      } else if (name === "expandThree") {
-        this.expandLevel = 3;
-      } else if (name === "expandAll") {
-        this.expandLevel = 0;
-      }
-      let keys = this.getMenuKeys(this.expandLevel + 1);
-      this.treeExpandKeys = keys;
-    },
-    getAllList() {
-      this.loading = true;
-      this.axios.post("/menuController/getMenuData", this.$qs.stringify({})).then((response) => {
-        if (response.data.result) {
-          this.menuList = [];
-          this.allMenu = response.data.menuList;
-          let newTreeData = this.parseTreeData(this.allMenu, 0);
-          this.data = newTreeData;
-        }
-        this.loading = false;
-      });
-      this.$emit("on-query-change");
-    },
-    search() {
-      this.loading = true;
-      let newTreeData = this.parseTreeData(this.allMenu, 0, this.searchKey);
-      this.data = newTreeData;
-      this.loading = false;
-    },
-    parseTreeData(menus, curLevel, search) {
-      let data = [];
-      menus.forEach((menu) => {
-        let newLevelData = {
-          data: menu,
-        };
-        if (menu["_childs"] && menu["_childs"].length > 0) {
-          newLevelData.children = this.parseTreeData(menu["_childs"], curLevel + 1, search);
-        }
-        if (
-          search != undefined &&
-          (newLevelData.children == undefined || newLevelData.children.length == 0) &&
-          menu.name.indexOf(search) == -1
-        ) {
-          return;
-        } else if (search == undefined) {
-          this.menuList.push(menu);
-        }
-
-        newLevelData["key"] = menu.adMenuId;
-        newLevelData["title"] = menu.name;
-        newLevelData["level"] = curLevel;
-        data.push(newLevelData);
-      });
-      return data;
-    },
-    selectTree(data, node) {
-      if (data) {
-        let form = data.data;
-        this.form = form;
-        this.editTitle = form.name;
-        this.selectedNodes = node;
-        this.treeSelectedKeys = data.data.adMenuId;
-      } else {
-        this.cancelEdit();
-      }
-    },
-    addNew() {
-      this.cancelEdit();
-      this.$nextTick(() => {
-        this.$refs.orgNameRef.focus();
-      });
-    },
-    cancelEdit() {
-      this.$refs.tree.setCurrentKey(null);
-      this.$nextTick(() => {
-        this.treeSelectedKeys = null;
-        this.handleReset();
-      });
-    },
-    handleReset() {
-      this.form.adMenuId = "";
-      this.editTitle = "";
-      this.$refs.form.resetFields();
-    },
-    submitEdit() {
-      let that = this;
-      if (this.form.adMenuId && this.form.parentId === this.form.adMenuId) {
-        this.$message.error("父级菜单不能为自身！");
-        return false;
-      }
-      this.$refs.form.validate((valid) => {
-        if (valid) {
-          this.submitLoading = true;
-          let curForm = deepClone({}, this.form);
-          curForm.created = undefined;
-          curForm.updated = undefined;
-          curForm._childs = undefined;
-          this.axios
-            .post("/menuController/submitMenu", this.$qs.stringify(curForm))
-            .then((response) => {
-              if (response.data.result) {
-                that.$message.success((that.form.adMenuId !== "" ? "修改" : "新增") + "成功");
-                that.getAllList();
-                that.handleReset();
-              } else {
-                that.$message.error(response.data.msg);
-              }
-              that.submitLoading = false;
-            })
-            .catch((response) => {
-              that.submitLoading = false;
-            });
-        }
-      });
-    },
-    add() {
-      if (!this.form.id) {
-        this.$message.warning("请先点击选择一个菜单权限节点");
-        return;
-      }
-      this.parentTitle = this.form.title;
-      this.modalTitle = "添加子节点(可拖动)";
-      this.showParent = true;
-      let type = 0;
-      if (this.form.level === 1) {
-        type = 0;
-      } else if (this.form.level === 2) {
-        type = 1;
-      } else if (this.form.level === 3) {
-        this.$warning({
-          title: "抱歉，不能添加啦",
-          content: "左侧仅支持2级菜单目录",
-        });
-        return;
-      } else {
-        type = 0;
-      }
-      if (!this.form.children) {
-        this.form.children = [];
-      }
-      this.formAdd = {
-        icon: "",
-        type: type,
-        parentId: this.form.id,
-        level: Number(this.form.level) + 1,
-        sortOrder: this.form.children.length + 1,
-        buttonType: "",
-        status: 0,
-        showAlways: true,
-      };
-      if (this.form.level === 0) {
-        this.formAdd.path = "/";
-        this.formAdd.component = "Main";
-      }
-      this.menuModalVisible = true;
-    },
-    changeSelect(v) {
-      this.selectList = v;
-    },
-    clearSelectAll() {
-      this.$refs.table.selectAll(false);
-    },
-    remove(v) {
-      this.selectList = [];
-      this.selectList.push(v);
-      this.delAll();
-    },
-    delAll() {
-      if (!this.selectedNodes) {
-        this.$message.warning("您还未勾选要删除的数据");
-        return;
-      }
-      this.$confirm("您确认要删除所选的数据?", "确认删除", {
-        type: "warning",
-      }).then(() => {
-        let ids = this.selectedNodes.data.key;
-        this.axios.post("/menuController/delMenuByIds", this.$qs.stringify({ ids: ids })).then((response) => {
-          if (response.data.result) {
-            this.$message.success("删除成功");
-            this.selectList = [];
-            this.getAllList();
-            this.handleReset();
-          } else {
-            this.$message.error(response.data.msg);
-          }
-          this.submitLoading = false;
-        });
-      });
-    },
-    getIcon() {
-      this.toIconData = {
-        type: "select",
-      };
-    },
-    dealInput(toIcon) {
-      this.form.iconPath = toIcon;
-    },
-    iconSure(iconPath) {
-      this.form.iconPath = iconPath;
-    },
-  },
-  activated() {
-    // 计算高度
-    let height = document.documentElement.clientHeight;
-    this.maxHeight = Number(height - 287) + "px";
-    this.init();
-  },
-};
-</script>
-<style lang="scss">
-.search {
-  padding: 10px 0;
-  .operation {
-    margin-bottom: 2vh;
-    .more-btn {
-      margin-left: 10px;
-    }
-  }
-
-  .select-clear,
-  .tree-tips {
-    margin-bottom: 10px;
-  }
-
-  .select-title {
-    font-weight: 600;
-    color: #40a9ff;
-  }
-
-  .tree-bar {
-    overflow: auto;
-    margin-top: 5px;
-    position: relative;
-    min-height: 80px;
-    &::-webkit-scrollbar {
-      width: 6px;
-      height: 6px;
-    }
-
-    &::-webkit-scrollbar-thumb {
-      border-radius: 4px;
-      box-shadow: inset 0 0 2px #d1d1d1;
-      background: #e4e4e4;
-    }
-  }
-
-  .menu-edit-form {
-    .el-form-item__content {
-      display: flex;
-      .el-input,
-      .el-select {
-        flex: 1;
-      }
-    }
-    .icon-select-form-item {
-      .el-input {
-        margin: 0 10px;
-      }
-      .icon-preview {
-        padding: 0 10px 0 0;
-        .iconfont {
-          font-size: 24px;
-        }
-      }
-    }
-  }
-}
-</style>
-@/libs/util.js
+<template>
+  <div class="search">
+    <el-row class="operation">
+      <div>
+        <el-button @click="addNew">
+          <i class="iconfont icon-plus"></i>
+          新增
+        </el-button>
+        <el-button @click="delAll">
+          <i class="iconfont icon-delete"></i>
+          删除
+        </el-button>
+        <el-button @click="getAllList">
+          <i class="iconfont icon-refresh"></i>
+          刷新
+        </el-button>
+      </div>
+    </el-row>
+    <el-row
+      type="flex"
+      justify="start"
+      :gutter="16"
+      v-show="showType === 'tree'">
+      <el-col
+        :sm="8"
+        :md="8"
+        :lg="8"
+        :xl="6">
+        <el-alert
+          class="tree-tips"
+          show-icon
+          :closable="false"
+          :title="`当前选择编辑：${editTitle}`"></el-alert>
+        <a
+          class="select-clear"
+          v-show="form.adMenuId"
+          @click="cancelEdit">
+          取消选择
+        </a>
+        <el-input
+          v-model="searchKey"
+          @change="search"
+          placeholder="输入菜单名搜索"
+          clearable>
+          <template #prepend>
+            <i class="iconfont icon-search"></i>
+          </template>
+        </el-input>
+        <div v-loading="loading">
+          <div
+            class="tree-bar"
+            :style="{ maxHeight: maxHeight }">
+            <el-tree
+              ref="tree"
+              :data="data"
+              :props="menuTreeProps"
+              node-key="key"
+              default-expand-all
+              highlight-current
+              :current-node-key="treeSelectedKeys"
+              @current-change="selectTree"></el-tree>
+          </div>
+        </div>
+      </el-col>
+      <el-col
+        :sm="16"
+        :md="16"
+        :lg="16"
+        :xl="9">
+        <el-form
+          ref="form"
+          class="menu-edit-form"
+          :model="form"
+          :rules="formValidate"
+          label-width="90px">
+          <el-form-item
+            label="名称"
+            prop="name">
+            <el-input
+              v-model="form.name"
+              ref="orgNameRef" />
+          </el-form-item>
+          <el-form-item
+            label="类型"
+            prop="menuType">
+            <el-select
+              v-model="form.menuType"
+              placeholder="请选择或输入搜索"
+              filterable
+              clearable>
+              <el-option
+                value="WINDOW"
+                label="窗口"></el-option>
+              <el-option
+                value="LINK"
+                label="访问链接"></el-option>
+              <el-option
+                value="SUBPAGE"
+                label="子页面"></el-option>
+              <el-option
+                value="JOIN"
+                label="关联弹窗"></el-option>
+              <el-option
+                value="GROUP"
+                label="菜单分组"></el-option>
+              <el-option
+                value="APP"
+                label="手机页面"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item
+            label="所属模块"
+            prop="sysModuleId">
+            <dict
+              dict="sysModuleId"
+              _select_id="59C1E77AE78D44DF8876688FE78DB53E"
+              v-model="form.sysModuleId"
+              placeholder="请选择或输入搜索"
+              filterable
+              clearable />
+          </el-form-item>
+          <el-form-item
+            label="请求地址"
+            prop="url"
+            v-show="['LINK', 'SUBPAGE'].includes(form.menuType)">
+            <el-input v-model="form.url" />
+          </el-form-item>
+          <el-form-item
+            label="访问窗口"
+            prop="sysWindowId"
+            v-show="['WINDOW', 'JOIN'].includes(form.menuType)">
+            <dict
+              dict="sysWindowId"
+              _select_id="F56B868C8FF44053926920588FB3C76C"
+              v-model="form.sysWindowId"
+              placeholder="请选择或输入搜索"
+              filterable
+              clearable />
+          </el-form-item>
+          <el-form-item
+            label="App页面"
+            prop="sysAppDesignId"
+            v-show="form.menuType === 'APP'">
+            <dict
+              dict="sysAppDesignId"
+              _select_id="1352728B367842EDAFF195BF073DD817"
+              v-model="form.sysAppDesignId"
+              placeholder="请选择或输入搜索"
+              filterable
+              clearable />
+          </el-form-item>
+          <el-form-item
+            label="上级菜单"
+            prop="parentId">
+            <el-select
+              v-model="form.parentId"
+              placeholder="请选择或输入搜索"
+              filterable
+              clearable>
+              <el-option
+                v-for="m in menuListOptions"
+                :value="m.adMenuId"
+                :label="m.name"
+                :key="m.adMenuId"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item
+            label="显示模式"
+            prop="showMode">
+            <el-select
+              v-model="form.showMode"
+              placeholder="请选择或输入搜索"
+              filterable
+              clearable>
+              <el-option
+                value="P"
+                label="电脑端"></el-option>
+              <el-option
+                value="M"
+                label="手机端"></el-option>
+              <el-option
+                value="PM"
+                label="电脑+手机"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item
+            label="排序"
+            prop="seq">
+            <el-input
+              type="number"
+              v-model="form.seq" />
+          </el-form-item>
+          <el-form-item
+            label="图标地址"
+            prop="iconPath"
+            class="icon-select-form-item">
+            <el-button
+              type="info"
+              @click="getIcon()">
+              图标选择
+            </el-button>
+            <el-input v-model="form.iconPath" />
+            <span class="icon-preview">
+              <i :class="form.iconPath"></i>
+            </span>
+          </el-form-item>
+          <el-form-item
+            label="备注"
+            prop="description">
+            <el-input
+              v-model="form.description"
+              type="textarea" />
+          </el-form-item>
+          <el-form-item label="是否有效">
+            <el-switch
+              v-model="form.active"
+              active-value="Y"
+              inactive-value="N" />
+          </el-form-item>
+          <el-form-item>
+            <el-button
+              style="margin-right: 5px"
+              @click="submitEdit"
+              :loading="submitLoading"
+              :disabled="form.adMenuId != ''"
+              type="primary">
+              <i class="iconfont icon-plus"></i>
+              保存新增
+            </el-button>
+            <el-button
+              style="margin-right: 5px"
+              @click="submitEdit"
+              :loading="submitLoading"
+              :disabled="form.adMenuId === ''"
+              type="primary">
+              <i class="iconfont icon-save"></i>
+              保存修改
+            </el-button>
+            <el-button @click="handleReset">重置</el-button>
+          </el-form-item>
+        </el-form>
+      </el-col>
+    </el-row>
+    <icon
+      :actionData="toIconData"
+      @clickSure="iconSure"></icon>
+  </div>
+</template>
+
+<script>
+import dict from "yh-pub/layout/main/system/dict.vue";
+import icon from "./icon.vue";
+import { deepClone } from "@/libs/util.js";
+
+export default {
+  name: "menu-manage",
+  components: {
+    dict,
+    icon,
+  },
+  data() {
+    return {
+      showType: "tree",
+      loading: true,
+      strict: false,
+      maxHeight: "500px",
+      expandLevel: 1,
+      menuModalVisible: false,
+      iconModalVisible: false,
+      selectList: [],
+      showParent: false,
+      searchKey: "",
+      parentTitle: "",
+      editTitle: "",
+      modalTitle: "",
+      treeExpandKeys: [],
+      menuTreeProps: {
+        label: "title",
+      },
+      form: {
+        name: "",
+        menuType: "",
+        sysModuleId: "",
+        sysWindowId: "",
+        sysAppDesignId: "",
+        url: "",
+        parentId: "",
+        showMode: null,
+        seq: null,
+        iconPath: "",
+        description: "",
+        adMenuId: "",
+        active: "Y",
+      },
+      formAdd: {},
+      formValidate: {
+        name: [{ required: true, message: "名称不能为空", trigger: "blur" }],
+        menuType: [{ required: true, message: "菜单类型不能为空", trigger: "blur" }],
+        sysModuleId: [{ required: true, message: "所属模块不能为空", trigger: "blur" }],
+        // parentId: [{ required: false, message: '上级菜单不能为空', trigger: 'blur' }],
+        showMode: [{ required: true, message: "显示模式不能为空", trigger: "blur" }],
+        seq: [
+          {
+            required: true,
+            message: "排序值不能为空",
+            trigger: "blur",
+          },
+        ],
+      },
+      submitLoading: false,
+      data: [],
+      allMenu: [],
+      menuList: [],
+      toIconData: {},
+      dictPermissions: [],
+      selectedNodes: [],
+      treeSelectedKeys: [],
+    };
+  },
+  computed: {
+    menuListOptions() {
+      return this.menuList.filter((menu) => {
+        return this.form.menuType == "JOIN" || (menu.menuType == "GROUP" && this.form.menuType != "JOIN");
+      });
+    },
+  },
+  methods: {
+    init() {
+      this.getAllList();
+    },
+    loadData(item, callback) {},
+    renderContent(h, { root, node, data }) {
+      let icon = "";
+      if (data.level === 0) {
+        icon = "ios-navigate";
+      } else if (data.level === 1) {
+        icon = "md-list-box";
+      } else if (data.level === 2) {
+        icon = "md-list";
+      } else if (data.level === 3) {
+        icon = "md-radio-button-on";
+      } else {
+        icon = "md-radio-button-off";
+      }
+      return h("span", [
+        h("span", [
+          h("Icon", {
+            props: {
+              type: icon,
+              size: "16",
+            },
+            style: {
+              "margin-right": "8px",
+              "margin-bottom": "3px",
+            },
+          }),
+          h("span", data.title),
+        ]),
+      ]);
+    },
+    getMenuKeys(level) {
+      let keys = [];
+      let cLevel = 1;
+      function getKeys(menus, cl) {
+        if (cl <= level && level > 0) {
+          menus.forEach((item) => {
+            if (item._childs) {
+              getKeys(item._childs, cl + 1);
+            }
+            keys.push(item.adMenuId);
+          });
+        }
+      }
+      getKeys(this.allMenu, cLevel);
+      return keys;
+    },
+    handleDropdown(name) {
+      if (name === "expandOne") {
+        this.expandLevel = 1;
+      } else if (name === "expandTwo") {
+        this.expandLevel = 2;
+      } else if (name === "expandThree") {
+        this.expandLevel = 3;
+      } else if (name === "expandAll") {
+        this.expandLevel = 0;
+      }
+      let keys = this.getMenuKeys(this.expandLevel + 1);
+      this.treeExpandKeys = keys;
+    },
+    getAllList() {
+      this.loading = true;
+      this.axios.post("/menuController/getMenuData", this.$qs.stringify({})).then((response) => {
+        if (response.data.result) {
+          this.menuList = [];
+          this.allMenu = response.data.menuList;
+          let newTreeData = this.parseTreeData(this.allMenu, 0);
+          this.data = newTreeData;
+        }
+        this.loading = false;
+      });
+      this.$emit("on-query-change");
+    },
+    search() {
+      this.loading = true;
+      let newTreeData = this.parseTreeData(this.allMenu, 0, this.searchKey);
+      this.data = newTreeData;
+      this.loading = false;
+    },
+    parseTreeData(menus, curLevel, search) {
+      let data = [];
+      menus.forEach((menu) => {
+        let newLevelData = {
+          data: menu,
+        };
+        if (menu["_childs"] && menu["_childs"].length > 0) {
+          newLevelData.children = this.parseTreeData(menu["_childs"], curLevel + 1, search);
+        }
+        if (
+          search != undefined &&
+          (newLevelData.children == undefined || newLevelData.children.length == 0) &&
+          menu.name.indexOf(search) == -1
+        ) {
+          return;
+        } else if (search == undefined) {
+          this.menuList.push(menu);
+        }
+
+        newLevelData["key"] = menu.adMenuId;
+        newLevelData["title"] = menu.name;
+        newLevelData["level"] = curLevel;
+        data.push(newLevelData);
+      });
+      return data;
+    },
+    selectTree(data, node) {
+      if (data) {
+        let form = data.data;
+        this.form = form;
+        this.editTitle = form.name;
+        this.selectedNodes = node;
+        this.treeSelectedKeys = data.data.adMenuId;
+      } else {
+        this.cancelEdit();
+      }
+    },
+    addNew() {
+      this.cancelEdit();
+      this.$nextTick(() => {
+        this.$refs.orgNameRef.focus();
+      });
+    },
+    cancelEdit() {
+      this.$refs.tree.setCurrentKey(null);
+      this.$nextTick(() => {
+        this.treeSelectedKeys = null;
+        this.handleReset();
+      });
+    },
+    handleReset() {
+      this.form.adMenuId = "";
+      this.editTitle = "";
+      this.$refs.form.resetFields();
+    },
+    submitEdit() {
+      let that = this;
+      if (this.form.adMenuId && this.form.parentId === this.form.adMenuId) {
+        this.$message.error("父级菜单不能为自身！");
+        return false;
+      }
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          this.submitLoading = true;
+          let curForm = deepClone({}, this.form);
+          curForm.created = undefined;
+          curForm.updated = undefined;
+          curForm._childs = undefined;
+          this.axios
+            .post("/menuController/submitMenu", this.$qs.stringify(curForm))
+            .then((response) => {
+              if (response.data.result) {
+                that.$message.success((that.form.adMenuId !== "" ? "修改" : "新增") + "成功");
+                that.getAllList();
+                that.handleReset();
+              } else {
+                that.$message.error(response.data.msg);
+              }
+              that.submitLoading = false;
+            })
+            .catch((response) => {
+              that.submitLoading = false;
+            });
+        }
+      });
+    },
+    add() {
+      if (!this.form.id) {
+        this.$message.warning("请先点击选择一个菜单权限节点");
+        return;
+      }
+      this.parentTitle = this.form.title;
+      this.modalTitle = "添加子节点(可拖动)";
+      this.showParent = true;
+      let type = 0;
+      if (this.form.level === 1) {
+        type = 0;
+      } else if (this.form.level === 2) {
+        type = 1;
+      } else if (this.form.level === 3) {
+        this.$warning({
+          title: "抱歉，不能添加啦",
+          content: "左侧仅支持2级菜单目录",
+        });
+        return;
+      } else {
+        type = 0;
+      }
+      if (!this.form.children) {
+        this.form.children = [];
+      }
+      this.formAdd = {
+        icon: "",
+        type: type,
+        parentId: this.form.id,
+        level: Number(this.form.level) + 1,
+        sortOrder: this.form.children.length + 1,
+        buttonType: "",
+        status: 0,
+        showAlways: true,
+      };
+      if (this.form.level === 0) {
+        this.formAdd.path = "/";
+        this.formAdd.component = "Main";
+      }
+      this.menuModalVisible = true;
+    },
+    changeSelect(v) {
+      this.selectList = v;
+    },
+    clearSelectAll() {
+      this.$refs.table.selectAll(false);
+    },
+    remove(v) {
+      this.selectList = [];
+      this.selectList.push(v);
+      this.delAll();
+    },
+    delAll() {
+      if (!this.selectedNodes) {
+        this.$message.warning("您还未勾选要删除的数据");
+        return;
+      }
+      this.$confirm("您确认要删除所选的数据?", "确认删除", {
+        type: "warning",
+      }).then(() => {
+        let ids = this.selectedNodes.data.key;
+        this.axios.post("/menuController/delMenuByIds", this.$qs.stringify({ ids: ids })).then((response) => {
+          if (response.data.result) {
+            this.$message.success("删除成功");
+            this.selectList = [];
+            this.getAllList();
+            this.handleReset();
+          } else {
+            this.$message.error(response.data.msg);
+          }
+          this.submitLoading = false;
+        });
+      });
+    },
+    getIcon() {
+      this.toIconData = {
+        type: "select",
+      };
+    },
+    dealInput(toIcon) {
+      this.form.iconPath = toIcon;
+    },
+    iconSure(iconPath) {
+      this.form.iconPath = iconPath;
+    },
+  },
+  activated() {
+    // 计算高度
+    let height = document.documentElement.clientHeight;
+    this.maxHeight = Number(height - 287) + "px";
+    this.init();
+  },
+};
+</script>
+<style lang="scss">
+.search {
+  padding: 10px 0;
+  .operation {
+    margin-bottom: 2vh;
+    .more-btn {
+      margin-left: 10px;
+    }
+  }
+
+  .select-clear,
+  .tree-tips {
+    margin-bottom: 10px;
+  }
+
+  .select-title {
+    font-weight: 600;
+    color: #40a9ff;
+  }
+
+  .tree-bar {
+    overflow: auto;
+    margin-top: 5px;
+    position: relative;
+    min-height: 80px;
+    &::-webkit-scrollbar {
+      width: 6px;
+      height: 6px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      border-radius: 4px;
+      box-shadow: inset 0 0 2px #d1d1d1;
+      background: #e4e4e4;
+    }
+  }
+
+  .menu-edit-form {
+    .el-form-item__content {
+      display: flex;
+      .el-input,
+      .el-select {
+        flex: 1;
+      }
+    }
+    .icon-select-form-item {
+      .el-input {
+        margin: 0 10px;
+      }
+      .icon-preview {
+        padding: 0 10px 0 0;
+        .iconfont {
+          font-size: 24px;
+        }
+      }
+    }
+  }
+}
+</style>
+@/libs/util.js