From 5aa3a9bdd9001e53f245efd40b0d39263caa4bfc Mon Sep 17 00:00:00 2001
From: Surpriseplus <845948745@qq.com>
Date: 星期六, 19 十一月 2022 17:27:53 +0800
Subject: [PATCH] 数据管理页面添加，修改
---
src/views/datamanage/catalogueManage.vue | 411 ++++++++++++++++++++++++++++++++++++----------------------
1 files changed, 252 insertions(+), 159 deletions(-)
diff --git a/src/views/datamanage/catalogueManage.vue b/src/views/datamanage/catalogueManage.vue
index 8c04871..498dd80 100644
--- a/src/views/datamanage/catalogueManage.vue
+++ b/src/views/datamanage/catalogueManage.vue
@@ -1,12 +1,14 @@
<template>
- <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="cataTreeBox">
+ <div class="cataLogBox">
+ <My-bread
+ :list="[
+ `${$t('dataManage.dataManage')}`,
+ `${$t('dataManage.catalogueManage')}`,
+ ]"
+ ></My-bread>
+ <el-divider />
+ <div class="cataLogContent">
+ <div class="cataLog_leftTree">
<el-tree
ref="tree"
:props="defaultProps"
@@ -40,24 +42,25 @@
</span>
</el-tree>
</div>
- </div>
- <div class="itemSettings">
- <div class="title_box">
- <h4>璇︾粏淇℃伅</h4>
- </div>
- <div class="form_box">
+ <div class="cataLog_rightContent">
+ <el-breadcrumb separator="/">
+ <el-breadcrumb-item :to="{ path: '/' }">{{
+ $t('dataManage.dictionaryManageObj.particulars')
+ }}</el-breadcrumb-item>
+ </el-breadcrumb>
+ <el-divider />
<el-form :model="itemdetail" ref="itemdetail" :rules="rules">
- <!-- <el-form-item label="鐩綍缂栫爜" :label-width="formLabelWidth">
- <el-input v-model="itemdetail.id" disabled />
- </el-form-item> -->
<el-form-item
prop="name"
- label="鐩綍鍚嶇О"
+ :label="$t('dataManage.dataUpObj.directoryName')"
:label-width="formLabelWidth"
>
<el-input v-model="itemdetail.name" />
</el-form-item>
- <el-form-item label="鐩綍璇存槑" :label-width="formLabelWidth">
+ <el-form-item
+ :label="$t('dataManage.dataUpObj.catalogDescription')"
+ :label-width="formLabelWidth"
+ >
<el-input
v-model="itemdetail.descr"
type="textarea"
@@ -65,45 +68,72 @@
style="height: 100%; overflow: auto"
/>
</el-form-item>
- <el-form-item label="鐩綍澶囨敞" :label-width="formLabelWidth">
+ <el-form-item
+ :label="$t('dataManage.dataUpObj.catalogRemarks')"
+ :label-width="formLabelWidth"
+ >
<el-input v-model="itemdetail.bak" type="textarea" resize="none" />
</el-form-item>
<div class="btnBox">
- <el-button type="primary" @click="updCata('itemdetail')"
- >淇濆瓨</el-button
- >
- <el-button type="primary" @click="reset('itemdetail')"
- >鍙栨秷</el-button
- >
+ <el-button class="primary" @click="updCata('itemdetail')">{{
+ $t('common.preservation')
+ }}</el-button>
+ <el-button type="info" @click="reset">{{
+ $t('common.cancel')
+ }}</el-button>
</div>
</el-form>
</div>
</div>
- '
+ <!-- <div class="cataSettings_tree"> -->
- <el-dialog title="鏂板瀛愮洰褰�" :visible.sync="dialogFormVisible">
+ <!-- <div class="cataTreeBox">
+
+ </div> -->
+ <!-- </div> -->
+ <!-- <div class="itemSettings"> -->
+ <!-- <div class="title_box">
+ <h4>璇︾粏淇℃伅</h4>
+ </div> -->
+ <!-- <div class="form_box">
+
+ </div> -->
+ <!-- </div> -->
+ <el-dialog
+ :title="$t('dataManage.dataUpObj.newDirectory')"
+ :visible.sync="dialogFormVisible"
+ :before-close="handleClose"
+ >
<el-form :model="ruleForm" ref="ruleForm" :rules="rules">
<el-form-item
- label="鐩綍鍚嶇О"
+ :label="$t('dataManage.dataUpObj.directoryName')"
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-form-item
+ :label="$t('dataManage.dataUpObj.catalogDescription')"
+ :label-width="formLabelWidth"
+ >
<el-input v-model="ruleForm.descr" autocomplete="off"></el-input>
</el-form-item>
- <el-form-item label="鐩綍澶囨敞" :label-width="formLabelWidth">
+ <el-form-item
+ :label="$t('dataManage.dataUpObj.catalogRemarks')"
+ :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 @click="resetForm('ruleForm')">{{
+ $t('common.cancel')
+ }}</el-button>
<el-button
- type="primary"
+ class="primary"
@click="submitForm('ruleForm')"
v-loading.fullscreen.lock="fullscreenLoading"
- >鎻愪氦</el-button
+ >{{ $t('common.preservation') }}</el-button
>
</div>
</el-dialog>
@@ -118,25 +148,25 @@
updateDirTrees,
insertDir,
deleteDir,
-} from "../../api/api";
-import MyBread from "../../components/MyBread.vue";
+} from '../../api/api';
+import MyBread from '../../components/MyBread.vue';
export default {
- name: "catalogueManage",
+ name: 'catalogueManage',
components: {
MyBread,
},
data() {
let validName = (rule, value, callback) => {
- if (value === "" || value === null || value === undefined) {
- return callback(new Error("鐩綍鍚嶇О涓嶈兘涓虹┖"));
+ if (value === '' || value === null || value === undefined) {
+ return callback(new Error('鐩綍鍚嶇О涓嶈兘涓虹┖'));
} else {
callback();
}
};
return {
defaultProps: {
- children: "children",
- label: "name",
+ children: 'children',
+ label: 'name',
},
fullscreenLoading: false,
oriData: [], //鍘熷鏍戞暟鎹�
@@ -144,21 +174,21 @@
old_dirDat: [], //el鏍戞暟鎹�(鎷栧姩鍓�)
newData: [], //鎷栧姩鍚庡師濮嬫暟鎹�
itemdetail: {},
- backUpData: "",
- formLabelWidth: "130px",
- delChildID: "",
+ backUpData: '',
+ formLabelWidth: '150px',
+ delChildID: '',
delChildIDs: [],
dialogFormVisible: false,
ruleForm: {
level: null,
orderNum: null,
pid: null,
- name: "",
- descr: "",
- bak: "",
+ name: '',
+ descr: '',
+ bak: '',
},
rules: {
- name: [{ required: true, validator: validName, trigger: "blur" }],
+ name: [{ required: true, validator: validName, trigger: 'blur' }],
},
};
},
@@ -177,16 +207,23 @@
this.newData = res.result;
this.dirList = this.treeData(res.result);
} else {
- console.log("鎺ュ彛鎶ラ敊");
+ console.log('鎺ュ彛鎶ラ敊');
}
});
+ },
+ handleClose() {
+ this.$confirm('纭鍏抽棴锛�')
+ .then((_) => {
+ this.resetForm();
+ })
+ .catch((_) => {});
},
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灞炴�э紝骞惰祴鍊�
+ 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; // 杩斿洖涓�绾ц彍鍗�
@@ -200,6 +237,7 @@
},
resetForm(formName) {
this.dialogFormVisible = false;
+ this.ruleForm = {};
this.$nextTick(() => {
this.ruleForm = {};
this.$refs[formName].resetFields();
@@ -216,8 +254,8 @@
this.fullscreenLoading = false;
if (res.code == 200) {
this.$message({
- message: "娣诲姞鎴愬姛",
- type: "success",
+ message: '娣诲姞鎴愬姛',
+ type: 'success',
});
this.itemdetail = {};
this.ruleForm = {};
@@ -228,7 +266,7 @@
})
.catch((res) => {
this.itemdetail = {};
- this.$message.error("娣诲姞澶辫触");
+ this.$message.error('娣诲姞澶辫触');
this.fullscreenLoading = false;
console.log(res);
});
@@ -240,10 +278,10 @@
});
},
remove(node, data) {
- this.$confirm("姝ゆ搷浣滃皢鍒犻櫎璇ヨ妭鐐�, 鏄惁缁х画?", "鎻愮ず", {
- confirmButtonText: "纭畾",
- cancelButtonText: "鍙栨秷",
- type: "warning",
+ this.$confirm('姝ゆ搷浣滃皢鍒犻櫎璇ヨ妭鐐�, 鏄惁缁х画?', '鎻愮ず', {
+ confirmButtonText: '纭畾',
+ cancelButtonText: '鍙栨秷',
+ type: 'warning',
})
.then(() => {
//鍏勫紵閲嶆柊鎺掑簭
@@ -265,20 +303,20 @@
console.log(res);
if (res[0].code == 200 && res[1].code == 200) {
this.$message({
- type: "success",
- message: "鍒犻櫎鎴愬姛!",
+ type: 'success',
+ message: '鍒犻櫎鎴愬姛!',
});
this.itemdetail = {};
} else if (res[0].code == 200) {
- this.$message.error("鍒犻櫎鎴愬姛锛屼綅缃皟鏁村け璐�");
+ this.$message.error('鍒犻櫎鎴愬姛锛屼綅缃皟鏁村け璐�');
} else if (res[1].code == 200) {
- this.$message.error("鍒犻櫎澶辫触,浣嶇疆璋冩暣鎴愬姛");
+ this.$message.error('鍒犻櫎澶辫触,浣嶇疆璋冩暣鎴愬姛');
} else {
- this.$message.error("鍒犻櫎澶辫触");
+ this.$message.error('鍒犻櫎澶辫触');
}
})
.catch(() => {
- this.$message.error("鍒犻櫎澶辫触");
+ this.$message.error('鍒犻櫎澶辫触');
this.itemdetail = {};
});
@@ -286,7 +324,7 @@
this.delChildIDs = [];
})
.catch(() => {
- this.$message("宸插彇娑堝垹闄�");
+ this.$message('宸插彇娑堝垹闄�');
});
// this.dialogMessage="鏄惁鍒犻櫎"
// this.dialogFlag = 1;
@@ -328,20 +366,20 @@
this.old_dirDat = JSON.parse(JSON.stringify(this.dirList)); //灏嗗浠界殑dir閲嶆柊璧嬪��
},
handleDrop(draggingNode, dropNode, dropType, ev) {
- this.$confirm("姝ゆ搷浣滃皢淇濆瓨鐩綍鏇存敼, 鏄惁缁х画?", "鎻愮ず", {
- confirmButtonText: "纭畾",
- cancelButtonText: "鍙栨秷",
- type: "warning",
+ this.$confirm('姝ゆ搷浣滃皢淇濆瓨鐩綍鏇存敼, 鏄惁缁х画?', '鎻愮ず', {
+ confirmButtonText: '纭畾',
+ cancelButtonText: '鍙栨秷',
+ type: 'warning',
})
.then(() => {
//鐖惰妭鐐�
- let data = dropType != "inner" ? dropNode.parent.data : dropNode.data;
+ let data = dropType != 'inner' ? dropNode.parent.data : dropNode.data;
// 鐖惰妭鐐逛腑鍏ㄩ儴瀛愯妭鐐�
let nodeData =
- dropNode.level == 1 && dropType != "inner" ? data : data.children;
+ dropNode.level == 1 && dropType != 'inner' ? data : data.children;
//鍙樻洿鑺傜偣
nodeData.forEach((item, i) => {
- if (dropType != "inner") {
+ if (dropType != 'inner') {
if (draggingNode.data.pid === dropNode.data.pid) {
item.pid = item.pid;
} else {
@@ -365,7 +403,7 @@
this.sendChange();
})
.catch(() => {
- this.$message("宸插彇娑堟洿鏀�");
+ this.$message('宸插彇娑堟洿鏀�');
this.dirList = this.old_dirDat; //灏嗗浠界殑dir閲嶆柊璧嬪��
});
},
@@ -376,11 +414,11 @@
this.getDirTree();
return;
} else {
- alert("璋冩暣澶辫触锛岃閲嶈瘯锛�");
+ alert('璋冩暣澶辫触锛岃閲嶈瘯锛�');
}
})
.catch(() => {
- alert("淇敼澶辫触锛岃閲嶈瘯锛�");
+ alert('淇敼澶辫触锛岃閲嶈瘯锛�');
});
},
handleNodeClick(data) {
@@ -405,7 +443,7 @@
}, 500);
})
.catch((res) => {
- alert("淇敼澶辫触锛岃閲嶈瘯锛�");
+ alert('淇敼澶辫触锛岃閲嶈瘯锛�');
this.fullscreenLoading = false;
});
} else {
@@ -415,8 +453,9 @@
});
},
reset(formName) {
+ this.itemdetail = {};
this.$refs[formName].resetFields();
- if (this.backUpData != "") {
+ if (this.backUpData != '') {
this.itemdetail = JSON.parse(this.backUpData);
}
},
@@ -428,93 +467,147 @@
</script>
<style lang="less" scoped>
-.cataSettings_box {
- border-radius: 10px;
- height: 100%;
- padding: 10px;
- box-sizing: border-box;
- display: flex;
- .cataSettings_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;
+.cataLogBox {
+ height: 80%;
+ width: 97%;
+
+ position: absolute;
+ .cataLogContent {
+ width: 100%;
+ height: 92%;
+ display: flex;
+ justify-content: space-between;
+ .cataLog_leftTree {
+ width: 15%;
+ height: 96%;
+ border: 1px solid white;
+ border-radius: 5px;
+ padding: 1%;
+ max-height: 670px;
+ overflow-y: auto;
}
- .cataTreeBox {
- 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: 0 10px 0 5px;
- .el-button + .el-button {
- margin-left: 5px;
- }
- }
- }
+ .cataLog_rightContent {
+ width: 80%;
+ height: 96%;
+ border: 1px solid white;
+ border-radius: 5px;
+ padding: 1%;
+ max-height: 670px;
+ overflow-y: auto;
}
}
- .itemSettings {
- width: calc(100% - 344px);
- border-radius: 10px;
- 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;
- }
- .btnBox {
- margin: 0 270px 20px;
- width: 200px;
- display: flex;
- justify-content: space-between;
- }
- }
+ // .cataSettings_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;
+ // }
+ // .cataTreeBox {
+ // 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: 0 10px 0 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;
+ // .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;
+ // }
+ // .btnBox {
+ // margin: 0 270px 20px;
+ // width: 200px;
+ // display: flex;
+ // justify-content: space-between;
+ // }
+ // }
+ // }
+ // /deep/ .el-dialog__body {
+ // padding: 0 30px 0 0;
+ // }
+ .el-icon-delete-solid {
+ color: gray;
}
- /deep/ .el-dialog__body {
- padding: 0 30px 0 0;
+ .el-icon-circle-plus {
+ color: gray;
+ }
+ /deep/.el-form-item__label {
+ color: white;
+ }
+ // 璁剧疆杈撳叆妗嗙殑鑳屾櫙鑹层�佸瓧浣撻鑹层�佽竟妗嗗睘鎬ц缃紱
+ /deep/.el-input__inner {
+ background-color: transparent !important ;
+ color: #fff;
+ border: 1px solid;
+ }
+ /deep/ .el-dialog {
+ background: #303030;
+ }
+ /deep/.el-range-editor.is-active,
+ .el-range-editor.is-active:hover,
+ .el-select .el-input.is-focus .el-input__inner {
+ border: 1px solid;
+ }
+ /deep/.el-dialog__title {
+ color: white;
+ }
+ .primary {
+ background: #409eff;
+ border: #409eff;
+ color: white;
}
}
</style>
--
Gitblit v1.9.3