From 2e7f611bdfb28fdc16e2bc4fc19498851fe364d1 Mon Sep 17 00:00:00 2001 From: 田源 <lastanimals@163.com> Date: 星期一, 24 七月 2023 09:46:54 +0800 Subject: [PATCH] 动态组件 --- Source/UBCS-WEB/src/components/Tree/classifyTrees.vue | 143 ++++++++++++++++++++++++++++------------------- 1 files changed, 84 insertions(+), 59 deletions(-) diff --git a/Source/UBCS-WEB/src/components/Tree/classifyTrees.vue b/Source/UBCS-WEB/src/components/Tree/classifyTrees.vue index 23167e8..c40093b 100644 --- a/Source/UBCS-WEB/src/components/Tree/classifyTrees.vue +++ b/Source/UBCS-WEB/src/components/Tree/classifyTrees.vue @@ -3,16 +3,22 @@ <el-container> <!-- 宸︿晶鑿滃崟--> <el-aside > - <basic-container style="height: 85vh; max-height: 155vh; overflow-y: scroll;"@click.native="handleClickOutside" > - <div @click.native="handleClickOutside"> + <basic-container style="overflow:hidden;"> <div> - <div style="display: flex;justify-content: space-around"> - <el-button plain size="small" type="primary" @click="TreeAdd">娣诲姞</el-button> - <el-button plain size="small" type="primary" @click="TreeEdit">淇敼</el-button> - <el-button plain size="small" type="primary" @click="TreeDel">鍒犻櫎</el-button> -<!-- <el-button plain size="small" type="primary" @click="ExportExcel">瀵煎嚭</el-button>--> -<!-- <el-button plain size="small" type="primary" @click="ImportExcel">瀵煎叆</el-button>--> - <el-button plain size="small" type="primary" @click="flushed">鍒锋柊</el-button> + <div> + <div style="display: flex; flex-direction: column;"> + <div style="display: flex;"> + <el-button plain size="small" type="primary" @click="TreeAdd">娣诲姞</el-button> + <el-button plain size="small" type="primary" @click="TreeEdit">淇敼</el-button> + <el-button plain size="small" type="primary" @click="TreeDel">鍒犻櫎</el-button> + <el-button plain size="small" type="primary" @click="flushed">鍒锋柊</el-button> + </div> + <div style="display: flex; margin-top: 10px"> + <el-button plain size="small" type="primary" @click="Enable">鍚敤</el-button> + <el-button plain size="small" type="primary" @click="Deactivate">鍋滅敤</el-button> + <el-button plain size="small" type="primary" @click="ImportExcel">瀵煎叆</el-button> + <el-button plain size="small" type="primary" @click="ExportExcel">瀵煎嚭</el-button> + </div> </div> <div style="display: flex;justify-content: space-around;margin-top: 5px;margin-bottom: 5px"> </div> @@ -33,7 +39,7 @@ <el-form-item label="缂栫爜瑙勫垯锛�" label-width="150px"> <el-input v-model="TreeAddform.codeRuleOidName" autocomplete="off" style="width: 585px" @focus="CodeFoucus"></el-input> </el-form-item> - <el-form-item label="涓氬姟绫诲瀷锛�" label-width="150px" v-if="TreeFlag==false"> + <el-form-item label="涓氬姟绫诲瀷锛�" label-width="150px" v-if="TreeFlagCode==false"> <el-input v-model="TreeAddform.btmTypeName" autocomplete="off" style="width: 585px" @focus="btmFoucus"></el-input> </el-form-item> <el-form-item label="鍏抽敭灞炴�ф煡璇㈣鍒欙細" label-width="150px"> @@ -52,11 +58,11 @@ </el-dialog> <!-- 淇敼瀵硅瘽妗�--> <el-dialog :visible.sync="TreeEditFormVisible" append-to-body title="淇敼鍒嗙被"> - <classifyTreeform ref="childForm" :loneTreeNewForm="TreeList" :nodeList="nodeList" :flag="'edit'" @MasterHandler="MasterHandler" :Editclose=" ()=>{TreeEditFormVisible=false}" :TreeFlag="TreeFlag" ::nodeClickList="nodeClickList"></classifyTreeform> + <classifyTreeform ref="childForm" :loneTreeNewForm="TreeList" :nodeList="nodeList" :flag="'edit'" @MasterHandler="MasterHandler" :Editclose=" ()=>{TreeEditFormVisible=false}" :TreeFlag="TreeFlagCode" ::nodeClickList="nodeClickList" @referTreeForm="referTreeForm" @flushed="flushed"></classifyTreeform> </el-dialog> <avue-tree ref="tree" v-model="CloneTreeAvueform" v-loading="loading" :data="CloneTreedata" :defaultExpandAll="false" :option="Treeoption" - style="height: 80.5vh;padding-top: 5px;padding-bottom: 30px" + style="height: calc(100vh - 230px);" @node-click="nodeClick" class="classifyTree" > @@ -65,7 +71,7 @@ </basic-container> </el-aside> <el-main> - <basic-container style="height: 85vh; max-height: 155vh; "> + <basic-container style="height: calc(100vh - 150px);"> <!-- 鍙充晶琛ㄦ牸--> <avue-tabs :option="tabOption" @change="handleChange"></avue-tabs> <span v-if="type.prop==='tab1'"> @@ -73,7 +79,7 @@ </span> <span v-else-if="type.prop==='tab2'"> <basic-container> - <avue-crud v-model="crudForm" v-loading="FormLoing" :data="this.Formlist" :option="this.crudTreeOption" + <avue-crud ref="textCrud" v-model="crudForm" v-loading="FormLoing" :data="this.Formlist" :option="this.crudTreeOption" @row-save="CrudRowSave" @row-del="CrudRowDel" @row-update="CrudRowUpdata" @@ -83,8 +89,6 @@ <template slot="menuLeft"> <el-button plain size="small" type="primary" @click="FindeHanler">鏌ヨ</el-button> <el-button plain size="small" type="primary" @click="TemRefresh">鍒锋柊</el-button> - <el-button plain size="small" type="primary" @click="Enable">鍚敤</el-button> - <el-button plain size="small" type="primary" @click="Deactivate">鍋滅敤</el-button> <el-button plain size="small" type="primary" @click="CloneBtn">浠庡叾瀹冩ā鏉垮厠闅�</el-button> <!-- 鏌ヨ瀵硅瘽妗�--> <el-dialog :visible.sync="FindFormVisible" append-to-body title="楂樼骇鏌ヨ"> @@ -120,10 +124,10 @@ <div style="margin-bottom: 5px"><el-tag>涓婚搴撳垎绫�</el-tag></div> <!-- 鍏嬮殕妯℃澘鐨勬爲 娌跨敤棣栭〉鏍戠殑loading鍜宱ption锛屼絾鏄痙ata鍜寁-model缁戝畾鐨勬暟鎹垱寤轰竴涓柊鐨勫彉閲忥紝鍙﹀鐐瑰嚮鏂规硶涔熸槸閲嶆柊鑾峰彇鏉ユ搷浣滃厠闅嗘ā鏉跨殑鏁版嵁--> <avue-tree v-model="TreeAvueform" v-loading="loading" :data="Treedata" - :defaultExpandAll="false" - :option="Treeoption" - style="height: 50.5vh;margin-right: 10px" - @node-click="ClonenodeClick" + :defaultExpandAll="false" + :option="Treeoption" + style="height: 50.5vh;margin-right: 10px" + @node-click="ClonenodeClick" > </avue-tree> </el-aside> @@ -145,6 +149,7 @@ <avue-crud v-model="ClonecrudForm" v-loading="FormLoing" :data="this.CloneFormlist" :option="this.ClonecrudTreeOption" @selection-change="selectionChange" + ></avue-crud> </div> </el-main> @@ -165,7 +170,17 @@ </el-dialog> </el-dialog> </template> - <template #menu="{ size, row }"> + <template #menu="{ size, row ,index}"> + <el-button type="text" + v-if="row.lcStatus == 'Editing'" + icon="el-icon-edit-outline " + :size="size" + @click="$refs.textCrud.rowEdit(row)">缂栬緫</el-button> + <el-button type="text" + v-if="row.lcStatus == 'Editing'" + icon="el-icon-delete" + :size="size" + @click="$refs.textCrud.rowDel(row,index)">鍒犻櫎</el-button> <el-button v-show="row.lcStatus === 'Released'" @click="upAndStopAndStart(row, 'upVersion')" @@ -197,7 +212,7 @@ </avue-crud> </basic-container> - <templatePro :ProData="this.ProData" :crudOid="this.crudOid" :crudArray="this.crudArray" :Formlist="this.Formlist" :codeClassifyOid="this.codeClassifyOid"></templatePro> + <templatePro :ProData="this.ProData" :crudOid="this.crudOid" :crudLCStatus="this.crudLCStatus" :crudArray="this.crudArray" :Formlist="this.Formlist" :codeClassifyOid="this.codeClassifyOid"></templatePro> </span> <!-- 缂栫爜瑙勫垯--> <el-dialog :visible.sync="MasterdialogVisible" title="涓恒�愮紪鐮佽鍒欍�戦�夊彇鍊�" append-to-body> @@ -326,11 +341,11 @@ //浣跨敤inject鎺ユ敹鍙傛暟 //Treeoption宸︿晶鏍戞柊澧炶〃鍗曢」 Treedata宸︿晶鏍戣妭鐐� 閰嶇疆椤� crudTreeOption鍙充晶琛ㄦ牸閰嶇疆椤� crudTreeData鍙充晶琛ㄦ牸鏄剧ず鍐呭 //Treeform鍙充晶琛ㄥ崟閰嶇疆椤� - inject: [, "crudTreeData"], + inject: ["crudTreeData"], data() { return { //鏍戣妭鐐规樉绀洪殣钘� - TreeFlag:false, + TreeFlagCode:false, //缂栫爜瑙勫垯 MasterdialogVisible:false, masterData:[], @@ -400,6 +415,8 @@ addFlag:false, // 琛ㄦ牸褰撳墠琛宨d crudOid:"", + //褰撳墠閫変腑妯℃澘鐘舵�� + crudLCStatus:'', //琛ㄦ牸褰撳墠閫夋嫨鏁扮粍 crudArray:[], //妯℃澘灞炴�у睍绀哄唴瀹� @@ -611,17 +628,19 @@ }, stopLose: { tip: "妯℃澘鍙湁鍙戝竷鐘舵�佹墠鑳借浣跨敤锛屾槸鍚︾‘瀹氬仠鐢紵", - typeText: "鍋滅敤/澶辨晥", + typeText: "鍋滅敤", funAPi: stopLose, load: 'stopLoseLoad' }, startRelease: { tip: "鏄惁纭畾鍚敤/鍙戝竷杩欎釜妯℃澘锛屾ā鏉垮彧鏈夊彂甯冪姸鎬佹墠鑳借浣跨敤锛屾槸鍚︾户缁紵", - typeText: "鍚敤/鍙戝竷", + typeText: "鍚敤", funAPi: startRelease, load: 'startReleaseLoad' } - } + }, + //妯℃澘绠$悊缂栬緫 + showEditBtn:false, } }, //tab鏍忛粯璁ゆ槸琛ㄦ牸 @@ -633,6 +652,8 @@ if (e.target.nodeName !== 'SPAN') { this.$refs.tree.setCurrentKey(null) this.nodeClickList = {} + this.TreeList=[] + this.TreeFlagCode=false; } }, true) }, @@ -644,6 +665,8 @@ height:180, selection:true, addBtn:this.Formlist.length<=0 && this.nodeClickList != "", + editBtn:false, + delBtn:false, column: [ { label: "妯℃澘缂栧彿", @@ -682,18 +705,10 @@ } }, methods: { - //鏍戣妭鐐瑰け鍘荤劍鐐� - handleClickOutside(event) { - const treeElement = this.$refs.tree.$el; - const targetElement = event.target; - if (!treeElement.contains(targetElement)) { - // 鍦ㄦ爲缁勪欢澶栭儴鐐瑰嚮锛屾竻绌洪�夋嫨鐘舵�� - // this.nodeClickList=[]; - // this.CloneTreeAvueform={} - console.log(this.nodeClickList ) - console.log(this.CloneTreeAvueform) - } - }, + //妯℃澘绠$悊宸插彂甯冪紪杈� + // checkShowEditBtn() { + // this.showEditBtn = this.Formlist.some(item => item.lcStatus === 'Released'); + // }, //缂栫爜瑙勫垯澶辩劍 CodeFoucus(){ this.MasterdialogVisible=true; @@ -737,7 +752,6 @@ this.$set(this.TreeAddform,'codeRuleOidName',this.masterName) this.$set(this.TreeAddform,'codeRuleOid',this.masterOid) this.$emit('MasterHandler',this.loneTreeNewForm) - console.log(this.loneTreeNewForm) } }, //缂栫爜鎺ュ彛 @@ -765,7 +779,6 @@ this.KeySelectLIst=[] this.$set(this.TreeAddform,'codeKeyAttrRepeatOidName',this.KeyName) this.$set(this.TreeAddform,'codeKeyAttrRepeatOid',this.KeyOid) - console.log(this.TreeAddform) } }, //鍏抽敭灞炴�ф煡璇� @@ -844,7 +857,6 @@ this.simSelectList=row; this.simName=row[0].name; this.simOid=row[0].oid; - console.log('oid',this.oid) }, //鐩镐技椤归」鎺ュ彛 simdefaultRend(){ @@ -888,9 +900,9 @@ const masterParameter={ 'conditionMap[name]':this.SelectFInd } - this.btmdefaultRend(masterParameter) - this.SelectValue="" - this.SelectFInd="" + this.btmdefaultRend(masterParameter); + this.SelectValue=""; + this.SelectFInd=""; } }, //涓氬姟绫诲瀷澶氶�� @@ -902,19 +914,19 @@ //涓氬姟绫诲瀷鎺ュ彛 btmdefaultRend(masterParameter){ referDataGrid({valueField:'id',isMuti:'false',...masterParameter}).then(res=>{ - // console.log(res) this.BtmData=res.data.data.records }) }, //瀛愪紶鐖� MasterHandler(val){ - this.TreeList=val + this.TreeList=val; }, //琛屽崟閫変簨浠� selectHandle(selection,row){ this.crudOid=row.oid; + this.crudLCStatus=row.lcStatus; this.crudArray=selection; - gridCodeClassifyTemplateAttr({'conditionMap[classifyTemplateOid]': this.Formlist[0].oid}).then(res => { + gridCodeClassifyTemplateAttr({'conditionMap[classifyTemplateOid]': row.oid}).then(res => { this.ProData = res.data.data; }).catch(res => { this.$message.error(res) @@ -961,7 +973,6 @@ const data = this.TreeAddform; // data.btmtypename= this.TreeList.btmtypename this.$set(data, "parentCodeClassifyOid", this.nodeClickList.oid); - console.log("data", data); TreeSave(data) .then(() => { this.$message({ @@ -1039,14 +1050,13 @@ }, //淇敼鍥炲~ TreeEdit() { - if (this.nodeClickList == "") { + if ( Object.keys(this.nodeClickList).length<1) { this.$message({ type: 'warning', message: '璇峰厛浠庢爲涓婇�夋嫨涓�鏉℃暟鎹�!' }); } else { this.TreeEditFormVisible = true; - console.log(this.TreeList) } }, //鏍戝埛鏂� @@ -1119,9 +1129,8 @@ //鏍戠偣鍑讳簨浠� async nodeClick(data) { //瀹氫箟涓�涓ā鏉垮睘鎬d锛屾暟鎹槸妯℃澘绠$悊琛ㄦ牸閲岄潰鐨刼id - console.log('鏍�',data) if(data.parentId == ""){ - this.TreeFlag=true; + this.TreeFlagCode=true; } this.nodeClickList = data this.ProData=[] @@ -1143,17 +1152,25 @@ this.$message.error(res) }) // 鍩烘湰淇℃伅琛ㄥ崟鏁版嵁 - await getObjectByOid(this.nodeClickList.oid).then(res => { - this.TreeList = res.data.data; - }).catch(res => { - this.$message.error(res) - }) + await getObjectByOid(this.nodeClickList.oid).then(res => { + this.TreeList = res.data.data; + }).catch(res => { + this.$message.error(res) + }) } catch (error) { this.$message.error(error) } }, treeClick(e) { console.log(e); + }, + //鍩烘湰淇℃伅琛ㄥ崟鍒锋柊 + referTreeForm(){ + getObjectByOid(this.nodeClickList.oid).then(res => { + this.TreeList = res.data.data; + }).catch(res => { + this.$message.error(res) + }) }, //鍏嬮殕妯℃澘鏍戠殑鐐瑰嚮鍒囨崲鏁版嵁 async ClonenodeClick(data){ @@ -1222,7 +1239,6 @@ }); }) } - console.log('123',this.codeClassifyOid) }, //妯℃澘绠$悊淇敼 CrudRowUpdata(row,index,done) { @@ -1376,6 +1392,15 @@ </script> <style lang="scss" scoped> +.el-container{ + height: 100%; +} +.el-aside { + height: calc(100% - 30px); +} +.el-main { + height: calc(100% - 30px); +} .el-form { display: flex; flex-wrap: wrap; /* 璁剧疆鍙崲琛岋紝浠ヤ究鍦ㄥ皬灞忓箷璁惧涓婁娇鐢ㄥ琛屽竷灞� */ -- Gitblit v1.9.3