From 21ddc9ec1b1b76d2ce20e512328e65acaf1af2bf Mon Sep 17 00:00:00 2001
From: Surpriseplus <845948745@qq.com>
Date: 星期一, 16 一月 2023 10:35:15 +0800
Subject: [PATCH] 廊坊代码更新
---
src/views/maintenance/menuSettings.vue | 394 ++++++++++++++++++++++++++++++++++++++++----------------
1 files changed, 280 insertions(+), 114 deletions(-)
diff --git a/src/views/maintenance/menuSettings.vue b/src/views/maintenance/menuSettings.vue
index 4cd25de..026e50e 100644
--- a/src/views/maintenance/menuSettings.vue
+++ b/src/views/maintenance/menuSettings.vue
@@ -1,17 +1,15 @@
<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"
@@ -20,46 +18,67 @@
: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')"
@@ -85,7 +104,10 @@
: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"
@@ -110,7 +132,10 @@
: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')"
@@ -144,9 +169,15 @@
: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;
@@ -154,44 +185,64 @@
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"
@@ -205,20 +256,29 @@
: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"
@@ -232,10 +292,16 @@
: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>
@@ -243,8 +309,7 @@
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>
@@ -359,6 +424,7 @@
label: '鎸夐挳',
},
],
+ newNode: null,
};
},
methods: {
@@ -372,6 +438,14 @@
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('鎺ュ彛鎶ラ敊');
}
@@ -386,6 +460,110 @@
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;
@@ -577,8 +755,8 @@
alert('淇敼澶辫触锛岃閲嶈瘯锛�');
});
},
- handleNodeClick(data) {
- // console.log(data);
+ handleNodeClick(data, node) {
+ this.newNode = node;
this.backUpData = JSON.stringify(data);
this.itemdetail = JSON.parse(JSON.stringify(data));
},
@@ -649,72 +827,60 @@
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;
--
Gitblit v1.9.3