From ae5ee96f6a7d6722526cb00f8b7a8fb7778596ea Mon Sep 17 00:00:00 2001
From: 田源 <lastanimals@163.com>
Date: 星期五, 05 五月 2023 18:24:20 +0800
Subject: [PATCH] 分类树功能处理
---
Source/UBCS-WEB/src/components/Tree/classifyTrees.vue | 282 ++++++++++++++++++++++++++++++++++++++++++++++----------
1 files changed, 231 insertions(+), 51 deletions(-)
diff --git a/Source/UBCS-WEB/src/components/Tree/classifyTrees.vue b/Source/UBCS-WEB/src/components/Tree/classifyTrees.vue
index 7bda38b..f38af3b 100644
--- a/Source/UBCS-WEB/src/components/Tree/classifyTrees.vue
+++ b/Source/UBCS-WEB/src/components/Tree/classifyTrees.vue
@@ -1,23 +1,74 @@
<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">淇敼</el-button>
+ <el-button plain size="small" type="primary" @click="TreeDel">鍒犻櫎</el-button>
+ <el-button plain size="small" type="primary">鍚敤</el-button>
+ </div>
+ <div style="display: flex;justify-content: space-around;margin-top: 5px;margin-bottom: 5px">
+ <el-button plain size="small" type="primary">鍋滅敤</el-button>
+ <el-button plain size="small" type="primary">瀵煎嚭</el-button>
+ <el-button plain size="small" type="primary">瀵煎叆</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>
+ <avue-tree ref="tree" v-model="TreeAvueform" v-loading="loading" :data="Treedata" :option="Treeoption" :defaultExpandAll="false"
+ 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>
+ <avue-crud v-model="crudForm" :data="this.Formlist" :option="this.crudTreeOption"
+ style="height: 700px"></avue-crud>
</span>
<span v-else-if="type.prop==='tab2'">
<!-- 濡傛灉鏄〃鏍煎姞琛ㄥ崟灏卞啀娆″紩鍏ヨ繖涓猚lassifyTreeform缁勪欢锛岄噷闈㈡槸琛ㄥ崟鐨勫唴瀹癸紝娌＄敤灏卞垹闄ゆ帀銆傛妸涓婇潰tab鏍忎篃鍒犻櫎浜�-->
- <classifyTreeform ref="childForm" :nodeList="nodeList" :TreeNewForm="TreeList"></classifyTreeform>
+ <classifyTreeform ref="childForm" :TreeNewForm="TreeList" :nodeList="nodeList"></classifyTreeform>
<template-pro></template-pro>
</span>
</basic-container>
@@ -30,16 +81,49 @@
//棣栧厛鐖剁粍浠惰皟鐢ㄥ瓙缁勪欢鑿滃崟锛岄�氳繃provide浼犻�掑弬鏁般�傛湁Treeoption宸︿晶鏍戞柊澧炶〃鍗曢」 Treedata宸︿晶鏍戣妭鐐归厤缃」 crudTreeOption鍙充晶琛ㄦ牸閰嶇疆椤� crudTreeData鍙充晶琛ㄦ牸鏄剧ず鍐呭
//鍏朵腑琛ㄦ牸鐨勯厤缃」鐩存帴鐖朵紶瀛愪紶閫掕繃鏉ュ氨琛岋紝鐩存帴:option=浼犻�掔殑鍙傛暟鍚嶏紝閲岄潰鏁版嵁鏄剧ず鐨勫唴瀹瑰洜涓烘槸鍜屽乏渚ц仈鍔ㄧ殑锛屾墍浠ラ噸鏂颁竴涓狥ormlist锛岄�氳繃鐐瑰嚮鏍戣妭鐐逛笅鏍囨潵鍔ㄦ�佹覆鏌撳彸渚ц〃鏍硷紝涓嬮潰鏂规硶閮芥湁鍏蜂綋娉ㄩ噴
//鐒跺悗鍐嶈鍙充晶鐨勮〃鍗曪紝涓撻棬瀹氫箟浜嗕竴涓粍浠讹紝閫氳繃鐖朵紶瀛愬啀鎶婅〃鍗曟暟鎹甌reeList浼犻�掕繃鍘伙紝浼犻�掑墠鍦�10deCLi1ck鏂规硶閲岄潰渚夸簡澶勭悊涔熸槸涓�涓仈鍔ㄧ殑鏁堟灉锛岃〃鍗曠殑閰嶇疆椤瑰湪鍝釜瀛愮粍浠舵垨鑰呯埗缁勪欢鍐欓兘鍙互銆�
+import {getAtrrList,TreeSave,TreeDel} 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 {
+ TreeAddFormVisible: false,
+ //褰撳墠鐐瑰嚮椤�
+ nodeClickList: "",
+ // 鍒嗙被鍜屼富棰樺簱鐘舵��
+ TreeFlag: false,
+ // 鏍戝姞杞�
+ loading: 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,30 +145,142 @@
{
name: "娴嬭瘯1",
sex: "鐢�",
- value:0
+ value: 0
},
{
name: "娴嬭瘯2",
sex: "濂�",
- value:1
+ value: 1
}
],
//浼犻�掔粰瀛愮粍浠跺姩鎬佹覆鏌撶殑鏁版嵁
- TreeList:{}
+ TreeList: {}
}
},
//tab鏍忛粯璁ゆ槸琛ㄦ牸
mounted() {
this.type = this.tabOption.column[0];
+ this.getAttr();
},
methods: {
+ //鍒嗙被鏍戞暟鎹鐞�
+ getAttr() {
+ getAtrrList().then(res => {
+ this.Treedata = res.data;
+ this.Treedata.forEach((item, value) => {
+ for (let i = 0; i < this.Treedata.length; i++) {
+ this.Treedata[i].value = i;
+ }
+ })
+ //璋冪敤淇敼灞炴�у悕鏂规硶
+ this.ModifyProperties(this.Treedata, 'text', 'label');
+ }).catch(res => {
+ console.log(res)
+ })
+ },
+ //瀹氫箟涓�涓慨鏀瑰璞″睘鎬у悕鐨勬柟娉�
+ 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);
+ }
+ }
+ },
+ //鏍戣妭鐐规坊鍔犳寜閽�
+ TreeAdd() {
+ this.TreeAddFormVisible = true;
+ // 鍒ゆ柇褰撳墠鏄惁鏈夌偣鍑诲瓙椤�
+ if (this.nodeClickList !== "") {
+ this.TreeFlag = true
+ }
+ },
+ //鏍戣妭鐐规坊鍔犱簨浠�
+ TreeAddHandler(){
+ const data=this.TreeAddform
+ this.$set(data,"parentCodeClassifyOid",this.nodeClickList.oid)
+ console.log(data)
+ TreeSave(data).then(res=>{
+ console.log(res)
+ }).catch(res=>{
+ console.log(res)
+ })
+ },
+ //鏍戣妭鐐瑰垹闄ゆ寜閽�
+ TreeDel(){
+ const oid=this.nodeClickList.oid
+ if(this.nodeClickList !==""){
+ this.$confirm('鏄惁鍒犻櫎褰撳墠閫夋嫨鐨勫垎绫伙紝灏嗕細鎶婂瓙鍒嗙被涓�骞跺垹闄わ紝濡傛灉瀛樺湪缂栫爜鏁版嵁灏嗕笉鑳借鍒犻櫎锛屾槸鍚︾户缁紵', '鎻愮ず', {
+ confirmButtonText: '纭畾',
+ cancelButtonText: '鍙栨秷',
+ type: 'warning',
+ customClass: 'my-messagebox',
+ }).then(() => {
+ if(this.nodeClickList.children.length > 0){
+ this.$confirm('褰撳墠鏁版嵁鍖呭惈鏈変笅绾ф暟鎹紝瑕佸垹闄ょ殑璇濅細鍜屼笅绾ф暟鎹竴璧峰垹闄わ紝浣犵‘璁ょ户缁�?', '鎻愮ず', {
+ confirmButtonText: '纭畾',
+ cancelButtonText: '鍙栨秷',
+ type: 'warning',
+ customClass: 'my-messageboxs',
+ }).then(() => {
+ TreeDel(JSON.parse(oid)).then(()=>{
+ this.$message({
+ type: 'success',
+ message: '鍒犻櫎鎴愬姛!'
+ });
+ }).catch(res=>{
+ this.$message({
+ type: 'error',
+ message: res
+ });
+ })
+ }).catch(() => {
+ this.$message({
+ type: 'info',
+ message: '宸插彇娑堝垹闄�'
+ });
+ });
+ }else {
+ TreeDel(oid).then(()=>{
+ this.$message({
+ type: 'success',
+ message: '鍒犻櫎鎴愬姛!'
+ });
+ }).catch(res=>{
+ this.$message({
+ type: 'error',
+ message: res
+ });
+ })
+ }
+ }).catch(() => {
+ this.$message({
+ type: 'info',
+ message: '宸插彇娑堝垹闄�'
+ });
+ });
+ }
+ },
+ //鏍戝埛鏂�
+ flushed() {
+ this.loading = true
+ this.getAttr()
+ setTimeout(() => {
+ this.loading = false;
+ this.nodeClickList = ""
+ }, 600);
+ },
nodeClick(data) {
//鐐瑰嚮宸︿晶鏍戝彸渚у姩鎬佺殑鏂规硶
- this.Formlist = this.crudTreeData[data.value].column
- this.nodeList=data.value
- this.TreeList = this.Treeform.find(item => {
- return item.value == data.value
- });
+ // this.Formlist = this.crudTreeData[data.value].column
+ // this.nodeList=data.value
+ // this.TreeList = this.Treeform.find(item => {
+ // return item.value == data.value
+ // });
+ this.nodeClickList = data
console.log(data)
},
//tab鏍忓垏鎹�
@@ -95,42 +291,26 @@
checkChange(val) {
console.log(val)
},
- //鍒犻櫎
- rowDel(row, index, done) {
- console.log(row)
- this.$confirm('姝ゆ搷浣滃皢姘镐箙鍒犻櫎, 鏄惁缁х画?', '鎻愮ず', {
- confirmButtonText: '纭畾',
- cancelButtonText: '鍙栨秷',
- type: 'warning'
- }).then(() => {
- this.$message.success('鍒犻櫎鎴愬姛')
- done();
- }).catch(() => {
- this.$message({
- type: 'info',
- message: '宸插彇娑堝垹闄�'
- });
- });
- },
- //娣诲姞
- 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();
- },
+
}
}
</script>
<style lang="scss">
+.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