效果预览修改

src/views/codeRule/PreviewResult.vue

@@ -13,24 +13,13 @@
         
       <div class="sample-info">
        <div class="info-grid">
-         <div class="info-row" v-for="(item,index) in list" :key="index">
-          <el-select v-model="sampleValue" placeholder="样品品种" class="info-select">
-            <el-option label="硅酸盐水泥" value="1"></el-option>
+         <div class="info-row" v-for="(item,index) in ypList" :key="item.id">
+          <el-select  v-model="selectedValues[index]" placeholder="请选择" class="info-select" clearable   @change="handleSelectChange(index, $event)">
+            <el-option  v-for="(item1,index1) in item.info" :label="item1.name" :value="item1.id" :key="item1.id"></el-option>
           </el-select>
         </div>
        </div>
 
-        <!-- <div class="info-row">
-          <el-select v-model="codeValue" placeholder="代号" class="info-select">
-            <el-option label="P.I" value="1"></el-option>
-          </el-select>
-        </div>
-
-        <div class="info-row">
-          <el-select v-model="strengthValue" placeholder="强度等级" class="info-select">
-            <el-option label="42.5" value="1"></el-option>
-          </el-select>
-        </div> -->
       </div>
 
       <!-- 技术指标区域 -->
@@ -38,20 +27,20 @@
            <div class="title-container">
                     <span>技术指标</span>
             </div>
-        <div class="tech-content">
+        <div class="tech-content" v-for="item in jsList" :key="item.id" v-loading="preViewLoad">
           <div class="tech-item">
-            <div class="tech-label">筛选结果</div>
-            <div class="tech-val"><=4.0</div>
+            <div class="tech-label">{{ item.name }}</div>
+            <div class="tech-val">{{ item.symbolName }}</div>
           </div>
 
-          <div class="tech-item-list">
+          <div class="tech-item-list"  v-for="item1 in item.group" :key="item1.id">
             <div class="tech-item-1">
                 <div  class="tech-label">表单名称</div>
-                <div class="tech-val">水泥试务报告单</div>
+                <div class="tech-val">{{ item1.privateName }}</div>
             </div>
              <div class="tech-item-1">
                 <div class="tech-label">回显位置</div>
-                <div  class="tech-val">水泥试务报告单</div>
+                <div  class="tech-val">{{ item1.elementNames }}</div>
             </div>
            
           </div>
@@ -64,33 +53,84 @@
 </template>
 
 <script>
+import {effectPreview } from "@/api/ruleManage/fileRule.js";
 export default {
   name: 'PreviewResult',
+  props: {
+    ypList: {
+      type: Array,
+      required: true,
+      default: () => []
+    }
+  },
   data() {
     return {
       visible: false,
-      sampleValue: '',
-      codeValue: '',
-      strengthValue: '',
-      techValue1: '',
-      techValue2: '',
-      techValue3: '',
-      list: [
-        { label: '样品品种', value: 'sample' },
-        { label: '代号', value: 'code' },
-        { label: '强度等级', value: 'strength' },
-        { label: '强度等级', value: 'strength' },
-        { label: '强度等级', value: 'strength' }
-      ]
+
+      selectedValues: [],
+      preViewLoad:false,
     }
   },
+  created() {
+    // 在组件创建时初始化 selectedValues
+    this.initializeSelectedValues();
+  },
   methods: {
-    show() {
-      this.visible = true
-    },
-    hide() {
-      this.visible = false
+      show() {
+        this.visible = true
+         this.initializeSelectedValues();
+             this.getPreviewData('');
+      },
+       initializeSelectedValues() {
+          // 根据 ypList 的长度初始化 selectedValues
+           this.selectedValues = new Array(this.ypList.length).fill('');
+       
+          
+        },
+         handleSelectChange(index, value) {
+          this.selectedValues[index] = value;
+            const ids = this.selectedValues.filter(val => val !== '').join(',');
+            if (ids !== '') {
+              this.getPreviewData(ids);
+            }else{
+               this.getPreviewData('');
+           
+            }
+
+         
+        },
+        getPreviewData(ids){
+          this.preViewLoad = true;
+            effectPreview({
+              ids: ids
+            
+            }).then((res) => {
+                  this.preViewLoad = false;
+              if (res.data.code === 200) {
+                this.jsList = res.data.data;
+                this.$nextTick(() => {
+                   this.jsList = res.data.data;
+                });
+
+              } else {
+                  this.preViewLoad = false;
+                this.jsList = [];
+                this.$message.error(res.data.msg);
+              }
+            });
+         },
+   },
+
+
+    watch: {
+    // 如果 ypList 是异步加载的，您可以在这里监听它的变化并更新 selectedValues
+    ypList(newVal) {
+    
+      if (newVal.length !== this.selectedValues.length) {
+        this.initializeSelectedValues();
+      }
     }
+  
   }
 }
 </script>

src/views/codeRule/ruleManage.vue

@@ -409,7 +409,7 @@
         <!-- 关联元素 -->
         <LinkEle ref="linkEleRef" @confirm="confirmLinkEle" />
         <!-- 效果预览 -->
-          <PreviewResult ref="previewResultRef" />
+          <PreviewResult ref="previewResultRef" :ypList="ypList"/>
    </div>
 </template>
 <script>
@@ -972,6 +972,7 @@ import { getStore, setStore } from "@/util/store";
       this.manageLoad = true;
   
       const arr = this.manageData.map(item => ({ id: item.id, name: item.name,type:this.isShowList?1:2 }));
+      
       edit(arr ).then((res) => {
         if (res.data.code === 200) {
           this.$message.success(res.data.msg);