| | |
| | | <template> |
| | | <div class="menuSettings_box"> |
| | | <div class="menuSettings_tree"> |
| | | <My-bread |
| | | :list="[ |
| | | <My-bread :list="[ |
| | | `${$t('operatManage.operatManage')}`, |
| | | `${$t('operatManage.menuSettings')}`, |
| | | ]" |
| | | ></My-bread> |
| | | ]"></My-bread> |
| | | <el-divider /> |
| | | </div> |
| | | <div class="left_Tree"> |
| | | <el-card class="el-card-define"> |
| | | <div class="card_tree"> |
| | | <div class="cataLogContent"> |
| | | <div class="left_Tree"> |
| | | <div style="width:auto"> |
| | | <el-tree |
| | | ref="tree" |
| | | :props="defaultProps" |
| | |
| | | :data="menuList" |
| | | :expand-on-click-node="false" |
| | | :default-expand-all="true" |
| | | draggable |
| | | @node-click="handleNodeClick" |
| | | @node-drag-start="handleDragStart" |
| | | @node-drag-end="handleDrop" |
| | | > |
| | | <span class="custom-tree-node" slot-scope="{ node, data }"> |
| | | <span>{{ node.label }}</span> |
| | | <span class="btnBox"> |
| | | <el-button |
| | | v-if="menuStatus.insert" |
| | | type="text" |
| | | size="mini" |
| | | @click="() => append(node, data)" |
| | | > |
| | | <i class="el-icon-circle-plus"></i> |
| | | </el-button> |
| | | <el-button |
| | | v-if="menuStatus.delete" |
| | | type="text" |
| | | size="mini" |
| | | @click="() => remove(node, data)" |
| | | > |
| | | <i class="el-icon-delete-solid"></i> |
| | | </el-button> |
| | | </span> |
| | | </span> |
| | | </el-tree> |
| | | </div> |
| | | </el-card> |
| | | </div> |
| | | <div class="right_menu"> |
| | | <el-card class="el-card-define"> |
| | | <el-breadcrumb separator="/"> |
| | | <el-breadcrumb-item :to="{ path: '/' }">{{ |
| | | |
| | | </div> |
| | | <div class="right_menu"> |
| | | |
| | | <div style="display:flex;justify-content:space-between"> |
| | | <el-breadcrumb separator="/"> |
| | | <el-breadcrumb-item :to="{ path: '/' }">{{ |
| | | $t('dataManage.dictionaryManageObj.particulars') |
| | | }}</el-breadcrumb-item> |
| | | </el-breadcrumb> |
| | | </el-breadcrumb> |
| | | |
| | | <div> |
| | | <el-button |
| | | :disabled="itemdetail.pid == null ? true : false" |
| | | @click="setEditNode(1)" |
| | | type="info" |
| | | icon="el-icon-top" |
| | | size="mini" |
| | | >向上移动</el-button> |
| | | <el-button |
| | | :disabled="itemdetail.pid == null ? true : false" |
| | | @click="setEditNode(2)" |
| | | type="info" |
| | | icon="el-icon-bottom" |
| | | size="mini" |
| | | >向下移动</el-button> |
| | | <el-button |
| | | :disabled="itemdetail.pid == null ? true : false" |
| | | @click="setNewNode(1)" |
| | | type="success" |
| | | icon="el-icon-plus" |
| | | size="mini" |
| | | >新增同级</el-button> |
| | | <el-button |
| | | :disabled="itemdetail.pid == null ? true : false" |
| | | @click="setNewNode(2)" |
| | | type="success" |
| | | icon="el-icon-plus" |
| | | size="mini" |
| | | >新增子级</el-button> |
| | | <el-button |
| | | @click="setDelNode()" |
| | | :disabled="itemdetail.pid == null ? true : false" |
| | | type="danger" |
| | | icon="el-icon-delete" |
| | | size="mini" |
| | | >删除</el-button> |
| | | </div> |
| | | |
| | | </div> |
| | | <el-divider /> |
| | | <div class="form_box"> |
| | | <el-form :model="itemdetail" ref="itemdetail" :rules="rules"> |
| | | <el-form |
| | | :model="itemdetail" |
| | | ref="itemdetail" |
| | | :rules="rules" |
| | | > |
| | | <el-form-item |
| | | prop="enName" |
| | | :label="$t('operatManage.menuSetObj.enName')" |
| | |
| | | :label="$t('operatManage.menuSetObj.icon')" |
| | | :label-width="formLabelWidth" |
| | | > |
| | | <el-input v-model="itemdetail.icon" autocomplete="off"></el-input> |
| | | <el-input |
| | | v-model="itemdetail.icon" |
| | | autocomplete="off" |
| | | ></el-input> |
| | | </el-form-item> |
| | | <el-form-item |
| | | prop="isShow" |
| | |
| | | :label="$t('operatManage.menuSetObj.menuUrl')" |
| | | :label-width="formLabelWidth" |
| | | > |
| | | <el-input v-model="itemdetail.url" autocomplete="off"></el-input> |
| | | <el-input |
| | | v-model="itemdetail.url" |
| | | autocomplete="off" |
| | | ></el-input> |
| | | </el-form-item> |
| | | <el-form-item |
| | | :label="$t('operatManage.menuSetObj.authorize')" |
| | |
| | | :label="$t('operatManage.menuSetObj.bak')" |
| | | :label-width="formLabelWidth" |
| | | > |
| | | <el-input v-model="itemdetail.bak" autocomplete="off"></el-input> |
| | | <el-input |
| | | v-model="itemdetail.bak" |
| | | autocomplete="off" |
| | | ></el-input> |
| | | </el-form-item> |
| | | <div class="btnBox" v-if="menuStatus.update"> |
| | | <div |
| | | class="btnBox" |
| | | v-if="menuStatus.update" |
| | | > |
| | | <el-button |
| | | style=" |
| | | background: #409eff; |
| | |
| | | border: 1px solid #409eff; |
| | | " |
| | | @click="updMenu('itemdetail')" |
| | | >{{ $t('common.confirm') }}</el-button |
| | | > |
| | | >{{ $t('common.confirm') }}</el-button> |
| | | <el-button @click="reset('itemdetail')">{{ |
| | | $t('common.cancel') |
| | | }}</el-button> |
| | | </div> |
| | | </el-form> |
| | | </div> |
| | | </el-card> |
| | | |
| | | </div> |
| | | </div> |
| | | <el-dialog :title="$t('common.append')" :visible.sync="dialogFormVisible"> |
| | | <el-form :model="ruleForm" ref="ruleForm" :rules="rules"> |
| | | |
| | | <el-dialog |
| | | :title="$t('common.append')" |
| | | :visible.sync="dialogFormVisible" |
| | | > |
| | | <el-form |
| | | :model="ruleForm" |
| | | ref="ruleForm" |
| | | :rules="rules" |
| | | > |
| | | <el-form-item |
| | | prop="enName" |
| | | :label="$t('operatManage.menuSetObj.enName')" |
| | | :label-width="formLabelWidth" |
| | | > |
| | | <el-input v-model="ruleForm.enName" autocomplete="off"></el-input> |
| | | <el-input |
| | | v-model="ruleForm.enName" |
| | | autocomplete="off" |
| | | ></el-input> |
| | | </el-form-item> |
| | | <el-form-item |
| | | prop="cnName" |
| | | :label="$t('operatManage.menuSetObj.cnName')" |
| | | :label-width="formLabelWidth" |
| | | > |
| | | <el-input v-model="ruleForm.cnName" autocomplete="off"></el-input> |
| | | <el-input |
| | | v-model="ruleForm.cnName" |
| | | autocomplete="off" |
| | | ></el-input> |
| | | </el-form-item> |
| | | <el-form-item |
| | | :label="$t('operatManage.menuSetObj.icon')" |
| | | :label-width="formLabelWidth" |
| | | > |
| | | <el-input v-model="ruleForm.icon" autocomplete="off"></el-input> |
| | | <el-input |
| | | v-model="ruleForm.icon" |
| | | autocomplete="off" |
| | | ></el-input> |
| | | </el-form-item> |
| | | <el-form-item |
| | | prop="isShow" |
| | | :label="$t('operatManage.menuSetObj.isShow')" |
| | | :label-width="formLabelWidth" |
| | | > |
| | | <el-select v-model="ruleForm.isShow" placeholder=""> |
| | | <el-select |
| | | v-model="ruleForm.isShow" |
| | | placeholder="" |
| | | > |
| | | <el-option |
| | | v-for="item in options1" |
| | | :key="item.value" |
| | |
| | | :label="$t('operatManage.menuSetObj.menuUrl')" |
| | | :label-width="formLabelWidth" |
| | | > |
| | | <el-input v-model="ruleForm.url" autocomplete="off"></el-input> |
| | | <el-input |
| | | v-model="ruleForm.url" |
| | | autocomplete="off" |
| | | ></el-input> |
| | | </el-form-item> |
| | | <el-form-item |
| | | :label="$t('operatManage.menuSetObj.authorize')" |
| | | :label-width="formLabelWidth" |
| | | > |
| | | <el-input v-model="ruleForm.perms" autocomplete="off"></el-input> |
| | | <el-input |
| | | v-model="ruleForm.perms" |
| | | autocomplete="off" |
| | | ></el-input> |
| | | </el-form-item> |
| | | <el-form-item |
| | | :label="$t('operatManage.menuSetObj.type')" |
| | | prop="type" |
| | | :label-width="formLabelWidth" |
| | | > |
| | | <el-select v-model="ruleForm.type" :placeholder="$t('common.choose')"> |
| | | <el-select |
| | | v-model="ruleForm.type" |
| | | :placeholder="$t('common.choose')" |
| | | > |
| | | <el-option |
| | | v-for="item in options2" |
| | | :key="item.value" |
| | |
| | | :label="$t('operatManage.menuSetObj.bak')" |
| | | :label-width="formLabelWidth" |
| | | > |
| | | <el-input v-model="ruleForm.bak" autocomplete="off"></el-input> |
| | | <el-input |
| | | v-model="ruleForm.bak" |
| | | autocomplete="off" |
| | | ></el-input> |
| | | </el-form-item> |
| | | </el-form> |
| | | <div slot="footer" class="dialog-footer"> |
| | | <div |
| | | slot="footer" |
| | | class="dialog-footer" |
| | | > |
| | | <el-button @click="resetForm('ruleForm')">{{ |
| | | $t('common.cancel') |
| | | }}</el-button> |
| | |
| | | style="background: #409eff; color: white; border: 1px solid #409eff" |
| | | @click="submitForm('ruleForm')" |
| | | v-loading.fullscreen.lock="fullscreenLoading" |
| | | >{{ $t('common.confirm') }}</el-button |
| | | > |
| | | >{{ $t('common.confirm') }}</el-button> |
| | | </div> |
| | | </el-dialog> |
| | | </div> |
| | |
| | | label: '按钮', |
| | | }, |
| | | ], |
| | | newNode: null, |
| | | }; |
| | | }, |
| | | methods: { |
| | |
| | | this.menuList = this.treeData(res.result); |
| | | this.oriData = res.result; |
| | | this.newData = res.result; |
| | | if (this.itemdetail.id != null) { |
| | | this.$nextTick(() => { |
| | | this.$refs.tree.setCurrentKey(this.itemdetail.id); |
| | | }); |
| | | } |
| | | |
| | | |
| | | |
| | | } else { |
| | | console.log('接口报错'); |
| | | } |
| | |
| | | return father.pid == 0; // 返回一级菜单 |
| | | }); |
| | | }, |
| | | |
| | | setEditNode(res) { |
| | | let node = this.$refs.tree.getCurrentNode(); |
| | | let pchildNodes = this.$refs.tree.getNode(node.id).parent.childNodes; |
| | | let currentId = {}; |
| | | for (let i = 0; i < pchildNodes.length; i++) { |
| | | if (pchildNodes[i].data.id == node.id) { |
| | | currentId = i; |
| | | } |
| | | } |
| | | switch (res) { |
| | | case 1://向上移动 |
| | | if (currentId != 0) { |
| | | const tempChildrenNodex1 = pchildNodes[currentId - 1]; |
| | | const tempChildrenNodex2 = pchildNodes[currentId]; |
| | | tempChildrenNodex2.orderNum = pchildNodes[currentId - 1].data.orderNum; |
| | | tempChildrenNodex1.orderNum = pchildNodes[currentId].data.orderNum |
| | | var arr = []; |
| | | this.oriData.filter(res => { |
| | | if (res.id == tempChildrenNodex2.data.id) { |
| | | res.orderNum = tempChildrenNodex2.orderNum; |
| | | arr.push(res) |
| | | } else if (res.id == tempChildrenNodex1.data.id) { |
| | | res.orderNum = tempChildrenNodex1.orderNum; |
| | | arr.push(res) |
| | | } |
| | | |
| | | }) |
| | | this.newData = arr; |
| | | this.sendChange(); |
| | | } else { |
| | | this.$message({ |
| | | message: '处于顶端,不能继续上移', |
| | | type: 'warning' |
| | | }); |
| | | } |
| | | break; |
| | | case 2://向下移动 |
| | | if (currentId < (pchildNodes.length - 1)) { |
| | | const tempChildrenNodex1 = pchildNodes[currentId + 1]; |
| | | const tempChildrenNodex2 = pchildNodes[currentId]; |
| | | tempChildrenNodex2.orderNum = pchildNodes[currentId + 1].data.orderNum; |
| | | tempChildrenNodex1.orderNum = pchildNodes[currentId].data.orderNum; |
| | | var arr = []; |
| | | this.oriData.filter(res => { |
| | | if (res.id == tempChildrenNodex2.data.id) { |
| | | res.orderNum = tempChildrenNodex2.orderNum; |
| | | arr.push(res) |
| | | } else if (res.id == tempChildrenNodex1.data.id) { |
| | | res.orderNum = tempChildrenNodex1.orderNum; |
| | | arr.push(res) |
| | | } |
| | | }) |
| | | this.newData = arr; |
| | | this.sendChange(); |
| | | } else { |
| | | this.$message({ |
| | | message: '处于底端,不能继续下移', |
| | | type: 'warning' |
| | | }); |
| | | |
| | | } |
| | | break; |
| | | |
| | | } |
| | | }, |
| | | setDelNode() { |
| | | this.remove(this.newNode, this.itemdetail) |
| | | }, |
| | | setNewNode(res) { |
| | | var id, lever, orderNum; |
| | | if (res == 1) {//新增同级 |
| | | id = this.itemdetail.pid; |
| | | orderNum = this.getMaxOrderNum(this.newNode.parent.childNodes) |
| | | |
| | | lever = this.itemdetail.level; |
| | | } else if (res == 2) {//新增子级 |
| | | id = this.itemdetail.id; |
| | | orderNum = this.getMaxOrderNum(this.newNode.childNodes) |
| | | |
| | | lever = this.itemdetail.level + 1; |
| | | } |
| | | |
| | | this.ruleForm.pid = id; |
| | | this.ruleForm.level = lever; |
| | | this.ruleForm.orderNum = orderNum |
| | | this.dialogFormVisible = true; |
| | | }, |
| | | getMaxOrderNum(res) { |
| | | var val = -100; |
| | | for (var i in res) { |
| | | if (res[i].data.orderNum > val) { |
| | | val = res[i].data.orderNum |
| | | } |
| | | } |
| | | val = val + 1; |
| | | return val; |
| | | }, |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | append(node, data) { |
| | | this.dialogFormVisible = true; |
| | | this.ruleForm.pid = data.id; |
| | |
| | | alert('修改失败,请重试!'); |
| | | }); |
| | | }, |
| | | handleNodeClick(data) { |
| | | // console.log(data); |
| | | handleNodeClick(data, node) { |
| | | this.newNode = node; |
| | | this.backUpData = JSON.stringify(data); |
| | | this.itemdetail = JSON.parse(JSON.stringify(data)); |
| | | }, |
| | |
| | | this.getMenuTree(); |
| | | this.getPerms(); |
| | | }, |
| | | created() {}, |
| | | created() { }, |
| | | }; |
| | | </script> |
| | | <style lang="less" scoped> |
| | | //@import url(); 引入公共css类 |
| | | .menuSettings_box { |
| | | width: 100%; |
| | | height: 100%; |
| | | position: relative; |
| | | box-sizing: border-box; |
| | | .left_Tree { |
| | | width: 15%; |
| | | height: 100%; |
| | | position: relative; |
| | | float: left; |
| | | box-sizing: border-box; |
| | | overflow-y: auto; |
| | | .el-icon-circle-plus { |
| | | color: gray; |
| | | } |
| | | .el-icon-delete-solid { |
| | | color: gray; |
| | | } |
| | | } |
| | | .right_menu { |
| | | width: 84%; |
| | | float: right; |
| | | .form_box { |
| | | box-sizing: border-box; |
| | | width: 100%; |
| | | .el-input { |
| | | width: 400px; |
| | | height: 98%; |
| | | width: 98%; |
| | | padding: 1%; |
| | | position: absolute; |
| | | .cataLogContent { |
| | | width: 100%; |
| | | height: 92%; |
| | | display: flex; |
| | | justify-content: space-between; |
| | | .left_Tree { |
| | | width: 15%; |
| | | height: 91%; |
| | | border: 1px solid white; |
| | | border-radius: 5px; |
| | | padding: 1%; |
| | | overflow-y: auto; |
| | | .el-icon-circle-plus { |
| | | color: gray; |
| | | } |
| | | .el-icon-delete-solid { |
| | | color: gray; |
| | | } |
| | | } |
| | | .right_menu { |
| | | width: 80%; |
| | | height: 91%; |
| | | border: 1px solid white; |
| | | border-radius: 5px; |
| | | padding: 1%; |
| | | overflow: auto; |
| | | .form_box { |
| | | box-sizing: border-box; |
| | | width: 100%; |
| | | .el-input { |
| | | width: 400px; |
| | | } |
| | | |
| | | /deep/.el-form-item__label { |
| | | color: white; |
| | | /deep/.el-form-item__label { |
| | | color: white; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | | .el-card-define { |
| | | height: 680px; |
| | | height: 100%; |
| | | background: #303030; |
| | | border: 1px solid gray; |
| | | padding: 1px; |
| | | } |
| | | .card_tree { |
| | | display: block; |
| | | height: 650px; |
| | | overflow-y: auto; |
| | | // 更改指标树图标颜色 |
| | | /deep/ .el-tree .el-icon-caret-right:before { |
| | | color: white; /** 这里是要修改图标的颜色 **/ |
| | | } |
| | | /deep/ .el-tree { |
| | | color: white; /** 这里是要修改图标的颜色 **/ |
| | | background: transparent; |
| | | } |
| | | /deep/.el-tree-node__content { |
| | | &:hover { |
| | | background-color: rgba(255, 255, 255, 0.3) !important; |
| | | } |
| | | } |
| | | /deep/.el-tree-node.is-current > .el-tree-node__content { |
| | | background-color: rgba(255, 255, 255, 0.3) !important; |
| | | color: #409eff; |
| | | } |
| | | } |
| | | /deep/ .el-input__inner { |
| | | background-color: transparent !important; |