基础规范删除修改

src/views/codeRule/ConditionsSet.vue

@@ -27,7 +27,7 @@
                 v-for="(item, index) in paramList" 
                 :key="index"
                 :class="{ active: activeIndex === index }"
-                @click="handleSelect(index, item)"
+                @click="handleSelect1(index, item)"
                
 
                 >
@@ -98,7 +98,8 @@
             <span>关联关系</span>
             </div>
             <div class="link-list">
-                <div v-for="(item, index) in linkListData" :key="index" class="link-item">
+                <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.name }}</span>
                     </div>
@@ -112,6 +113,7 @@
                     </div>
 
                   </div>
+                 
                 </div>
             </div>
             
@@ -172,7 +174,7 @@
 </template>
 
 <script>
-import {getInfoPage,saveConditionSet,getConditionSet } from "@/api/ruleManage/fileRule.js";
+import {getInfoPage,saveConditionSet,getConditionSet,deleteConditionSet } from "@/api/ruleManage/fileRule.js";
 export default {
   name: 'ConditionsSet',
   data() {
@@ -225,7 +227,11 @@ export default {
       this.visible = true
       if(val.length > 0&&val[0].symbolName) {
        this.paramList=val
-       this.handleSelect(0)
+       val.forEach((item,index)=>{
+          this.handleSelect(index)
+       })
+       this.activeIndex = 0
+
 
        
       }else{
@@ -264,31 +270,75 @@ export default {
       this.$emit('cancel')
     },
     handleConfirm() {
+
+      saveConditionSet(this.linkListData).then((res)=>{
+        if(res.data.code === 200) {
+          this.$message({
+            type: 'success',
+            message: res.data.msg,
+          })
+        }else{
+          this.$message({
+            type: 'error',
+            message: res.data.msg,
+          })
+        }
+      })
       this.hide()
       this.$emit('confirm')
     },
+    handleDeleteLinkItem(item,index){
+        this.$confirm('删除后，数据将无法恢复，是否确认删除!', '提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning'
+          }).then(() => {
+  
+            deleteConditionSet({id:item.id}).then((res) => {
+              if(res.data.code==200){
+                this.$message.success(res.data.msg);
+              
+                this.linkListData.splice(index, 1);
+                this.getLinkSetData(this.id);
+              }else{
+                this.$message.error(res.data.msg);
+              }
+            });
+          }).catch(() => {
+            this.$message.info('已取消删除');
+          })
+    },
     addCondition() {
       // 添加条件逻辑
            this.addDialogVisible = true
            this.addForm = {}
+   
+           this.basicOptions = []
+
     },
     addOperation() {
       // 添加操作逻辑
     },
+  async handleSelect(index) {
+      this.activeIndex = index
+      let leftId = this.paramList[index].id
+     let arr= await this.getConditionSetData(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'] });
+          })
 
-     async handleSelect(index) {
-        this.activeIndex = index;
-        let leftId = this.paramList[index].id;
-        let arr = await this.getConditionSetData(this.id, leftId);
-        let originalData = this.paramList[index].standardInfos;
-
-        if (arr.length > 0) {
-          const mergedData = [...originalData, ...arr[0]['standardInfos']];
-          this.paramList.splice(index, 1, { ...this.paramList[index], standardInfos: mergedData });
-        } else {
-          // 如果 arr 为空，您可能希望清空 standardInfos 或保持原样
-          this.paramList[index].standardInfos = originalData; // 清空
-        }
+      }else{
+        this.paramList[index].standardInfos = []
+      }
+      
+    },
+    async handleSelect1(index) {
+      this.activeIndex = index
+ 
+      
     },
     handleSelectCode(values) {
       if (!values || values.length === 0) {
@@ -310,6 +360,7 @@ export default {
         this.addForm.codeName = '';
         return;
       }
+      this.basicOptions = []
       this.sampleOptions.forEach(option => {
         if (option.value === value) {
           this.addForm.codeName = option.label;
@@ -324,8 +375,8 @@ export default {
        
     },
     handleDeleteItem(item, index) {
-      this.paramList[this.activeIndex].codeList.splice(index, 1)
-      this.$message.success('删除成功')
+      this.paramList[this.activeIndex].standardInfos.splice(index, 1)
+     
     },
     confirmAdd() {
       if (!this.addForm.codeName || !this.addForm.codeValue) return this.$message.error('请选择样品信息和基础信息')
@@ -340,26 +391,25 @@ export default {
         codeName: '',
         codeValue: []
       }
-      this.$message.success('添加成功')
+   
     },
           //保存条件
       saveCondition() {
-  
-        console.log(this.paramList,'保存的条件');
-        
-        // const filteredArr = this.paramList.filter(item => item.standardInfos.length !== 0);
-        // console.log(filteredArr,'filteredArr');
+
+        const filteredArr = this.paramList.filter(item => item.standardInfos.length !== 0);
+        this.linkListData = JSON.parse(JSON.stringify(filteredArr));
+
+   
+      },
+     toggleClick(item, index) {
+        this.linkListData.forEach(listItem => {
+          this.$set(listItem, 'clicked', false);
+        });
+        this.$set(item, 'clicked', !item.clicked);
+        let clickedIndex = this.paramList.findIndex(listItem => listItem.id === item.id);
+        console.log(clickedIndex, 'clickedIndex');
+        this.activeIndex = clickedIndex;
         
-              // saveConditionSet(filteredArr).then((res) => {
-              //   if(res.data.code == 200) {
-              //     this.$message.success(res.data.msg);
-              //     // this.getConditionSetData(this.id);
-              //   } else {
-              //     this.$message.error(res.data.msg);
-              //   }
-              // }).finally(() => {
-              //   this.saveYpLoad = false;
-              // });
       },
     // 获取条件设置
       async getConditionSetData(id, leftId) {
@@ -581,14 +631,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);
@@ -603,6 +673,7 @@ export default {
       .code-list{
         margin-left: 15px;
         display: flex;
+
        
         overflow-x: auto;
            font-weight: bold;
@@ -618,7 +689,7 @@ export default {
               background: rgb(213, 222, 255);;
                 color: #409EFF;
                 border-radius: 4px;
-                cursor: pointer;  // 添加指针样式
+           
                 transition: all 0.3s;  // 添加过渡效果
                 height: 50px;