From 1494c7949d90e1e8407b71606947dc8d9cb60778 Mon Sep 17 00:00:00 2001 From: lxl <lixuliang_hd@126.com> Date: 星期三, 12 十月 2022 10:58:38 +0800 Subject: [PATCH] 1 --- src/store/index.js | 14 src/router/index.js | 1 src/views/maintenance/databaseMonitoring.vue | 25 src/api/api.js | 51 src/components/catalogueTree.vue | 115 - src/assets/lang/zh.js | 18 src/views/userManage/orgManage.vue | 1081 +++++++------------ src/components/customElMenu.vue | 45 src/views/datamanage/catalogueManage.vue | 525 +++++++- src/assets/lang/en.js | 17 src/views/userManage/userInfoManage.vue | 604 ++-------- src/views/maintenance/menuSettings.vue | 514 +++++--- src/components/navMenu.vue | 278 +--- 13 files changed, 1,543 insertions(+), 1,745 deletions(-) diff --git a/src/api/api.js b/src/api/api.js index 374c747..bf869b5 100644 --- a/src/api/api.js +++ b/src/api/api.js @@ -159,18 +159,7 @@ return request.get('/sign/logout', { params: params }); } -//璇锋眰鐩綍鏍戞暟鎹� -export function queryDirTree() { - return service.get('/dir/selectDirAll'); -} -//鏇存柊鍗曟潯鐩綍鏍� -export function updateDirTree(params) { - return service.post('/dir/updateDir', params); -} -//鏇存柊鏁翠綋鐩綍鏍� -export function updateDirTrees(params) { - return service.post('/dir/updateDirs', params); -} + //璇锋眰鑿滃崟鏍忔暟鎹� export function queryMenuTree() { return request.get('/Menu/selectMenuAll'); @@ -183,25 +172,43 @@ export function updateMenuTrees(params) { return request.post('/Menu/updateMenus', params); } + +//璇锋眰鐩綍鏍戞暟鎹� +export function queryDirTree() { + return request.get('/dir/selectDirAll'); +} +//鏂板鍗曟潯鐩綍 +export function insertDir(params) { + return request.post('/dir/insertDir', params); +} +//鍒犻櫎澶氭潯鐩綍 +export function deleteDir(params) { + return request.get('/dir/deleteDirs?' + params); +} +//鏇存柊鍗曟潯鐩綍鏍� +export function updateDirTree(params) { + return request.post('/dir/updateDir', params); +} +//鏇存柊鏁翠綋鐩綍鏍� +export function updateDirTrees(params) { + return request.post('/dir/updateDirs', params); +} + + //璇锋眰鍗曚綅鏍� export function queryDepTree() { - return service.get('/dep/selectDepAll'); + return request.get('/dep/selectDepAll'); } //鏇存柊鍗曟潯鍗曚綅鏁版嵁 export function updateDepTree(params) { - return service.post('/dep/updateDep', params); + return request.post('/dep/updateDep', params); } //鏇存柊鏁翠綋鍗曚綅鏍� export function updateDepTrees(params) { - return service.post('/dep/updateDeps', params); + return request.post('/dep/updateDeps', params); } // 璇锋眰鐢ㄦ埛绠$悊鏁版嵁 -export function queryPageUser(pageIndex, pageSize) { - return service.get( - '/user/selectByPageAndCount?pageIndex=' + - pageIndex + - '&pageSize=' + - pageSize - ); +export function queryPageUser(params) { + return request.get('/user/selectByPageAndCount', { params: params }); } diff --git a/src/assets/lang/en.js b/src/assets/lang/en.js index 3c2eb48..65ef71e 100644 --- a/src/assets/lang/en.js +++ b/src/assets/lang/en.js @@ -18,6 +18,7 @@ preservation: 'Preservation', close: 'Close', see: 'See', + index: 'index', }, dataManage: { dataManage: 'Data Manage', @@ -368,9 +369,23 @@ delete: 'Delete', apply: 'Apply', rejection: 'Rejection', - companyName: 'Company name', + depName: 'department name', userexport: 'Excel user export', userinput: 'Excel user input', + userStatus: "User Status", + addr: "address", + bak: "notes", + contact: "contact", + edu: "education", + email: "email", + idcard: "idcard", + job: "job", + natives: "natives", + pwd: "password", + sex: "gender", + status: "status", + uname: "username", + depid: "department", chineseName: 'Chinese Name [User Name]', affiliatedUnit: 'Affiliated unit [on-the-job]', mobileNumber: 'Mobile number [receive SMS]', diff --git a/src/assets/lang/zh.js b/src/assets/lang/zh.js index 284f81c..daae6e2 100644 --- a/src/assets/lang/zh.js +++ b/src/assets/lang/zh.js @@ -18,6 +18,8 @@ preservation: '淇濆瓨', close: '鍏抽棴', see: '鏌ョ湅', + index: '搴忓彿', + }, dataManage: { dataManage: '鏁版嵁绠$悊', @@ -370,9 +372,23 @@ delete: '鍒犻櫎', apply: '鐢宠', rejection: '鎷掓壒', - companyName: '鍗曚綅鍚嶇О', + depName: '鍗曚綅鍚嶇О', userexport: 'Excel鐢ㄦ埛瀵煎嚭', userinput: 'Excel鐢ㄦ埛瀵煎叆', + userStatus: "鐢ㄦ埛鐘舵��", + uname: "鐢ㄦ埛鍚�", + pwd: "瀵嗙爜", + sex: "鎬у埆", + natives: "绫嶈疮", + idcard: "璇佷欢鍙�", + job: "宸ヤ綔", + edu: "鏁欒偛", + addr: "鍦板潃", + email: "鐢靛瓙閭欢", + contact: "鑱旂郴鏂瑰紡", + status: "鐘舵��", + bak: "澶囨敞", + depid: "鎵�灞為儴闂�", chineseName: '涓枃鍚峓鐢ㄦ埛鍚峕', affiliatedUnit: '鎵�灞炲崟浣峓鍦ㄨ亴]', mobileNumber: '鎵嬫満鍙穂鎺ユ敹鐭俊]', diff --git a/src/components/catalogueTree.vue b/src/components/catalogueTree.vue index 75b3536..756d757 100644 --- a/src/components/catalogueTree.vue +++ b/src/components/catalogueTree.vue @@ -1,10 +1,5 @@ <template> <div class="wrap"> - <div class="bread"> - <el-breadcrumb separator="el-icon-arrow-right"> - <el-breadcrumb-item>{{ breadLabel }}</el-breadcrumb-item> - </el-breadcrumb> - </div> <div class="treeBox"> <el-tree ref="tree" @@ -15,12 +10,11 @@ :default-expanded-keys="[1, 2, 3, 4, 5, 6, 7, 8, 9]" :draggable="draggable" @node-drag-start="handleDragStart" - @node-click="handleNodeClick" @node-drop="handleDrop" > <span class="custom-tree-node" slot-scope="{ node, data }"> <span>{{ node.label }}</span> - <span class="btnBox" v-show="showEdit"> + <span class="btnBox"> <el-button type="text" size="mini" @click="() => append(data)"> <i class="el-icon-circle-plus"></i> </el-button> @@ -34,10 +28,8 @@ </span> </span> </el-tree> - <!-- <div style="margin-left:130px;"> - <el-button @click="sendChange">淇濆瓨</el-button> - </div> --> </div> + <button @click="sendChange">淇濆瓨</button> </div> </template> @@ -45,25 +37,20 @@ import { queryDirTree, queryMaxId, - updateDirTree, - deleteDirTree, + updateDirTrees, + // deleteDirTree, } from "../api/api"; export default { name: "catalogueTree", props: ["showBtn"], data() { return { - draggable: false, + draggable: true, id: null, - showEdit: false, - showBread: false, oriData: [], //鍘熷鏍戞暟鎹� dirData: [], //el鏍戞暟鎹� old_dirDat: [], //el鏍戞暟鎹�(鎷栧姩鍓�) newData: [], //鎷栧姩鍚庡師濮嬫暟鎹� - breadList: [], //闈㈠寘灞戞暟缁� - breadLabel: "", //闈㈠寘灞戞枃瀛� - filterText: "", defaultProps: { children: "children", label: "name", @@ -75,17 +62,16 @@ // 璇锋眰鐩綍鏍� getDirTree() { //鑾峰彇鐩綍鏍戞渶澶D锛屾柊寤鸿妭鐐逛娇鐢� - queryMaxId().then((res) => { - this.id = res.data; - }); + // queryMaxId().then((res) => { + // this.id = res.data; + // }); // 鑾峰彇鐩綍鏍戞暟鎹� queryDirTree().then((res) => { // console.log(res); - if (res.status == 200) { - this.oriData = res.data; - this.newData = res.data; - this.dirData = this.treeData(res.data); - // console.log(this.treeData(this.dirData)); + if (res.code == 200) { + this.oriData = res.result; + this.newData = res.result; + this.dirData = this.treeData(res.result); } else { console.log("鎺ュ彛鎶ラ敊"); } @@ -99,7 +85,7 @@ branchArr.length > 0 ? (father.children = branchArr) : ""; // 缁欑埗绾ф坊鍔犱竴涓猚hildren灞炴�э紝骞惰祴鍊� // 灞炰簬鍚屼竴瀵硅薄闂锛屼緥濡傦細浠� a=b銆乧=1 锛岀劧鍚庡啀浠� b.c=c 锛� 閭d箞 a.c=b.c=c=1 锛涘悓鐞嗭紝鍚庣画浠� c.d=2 ,閭d箞 a.c.d 涔熸槸=2锛� // 鐢辨寰幆澶氭鍚庯紝灏辫兘褰㈡垚鐩稿簲鐨勬爲褰㈡暟鎹粨鏋� - return father.pid == -1; // 杩斿洖涓�绾ц彍鍗� + return father.pid == 0; // 杩斿洖涓�绾ц彍鍗� }); }, append(data) { @@ -113,7 +99,7 @@ name: value, pid: data.id, // children: [], - oid: data.children ? data.children.length + 1 : 1, + orderNum: data.children ? data.children.length + 1 : 1, }; this.id = newChild.id; //淇敼鏂扮殑鏈�澶 console.log(newChild); @@ -123,7 +109,7 @@ } data.children.push(newChild); this.newData.push(newChild); - this.sendChange(); + // this.sendChange(); }) .catch(() => { this.$message({ @@ -147,7 +133,7 @@ for (var i in res) { std.push(res[i].id); } - deleteDirTree(std); + // deleteDirTree(std); this.getDirTree(); this.$message({ type: "success", @@ -185,73 +171,39 @@ return p.concat(v.children ? this.flaten(v.children).concat(v) : v); }, []); }, - handleNodeClick(data) { - // console.log(data); - this.$store.commit("changeNode", data); - this.breadList = []; - this.getTreeNode(this.$refs.tree.getNode(data.id)); - }, - getTreeNode(node) { - if (node && node.label) { - this.breadList.unshift(node.label); - this.getTreeNode(node.parent); //閫掑綊 - this.breadLabel = this.breadList.join(">"); - this.$store.commit("changeCata", this.breadLabel); - } - }, handleDragStart(node, ev) { this.old_dirDat = JSON.parse(JSON.stringify(this.dirData)); //灏嗗浠界殑dir閲嶆柊璧嬪�� }, - handleDrop(draggingNode, dropNode, dropType, ev) { - // console.log("琚嫋鎷借妭鐐�", draggingNode); - // console.log("杩涘叆鐨勮妭鐐�", dropNode); - // console.log("鏀剧疆浣嶇疆", dropType); - // console.log("浜嬩欢", ev); - // if (dropType !== "inner") { - // // 1.淇敼鐖惰妭鐐筽id - // draggingNode.data.pid = dropNode.data.pid; - // dropNode.parent.childNodes.forEach((item, index) => { - // // 2.淇敼鑷韩椤哄簭oid - // item.data.oid = index + 1; - // }); - // } - // // console.log(draggingNode.data.id); - // let res = this.oriData.filter((item) => item.id == draggingNode.data.id); - // console.log(res); this.$confirm("姝ゆ搷浣滃皢淇濆瓨鐩綍鏇存敼, 鏄惁缁х画?", "鎻愮ず", { confirmButtonText: "纭畾", cancelButtonText: "鍙栨秷", type: "warning", }) .then(() => { - let paramData = []; + //鐖惰妭鐐� let data = dropType != "inner" ? dropNode.parent.data : dropNode.data; + // 鐖惰妭鐐逛腑鍏ㄩ儴瀛愯妭鐐� let nodeData = dropNode.level == 1 && dropType != "inner" ? data : data.children; - let pid = ""; + //鍙樻洿鑺傜偣 nodeData.forEach((item, i) => { if (dropType != "inner") { if (draggingNode.data.pid === dropNode.data.pid) { - pid = item.pid; + item.pid = item.pid; } else { - pid = dropNode.data.pid; + item.pid = dropNode.data.pid; } } else { - pid = data.id; + item.pid = data.id; } - let collection = { - id: item.id, - name: item.name, - pid, - oid: i + 1, - }; - paramData.push(collection); + item.orderNum = i + 1; }); - // console.log(paramData); + // console.log(nodeData); + //鏇存柊鍘熷鏁翠綋鏁版嵁 let arr = []; this.oriData.forEach((e) => { - paramData.forEach((item) => { + nodeData.forEach((item) => { if (item.id === e.id) { e = item; } @@ -259,11 +211,6 @@ arr.push(e); }); this.newData = arr; - this.sendChange(); - this.$message({ - type: "success", - message: "鏇存敼鎴愬姛!", - }); }) .catch(() => { this.$message({ @@ -273,9 +220,8 @@ this.dirData = this.old_dirDat; //灏嗗浠界殑dir閲嶆柊璧嬪�� }); }, - sendChange() { - updateDirTree(this.newData).then((res) => { + updateDirTrees(this.newData).then((res) => { console.log(res); if (res.status == 200) { this.$message({ @@ -294,15 +240,8 @@ immediate: true, handler(val) { if (val) { - this.showEdit = val; this.draggable = val; } - }, - }, - showBread: { - immediate: true, - handler(val) { - if (val) this.showBread = val; }, }, }, diff --git a/src/components/customElMenu.vue b/src/components/customElMenu.vue new file mode 100644 index 0000000..f6f38fb --- /dev/null +++ b/src/components/customElMenu.vue @@ -0,0 +1,45 @@ +<template> + <div class="faSub"> + <template v-for="item in menuData"> + <el-submenu + v-if="item.children && item.children.length > 0" + :key="item.id" + :index="item.id + ''" + > + <template slot="title">{{ + $store.state.lang == "zh" ? item.cnName : item.enName + }}</template> + <MenuTree :menuData="item.children"></MenuTree> + </el-submenu> + <el-menu-item + v-else + :key="item.id" + :index="item.url == null ? null : item.url + ''" + > + <span slot="title">{{ + $store.state.lang == "zh" ? item.cnName : item.enName + }}</span> + </el-menu-item> + </template> + </div> +</template> + +<script> +export default { + props: ["menuData"], + name: "MenuTree", + data() { + return { + name: "", + }; + }, +}; +</script> +<style lang="less" scoped> +.faSub { + /deep/ .el-submenu__title i { + background-color: transparent !important; + color: #fff; + } +} +</style> \ No newline at end of file diff --git a/src/components/navMenu.vue b/src/components/navMenu.vue index f54eb4b..830cf14 100644 --- a/src/components/navMenu.vue +++ b/src/components/navMenu.vue @@ -7,144 +7,13 @@ <div class="menu"> <el-menu active-text-color="#ffd04b" - background-color="#3B4D6E" class="el-menu-vertical-demo" - default-active="2" + :default-active="activeIndex" + background-color="#586884" text-color="#fff" - router - @open="handleOpen" - @close="handleClose" @select="handleselect" > - <el-submenu index="3" class="faSub"> - <template slot="title"> - <span>{{ $t('synthesis.synthesis') }}</span> - </template> - <el-menu-item index="Synthesis">{{ - $t('synthesis.synthesis') - }}</el-menu-item> - <el-menu-item index="Thematic">{{ - $t('synthesis.themaic') - }}</el-menu-item> - <el-menu-item index="Archive">{{ - $t('synthesis.archive') - }}</el-menu-item> - </el-submenu> - <el-submenu index="1" class="faSub"> - <template slot="title"> - <span>{{ $t('dataManage.dataManage') }}</span> - </template> - <el-menu-item index="catalogueManage">{{ - $t('dataManage.catalogueManage') - }}</el-menu-item> - <el-menu-item index="dataUpdata">{{ - $t('dataManage.dataUpdata') - }}</el-menu-item> - <el-menu-item index="metadataManage">{{ - $t('dataManage.metadataManage') - }}</el-menu-item> - <el-menu-item index="dataLoading">{{ - $t('dataManage.dataLoading') - }}</el-menu-item> - <el-menu-item index="SpatialData">{{ - $t('dataManage.SpatialData') - }}</el-menu-item> - <el-menu-item index="versionManage">{{ - $t('dataManage.versionManage') - }}</el-menu-item> - <el-menu-item index="dictionaryManage">{{ - $t('dataManage.dictionaryManage') - }}</el-menu-item> - <el-menu-item index="styleManage">{{ - $t('dataManage.styleManage') - }}</el-menu-item> - </el-submenu> - <el-submenu index="2" class="faSub"> - <template slot="title"> - <span>{{ $t('operatManage.operatManage') }}</span> - </template> - <el-submenu index="2-2"> - <template slot="title">{{ - $t('operatManage.systemLayout') - }}</template> - <el-menu-item index="menuSettings">{{ - $t('operatManage.menuSettings') - }}</el-menu-item> - <el-menu-item index="parameterConfiguration">{{ - $t('operatManage.parameterConfiguration') - }}</el-menu-item> - <el-menu-item index="rests">{{ - $t('operatManage.rests') - }}</el-menu-item> - </el-submenu> - <el-menu-item index="authorityManagement">{{ - $t('operatManage.authorityManagement') - }}</el-menu-item> - <el-menu-item index="safetyManagement">{{ - $t('operatManage.safetyManagement') - }}</el-menu-item> - <el-submenu index="2-5"> - <template slot="title">{{ - $t('operatManage.operationMonitoring') - }}</template> - <el-menu-item index="eventlogManage">{{ - $t('operatManage.ResourceLog') - }}</el-menu-item> - <el-menu-item index="logLog">{{ - $t('operatManage.logLog') - }}</el-menu-item> - <el-menu-item index="operationLog">{{ - $t('operatManage.operationLog') - }}</el-menu-item> - <el-menu-item index="databaseMonitoring">{{ - $t('operatManage.databaseMonitoring') - }}</el-menu-item> - <el-menu-item index="systemMonitoring">{{ - $t('operatManage.systemMonitoring') - }}</el-menu-item> - <el-menu-item index="blackwhiteList" - >{{ $t('operatManage.blackwhiteList') }} - </el-menu-item> - <el-menu-item index="tokentool">{{ - $t('operatManage.tokentool') - }}</el-menu-item> - </el-submenu> - </el-submenu> - - <el-submenu index="4" class="faSub"> - <template slot="title"> - <span>{{ $t('userManage.userManage') }}</span> - </template> - <el-menu-item index="userInfoManage">{{ - $t('userManage.userInfoManage') - }}</el-menu-item> - <el-menu-item index="orgManage">{{ - $t('userManage.orgManage') - }}</el-menu-item> - <el-menu-item index="userAuditing">{{ - $t('userManage.userAuditing') - }}</el-menu-item> - <el-menu-item index="roleManage">{{ - $t('userManage.roleManage') - }}</el-menu-item> - <el-menu-item index="groupManage">{{ - $t('userManage.groupManage') - }}</el-menu-item> - <el-menu-item index="authorityManage">{{ - $t('userManage.authorityManage') - }}</el-menu-item> - <el-menu-item index="resourceManage">{{ - $t('userManage.resManage') - }}</el-menu-item> - </el-submenu> - <!-- <el-submenu index="5" class="faSub"> - <template slot="title">鏁版嵁浜ゆ崲</template> - <el-menu-item index="5-1">鏁版嵁鍒嗗彂</el-menu-item> - </el-submenu> --> - <!-- <el-submenu index="6" class="faSub"> - <template slot="title">鏈嶅姟绠$悊</template> - <el-menu-item index="6-1">鏁版嵁鏈嶅姟娉ㄥ唽寮�鍚�</el-menu-item> - </el-submenu> --> + <customElMenu :menuData="menuList"></customElMenu> </el-menu> </div> </div> @@ -165,75 +34,130 @@ </template> <script> -import { logout } from '@/api/api'; -import { removeToken, getToken } from '@/utils/auth'; +import { logout } from "@/api/api"; +import { removeToken, getToken } from "@/utils/auth"; +import customElMenu from "../components/customElMenu.vue"; +import { queryMenuTree, updateMenuTree, queryMaxId } from "../api/api"; + export default { - name: 'navMenu', + name: "navMenu", //import寮曞叆鐨勭粍浠堕渶瑕佹敞鍏ュ埌瀵硅薄涓墠鑳戒娇鐢� + components: { + customElMenu, + }, data() { return { - lang: 'en', + oriData: [], //鍘熷鏍戞暟鎹� + dirData: [], //el鏍戞暟鎹� + newData: [], //鎷栧姩鍚庢暟鎹� + lang: "zh", + activeIndex: "/", + menuList: [], + editTitle: "", + showPopover: false, + showEditInfoWrapper: false, + showEdit: false, + editMenu: false, + editCatalogue: false, + editUnit: false, + itemdetail: {}, + formLabelWidth: "70px", }; }, + mounted() { + this.getMenuTree(); + }, + computed: {}, methods: { + getMenuTree() { + //鑾峰彇鐩綍鏍戞渶澶D锛屾柊寤鸿妭鐐逛娇鐢� + // queryMaxId().then((res) => { + // this.id = res.data; + // }); + // 鑾峰彇鐩綍鏍戞暟鎹� + queryMenuTree().then((res) => { + if (res.code == 200) { + if (res.result.length != 0) { + this.menuList = this.treeData(res.result); + } else { + alert("鏆傛棤鑿滃崟鏍忔暟鎹�"); + } + } else { + console.log("鎺ュ彛鎶ラ敊"); + } + }); + }, + treeData(source) { + let cloneData = JSON.parse(JSON.stringify(source)); // 瀵规簮鏁版嵁娣卞害鍏嬮殕 + // console.log(cloneData); + if (cloneData.length != 0) { + return cloneData.filter((father) => { + // 寰幆鎵�鏈夐」 + let branchArr = cloneData.filter((child) => father.id == child.pid); // 瀵规瘮ID锛屽垎鍒笂涓嬬骇鑿滃崟锛屽苟杩斿洖鏁版嵁 + branchArr.length > 0 ? (father.children = branchArr) : ""; // 缁欑埗绾ф坊鍔犱竴涓猚hildren灞炴�э紝骞惰祴鍊� + // 灞炰簬鍚屼竴瀵硅薄闂锛屼緥濡傦細浠� a=b銆乧=1 锛岀劧鍚庡啀浠� b.c=c 锛� 閭d箞 a.c=b.c=c=1 锛涘悓鐞嗭紝鍚庣画浠� c.d=2 ,閭d箞 a.c.d 涔熸槸=2锛� + // 鐢辨寰幆澶氭鍚庯紝灏辫兘褰㈡垚鐩稿簲鐨勬爲褰㈡暟鎹粨鏋� + return father.pid == 1; // 杩斿洖涓�绾ц彍鍗� + }); + } else { + alert("鏆傛棤鑿滃崟鏍忔暟鎹�"); + } + }, logOut() { - this.$confirm('纭鏄惁閫�鍑虹櫥褰�?', '鎻愮ず', { - confirmButtonText: '纭畾', - cancelButtonText: '鍙栨秷', - type: 'warning', + this.$confirm("纭鏄惁閫�鍑虹櫥褰�?", "鎻愮ず", { + confirmButtonText: "纭畾", + cancelButtonText: "鍙栨秷", + type: "warning", }) .then(async () => { const data = await logout({ token: getToken() }); console.log(data); if (data.code != 200) { - return this.$message.error('閫�鍑虹櫥褰曞け璐�'); + return this.$message.error("閫�鍑虹櫥褰曞け璐�"); } removeToken(); - this.$router.push('/login'); + this.$router.push("/login"); this.$message({ - message: '閫�鍑虹櫥褰曟垚鍔�', - type: 'success', + message: "閫�鍑虹櫥褰曟垚鍔�", + type: "success", }); }) .catch(() => { this.$message({ - type: 'info', - message: '宸插彇娑�', + type: "info", + message: "宸插彇娑�", }); }); }, - handleOpen(key, keyPath) { - if ( - keyPath[1] != 'dataLoading' && - keyPath[1] != '2-2' && - keyPath[1] != '2-5' - ) - this.$router.push(keyPath[1]); - }, - handleClose(key, keyPath) { - if ( - keyPath[1] != 'dataLoading' && - keyPath[1] != '2-5' && - keyPath[1] != '2-2' - ) - this.$router.push(keyPath[1]); - }, - handleselect(index) { - if (index != null) { - this.$emit('shwoMapView', false); - } - }, - showChange() { - this.$emit('shwoMapView', true); - }, switchLang() { - if (this.lang == 'en') { + //褰撳墠en + if (this.lang == "en") { + //璇█鎹㈡垚zh + this.lang = "zh"; + //鑿滃崟鎹负zh + this.$store.commit("changeLang", "zh"); + //i18鎹㈡垚zh this.$i18n.locale = this.lang; - this.lang = 'zh'; - } else { - this.$i18n.locale = this.lang; - this.lang = 'en'; } + //褰撳墠zh + else { + this.lang = "en"; + this.$i18n.locale = this.lang; + this.$store.commit("changeLang", "en"); //浼犻�掔偣鍑荤殑鑺傜偣 + } + }, + handleselect(index, indexPath) { + if (index.indexOf("http") != -1) { + this.$router.push("/databaseMonitoring"); + this.$store.commit("getIframe", index); + } else if (isNaN(Number(index))) { + this.$router.push(index); + } + }, + }, + watch: { + $route() { + this.activeIndex = this.$route.path; }, }, }; diff --git a/src/router/index.js b/src/router/index.js index f9898e9..8a06dac 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -337,6 +337,7 @@ requireAuth: true, // 鏍囪瘑璇ヨ矾鐢辨槸鍚﹂渶瑕佺櫥褰� }, }, + ], }, ]; diff --git a/src/store/index.js b/src/store/index.js index 088eb10..83c210d 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -11,10 +11,13 @@ state: { catalogueName: '', cataNode: {}, + lang: 'zh', + menuNode: {}, verCateNode: {}, verCateNodes: {}, styleDirCateNodes: {}, styleDepCateNodes: {}, + iframeMsg: '', token: getToken(), //璇锋眰璁℃暟 apiCount: 0, @@ -31,6 +34,17 @@ changeNode(state, msg) { state.cataNode = msg; }, + changeLang(state, msg) { + state.lang = msg; + }, + getIframe(state, msg) { + state.iframeMsg = msg; + }, + changeName(state, msg) { + state.menuNode = msg; + // console.log(msg); + + }, verChangeNode(state, msg) { state.verCateNode = msg; }, diff --git a/src/views/datamanage/catalogueManage.vue b/src/views/datamanage/catalogueManage.vue index d8d6c07..cd522bb 100644 --- a/src/views/datamanage/catalogueManage.vue +++ b/src/views/datamanage/catalogueManage.vue @@ -1,142 +1,481 @@ <template> - <div class="pageWrapper"> - <div class="leftTree"> + <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-divider /> - <div class="tree"> - <catalogueTree :showBtn="showBtn"></catalogueTree> + <div class="cataTreeBox"> + <el-tree + ref="tree" + :props="defaultProps" + node-key="id" + :data="dirList" + :expand-on-click-node="false" + :default-expand-all="true" + draggable + @node-click="handleNodeClick" + @node-drag-start="handleDragStart" + @node-drag-end="handleDrop" + > + <span class="custom-tree-node" slot-scope="{ node, data }"> + <span>{{ node.label }}</span> + <span class="btnBox"> + <el-button + 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> </div> - <div class="rightWrapper"> - <div class="leftTabs"> - <el-tabs type="border-card"> - <el-tab-pane label="鏌ョ湅"> - <el-form :model="form" :inline="true"> - <el-form-item label="鐩綍缂栫爜"> - <el-input v-model="this.$store.state.cataNode.id" disabled /> - </el-form-item> - <el-form-item label="鐩綍鍚嶇О" label-width="100px"> - <el-input v-model="this.$store.state.cataNode.name" disabled /> - </el-form-item> - <el-form-item label="鐩綍璇存槑"> - <el-input - v-model="form.desc" - type="textarea" - resize="none" - style="height: 100%; overflow: auto" - /> - </el-form-item> - <el-form-item label="鐩綍澶囨敞"> - <el-input v-model="form.notes" type="textarea" resize="none" /> - </el-form-item> - <el-form-item style="margin-left: 450px"> - <el-button type="primary" size="mini" @click="onSubmit" - >纭畾</el-button - > - <el-button - style="margin-left: 50px" - size="mini" - @click="cancel" - >鍙栨秷</el-button - > - </el-form-item> - </el-form> - </el-tab-pane> - </el-tabs> + <div class="itemSettings"> + <div class="title_box"> + <h4>璇︾粏淇℃伅</h4> + </div> + <div class="form_box"> + <el-form :model="itemdetail"> + <!-- <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-input v-model="itemdetail.name" /> + </el-form-item> + <el-form-item label="鐩綍璇存槑" :label-width="formLabelWidth"> + <el-input + v-model="itemdetail.descr" + type="textarea" + resize="none" + style="height: 100%; overflow: auto" + /> + </el-form-item> + <el-form-item label="鐩綍澶囨敞" :label-width="formLabelWidth"> + <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> + </div> + </el-form> </div> </div> + ' + + <el-dialog title="鏂板瀛愮洰褰�" :visible.sync="dialogFormVisible"> + <el-form :model="ruleForm" ref="ruleForm" :rules="rules"> + <el-form-item + label="鐩綍鍚嶇О" + prop="name" + :label-width="formLabelWidth" + > + <el-input v-model="ruleForm.name" autocomplete="off"></el-input> + </el-form-item> + <el-form-item + prop="descr" + 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-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> <script> +import { + queryDirTree, + queryMaxId, + updateDirTrees, + insertDir, + deleteDir, +} from "../../api/api"; import MyBread from "../../components/MyBread.vue"; -import catalogueTree from "../../components/catalogueTree.vue"; export default { name: "catalogueManage", components: { - catalogueTree, MyBread, }, data() { + let validName = (rule, value, callback) => { + if (value === "") { + return callback(new Error("鐩綍鍚嶇О涓嶈兘涓虹┖")); + } else { + callback(); + } + }; return { - showBtn: true, - form: { + defaultProps: { + children: "children", + label: "name", + }, + fullscreenLoading: false, + oriData: [], //鍘熷鏍戞暟鎹� + dirList: [], //el鏍戞暟鎹� + old_dirDat: [], //el鏍戞暟鎹�(鎷栧姩鍓�) + newData: [], //鎷栧姩鍚庡師濮嬫暟鎹� + itemdetail: {}, + backUpData: {}, + formLabelWidth: "170px", + delChildIDs: "", + dialogFormVisible: false, + ruleForm: { + level: null, + orderNum: null, + pid: null, name: "", - region: "", - date1: "", - date2: "", - delivery: false, - type: [], - resource: "", - desc: "", + descr: "", + bak: "", + }, + rules: { + name: [{ validator: validName, trigger: "blur" }], }, }; }, methods: { - onSubmit() { + // 璇锋眰鐩綍鏍� + getDirTree() { + //鑾峰彇鐩綍鏍戞渶澶D锛屾柊寤鸿妭鐐逛娇鐢� + // queryMaxId().then((res) => { + // this.id = res.data; + // }); + // 鑾峰彇鐩綍鏍戞暟鎹� + queryDirTree().then((res) => { + // console.log(res); + if (res.code == 200) { + this.oriData = res.result; + this.newData = res.result; + this.dirList = this.treeData(res.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灞炴�э紝骞惰祴鍊� + // 灞炰簬鍚屼竴瀵硅薄闂锛屼緥濡傦細浠� a=b銆乧=1 锛岀劧鍚庡啀浠� b.c=c 锛� 閭d箞 a.c=b.c=c=1 锛涘悓鐞嗭紝鍚庣画浠� c.d=2 ,閭d箞 a.c.d 涔熸槸=2锛� + // 鐢辨寰幆澶氭鍚庯紝灏辫兘褰㈡垚鐩稿簲鐨勬爲褰㈡暟鎹粨鏋� + return father.pid == 0; // 杩斿洖涓�绾ц彍鍗� + }); + }, + append(node, data) { + this.dialogFormVisible = true; + 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.$refs[formName].resetFields(); + }); + }, + submitForm(formName) { + this.$nextTick(() => { + this.$refs[formName].validate((valid) => { + if (valid) { + this.fullscreenLoading = true; + insertDir(this.ruleForm) + .then((res) => { + setTimeout(() => { + this.fullscreenLoading = false; + if (res.code == 200) { + this.$message({ + message: "娣诲姞鎴愬姛", + type: "success", + }); + this.dialogFormVisible = false; + this.$refs[formName].resetFields(); + } + }, 2000); + }) + .catch((res) => { + console.log(res); + this.fullscreenLoading = false; + }); + } else { + // alert("鐩綍鍚嶇О涓嶈兘涓虹┖"); + return false; + } + }); + }); + }, + remove(node, data) { + 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); + children.forEach((item, index) => { + item.orderNum = index + 1; + }); + + this.traverseArr(data); //鑾峰彇鍒犻櫎鐨勫瓙ID + let delIDs = this.delChildIDs + "id=" + data.id; //瑕佸垹闄ょ殑鍏ㄩ儴ID + console.log(delIDs); + Promise.all([deleteDir(delIDs), updateDirTrees(children)]) + .then((res) => { + console.log(res); + if (res[0].code == 200 && res[1].code == 200) { + this.$message({ + type: "success", + message: "鍒犻櫎鎴愬姛!", + }); + } + }) + .catch(() => { + this.$message({ + type: "error", + message: "鍒犻櫎澶辫触", + }); + }); + + //閲嶇疆瑕佸垹闄ょ殑瀛怚D + this.delChildIDs = ""; + }) + .catch(() => { + this.$message({ + type: "info", + 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.delChildIDs += "id=" + item.id + "&"; + this.traverseArr(item); + }); + } + return; + }, + 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); + }, []); + }, + handleDragStart(node, ev) { + this.old_dirDat = JSON.parse(JSON.stringify(this.dirList)); //灏嗗浠界殑dir閲嶆柊璧嬪�� + }, + handleDrop(draggingNode, dropNode, dropType, ev) { + this.$confirm("姝ゆ搷浣滃皢淇濆瓨鐩綍鏇存敼, 鏄惁缁х画?", "鎻愮ず", { + confirmButtonText: "纭畾", + cancelButtonText: "鍙栨秷", + type: "warning", + }) + .then(() => { + //鐖惰妭鐐� + let data = dropType != "inner" ? dropNode.parent.data : dropNode.data; + // 鐖惰妭鐐逛腑鍏ㄩ儴瀛愯妭鐐� + let nodeData = + dropNode.level == 1 && dropType != "inner" ? data : data.children; + //鍙樻洿鑺傜偣 + nodeData.forEach((item, i) => { + if (dropType != "inner") { + if (draggingNode.data.pid === dropNode.data.pid) { + item.pid = item.pid; + } else { + item.pid = dropNode.data.pid; + } + } else { + item.pid = data.id; + } + item.orderNum = i + 1; + }); + // console.log(nodeData); + //鏇存柊鍘熷鏁翠綋鏁版嵁 + let arr = []; + this.oriData.forEach((e) => { + nodeData.forEach((item) => { + if (item.id === e.id) { + e = item; + } + }); + arr.push(e); + }); + this.newData = arr; + }) + .catch(() => { + this.$message({ + type: "info", + 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: "鏇存柊鎴愬姛!", + }); + } + }); + }, + handleNodeClick(data) { + // console.log(data); + this.backUpData = JSON.stringify(data); + this.itemdetail = JSON.parse(JSON.stringify(data)); + }, + updMenu() { this.$message({ message: "淇敼鎴愬姛", type: "success", }); }, - cancel() { + reset() { this.$message("宸插彇娑�"); }, - // this.updateForm.name = this.$store.state.catalogueName; + }, + mounted() { + this.getDirTree(); }, }; </script> <style lang="less" scoped> -.pageWrapper { +.cataSettings_box { + border-radius: 10px; + height: 100%; + padding: 10px; + box-sizing: border-box; display: flex; - height: 98.5%; - margin-top: 6px; - margin-left: 16px; - .leftTree { + .cataSettings_tree { + position: relative; width: 344px; height: 100%; - background: #f4f8ff; + background: rgb(240, 242, 245); + padding: 20px; border-radius: 10px; - overflow: hidden; - .breadcrumb { - margin: 8px 0 0 24px; + box-sizing: border-box; + overflow: auto; + .saveBtn { + position: absolute; + left: 250px; + top: 23px; } - hr { - width: 304px; - margin-top: 9px; - background: #d3d3d3; - } - .tree { - height: 90%; + .cataTreeBox { + height: 88%; + width: 100%; overflow: auto; - padding-left: 5px; + .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-left: 5px; + .el-button + .el-button { + margin-left: 5px; + } + } + } } } - .rightWrapper { - width: calc(100% - 350px); - height: 100%; - margin-left: 6px; - background: #f4f8ff; + .itemSettings { + width: calc(100% - 344px); border-radius: 10px; - overflow: auto; - .leftTabs { - width: 99%; - margin: 17px auto 0; - /deep/.el-tabs--border-card { - border-radius: 3px; + background: rgb(240, 242, 245); + margin-left: 10px; + height: 100%; + padding: 10px; + box-sizing: border-box; + .title_box { + background: #fff; + padding: 10px; + margin-bottom: 24px; + display: flex; + border-radius: 10px; + border: 1px solid rgb(202, 201, 204); + box-sizing: border-box; + } + .form_box { + border: 1px solid rgb(202, 201, 204); + border-radius: 10px; + background: #fff; + padding-top: 30px; + box-sizing: border-box; + width: 100%; + .el-input, + /deep/ .el-textarea { + width: 400px; } - /deep/.el-tabs--border-card > .el-tabs__content { - padding: 30px 0 0 38px; - height: 87vh; - } - .el-input { - width: 467px; - } - /deep/ .el-textarea__inner { - width: 1066px; - height: 131px; - overflow: auto; + .btnBox { + margin: 0 270px 20px; + width: 200px; + display: flex; + justify-content: space-between; } } } diff --git a/src/views/maintenance/databaseMonitoring.vue b/src/views/maintenance/databaseMonitoring.vue index 5ff18eb..83ceaea 100644 --- a/src/views/maintenance/databaseMonitoring.vue +++ b/src/views/maintenance/databaseMonitoring.vue @@ -1,12 +1,5 @@ <template> <div class="databaseMonitoring_box"> - <My-bread - :list="[ - `${$t('operatManage.operatManage')}`, - `${$t('operatManage.databaseMonitoring')}`, - ]" - ></My-bread> - <el-divider /> <div class="table_box"> <iframe id="iframe" @@ -21,6 +14,7 @@ <script> import MyBread from "../../components/MyBread.vue"; +import { getToken } from "../../utils/auth.js"; export default { //import寮曞叆鐨勭粍浠堕渶瑕佹敞鍏ュ埌瀵硅薄涓墠鑳戒娇鐢� components: { @@ -29,15 +23,24 @@ data() { //杩欓噷瀛樻斁鏁版嵁 return { - sql_Url: sql_Url + sql_Url: "", }; }, //鏂规硶闆嗗悎 methods: { - handleSelectionChange() { }, + handleSelectionChange() {}, + getUrl() { + if (this.$store.state.iframeMsg.indexOf("Token=") != -1) { + this.sql_Url = this.$store.state.iframeMsg + getToken(); + } else { + this.sql_Url = this.$store.state.iframeMsg; + } + }, }, - created() { }, - mounted() { }, + created() { + this.getUrl(); + }, + mounted() {}, }; </script> <style lang="less" scoped> diff --git a/src/views/maintenance/menuSettings.vue b/src/views/maintenance/menuSettings.vue index f8f0f41..7f9b71b 100644 --- a/src/views/maintenance/menuSettings.vue +++ b/src/views/maintenance/menuSettings.vue @@ -2,46 +2,64 @@ <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 + > <el-divider /> - <el-tree - :data="data" - :props="defaultProps" - show-checkbox - @check-change="handleCheckChange" - /> + <div class="menuTreeBox"> + <el-tree + ref="tree" + :props="defaultProps" + node-key="id" + :data="menuList" + :expand-on-click-node="false" + :default-expand-all="true" + draggable + @node-click="handleNodeClick" + @node-drag-start="handleDragStart" + @node-drag-end="handleDrop" + > + <span class="custom-tree-node" slot-scope="{ node, data }"> + <span>{{ node.label }}</span> + </span> + </el-tree> + </div> </div> <div class="menuSettings"> - <div class="btn_box"> - <el-button type="primary">鏂板缓</el-button> - <el-button type="primary">淇敼</el-button> - <!-- <el-button class="delBtn">娓呴櫎</el-button> --> + <div class="title_box"> + <h4>璇︾粏淇℃伅</h4> </div> - <div class="table_box"> - <el-table :data="tableData" stripe> - <el-table-column prop="menuname" label="鑿滃崟鍚嶇О" /> - <el-table-column prop="parentmenuname" label="鐖惰彍鍗曞悕绉�" /> - <el-table-column prop="dataBulk" label="鏁版嵁鏁伴噺" /> - <el-table-column prop="creationtime" label="鍒涘缓鏃堕棿" /> - <el-table-column prop="creationname" label="鍒涘缓浜�" /> - <el-table-column fixed="right" label="鎿嶄綔" width="280"> - <template #default> - <!-- <el-button type="primary" size="small">淇敼</el-button> --> - <el-button type="primary" size="small">鍒犻櫎</el-button> - </template> - </el-table-column> - </el-table> - <div style="margin-top: 40px" class="pagination_box"> - <el-pagination - @size-change="handleSizeChange" - @current-change="handleCurrentChange" - :current-page="currentPage4" - :page-sizes="[10, 20, 30, 40]" - :page-size="10" - layout="total, sizes, prev, pager, next, jumper" - :total="10" - > - </el-pagination> - </div> + <div class="form_box"> + <el-form :model="itemdetail"> + <el-form-item 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-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> + <el-form-item 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> + <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> + </div> + </el-form> </div> </div> </div> @@ -49,7 +67,12 @@ <script> import MyBread from "../../components/MyBread.vue"; - +import { + queryMenuTree, + updateMenuTree, + updateMenuTrees, + queryMaxId, +} from "../../api/api"; export default { //import寮曞叆鐨勭粍浠堕渶瑕佹敞鍏ュ埌瀵硅薄涓墠鑳戒娇鐢� components: { @@ -58,169 +81,217 @@ data() { return { - currentPage4: 1, - tableData: [ - { - menuname: "鏁版嵁璐ㄦ", - parentmenuname: "", - dataBulk: "1", - creationtime: "2022-7-20", - creationname: "admin", - }, - { - menuname: "鏁版嵁浜ゆ崲", - parentmenuname: "", - dataBulk: "1", - creationtime: "2022-7-20", - creationname: "admin", - }, - { - menuname: "鏁版嵁绠$悊", - parentmenuname: "", - dataBulk: "1", - creationtime: "2022-7-20", - creationname: "admin", - }, - { - menuname: "鏈嶅姟绠$悊", - parentmenuname: "", - dataBulk: "1", - creationtime: "2022-7-20", - creationname: "admin", - }, - { - menuname: "缁煎悎灞曠ず", - parentmenuname: "", - dataBulk: "1", - creationtime: "2022-7-20", - creationname: "admin", - }, - { - menuname: "杩愮淮绠$悊", - parentmenuname: "", - dataBulk: "1", - creationtime: "2022-7-20", - creationname: "admin", - }, - { - menuname: "鑿滃崟绠$悊", - parentmenuname: "杩愮淮绠$悊", - dataBulk: "1", - creationtime: "2022-7-20", - creationname: "admin", - }, - { - menuname: "鐢ㄦ埛绠$悊", - parentmenuname: "杩愮淮绠$悊", - dataBulk: "1", - creationtime: "2022-7-20", - creationname: "admin", - }, - { - menuname: "绯荤粺绠$悊", - parentmenuname: "杩愮淮绠$悊", - dataBulk: "1", - creationtime: "2022-7-20", - creationname: "admin", - }, - { - menuname: "绯荤粺閰嶇疆", - parentmenuname: "杩愮淮绠$悊", - dataBulk: "1", - creationtime: "2022-7-20", - creationname: "admin", - }, - ], defaultProps: { children: "children", - label: "label", + label: "cnName", }, - data: [ - { - label: "鏁版嵁璐ㄦ", - }, - { - label: "鏁版嵁浜ゆ崲", - }, - { - label: "鏁版嵁绠$悊", - children: [ - { - label: "Level two 3-1", - children: [ - { - label: "Level three 3-1-1", - }, - ], - }, - { - label: "Level two 3-2", - children: [ - { - label: "Level three 3-2-1", - }, - ], - }, - ], - }, - { - label: "鏈嶅姟绠$悊", - }, - { - label: "缁煎悎灞曠ず", - children: [ - { - label: "Level two 3-1", - children: [ - { - label: "Level three 3-1-1", - }, - ], - }, - { - label: "Level two 3-2", - children: [ - { - label: "Level three 3-2-1", - }, - ], - }, - ], - }, - { - label: "杩愮淮绠$悊", - children: [ - { - label: "Level two 3-1", - children: [ - { - label: "Level three 3-1-1", - }, - ], - }, - { - label: "Level two 3-2", - children: [ - { - label: "Level three 3-2-1", - }, - ], - }, - ], - }, - ], + oriData: [], //鍘熷鏍戞暟鎹� + menuList: [], //el鏍戞暟鎹� + old_dirDat: [], //el鏍戞暟鎹�(鎷栧姩鍓�) + newData: [], //鎷栧姩鍚庡師濮嬫暟鎹� + itemdetail: { + cnName: "", + enName: "", + icon: null, + isShow: null, + perms: null, + url: "", + type: null, + bak: "", + }, + backUpData: {}, + formLabelWidth: "170px", }; }, methods: { - handleSizeChange(val) { - console.log(`姣忛〉 ${val} 鏉); + getMenuTree() { + //鑾峰彇鐩綍鏍戞渶澶D锛屾柊寤鸿妭鐐逛娇鐢� + // queryMaxId().then((res) => { + // this.id = res.data; + // }); + queryMenuTree().then((res) => { + if (res.code == 200) { + this.menuList = this.treeData(res.result); + this.oriData = res.result; + this.newData = res.result; + } else { + console.log("鎺ュ彛鎶ラ敊"); + } + }); }, - handleCurrentChange(val) { - console.log(`褰撳墠椤�: ${val}`); + 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 == 1; // 杩斿洖涓�绾ц彍鍗� + }); }, - handleCheckChange() {}, + 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", []); + } + data.children.push(newChild); + this.newData.push(newChild); + // this.sendChange(); + }) + .catch(() => { + this.$message({ + type: "info", + message: "鍙栨秷杈撳叆", + }); + }); + }, + remove(node, data) { + this.$confirm("姝ゆ搷浣滃皢鍒犻櫎璇ヨ妭鐐�, 鏄惁缁х画?", "鎻愮ず", { + confirmButtonText: "纭畾", + cancelButtonText: "鍙栨秷", + 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: "鍒犻櫎鎴愬姛!", + }); + }) + .catch(() => { + this.$message({ + type: "info", + 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)); + }, + 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); + }, []); + }, + handleDragStart(node, ev) { + this.old_dirDat = JSON.parse(JSON.stringify(this.menuList)); //灏嗗浠界殑dir閲嶆柊璧嬪�� + }, + handleDrop(draggingNode, dropNode, dropType, ev) { + this.$confirm("鏄惁璋冩暣鑷宠浣嶇疆?", "鎻愮ず", { + confirmButtonText: "纭畾", + cancelButtonText: "鍙栨秷", + type: "warning", + }) + .then(() => { + //鐖惰妭鐐� + let data = dropType != "inner" ? dropNode.parent.data : dropNode.data; + // 鐖惰妭鐐逛腑鍏ㄩ儴瀛愯妭鐐� + 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; + } else { + item.pid = dropNode.data.pid; + } + } else { + item.pid = data.id; + } + item.orderNum = i + 1; + }); + console.log(nodeData); + //鏇存柊鍘熷鏁翠綋鏁版嵁 + let arr = []; + this.oriData.forEach((e) => { + nodeData.forEach((item) => { + if (item.id === e.id) e = item; + }); + arr.push(e); + }); + this.newData = arr; + }) + .catch(() => { + this.$message({ + type: "info", + message: "宸插彇娑堟洿鏀�", + }); + this.menuList = this.old_dirDat; //灏嗗浠界殑dir閲嶆柊璧嬪�� + }); + }, + sendChange() { + updateMenuTrees(this.newData).then((res) => { + if (res.code == 200) { + alert("鏇存敼瀹屾垚銆傝鍙婃椂鍒锋柊椤甸潰锛�"); + return; + } else { + 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("淇敼澶辫触锛岃閲嶈瘯锛�"); + } + }); + }, + reset() { + this.itemdetail = JSON.parse(this.backUpData); + }, }, - created() {}, + mounted() { + this.getMenuTree(); + }, }; </script> <style lang="less" scoped> @@ -233,6 +304,7 @@ box-sizing: border-box; display: flex; .menuSettings_tree { + position: relative; width: 344px; height: 100%; background: rgb(240, 242, 245); @@ -240,14 +312,39 @@ border-radius: 10px; box-sizing: border-box; overflow: auto; - .el-tree { - background: transparent; - /deep/ .el-tree-node__label { - font-size: 18px; - } - /deep/ .el-tree-node { - padding-top: 10px; - padding-bottom: 10px; + .saveBtn { + position: absolute; + left: 250px; + top: 23px; + } + .menuTreeBox { + height: 90%; + overflow: auto; + .el-tree { + background: transparent; + font-size: 15px; + font-family: Microsoft YaHei; + font-weight: 400; + color: #000000; + // /deep/ .el-tree-node__label { + // font-size: 18px; + // } + /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-left: 5px; + .el-button + .el-button { + margin-left: 5px; + } + } } } } @@ -259,7 +356,7 @@ height: 100%; padding: 10px; box-sizing: border-box; - .btn_box { + .title_box { background: #fff; padding: 10px; margin-bottom: 24px; @@ -267,19 +364,22 @@ border-radius: 10px; border: 1px solid rgb(202, 201, 204); box-sizing: border-box; - .delBtn { - margin-left: auto; - } } - .table_box { + .form_box { border: 1px solid rgb(202, 201, 204); border-radius: 10px; background: #fff; - padding: 10px; + padding-top: 30px; box-sizing: border-box; width: 100%; - .el-table__body { - width: 100% !important; + .el-input { + width: 400px; + } + .btnBox { + margin: 0 270px 20px; + width: 200px; + display: flex; + justify-content: space-between; } } } diff --git a/src/views/userManage/orgManage.vue b/src/views/userManage/orgManage.vue index 7ceb85b..912620e 100644 --- a/src/views/userManage/orgManage.vue +++ b/src/views/userManage/orgManage.vue @@ -1,388 +1,122 @@ <template> <div class="menuSettings_box"> <div class="menuSettings_tree"> - <My-bread - :list="[ - `${$t('userManage.userManage')}`, - `${$t('userManage.orgManage')}`, - ]" - ></My-bread> + <My-bread :list="['杩愮淮绠$悊', '鍗曚綅绠$悊']"></My-bread> + <el-button class="saveBtn" type="primary" size="mini" @click="sendChange" + >淇濆瓨</el-button + > <el-divider /> - <el-tree - :data="data" - node-key="id" - default-expand-all - @node-drag-start="handleDragStart" - @node-drag-enter="handleDragEnter" - @node-drag-leave="handleDragLeave" - @node-drag-over="handleDragOver" - @node-drag-end="handleDragEnd" - @node-drop="handleDrop" - draggable - :allow-drop="allowDrop" - :allow-drag="allowDrag" - > - </el-tree> - </div> - <div class="menuSettings"> - <div class="btn_box"> - <div class="herder_box"> - {{ $t("operatManage.operationLogObj.queryRegion") }} - </div> - <el-form :inline="true" :model="formInline" size="small"> - <el-form-item :label="$t('userManage.orgManageObj.companyName')"> - <el-input - v-model="formInline.user" - :placeholder="$t('userManage.orgManageObj.companyName')" - ></el-input> - </el-form-item> - <el-form-item :label="$t('userManage.orgManageObj.flatType')"> - <el-select - v-model="formInline.region" - :placeholder="$t('userManage.orgManageObj.flatType')" - > - <el-option label="鍏ㄩ儴" value="鍏ㄩ儴"></el-option> - <el-option label="娴峰煙琛屾斂閮ㄩ棬" value="娴峰煙琛屾斂閮ㄩ棬"></el-option> - <el-option label="娴峰煙鐩戞祴閮ㄩ棬" value="娴峰煙鐩戞祴閮ㄩ棬"></el-option> - <el-option label="娴风洃鎵ф硶閮ㄩ棬" value="娴风洃鎵ф硶閮ㄩ棬"></el-option> - <el-option label="鎶�鏈腑蹇�" value="鎶�鏈腑蹇�"></el-option> - <el-option label="淇℃伅涓績" value="淇℃伅涓績"></el-option> - <el-option label="鐢ㄦ捣鍗曚綅" value="鐢ㄦ捣鍗曚綅"></el-option> - </el-select> - </el-form-item> - <el-form-item> - <el-button - type="primary" - @click="onSubmit" - icon="el-icon-search" - plain - >{{ $t("userManage.orgManageObj.inquire") }}</el-button - > - <el-button type="primary" icon="el-icon-delete" plain>{{ - $t("userManage.orgManageObj.delete") - }}</el-button> - </el-form-item> - </el-form> - <div> - <el-button - type="success" - @click="outerVisible = true" - icon="el-icon-circle-plus" - size="small" - >{{ $t("userManage.orgManageObj.add") }}</el-button - > - </div> - </div> - <div class="table_box"> - <el-table :data="tableData" stripe> - <el-table-column - type="index" - width="80" - :label="$t('userManage.orgManageObj.num')" - > - </el-table-column> - <el-table-column - prop="menuname" - :label="$t('userManage.orgManageObj.companyName')" - /> - <el-table-column - prop="parentmenuname" - :label="$t('userManage.orgManageObj.flatType')" - /> - <el-table-column - prop="dataBulk" - :label="$t('userManage.orgManageObj.phone')" - /> - <el-table-column - fixed="right" - :label="$t('userManage.orgManageObj.operate')" - width="280" - > - <template #default> - <el-button type="warning" size="small">{{ - $t("userManage.orgManageObj.edit") - }}</el-button> - <el-button type="success" size="small">{{ - $t("userManage.orgManageObj.add") - }}</el-button> - <el-button type="danger" size="small">{{ - $t("userManage.orgManageObj.delete") - }}</el-button> - </template> - </el-table-column> - </el-table> - <div style="margin-top: 40px" class="pagination_box"> - <el-pagination - @size-change="handleSizeChange" - @current-change="handleCurrentChange" - :current-page="currentPage4" - :page-sizes="[10, 20, 30, 40]" - :page-size="10" - layout="total, sizes, prev, pager, next, jumper" - :total="10" - > - </el-pagination> - </div> + <div class="menuTreeBox"> + <el-tree + ref="tree" + :props="defaultProps" + node-key="id" + :data="depList" + :expand-on-click-node="false" + :default-expand-all="true" + draggable + @node-click="handleNodeClick" + @node-drag-start="handleDragStart" + @node-drag-end="handleDrop" + > + <span class="custom-tree-node" slot-scope="{ node, data }"> + <span>{{ node.label }}</span> + <span class="btnBox"> + <el-button + 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> </div> - <el-dialog title="鏂板" :visible.sync="outerVisible" :modal-append-to-body="true" :append-to-body="true"> - <el-dialog - width="30%" - :title="dialogTitle" - :visible.sync="innerVisible" - append-to-body - > - <el-form :inline="true" :model="formInline" size="small"> - <el-form-item :label="$t('userManage.orgManageObj.username')"> + <div class="itemSettings"> + <div class="title_box"> + <h4>璇︾粏淇℃伅</h4> + </div> + <div class="form_box"> + <el-form :model="itemdetail"> + <el-form-item label="鍚嶇О" :label-width="formLabelWidth"> + <el-input v-model="itemdetail.name" autocomplete="off"></el-input> + </el-form-item> + <el-form-item label="绠�绉�" :label-width="formLabelWidth"> + <el-input v-model="itemdetail.sname" autocomplete="off"></el-input> + </el-form-item> + <el-form-item label="缂栫爜" :label-width="formLabelWidth"> + <el-input v-model="itemdetail.code" autocomplete="off"></el-input> + </el-form-item> + <el-form-item label="鏈烘瀯浠g爜" :label-width="formLabelWidth"> + <el-input v-model="itemdetail.uncode" autocomplete="off"></el-input> + </el-form-item> + <el-form-item label="鍦板潃" :label-width="formLabelWidth"> + <el-input v-model="itemdetail.addr" autocomplete="off"></el-input> + </el-form-item> + <el-form-item label="鑱旂郴鏂瑰紡" :label-width="formLabelWidth"> <el-input - v-model="formInline.user" - :placeholder="$t('userManage.orgManageObj.username')" + v-model="itemdetail.contact" + autocomplete="off" ></el-input> </el-form-item> - - <el-form-item> - <el-button - type="primary" - @click="onSubmit" - icon="el-icon-search" - plain - >{{ $t("userManage.orgManageObj.inquire") }}</el-button - > - <el-button type="primary" icon="el-icon-delete" plain>{{ - $t("userManage.orgManageObj.delete") - }}</el-button> + <el-form-item label="浼犵湡" :label-width="formLabelWidth"> + <el-input v-model="itemdetail.fax" autocomplete="off"></el-input> </el-form-item> - </el-form> - <el-table - ref="multipleTable" - :data="tableData1" - tooltip-effect="dark" - style="width: 100%" - @selection-change="handleSelectionChange" - > - <el-table-column type="selection" width="55"> </el-table-column> - <el-table-column prop="name" :label="$t('userManage.orgManageObj.ChineseNameUsername')"> - </el-table-column> - <el-table-column prop="name" :label="$t('userManage.orgManageObj.phoneNumberToTeceiveShortMessages')"> - </el-table-column> - <el-table-column prop="address" :label="$t('userManage.orgManageObj.status')"> </el-table-column> - </el-table> - <div style="margin-top: 40px" class="pagination_box"> - <el-pagination - @size-change="handleSizeChange" - @current-change="handleCurrentChange" - :current-page="currentPage4" - :page-sizes="[10, 20, 30, 40]" - :page-size="10" - layout="total, sizes, prev, pager, next, jumper" - :total="10" - > - </el-pagination> - </div> - <div slot="footer" class="dialog-footer"> - <el-button type="primary">{{$t('userManage.orgManageObj.confirm')}}</el-button> - <el-button @click="innerVisible = false">{{$t('userManage.orgManageObj.close')}}</el-button> - </div> - </el-dialog> - <el-dialog - width="30%" - title="琛屾斂鍖哄垝-鍒楄〃" - :visible.sync="innerVisible1" - append-to-body - > - <el-form :inline="true" :model="formInline" size="small"> - <el-form-item :label="$t('userManage.orgManageObj.name')"> + <el-form-item label="鐢靛瓙閭欢" :label-width="formLabelWidth"> + <el-input v-model="itemdetail.email" autocomplete="off"></el-input> + </el-form-item> + <el-form-item label="閭斂缂栫爜" :label-width="formLabelWidth"> + <el-input v-model="itemdetail.post" autocomplete="off"></el-input> + </el-form-item> + <el-form-item label="缃戠珯鍦板潃" :label-width="formLabelWidth"> <el-input - v-model="formInline.user" - :placeholder="$t('userManage.orgManageObj.name')" + v-model="itemdetail.website" + autocomplete="off" ></el-input> </el-form-item> - - <el-form-item> - <el-button - type="primary" - @click="onSubmit" - icon="el-icon-search" - plain - >{{ $t("userManage.orgManageObj.inquire") }}</el-button - > - <el-button type="primary" icon="el-icon-delete" plain>{{ - $t("userManage.orgManageObj.delete") - }}</el-button> + <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> </el-form> - <el-table - ref="multipleTable" - :data="tableData1" - tooltip-effect="dark" - style="width: 100%" - @selection-change="handleSelectionChange" + </div> + </div> + <el-dialog title="鏂板瀛愮洰褰�" :visible.sync="dialogFormVisible"> + <el-form :model="ruleForm" ref="ruleForm" :rules="rules"> + <el-form-item + label="鐩綍鍚嶇О" + prop="name" + :label-width="formLabelWidth" > - <el-table-column type="selection" width="55"> </el-table-column> - <el-table-column prop="name" :label="$t('userManage.orgManageObj.name')"> </el-table-column> - <el-table-column prop="address" :label="$t('userManage.orgManageObj.coding')" show-overflow-tooltip> - </el-table-column> - <el-table-column - prop="address" - :label="$t('userManage.orgManageObj.codeOfAdministrativeDivision')" - show-overflow-tooltip - > - </el-table-column> - <el-table-column - prop="address" - :label="$t('userManage.orgManageObj.LevelForExaminationAndApproval')" - show-overflow-tooltip - > - </el-table-column> - <el-table-column - prop="address" - :label="$t('userManage.orgManageObj.seaAreaUseClass')" - show-overflow-tooltip - > - </el-table-column> - </el-table> - <div style="margin-top: 40px" class="pagination_box"> - <el-pagination - @size-change="handleSizeChange" - @current-change="handleCurrentChange" - :current-page="currentPage4" - :page-sizes="[10, 20, 30, 40]" - :page-size="10" - layout="total, sizes, prev, pager, next, jumper" - :total="10" - > - </el-pagination> - </div> - <div slot="footer" class="dialog-footer"> - <el-button type="primary">{{$t('userManage.orgManageObj.confirm')}}</el-button> - <el-button @click="innerVisible1 = false">{{$t('userManage.orgManageObj.close')}}</el-button> - - </div> - </el-dialog> - <el-form - :model="ruleForm" - :rules="rules" - ref="ruleForm" - label-width="150px" - > - <div class="flexForm"> - <div style="width: 50%"> - <el-form-item :label="$t('userManage.orgManageObj.companyName')" prop="name"> - <el-input v-model="ruleForm.name"></el-input> - </el-form-item> - <el-form-item :label="$t('userManage.orgManageObj.pinyinInitials')" prop="name"> - <el-input v-model="ruleForm.name"></el-input> - </el-form-item> - <el-form-item :label="$t('userManage.orgManageObj.abbreviation')" prop="name"> - <el-input v-model="ruleForm.name"></el-input> - </el-form-item> - <el-form-item :label="$t('userManage.orgManageObj.unitCode')" prop="name"> - <el-input v-model="ruleForm.name"></el-input> - </el-form-item> - <el-form-item :label="$t('userManage.orgManageObj.organizationCode')" prop="name"> - <el-input v-model="ruleForm.name"></el-input> - </el-form-item> - <el-form-item :label="$t('userManage.orgManageObj.companyAdministrator')" prop="name"> - <el-input - v-model="ruleForm.name" - :disabled="true" - style="width: calc(100% - 138px)" - ></el-input> - <el-button - type="primary" - icon="el-icon-more" - @click="innerVisible = true" - ></el-button> - <el-button type="danger">娓呴櫎</el-button> - </el-form-item> - <el-form-item :label="$t('userManage.orgManageObj.phone')" prop="name"> - <el-input v-model="ruleForm.name"></el-input> - </el-form-item> - </div> - <div style="width: 50%"> - <el-form-item :label="$t('userManage.orgManageObj.picture')"> - <el-upload - :auto-upload="false" - class="avatar-uploader" - action="#" - :show-file-list="false" - :http-request="request" - :limit="1" - > - <img v-if="imageUrl" :src="imageUrl" class="avatar" /> - <i v-else class="el-icon-plus avatar-uploader-icon"></i> - </el-upload> - </el-form-item> - <el-form-item :label="$t('userManage.orgManageObj.flatType')" prop="region"> - <el-select - v-model="ruleForm.region" - placeholder="" - style="width: 100%" - > - <el-option - label="娴峰煙琛屾斂閮ㄩ棬" - value="娴峰煙琛屾斂閮ㄩ棬" - ></el-option> - <el-option - label="娴峰煙鐩戞祴閮ㄩ棬" - value="娴峰煙鐩戞祴閮ㄩ棬" - ></el-option> - <el-option - label="娴风洃鎵ф硶閮ㄩ棬" - value="娴风洃鎵ф硶閮ㄩ棬" - ></el-option> - <el-option label="鎶�鏈腑蹇�" value="鎶�鏈腑蹇�"></el-option> - <el-option label="淇℃伅涓績" value="淇℃伅涓績"></el-option> - <el-option label="鐢ㄦ捣鍗曚綅" value="鐢ㄦ捣鍗曚綅"></el-option> - </el-select> - </el-form-item> - - <el-form-item :label="$t('userManage.orgManageObj.division')" prop="name"> - <el-input - v-model="ruleForm.name" - :disabled="true" - style="width: calc(100% - 138px)" - ></el-input> - <el-button - type="primary" - icon="el-icon-more" - @click="innerVisible1 = true" - ></el-button> - <el-button type="danger">娓呴櫎</el-button> - </el-form-item> - <el-form-item :label="$t('userManage.orgManageObj.EMail')" prop="name"> - <el-input v-model="ruleForm.name"></el-input> - </el-form-item> - <el-form-item :label="$t('userManage.orgManageObj.fax')" prop="name"> - <el-input v-model="ruleForm.name"></el-input> - </el-form-item> - <el-form-item :label="$t('userManage.orgManageObj.postalCode')" prop="name"> - <el-input v-model="ruleForm.name"></el-input> - </el-form-item> - </div> - </div> - - <el-form-item :label="$t('userManage.orgManageObj.website')" prop="name"> - <el-input v-model="ruleForm.name"></el-input> + <el-input v-model="ruleForm.name" autocomplete="off"></el-input> </el-form-item> - <el-form-item :label="$t('userManage.orgManageObj.cmpanyAddress')" prop="name"> - <el-input v-model="ruleForm.name"></el-input> + <el-form-item label="鐩綍璇存槑" :label-width="formLabelWidth"> + <el-input v-model="ruleForm.descr" autocomplete="off"></el-input> </el-form-item> - <el-form-item :label="$t('userManage.orgManageObj.companyIntroduction')" prop="name"> - <el-input - type="textarea" - :rows="2" - placeholder="" - v-model="ruleForm.textarea" - > - </el-input> + <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 type="primary" @click="submitForm('ruleForm')" - >{{$t('userManage.orgManageObj.immediatelyCreate')}}</el-button + <el-button @click="resetForm('ruleForm')">鍙栨秷</el-button> + <el-button + type="primary" + @click="submitForm('ruleForm')" + v-loading.fullscreen.lock="fullscreenLoading" + >鎻愪氦</el-button > - <el-button @click="resetForm('ruleForm')">{{$t('userManage.orgManageObj.reset')}}</el-button> </div> </el-dialog> </div> @@ -390,317 +124,288 @@ <script> import MyBread from "../../components/MyBread.vue"; - +import { + queryDepTree, + updateDepTree, + updateDepTrees, + queryMaxId, +} from "../../api/api"; export default { //import寮曞叆鐨勭粍浠堕渶瑕佹敞鍏ュ埌瀵硅薄涓墠鑳戒娇鐢� components: { MyBread, }, - data() { + let validName = (rule, value, callback) => { + if (value === "") { + return callback(new Error("鐩綍鍚嶇О涓嶈兘涓虹┖")); + } else { + callback(); + } + }; return { - dialogTitle:"鐢ㄦ埛-鍒楄〃", - tableData1: [ - { - date: "2016-05-03", - name: "鐜嬪皬铏�", - address: "涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1518 寮�", - }, - { - date: "2016-05-02", - name: "鐜嬪皬铏�", - address: "涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1518 寮�", - }, - { - date: "2016-05-04", - name: "鐜嬪皬铏�", - address: "涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1518 寮�", - }, - { - date: "2016-05-01", - name: "鐜嬪皬铏�", - address: "涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1518 寮�", - }, - { - date: "2016-05-08", - name: "鐜嬪皬铏�", - address: "涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1518 寮�", - }, - { - date: "2016-05-06", - name: "鐜嬪皬铏�", - address: "涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1518 寮�", - }, - { - date: "2016-05-07", - name: "鐜嬪皬铏�", - address: "涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1518 寮�", - }, - ], - imageUrl: "", - ruleForm: { - name: "", - region: "", - date1: "", - date2: "", - delivery: false, - type: [], - resource: "", - desc: "", - }, - rules: { - name: [ - { required: true, message: "璇疯緭鍏ユ椿鍔ㄥ悕绉�", trigger: "blur" }, - { min: 3, max: 5, message: "闀垮害鍦� 3 鍒� 5 涓瓧绗�", trigger: "blur" }, - ], - region: [ - { required: true, message: "璇烽�夋嫨娲诲姩鍖哄煙", trigger: "change" }, - ], - date1: [ - { - type: "date", - required: true, - message: "璇烽�夋嫨鏃ユ湡", - trigger: "change", - }, - ], - date2: [ - { - type: "date", - required: true, - message: "璇烽�夋嫨鏃堕棿", - trigger: "change", - }, - ], - type: [ - { - type: "array", - required: true, - message: "璇疯嚦灏戦�夋嫨涓�涓椿鍔ㄦ�ц川", - trigger: "change", - }, - ], - resource: [ - { required: true, message: "璇烽�夋嫨娲诲姩璧勬簮", trigger: "change" }, - ], - desc: [{ required: true, message: "璇峰~鍐欐椿鍔ㄥ舰寮�", trigger: "blur" }], - }, - outerVisible: false, - innerVisible: false, - innerVisible1: false, - formInline: { - user: "", - region: "", - }, - currentPage4: 4, - tableData: [ - { - menuname: "鏁版嵁璐ㄦ", - parentmenuname: "", - dataBulk: "1", - creationtime: "2022-7-20", - creationname: "寮犱笁", - }, - { - menuname: "鏁版嵁浜ゆ崲", - parentmenuname: "", - dataBulk: "1", - creationtime: "2022-7-20", - creationname: "寮犱笁", - }, - { - menuname: "鏁版嵁绠$悊", - parentmenuname: "", - dataBulk: "1", - creationtime: "2022-7-20", - creationname: "寮犱笁", - }, - { - menuname: "鏈嶅姟绠$悊", - parentmenuname: "", - dataBulk: "1", - creationtime: "2022-7-20", - creationname: "寮犱笁", - }, - { - menuname: "缁煎悎灞曠ず", - parentmenuname: "", - dataBulk: "1", - creationtime: "2022-7-20", - creationname: "寮犱笁", - }, - { - menuname: "杩愮淮绠$悊", - parentmenuname: "", - dataBulk: "1", - creationtime: "2022-7-20", - creationname: "寮犱笁", - }, - { - menuname: "鑿滃崟绠$悊", - parentmenuname: "杩愮淮绠$悊", - dataBulk: "1", - creationtime: "2022-7-20", - creationname: "寮犱笁", - }, - { - menuname: "鐢ㄦ埛绠$悊", - parentmenuname: "杩愮淮绠$悊", - dataBulk: "1", - creationtime: "2022-7-20", - creationname: "寮犱笁", - }, - { - menuname: "绯荤粺绠$悊", - parentmenuname: "杩愮淮绠$悊", - dataBulk: "1", - creationtime: "2022-7-20", - creationname: "寮犱笁", - }, - { - menuname: "绯荤粺閰嶇疆", - parentmenuname: "杩愮淮绠$悊", - dataBulk: "1", - creationtime: "2022-7-20", - creationname: "寮犱笁", - }, - ], - data: [ - { - id: 1, - label: "涓�绾� 1", - children: [ - { - id: 4, - label: "浜岀骇 1-1", - children: [ - { - id: 9, - label: "涓夌骇 1-1-1", - }, - { - id: 10, - label: "涓夌骇 1-1-2", - }, - ], - }, - ], - }, - { - id: 2, - label: "涓�绾� 2", - children: [ - { - id: 5, - label: "浜岀骇 2-1", - }, - { - id: 6, - label: "浜岀骇 2-2", - }, - ], - }, - { - id: 3, - label: "涓�绾� 3", - children: [ - { - id: 7, - label: "浜岀骇 3-1", - }, - { - id: 8, - label: "浜岀骇 3-2", - children: [ - { - id: 11, - label: "涓夌骇 3-2-1", - }, - { - id: 12, - label: "涓夌骇 3-2-2", - }, - { - id: 13, - label: "涓夌骇 3-2-3", - }, - ], - }, - ], - }, - ], defaultProps: { children: "children", - label: "label", + label: "name", }, - multipleSelection: [], + fullscreenLoading: false, + oriData: [], //鍘熷鏍戞暟鎹� + depList: [], //el鏍戞暟鎹� + old_depData: [], //el鏍戞暟鎹�(鎷栧姩鍓�) + newData: [], //鎷栧姩鍚庡師濮嬫暟鎹� + itemdetail: { + addr: "", + bak: "", + code: "", + contact: "", + email: "", + fax: "", + name: "", + post: "", + sname: "", + uncode: "", + website: "", + }, + backUpData: {}, + formLabelWidth: "170px", + deleteIDs: "", + dialogFormVisible: false, + ruleForm: { + level: null, + orderNum: null, + pid: null, + name: "", + descr: "", + bak: "", + }, + rules: { + name: [{ validator: validName, trigger: "blur" }], + }, }; }, methods: { - handleSelectionChange(val) { - this.multipleSelection = val; + getMenuTree() { + //鑾峰彇鐩綍鏍戞渶澶D锛屾柊寤鸿妭鐐逛娇鐢� + // queryMaxId().then((res) => { + // this.id = res.data; + // }); + queryDepTree().then((res) => { + if (res.code == 200) { + this.oriData = res.result; + this.newData = res.result; + this.depList = this.treeData(res.result); + } else { + console.log("鎺ュ彛鎶ラ敊"); + } + }); }, - request(param) {}, - onSubmit() { - console.log("submit!"); + 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 == 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; + // console.log(data); + // console.log(node); + }, + resetForm(formName) { + this.dialogFormVisible = false; + 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 = ""; //娓呯┖楠岃瘉鐮佽緭鍏ユ鐨勫唴瀹� + } else { + // alert("鐩綍鍚嶇О涓嶈兘涓虹┖"); + return false; + } + }); + }, + remove(node, data) { + 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); + children.forEach((item, index) => { + item.orderNum = index + 1; + }); + + this.traverseArr(data); + console.log(this.deleteIDs); + this.$message({ + type: "success", + message: "鍒犻櫎鎴愬姛!", + }); + }) + .catch(() => { + this.$message({ + type: "info", + 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.deleteIDs += "id=" + item.id + "&"; + this.traverseArr(item); + }); + } + return; + }, + 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); + }, []); }, handleDragStart(node, ev) { - console.log("drag start", node); - }, - handleDragEnter(draggingNode, dropNode, ev) { - console.log("tree drag enter: ", dropNode.label); - }, - handleDragLeave(draggingNode, dropNode, ev) { - console.log("tree drag leave: ", dropNode.label); - }, - handleDragOver(draggingNode, dropNode, ev) { - console.log("tree drag over: ", dropNode.label); - }, - handleDragEnd(draggingNode, dropNode, dropType, ev) { - console.log("tree drag end: ", dropNode && dropNode.label, dropType); + this.old_depData = JSON.parse(JSON.stringify(this.depList)); //灏嗗浠界殑dir閲嶆柊璧嬪�� }, handleDrop(draggingNode, dropNode, dropType, ev) { - console.log("tree drop: ", dropNode.label, dropType); + this.$confirm("姝ゆ搷浣滃皢淇濆瓨鐩綍鏇存敼, 鏄惁缁х画?", "鎻愮ず", { + confirmButtonText: "纭畾", + cancelButtonText: "鍙栨秷", + type: "warning", + }) + .then(() => { + //鐖惰妭鐐� + let data = dropType != "inner" ? dropNode.parent.data : dropNode.data; + // 鐖惰妭鐐逛腑鍏ㄩ儴瀛愯妭鐐� + 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; + } else { + item.pid = dropNode.data.pid; + } + } else { + item.pid = data.id; + } + item.orderNum = i + 1; + }); + // console.log(nodeData); + //鏇存柊鍘熷鏁翠綋鏁版嵁 + let arr = []; + this.oriData.forEach((e) => { + nodeData.forEach((item) => { + if (item.id === e.id) e = item; + }); + arr.push(e); + }); + this.newData = arr; + }) + .catch(() => { + this.$message({ + type: "info", + message: "宸插彇娑堟洿鏀�", + }); + this.depList = this.old_depData; //灏嗗浠界殑dir閲嶆柊璧嬪�� + }); }, - allowDrop(draggingNode, dropNode, type) { - if (dropNode.data.label === "浜岀骇 3-1") { - return type !== "inner"; - } else { - return true; - } + sendChange() { + updateDepTrees(this.newData) + .then((res) => { + // console.log(res); + if (res.code == 200) { + this.$message({ + type: "success", + message: "鏇存柊鎴愬姛!", + }); + } + }) + .catch(() => { + alert("淇敼澶辫触锛岃閲嶈瘯锛�"); + }); }, - allowDrag(draggingNode) { - return draggingNode.data.label.indexOf("涓夌骇 3-2-2") === -1; + handleNodeClick(data) { + // console.log(data); + this.backUpData = JSON.stringify(data); + this.itemdetail = JSON.parse(JSON.stringify(data)); }, - handleSizeChange(val) { - console.log(`姣忛〉 ${val} 鏉); + updDep() { + updateDepTree(this.itemdetail).then((res) => { + console.log(res); + }); }, - handleCurrentChange(val) { - console.log(`褰撳墠椤�: ${val}`); + reset() { + this.itemdetail = JSON.parse(this.backUpData); }, - handleCheckChange() {}, }, - created() { - + mounted() { + this.getMenuTree(); }, - mounted(){ - - // this.$nextTick(() => { - // console.log($t('operatManage.operationLogObj.add')) - // }); - } }; </script> <style lang="less" scoped> //@import url(); 寮曞叆鍏叡css绫� .menuSettings_box { - // background: rgb(240, 242, 245); border-radius: 10px; height: 100%; padding: 10px; box-sizing: border-box; display: flex; .menuSettings_tree { + position: relative; width: 344px; height: 100%; background: rgb(240, 242, 245); @@ -708,18 +413,41 @@ border-radius: 10px; box-sizing: border-box; overflow: auto; - .el-tree { - background: transparent; - /deep/ .el-tree-node__label { - font-size: 18px; - } - /deep/ .el-tree-node { - padding-top: 10px; - padding-bottom: 10px; + .saveBtn { + position: absolute; + left: 250px; + top: 23px; + } + .menuTreeBox { + height: 88%; + width: 100%; + overflow: auto; + .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-left: 5px; + .el-button + .el-button { + margin-left: 5px; + } + } } } } - .menuSettings { + .itemSettings { width: calc(100% - 344px); border-radius: 10px; background: rgb(240, 242, 245); @@ -727,66 +455,33 @@ height: 100%; padding: 10px; box-sizing: border-box; - overflow: auto; - .btn_box { + .title_box { background: #fff; padding: 10px; margin-bottom: 24px; - + display: flex; border-radius: 10px; border: 1px solid rgb(202, 201, 204); box-sizing: border-box; - .delBtn { - margin-left: auto; - } - .herder_box { - padding: 10px; - border-bottom: 1px solid #ccc; - margin-bottom: 20px; - font-size: 14px; - } } - .table_box { + .form_box { border: 1px solid rgb(202, 201, 204); border-radius: 10px; background: #fff; - padding: 10px; + padding-top: 30px; box-sizing: border-box; width: 100%; - .el-table__body { - width: 100% !important; + .el-input, + /deep/ .el-textarea { + width: 400px; + } + .btnBox { + margin: 0 270px 20px; + width: 200px; + display: flex; + justify-content: space-between; } } } -} -.avatar-uploader { - width: 120px; - height: 120px; - border: 1px dashed #c0ccda; - border-radius: 6px; - cursor: pointer; - position: relative; - overflow: hidden; -} -.avatar-uploader:hover { - border-color: #409eff; -} -.avatar-uploader-icon { - font-size: 28px; - color: #8c939d; - width: 120px; - height: 120px; - line-height: 120px; - text-align: center; -} -.avatar { - width: 120px; - height: 120px; - display: block; -} -.flexForm { - display: flex; - justify-content: space-between; - align-items: center; } </style> diff --git a/src/views/userManage/userInfoManage.vue b/src/views/userManage/userInfoManage.vue index f758634..3d3de5d 100644 --- a/src/views/userManage/userInfoManage.vue +++ b/src/views/userManage/userInfoManage.vue @@ -9,18 +9,18 @@ <el-divider /> <div class="inquire"> <el-form ref="ruleForm" :model="form" :inline="true"> - <el-form-item :label="$t('operatManage.ELM.username')" prop="username"> + <el-form-item :label="$t('operatManage.ELM.username')" prop="name"> <el-input - v-model="form.username" + v-model="form.name" :placeholder="$t('operatManage.ELM.usernameInfo')" /> </el-form-item> - <el-form-item + <!-- <el-form-item :label="$t('userManage.userInfoObj.userStatus')" - prop="ownedSystem" + prop="userStatus" > <el-select - v-model="form.ownedSystem" + v-model="form.userStatus" :placeholder="$t('userManage.userInfoObj.userStatus')" > <el-option :label="$t('userManage.userInfoObj.all')" value="all" /> @@ -45,13 +45,13 @@ value="rejection" /> </el-select> - </el-form-item> + </el-form-item> --> <el-form-item - :label="$t('userManage.userInfoObj.companyName')" - prop="requestIp" + :label="$t('userManage.userInfoObj.depName')" + prop="depName" > <el-input - v-model="form.requestIp" + v-model="form.depName" :placeholder="$t('common.pleaseInput')" /> </el-form-item> @@ -59,95 +59,130 @@ <el-form-item> <el-button type="success" size="small" @click="showAddDialog" ><i class="el-icon-plus"></i> {{ - $t('common.append') + $t("common.append") }}</el-button - > - <el-button type="primary" size="small"> - {{ $t('userManage.userInfoObj.userinput') }}</el-button - > - <el-button type="primary" size="small"> - {{ $t('userManage.userInfoObj.userexport') }}</el-button > </el-form-item> <el-form-item style="margin-left: 60%"> - <el-button @click="onSubmit" + <el-button @click="onSubmit" size="mini" ><i class="el-icon-search"></i> {{ - $t('operatManage.ELM.search') + $t("operatManage.ELM.search") }}</el-button > </el-form-item> <el-form-item> - <el-button @click="resetForm('ruleForm')" + <el-button @click="resetForm('ruleForm')" size="mini" ><i class="el-icon-delete"></i> {{ - $t('operatManage.ELM.reset') + $t("operatManage.ELM.reset") }}</el-button > </el-form-item> </el-form> </div> <div class="table_box"> - <el-table :data="tableData" stripe style="width: 100%" height="99%"> + <el-table + :data="tableData" + stripe + border + style="width: 100%" + max-height="99%" + > <el-table-column align="center" type="index" - :label="$t('operatManage.ELM.index')" - width="70px" + :label="$t('common.index')" + fixed /> <el-table-column align="center" - prop="username" - width="220px" - :label="$t('userManage.userInfoObj.chineseName')" + prop="uname" + :label="$t('userManage.userInfoObj.uname')" + fixed /> <el-table-column align="center" - prop="ip" - width="220px" - :label="$t('userManage.userInfoObj.affiliatedUnit')" + prop="pwd" + :label="$t('userManage.userInfoObj.pwd')" /> + <el-table-column align="center" - prop="ownedSystem" - width="230px" - :label="$t('userManage.userInfoObj.mobileNumber')" - /> - <el-table-column - align="center" - prop="largeModuleName" - :label="$t('userManage.userInfoObj.state')" + prop="sex" + :label="$t('userManage.userInfoObj.sex')" > <template slot-scope="scope"> - <el-tag v-if="scope.row.largeModuleName == '姝e父'" type="success">{{ - scope.row.largeModuleName - }}</el-tag> - <el-tag v-if="scope.row.largeModuleName == '寮傚父'" type="danger">{{ - scope.row.largeModuleName - }}</el-tag> + <span v-if="scope.row.sex == 1"> 鐢� </span> + <span v-else-if="scope.row.sex == 0">濂�</span> + <span v-else>鏈煡</span> </template> </el-table-column> <el-table-column align="center" - prop="smallModuleName" - :label="$t('userManage.userInfoObj.post')" + prop="natives" + :label="$t('userManage.userInfoObj.natives')" /> <el-table-column align="center" - prop="resourceName" - :label="$t('userManage.userInfoObj.addtime')" + prop="depName" + :label="$t('userManage.userInfoObj.depName')" /> <el-table-column - fixed="right" - :label="$t('common.operate')" - width="200" + align="center" + prop="idcard" + :label="$t('userManage.userInfoObj.idcard')" + /><el-table-column + align="center" + prop="job" + :label="$t('userManage.userInfoObj.job')" + /> + <el-table-column + align="center" + prop="edu" + :label="$t('userManage.userInfoObj.edu')" + /> + <el-table-column + align="center" + prop="addr" + :label="$t('userManage.userInfoObj.addr')" + /> + <el-table-column + align="center" + prop="email" + :label="$t('userManage.userInfoObj.email')" + /> + <el-table-column + align="center" + prop="contact" + :label="$t('userManage.userInfoObj.contact')" + /> + + <el-table-column + align="center" + prop="largeModuleName" + :label="$t('userManage.userInfoObj.status')" > + <template slot-scope="scope"> + <el-tag v-if="scope.row.status == 0" type="success">姝e父</el-tag> + <el-tag v-if="scope.row.status == 1" type="info">绂佺敤</el-tag> + <el-tag v-if="scope.row.status == 2" type="warning">鍒犻櫎</el-tag> + <el-tag v-if="scope.row.status == 3">鐢宠</el-tag> + <el-tag v-if="scope.row.status == 4" type="danger">鎷掓壒</el-tag> + </template> + </el-table-column> + <el-table-column + align="center" + prop="bak" + :label="$t('userManage.userInfoObj.bak')" + /> + <el-table-column :label="$t('common.operate')" fixed="right"> <template #default> <!-- <el-button type="primary" size="small">淇敼</el-button> --> - <el-button type="warning" size="small">{{ - $t('common.edit') + <el-button type="warning" size="mini">{{ + $t("common.edit") }}</el-button> - <el-button type="danger" size="small">{{ - $t('common.delete') + <el-button type="danger" size="mini">{{ + $t("common.delete") }}</el-button> </template> </el-table-column> @@ -160,424 +195,87 @@ :page-sizes="[10, 20, 30, 40]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" - :total="9" + :total="1" > </el-pagination> </div> </div> - <el-dialog :visible.sync="dialogTableVisible" width="57%" > - <el-tabs v-model="activeName" @tab-click="handleClick"> - <el-tab-pane - :label="$t('userManage.userInfoObj.userAccount')" - name="first" - > - <el-form - :model="ruleForm" - :rules="rules" - ref="ruleForm" - label-width="100px" - class="demo-ruleForm" - > - <el-form-item - :label="$t('userManage.userInfoObj.username')" - prop="name" - > - <el-input v-model="ruleForm.name"></el-input> - </el-form-item> - <el-form-item - :label="$t('userManage.userInfoObj.userpssword')" - prop="password" - > - <el-input type="password" v-model="ruleForm.password"></el-input> - </el-form-item> - <el-form-item - :label="$t('userManage.userInfoObj.userstate')" - prop="password" - > - <label>{{ $t('userManage.userInfoObj.toapplied') }}</label> - </el-form-item> - </el-form> - </el-tab-pane> - <el-tab-pane - :label="$t('userManage.userInfoObj.userInformation')" - name="second" - > - <el-form - :model="ruleForm" - :rules="rules" - ref="ruleForm" - label-width="180px" - class="demo-ruleForm" - > - <el-row> - <el-col :span="12"> - <el-form-item - <el-form-item - :label="$t('userManage.userInfoObj.userchinesename')" - prop="name" - > - <el-input v-model="ruleForm.name"></el-input> - </el-form-item> - <el-form-item - <el-form-item - :label="$t('userManage.userInfoObj.username')" - prop="name" - > - <el-input v-model="ruleForm.name"></el-input> - </el-form-item> - <el-form-item - <el-form-item - :label="$t('userManage.userInfoObj.sex')" - > - <el-radio v-model="radio" label="1">{{$t('userManage.userInfoObj.userMan')}}</el-radio> - <el-radio v-model="radio" label="2">{{$t('userManage.userInfoObj.userWoMan')}}</el-radio> - </el-form-item> - <el-form-item - <el-form-item - :label="$t('userManage.userInfoObj.nativePlace')" - > - <el-input v-model="ruleForm.name"></el-input> - </el-form-item> - </el-col> - <el-col :span="12"> - <div style="margin-left: 35px"> - <div - style=" - width: 205px; - height: 185px; - border: 1px solid gray; - margin: 5px; - " - > - <img /> - </div> - <el-upload - class="upload-demo" - action="https://jsonplaceholder.typicode.com/posts/" - list-type="picture" - > - <el-button size="small" type="primary">{{$t('common.clickupload')}}</el-button> - <span style="color: red" - > {{$t('userManage.userInfoObj.spantitle1')}}</span - > - </el-upload> - </div> - </el-col> - </el-row> - <el-row> - <el-col :span="12"> - <el-form-item - <el-form-item - :label="$t('userManage.userInfoObj.identityCard')" - > - <el-input v-model="ruleForm.name"></el-input> - </el-form-item> - </el-col> - <el-col :span="12" - ><el-form-item - <el-form-item - :label="$t('userManage.userInfoObj.education')" - - > - <el-select - v-model="form.region1" - class="select" - :placeholder="$t('userManage.userInfoObj.pleaseSelect')" - > - <el-option :label="$t('userManage.userInfoObj.doctor')" value="a1" /> - <el-option :label="$t('userManage.userInfoObj.master')" value="a2" /> - <el-option :label="$t('userManage.userInfoObj.undergraduate')" value="a3" /> - <el-option :label="$t('userManage.userInfoObj.juniorCollege')" value="a4" /> - <el-option :label="$t('userManage.userInfoObj.other')" value="a5" /> - </el-select> - </el-form-item> - </el-col> - </el-row> - <el-row> - <el-col :span="12"> - <el-form-item - <el-form-item - :label="$t('userManage.userInfoObj.occupation')" - > - <el-select - v-model="form.region2" - class="select" - :placeholder="$t('userManage.userInfoObj.pleaseSelect')" - > - <el-option :label="$t('userManage.userInfoObj.assistant')" value="b1" /> - <el-option :label="$t('userManage.userInfoObj.intermediate')" value="b2" /> - <el-option :label="$t('userManage.userInfoObj.senior')" value="b3" /> - </el-select> - </el-form-item> - </el-col> - <el-col :span="12" - ><el-form-item - <el-form-item - :label="$t('userManage.userInfoObj.post')" - - > - <el-select - class="select" - v-model="form.region3" - :placeholder="$t('userManage.userInfoObj.pleaseSelect')" - > - <el-option :label="$t('userManage.userInfoObj.v1')" value="c1" /> - <el-option :label="$t('userManage.userInfoObj.fv1')" value="c2" /> - <el-option :label="$t('userManage.userInfoObj.v2')" value="c3" /> <el-option :label="$t('userManage.userInfoObj.fv2')" value="c4" /> - <el-option :label="$t('userManage.userInfoObj.v3')" value="c5" /> - <el-option :label="$t('userManage.userInfoObj.fv3')" value="c6" /> - <el-option :label="$t('userManage.userInfoObj.v4')" value="c7" /> - <el-option :label="$t('userManage.userInfoObj.fv4')" value="c8" /> - <el-option :label="$t('userManage.userInfoObj.v5')" value="c9" /> - <el-option :label="$t('userManage.userInfoObj.fv5')" value="c10" /> - <el-option :label="$t('userManage.userInfoObj.v6')" value="c11" /> - <el-option :label="$t('userManage.userInfoObj.v7')" value="c12" /> <el-option :label="$t('userManage.userInfoObj.fv7')" value="c13" /> - <el-option :label="$t('userManage.userInfoObj.v8')" value="c14" /> - <el-option :label="$t('userManage.userInfoObj.v9')" value="c15" /> - <el-option :label="$t('userManage.userInfoObj.fv9')" value="c16" /> - - </el-select> - </el-form-item> - </el-col> - </el-row> - <el-row> - <el-col :span="12"> - <el-form-item - <el-form-item - :label="$t('userManage.userInfoObj.email')" - - > - <el-input v-model="ruleForm.name"></el-input> - </el-form-item> - </el-col> - <el-col :span="12"> - <el-form-item - <el-form-item - :label="$t('userManage.userInfoObj.major')" - - > - <el-input v-model="ruleForm.name"></el-input> - </el-form-item> - </el-col> - </el-row> - <el-row> - <el-col :span="12"> - <el-form-item - :label="$t('userManage.userInfoObj.phoneNumber')" - - > - <el-input - v-model="ruleForm.name" - style="width: 225px" - ></el-input> - <el-checkbox style="margin-left: 10px" v-model="checked" - >{{$t('userManage.userInfoObj.receiveSMS')}}</el-checkbox - > - </el-form-item> - </el-col> - <el-col :span="12"> - <el-form-item - :label="$t('userManage.userInfoObj.officeTelephone')" - - > - <el-input v-model="ruleForm.name"></el-input> - </el-form-item> - </el-col> - </el-row> - - <el-row> - <el-col :span="24"> - <el-form-item - :label="$t('userManage.userInfoObj.addressbook')" - - > - <el-input style="width:755px" v-model="ruleForm.name"></el-input> - </el-form-item> - </el-col> - </el-form-item> - </el-row> - <el-row> - <el-col :span="24"> - <el-form-item - :label="$t('userManage.userInfoObj.remarks')" - > - <el-input type="textarea" style="width:755px" v-model="ruleForm.name"></el-input> - </el-form-item> - </el-col> - </el-form-item> - </el-row> - <el-row> - <el-col :span="24"> - <el-form-item - :label="$t('userManage.userInfoObj.scanningcopy')" - - > - <el-upload - class="upload-demo" - action="https://jsonplaceholder.typicode.com/posts/" - list-type="picture" - > - <el-button size="small" type="primary">{{$t('common.upload')}}</el-button> - <span style="color: red" - > {{$t('userManage.userInfoObj.spantitle2')}}</span> - </el-upload> - </el-form-item> - </el-col> - </el-form-item> - </el-row> - </el-form> - </el-tab-pane> - </el-tabs> - <el-button type="primary" @click="onSubmit">{{$t('common.preservation')}}</el-button> - <el-button>{{$t('common.close')}}</el-button> - </el-dialog> </div> </template> <script> -import MyBread from '../../components/MyBread.vue'; - +import MyBread from "../../components/MyBread.vue"; +import { queryPageUser } from "../../api/api"; export default { //import寮曞叆鐨勭粍浠堕渶瑕佹敞鍏ュ埌瀵硅薄涓墠鑳戒娇鐢� components: { MyBread, }, - data() { + let validName = (rule, value, callback) => { + if (value === "") { + return callback(new Error("鐩綍鍚嶇О涓嶈兘涓虹┖")); + } else { + callback(); + } + }; return { currentPage: 1, - dialogTableVisible: false, - activeName: 'first', - ruleForm: { name: '', password: '' }, - ruleForm1: { - name: '', - value: '', + form: { + username: "", + userStatus: "all", + requestIp: "", + }, + tableData: [], + fullscreenLoading: false, + itemdetail: {}, + formLabelWidth: "170px", + dialogFormVisible: false, + ruleForm: { + level: null, + orderNum: null, + pid: null, + name: "", + descr: "", + bak: "", }, rules: { - name: [ - { required: true, message: '璇疯緭鍏ョ敤鎴峰悕', trigger: 'blur' }, - { min: 3, max: 5, message: '闀垮害鍦� 3 鍒� 5 涓瓧绗�', trigger: 'blur' }, - ], - password: [ - { required: true, message: '璇疯緭鍏ュ瘑鐮�', trigger: 'blur' }, - { - trigger: 'blur', - validator: (rule, value, callback) => { - var passwordreg = - /(?=.*\d)(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{8,20}/; - if (!passwordreg.test(value)) { - callback( - new Error('瀵嗙爜蹇呴』鐢辨暟瀛椼�佸瓧姣嶃�佺壒娈婂瓧绗︾粍鍚�,璇疯緭鍏�8-20浣�') - ); - } else { - callback(); - } - }, - }, - ], + name: [{ validator: validName, trigger: "blur" }], }, - form: { - username: '', - ownedSystem: 'all', - requestIp: '', - operationType: '', - date: '', - }, - tableData: [ - { - username: '绠$悊鍛�', - ip: '221.182.31.12', - date: '2022-08-05', - ownedSystem: '', - largeModuleName: '姝e父', - smallModuleName: '璧勬簮鎿嶄綔鏃ュ織', - resourceName: '', - operationType: '鏌ヨ', - }, - { - date: '2022-08-05', - username: '绠$悊鍛�', - ownedSystem: '', - largeModuleName: '姝e父', - smallModuleName: '璧勬簮鎿嶄綔鏃ュ織', - resourceName: '', - operationType: '鏌ヨ', - ip: '221.182.31.12', - }, - { - date: '2022-08-05', - username: '绠$悊鍛�', - ownedSystem: '', - largeModuleName: '寮傚父', - smallModuleName: '璧勬簮鎿嶄綔鏃ュ織', - resourceName: '', - operationType: '鏌ヨ', - ip: '221.182.31.12', - }, - { - date: '2022-08-05', - username: '绠$悊鍛�', - ownedSystem: '', - largeModuleName: '姝e父', - smallModuleName: '璧勬簮鎿嶄綔鏃ュ織', - resourceName: '', - operationType: '鏌ヨ', - ip: '221.182.31.12', - }, - { - date: '2022-08-05', - username: '绠$悊鍛�', - ownedSystem: '', - largeModuleName: '寮傚父', - smallModuleName: '璧勬簮鎿嶄綔鏃ュ織', - resourceName: '', - operationType: '鏌ヨ', - ip: '221.182.31.12', - }, - { - date: '2022-08-05', - username: '绠$悊鍛�', - ownedSystem: '', - largeModuleName: '寮傚父', - smallModuleName: '璧勬簮鎿嶄綔鏃ュ織', - resourceName: '', - operationType: '鏌ヨ', - ip: '221.182.31.12', - }, - { - date: '2022-08-05', - username: '绠$悊鍛�', - ownedSystem: '', - largeModuleName: '姝e父', - smallModuleName: '璧勬簮鎿嶄綔鏃ュ織', - resourceName: '', - operationType: '鏌ヨ', - ip: '221.182.31.12', - }, - { - date: '2022-08-05', - username: '绠$悊鍛�', - ownedSystem: '', - largeModuleName: '姝e父', - smallModuleName: '璧勬簮鎿嶄綔鏃ュ織', - resourceName: '', - operationType: '鏌ヨ', - ip: '221.182.31.12', - }, - { - date: '2022-08-05', - username: '绠$悊鍛�', - ownedSystem: '', - largeModuleName: '姝e父', - smallModuleName: '璧勬簮鎿嶄綔鏃ュ織', - resourceName: '', - operationType: '鏌ヨ', - ip: '221.182.31.12', - }, - ], }; }, methods: { + getUserInfo(params) { + // queryMaxId().then((res) => { + // this.id = res.data; + // }); + queryPageUser({ + pageIndex: 1, + pageSize: 10, + }).then((res) => { + if (res.code == 200) { + this.tableData = res.result; + } 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("鎺ュ彛鎶ラ敊"); + // } + // }); + // }, + handleSizeChange(val) { console.log(`姣忛〉 ${val} 鏉); }, @@ -585,7 +283,7 @@ console.log(`褰撳墠椤�: ${val}`); }, onSubmit() { - console.log('submit!'); + console.log("submit!"); }, resetForm(formName) { this.$refs[formName].resetFields(); @@ -594,7 +292,9 @@ this.dialogTableVisible = true; }, }, - created() { }, + mounted() { + this.getUserInfo(1, 10); + }, }; </script> <style> -- Gitblit v1.9.3