From 5845950aa395da1a1f56a5fff4c80358cf4b5f7f Mon Sep 17 00:00:00 2001 From: ludc Date: 星期二, 16 五月 2023 21:03:56 +0800 Subject: [PATCH] 新增引用码段下的参照配置界面,代码整合 --- Source/UBCS-WEB/src/components/Tree/classifyTrees.vue | 463 +++++++++++++++++++++++++++++++++++++++++++++++++++------ 1 files changed, 409 insertions(+), 54 deletions(-) diff --git a/Source/UBCS-WEB/src/components/Tree/classifyTrees.vue b/Source/UBCS-WEB/src/components/Tree/classifyTrees.vue index 7bda38b..d522692 100644 --- a/Source/UBCS-WEB/src/components/Tree/classifyTrees.vue +++ b/Source/UBCS-WEB/src/components/Tree/classifyTrees.vue @@ -1,45 +1,165 @@ <template> <el-container> -<!-- 宸︿晶鑿滃崟--> - <el-aside > - <basic-container> - <avue-tree ref="tree" v-model="form" :data="Treedata" :option="Treeoption" @node-click=" nodeClick" - @del="rowDel" @save="rowSave" @check-change="checkChange" style="height: 754px" > + <!-- 宸︿晶鑿滃崟--> + <el-aside> + <basic-container style="height: 85vh; max-height: 155vh; overflow-y: scroll;"> + <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="Enable">鍚敤</el-button> + </div> + <div style="display: flex;justify-content: space-around;margin-top: 5px;margin-bottom: 5px"> + <el-button plain size="small" type="primary" @click="Deactivate">鍋滅敤</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> + <!-- 鏍戣妭鐐规坊鍔犲璇濇--> + <el-dialog :title="this.TreeFlag ? '娣诲姞鍒嗙被' :'娣诲姞涓婚搴�'" :visible.sync="TreeAddFormVisible" append-to-body + style="width: 1700px;margin: auto"> + <el-form :model="TreeAddform"> + <el-form-item :label="this.TreeFlag ? '鍒嗙被缂栧彿锛�' :'涓婚搴撶紪鍙凤細'" label-width="150px" style="display: inline-block"> + <el-input v-model="TreeAddform.id" autocomplete="off" style="width: 170px"></el-input> + </el-form-item> + <el-form-item :label="this.TreeFlag ? '鍒嗙被鍚嶇О锛�' :'涓婚搴撳悕绉帮細'" label-width="100px" style="display: inline-block"> + <el-input v-model="TreeAddform.name" autocomplete="off" style="width: 170px"></el-input> + </el-form-item> + <el-form-item label="鎻忚堪锛�" label-width="150px"> + <el-input v-model="TreeAddform.description" autocomplete="off" style="width: 585px"></el-input> + </el-form-item> + <el-form-item v-show="this.TreeFlag==false" label="瀛樺偍鐨勪笟鍔$被鍨嬶細" label-width="150px"> + <el-input v-model="TreeAddform.btmtypename" autocomplete="off" style="width: 585px"></el-input> + </el-form-item> + <el-form-item label="缂栫爜瑙勫垯锛�" label-width="150px"> + <el-input v-model="TreeAddform.coderuleoidName" autocomplete="off" style="width: 585px"></el-input> + </el-form-item> + <el-form-item label="鍏抽敭灞炴�ф煡璇㈣鍒欙細" label-width="150px"> + <el-input v-model="TreeAddform.codekeyattrrepeatoidName" autocomplete="off" + style="width: 585px"></el-input> + </el-form-item> + <el-form-item label="鐩镐技鏌ヨ瑙勫垯锛�" label-width="150px"> + <el-input v-model="TreeAddform.codeResembleRuleOidName" autocomplete="off" + style="width: 585px"></el-input> + </el-form-item> + </el-form> + <div slot="footer" class="dialog-footer"> + <el-button @click="TreeAddFormVisible = false">鍙� 娑�</el-button> + <el-button type="primary" @click="TreeAddHandler">纭� 瀹�</el-button> + </div> + </el-dialog> + <!-- 淇敼瀵硅瘽妗�--> + <el-dialog :visible.sync="TreeEditFormVisible" append-to-body title="淇敼鍒嗙被"> + <classifyTreeform ref="childForm" :TreeNewForm="TreeList" :nodeList="nodeList"></classifyTreeform> + </el-dialog> + <avue-tree ref="tree" v-model="TreeAvueform" v-loading="loading" :data="Treedata" :defaultExpandAll="false" + :option="Treeoption" + style="height: 80.5vh;padding-top: 5px;padding-bottom: 30px" + @node-click=" nodeClick" + @check-change="checkChange" + > </avue-tree> + </basic-container> </el-aside> <el-main> - <basic-container> -<!-- 鍙充晶琛ㄦ牸--> + <basic-container style="height: 85vh; max-height: 155vh; "> + <!-- 鍙充晶琛ㄦ牸--> <avue-tabs :option="tabOption" @change="handleChange"></avue-tabs> <span v-if="type.prop==='tab1'"> - <avue-crud v-model="crudForm" :data="this.Formlist" :option="this.crudTreeOption" style="height: 700px"></avue-crud> + <basic-container> + <avue-crud v-model="crudForm" :data="this.Formlist" :option="this.crudTreeOption" v-loading="FormLoing" + > + <template slot="menuLeft"> + <el-button plain size="small" type="primary">鏌ヨ</el-button> + <el-button plain size="small" type="primary" @click="TemRefresh">鍒锋柊</el-button> + <el-button plain size="small" type="primary">浠庡叾瀹冩ā鏉垮厠闅�</el-button> + <div style="display: inline-block"> <el-input v-model="FindText" placeholder="璇疯緭鍏ュ叧閿瓧鎸夊洖杞︽煡璇�" + size="small" + @keyup.enter.native="EnterFind"></el-input></div> + + </template> + </avue-crud> + </basic-container> + <templatePro :ProData="this.ProData"></templatePro> </span> <span v-else-if="type.prop==='tab2'"> -<!-- 濡傛灉鏄〃鏍煎姞琛ㄥ崟灏卞啀娆″紩鍏ヨ繖涓猚lassifyTreeform缁勪欢锛岄噷闈㈡槸琛ㄥ崟鐨勫唴瀹癸紝娌$敤灏卞垹闄ゆ帀銆傛妸涓婇潰tab鏍忎篃鍒犻櫎浜�--> - <classifyTreeform ref="childForm" :nodeList="nodeList" :TreeNewForm="TreeList"></classifyTreeform> - <template-pro></template-pro> + <classifyTreeform ref="childForm" :TreeNewForm="TreeList" :nodeList="nodeList"></classifyTreeform> </span> </basic-container> </el-main> </el-container> </template> - <script> //杩欓噷澹版槑涓�浜涜彍鍗曠粍浠剁敤娉曪細棣栧厛甯冨眬鍒嗕负宸︿晶鑿滃崟鍙充晶琛ㄦ牸锛屽彲鑳戒細鏈夊彸渚ab鏍忓姞琛ㄥ崟鐨勬儏鍐点�傛墍浠ュ彟澶栧紩鍏ヤ簡涓�涓彸渚ц〃鍗曠殑缁勪欢"classifyTreeform"銆� //棣栧厛鐖剁粍浠惰皟鐢ㄥ瓙缁勪欢鑿滃崟锛岄�氳繃provide浼犻�掑弬鏁般�傛湁Treeoption宸︿晶鏍戞柊澧炶〃鍗曢」 Treedata宸︿晶鏍戣妭鐐归厤缃」 crudTreeOption鍙充晶琛ㄦ牸閰嶇疆椤� crudTreeData鍙充晶琛ㄦ牸鏄剧ず鍐呭 //鍏朵腑琛ㄦ牸鐨勯厤缃」鐩存帴鐖朵紶瀛愪紶閫掕繃鏉ュ氨琛岋紝鐩存帴:option=浼犻�掔殑鍙傛暟鍚嶏紝閲岄潰鏁版嵁鏄剧ず鐨勫唴瀹瑰洜涓烘槸鍜屽乏渚ц仈鍔ㄧ殑锛屾墍浠ラ噸鏂颁竴涓狥ormlist锛岄�氳繃鐐瑰嚮鏍戣妭鐐逛笅鏍囨潵鍔ㄦ�佹覆鏌撳彸渚ц〃鏍硷紝涓嬮潰鏂规硶閮芥湁鍏蜂綋娉ㄩ噴 //鐒跺悗鍐嶈鍙充晶鐨勮〃鍗曪紝涓撻棬瀹氫箟浜嗕竴涓粍浠讹紝閫氳繃鐖朵紶瀛愬啀鎶婅〃鍗曟暟鎹甌reeList浼犻�掕繃鍘伙紝浼犻�掑墠鍦�10deCLi1ck鏂规硶閲岄潰渚夸簡澶勭悊涔熸槸涓�涓仈鍔ㄧ殑鏁堟灉锛岃〃鍗曠殑閰嶇疆椤瑰湪鍝釜瀛愮粍浠舵垨鑰呯埗缁勪欢鍐欓兘鍙互銆� +import { + getAtrrList, + TreeSave, + TreeDel, + TreeCheckDel, + TreeObjcet, + TreeEnable, + TreeDeactivate, + importClassify, + gridCodeClassifyTemplate, + getObjectByOid, + gridCodeClassifyTemplateAttr +} from "@/api/template/templateAttr"; + export default { name: "classifyTrees.vue", //浣跨敤inject鎺ユ敹鍙傛暟 - //Treeoption宸︿晶鏍戞柊澧炶〃鍗曢」 Treedata宸︿晶鏍戣妭鐐归厤缃」 crudTreeOption鍙充晶琛ㄦ牸閰嶇疆椤� crudTreeData鍙充晶琛ㄦ牸鏄剧ず鍐呭 + //Treeoption宸︿晶鏍戞柊澧炶〃鍗曢」 Treedata宸︿晶鏍戣妭鐐� 閰嶇疆椤� crudTreeOption鍙充晶琛ㄦ牸閰嶇疆椤� crudTreeData鍙充晶琛ㄦ牸鏄剧ず鍐呭 //Treeform鍙充晶琛ㄥ崟閰嶇疆椤� - inject: ['crudTreeOption',"crudTreeData", "Treedata", "Treeoption"], + inject: ['crudTreeOption', "crudTreeData"], data() { return { + ProData: [], + FindText: "", + fileList: [], + FlagObj: {}, + //淇敼瀵硅瘽妗� + TreeEditFormVisible: false, + //娣诲姞瀵硅瘽妗� + TreeAddFormVisible: false, + //褰撳墠鐐瑰嚮椤� + nodeClickList: "", + //鍒嗙被鍜屼富棰樺簱鐘舵�� + TreeFlag: false, + //鏍戝姞杞� + loading: false, + FormLoing:false, + TreeAddform: { + id: "", + name: "", + description: "", + //鐩镐技鏌ヨ瑙勫垯 + codeResembleRuleOidName: "", + //鍏抽敭灞炴�ф煡璇㈣鍒� + codekeyattrrepeatoidName: "", + //缂栫爜瑙勫垯 + coderuleoidName: "", + //瀛樺偍鐨勪笟鍔$被鍨� + btmtypename: "" + }, + //avue-tree鏁版嵁锛屾殏鏃舵病鏈変綔鐢紝閲岄潰鍔熻兘鐢╡lement鍐欎簡锛屽彧鐢╝vue鐨勪竴涓爲缁勪欢涓嶇敤鍐呯疆琛ㄥ崟浜嗐�� + TreeAvueform: {}, + Treedata: [], + Treeoption: { + addBtn: false, + editBtn: false, + delBtn: false, + defaultExpandAll: false, + menu: false, + // //杩欎釜鏄閫� + // multiple: true, + }, crudForm: "", - form: {}, //鍔ㄦ�佸垏鎹㈠鐞嗚繃鐨勮〃鏍兼暟鎹� Formlist: [], //tab鐘舵�� @@ -61,50 +181,128 @@ { name: "娴嬭瘯1", sex: "鐢�", - value:0 + value: 0 }, { name: "娴嬭瘯2", sex: "濂�", - value:1 + value: 1 } ], //浼犻�掔粰瀛愮粍浠跺姩鎬佹覆鏌撶殑鏁版嵁 - TreeList:{} + TreeList: {}, + //瀹氫箟涓�涓ā鏉垮睘鎬d锛屾暟鎹槸妯℃澘绠$悊琛ㄦ牸閲岄潰鐨刼id } }, //tab鏍忛粯璁ゆ槸琛ㄦ牸 mounted() { this.type = this.tabOption.column[0]; + this.getAttr(); }, methods: { - nodeClick(data) { - //鐐瑰嚮宸︿晶鏍戝彸渚у姩鎬佺殑鏂规硶 - this.Formlist = this.crudTreeData[data.value].column - this.nodeList=data.value - this.TreeList = this.Treeform.find(item => { - return item.value == data.value - }); - console.log(data) + //鍒嗙被鏍戞暟鎹鐞� + getAttr() { + getAtrrList().then(res => { + this.Treedata = res.data; + this.Treedata.forEach(() => { + for (let i = 0; i < this.Treedata.length; i++) { + this.Treedata[i].value = i; + } + }) + //璋冪敤淇敼灞炴�у悕鏂规硶 + this.ModifyProperties(this.Treedata, 'text', 'label'); + }).catch(res => { + this.$message.error(res) + }) }, - //tab鏍忓垏鎹� - handleChange(column) { - this.type = column + //瀹氫箟涓�涓慨鏀瑰璞″睘鎬у悕鐨勬柟娉� + ModifyProperties(obj, oldName, newName) { + for (let key in obj) { + if (key === oldName) { + obj[newName] = obj[key]; + delete obj[key]; + } + if (typeof obj[key] === 'object') { + this.ModifyProperties(obj[key], oldName, newName); + } + } }, - // 宸︽爲澶氶�� - checkChange(val) { - console.log(val) + //鏍戣妭鐐规坊鍔犳寜閽� + TreeAdd() { + this.TreeAddFormVisible = true; + // 鍒ゆ柇褰撳墠鏄惁鏈夌偣鍑诲瓙椤� + if (this.nodeClickList !== "") { + this.TreeFlag = true + } }, - //鍒犻櫎 - rowDel(row, index, done) { - console.log(row) - this.$confirm('姝ゆ搷浣滃皢姘镐箙鍒犻櫎, 鏄惁缁х画?', '鎻愮ず', { + //鏍戣妭鐐规坊鍔犱簨浠� + TreeAddHandler() { + const data = this.TreeAddform + this.$set(data, "parentCodeClassifyOid", this.nodeClickList.oid) + TreeSave(data).then(() => { + this.$message({ + type: 'success', + message: '娣诲姞鎴愬姛!' + }); + this.getAttr(); + this.TreeAddFormVisible = false + this.TreeAddform = "" + }).catch(res => { + this.$message({ + type: 'warning', + message: res + }); + }) + }, + //鏍戣妭鐐瑰垹闄ゆ寜閽� + TreeDel() { + this.$confirm('鏄惁鍒犻櫎褰撳墠閫夋嫨鐨勫垎绫伙紝灏嗕細鎶婂瓙鍒嗙被涓�骞跺垹闄わ紝濡傛灉瀛樺湪缂栫爜鏁版嵁灏嗕笉鑳借鍒犻櫎锛屾槸鍚︾户缁紵', '鎻愮ず', { confirmButtonText: '纭畾', cancelButtonText: '鍙栨秷', - type: 'warning' + type: 'warning', + customClass: 'my-messagebox', }).then(() => { - this.$message.success('鍒犻櫎鎴愬姛') - done(); + TreeCheckDel(this.nodeClickList).then(res => { + if (res.data.data) { + TreeDel(this.nodeClickList).then(() => { + this.$message({ + type: 'success', + message: '鍒犻櫎鎴愬姛!' + }); + this.getAttr(); + }).catch(res => { + this.$message({ + type: 'warning', + message: res + }); + }) + } else { + this.$confirm('褰撳墠鏁版嵁鍖呭惈鏈変笅绾ф暟鎹紝瑕佸垹闄ょ殑璇濅細鍜屼笅绾ф暟鎹竴璧峰垹闄わ紝浣犵‘璁ょ户缁�?', '鎻愮ず', { + confirmButtonText: '纭畾', + cancelButtonText: '鍙栨秷', + type: 'warning', + customClass: 'my-messageboxs', + }).then(() => { + TreeDel(this.nodeClickList).then(() => { + this.$message({ + type: 'success', + message: '鍒犻櫎鎴愬姛!' + }); + this.getAttr(); + }).catch(res => { + this.$message({ + type: 'warning', + message: res + }); + }) + }).catch(() => { + this.$message({ + type: 'info', + message: '宸插彇娑堝垹闄�' + }); + }); + } + }) }).catch(() => { this.$message({ type: 'info', @@ -112,25 +310,182 @@ }); }); }, - //娣诲姞 - rowSave(node,data,done,loading) { - this.$message.success('鏂板鍥炶皟') - // this.form.id = new Date().getTime(); - // this.form.value=new Date().getTime(); - // this.form.children=[]; - console.log(this.form) - // console.log("Type",node,data,done,loading) - // console.log(node,"node") - // console.log("data",data) - // console.log("done",done) - // console.log("loading",loading) - done(); + //淇敼鍥炲~ + TreeEdit() { + if (this.nodeClickList == "") { + this.$message({ + type: 'warning', + message: '璇峰厛浠庢爲涓婇�夋嫨涓�鏉℃暟鎹�!' + }); + } else { + this.TreeEditFormVisible = true + } }, - + //鏍戝埛鏂� + flushed() { + this.loading = true + this.getAttr() + setTimeout(() => { + this.loading = false; + this.nodeClickList = "" + }, 600); + }, + //鍚敤鍜屽仠鐢ㄩ兘鍏堝垽鏂姸鎬� + //鍚敤 + Enable() { + if (this.FlagObj.lcStatus == "Enabled") { + this.$message({ + type: 'warning', + message: '褰撳墠鍒嗙被涓嶆槸鍋滅敤鐘舵��' + }); + } else { + this.$confirm('鏄惁灏嗗瓙鍒嗙被涓�骞跺惎鐢紵', '鎻愮ず', { + confirmButtonText: '鏄�', + cancelButtonText: '鍙栨秷', + type: 'warning' + }).then(() => { + TreeEnable(this.nodeClickList).then((res) => { + this.$message({ + type: 'success', + message: '鍚敤鎴愬姛!' + }); + this.getAttr() + }) + }).catch(() => { + this.$message({ + type: 'info', + message: '宸插彇娑堝惎鐢�' + }); + }); + } + }, + //鍋滅敤 + Deactivate() { + if (this.FlagObj.lcStatus === "Disabled") { + this.$message({ + type: 'warning', + message: '褰撳墠鍒嗙被涓嶆槸鍚敤鐘舵��!' + }); + } else { + this.$confirm('鏄惁鍋滅敤褰撳墠鍒嗙被锛屽仠鐢ㄥ悗锛屽瓙鍒嗙被涔熷皢涓嶈兘琚娇鐢紝鏄惁缁х画锛�', '鎻愮ず', { + confirmButtonText: '纭畾', + cancelButtonText: '鍙栨秷', + type: 'warning' + }).then(() => { + TreeDeactivate(this.nodeClickList).then((res) => { + this.$message({ + type: 'success', + message: '鍋滅敤鎴愬姛!' + }); + this.nodeClickList['flag'] = true; + this.getAttr() + }) + }).catch(() => { + this.$message({ + type: 'info', + message: '宸插彇娑堝仠鐢�' + }); + }); + } + }, + async nodeClick(data) { + //瀹氫箟涓�涓ā鏉垮睘鎬d锛屾暟鎹槸妯℃澘绠$悊琛ㄦ牸閲岄潰鐨刼id + this.nodeClickList = data + console.log(data.oid) + try { + await TreeObjcet(data.oid).then(res => { + this.FlagObj = res.data.data + }).catch(res => { + this.$message.error(res) + }) + //妯℃澘绠$悊琛ㄦ牸鏁版嵁 + await gridCodeClassifyTemplate(data.oid).then(res => { + this.Formlist = res.data.data.filter(item => { + if(item.codeclassifyoid != ""){ + return item.codeclassifyoid == this.nodeClickList.oid + } + }) + console.log("formlist", this.Formlist) + gridCodeClassifyTemplateAttr({'conditionMap[classifyTemplateOid]': this.Formlist[0].oid}).then(res => { + this.ProData = res.data.data + console.log(this.ProData) + }).catch(res => { + this.$message.error(res) + }) + }).catch(res => { + console.log(res) + }) + // 鍩烘湰淇℃伅琛ㄥ崟鏁版嵁 + await getObjectByOid(this.nodeClickList.oid).then(res => { + this.TreeList = res.data.data + // eslint-disable-next-line no-const-assig + }).catch(res => { + this.$message.error(res) + }) + } catch (error) { + console.log(error) + } + }, + //tab鏍忓垏鎹� + handleChange(column) { + this.type = column + }, + //妯℃澘绠$悊琛ㄦ牸鏌ヨ + EnterFind() { + console.log(this.Formlist) + if (this.FindText == "") { + gridCodeClassifyTemplate().then(res => { + this.Formlist = res.data.data + }) + } else { + gridCodeClassifyTemplate().then(res => { + this.Formlist = res.data.data.filter(item => { + return item.name.includes(this.FindText) + } + ) + } + ) + } + }, + TemRefresh(){ + this.FormLoing=true + if(this.nodeClickList.oid != ""){ + gridCodeClassifyTemplate(this.nodeClickList.oid).then(res=>{ + this.Formlist = res.data.data.filter(item => { + return item.codeclassifyoid == this.nodeClickList.oid + }) + }) + }else { + this.FormLoing=true + } + setTimeout(() => { + this.FormLoing=false + }, 600); + }, + // 宸︽爲澶氶�� + checkChange(val) { + console.log(val) + }, } } </script> -<style lang="scss"> +<style lang="scss" scoped> +.el-form { + display: flex; + flex-wrap: wrap; /* 璁剧疆鍙崲琛岋紝浠ヤ究鍦ㄥ皬灞忓箷璁惧涓婁娇鐢ㄥ琛屽竷灞� */ +} +.el-form-item { + flex: 1; /* 璁剧疆鍏冪礌鍗犳嵁1浠界┖闂� */ + margin-right: 1rem; /* 璁剧疆鍏冪礌涔嬮棿鐨勯棿璺� */ +} + +.my-messagebox { + width: 700px; +} + +.my-messageboxs { + width: 500px; +} </style> -- Gitblit v1.9.3