From 83ff2ebbb1d61c2cd7762df33f61ff0418b2b1c9 Mon Sep 17 00:00:00 2001
From: surprise <15810472099@163.com>
Date: 星期日, 28 四月 2024 22:19:49 +0800
Subject: [PATCH] 页面添加
---
src/views/maintenance/menuSettings.vue | 852 +++++++++++++++++++++++++-------------------------------
1 files changed, 381 insertions(+), 471 deletions(-)
diff --git a/src/views/maintenance/menuSettings.vue b/src/views/maintenance/menuSettings.vue
index 0a89703..46f0caf 100644
--- a/src/views/maintenance/menuSettings.vue
+++ b/src/views/maintenance/menuSettings.vue
@@ -10,200 +10,155 @@
<div class="cataLogContent">
<div class="left_Tree subpage_Div">
<div style="width:auto">
- <el-tree
- ref="tree"
- :props="defaultProps"
- node-key="id"
- highlight-current
- :data="menuList"
- :expand-on-click-node="false"
- :default-expand-all="true"
- @node-click="handleNodeClick"
- >
+ <el-tree ref="tree"
+ :props="defaultProps"
+ node-key="id"
+ highlight-current
+ :data="menuList"
+ :expand-on-click-node="false"
+ :default-expand-all="true"
+ @node-click="handleNodeClick">
</el-tree>
</div>
</div>
<div class="right_menu subpage_Div">
<div style="display:flex;justify-content:right;align-items: center;padding-bottom: 14px">
- <el-breadcrumb separator="/" style="display: none">
+ <el-breadcrumb separator="/"
+ style="display: none">
<el-breadcrumb-item :to="{ path: '/' }">{{
$t('dataManage.dictionaryManageObj.particulars')
}}</el-breadcrumb-item>
</el-breadcrumb>
<div>
- <el-button
- v-if="menuStatus.insert"
- :disabled="itemdetail.pid == null ? true : false"
- @click="setNewNode(1)"
- type="success"
- icon="el-icon-plus"
- size="small"
- >{{$t('operatManage.menuSetObj.insert')}}</el-button>
- <el-button
- v-if="menuStatus.insert"
- :disabled="itemdetail.pid == null ? true : false"
- @click="setNewNode(2)"
- type="success"
- icon="el-icon-plus"
- size="small"
- >{{$t('operatManage.menuSetObj.subInsert')}}</el-button>
- <el-button
- v-if="menuStatus.delete"
- @click="setDelNode()"
- :disabled="itemdetail.pid == null ? true : false"
- type="danger"
- icon="el-icon-delete"
- size="small"
- >{{$t('operatManage.menuSetObj.delete')}}</el-button>
- <el-button
- v-if="menuStatus.update"
- :disabled="itemdetail.pid == null ? true : false"
- @click="setEditNode(1)"
- type="info"
- icon="el-icon-top"
- size="small"
- >{{$t('operatManage.menuSetObj.moveUp')}}</el-button>
- <el-button
- v-if="menuStatus.update"
- :disabled="itemdetail.pid == null ? true : false"
- @click="setEditNode(2)"
- type="info"
- icon="el-icon-bottom"
- size="small"
- >{{$t('operatManage.menuSetObj.moveDown')}}</el-button>
+ <el-button :disabled="itemdetail.pid == null ? true : false"
+ @click="setNewNode(1)"
+ type="success"
+ icon="el-icon-plus"
+ size="small">{{$t('operatManage.menuSetObj.insert')}}</el-button>
+ <el-button :disabled="itemdetail.pid == null ? true : false"
+ @click="setNewNode(2)"
+ type="success"
+ icon="el-icon-plus"
+ size="small">{{$t('operatManage.menuSetObj.subInsert')}}</el-button>
+ <el-button @click="setDelNode()"
+ :disabled="itemdetail.pid == null ? true : false"
+ type="danger"
+ icon="el-icon-delete"
+ size="small">{{$t('operatManage.menuSetObj.delete')}}</el-button>
+ <el-button :disabled="itemdetail.pid == null ? true : false"
+ @click="setEditNode(1)"
+ type="info"
+ icon="el-icon-top"
+ size="small">{{$t('operatManage.menuSetObj.moveUp')}}</el-button>
+ <el-button :disabled="itemdetail.pid == null ? true : false"
+ @click="setEditNode(2)"
+ type="info"
+ icon="el-icon-bottom"
+ size="small">{{$t('operatManage.menuSetObj.moveDown')}}</el-button>
</div>
</div>
<div class="dividing-line"></div>
-<!-- <el-divider />-->
+ <!-- <el-divider />-->
<div class="form_box">
- <el-form
- :model="itemdetail"
- ref="itemdetail"
- :rules="rules"
- label-width="130px"
- >
- <el-form-item
- prop="enName"
- :label="$t('operatManage.menuSetObj.enName')"
- :label-width="formLabelWidth"
- >
- <el-input
- clear="el_input"
- v-model="itemdetail.enName"
- :placeholder="$t('operatManage.menuSetObj.enNameHolder')"
- autocomplete="off"
- ></el-input>
+ <el-form :model="itemdetail"
+ ref="itemdetail"
+ :rules="rules"
+ label-width="130px">
+ <el-form-item prop="enName"
+ :label="$t('operatManage.menuSetObj.enName')"
+ :label-width="formLabelWidth">
+ <el-input clear="el_input"
+ v-model="itemdetail.enName"
+ :placeholder="$t('operatManage.menuSetObj.enNameHolder')"
+ autocomplete="off"></el-input>
</el-form-item>
- <el-form-item
- prop="cnName"
- :label="$t('operatManage.menuSetObj.cnName')"
- :label-width="formLabelWidth"
- >
- <el-input
- v-model="itemdetail.cnName"
- :placeholder="$t('operatManage.menuSetObj.cnNameHolder')"
- autocomplete="off"
- ></el-input>
+ <el-form-item prop="cnName"
+ :label="$t('operatManage.menuSetObj.cnName')"
+ :label-width="formLabelWidth">
+ <el-input v-model="itemdetail.cnName"
+ :placeholder="$t('operatManage.menuSetObj.cnNameHolder')"
+ autocomplete="off"></el-input>
</el-form-item>
-<!-- <el-form-item-->
-<!-- :label="$t('operatManage.menuSetObj.icon')"-->
-<!-- :label-width="formLabelWidth"-->
-<!-- >-->
-<!-- <el-input-->
-<!-- v-model="itemdetail.icon"-->
-<!-- :placeholder="$t('operatManage.menuSetObj.iconHolder')"-->
-<!-- autocomplete="off"-->
-<!-- ></el-input>-->
-<!-- </el-form-item>-->
- <el-form-item
- prop="isShow"
- :label="$t('operatManage.menuSetObj.isShow')"
- :label-width="formLabelWidth"
- >
- <el-select
- style="width: 400px"
- :popper-append-to-body="false"
- v-model="itemdetail.isShow"
- :placeholder="$t('operatManage.menuSetObj.show')"
- >
- <el-option :label="$t('operatManage.menuSetObj.hiddeen')" value="0" />
- <el-option :label="$t('operatManage.menuSetObj.isshow')" value="1" />
-<!-- <el-option-->
-<!-- v-for="item in options1"-->
-<!-- :key="item.value"-->
-<!-- :label="item.label"-->
-<!-- :value="item.value"-->
-<!-- >-->
-<!-- </el-option>-->
+ <!-- <el-form-item-->
+ <!-- :label="$t('operatManage.menuSetObj.icon')"-->
+ <!-- :label-width="formLabelWidth"-->
+ <!-- >-->
+ <!-- <el-input-->
+ <!-- v-model="itemdetail.icon"-->
+ <!-- :placeholder="$t('operatManage.menuSetObj.iconHolder')"-->
+ <!-- autocomplete="off"-->
+ <!-- ></el-input>-->
+ <!-- </el-form-item>-->
+ <el-form-item prop="isShow"
+ :label="$t('operatManage.menuSetObj.isShow')"
+ :label-width="formLabelWidth">
+ <el-select style="width: 400px"
+ :popper-append-to-body="false"
+ v-model="itemdetail.isShow"
+ :placeholder="$t('operatManage.menuSetObj.show')">
+ <el-option :label="$t('operatManage.menuSetObj.hiddeen')"
+ value="0" />
+ <el-option :label="$t('operatManage.menuSetObj.isshow')"
+ value="1" />
+ <!-- <el-option-->
+ <!-- v-for="item in options1"-->
+ <!-- :key="item.value"-->
+ <!-- :label="item.label"-->
+ <!-- :value="item.value"-->
+ <!-- >-->
+ <!-- </el-option>-->
</el-select>
</el-form-item>
- <el-form-item
- :label="$t('operatManage.menuSetObj.menuUrl')"
- :label-width="formLabelWidth"
- >
- <el-input
- v-model="itemdetail.url"
- :placeholder="$t('operatManage.menuSetObj.menuUrlHolder')"
- autocomplete="off"
- ></el-input>
+ <el-form-item :label="$t('operatManage.menuSetObj.menuUrl')"
+ :label-width="formLabelWidth">
+ <el-input v-model="itemdetail.url"
+ :placeholder="$t('operatManage.menuSetObj.menuUrlHolder')"
+ autocomplete="off"></el-input>
</el-form-item>
- <el-form-item
- :label="$t('operatManage.menuSetObj.authorize')"
- :label-width="formLabelWidth"
- >
- <el-input
- v-model="itemdetail.perms"
- :placeholder="$t('operatManage.menuSetObj.permsHolder')"
- autocomplete="off"
- ></el-input>
+ <el-form-item :label="$t('operatManage.menuSetObj.authorize')"
+ :label-width="formLabelWidth">
+ <el-input v-model="itemdetail.perms"
+ :placeholder="$t('operatManage.menuSetObj.permsHolder')"
+ autocomplete="off"></el-input>
</el-form-item>
- <el-form-item
- :label="$t('operatManage.menuSetObj.type')"
- prop="type"
- :label-width="formLabelWidth"
- >
- <el-select
- style="width: 400px"
- :popper-append-to-body="false"
- v-model="itemdetail.type"
- :placeholder="$t('operatManage.menuSetObj.typeHolder')"
- >
- <el-option :label="$t('operatManage.menuSetObj.rootpath')" value="0" />
- <el-option :label="$t('operatManage.menuSetObj.menu')" value="1" />
- <el-option :label="$t('operatManage.menuSetObj.button')" value="2" />
-<!-- <el-option-->
-<!-- v-for="item in options2"-->
-<!-- :key="item.value"-->
-<!-- :label="item.label"-->
-<!-- :value="item.value"-->
-<!-- >-->
-<!-- </el-option>-->
+ <el-form-item :label="$t('operatManage.menuSetObj.type')"
+ prop="type"
+ :label-width="formLabelWidth">
+ <el-select style="width: 400px"
+ :popper-append-to-body="false"
+ v-model="itemdetail.type"
+ :placeholder="$t('operatManage.menuSetObj.typeHolder')">
+ <el-option :label="$t('operatManage.menuSetObj.rootpath')"
+ value="0" />
+ <el-option :label="$t('operatManage.menuSetObj.menu')"
+ value="1" />
+ <el-option :label="$t('operatManage.menuSetObj.button')"
+ value="2" />
+ <!-- <el-option-->
+ <!-- v-for="item in options2"-->
+ <!-- :key="item.value"-->
+ <!-- :label="item.label"-->
+ <!-- :value="item.value"-->
+ <!-- >-->
+ <!-- </el-option>-->
</el-select>
</el-form-item>
- <el-form-item
- :label="$t('operatManage.menuSetObj.bak')"
- :label-width="formLabelWidth"
- >
- <el-input
- v-model="itemdetail.bak"
- autocomplete="off"
- :placeholder="$t('operatManage.menuSetObj.bakHolder')"
- ></el-input>
+ <el-form-item :label="$t('operatManage.menuSetObj.bak')"
+ :label-width="formLabelWidth">
+ <el-input v-model="itemdetail.bak"
+ autocomplete="off"
+ :placeholder="$t('operatManage.menuSetObj.bakHolder')"></el-input>
</el-form-item>
- <div v-if="menuStatus.update">
+ <div>
<el-form-item>
- <el-button
- size="small"
- type="primary"
- @click="updMenu('itemdetail')"
- >{{ $t('common.confirm') }}</el-button>
- <el-button
- size="small"
- type="info"
- @click="reset('itemdetail')"
- >{{
+ <el-button size="small"
+ type="primary"
+ @click="updMenu('itemdetail')">{{ $t('common.confirm') }}</el-button>
+ <el-button size="small"
+ type="info"
+ @click="reset('itemdetail')">{{
$t('common.cancel')
}}</el-button>
</el-form-item>
@@ -214,140 +169,96 @@
</div>
</div>
- <el-dialog
- :title="$t('common.append')"
- :visible.sync="dialogFormVisible"
- :before-close="handleClose"
- >
- <div style="height: 500px; overflow: auto">
- <el-form
- :model="ruleForm"
- ref="ruleForm"
- :rules="rules"
- label-position="top"
- >
- <el-form-item
- prop="enName"
- :label="$t('operatManage.menuSetObj.enName')"
- :label-width="formLabelWidth"
- >
- <el-input
- v-model="ruleForm.enName"
- autocomplete="off"
- style="width:85%"
- :placeholder="$t('shuJuGuanLi.shuJuJianSuo.valuetwo')+$t('operatManage.menuSetObj.enName')"
- ></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"
- style="width:85%"
- :placeholder="$t('shuJuGuanLi.shuJuJianSuo.valuetwo')+$t('operatManage.menuSetObj.cnName')"
- ></el-input>
- </el-form-item>
- <el-form-item
- :label="$t('operatManage.menuSetObj.icon')"
- :label-width="formLabelWidth"
- >
- <el-input
- v-model="ruleForm.icon"
- autocomplete="off"
- style="width:85%"
- :placeholder="$t('shuJuGuanLi.shuJuJianSuo.valuetwo')+$t('operatManage.menuSetObj.icon')"
- ></el-input>
- </el-form-item>
- <el-form-item
- prop="isShow"
- :label="$t('operatManage.menuSetObj.isShow')"
- :label-width="formLabelWidth"
- >
- <el-select
- :popper-append-to-body="false"
- style="width:85%"
- v-model="ruleForm.isShow"
- :placeholder="$t('shuJuGuanLi.shuJuJianSuo.valuetree')+$t('operatManage.menuSetObj.isShow')"
- >
- <el-option
- v-for="item in options1"
- :key="item.value"
- :label="item.label"
- :value="item.value"
- >
- </el-option>
- </el-select>
- </el-form-item>
- <el-form-item
- :label="$t('operatManage.menuSetObj.menuUrl')"
- :label-width="formLabelWidth"
- >
- <el-input
- v-model="ruleForm.url"
- autocomplete="off"
- style="width:85%"
- :placeholder="$t('shuJuGuanLi.shuJuJianSuo.valuetwo')+$t('operatManage.menuSetObj.menuUrl')"
- ></el-input>
- </el-form-item>
- <el-form-item
- :label="$t('operatManage.menuSetObj.authorize')"
- :label-width="formLabelWidth"
- >
- <el-input
- v-model="ruleForm.perms"
- autocomplete="off"
- style="width:85%"
- :placeholder="$t('shuJuGuanLi.shuJuJianSuo.valuetwo')+$t('operatManage.menuSetObj.authorize')"
- ></el-input>
- </el-form-item>
- <el-form-item
- :label="$t('operatManage.menuSetObj.type')"
- prop="type"
- :label-width="formLabelWidth"
- >
- <el-select
- :popper-append-to-body="false"
- style="width:85%"
- v-model="ruleForm.type"
- :placeholder="$t('shuJuGuanLi.shuJuJianSuo.valuetree')+$t('operatManage.menuSetObj.type')"
- >
- <el-option
- v-for="item in options2"
- :key="item.value"
- :label="item.label"
- :value="item.value"
- >
- </el-option>
- </el-select>
- </el-form-item>
- <el-form-item
- :label="$t('operatManage.menuSetObj.bak')"
- :label-width="formLabelWidth"
- >
- <el-input
- v-model="ruleForm.bak"
- autocomplete="off"
- style="width:85%"
- :placeholder="$t('shuJuGuanLi.shuJuJianSuo.valuetwo')+$t('operatManage.menuSetObj.bak')"
- ></el-input>
- </el-form-item>
- </el-form>
- </div>
- <div
- slot="footer"
- class="dialog-footer"
- >
+ <el-dialog :title="$t('common.append')"
+ :visible.sync="dialogFormVisible"
+ :before-close="handleClose">
+ <div style="height: 500px; overflow: auto">
+ <el-form :model="ruleForm"
+ ref="ruleForm"
+ :rules="rules"
+ label-position="top">
+ <el-form-item prop="enName"
+ :label="$t('operatManage.menuSetObj.enName')"
+ :label-width="formLabelWidth">
+ <el-input v-model="ruleForm.enName"
+ autocomplete="off"
+ style="width:85%"
+ :placeholder="$t('shuJuGuanLi.shuJuJianSuo.valuetwo')+$t('operatManage.menuSetObj.enName')"></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"
+ style="width:85%"
+ :placeholder="$t('shuJuGuanLi.shuJuJianSuo.valuetwo')+$t('operatManage.menuSetObj.cnName')"></el-input>
+ </el-form-item>
+ <el-form-item :label="$t('operatManage.menuSetObj.icon')"
+ :label-width="formLabelWidth">
+ <el-input v-model="ruleForm.icon"
+ autocomplete="off"
+ style="width:85%"
+ :placeholder="$t('shuJuGuanLi.shuJuJianSuo.valuetwo')+$t('operatManage.menuSetObj.icon')"></el-input>
+ </el-form-item>
+ <el-form-item prop="isShow"
+ :label="$t('operatManage.menuSetObj.isShow')"
+ :label-width="formLabelWidth">
+ <el-select :popper-append-to-body="false"
+ style="width:85%"
+ v-model="ruleForm.isShow"
+ :placeholder="$t('shuJuGuanLi.shuJuJianSuo.valuetree')+$t('operatManage.menuSetObj.isShow')">
+ <el-option v-for="item in options1"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value">
+ </el-option>
+ </el-select>
+ </el-form-item>
+ <el-form-item :label="$t('operatManage.menuSetObj.menuUrl')"
+ :label-width="formLabelWidth">
+ <el-input v-model="ruleForm.url"
+ autocomplete="off"
+ style="width:85%"
+ :placeholder="$t('shuJuGuanLi.shuJuJianSuo.valuetwo')+$t('operatManage.menuSetObj.menuUrl')"></el-input>
+ </el-form-item>
+ <el-form-item :label="$t('operatManage.menuSetObj.authorize')"
+ :label-width="formLabelWidth">
+ <el-input v-model="ruleForm.perms"
+ autocomplete="off"
+ style="width:85%"
+ :placeholder="$t('shuJuGuanLi.shuJuJianSuo.valuetwo')+$t('operatManage.menuSetObj.authorize')"></el-input>
+ </el-form-item>
+ <el-form-item :label="$t('operatManage.menuSetObj.type')"
+ prop="type"
+ :label-width="formLabelWidth">
+ <el-select :popper-append-to-body="false"
+ style="width:85%"
+ v-model="ruleForm.type"
+ :placeholder="$t('shuJuGuanLi.shuJuJianSuo.valuetree')+$t('operatManage.menuSetObj.type')">
+ <el-option v-for="item in options2"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value">
+ </el-option>
+ </el-select>
+ </el-form-item>
+ <el-form-item :label="$t('operatManage.menuSetObj.bak')"
+ :label-width="formLabelWidth">
+ <el-input v-model="ruleForm.bak"
+ autocomplete="off"
+ style="width:85%"
+ :placeholder="$t('shuJuGuanLi.shuJuJianSuo.valuetwo')+$t('operatManage.menuSetObj.bak')"></el-input>
+ </el-form-item>
+ </el-form>
+ </div>
+ <div slot="footer"
+ class="dialog-footer">
<el-button @click="resetForm('ruleForm')">{{
$t('common.cancel')
}}</el-button>
- <el-button
- style="background: #409eff; color: white; border: 1px solid #409eff"
- @click="submitForm('ruleForm')"
- v-loading.fullscreen.lock="fullscreenLoading"
- >{{ $t('common.confirm') }}</el-button>
+ <el-button style="background: #409eff; color: white; border: 1px solid #409eff"
+ @click="submitForm('ruleForm')"
+ v-loading.fullscreen.lock="fullscreenLoading">{{ $t('common.confirm') }}</el-button>
</div>
</el-dialog>
</div>
@@ -369,7 +280,7 @@
components: {
MyBread,
},
- data() {
+ data () {
return {
menuStatus: {
delete: false,
@@ -413,12 +324,12 @@
type: null,
bak: '',
},
- rules : {
+ rules: {
enName: [
- { required: true, message: this.$t('operatManage.menuSetObj.enNameHolder'), trigger: 'blur' },
+ { required: true,message: this.$t('operatManage.menuSetObj.enNameHolder'),trigger: 'blur' },
],
cnName: [
- { required: true, message: this.$t('operatManage.menuSetObj.cnNameHolder'), trigger: 'blur' },
+ { required: true,message: this.$t('operatManage.menuSetObj.cnNameHolder'),trigger: 'blur' },
],
isShow: [
@@ -439,27 +350,27 @@
options1: [
{
value: 0,
- label:this.$t('operatManage.menuSetObj.hiddeen')
+ label: this.$t('operatManage.menuSetObj.hiddeen')
},
{
value: 1,
- label:this.$t('operatManage.menuSetObj.isshow')
+ label: this.$t('operatManage.menuSetObj.isshow')
},
],
options2: [
{
value: 0,
- label:this.$t('operatManage.menuSetObj.rootpath')
+ label: this.$t('operatManage.menuSetObj.rootpath')
// label: '鏍圭洰褰�',
},
{
value: 1,
- label:this.$t('operatManage.menuSetObj.menu')
+ label: this.$t('operatManage.menuSetObj.menu')
// label: '鑿滃崟',
},
{
value: 2,
- label:this.$t('operatManage.menuSetObj.button')
+ label: this.$t('operatManage.menuSetObj.button')
// label: '鎸夐挳',
},
],
@@ -467,17 +378,17 @@
};
},
methods: {
- getMenuTree() {
+ getMenuTree () {
//鑾峰彇鐩綍鏍戞渶澶D锛屾柊寤鸿妭鐐逛娇鐢�
// queryMaxId().then((res) => {
// this.id = res.data;
// });
queryMenuAll().then((res) => {
- if (res.code == 200) {
- this.menuList = this.treeData(res.result);
- this.oriData = res.result;
- this.newData = res.result;
- if (this.itemdetail.id != null) {
+ if(res.code==200) {
+ 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);
});
@@ -490,44 +401,44 @@
}
});
},
- treeData(source) {
- let cloneData = JSON.parse(JSON.stringify(source)); // 瀵规簮鏁版嵁娣卞害鍏嬮殕
+ treeData (source) {
+ let cloneData=JSON.parse(JSON.stringify(source)); // 瀵规簮鏁版嵁娣卞害鍏嬮殕
return cloneData.filter((father) => {
// 寰幆鎵�鏈夐」
- let branchArr = cloneData.filter((child) => father.id == child.pid); // 瀵规瘮ID锛屽垎鍒笂涓嬬骇鑿滃崟锛屽苟杩斿洖鏁版嵁
- branchArr.length > 0 ? (father.children = branchArr) : ''; // 缁欑埗绾ф坊鍔犱竴涓猚hildren灞炴�э紝骞惰祴鍊�
- return father.pid == 0; // 杩斿洖涓�绾ц彍鍗�
+ let branchArr=cloneData.filter((child) => father.id==child.pid); // 瀵规瘮ID锛屽垎鍒笂涓嬬骇鑿滃崟锛屽苟杩斿洖鏁版嵁
+ branchArr.length>0? (father.children=branchArr):''; // 缁欑埗绾ф坊鍔犱竴涓猚hildren灞炴�э紝骞惰祴鍊�
+ 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;
+ 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) {
+ 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 = [];
+ 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;
+ if(res.id==tempChildrenNodex2.data.id) {
+ res.orderNum=tempChildrenNodex2.orderNum;
arr.push(res)
- } else if (res.id == tempChildrenNodex1.data.id) {
- res.orderNum = tempChildrenNodex1.orderNum;
+ } else if(res.id==tempChildrenNodex1.data.id) {
+ res.orderNum=tempChildrenNodex1.orderNum;
arr.push(res)
}
})
- this.newData = arr;
+ this.newData=arr;
this.sendChange();
} else {
this.$message({
@@ -537,22 +448,22 @@
}
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 = [];
+ 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;
+ if(res.id==tempChildrenNodex2.data.id) {
+ res.orderNum=tempChildrenNodex2.orderNum;
arr.push(res)
- } else if (res.id == tempChildrenNodex1.data.id) {
- res.orderNum = tempChildrenNodex1.orderNum;
+ } else if(res.id==tempChildrenNodex1.data.id) {
+ res.orderNum=tempChildrenNodex1.orderNum;
arr.push(res)
}
})
- this.newData = arr;
+ this.newData=arr;
this.sendChange();
} else {
this.$message({
@@ -565,36 +476,36 @@
}
},
- setDelNode() {
- this.remove(this.newNode, this.itemdetail)
+ 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)
+ 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;
+ } else if(res==2) {//鏂板瀛愮骇
+ id=this.itemdetail.id;
+ orderNum=this.getMaxOrderNum(this.newNode.childNodes)
- lever = this.itemdetail.level + 1;
+ lever=this.itemdetail.level+1;
}
- this.ruleForm.pid = id;
- this.ruleForm.level = lever;
- this.ruleForm.orderNum = orderNum
- this.dialogFormVisible = true;
+ 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
+ getMaxOrderNum (res) {
+ var val=-100;
+ for(var i in res) {
+ if(res[i].data.orderNum>val) {
+ val=res[i].data.orderNum
}
}
- val = val + 1;
+ val=val+1;
return val;
},
@@ -603,49 +514,49 @@
- append(node, data) {
- this.dialogFormVisible = true;
- this.ruleForm.pid = data.id;
- this.ruleForm.orderNum = node.childNodes.length + 1;
- this.ruleForm.level = data.level + 1;
+ append (node,data) {
+ this.dialogFormVisible=true;
+ this.ruleForm.pid=data.id;
+ this.ruleForm.orderNum=node.childNodes.length+1;
+ this.ruleForm.level=data.level+1;
},
- resetForm(formName) {
+ resetForm (formName) {
this.$confirm("鍏抽棴鍚庢棤娉曚繚瀛橈紝鏄惁鍏抽棴?")
.then((_) => {
- this.dialogFormVisible = false;
+ this.dialogFormVisible=false;
this.$nextTick(() => {
this.$refs[formName].resetFields();
- this.ruleForm = {};
+ this.ruleForm={};
});
})
.catch((_) => { });
},
- submitForm(formName) {
+ submitForm (formName) {
this.$nextTick(() => {
this.$refs[formName].validate((valid) => {
- if (valid) {
- this.fullscreenLoading = true;
+ if(valid) {
+ this.fullscreenLoading=true;
insertMenu(this.ruleForm)
.then((res) => {
setTimeout(() => {
- this.fullscreenLoading = false;
- if (res.code == 200) {
+ this.fullscreenLoading=false;
+ if(res.code==200) {
this.$message({
message: '娣诲姞鎴愬姛',
type: 'success',
});
this.getMenuTree();
- this.itemdetail = {};
- this.ruleForm = {};
- this.dialogFormVisible = false;
+ this.itemdetail={};
+ this.ruleForm={};
+ this.dialogFormVisible=false;
this.$refs[formName].resetFields();
}
- }, 500);
+ },500);
})
.catch((res) => {
- this.itemdetail = {};
+ this.itemdetail={};
this.$message.error('娣诲姞澶辫触');
- this.fullscreenLoading = false;
+ this.fullscreenLoading=false;
console.log(res);
});
} else {
@@ -655,40 +566,40 @@
});
});
},
- remove(node, data) {
- this.$confirm('姝ゆ搷浣滃皢鍒犻櫎璇ヨ妭鐐�, 鏄惁缁х画?', '鎻愮ず', {
+ remove (node,data) {
+ this.$confirm('姝ゆ搷浣滃皢鍒犻櫎璇ヨ妭鐐�, 鏄惁缁х画?','鎻愮ず',{
confirmButtonText: '纭畾',
cancelButtonText: '鍙栨秷',
type: 'warning',
})
.then(() => {
//鍏勫紵閲嶆柊鎺掑簭
- const parent = node.parent;
- const children = parent.data.children || parent.data;
- children.splice(data.orderNum - 1, 1);
- children.forEach((item, index) => {
- item.orderNum = index + 1;
+ const parent=node.parent;
+ const children=parent.data.children||parent.data;
+ children.splice(data.orderNum-1,1);
+ children.forEach((item,index) => {
+ item.orderNum=index+1;
});
this.traverseArr(data); //鑾峰彇鍒犻櫎鐨勫瓙ID
this.delChildIDs.push(data.id); //瑕佸垹闄ょ殑鍏ㄩ儴ID
- let delIDs = this.delChildIDs;
+ let delIDs=this.delChildIDs;
Promise.all([
deleteMenu({ ids: delIDs.toString() }),
updateMenuTrees(children),
])
.then((res) => {
- if (res[0].code == 200 && res[1].code == 200) {
+ if(res[0].code==200&&res[1].code==200) {
this.$message({
type: 'success',
message: '鍒犻櫎鎴愬姛!',
});
this.getMenuTree();
- this.itemdetail = {};
- } else if (res[0].code == 200) {
+ this.itemdetail={};
+ } else if(res[0].code==200) {
this.getMenuTree();
this.$message.error('鍒犻櫎鎴愬姛锛屼綅缃皟鏁村け璐�');
- } else if (res[1].code == 200) {
+ } else if(res[1].code==200) {
this.getMenuTree();
this.$message.error('鍒犻櫎澶辫触,浣嶇疆璋冩暣鎴愬姛');
} else {
@@ -703,14 +614,14 @@
});
//閲嶇疆瑕佸垹闄ょ殑瀛怚D
- this.delChildIDs = [];
+ this.delChildIDs=[];
})
.catch(() => {
this.$message('宸插彇娑堝垹闄�');
});
},
- traverseArr(obj) {
- if (obj.children) {
+ traverseArr (obj) {
+ if(obj.children) {
return obj.children.forEach((item) => {
// console.log(item.id + "---" + item.name);
// this.delChildID += "id=" + item.id + "&";
@@ -720,55 +631,55 @@
}
return;
},
- flaten(arr) {
- return arr.reduce((p, v, i) => {
- for (let i = 0; i < p.length; i++) {
- if (p[i].children) {
+ flaten (arr) {
+ return arr.reduce((p,v,i) => {
+ for(let i=0;i<p.length;i++) {
+ if(p[i].children) {
delete p[i].children;
}
}
- return p.concat(v.children ? this.flaten(v.children).concat(v) : v);
- }, []);
+ return p.concat(v.children? this.flaten(v.children).concat(v):v);
+ },[]);
},
- handleDragStart(node, ev) {
- this.old_dirDat = JSON.parse(JSON.stringify(this.menuList)); //灏嗗浠界殑dir閲嶆柊璧嬪��
+ handleDragStart (node,ev) {
+ this.old_dirDat=JSON.parse(JSON.stringify(this.menuList)); //灏嗗浠界殑dir閲嶆柊璧嬪��
},
- handleDrop(draggingNode, dropNode, dropType, ev) {
- this.$confirm('姝ゆ搷浣滃皢淇濆瓨鐩綍鏇存敼, 鏄惁缁х画?', '鎻愮ず', {
+ handleDrop (draggingNode,dropNode,dropType,ev) {
+ this.$confirm('姝ゆ搷浣滃皢淇濆瓨鐩綍鏇存敼, 鏄惁缁х画?','鎻愮ず',{
confirmButtonText: '纭畾',
cancelButtonText: '鍙栨秷',
type: 'warning',
})
.then(() => {
//鐖惰妭鐐�
- let data = dropType != 'inner' ? dropNode.parent.data : dropNode.data;
+ let data=dropType!='inner'? dropNode.parent.data:dropNode.data;
// 鐖惰妭鐐逛腑鍏ㄩ儴瀛愯妭鐐�
- let nodeData =
- dropNode.level == 1 && dropType != 'inner' ? data : data.children;
+ let nodeData=
+ dropNode.level==1&&dropType!='inner'? data:data.children;
//鍙樻洿鑺傜偣
// console.log(nodeData);
- nodeData.forEach((item, i) => {
- if (dropType != 'inner') {
- if (draggingNode.data.pid === dropNode.data.pid) {
- item.pid = item.pid;
+ nodeData.forEach((item,i) => {
+ if(dropType!='inner') {
+ if(draggingNode.data.pid===dropNode.data.pid) {
+ item.pid=item.pid;
} else {
- item.pid = dropNode.data.pid;
+ item.pid=dropNode.data.pid;
}
} else {
- item.pid = data.id;
+ item.pid=data.id;
}
- item.orderNum = i + 1;
+ item.orderNum=i+1;
});
// console.log(nodeData);
//鏇存柊鍘熷鏁翠綋鏁版嵁
- let arr = [];
+ let arr=[];
this.oriData.forEach((e) => {
nodeData.forEach((item) => {
- if (item.id === e.id) e = item;
+ if(item.id===e.id) e=item;
});
arr.push(e);
});
- this.newData = arr;
+ this.newData=arr;
this.sendChange();
})
.catch(() => {
@@ -776,18 +687,18 @@
type: 'info',
message: '宸插彇娑堟洿鏀�',
});
- this.menuList = this.old_dirDat; //灏嗗浠界殑dir閲嶆柊璧嬪��
+ this.menuList=this.old_dirDat; //灏嗗浠界殑dir閲嶆柊璧嬪��
});
},
- sendChange() {
+ sendChange () {
this.newData.forEach((item) => {
- if (item.pid == 0) {
- item.type = 0;
+ if(item.pid==0) {
+ item.type=0;
}
});
updateMenuTrees(this.newData)
.then((res) => {
- if (res.code == 200) {
+ if(res.code==200) {
this.getMenuTree();
return;
} else {
@@ -798,34 +709,34 @@
this.$message.error('璋冩暣澶辫触锛岃閲嶈瘯锛�');
});
},
- handleNodeClick(data, node) {
- this.newNode = node;
- this.backUpData = JSON.stringify(data);
- this.itemdetail = JSON.parse(JSON.stringify(data));
- this.itemdetail.isShow = this.itemdetail.isShow.toString();
- this.itemdetail.type = this.itemdetail.type.toString();
+ handleNodeClick (data,node) {
+ this.newNode=node;
+ this.backUpData=JSON.stringify(data);
+ this.itemdetail=JSON.parse(JSON.stringify(data));
+ this.itemdetail.isShow=this.itemdetail.isShow.toString();
+ this.itemdetail.type=this.itemdetail.type.toString();
},
- updMenu(formName) {
+ updMenu (formName) {
this.$nextTick(() => {
this.$refs[formName].validate((valid) => {
- if (valid) {
- this.fullscreenLoading = true;
+ if(valid) {
+ this.fullscreenLoading=true;
updateMenuTree(this.itemdetail)
.then((res) => {
setTimeout(() => {
- this.fullscreenLoading = false;
- if (res.code == 200) {
+ this.fullscreenLoading=false;
+ if(res.code==200) {
this.$router.go(0);
this.getMenuTree();
- this.itemdetail = {};
- this.dialogFormVisible = false;
+ this.itemdetail={};
+ this.dialogFormVisible=false;
this.$refs[formName].resetFields();
}
- }, 500);
+ },500);
})
.catch((res) => {
this.$message.error('璋冩暣澶辫触锛岃閲嶈瘯锛�');
- this.fullscreenLoading = false;
+ this.fullscreenLoading=false;
});
} else {
return false;
@@ -833,56 +744,56 @@
});
});
},
- reset(formName) {
+ reset (formName) {
this.$refs[formName].resetFields();
- if (this.backUpData != '') {
- this.itemdetail = JSON.parse(this.backUpData);
+ if(this.backUpData!='') {
+ this.itemdetail=JSON.parse(this.backUpData);
}
},
- showPermsMenu(res) {
+ showPermsMenu (res) {
- switch (res.tag) {
+ switch(res.tag) {
case '/delete':
- this.menuStatus.delete = true;
+ this.menuStatus.delete=true;
break;
case '/insert':
- this.menuStatus.insert = true;
+ this.menuStatus.insert=true;
break;
case '/update':
- this.menuStatus.update = true;
+ this.menuStatus.update=true;
break;
}
},
- getPerms() {
- var val = this.$store.state.currentPerms;
- var permsEntity = this.$store.state.permsEntity;
+ getPerms () {
+ var val=this.$store.state.currentPerms;
+ var permsEntity=this.$store.state.permsEntity;
- if (permsEntity.length == 0) {
+ if(permsEntity.length==0) {
getPerms().then((res) => {
- if (res.code == 200) {
- permsEntity = res.result;
+ if(res.code==200) {
+ permsEntity=res.result;
}
});
}
- for (var i = 0; i < permsEntity.length; i++) {
- if (permsEntity[i].perms == val) {
+ for(var i=0;i<permsEntity.length;i++) {
+ if(permsEntity[i].perms==val) {
this.showPermsMenu(permsEntity[i]);
}
}
},
- handleClose() {
+ handleClose () {
this.$confirm("鍏抽棴鍚庢棤娉曚繚瀛橈紝鏄惁鍏抽棴?")
.then((_) => {
- this.dialogFormVisible = false
+ this.dialogFormVisible=false
})
.catch((_) => { });
},
},
- mounted() {
+ mounted () {
this.getMenuTree();
this.getPerms();
},
- created() { },
+ created () { },
};
</script>
<style lang="less" scoped>
@@ -903,7 +814,7 @@
border-radius: 5px;
padding: 1%;
overflow-y: auto;
- border-right: 1px solid #dcdfe6;
+ border-right: 1px solid #dcdfe6;
}
.right_menu {
width: 80%;
@@ -922,8 +833,7 @@
}
}
}
-.btnBox{
-
+.btnBox {
position: absolute;
bottom: 0;
right: 0;
--
Gitblit v1.9.3