添加条件修改

src/views/codeRule/ConditionsSet.vue

@@ -28,6 +28,7 @@
                 :key="index"
                 :class="{ active: activeIndex === index }"
                 @click="handleSelect(index, item)"
+               
 
                 >
                 {{ item.paramName }}
@@ -91,6 +92,32 @@
         </div>
       </div>
     </div>
+    <div class="result-container">
+            <div class="condition-header">
+               <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-name">
+                        <span>{{ item.paramName }}</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>
+
+                  </div>
+                </div>
+            </div>
+            
+          </div>
+
+    
     <div slot="footer" class="dialog-footer">
    
       <el-button type="primary" @click="handleConfirm" :style="{ background: 'rgb(37, 80, 162)', borderColor: 'rgb(37, 80, 162)' }">保存</el-button>
@@ -149,7 +176,7 @@ export default {
   name: 'ConditionsSet',
   data() {
     return {
-      visible: false,
+      visible: true,
        paramList: [
         {
           paramName: '<0.75',
@@ -163,10 +190,6 @@ export default {
         }
        ] , // 参数列表数据
        activeIndex: 0, // 当前选中的参数索引
-       conditionList:[
-        {name:'1111',value:[222,333,444]},
-
-       ],
        addDialogVisible: false,
         addForm: {
             codeName: '',
@@ -184,6 +207,47 @@ export default {
               { value: '3', label: '普通酸盐水泥' },
             // 添加更多选项...
         ],
+      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'},
+          {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'},
+          {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: '矿渣硅酸盐水泥/矿渣硅酸盐水泥2888'},
+            {codeName: 'C3A33', codeValue: [
+            {name:'矿渣硅酸盐水泥77',value:'1'},
+            {name:'矿渣硅酸盐水泥2',value:'1'}
+          ],codeValueName: '矿渣硅酸盐水泥/矿渣硅酸盐水泥2888'},
+            {codeName: 'C3A33', codeValue: [
+            {name:'矿渣硅酸盐水泥77',value:'1'},
+            {name:'矿渣硅酸盐水泥2',value:'1'}
+          ],codeValueName: '矿渣硅酸盐水泥/矿渣硅酸盐水泥288899'},
+        ]},
+           
+      ], // 关联关系数据
 
     }
   },
@@ -283,6 +347,7 @@ export default {
 .conditions-container {
   display: flex;
   gap: 20px;
+  font-weight: bold;
 //   height: 200px;
 .green-txt{
     color: rgb(46, 123, 115);;
@@ -295,19 +360,7 @@ export default {
       background: #f5f7fa;
   }
 
-  .condition-header {
-    display: flex;
-    // justify-content: space-between;
-    align-items: center;
-    padding: 10px;
-    border-bottom: 1px solid #EBEEF5;
-  
 
-    span {
-      font-weight: bold;
-      margin-left: 10px;
-    }
-  }
 
   .condition-list,
   .condition-content {
@@ -406,9 +459,11 @@ export default {
 }
 .code-list{
     display: flex;
+            font-weight: bold;
     .code-item{
         margin-right: 5px;
         margin-top: 5px;
+
     }
 }
 
@@ -421,7 +476,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;  // 添加过渡效果
@@ -445,6 +500,82 @@ export default {
     }
   }
 }
+.result-container{
+  width: 100%;
+  border: 1px solid #EBEEF5;
+  border-radius: 4px;
+  background: #f5f7fa;
+  margin-top: 10px;
+}
+  .condition-header {
+    display: flex;
+    // justify-content: space-between;
+    align-items: center;
+    padding: 10px;
+    border-bottom: 1px solid #EBEEF5;
+  
+
+    span {
+      font-weight: bold;
+      margin-left: 10px;
+    }
+  }
+  .link-list{
+    max-height: 350px;
+    overflow-y: auto;
+    padding: 10px;
+      font-weight: bold;
+    .link-item{
+      display: flex;
+      align-items: center;
+      padding: 10px;
+      background-color: white;
+      border-radius: 10px;
+      padding: 10px;
+      .link-name{
+        flex-shrink: 0;
+        background-color: rgb(167, 224, 218);
+        color: rgba(46, 123, 115, 1);
+        border-radius: 5px;
+        text-align: center;
+    
+        padding:8px;
+        margin-right: 15px;
+
+      }
+      .code-list{
+        margin-left: 15px;
+        display: flex;
+       
+        overflow-x: auto;
+           font-weight: bold;
+          .code-item {
+              // display: flex;
+              margin-bottom: 10px;
+              flex-shrink: 0;
+                  margin-left: 5px;
+       
+                padding: 8px 8px;
+              
+              
+              background: rgb(213, 222, 255);;
+                color: #409EFF;
+                border-radius: 4px;
+                cursor: pointer;  // 添加指针样式
+                transition: all 0.3s;  // 添加过渡效果
+                height: 40px;
+                
+              .code-title{
+                color: black;
+                margin-bottom: 10px;
+              }
+              .code-detail{
+                color:  rgba(37,80,162,1);
+              }
+            }
+      }
+    }
+  }
 </style>
 <style lang="scss">
 .dialog-set {

src/views/codeRule/LinkEle.vue

@@ -196,7 +196,7 @@ export default {
   },
   data() {
     return {
-      visible: true,
+      visible: false,
       treeId: '', // 树节点ID
        paramList: [
         {
@@ -315,11 +315,7 @@ export default {
 
         codeValue: selectedCodes
        })
-      // const newCondition = {
-      //   paramName: this.checkTableRow.tableName,
-      //   codeList: selectedCodes
-      // };
-      // this.paramList[this.activeIndex].codeList.push(newCondition);
+