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/views/userManage/orgManage.vue | 760 ++++++++++++++++++++++++++++++++++++---------------------- 1 files changed, 470 insertions(+), 290 deletions(-) diff --git a/src/views/userManage/orgManage.vue b/src/views/userManage/orgManage.vue index d971cb8..912620e 100644 --- a/src/views/userManage/orgManage.vue +++ b/src/views/userManage/orgManage.vue @@ -1,307 +1,487 @@ <template> - <div class="logLog_box"> - <My-bread - :list="[ - `${$t('operatManage.operatManage')}`, - `${$t('operatManage.eventlogManage')}`, - ]" - ></My-bread> + <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 /> - <div class="inquire"> - <el-form ref="ruleForm" :model="form" :inline="true"> - <el-form-item :label="$t('operatManage.ELM.username')" prop="username"> - <el-input - v-model="form.username" - :placeholder="$t('operatManage.ELM.usernameInfo')" - /> - </el-form-item> - <el-form-item - :label="$t('operatManage.ELM.ownedSystem')" - prop="ownedSystem" - > - <el-select - v-model="form.ownedSystem" - :placeholder="$t('operatManage.ELM.please')" - > - <el-option :label="$t('operatManage.ELM.all')" value="all" /> - <el-option :label="$t('operatManage.ELM.one')" value="one" /> - </el-select> - </el-form-item> - <el-form-item - :label="$t('operatManage.ELM.operationType')" - prop="operationType" - > - <el-select - v-model="form.operationType" - :placeholder="$t('operatManage.ELM.please')" - > - <el-option :label="$t('operatManage.ELM.all')" value="all" /> - <el-option :label="$t('operatManage.ELM.add')" value="add" /> - <el-option :label="$t('operatManage.ELM.delete')" value="delete" /> - <el-option :label="$t('operatManage.ELM.edit')" value="edit" /> - <el-option :label="$t('operatManage.ELM.query')" value="query" /> - </el-select> - </el-form-item> - <el-form-item :label="$t('operatManage.ELM.date')" prop="date"> - <el-date-picker - v-model="form.date" - type="daterange" - align="right" - unlink-panels - :range-separator="$t('operatManage.ELM.to')" - :start-placeholder="$t('operatManage.ELM.startDate')" - :end-placeholder="$t('operatManage.ELM.endDate')" - > - </el-date-picker> - </el-form-item> - <el-form-item :label="$t('operatManage.ELM.ip')" prop="requestIp"> - <el-input v-model="form.requestIp" placeholder="璇疯緭鍏�" /> - </el-form-item> - <el-form-item> - <el-button @click="onSubmit" - ><i class="el-icon-search"></i> {{ - $t("operatManage.ELM.search") - }}</el-button - > - </el-form-item> - <el-form-item> - <el-button @click="resetForm('ruleForm')" - ><i class="el-icon-delete"></i> {{ - $t("operatManage.ELM.reset") - }}</el-button - > - </el-form-item> - </el-form> - </div> - <div class="table_box"> - <el-table :data="tableData" stripe style="width: 100%" height="99%"> - <el-table-column - align="center" - type="index" - :label="$t('operatManage.ELM.index')" - width="70px" - /> - <el-table-column - align="center" - prop="username" - :label="$t('operatManage.ELM.username')" - /> - <el-table-column - align="center" - prop="ip" - :label="$t('operatManage.ELM.ip')" - /> - <el-table-column - align="center" - prop="ownedSystem" - :label="$t('operatManage.ELM.ownedSystem')" - /> - <el-table-column - align="center" - prop="largeModuleName" - :label="$t('operatManage.ELM.largeModuleName')" - /> - <el-table-column - align="center" - prop="smallModuleName" - :label="$t('operatManage.ELM.smallModuleName')" - /> - <el-table-column - align="center" - prop="resourceName" - :label="$t('operatManage.ELM.resourceName')" - /> - <el-table-column - align="center" - prop="date" - :label="$t('operatManage.ELM.date')" - /> - <el-table-column - align="center" - prop="operationType" - :label="$t('operatManage.ELM.operationType')" - /> - </el-table> - <div style="margin-top: 40px" class="pagination_box"> - <el-pagination - @size-change="handleSizeChange" - @current-change="handleCurrentChange" - :current-page="currentPage" - :page-sizes="[10, 20, 30, 40]" - :page-size="10" - layout="total, sizes, prev, pager, next, jumper" - :total="9" - > - </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> - </template> - - <script> - import MyBread from "../../components/MyBread.vue"; - - export default { - //import寮曞叆鐨勭粍浠堕渶瑕佹敞鍏ュ埌瀵硅薄涓墠鑳戒娇鐢� - components: { - MyBread, + <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="itemdetail.contact" + autocomplete="off" + ></el-input> + </el-form-item> + <el-form-item label="浼犵湡" :label-width="formLabelWidth"> + <el-input v-model="itemdetail.fax" autocomplete="off"></el-input> + </el-form-item> + <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="itemdetail.website" + 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="updDep">淇濆瓨</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 label="鐩綍璇存槑" :label-width="formLabelWidth"> + <el-input v-model="ruleForm.descr" autocomplete="off"></el-input> + </el-form-item> + <el-form-item label="鐩綍澶囨敞" :label-width="formLabelWidth"> + <el-input v-model="ruleForm.bak" autocomplete="off"></el-input> + </el-form-item> + </el-form> + <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 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 { + defaultProps: { + children: "children", + label: "name", + }, + 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: { + 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("鎺ュ彛鎶ラ敊"); + } + }); }, - - data() { - return { - currentPage: 1, - form: { - username: "", - ownedSystem: "", - requestIp: "", - operationType: "", - date: "", - }, - tableData: [ - { - username: "绠$悊鍛�", - ip: "221.182.31.12", - date: "2022-08-05", - ownedSystem: "", - largeModuleName: "杩愮淮鐩戞帶", - smallModuleName: "璧勬簮鎿嶄綔鏃ュ織", - resourceName: "", - operationType: "鏌ヨ", - }, - { - 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: "杩愮淮鐩戞帶", - 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: "杩愮淮鐩戞帶", - 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", - }, - ], - }; + 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; // 杩斿洖涓�绾ц彍鍗� + }); }, - methods: { - handleSizeChange(val) { - console.log(`姣忛〉 ${val} 鏉); - }, - handleCurrentChange(val) { - console.log(`褰撳墠椤�: ${val}`); - }, - onSubmit() { - console.log("submit!"); - }, - resetForm(formName) { - this.$refs[formName].resetFields(); - }, + 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); }, - created() {}, - }; - </script> - <style lang="less" scoped> - //@import url(); 寮曞叆鍏叡css绫� - .logLog_box { + 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) { + this.old_depData = JSON.parse(JSON.stringify(this.depList)); //灏嗗浠界殑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.depList = this.old_depData; //灏嗗浠界殑dir閲嶆柊璧嬪�� + }); + }, + sendChange() { + updateDepTrees(this.newData) + .then((res) => { + // console.log(res); + if (res.code == 200) { + this.$message({ + type: "success", + message: "鏇存柊鎴愬姛!", + }); + } + }) + .catch(() => { + alert("淇敼澶辫触锛岃閲嶈瘯锛�"); + }); + }, + handleNodeClick(data) { + // console.log(data); + this.backUpData = JSON.stringify(data); + this.itemdetail = JSON.parse(JSON.stringify(data)); + }, + updDep() { + updateDepTree(this.itemdetail).then((res) => { + console.log(res); + }); + }, + reset() { + this.itemdetail = JSON.parse(this.backUpData); + }, + }, + mounted() { + this.getMenuTree(); + }, +}; +</script> +<style lang="less" scoped> +//@import url(); 寮曞叆鍏叡css绫� +.menuSettings_box { + 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); + padding: 20px; border-radius: 10px; + box-sizing: border-box; + overflow: auto; + .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; + } + } + } + } + } + .itemSettings { + width: calc(100% - 344px); + border-radius: 10px; + background: rgb(240, 242, 245); + margin-left: 10px; height: 100%; padding: 10px; box-sizing: border-box; - .el-input { - width: 300px; - } - .inquire { - height: 110px; - overflow: auto; - padding: 10px; - margin-top: 20px; + .title_box { background: #fff; - border-radius: 5px; + padding: 10px; + margin-bottom: 24px; + display: flex; + border-radius: 10px; border: 1px solid rgb(202, 201, 204); - margin-bottom: 20px; - .el-form-item { - margin: 7px; + 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; + } + .btnBox { + margin: 0 270px 20px; + width: 200px; + display: flex; + justify-content: space-between; } } - .table_box { - height: 65%; - padding: 10px; - background: #fff; - border-radius: 5px; - border: 1px solid rgb(202, 201, 204); - } - .text-center { - text-align: center; - } } - </style> - \ No newline at end of file +} +</style> -- Gitblit v1.9.3