yh-pub 1.0.0

package/layout/admin/menu/MenuIndex.vue

@@ -0,0 +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