From b299fcd13492375b34e6fa3fd26a841d554c297a Mon Sep 17 00:00:00 2001
From: 田源 <lastanimals@163.com>
Date: 星期二, 19 三月 2024 09:53:19 +0800
Subject: [PATCH] 代码更新
---
Source/UBCS-WEB/src/components/Theme/ThemeClassifyTrees.vue | 263 ++++++++++++++++++++++++++++++----------------------
1 files changed, 152 insertions(+), 111 deletions(-)
diff --git a/Source/UBCS-WEB/src/components/Theme/ThemeClassifyTrees.vue b/Source/UBCS-WEB/src/components/Theme/ThemeClassifyTrees.vue
index c891337..07fbb4f 100644
--- a/Source/UBCS-WEB/src/components/Theme/ThemeClassifyTrees.vue
+++ b/Source/UBCS-WEB/src/components/Theme/ThemeClassifyTrees.vue
@@ -4,7 +4,7 @@
<!-- 宸︿晶鑿滃崟-->
<el-aside>
<basic-container>
- <div style="height: calc(100vh - 142px);!important;">
+ <div style="height: calc(100vh - 144px);!important;">
<div class="headerCon" style="display: flex; flex-wrap: wrap;margin-bottom: 5px">
<el-button v-if="permissionList.TreeAddStatus" plain size="small" type="primary" @click="TreeAdd">娣诲姞
</el-button>
@@ -44,25 +44,26 @@
</el-button>
</div>
<!-- 宸︿晶鏍�-->
-
- <avue-tree ref="tree" v-model="CloneTreeAvueform" v-loading="loading" :data="CloneTreedata"
- :defaultExpandAll="false"
- :option="Treeoption"
- class="classifyTree"
- style="height: 690px"
- @node-click="nodeClick"
- >
- <template slot-scope="{ node, data }" class="el-tree-node__label">
- <el-tooltip :content="$createElement('div', { domProps: { innerHTML: node.label } })" class="item"
- effect="dark"
- open-delay="500"
- placement="right-start">
+ <div style="height: calc(100vh - 242px);overflow: auto">
+ <avue-tree ref="tree" v-model="CloneTreeAvueform" v-loading="loading" :data="CloneTreedata"
+ :defaultExpandAll="false"
+ :option="Treeoption"
+ class="classifyTree"
+ @node-click="nodeClick"
+ >
+ <template slot-scope="{ node, data }" class="el-tree-node__label">
+ <el-tooltip :content="$createElement('div', { domProps: { innerHTML: node.label } })" class="item"
+ effect="dark"
+ open-delay="500"
+ placement="right-start">
<span style="font-size: 14px;">
{{ (node || {}).label }}
</span>
- </el-tooltip>
- </template>
- </avue-tree>
+ </el-tooltip>
+ </template>
+ </avue-tree>
+ <div style="height: 25px"></div>
+ </div>
</div>
<!-- 鏍戣妭鐐规坊鍔犲璇濇-->
@@ -123,6 +124,7 @@
</el-dialog>
<!-- 鍒嗙被鎺堟潈瀵硅瘽妗�-->
<classify-auth-dialog
+ :TreeNode="TreeEditObj"
:classifyData="classifyData"
:visible.sync="classifyAuthVisible"
></classify-auth-dialog>
@@ -135,7 +137,7 @@
</basic-container>
</el-aside>
<el-main>
- <basic-container style="height: calc(100vh - 150px);">
+ <basic-container>
<!-- 鍙充晶琛ㄦ牸-->
<avue-tabs :option="tabOption" @change="handleChange"></avue-tabs>
<span v-if="type.prop==='tab1'">
@@ -163,31 +165,19 @@
@click="TemRefresh">鍒锋柊</el-button>
<el-button v-if="permissionList.CloneBtnStuatus" plain size="small" type="primary" @click="CloneBtn">浠庡叾瀹冩ā鏉垮厠闅�</el-button>
<!-- 鏌ヨ瀵硅瘽妗�-->
- <el-dialog :visible.sync="FindFormVisible" append-to-body title="楂樼骇鏌ヨ">
- <div>
- <el-button size="small" type="primary" @click="AdvQueries">鏌ヨ</el-button>
- <el-button size="small" type="primary">閲嶇疆</el-button>
- </div>
- <div style="padding-left: 80px;margin-top: 15px;">
- <template v-for="(value, key) in FindSelect">
- <div style="display: flex; justify-content: space-around; width: 85%; margin-bottom: 15px">
- <el-select v-model="FindSelect[key]" placeholder="璇烽�夋嫨" style="width: 28%"
- @change="handleSelectChange(key)">
- <el-option label="妯℃澘缂栧彿" value="0"></el-option>
- <el-option label="妯℃澘鍚嶇О" value="1"></el-option>
- <el-option label="妯℃澘鎻忚堪" value="2"></el-option>
- <el-option label="鐗堟湰鍙�" value="3"></el-option>
- <el-option label="鐘舵��" value="4"></el-option>
- </el-select>
- <el-select v-model="condition[0]" placeholder="璇烽�夋嫨" style="width: 15%">
- <el-option label="鍖呭惈" value="0"></el-option>
- <el-option label="绛変簬" value="1"></el-option>
- </el-select>
- <el-input v-model="QueryArray[key]" style="width: 49%"></el-input>
- <span> <i class="el-icon-delete" style="font-size: 22px;margin-top:8px;margin-left: 10px"/></span>
+ <el-dialog :visible.sync="FindFormVisible" append-to-body title="楂樼骇鏌ヨ" width="30%" @close="searchReset">
+ <div style="text-align: center; margin-top: 5px;">
+ <el-select v-model="searchSelect" style="width: 35%">
+ <el-option v-for="item in crudFindTreeArray" :key="item.field" :label="item.title"
+ :value="item.queryField"></el-option>
+ </el-select>
+ <el-input v-model="SearchValue"
+ placeholder="璇疯緭鍏ュ叧閿瓧杩涜鏌ヨ" style="width: 45%; margin-left: 5px;"></el-input>
</div>
- </template>
- </div>
+ <span slot="footer" class="dialog-footer">
+ <el-button type="primary" @click="advQueries">鏌ヨ</el-button>
+ <el-button type="danger" @click="searchReset">閲嶇疆</el-button>
+ </span>
</el-dialog>
<!-- 妯℃澘鍏嬮殕 -->
<el-dialog :before-close="cloneClose" :visible.sync="CloneVisible" append-to-body title="鍏嬮殕妯℃澘">
@@ -349,7 +339,6 @@
TreeSave,
TreeDel,
TreeCheckDel,
- TreeObjcet,
TreeEnable,
TreeDeactivate,
gridCodeClassifyTemplate,
@@ -378,6 +367,40 @@
name: "classifyTrees.vue",
data() {
return {
+ crudFindTreeArray: [
+ {
+ title: '妯℃澘缂栧彿',
+ field: 'id',
+ fieldType: 'text',
+ queryField: 'id'
+ },
+ {
+ title: '妯℃澘鍚嶇О',
+ field: 'name',
+ fieldType: 'text',
+ queryField: 'name'
+ },
+ {
+ title: '妯℃澘鎻忚堪',
+ field: 'description',
+ fieldType: 'text',
+ queryField: 'description'
+ },
+ {
+ title: '鐗堟湰鍙�',
+ field: 'revisionSeq',
+ fieldType: 'text',
+ queryField: 'revisionSeq'
+ },
+ {
+ title: '鐘舵��',
+ field: 'lcStatusText',
+ fieldType: 'text',
+ queryField: 'lcStatusText'
+ },
+ ],
+ searchSelect: 'id',
+ SearchValue: '',
allButtons: Boolean,
btnAuthList: [],
activeName: 'first',
@@ -512,7 +535,7 @@
Treedata: [],
CloneTreedata: [],
Treeoption: {
- height:'auto',
+ height: 'auto',
addBtn: false,
editBtn: false,
delBtn: false,
@@ -669,24 +692,17 @@
showEditBtn: false,
//浼犻�掔粰鍒嗙被鎺堟潈瀛愮粍浠跺璇濇鐨勫綋鍓嶉�変腑鐨勫垎绫昏妭鐐逛俊鎭�
classifyData: "",
+
}
},
watch: {},
mounted() {
- this.type = this.tabOption.column[0];
+ this.type = this.tabOption.column[0] || {label: '鍩烘湰淇℃伅', prop: 'tab1'};
this.getAttr();
- const treeEle = this.$refs.tree.$el
- treeEle.addEventListener('click', (e) => {
- if (e.target.nodeName !== 'SPAN') {
- this.$refs.tree.setCurrentKey(null);
- this.nodeClickList = {};
- this.TreeFlagCode = true;
- this.allButtons = false;
- // this.$nextTick(()=>{
- // this.btnAuthList = [];
- // })
- }
- }, true)
+ document.addEventListener('click', this.handleGlobalClick);
+ },
+ beforeDestroy() {
+ document.removeEventListener('click', this.handleGlobalClick);
},
computed: {
...mapGetters(["permission"]),
@@ -709,7 +725,7 @@
},
treeStyle() {
return {
- height: this.btnAuthList.length > 0 ? '620px' : '785px',
+ height: this.allButtons ? '610px' : '690px',
};
},
crudTreeOption() {
@@ -768,30 +784,50 @@
codeClassifyOid: ''
}
}
- }
+ },
},
created() {
},
methods: {
+ handleGlobalClick(event) {
+ // 鍒ゆ柇鏄惁瀛樺湪鏍戣妭鐐瑰紩鐢ㄤ互鍙婂紩鐢ㄧ殑鍏冪礌鏄惁瀛樺湪
+ if (this.$refs.tree && this.$refs.tree.$el) {
+ // 鍒ゆ柇鐐瑰嚮浜嬩欢鏄惁鍙戠敓鍦ㄦ爲鑺傜偣浠ュ鐨勫尯鍩�
+ const isOutsideTree = !this.$refs.tree.$el.contains(event.target);
+ if (isOutsideTree) {
+ this.clearNode();
+ }
+ }
+ },
+ clearNode(){
+ // this.getAttr()
+ this.$refs.tree.setCurrentKey(null);
+ this.nodeClickList = {};
+ this.TreeFlagCode = true;
+ this.allButtons = false;
+ },
// 鍒嗙被鎺堟潈瀵硅瘽妗嗘墦寮�
- classifyAuthHandler() {
+ classifyAuthHandler(event) {
+ event.stopPropagation();
if (this.nodeClickList.oid === '' || this.nodeClickList.oid === undefined) {
this.$message.warning('璇疯嚦灏戦�夋嫨涓�鏉℃暟鎹紒')
return;
}
- this.classifyData = this.nodeClickList;
+ // this.classifyData = this.nodeClickList;
this.classifyAuthVisible = true;
},
// 鏁版嵁鎺堟潈瀵硅瘽妗嗘墦寮�
- dataAuthHandler() {
+ dataAuthHandler(event) {
+ event.stopPropagation();
if (this.nodeClickList.oid === '' || this.nodeClickList.oid === undefined) {
this.$message.warning('璇疯嚦灏戦�夋嫨涓�鏉℃暟鎹紒')
return;
}
- this.classifyData = this.nodeClickList;
+ // this.classifyData = this.nodeClickList;
this.dataAuthVisible = true;
},
- flowingDependHandler() {
+ flowingDependHandler(event) {
+ event.stopPropagation();
if (this.nodeClickList.length <= 0) {
this.$message.warning('璇疯嚦灏戦�夋嫨涓�鏉℃暟鎹紒')
return;
@@ -808,11 +844,13 @@
},
// 鍏抽棴寮圭獥
/** 瀵煎叆 */
- ImportExcel() {
+ ImportExcel(event) {
+ event.stopPropagation();
this.ThemeImportVisible = true;
},
/** 瀵煎嚭 */
- ExportExcel() {
+ ExportExcel(event) {
+ event.stopPropagation();
if (this.nodeClickList) {
exportClassify({oid: this.nodeClickList.oid}).then(res => {
func.downloadFileByBlobHandler(res);
@@ -931,7 +969,8 @@
}
},
//鏍戣妭鐐规坊鍔犳寜閽�
- async TreeAdd() {
+ async TreeAdd(event) {
+ event.stopPropagation();
const loading = this.$loading({
lock: true,
text: 'Loading',
@@ -991,7 +1030,8 @@
}
},
//鏍戣妭鐐瑰垹闄ゆ寜閽�
- TreeDel() {
+ TreeDel(event) {
+ event.stopPropagation();
this.$confirm('鏄惁鍒犻櫎褰撳墠閫夋嫨鐨勫垎绫伙紝灏嗕細鎶婂瓙鍒嗙被涓�骞跺垹闄わ紝濡傛灉瀛樺湪缂栫爜鏁版嵁灏嗕笉鑳借鍒犻櫎锛屾槸鍚︾户缁紵', '鎻愮ず', {
confirmButtonText: '纭畾',
cancelButtonText: '鍙栨秷',
@@ -1047,7 +1087,8 @@
});
},
//淇敼鍥炲～
- TreeEdit() {
+ TreeEdit(event) {
+ event.stopPropagation();
if (Object.keys(this.nodeClickList).length < 1) {
this.$message({
type: 'warning',
@@ -1058,7 +1099,8 @@
}
},
//鏍戝埛鏂�
- async flushed() {
+ async flushed(event) {
+ event.stopPropagation();
await this.getAttr()
this.$refs.tree.setCurrentKey(null);
this.nodeClickList = {};
@@ -1067,7 +1109,8 @@
},
//鍚敤鍜屽仠鐢ㄩ兘鍏堝垽鏂姸鎬�
//鍚敤
- async Enable() {
+ async Enable(event) {
+ event.stopPropagation();
if (Object.keys(this.nodeClickList).length < 1) {
this.$message.warning('璇峰厛浠庢爲涓婇�夋嫨涓�鏉℃暟鎹�');
return;
@@ -1107,8 +1150,8 @@
this.loading = false;
}
},
-
- async Deactivate() {
+ async Deactivate(event) {
+ event.stopPropagation();
if (Object.keys(this.nodeClickList).length < 1) {
this.$message.warning('璇峰厛浠庢爲涓婇�夋嫨涓�鏉℃暟鎹�');
return;
@@ -1152,9 +1195,10 @@
},
//鏍戠偣鍑讳簨浠�
async nodeClick(data) {
- const response = this.findTheTopLevelNode(data,this.Treedata)
- console.log(response)
- console.log('response',response.attributes.id)
+ const response = this.findTheTopLevelNode(data, this.Treedata)
+ this.classifyData = response;
+ // console.log(response)
+ // console.log('response',response.attributes.id)
this.allButtons = true;
getAuthButtonList({classifyId: data.oid, code: "classifyTree", authType: "classify_auth"}).then(res => {
this.btnAuthList = res.data.data;
@@ -1169,10 +1213,9 @@
this.crudArray = []
try {
this.requestCount += 1;
- const [res1, res2, res3] = await Promise.all([
- TreeObjcet(data.oid),
+ const [res1, res2] = await Promise.all([
+ getObjectByOid(data.oid),
gridCodeClassifyTemplate({'conditionMap[codeclassifyoid]': data.oid}),
- getObjectByOid(data.oid)
]);
this.FlagObj = res1.data.data;
this.Formlist = res2.data.data.filter(item => {
@@ -1190,7 +1233,7 @@
this.ProData = [];
this.crudOid = ''
}
- this.TreeEditObj = res3.data.data;
+ this.TreeEditObj = res1.data.data;
if (this.TreeEditObj.isParticipateCheck === null || this.TreeEditObj.isParticipateCheck === undefined || this.TreeEditObj.isParticipateCheck === "") {
this.$set(this.TreeEditObj, "isParticipateCheck", 1)
return
@@ -1199,10 +1242,9 @@
this.$message.error(error);
}
},
-
// 閫掑綊鏌ユ壘椤跺眰鑺傜偣Id
- findTheTopLevelNode(data,TreeData){
- if(data.parentId === ""){
+ findTheTopLevelNode(data, TreeData) {
+ if (data.parentId === "") {
return data;
}
const parentNode = this.findParentNode(data.parentId, TreeData);
@@ -1211,7 +1253,7 @@
}
},
// 閫掑綊鏌ユ壘鍑烘潵澶氬眰鑺傜偣鐨勭埗鑺傜偣
- findParentNode(parentId, TreeData){
+ findParentNode(parentId, TreeData) {
for (const node of TreeData) {
if (node.oid === parentId) {
return node;
@@ -1276,34 +1318,28 @@
handleChange(column) {
this.type = column;
},
- AdvQueries() {
- this.FindFormVisible = false
- //濡傛灉鍏ㄩ儴涓虹┖ allEmpty涓簍rue
- const allEmpty = Object.values(this.QueryArray).every(value => !value);
- //濡傛灉鍏ㄩ儴涓虹┖锛岀偣鍑绘煡璇㈠嚭鐜版墍鏈夋暟鎹�
- if (allEmpty) {
- gridCodeClassifyTemplate().then(res => {
- this.Formlist = res.data.data
- })
+ advQueries() {
+ if (this.SearchValue === "") {
+ this.$message.warning('璇疯緭鍏ヨ鏌ヨ鐨勫唴瀹癸紒');
} else {
- //榛樿鏄瓑浜�
- gridCodeClassifyFindTemplate({'conditionMap[id]': this.QueryArray.id},
- {'conditionMap[name]': this.QueryArray.name},
- {'conditionMap[description]': this.QueryArray.description},
- {'conditionMap[revisionValue]': this.QueryArray.revisionValue},
- {'conditionMap[lcStatus]': this.QueryArray.lcStatus}
- ).then(res => {
- this.Formlist = res.data.data
- })
+ const condition = {
+ 'conditionMap[codeclassifyoid]': this.nodeClickList.oid,
+ [`conditionMap[${this.searchSelect}]`]: this.SearchValue
+ };
+ gridCodeClassifyFindTemplate(condition).then(res => {
+ if (res.data.data.length > 0) {
+ this.Formlist = res.data.data;
+ } else {
+ this.$message.error('鏆傛湭鏌ヨ鍒扮浉鍏虫ā鏉匡紒')
+ }
+ this.FindFormVisible = false;
+ });
}
},
- //妯℃澘绠＄悊娓叉煋
- CrudRend() {
- gridCodeClassifyTemplate({'conditionMap[codeclassifyoid]': this.nodeClickList.oid}).then(res => {
- this.Formlist = res.data.data
- })
+ searchReset() {
+ this.SearchValue = "";
+ this.searchSelect = 'id'
},
-
//妯℃澘绠＄悊琛ㄦ牸娣诲姞
CrudRowSave(row, done) {
if (this.nodeClickList.length <= 0) {
@@ -1501,9 +1537,9 @@
</script>
<style lang="scss" scoped>
-.el-container {
- height: 100%;
-}
+//.el-container {
+// height: 100%;
+//}
.el-aside {
//height: calc(100% - 30px);
@@ -1548,4 +1584,9 @@
.headerCon > .el-button:nth-child(9) {
margin-left: 0;
}
+
+///deep/.el-scrollbar__bar.is-vertical{
+// width: 8px;
+//}
+
</style>
--
Gitblit v1.9.3