From 9ce29c536ba2a636416c618761985e2b9a711ee6 Mon Sep 17 00:00:00 2001 From: lxl <lixuliang_hd@126.com> Date: 星期四, 27 十月 2022 14:17:45 +0800 Subject: [PATCH] user --- src/views/userManage/orgManage.vue | 335 ++++++++++++++++++++++++++++++++++++++----------------- 1 files changed, 233 insertions(+), 102 deletions(-) diff --git a/src/views/userManage/orgManage.vue b/src/views/userManage/orgManage.vue index 912620e..ff052ca 100644 --- a/src/views/userManage/orgManage.vue +++ b/src/views/userManage/orgManage.vue @@ -6,7 +6,7 @@ >淇濆瓨</el-button > <el-divider /> - <div class="menuTreeBox"> + <div class="depTreeBox"> <el-tree ref="tree" :props="defaultProps" @@ -23,6 +23,7 @@ <span>{{ node.label }}</span> <span class="btnBox"> <el-button + v-if="menuStatus.insert" type="text" size="mini" @click="() => append(node, data)" @@ -30,6 +31,7 @@ <i class="el-icon-circle-plus"></i> </el-button> <el-button + v-if="menuStatus.delete" type="text" size="mini" @click="() => remove(node, data)" @@ -46,7 +48,7 @@ <h4>璇︾粏淇℃伅</h4> </div> <div class="form_box"> - <el-form :model="itemdetail"> + <el-form :model="itemdetail" ref="itemdetail" :rules="rules"> <el-form-item label="鍚嶇О" :label-width="formLabelWidth"> <el-input v-model="itemdetail.name" autocomplete="off"></el-input> </el-form-item> @@ -86,26 +88,55 @@ <el-form-item label="澶囨敞" :label-width="formLabelWidth"> <el-input v-model="itemdetail.bak" autocomplete="off"></el-input> </el-form-item> - <div class="btnBox"> - <el-button type="primary" @click="updDep">淇濆瓨</el-button> - <el-button type="primary" @click="reset">鍙栨秷</el-button> + <div class="btnBox" v-if="menuStatus.update"> + <el-button type="primary" @click="updDep('itemdetail')" + >淇濆瓨</el-button + > + <el-button type="primary" @click="reset('itemdetail')" + >鍙栨秷</el-button + > </div> </el-form> </div> </div> - <el-dialog title="鏂板瀛愮洰褰�" :visible.sync="dialogFormVisible"> + <el-dialog + width="30%" + top="5vh" + title="鏂板瀛愮洰褰�" + :visible.sync="dialogFormVisible" + > <el-form :model="ruleForm" ref="ruleForm" :rules="rules"> - <el-form-item - label="鐩綍鍚嶇О" - prop="name" - :label-width="formLabelWidth" - > + <el-form-item prop="name" label="鍚嶇О" :label-width="formLabelWidth"> <el-input v-model="ruleForm.name" autocomplete="off"></el-input> </el-form-item> - <el-form-item label="鐩綍璇存槑" :label-width="formLabelWidth"> - <el-input v-model="ruleForm.descr" autocomplete="off"></el-input> + <el-form-item label="绠�绉�" :label-width="formLabelWidth"> + <el-input v-model="ruleForm.sname" autocomplete="off"></el-input> </el-form-item> - <el-form-item label="鐩綍澶囨敞" :label-width="formLabelWidth"> + <el-form-item label="缂栫爜" :label-width="formLabelWidth"> + <el-input v-model="ruleForm.code" autocomplete="off"></el-input> + </el-form-item> + <el-form-item label="鏈烘瀯浠g爜" :label-width="formLabelWidth"> + <el-input v-model="ruleForm.uncode" autocomplete="off"></el-input> + </el-form-item> + <el-form-item label="鍦板潃" :label-width="formLabelWidth"> + <el-input v-model="ruleForm.addr" autocomplete="off"></el-input> + </el-form-item> + <el-form-item label="鑱旂郴鏂瑰紡" :label-width="formLabelWidth"> + <el-input v-model="ruleForm.contact" autocomplete="off"></el-input> + </el-form-item> + <el-form-item label="浼犵湡" :label-width="formLabelWidth"> + <el-input v-model="ruleForm.fax" autocomplete="off"></el-input> + </el-form-item> + <el-form-item label="鐢靛瓙閭欢" :label-width="formLabelWidth"> + <el-input v-model="ruleForm.email" autocomplete="off"></el-input> + </el-form-item> + <el-form-item label="閭斂缂栫爜" :label-width="formLabelWidth"> + <el-input v-model="ruleForm.post" autocomplete="off"></el-input> + </el-form-item> + <el-form-item label="缃戠珯鍦板潃" :label-width="formLabelWidth"> + <el-input v-model="ruleForm.website" autocomplete="off"></el-input> + </el-form-item> + <el-form-item label="澶囨敞" :label-width="formLabelWidth"> <el-input v-model="ruleForm.bak" autocomplete="off"></el-input> </el-form-item> </el-form> @@ -123,13 +154,15 @@ </template> <script> -import MyBread from "../../components/MyBread.vue"; +import MyBread from '../../components/MyBread.vue'; import { queryDepTree, updateDepTree, updateDepTrees, queryMaxId, -} from "../../api/api"; + insertDep, + deleteDep, +} from '../../api/api'; export default { //import寮曞叆鐨勭粍浠堕渶瑕佹敞鍏ュ埌瀵硅薄涓墠鑳戒娇鐢� components: { @@ -137,16 +170,21 @@ }, data() { let validName = (rule, value, callback) => { - if (value === "") { - return callback(new Error("鐩綍鍚嶇О涓嶈兘涓虹┖")); + if (value === '' || value === null || value === undefined) { + return callback(new Error('鍚嶇О涓嶈兘涓虹┖')); } else { callback(); } }; return { + menuStatus: { + delete: false, + insert: false, + update: false, + }, defaultProps: { - children: "children", - label: "name", + children: 'children', + label: 'name', }, fullscreenLoading: false, oriData: [], //鍘熷鏍戞暟鎹� @@ -154,37 +192,46 @@ old_depData: [], //el鏍戞暟鎹�(鎷栧姩鍓�) newData: [], //鎷栧姩鍚庡師濮嬫暟鎹� itemdetail: { - addr: "", - bak: "", - code: "", - contact: "", - email: "", - fax: "", - name: "", - post: "", - sname: "", - uncode: "", - website: "", + addr: '', + bak: '', + code: '', + contact: '', + email: '', + fax: '', + name: '', + post: '', + sname: '', + uncode: '', + website: '', }, - backUpData: {}, - formLabelWidth: "170px", - deleteIDs: "", + backUpData: '', + formLabelWidth: '130px', + delChildID: '', + delChildIDs: [], dialogFormVisible: false, ruleForm: { level: null, orderNum: null, pid: null, - name: "", - descr: "", - bak: "", + addr: '', + bak: '', + code: '', + contact: '', + email: '', + fax: '', + name: '', + post: '', + sname: '', + uncode: '', + website: '', }, rules: { - name: [{ validator: validName, trigger: "blur" }], + name: [{ required: true, validator: validName, trigger: 'blur' }], }, }; }, methods: { - getMenuTree() { + getDepTree() { //鑾峰彇鐩綍鏍戞渶澶D锛屾柊寤鸿妭鐐逛娇鐢� // queryMaxId().then((res) => { // this.id = res.data; @@ -195,7 +242,10 @@ this.newData = res.result; this.depList = this.treeData(res.result); } else { - console.log("鎺ュ彛鎶ラ敊"); + this.$notify.error({ + title: res.code, + message: '鏃犳硶鑾峰彇鍗曚綅鍒楄〃', + }); } }); }, @@ -204,8 +254,8 @@ return cloneData.filter((father) => { // 寰幆鎵�鏈夐」 let branchArr = cloneData.filter((child) => father.id == child.pid); // 瀵规瘮ID锛屽垎鍒笂涓嬬骇鑿滃崟锛屽苟杩斿洖鏁版嵁 - branchArr.length > 0 ? (father.children = branchArr) : ""; // 缁欑埗绾ф坊鍔犱竴涓猚hildren灞炴�э紝骞惰祴鍊� - return father.pid == 1; // 杩斿洖涓�绾ц彍鍗� + branchArr.length > 0 ? (father.children = branchArr) : ''; // 缁欑埗绾ф坊鍔犱竴涓猚hildren灞炴�э紝骞惰祴鍊� + return father.pid == 0; // 杩斿洖涓�绾ц彍鍗� }); }, append(node, data) { @@ -218,31 +268,39 @@ }, resetForm(formName) { this.dialogFormVisible = false; - this.$refs[formName].resetFields(); + this.$nextTick(() => { + this.ruleForm = {}; + this.$refs[formName].resetFields(); + }); }, submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { - this.fullscreenLoading = true; // console.log(this.ruleForm); - // insertDir(this.ruleForm) - // .then((res) => { - // setTimeout(() => { - // this.fullscreenLoading = false; - // if (res.code == 200) { - // this.$message({ - // message: "娣诲姞鎴愬姛", - // type: "success", - // }); - // } - // }, 2000); - // }) - // .catch((res) => { - // console.log(res); - // this.fullscreenLoading = false; - // }); - - // this.validCode = ""; //娓呯┖楠岃瘉鐮佽緭鍏ユ鐨勫唴瀹� + this.fullscreenLoading = true; + insertDep(this.ruleForm) + .then((res) => { + setTimeout(() => { + this.fullscreenLoading = false; + if (res.code == 200) { + this.$message({ + message: '娣诲姞鎴愬姛', + type: 'success', + }); + this.getMenuTree(); + this.itemdetail = {}; + this.ruleForm = {}; + this.dialogFormVisible = false; + this.$refs[formName].resetFields(); + } + }, 500); + }) + .catch((res) => { + this.itemdetail = {}; + this.$message.error('娣诲姞澶辫触'); + this.fullscreenLoading = false; + console.log(res); + }); } else { // alert("鐩綍鍚嶇О涓嶈兘涓虹┖"); return false; @@ -250,15 +308,13 @@ }); }, remove(node, data) { - this.$confirm("姝ゆ搷浣滃皢鍒犻櫎璇ヨ妭鐐�, 鏄惁缁х画?", "鎻愮ず", { - confirmButtonText: "纭畾", - cancelButtonText: "鍙栨秷", - type: "warning", + this.$confirm('姝ゆ搷浣滃皢鍒犻櫎璇ヨ妭鐐�, 鏄惁缁х画?', '鎻愮ず', { + confirmButtonText: '纭畾', + cancelButtonText: '鍙栨秷', + type: 'warning', }) .then(() => { - // console.log(node); - // console.log(data); - + //鍏勫紵閲嶆柊鎺掑簭 const parent = node.parent; const children = parent.data.children || parent.data; children.splice(data.orderNum - 1, 1); @@ -266,18 +322,43 @@ item.orderNum = index + 1; }); - this.traverseArr(data); - console.log(this.deleteIDs); - this.$message({ - type: "success", - message: "鍒犻櫎鎴愬姛!", - }); + this.traverseArr(data); //鑾峰彇鍒犻櫎鐨勫瓙ID + this.delChildIDs.push(data.id); //瑕佸垹闄ょ殑鍏ㄩ儴ID + let delIDs = this.delChildIDs; + Promise.all([ + deleteDep({ ids: delIDs.toString() }), + updateDepTrees(children), + ]) + .then((res) => { + console.log(res); + 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.getMenuTree(); + this.$message.error('鍒犻櫎鎴愬姛锛屼綅缃皟鏁村け璐�'); + } else if (res[1].code == 200) { + this.getMenuTree(); + this.$message.error('鍒犻櫎澶辫触,浣嶇疆璋冩暣鎴愬姛'); + } else { + this.getMenuTree(); + this.$message.error('鍒犻櫎澶辫触'); + } + }) + .catch(() => { + this.$message.error('鍒犻櫎澶辫触'); + this.itemdetail = {}; + }); + + //閲嶇疆瑕佸垹闄ょ殑瀛怚D + this.delChildIDs = []; }) .catch(() => { - this.$message({ - type: "info", - message: "宸插彇娑堝垹闄�", - }); + this.$message('宸插彇娑堝垹闄�'); }); // this.dialogMessage="鏄惁鍒犻櫎" // this.dialogFlag = 1; @@ -298,7 +379,8 @@ if (obj.children) { return obj.children.forEach((item) => { // console.log(item.id + "---" + item.name); - this.deleteIDs += "id=" + item.id + "&"; + // this.delChildID += "id=" + item.id + "&"; + this.delChildIDs.push(item.id); this.traverseArr(item); }); } @@ -318,21 +400,21 @@ this.old_depData = JSON.parse(JSON.stringify(this.depList)); //灏嗗浠界殑dir閲嶆柊璧嬪�� }, handleDrop(draggingNode, dropNode, dropType, ev) { - this.$confirm("姝ゆ搷浣滃皢淇濆瓨鐩綍鏇存敼, 鏄惁缁х画?", "鎻愮ず", { - confirmButtonText: "纭畾", - cancelButtonText: "鍙栨秷", - type: "warning", + 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; + dropNode.level == 1 && dropType != 'inner' ? data : data.children; //鍙樻洿鑺傜偣 // console.log(nodeData); nodeData.forEach((item, i) => { - if (dropType != "inner") { + if (dropType != 'inner') { if (draggingNode.data.pid === dropNode.data.pid) { item.pid = item.pid; } else { @@ -353,11 +435,12 @@ arr.push(e); }); this.newData = arr; + this.sendChange(); }) .catch(() => { this.$message({ - type: "info", - message: "宸插彇娑堟洿鏀�", + type: 'info', + message: '宸插彇娑堟洿鏀�', }); this.depList = this.old_depData; //灏嗗浠界殑dir閲嶆柊璧嬪�� }); @@ -365,16 +448,15 @@ sendChange() { updateDepTrees(this.newData) .then((res) => { - // console.log(res); if (res.code == 200) { - this.$message({ - type: "success", - message: "鏇存柊鎴愬姛!", - }); + this.getMenuTree(); + return; + } else { + alert('璋冩暣澶辫触锛岃閲嶈瘯锛�'); } }) .catch(() => { - alert("淇敼澶辫触锛岃閲嶈瘯锛�"); + alert('淇敼澶辫触锛岃閲嶈瘯锛�'); }); }, handleNodeClick(data) { @@ -382,17 +464,63 @@ this.backUpData = JSON.stringify(data); this.itemdetail = JSON.parse(JSON.stringify(data)); }, - updDep() { - updateDepTree(this.itemdetail).then((res) => { - console.log(res); + updDep(formName) { + this.$nextTick(() => { + this.$refs[formName].validate((valid) => { + if (valid) { + this.fullscreenLoading = true; + updateDepTree(this.itemdetail) + .then((res) => { + setTimeout(() => { + this.fullscreenLoading = false; + if (res.code == 200) { + this.getMenuTree(); + this.itemdetail = {}; + this.dialogFormVisible = false; + } + }, 500); + }) + .catch((res) => { + alert('淇敼澶辫触锛岃閲嶈瘯锛�'); + this.fullscreenLoading = false; + }); + } else { + return false; + } + }); }); }, reset() { - this.itemdetail = JSON.parse(this.backUpData); + this.$refs[formName].resetFields(); + if (this.backUpData != '') { + this.itemdetail = JSON.parse(this.backUpData); + } + }, + showPermsMenu(res) { + switch (res.tag) { + case '/delete': + this.menuStatus.delete = true; + break; + case '/insert': + this.menuStatus.insert = true; + break; + case '/update': + this.menuStatus.update = true; + break; + } }, }, mounted() { - this.getMenuTree(); + this.getDepTree(); + }, + created() { + var val = this.$store.state.currentPerms; + var permsEntity = this.$store.state.permsEntity; + for (var i = 0; i < permsEntity.length; i++) { + if (permsEntity[i].perms == val) { + this.showPermsMenu(permsEntity[i]); + } + } }, }; </script> @@ -418,7 +546,7 @@ left: 250px; top: 23px; } - .menuTreeBox { + .depTreeBox { height: 88%; width: 100%; overflow: auto; @@ -439,7 +567,7 @@ background-color: rgb(153, 153, 153); } .btnBox { - margin-left: 5px; + margin: 0 10px 0 5px; .el-button + .el-button { margin-left: 5px; } @@ -483,5 +611,8 @@ } } } + /deep/ .el-dialog__body { + padding: 0 30px 0 0; + } } </style> -- Gitblit v1.9.3