From 410facfa35a29a14f2dc5a5d74629a8291148aff Mon Sep 17 00:00:00 2001
From: 王旭 <1377869194@qq.com>
Date: 星期三, 12 十月 2022 11:03:26 +0800
Subject: [PATCH] Merge branch 'master' of ssh://192.168.20.39:29418/LFWEB
---
src/views/datamanage/catalogueManage.vue | 525 ++++++++++++++++++++++++++++++++++++++++++++++++----------
1 files changed, 432 insertions(+), 93 deletions(-)
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 锛� 閭ｄ箞 a.c=b.c=c=1 锛涘悓鐞嗭紝鍚庣画浠� c.d=2 ,閭ｄ箞 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;
}
}
}
--
Gitblit v1.9.3