From 8460d91255f5ff11a6c9a8199c313226b21f815a Mon Sep 17 00:00:00 2001 From: lxl <lixuliang_hd@126.com> Date: 星期四, 13 十月 2022 18:03:57 +0800 Subject: [PATCH] 11 --- src/api/api.js | 47 + src/components/catalogueTree.vue | 3 src/assets/lang/zh.js | 2 src/views/userManage/orgManage.vue | 233 +++++++-- src/components/customElMenu.vue | 2 src/views/datamanage/catalogueManage.vue | 159 ++++-- src/views/userManage/userInfoManage.vue | 441 ++++++++++++++---- src/views/maintenance/menuSettings.vue | 436 ++++++++++++++---- 8 files changed, 989 insertions(+), 334 deletions(-) diff --git a/src/api/api.js b/src/api/api.js index 8506e53..dd0f55e 100644 --- a/src/api/api.js +++ b/src/api/api.js @@ -177,6 +177,15 @@ export function queryMenuTree() { return request.get('/Menu/selectMenuAll'); } + +//鏂板鍗曟潯鑿滃崟 +export function insertMenu(params) { + return request.post('/menu/insertMenu', params); +} +//鍒犻櫎澶氭潯鑿滃崟 +export function deleteMenu(params) { + return request.get('/menu/deleteMenus', { params: params }); +} //鏇存柊鍗曟潯鑿滃崟鏍� export function updateMenuTree(params) { return request.post('/Menu/updateMenu', params); @@ -185,6 +194,8 @@ export function updateMenuTrees(params) { return request.post('/Menu/updateMenus', params); } + + //璇锋眰鐩綍鏍戞暟鎹� export function queryDirTree() { @@ -196,7 +207,7 @@ } //鍒犻櫎澶氭潯鐩綍 export function deleteDir(params) { - return request.get('/dir/deleteDirs?' + params); + return request.get('/dir/deleteDirs', { params: params }); } //鏇存柊鍗曟潯鐩綍鏍� export function updateDirTree(params) { @@ -212,6 +223,14 @@ export function queryDepTree() { return request.get('/dep/selectDepAll'); } +//鏂板鍗曟潯鐩綍 +export function insertDep(params) { + return request.post('/dep/insertDep', params); +} +//鍒犻櫎澶氭潯鐩綍 +export function deleteDep(params) { + return request.get('/dep/deleteDeps', { params: params }); +} //鏇存柊鍗曟潯鍗曚綅鏁版嵁 export function updateDepTree(params) { return request.post('/dep/updateDep', params); @@ -222,11 +241,23 @@ } // 璇锋眰鐢ㄦ埛绠$悊鏁版嵁 -export function queryPageUser(pageIndex, pageSize) { - return request.get( - '/user/selectByPageAndCount?pageIndex=' + - pageIndex + - '&pageSize=' + - pageSize - ); +export function queryPageUser(params) { + return request.get('/user/selectByPageAndCount', { params: params }); } +// 鏂板鐢ㄦ埛绠$悊鏁版嵁 +export function insertUser(params) { + return request.post('/user/insertUser', params); +} +// 鍒犻櫎鐢ㄦ埛绠$悊鏁版嵁 +export function deleteUser(params) { + return request.get('/user/deleteUser', { params: params }); +} + +// 鐢ㄦ埛绠$悊鏁版嵁 +export function updateUser(params) { + return request.post('/user/updateUser', params); +} +// 鐢ㄦ埛绠$悊鏁版嵁 +export function updateUserPwd(params) { + return request.post('/user/updateUserPwd', params); +} \ No newline at end of file diff --git a/src/assets/lang/zh.js b/src/assets/lang/zh.js index b3acd41..c636997 100644 --- a/src/assets/lang/zh.js +++ b/src/assets/lang/zh.js @@ -380,7 +380,6 @@ delete: '鍒犻櫎', apply: '鐢宠', rejection: '鎷掓壒', - depName: '鍗曚綅鍚嶇О', userexport: 'Excel鐢ㄦ埛瀵煎嚭', userinput: 'Excel鐢ㄦ埛瀵煎叆', userStatus: "鐢ㄦ埛鐘舵��", @@ -388,6 +387,7 @@ pwd: "瀵嗙爜", sex: "鎬у埆", natives: "绫嶈疮", + depName: '鍗曚綅鍚嶇О', idcard: "璇佷欢鍙�", job: "宸ヤ綔", edu: "鏁欒偛", diff --git a/src/components/catalogueTree.vue b/src/components/catalogueTree.vue index 756d757..15d3ddb 100644 --- a/src/components/catalogueTree.vue +++ b/src/components/catalogueTree.vue @@ -290,8 +290,7 @@ } .btnBox { - margin-left: 5px; - + margin: 0 10px 0 5px; .el-button + .el-button { margin-left: 5px; } diff --git a/src/components/customElMenu.vue b/src/components/customElMenu.vue index f6f38fb..0b78d2f 100644 --- a/src/components/customElMenu.vue +++ b/src/components/customElMenu.vue @@ -14,7 +14,7 @@ <el-menu-item v-else :key="item.id" - :index="item.url == null ? null : item.url + ''" + :index="item.url == null ? item.id.toString() : item.url + ''" > <span slot="title">{{ $store.state.lang == "zh" ? item.cnName : item.enName diff --git a/src/views/datamanage/catalogueManage.vue b/src/views/datamanage/catalogueManage.vue index cd522bb..628a6bf 100644 --- a/src/views/datamanage/catalogueManage.vue +++ b/src/views/datamanage/catalogueManage.vue @@ -2,9 +2,9 @@ <div class="cataSettings_box"> <div class="cataSettings_tree"> <My-bread :list="['鏁版嵁绠$悊', '鐩綍绠$悊']"></My-bread> - <el-button class="saveBtn" type="primary" size="mini" @click="sendChange" - >淇濆瓨</el-button - > + <!-- <el-button class="saveBtn" type="primary" size="mini" @click="sendChange" --> + <!-- >淇濆瓨</el-button --> + <!-- > --> <el-divider /> <div class="cataTreeBox"> <el-tree @@ -46,11 +46,15 @@ <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.id" disabled /> </el-form-item> --> - <el-form-item label="鐩綍鍚嶇О" :label-width="formLabelWidth"> + <el-form-item + prop="name" + label="鐩綍鍚嶇О" + :label-width="formLabelWidth" + > <el-input v-model="itemdetail.name" /> </el-form-item> <el-form-item label="鐩綍璇存槑" :label-width="formLabelWidth"> @@ -65,8 +69,12 @@ <el-input v-model="itemdetail.bak" type="textarea" resize="none" /> </el-form-item> <div class="btnBox"> - <el-button type="primary" @click="updMenu">淇濆瓨</el-button> - <el-button type="primary" @click="reset">鍙栨秷</el-button> + <el-button type="primary" @click="updCata('itemdetail')" + >淇濆瓨</el-button + > + <el-button type="primary" @click="reset('itemdetail')" + >鍙栨秷</el-button + > </div> </el-form> </div> @@ -82,14 +90,10 @@ > <el-input v-model="ruleForm.name" autocomplete="off"></el-input> </el-form-item> - <el-form-item - prop="descr" - label="鐩綍璇存槑" - :label-width="formLabelWidth" - > + <el-form-item label="鐩綍璇存槑" :label-width="formLabelWidth"> <el-input v-model="ruleForm.descr" autocomplete="off"></el-input> </el-form-item> - <el-form-item prop="bak" label="鐩綍澶囨敞" :label-width="formLabelWidth"> + <el-form-item label="鐩綍澶囨敞" :label-width="formLabelWidth"> <el-input v-model="ruleForm.bak" autocomplete="off"></el-input> </el-form-item> </el-form> @@ -110,6 +114,7 @@ import { queryDirTree, queryMaxId, + updateDirTree, updateDirTrees, insertDir, deleteDir, @@ -122,7 +127,7 @@ }, data() { let validName = (rule, value, callback) => { - if (value === "") { + if (value === "" || value === null || value === undefined) { return callback(new Error("鐩綍鍚嶇О涓嶈兘涓虹┖")); } else { callback(); @@ -139,9 +144,10 @@ old_dirDat: [], //el鏍戞暟鎹�(鎷栧姩鍓�) newData: [], //鎷栧姩鍚庡師濮嬫暟鎹� itemdetail: {}, - backUpData: {}, - formLabelWidth: "170px", - delChildIDs: "", + backUpData: "", + formLabelWidth: "130px", + delChildID: "", + delChildIDs: [], dialogFormVisible: false, ruleForm: { level: null, @@ -152,7 +158,7 @@ bak: "", }, rules: { - name: [{ validator: validName, trigger: "blur" }], + name: [{ required: true, validator: validName, trigger: "blur" }], }, }; }, @@ -191,12 +197,11 @@ this.ruleForm.pid = data.id; this.ruleForm.orderNum = node.childNodes.length + 1; this.ruleForm.level = data.level + 1; - // console.log(data); - // console.log(node); }, resetForm(formName) { this.dialogFormVisible = false; this.$nextTick(() => { + this.ruleForm = {}; this.$refs[formName].resetFields(); }); }, @@ -214,14 +219,18 @@ message: "娣诲姞鎴愬姛", type: "success", }); + this.itemdetail = {}; + this.ruleForm = {}; this.dialogFormVisible = false; this.$refs[formName].resetFields(); } - }, 2000); + }, 500); }) .catch((res) => { - console.log(res); + this.itemdetail = {}; + this.$message.error("娣诲姞澶辫触"); this.fullscreenLoading = false; + console.log(res); }); } else { // alert("鐩綍鍚嶇О涓嶈兘涓虹┖"); @@ -237,9 +246,6 @@ type: "warning", }) .then(() => { - // console.log(node); - // console.log(data); - //鍏勫紵閲嶆柊鎺掑簭 const parent = node.parent; const children = parent.data.children || parent.data; @@ -249,9 +255,12 @@ }); this.traverseArr(data); //鑾峰彇鍒犻櫎鐨勫瓙ID - let delIDs = this.delChildIDs + "id=" + data.id; //瑕佸垹闄ょ殑鍏ㄩ儴ID - console.log(delIDs); - Promise.all([deleteDir(delIDs), updateDirTrees(children)]) + this.delChildIDs.push(data.id); //瑕佸垹闄ょ殑鍏ㄩ儴ID + let delIDs = this.delChildIDs; + Promise.all([ + deleteDir({ ids: delIDs.toString() }), + updateDirTrees(children), + ]) .then((res) => { console.log(res); if (res[0].code == 200 && res[1].code == 200) { @@ -259,23 +268,25 @@ type: "success", message: "鍒犻櫎鎴愬姛!", }); + this.itemdetail = {}; + } else if (res[0].code == 200) { + this.$message.error("鍒犻櫎鎴愬姛锛屼綅缃皟鏁村け璐�"); + } else if (res[1].code == 200) { + this.$message.error("鍒犻櫎澶辫触,浣嶇疆璋冩暣鎴愬姛"); + } else { + this.$message.error("鍒犻櫎澶辫触"); } }) .catch(() => { - this.$message({ - type: "error", - message: "鍒犻櫎澶辫触", - }); + this.$message.error("鍒犻櫎澶辫触"); + this.itemdetail = {}; }); //閲嶇疆瑕佸垹闄ょ殑瀛怚D - this.delChildIDs = ""; + this.delChildIDs = []; }) .catch(() => { - this.$message({ - type: "info", - message: "宸插彇娑堝垹闄�", - }); + this.$message("宸插彇娑堝垹闄�"); }); // this.dialogMessage="鏄惁鍒犻櫎" // this.dialogFlag = 1; @@ -296,7 +307,8 @@ if (obj.children) { return obj.children.forEach((item) => { // console.log(item.id + "---" + item.name); - this.delChildIDs += "id=" + item.id + "&"; + // this.delChildID += "id=" + item.id + "&"; + this.delChildIDs.push(item.id); this.traverseArr(item); }); } @@ -345,46 +357,68 @@ 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.sendChange(); }) .catch(() => { - this.$message({ - type: "info", - message: "宸插彇娑堟洿鏀�", - }); + this.$message("宸插彇娑堟洿鏀�"); this.dirList = this.old_dirDat; //灏嗗浠界殑dir閲嶆柊璧嬪�� }); }, sendChange() { - updateDirTrees(this.newData).then((res) => { - // console.log(res); - if (res.code == 200) { - this.$message({ - type: "success", - message: "鏇存柊鎴愬姛!", - }); - } - }); + updateDirTrees(this.newData) + .then((res) => { + if (res.code == 200) { + alert("璋冩暣瀹屾垚銆傝鍙婃椂鍒锋柊椤甸潰锛�"); + return; + } else { + alert("璋冩暣澶辫触锛岃閲嶈瘯锛�"); + } + }) + .catch(() => { + alert("淇敼澶辫触锛岃閲嶈瘯锛�"); + }); }, handleNodeClick(data) { // console.log(data); this.backUpData = JSON.stringify(data); this.itemdetail = JSON.parse(JSON.stringify(data)); }, - updMenu() { - this.$message({ - message: "淇敼鎴愬姛", - type: "success", + updCata(formName) { + this.$nextTick(() => { + this.$refs[formName].validate((valid) => { + if (valid) { + this.fullscreenLoading = true; + updateDirTree(this.itemdetail) + .then((res) => { + setTimeout(() => { + this.fullscreenLoading = false; + if (res.code == 200) { + alert("淇敼瀹屾垚锛岃鍙婃椂鍒锋柊椤甸潰锛�"); + this.itemdetail = {}; + this.dialogFormVisible = false; + } + }, 500); + }) + .catch((res) => { + alert("淇敼澶辫触锛岃閲嶈瘯锛�"); + this.fullscreenLoading = false; + }); + } else { + return false; + } + }); }); }, - reset() { - this.$message("宸插彇娑�"); + reset(formName) { + this.$refs[formName].resetFields(); + if (this.backUpData != "") { + this.itemdetail = JSON.parse(this.backUpData); + } }, }, mounted() { @@ -435,7 +469,7 @@ background-color: rgb(153, 153, 153); } .btnBox { - margin-left: 5px; + margin: 0 10px 0 5px; .el-button + .el-button { margin-left: 5px; } @@ -479,5 +513,8 @@ } } } + /deep/ .el-dialog__body { + padding: 0 30px 0 0; + } } </style> diff --git a/src/views/maintenance/menuSettings.vue b/src/views/maintenance/menuSettings.vue index 7f9b71b..0aea3ee 100644 --- a/src/views/maintenance/menuSettings.vue +++ b/src/views/maintenance/menuSettings.vue @@ -2,9 +2,9 @@ <div class="menuSettings_box"> <div class="menuSettings_tree"> <My-bread :list="['杩愮淮绠$悊', '鑿滃崟璁剧疆']"></My-bread> - <el-button class="saveBtn" type="primary" size="mini" @click="sendChange" + <!-- <el-button class="saveBtn" type="primary" size="mini" @click="sendChange" >淇濆瓨</el-button - > + > --> <el-divider /> <div class="menuTreeBox"> <el-tree @@ -21,6 +21,22 @@ > <span class="custom-tree-node" slot-scope="{ node, data }"> <span>{{ node.label }}</span> + <span class="btnBox"> + <el-button + type="text" + size="mini" + @click="() => append(node, data)" + > + <i class="el-icon-circle-plus"></i> + </el-button> + <el-button + type="text" + size="mini" + @click="() => remove(node, data)" + > + <i class="el-icon-delete-solid"></i> + </el-button> + </span> </span> </el-tree> </div> @@ -30,38 +46,139 @@ <h4>璇︾粏淇℃伅</h4> </div> <div class="form_box"> - <el-form :model="itemdetail"> - <el-form-item label="鑻辨枃鍚嶇О" :label-width="formLabelWidth"> + <el-form :model="itemdetail" ref="itemdetail" :rules="rules"> + <el-form-item + prop="enName" + label="鑻辨枃鍚嶇О" + :label-width="formLabelWidth" + > <el-input v-model="itemdetail.enName" autocomplete="off"></el-input> </el-form-item> - <el-form-item label="涓枃鍚嶇О" :label-width="formLabelWidth"> + <el-form-item + prop="cnName" + label="涓枃鍚嶇О" + :label-width="formLabelWidth" + > <el-input v-model="itemdetail.cnName" autocomplete="off"></el-input> </el-form-item> <el-form-item label="鍥炬爣" :label-width="formLabelWidth"> <el-input v-model="itemdetail.icon" autocomplete="off"></el-input> </el-form-item> - <el-form-item label="鏄惁鏄剧ず" :label-width="formLabelWidth"> - <el-input v-model="itemdetail.isShow" autocomplete="off"></el-input> + <el-form-item + prop="isShow" + label="鏄惁鏄剧ず" + :label-width="formLabelWidth" + > + <el-select v-model="itemdetail.isShow" placeholder=""> + <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="鑿滃崟Url" :label-width="formLabelWidth"> + <el-form-item + prop="url" + label="鑿滃崟Url" + :label-width="formLabelWidth" + > <el-input v-model="itemdetail.url" autocomplete="off"></el-input> </el-form-item> <el-form-item label="鎺堟潈" :label-width="formLabelWidth"> <el-input v-model="itemdetail.perms" autocomplete="off"></el-input> </el-form-item> - <el-form-item label="绫诲瀷" :label-width="formLabelWidth"> - <el-input v-model="itemdetail.type" autocomplete="off"></el-input> + <el-form-item label="绫诲瀷" prop="type" :label-width="formLabelWidth"> + <el-select v-model="itemdetail.type" placeholder="璇烽�夋嫨绫诲瀷"> + <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="澶囨敞" :label-width="formLabelWidth"> <el-input v-model="itemdetail.bak" autocomplete="off"></el-input> </el-form-item> <div class="btnBox"> - <el-button type="primary" @click="updMenu">淇濆瓨</el-button> - <el-button type="primary" @click="reset">鍙栨秷</el-button> + <el-button type="primary" @click="updMenu('itemdetail')" + >淇濆瓨</el-button + > + <el-button type="primary" @click="reset('itemdetail')" + >鍙栨秷</el-button + > </div> </el-form> </div> </div> + <el-dialog title="鏂板瀛愯彍鍗�" :visible.sync="dialogFormVisible"> + <el-form :model="ruleForm" ref="ruleForm" :rules="rules"> + <el-form-item + prop="enName" + label="鑻辨枃鍚嶇О" + :label-width="formLabelWidth" + > + <el-input v-model="ruleForm.enName" autocomplete="off"></el-input> + </el-form-item> + <el-form-item + prop="cnName" + label="涓枃鍚嶇О" + :label-width="formLabelWidth" + > + <el-input v-model="ruleForm.cnName" autocomplete="off"></el-input> + </el-form-item> + <el-form-item label="鍥炬爣" :label-width="formLabelWidth"> + <el-input v-model="ruleForm.icon" autocomplete="off"></el-input> + </el-form-item> + <el-form-item + prop="isShow" + label="鏄惁鏄剧ず" + :label-width="formLabelWidth" + > + <el-select v-model="ruleForm.isShow" placeholder=""> + <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 prop="url" label="鑿滃崟Url" :label-width="formLabelWidth"> + <el-input v-model="ruleForm.url" autocomplete="off"></el-input> + </el-form-item> + <el-form-item label="鎺堟潈" :label-width="formLabelWidth"> + <el-input v-model="ruleForm.perms" autocomplete="off"></el-input> + </el-form-item> + <el-form-item label="绫诲瀷" prop="type" :label-width="formLabelWidth"> + <el-select v-model="ruleForm.type" placeholder="璇烽�夋嫨绫诲瀷"> + <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="澶囨敞" :label-width="formLabelWidth"> + <el-input v-model="ruleForm.bak" autocomplete="off"></el-input> + </el-form-item> + </el-form> + <div slot="footer" class="dialog-footer"> + <el-button @click="resetForm('ruleForm')">鍙栨秷</el-button> + <el-button + type="primary" + @click="submitForm('ruleForm')" + v-loading.fullscreen.lock="fullscreenLoading" + >鎻愪氦</el-button + > + </div> + </el-dialog> </div> </template> @@ -72,19 +189,21 @@ updateMenuTree, updateMenuTrees, queryMaxId, + insertMenu, + deleteMenu, } from "../../api/api"; export default { //import寮曞叆鐨勭粍浠堕渶瑕佹敞鍏ュ埌瀵硅薄涓墠鑳戒娇鐢� components: { MyBread, }, - data() { return { defaultProps: { children: "children", label: "cnName", }, + fullscreenLoading: false, oriData: [], //鍘熷鏍戞暟鎹� menuList: [], //el鏍戞暟鎹� old_dirDat: [], //el鏍戞暟鎹�(鎷栧姩鍓�) @@ -99,8 +218,75 @@ type: null, bak: "", }, - backUpData: {}, - formLabelWidth: "170px", + backUpData: "", + formLabelWidth: "130px", + delChildID: "", + delChildIDs: [], + dialogFormVisible: false, + ruleForm: { + level: null, + orderNum: null, + pid: null, + enName: "", + cnName: "", + icon: "", + isShow: null, + url: "", + perms: null, + type: null, + bak: "", + }, + rules: { + enName: [ + { required: true, message: "璇疯緭鍏ヨ嫳鏂囧悕绉�", trigger: "blur" }, + ], + cnName: [ + { required: true, message: "璇疯緭鍏ヤ腑鏂囧悕绉�", trigger: "blur" }, + ], + url: [ + { required: true, message: "璇疯緭鍏ヨ彍鍗曡烦杞殑鍦板潃", trigger: "blur" }, + ], + isShow: [ + { + required: true, + message: "璇烽�夋嫨鏄惁鏄剧ず", + trigger: "change", + }, + ], + type: [ + { + required: true, + message: "璇烽�夋嫨鑺傜偣绫诲瀷", + trigger: "change", + }, + ], + }, + // 涓嬫媺鐨刼ption閲岄潰鐨剉alue瀹氫箟鎴�0,1锛屼笉鑳藉畾涔夋垚鈥�0鈥�,'1鈥欏瓧绗︿覆锛� + // 濡傛灉瑕佸畾涔夋垚瀛楃涓诧紝鍚庡彴闇�瑕佽繑鍥炵殑涔熸槸瀛楃涓� + options1: [ + { + value: 0, + label: "闅愯棌", + }, + { + value: 1, + label: "鏄剧ず", + }, + ], + options2: [ + { + value: 0, + label: "鏍圭洰褰�", + }, + { + value: 1, + label: "鑿滃崟", + }, + { + value: 2, + label: "鎸夐挳", + }, + ], }; }, methods: { @@ -125,38 +311,55 @@ // 寰幆鎵�鏈夐」 let branchArr = cloneData.filter((child) => father.id == child.pid); // 瀵规瘮ID锛屽垎鍒笂涓嬬骇鑿滃崟锛屽苟杩斿洖鏁版嵁 branchArr.length > 0 ? (father.children = branchArr) : ""; // 缁欑埗绾ф坊鍔犱竴涓猚hildren灞炴�э紝骞惰祴鍊� - return father.pid == 1; // 杩斿洖涓�绾ц彍鍗� + return father.pid == 0; // 杩斿洖涓�绾ц彍鍗� }); }, - append(data) { - this.$prompt("璇疯緭鍏ュ悕绉�", "鎻愮ず", { - confirmButtonText: "纭畾", - cancelButtonText: "鍙栨秷", - }) - .then(({ value }) => { - const newChild = { - id: this.id + 1, - name: value, - pid: data.id, - // children: [], - orderNum: data.children ? data.children.length + 1 : 1, - }; - this.id = newChild.id; //淇敼鏂扮殑鏈�澶 - console.log(newChild); - - if (!data.children) { - this.$set(data, "children", []); + 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) { + this.dialogFormVisible = false; + this.$nextTick(() => { + this.$refs[formName].resetFields(); + this.ruleForm = {}; + }); + }, + submitForm(formName) { + this.$nextTick(() => { + this.$refs[formName].validate((valid) => { + if (valid) { + this.fullscreenLoading = true; + insertMenu(this.ruleForm) + .then((res) => { + setTimeout(() => { + this.fullscreenLoading = false; + if (res.code == 200) { + this.$message({ + message: "娣诲姞鎴愬姛", + type: "success", + }); + 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; } - data.children.push(newChild); - this.newData.push(newChild); - // this.sendChange(); - }) - .catch(() => { - this.$message({ - type: "info", - message: "鍙栨秷杈撳叆", - }); }); + }); }, remove(node, data) { this.$confirm("姝ゆ搷浣滃皢鍒犻櫎璇ヨ妭鐐�, 鏄惁缁х画?", "鎻愮ず", { @@ -165,41 +368,61 @@ type: "warning", }) .then(() => { + //鍏勫紵閲嶆柊鎺掑簭 const parent = node.parent; const children = parent.data.children || parent.data; - const index = children.findIndex((d) => d.id === data.id); - let res = children.splice(index, 1); - var std = []; - for (var i in res) { - std.push(res[i].id); - } - // deleteDirTree(std); - this.getDirTree(); - this.$message({ - type: "success", - message: "鍒犻櫎鎴愬姛!", + 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; + Promise.all([ + deleteMenu({ ids: delIDs.toString() }), + updateMenuTrees(children), + ]) + .then((res) => { + console.log(res); + if (res[0].code == 200 && res[1].code == 200) { + this.$message({ + type: "success", + message: "鍒犻櫎鎴愬姛!", + }); + this.itemdetail = {}; + } else if (res[0].code == 200) { + this.$message.error("鍒犻櫎鎴愬姛锛屼綅缃皟鏁村け璐�"); + } else if (res[1].code == 200) { + this.$message.error("鍒犻櫎澶辫触,浣嶇疆璋冩暣鎴愬姛"); + } else { + this.$message.error("鍒犻櫎澶辫触"); + } + }) + .catch(() => { + this.$message({ + type: "error", + message: "鍒犻櫎澶辫触", + }); + }); + + //閲嶇疆瑕佸垹闄ょ殑瀛怚D + this.delChildIDs = []; }) .catch(() => { - this.$message({ - type: "info", - message: "宸插彇娑堝垹闄�", - }); + this.$message("宸插彇娑堝垹闄�"); }); - // this.dialogMessage="鏄惁鍒犻櫎" - // this.dialogFlag = 1; - // this.dialogFrom ={ - // node:node, - // val:data - // } - // this.dialogVisible=true;//鐩綍鏍戞洿鏀瑰脊绐� - // const parent = node.parent; - // const children = parent.data.children || parent.data; - // const index = children.findIndex((d) => d.id === data.id); - // let res = children.splice(index, 1); - // // console.log(res); - // // console.log(data); - // console.log(this.flaten(res)); + }, + traverseArr(obj) { + if (obj.children) { + return obj.children.forEach((item) => { + // console.log(item.id + "---" + item.name); + // this.delChildID += "id=" + item.id + "&"; + this.delChildIDs.push(item.id); + this.traverseArr(item); + }); + } + return; }, flaten(arr) { return arr.reduce((p, v, i) => { @@ -215,7 +438,7 @@ this.old_dirDat = JSON.parse(JSON.stringify(this.menuList)); //灏嗗浠界殑dir閲嶆柊璧嬪�� }, handleDrop(draggingNode, dropNode, dropType, ev) { - this.$confirm("鏄惁璋冩暣鑷宠浣嶇疆?", "鎻愮ず", { + this.$confirm("姝ゆ搷浣滃皢淇濆瓨鐩綍鏇存敼, 鏄惁缁х画?", "鎻愮ず", { confirmButtonText: "纭畾", cancelButtonText: "鍙栨秷", type: "warning", @@ -240,7 +463,7 @@ } item.orderNum = i + 1; }); - console.log(nodeData); + // console.log(nodeData); //鏇存柊鍘熷鏁翠綋鏁版嵁 let arr = []; this.oriData.forEach((e) => { @@ -250,6 +473,7 @@ arr.push(e); }); this.newData = arr; + this.sendChange(); }) .catch(() => { this.$message({ @@ -260,33 +484,61 @@ }); }, sendChange() { - updateMenuTrees(this.newData).then((res) => { - if (res.code == 200) { - alert("鏇存敼瀹屾垚銆傝鍙婃椂鍒锋柊椤甸潰锛�"); - return; - } else { - alert("淇敼澶辫触锛岃閲嶈瘯锛�"); + this.newData.forEach((item) => { + if (item.pid == 0) { + item.type = 0; } }); + updateMenuTrees(this.newData) + .then((res) => { + if (res.code == 200) { + alert("璋冩暣瀹屾垚銆傝鍙婃椂鍒锋柊椤甸潰锛�"); + return; + } else { + alert("璋冩暣澶辫触锛岃閲嶈瘯锛�"); + } + }) + .catch(() => { + alert("淇敼澶辫触锛岃閲嶈瘯锛�"); + }); }, handleNodeClick(data) { // console.log(data); this.backUpData = JSON.stringify(data); this.itemdetail = JSON.parse(JSON.stringify(data)); }, - updMenu() { - updateMenuTree(this.itemdetail).then((res) => { - // console.log(res); - if (res.code == 200) { - alert("淇敼瀹屾垚锛岃鍙婃椂鍒锋柊椤甸潰锛�"); - return; - } else { - alert("淇敼澶辫触锛岃閲嶈瘯锛�"); - } + updMenu(formName) { + this.$nextTick(() => { + this.$refs[formName].validate((valid) => { + if (valid) { + this.fullscreenLoading = true; + updateMenuTree(this.itemdetail) + .then((res) => { + setTimeout(() => { + this.fullscreenLoading = false; + if (res.code == 200) { + alert("淇敼瀹屾垚锛岃鍙婃椂鍒锋柊椤甸潰锛�"); + this.itemdetail = {}; + this.dialogFormVisible = false; + this.$refs[formName].resetFields(); + } + }, 500); + }) + .catch((res) => { + alert("淇敼澶辫触锛岃閲嶈瘯锛�"); + this.fullscreenLoading = false; + }); + } else { + return false; + } + }); }); }, - reset() { - this.itemdetail = JSON.parse(this.backUpData); + reset(formName) { + this.$refs[formName].resetFields(); + if (this.backUpData != "") { + this.itemdetail = JSON.parse(this.backUpData); + } }, }, mounted() { @@ -340,7 +592,7 @@ background-color: rgb(153, 153, 153); } .btnBox { - margin-left: 5px; + margin: 0 10px 0 5px; .el-button + .el-button { margin-left: 5px; } diff --git a/src/views/userManage/orgManage.vue b/src/views/userManage/orgManage.vue index 912620e..83cde31 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" @@ -46,7 +46,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> @@ -87,25 +87,54 @@ <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> + <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> @@ -129,6 +158,8 @@ updateDepTree, updateDepTrees, queryMaxId, + insertDep, + deleteDep, } from "../../api/api"; export default { //import寮曞叆鐨勭粍浠堕渶瑕佹敞鍏ュ埌瀵硅薄涓墠鑳戒娇鐢� @@ -137,8 +168,8 @@ }, data() { let validName = (rule, value, callback) => { - if (value === "") { - return callback(new Error("鐩綍鍚嶇О涓嶈兘涓虹┖")); + if (value === "" || value === null || value === undefined) { + return callback(new Error("鍚嶇О涓嶈兘涓虹┖")); } else { callback(); } @@ -166,20 +197,29 @@ uncode: "", website: "", }, - backUpData: {}, - formLabelWidth: "170px", - deleteIDs: "", + backUpData: "", + formLabelWidth: "130px", + delChildID: "", + delChildIDs: [], dialogFormVisible: false, ruleForm: { level: null, orderNum: null, pid: null, - name: "", - descr: "", + addr: "", bak: "", + code: "", + contact: "", + email: "", + fax: "", + name: "", + post: "", + sname: "", + uncode: "", + website: "", }, rules: { - name: [{ validator: validName, trigger: "blur" }], + name: [{ required: true, validator: validName, trigger: "blur" }], }, }; }, @@ -195,7 +235,10 @@ this.newData = res.result; this.depList = this.treeData(res.result); } else { - console.log("鎺ュ彛鎶ラ敊"); + this.$notify.error({ + title: res.code, + message: "鏃犳硶鑾峰彇鍗曚綅鍒楄〃", + }); } }); }, @@ -205,7 +248,7 @@ // 寰幆鎵�鏈夐」 let branchArr = cloneData.filter((child) => father.id == child.pid); // 瀵规瘮ID锛屽垎鍒笂涓嬬骇鑿滃崟锛屽苟杩斿洖鏁版嵁 branchArr.length > 0 ? (father.children = branchArr) : ""; // 缁欑埗绾ф坊鍔犱竴涓猚hildren灞炴�э紝骞惰祴鍊� - return father.pid == 1; // 杩斿洖涓�绾ц彍鍗� + return father.pid == 0; // 杩斿洖涓�绾ц彍鍗� }); }, append(node, data) { @@ -218,31 +261,38 @@ }, 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.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; @@ -256,9 +306,7 @@ 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 +314,39 @@ 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.itemdetail = {}; + } else if (res[0].code == 200) { + this.$message.error("鍒犻櫎鎴愬姛锛屼綅缃皟鏁村け璐�"); + } else if (res[1].code == 200) { + this.$message.error("鍒犻櫎澶辫触,浣嶇疆璋冩暣鎴愬姛"); + } else { + 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 +367,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); }); } @@ -353,6 +423,7 @@ arr.push(e); }); this.newData = arr; + this.sendChange(); }) .catch(() => { this.$message({ @@ -365,12 +436,11 @@ sendChange() { updateDepTrees(this.newData) .then((res) => { - // console.log(res); if (res.code == 200) { - this.$message({ - type: "success", - message: "鏇存柊鎴愬姛!", - }); + alert("璋冩暣瀹屾垚銆傝鍙婃椂鍒锋柊椤甸潰锛�"); + return; + } else { + alert("璋冩暣澶辫触锛岃閲嶈瘯锛�"); } }) .catch(() => { @@ -382,13 +452,37 @@ 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) { + alert("淇敼瀹屾垚锛岃鍙婃椂鍒锋柊椤甸潰锛�"); + 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); + } }, }, mounted() { @@ -418,7 +512,7 @@ left: 250px; top: 23px; } - .menuTreeBox { + .depTreeBox { height: 88%; width: 100%; overflow: auto; @@ -439,7 +533,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 +577,8 @@ } } } + /deep/ .el-dialog__body { + padding: 0 30px 0 0; + } } </style> diff --git a/src/views/userManage/userInfoManage.vue b/src/views/userManage/userInfoManage.vue index 3d3de5d..4ba9546 100644 --- a/src/views/userManage/userInfoManage.vue +++ b/src/views/userManage/userInfoManage.vue @@ -1,5 +1,5 @@ <template> - <div class="logLog_box"> + <div class="userInfo_box"> <My-bread :list="[ `${$t('userManage.userManage')}`, @@ -15,37 +15,6 @@ :placeholder="$t('operatManage.ELM.usernameInfo')" /> </el-form-item> - <!-- <el-form-item - :label="$t('userManage.userInfoObj.userStatus')" - prop="userStatus" - > - <el-select - v-model="form.userStatus" - :placeholder="$t('userManage.userInfoObj.userStatus')" - > - <el-option :label="$t('userManage.userInfoObj.all')" value="all" /> - <el-option - :label="$t('userManage.userInfoObj.normal')" - value="normal" - /> - <el-option - :label="$t('userManage.userInfoObj.disable')" - value="disable" - /> - <el-option - :label="$t('userManage.userInfoObj.delete')" - value="delete" - /> - <el-option - :label="$t('userManage.userInfoObj.apply')" - value="apply" - /> - <el-option - :label="$t('userManage.userInfoObj.rejection')" - value="rejection" - /> - </el-select> - </el-form-item> --> <el-form-item :label="$t('userManage.userInfoObj.depName')" prop="depName" @@ -53,7 +22,20 @@ <el-input v-model="form.depName" :placeholder="$t('common.pleaseInput')" - /> + /> </el-form-item + ><el-form-item> + <el-button @click="onSubmit" + ><i class="el-icon-search"></i> {{ + $t("operatManage.ELM.search") + }}</el-button + > + </el-form-item> + <el-form-item> + <el-button @click="resetForm('ruleForm')" + ><i class="el-icon-delete"></i> {{ + $t("operatManage.ELM.reset") + }}</el-button + > </el-form-item> <br /> <el-form-item> @@ -63,17 +45,10 @@ }}</el-button > </el-form-item> - <el-form-item style="margin-left: 60%"> - <el-button @click="onSubmit" size="mini" - ><i class="el-icon-search"></i> {{ - $t("operatManage.ELM.search") - }}</el-button - > - </el-form-item> <el-form-item> - <el-button @click="resetForm('ruleForm')" size="mini" + <el-button type="danger" size="small" @click="showAddDialog" ><i class="el-icon-delete"></i> {{ - $t("operatManage.ELM.reset") + $t("common.delete") }}</el-button > </el-form-item> @@ -85,29 +60,27 @@ stripe border style="width: 100%" - max-height="99%" + height="99%" > <el-table-column align="center" type="index" :label="$t('common.index')" + width="70px" fixed /> <el-table-column align="center" prop="uname" + width="150px" :label="$t('userManage.userInfoObj.uname')" fixed - /> - <el-table-column - align="center" - prop="pwd" - :label="$t('userManage.userInfoObj.pwd')" /> <el-table-column align="center" prop="sex" + width="80px" :label="$t('userManage.userInfoObj.sex')" > <template slot-scope="scope"> @@ -119,40 +92,48 @@ <el-table-column align="center" prop="natives" + width="100px" :label="$t('userManage.userInfoObj.natives')" /> <el-table-column align="center" prop="depName" + width="200px" :label="$t('userManage.userInfoObj.depName')" /> <el-table-column align="center" prop="idcard" + width="200px" :label="$t('userManage.userInfoObj.idcard')" /><el-table-column align="center" prop="job" + width="200px" :label="$t('userManage.userInfoObj.job')" /> <el-table-column align="center" prop="edu" + width="200px" :label="$t('userManage.userInfoObj.edu')" /> <el-table-column align="center" prop="addr" + width="200px" :label="$t('userManage.userInfoObj.addr')" /> <el-table-column align="center" prop="email" + width="200px" :label="$t('userManage.userInfoObj.email')" /> <el-table-column align="center" prop="contact" + width="200px" :label="$t('userManage.userInfoObj.contact')" /> @@ -172,22 +153,30 @@ <el-table-column align="center" prop="bak" + width="200px" :label="$t('userManage.userInfoObj.bak')" /> - <el-table-column :label="$t('common.operate')" fixed="right"> - <template #default> + <el-table-column + :label="$t('common.operate')" + width="200px" + fixed="right" + > + <template slot-scope="scope"> <!-- <el-button type="primary" size="small">淇敼</el-button> --> - <el-button type="warning" size="mini">{{ - $t("common.edit") - }}</el-button> - <el-button type="danger" size="mini">{{ - $t("common.delete") - }}</el-button> + <el-button + type="warning" + @click="editInfo(scope.row)" + size="mini" + >{{ $t("common.edit") }}</el-button + > + <el-button type="danger" @click="editPwd(scope.row)" size="mini"> + 閲嶇疆瀵嗙爜 + </el-button> </template> </el-table-column> </el-table> - <div style="margin-top: 40px" class="pagination_box"> + <div style="margin-top: 25px" class="pagination_box"> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" @@ -195,17 +184,133 @@ :page-sizes="[10, 20, 30, 40]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" - :total="1" + :total="count" > </el-pagination> </div> </div> + <el-dialog + width="500px" + top="7vh" + title="淇敼淇℃伅" + :visible.sync="dialogFormVisible" + :before-close="handleClose" + > + <el-form :model="ruleForm" ref="ruleForm" :rules="rules"> + <el-form-item prop="name" label="鐢ㄦ埛鍚�" :label-width="formLabelWidth"> + <el-input v-model="ruleForm.uname" autocomplete="off"></el-input> + </el-form-item> + <el-form-item label="鎬у埆" :label-width="formLabelWidth"> + <!-- <el-input v-model="ruleForm.sex" autocomplete="off"></el-input> --> + <el-select v-model="ruleForm.sex" clearable placeholder="璇烽�夋嫨"> + <el-option + v-for="item in sexOpt" + :key="item.value" + :label="item.label" + :value="item.value" + > + </el-option> + </el-select> + </el-form-item> + <el-form-item label="绫嶈疮" :label-width="formLabelWidth"> + <el-input v-model="ruleForm.natives" autocomplete="off"></el-input> + </el-form-item> + <el-form-item label="鍗曚綅鍚嶇О" :label-width="formLabelWidth"> + <el-input + v-model="ruleForm.depName" + disabled + autocomplete="off" + ></el-input> + + <el-button type="primary" size="mini" @click="showDep" + >閫夋嫨</el-button + > + <el-card v-if="showDepTree" shadow="hover" class="box-card"> + <div slot="header" class="clearfix"> + <span>璇烽�夋嫨閮ㄩ棬</span> + <el-button + style="float: right; padding: 3px 0" + type="text" + @click="sendNode" + >纭畾</el-button + > + </div> + <div class="depTreeBox"> + <el-tree + ref="tree" + :props="defaultProps" + node-key="id" + :data="depList" + :expand-on-click-node="false" + :default-expand-all="true" + @node-click="handleNodeClick" + > + <span class="custom-tree-node" slot-scope="{ node, data }"> + <span>{{ node.label }}</span> + </span> + </el-tree> + </div> + </el-card> + </el-form-item> + <el-form-item label="璇佷欢鍙�" :label-width="formLabelWidth"> + <el-input v-model="ruleForm.idcard" autocomplete="off"></el-input> + </el-form-item> + <el-form-item label="宸ヤ綔" :label-width="formLabelWidth"> + <el-input v-model="ruleForm.job" autocomplete="off"></el-input> + </el-form-item> + <el-form-item label="鏁欒偛" :label-width="formLabelWidth"> + <el-input v-model="ruleForm.edu" 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.email" 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-select v-model="ruleForm.status" clearable placeholder="璇烽�夋嫨"> + <el-option + v-for="item in statusOpt" + :key="item.value" + :label="item.label" + :value="item.value" + > + </el-option> + </el-select> + </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> + <div slot="footer" class="dialog-footer"> + <el-button size="medium" @click="cancelEdit('ruleForm')" + >鍙栨秷</el-button + > + <el-button + size="medium" + type="primary" + @click="sendEdit('ruleForm')" + v-loading.fullscreen.lock="fullscreenLoading" + >鎻愪氦</el-button + > + </div> + </el-dialog> </div> </template> <script> import MyBread from "../../components/MyBread.vue"; -import { queryPageUser } from "../../api/api"; +import { + queryDepTree, + queryPageUser, + insertUser, + deleteUser, + updateUser, + updateUserPwd, +} from "../../api/api"; export default { //import寮曞叆鐨勭粍浠堕渶瑕佹敞鍏ュ埌瀵硅薄涓墠鑳戒娇鐢� components: { @@ -213,32 +318,86 @@ }, 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 { currentPage: 1, + defaultProps: { + children: "children", + label: "name", + }, form: { username: "", - userStatus: "all", - requestIp: "", + // userStatus: "all", + depName: "", }, + showDepTree: true, tableData: [], fullscreenLoading: false, - itemdetail: {}, - formLabelWidth: "170px", + newDep: { + name: "", + id: null, + }, + count: 0, + formLabelWidth: "100px", dialogFormVisible: false, ruleForm: { - level: null, - orderNum: null, - pid: null, - name: "", - descr: "", + uname: "", + pwd: "", + sex: "", + natives: "", + depName: "", + idcard: "", + job: "", + edu: "", + addr: "", + email: "", + contact: "", + status: "", bak: "", + depid: null, }, + statusOpt: [ + { + value: 0, + label: "姝e父", + }, + { + value: 1, + label: "绂佺敤", + }, + { + value: 2, + label: "鍒犻櫎", + }, + { + value: 3, + label: "鐢宠", + }, + { + value: 4, + label: "鎷掓壒", + }, + ], + depList: [], + sexOpt: [ + { + value: 0, + label: "濂�", + }, + { + value: 1, + label: "鐢�", + }, + { + value: -1, + label: "鏈煡", + }, + ], rules: { name: [{ validator: validName, trigger: "blur" }], }, @@ -249,33 +408,44 @@ // queryMaxId().then((res) => { // this.id = res.data; // }); + queryDepTree().then((res) => { + if (res.code == 200) { + this.depList = this.treeData(res.result); + } else { + this.$notify.error({ + title: res.code, + message: "鏃犳硶鑾峰彇鍗曚綅鍒楄〃", + }); + } + }); queryPageUser({ pageIndex: 1, pageSize: 10, }).then((res) => { if (res.code == 200) { this.tableData = res.result; + this.count = res.count; } else { console.log("鎺ュ彛鎶ラ敊"); } }); }, - // getUserInfo() { - // //鑾峰彇鐩綍鏍戞渶澶D锛屾柊寤鸿妭鐐逛娇鐢� - // // queryMaxId().then((res) => { - // // this.id = res.data; - // // }); - // queryDepTree().then((res) => { - // if (res.status == 200) { - // this.depList = this.treeData(res.data.result); - // this.oriData = res.data.result; - // this.newData = res.data.result; - // } else { - // console.log("鎺ュ彛鎶ラ敊"); - // } - // }); - // }, - + 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; // 杩斿洖涓�绾ц彍鍗� + }); + }, + showDep() { + this.showDepTree = true; + }, + handleNodeClick(data) { + this.newDep.name = data.name; + this.newDep.id = data.id; + }, handleSizeChange(val) { console.log(`姣忛〉 ${val} 鏉); }, @@ -287,6 +457,30 @@ }, resetForm(formName) { this.$refs[formName].resetFields(); + }, + editInfo(row) { + delete row.updateTime; + delete row.updateUser; + this.ruleForm = row; + this.dialogFormVisible = true; + }, + editPwd(row) { + console.log(row.id + "---" + row.pwd); + }, + sendNode() { + this.showDepTree = false; + this.ruleForm.depName = this.newDep.name; + this.ruleForm.depid = this.newDep.id; + }, + handleClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + done(); + }) + .catch((_) => {}); + }, + sendEdit(){ + }, showAddDialog() { this.dialogTableVisible = true; @@ -304,7 +498,7 @@ </style> <style lang="less" scoped> //@import url(); 寮曞叆鍏叡css绫� -.logLog_box { +.userInfo_box { background: rgb(240, 242, 245); border-radius: 10px; height: 100%; @@ -327,26 +521,71 @@ } } .table_box { - height: 65%; + height: 70%; padding: 10px; background: #fff; border-radius: 5px; border: 1px solid rgb(202, 201, 204); } - .text-center { - text-align: center; + .el-dialog { + .el-form-item { + margin-bottom: 12px; + width: 100%; + } + .box-card { + position: absolute; + z-index: 100; + top: -243px; + left: 450px; + height: 800px; + width: 350px; + /deep/ .el-card__body { + height: 85%; + overflow: auto; + } + + // background-color: #bfa; + } + .depTreeBox { + overflow: hidden; + + .el-tree { + background: transparent; + font-size: 15px; + font-family: Microsoft YaHei; + font-weight: 400; + color: #000000; + /deep/ .el-tree-node { + padding-top: 10px; + // padding-bottom: 10px; + } + /deep/ .el-tree-node:focus > .el-tree-node__content { + background-color: #b9b9b9; + } + /deep/ .el-tree-node__content:hover { + background-color: rgb(153, 153, 153); + } + .btnBox { + margin: 0 10px 0 5px; + .el-button + .el-button { + margin-left: 5px; + } + } + } + } } - .select { - width: 300px; + /deep/ .el-dialog__body { + padding: 30px 0 0 0; } } -/deep/ .el-card__header { - padding: 10px 10px !important; -} -/deep/ .el-dialog { - margin-top: 2vh !important; -} -/deep/ .el-dialog__wrapper { - overflow: hidden !important; -} + +// /deep/ .el-card__header { +// padding: 10px 10px !important; +// } +// /deep/ .el-dialog { +// margin-top: 2vh !important; +// } +// /deep/ .el-dialog__wrapper { +// overflow: hidden !important; +// } </style> -- Gitblit v1.9.3