私有树 节点参数关联元素

src/views/manager/projectinfo/tree.vue

@@ -1300,6 +1300,12 @@
           </el-table-column>
           <el-table-column label="操作" width="120" align="center">
             <template slot-scope="scope">
+              <el-button
+                type="text"
+                size="small"
+                class="text-icon-primary"
+                @click="linkEle(scope.row)"
+              >关联元素</el-button>
               <el-button
                 type="text"
                 size="small"
@@ -1441,6 +1447,112 @@
         v-if="editElementVisible"
       ></EditElement>
     </el-dialog>
+
+
+        <el-dialog
+      title="节点参数设置-关联元素"
+      :visible.sync="linkEleVisible"
+      width="800px"
+      append-to-body
+      class="jiedian"
+      :close-on-click-modal="false"
+    >
+      <div>
+        <el-table
+          :data="linkEleTableList"
+          border
+          style="width: 100%"
+          height="400"
+        >
+          <el-table-column
+            align="center"
+            prop="tableName"
+            label="元素表名"
+          >
+          </el-table-column>
+          <el-table-column
+            align="center"
+            prop="elementName"
+            label="关联元素字段"
+          >
+          </el-table-column>
+          <el-table-column
+            label="操作"
+            width="160"
+            align="center"
+          >
+            <template slot-scope="scope">
+              <el-button v-if="!scope.row.mappingId"
+                type="text"
+                size="small"
+                class="text-icon-primary"
+                @click="tolinkEle(scope.row)"
+              >选择元素</el-button>
+              <el-button v-if="!!scope.row.mappingId"
+                type="text"
+                size="small"
+                class="text-icon-danger"
+                @click="delLink(scope.row)"
+              >删除关联</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <span
+        slot="footer"
+        class="dialog-footer"
+      >
+        <!-- <el-button @click="saveLinks">保 存</el-button> -->
+        <el-button @click="linkEleVisible = false">关 闭</el-button>
+      </span>
+    </el-dialog>
+
+        <el-dialog
+      title="选择关联元素"
+      :visible.sync="linkCheckVisible"
+      width="600px"
+      append-to-body
+      class="jiedian"
+      :close-on-click-modal="false"
+    >
+      <div>
+        <div class="flex mg-b-20">
+          <el-input v-model="linkEleKey" placeholder="请输入元素关键字搜索"></el-input>
+          <el-link class="mg-l-20" :underline="false">
+            <i class="el-icon-search" style="font-size:20px" @click="searchEle"></i>
+          </el-link>
+        </div>
+        <el-table
+          :data="linkEleList"
+          border
+          style="width: 100%"
+          height="400"
+        >
+          <el-table-column
+            align="center"
+            prop="eName"
+            label="元素名"
+          >
+          </el-table-column>
+
+          <el-table-column
+            label="操作"
+            width="55">
+            <template slot-scope="scope">
+              <el-checkbox v-model="scope.row.checked" @change="value => linkEleCheck(value,scope.$index)"></el-checkbox>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <span
+        slot="footer"
+        class="dialog-footer"
+      >
+        <el-button @click="saveLinkEle">保 存</el-button>
+        <el-button @click="linkCheckVisible = false">关 闭</el-button>
+      </span>
+    </el-dialog>
+
   </div>
 </template>
 
@@ -1460,6 +1572,9 @@ import {
   keymap,
   updateBatchNodeTableInfo2,
   updateStatus,
+  getParamElements,
+  specifiedParamElements,
+  delParamElements
 } from "@/api/manager/wbstree";
 import {
   saveElement,
@@ -1688,6 +1803,15 @@ export default {
       testTreeLoad: false,
       testTreeData: [],
       mixRatioTestIds: [],
+
+      //节点参数，关联元素
+      curParam:{},//当前节点参数
+      linkEleVisible:false,
+      linkEleTableList:[],//元素表数组
+      curLinkEleTable:{},//当前元素表
+      linkCheckVisible:false,//关联弹框
+      linkEleList:[],//元素数组
+      linkEleKey:'',//搜索关键字
     };
   },
   computed: {
@@ -3082,7 +3206,99 @@ export default {
 
 
       });
-    }
+    },
+
+
+    //节点参数 关联元素
+    linkEle(row){
+      this.linkEleVisible = true;
+      this.curParam = row;
+      getParamElements({nodeId:this.jiedianId,paramId:row.id}).then((res) => {
+        if (res.data.data.length) {
+          this.linkEleTableList = res.data.data;
+        } else {
+          this.linkEleTableList = [];
+        }
+      })
+    },
+
+    //关联元素弹框
+    tolinkEle(row){
+      this.curLinkEleTable = row;
+      this.linkCheckVisible = true;
+      selectFormElements(row.id).then((res) => {
+        res.data.data.forEach((ele)=>{
+          ele.checked = false;
+          ele.show = true;
+        })
+        this.linkEleList = res.data.data;
+        this.linkEleListAll = [].concat(this.linkEleList);
+      })
+    },
+
+    //删除关联
+    delLink(data){
+      this.$confirm('删除关联, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        console.log(data)
+        delParamElements(data).then(() => {
+          this.$message({
+            type: "success",
+            message: "删除成功!"
+          });
+
+          getParamElements({nodeId:this.jiedianId,paramId:this.curParam.id}).then((res) => {
+           if (res.data.data.length) {
+              this.linkEleTableList = res.data.data;
+              } else {
+               this.linkEleTableList = [];
+          } })
+        })
+        
+      }).catch(() => {
+
+      });
+    },
+
+    //筛选元素
+    searchEle(){
+      this.linkEleList = this.linkEleListAll.filter((ele)=>{
+        return ele.eName.indexOf(this.linkEleKey) > -1;
+      })
+    },
+
+    linkEleCheck(value,index){
+      //console.log(value)
+      if(value){
+        this.linkEleList.forEach((ele,i)=>{
+          if(i != index){
+            ele.checked = false;
+          }
+        })
+      }
+    },
+
+    //关联元素
+    saveLinkEle(){
+        let target={}
+        this.linkEleList.forEach(e=>{
+             if(e.checked==true){
+              target={elementId:e.id,paramId:this.curParam.id};
+             }
+        })
+        specifiedParamElements(target).then(data=>{
+          this.linkCheckVisible = false;  
+          getParamElements({nodeId:this.jiedianId,paramId:this.curParam.id}).then((res) => {
+           if (res.data.data.length) {
+              this.linkEleTableList = res.data.data;
+              } else {
+               this.linkEleTableList = [];
+           }})
+        })
+    },
 
   },
   watch: {