规范参数修改

src/views/codeRule/ConditionsSet.vue

@@ -0,0 +1,395 @@
+<template>
+  <el-dialog
+   class="dialog-set"
+    :visible.sync="visible"
+    width="70%"
+    append-to-body
+  >
+    <div slot="title" class="dialog-title">
+        <div>
+             <i class="el-icon-s-tools" ></i>
+             <span style="margin-left: 10px;">条件设置</span>
+        </div>
+      <div class="marginTop-10">设置样品信息和技术指标的关联关系，满足条件时回显对应参数</div>
+
+    </div>
+    <div class="conditions-container">
+      <!-- 左侧条件列表 -->
+      <div class="conditions-left">
+        <div class="condition-header">
+            <i class="el-icon-s-operation" style="color: rgb(46, 123, 115);"></i>
+          <span>参数列表</span>
+          
+        </div>
+        <div class="condition-list">
+          <div class="condition-item">
+           <span 
+                v-for="(item, index) in paramList" 
+                :key="index"
+                :class="{ active: activeIndex === index }"
+                @click="handleSelect(index)"
+                >
+                {{ item }}
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <!-- 右侧操作列表 -->
+      <div class="conditions-right">
+       <div class="condition-header1">
+            <div class="header-left">
+                <i class="el-icon-s-operation" style="color: rgb(46, 123, 115);"></i>
+                <span>条件列表</span>
+            </div>
+            <div class="header-right">
+                <el-button 
+                type="primary"
+                size="small"
+                :style="{ background: 'rgb(37, 80, 162)', borderColor: 'rgb(37, 80, 162)' }"
+                @click="addCondition"
+                >
+                <i class="el-icon-plus"></i>
+                添加条件
+                </el-button>
+                <el-button 
+                type="success" 
+                size="small"
+                @click="saveCondition"
+                >
+                <i class="el-icon-check"></i>
+                保存条件
+                </el-button>
+            </div>
+            </div>
+        <div class="condition-list">
+          <div class="condition-item1">
+           <div 
+                v-for="(item, index) in conditionList" 
+                :key="index"
+                :class="{ active: activeIndex === index }"
+                @click="handleSelect(index)"
+                >
+          <div>
+            <span>
+                <div class="condition-header-content">
+                <div style="color: black;">
+                    {{item.name}}
+                </div>
+                <i class="el-icon-close" @click.stop="handleDeleteItem(index)"></i>
+                </div>
+                <div class="code-list">
+                <div v-for="(item1,index) in item.value" :key="index" class="code-item">
+                    {{ item1 }}
+                </div>
+                </div>
+            </span>
+            </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>
+    </div>
+
+     <el-dialog
+        class="dialog-set"
+        :visible.sync="addDialogVisible"
+        width="30%"
+        append-to-body
+        >
+         <div slot="title" class="dialog-title">
+        <div>
+             <i class="el-icon-plus" ></i>
+             <span style="margin-left: 10px;">添加条件</span>
+        </div>
+      <div class="marginTop-10">同次设置的条件为“或者”关系，不同次设置的条件为“并且”关系</div>
+
+    </div>
+        <el-form ref="addForm" :model="addForm" label-width="80px">
+            <el-form-item label="样品信息">
+            <el-select v-model="addForm.sampleInfo" placeholder="请选择">
+                <el-option
+                v-for="item in sampleOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+                </el-option>
+            </el-select>
+            </el-form-item>
+            <el-form-item label="基础信息">
+            <el-select v-model="addForm.basicInfo" placeholder="请选择">
+                <el-option
+                v-for="item in basicOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+                </el-option>
+            </el-select>
+            </el-form-item>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+            <el-button @click="addDialogVisible = false">取 消</el-button>
+            <el-button type="primary" @click="confirmAdd">确认添加</el-button>
+        </div>
+    </el-dialog>  
+  </el-dialog>
+      
+       
+</template>
+
+<script>
+export default {
+  name: 'ConditionsSet',
+  data() {
+    return {
+      visible: true,
+       paramList: ['<0.75', '<1.5'] , // 参数列表数据
+       activeIndex: 0, // 当前选中的参数索引
+       conditionList:[
+        {name:'1111',value:[222,333,444]},
+
+       ],
+       addDialogVisible: false,
+        addForm: {
+            sampleInfo: '',
+            basicInfo: ''
+        },
+        sampleOptions: [
+            { value: '1', label: '试验值水泥' }
+            // 添加更多选项...
+        ],
+        basicOptions: [
+            { value: '1', label: 'P.I' }
+            // 添加更多选项...
+        ],
+
+    }
+  },
+  methods: {
+    show() {
+      this.visible = true
+    },
+    hide() {
+      this.visible = false  
+    },
+    handleCancel() {
+      this.hide()
+      this.$emit('cancel')
+    },
+    handleConfirm() {
+      this.hide()
+      this.$emit('confirm')
+    },
+    addCondition() {
+      // 添加条件逻辑
+           this.addDialogVisible = true
+    },
+    addOperation() {
+      // 添加操作逻辑
+    },
+   handleSelect(index) {
+      this.activeIndex = index
+    },
+    handleDeleteItem(){
+
+    },
+    confirmAdd() {
+      this.conditionList.push({
+        name: this.addForm.sampleInfo,
+        value: [this.addForm.basicInfo]
+      })
+      this.addDialogVisible = false
+      this.addForm = {
+        sampleInfo: '',
+        basicInfo: ''
+      }
+      this.$message.success('添加成功')
+    }
+    
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.conditions-container {
+  display: flex;
+  gap: 20px;
+//   height: 200px;
+.green-txt{
+    color: rgb(46, 123, 115);;
+}
+  .conditions-left,
+  .conditions-right {
+    flex: 1;
+    border: 1px solid #EBEEF5;
+    border-radius: 4px;
+      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 {
+    padding: 10px;
+  }
+
+  .condition-item {
+    span {
+      display: inline-block;
+      padding: 8px 8px;
+      margin: 5px;
+      background: white;
+      color: #409EFF;
+      border-radius: 4px;
+      cursor: pointer;  // 添加指针样式
+      transition: all 0.3s;  // 添加过渡效果
+       &.active {  // 选中状态
+        background:  #67C23A;;
+        color: white;
+        }
+    }
+  }
+
+  .content-item {
+    margin-bottom: 10px;
+    padding: 10px;
+    border: 1px solid #EBEEF5;
+    border-radius: 4px;
+
+    .item-title {
+      display: flex;
+      gap: 10px;
+      align-items: center;
+      
+      span {
+        &:first-child {
+          color: #666;
+        }
+        &:nth-child(2) {
+          color: #409EFF;
+        }
+        &:last-child {
+          color: #666;
+        }
+      }
+    }
+  }
+}
+.dialog-title {
+  display: flex;
+  flex-direction: column;
+  color:white ;
+  padding: 10px;
+
+ .marginTop-20{
+    margin-top: 10px;
+ }
+      background: rgb(37, 80, 162);
+      .el-dialog__header{
+        padding: 0px;
+          font-size: 14px;
+      
+      }
+}
+.condition-header1 {
+  display: flex;
+  justify-content: space-between; // 两端对齐
+  align-items: center;
+  padding: 10px;
+  border-bottom: 1px solid #EBEEF5;
+
+  .header-left {
+    display: flex;
+    align-items: center;
+    
+    span {
+      font-weight: bold;
+      margin-left: 10px;
+     
+    }
+  }
+
+  .header-right {
+    display: flex;
+    gap: 10px; // 按钮间距
+
+    .el-button {
+      padding: 7px 15px;
+      
+      &:hover {
+        opacity: 0.8;
+      }
+    }
+  }
+}
+.code-list{
+    display: flex;
+    .code-item{
+        margin-right: 5px;
+        margin-top: 5px;
+    }
+}
+
+  .condition-item1 {
+    span {
+      display: inline-block;
+      padding: 4px 4px;
+    
+     
+    background: rgb(213, 222, 255);;
+      color: #409EFF;
+      border-radius: 4px;
+      cursor: pointer;  // 添加指针样式
+      transition: all 0.3s;  // 添加过渡效果
+      
+    }
+  }
+.condition-header-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  
+  .delete-icon {
+    color: #F56C6C;
+    cursor: pointer;
+    font-size: 16px;
+    
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+}
+</style>
+<style lang="scss">
+.dialog-set {
+
+
+      .el-dialog__header{
+        padding: 0px;
+              background: rgb(37, 80, 162);
+              font-family: 16px;
+      
+      }
+      .dialog-footer{
+        text-align: center;
+      }
+}
+</style>

src/views/codeRule/ruleManage.vue

@@ -255,7 +255,7 @@
                 <div class="add-yp-title">
                   <span>新增</span>
                   <div>
-                     <el-button  size="small" style="background: rgb(168, 86, 248);color: white;" icon="el-icon-office-building">条件设置</el-button>
+                     <el-button  size="small" style="background: rgb(168, 86, 248);color: white;" icon="el-icon-office-building" @click="conditionsSet">条件设置</el-button>
                          <el-button  size="small" style="background:rgb(37, 80, 162);;color: white;" icon="el-icon-connection">关联元素</el-button>
                   </div>
                 </div>
@@ -366,12 +366,18 @@
           <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
         </div>
       </el-dialog>
+
+      <!-- 条件设置 -->
+        <ConditionsSet ref="conditionsSetRef" @confirm="handleConditionsConfirm" @cancel="handleConditionsCancel" />
    </div>
 </template>
 <script>
 import {getLazytree} from "@/api/manager/wbsprivate";
+import ConditionsSet from './ConditionsSet.vue'
   export default {
-
+  components: {
+    ConditionsSet
+  },
     data() {
       return {
         id: '',
@@ -453,7 +459,9 @@ import {getLazytree} from "@/api/manager/wbsprivate";
           { label: '大于等于', value: '大于等于' },
           { label: '小于等于', value: '小于等于' },
           { label: '不等于', value: '不等于' },
-        ]
+        ],
+        conditionsSetVisible:false//条件设置弹窗是否显示
+
        
       };
     },
@@ -601,6 +609,18 @@ import {getLazytree} from "@/api/manager/wbsprivate";
     removeBasicInfo1(index) {
       this.jsDetail.basic.splice(index, 1);
     },
+    //条件设置
+    conditionsSet(){
+      this.$refs.conditionsSetRef.show()
+
+    },
+    // 添加确认取消处理方法
+    handleConditionsConfirm() {
+      console.log('确认条件设置')
+    },
+    handleConditionsCancel() {
+      console.log('取消条件设置') 
+    }
     
     }
   };