修改

src/views/codeRule/LinkEle.vue

@@ -27,10 +27,10 @@
                 v-for="(item, index) in paramList" 
                 :key="index"
                 :class="{ active: activeIndex === index }"
-                @click="handleSelect(index, item)"
+                @click="handleSelect1(index, item)"
 
                 >
-                {{ item.paramName }}
+                {{ item.symbolName }}
             </span>
           </div>
         </div>
@@ -66,7 +66,7 @@
         <div class="condition-list">
           <div class="condition-item1">
            <div 
-                v-for="(item, index) in paramList[activeIndex].codeList" 
+                 v-for="(item, index) in paramList[activeIndex].standardInfos" 
                 :key="index"
               
                 >
@@ -74,13 +74,13 @@
             <span>
                 <div class="condition-header-content">
                 <div style="color: black;">
-                    {{item.codeName}}
+                    {{item.name}}
                 </div>
                 <i class="el-icon-close" @click.stop="handleDeleteItem(item,index)"></i>
                 </div>
                 <div class="code-list">
-                <div v-for="(item1,index) in item.codeValue" :key="index" class="code-item">
-                    {{ item1.name }}
+                <div class="code-item">
+                     {{ item.standardInfoGroupNameVO.name }}
                 </div>
                 </div>
             </span>
@@ -96,24 +96,27 @@
                <i class="el-icon-connection" style="color: rgb(46, 123, 115);"></i>
             <span>关联关系</span>
             </div>
-            <div class="link-list">
-                <div v-for="(item, index) in linkListData" :key="index" class="link-item">
+             <div class="link-list">
+                <div v-for="(item, index) in linkListData" :key="index" class="link-item" :class="{ clicked: item.clicked }" @click="toggleClick(item, index)">
+                    <i class="el-icon-close" @click.stop="handleDeleteLinkItem(item,index)"></i>
                     <div class="link-name">
-                        <span>{{ item.paramName }}</span>
+                        <span>{{ item.name }}</span>
                     </div>
                   <div>
                        <i class="el-icon-connection" style="color: black; font-size: larger;"></i>
                   </div>
                   <div class="code-list">
-                    <div v-for="(codeItem, codeIndex) in item.codeList" :key="codeIndex" class="code-item">
-                        <div class="code-title">{{ codeItem.codeName }}</div>
-                        <div class="code-detail">{{ codeItem.codeValueName }}</div>
+                    <div v-for="(codeItem, codeIndex) in item.standardInfos" :key="codeIndex" class="code-item">
+                        <div class="code-title">{{ codeItem.name }}</div>
+                        <div class="code-detail">{{ codeItem.standardInfoGroupNameVO.name }}</div>
                     </div>
 
                   </div>
+                 
                 </div>
             </div>
             
+            
           </div>
     <div slot="footer" class="dialog-footer">
    
@@ -213,6 +216,7 @@
 import { getDictionary } from "@/api/system/dict";
 import { findNodeTableByCondition as selectByNodeTable} from "@/api/manager/wbsprivate";
 import checkEleHtml from "./checkEleHtml.vue";
+import {getInfoPage,saveConditionSet,getConditionSet,getElementJoin } from "@/api/ruleManage/fileRule.js";
 export default {
   name: 'ConditionsSet',
   components: {
@@ -222,13 +226,20 @@ export default {
     return {
       visible: false,
       treeId: '', // 树节点ID
-       paramList: [
+      paramList: [
         {
-          paramName: '<0.75',
-          codeList:[
-            {codeName: 'C3A', codeValue: [
-              {name:'矿渣硅酸盐水泥',value:'1'}
-            ]},
+          symbolName: '<0.75',
+          standardInfos:[
+            {name: 'C3A', 
+            rightStandardInfos: [
+              {name:'矿渣硅酸盐水泥',id:'1'}
+            ],
+            standardInfoGroupNameVO:{
+              name: '矿渣硅酸盐水泥'
+            }
+
+            
+          },
             {codeName: 'C3S', codeValue: []},
           ]
 
@@ -247,21 +258,8 @@ export default {
       checkTableRow: {}, // 当前选中的表单行数据
       checkEleList: [], // 存储选中的元素
       linkListData: [
-        {paramName:'<0.75',codeList:[
-          {codeName: 'C3A', codeValue: [
-            {name:'矿渣硅酸盐水泥',value:'1'},
-            {name:'矿渣硅酸盐水泥2',value:'1'}
-          ],codeValueName: '矿渣硅酸盐水泥/矿渣硅酸盐水泥2'},
-          {codeName: 'C3A33', codeValue: [
-            {name:'矿渣硅酸盐水泥77',value:'1'},
-            {name:'矿渣硅酸盐水泥2',value:'1'}
-          ],codeValueName: '矿渣硅酸盐水泥/矿渣硅酸盐水泥2'},
-          {codeName: 'C3A33', codeValue: [
-            {name:'矿渣硅酸盐水泥77',value:'1'},
-            {name:'矿渣硅酸盐水泥2',value:'1'}
-          ],codeValueName: '矿渣硅酸盐水泥/矿渣硅酸盐水泥2'},
-    
-        ]},
+       
+      
            
       ], // 关联关系数据
 
@@ -275,22 +273,49 @@ export default {
       this.getTableTypelist();
       this.visible = true
       if(val.length > 0&&val[0].name) {
-        console.log(val,'val');
-        this.paramList = val.map(item => {
-          return {
-            paramName: item.select + item.name,
-            codeList: []
-          }
-        })
         this.treeId = treeId
         this.id = id
         this.projectid = projectid
-        
-       
+        this.paramList=val
+        val.forEach((item,index)=>{
+          this.handleSelect(index)
+       })
+       this.activeIndex = 0
       }else{
         this.paramList = []
           this.treeId = ''
       }
+    },
+    async handleSelect(index) {
+      this.activeIndex = index
+      let leftId = this.paramList[index].id
+     let arr= await this.getRelationData(this.id,leftId)
+     
+      if(arr.length>0){
+          this.$nextTick(()=>{
+              // this.paramList[index].standardInfos = arr[0]['standardInfos']
+              this.$set(this.paramList, index, { ...this.paramList[index], standardInfos: arr[0]['standardInfos'] });
+          })
+
+      }else{
+        this.paramList[index].standardInfos = []
+      }
+      
+    },
+   async getRelationData(id,leftId){
+          try {
+          const res = await getElementJoin({ id, leftId });
+          if (res.data.code === 200) {
+            console.log(res.data.data, '获取的条件设置数据');
+            return res.data.data; // 直接返回数据
+          } else {
+            this.$message.error(res.data.msg);
+            throw new Error(res.data.msg); // 抛出错误，以便在调用处处理
+          }
+        } catch (error) {
+          // 这里可以添加额外的错误处理逻辑，例如记录日志
+          throw error; // 重新抛出错误，以便在调用处捕获
+        }
     },
      getTableTypelist() {
       getDictionary({
@@ -328,7 +353,7 @@ export default {
            this.addDialogVisible = true
       this.getTableData();
     },
-   handleSelect(index) {
+   handleSelect1(index) {
       this.activeIndex = index
     },
 
@@ -525,9 +550,11 @@ export default {
 }
 .code-list{
     display: flex;
+            font-weight: bold;
     .code-item{
         margin-right: 5px;
         margin-top: 5px;
+
     }
 }
 
@@ -540,7 +567,7 @@ export default {
     
      
     background: rgb(213, 222, 255);;
-      color: #409EFF;
+          color:  rgba(37,80,162,1);
       border-radius: 4px;
       cursor: pointer;  // 添加指针样式
       transition: all 0.3s;  // 添加过渡效果
@@ -564,13 +591,12 @@ export default {
     }
   }
 }
-.condition-header1-title{
-  width: 99%;
-  background: rgb(238, 238, 238);
-  color: rgba(130, 130, 130, 1);
-  padding: 10px;
-  border-radius: 10px;
-  margin-bottom: 10px;
+.result-container{
+  width: 100%;
+  border: 1px solid #EBEEF5;
+  border-radius: 4px;
+  background: #f5f7fa;
+  margin-top: 10px;
 }
   .condition-header {
     display: flex;
@@ -589,14 +615,34 @@ export default {
     max-height: 350px;
     overflow-y: auto;
     padding: 10px;
-      font-weight: bold;
+    font-weight: bold;
+   
     .link-item{
       display: flex;
       align-items: center;
       padding: 10px;
       background-color: white;
       border-radius: 10px;
-      padding: 10px;
+      cursor: pointer; // 添加指针样式
+      position: relative; // 添加相对定位
+      margin-bottom: 10px;
+        &.clicked {
+          background-color: #e0e0e0; // 点击时的背景色
+        }
+       
+       .el-icon-close {
+                    position: absolute; // 绝对定位
+                    top: 30%; // 垂直居中
+                    right: 10px; // 距离右侧10px
+                    transform: translateY(-50%); // 垂直方向上的偏移量，确保图标垂直居中
+                    color: #F56C6C; // 删除图标的颜色
+                    cursor: pointer; // 添加指针样式
+                    font-size: 16px; // 图标大小
+
+                    &:hover {
+                      opacity: 0.8; // 悬停效果
+                  }
+          }
       .link-name{
         flex-shrink: 0;
         background-color: rgb(167, 224, 218);
@@ -611,6 +657,7 @@ export default {
       .code-list{
         margin-left: 15px;
         display: flex;
+
        
         overflow-x: auto;
            font-weight: bold;
@@ -620,13 +667,13 @@ export default {
               flex-shrink: 0;
                   margin-left: 5px;
        
-                padding: 8px 8px;
+                padding:8px;
               
               
               background: rgb(213, 222, 255);;
                 color: #409EFF;
                 border-radius: 4px;
-                cursor: pointer;  // 添加指针样式
+           
                 transition: all 0.3s;  // 添加过渡效果
                 height: 50px;