新增技术指标

src/views/codeRule/ruleManage.vue

@@ -127,7 +127,7 @@
       </template>
         <el-col :span="18" class="h-100" v-if="isShowDetail">
              
-                <el-card class="box-card  h-100" v-if="isShowYpList">
+            <el-card class="box-card  h-100" v-if="isShowYpList">
                 <div slot="header" class="clearfix">
                     <i class="el-icon-arrow-left" style="margin-right: 5px; cursor: pointer;" @click="goBack1"></i>
                     <span>返回上一级</span>
@@ -144,7 +144,7 @@
                         实施日期：2023-12-12
                       </div>
                       <div>
-                      文件名称.pdf
+                      <i class="el-icon-document"></i>文件名称.pdf
                       </div>
                     </div>
                     <div  class="box-card-content1-right">
@@ -161,12 +161,55 @@
                     </div>
                     </div>
                     <div class="box-card-content2-list">
+                      <div class="box-card-content2-list-item" v-for="(item, index) in ypList" :key="index">
+                        <div class="box-card-content2-list-item-title">
+                           <span class="eg">if()</span>
+                          <span>{{ item.name }}</span>
+                        </div>
+                        <div class="box-card-content2-list-item-list">
+                                <span class="basic-info">基础信息</span>
+                                <div class="box-card-content2-list-item-list-basic">
+                                    <div class="basic-item-info" v-for="(item1,index1) in item.basic":key="index1" >
+                                      {{ item1.name }}
+                                    </div>
+                                    <div class="operation-icons">
+                                      <i class="el-icon-edit" @click.stop="handleEdit(item, index)"></i>
+                                      <i class="el-icon-delete" @click.stop="handleDelete(index)"></i>
+                                    </div>
+                                </div>
+                        </div>
+
+                      </div>
 
                     </div>
                   </div>
-                   <div class="box-card-content2-bottom">
+                        <div class="box-card-content2-top">
                     <div class="box-card-content2-title">
+                     <div class="title-container">
                       <span>技术指标</span>
+                      <i class="el-icon-circle-plus" @click="addJs"></i>
+                    </div>
+                    </div>
+                    <div class="box-card-content2-list">
+                      <div class="box-card-content2-list-item" v-for="(item, index) in jsList" :key="index">
+                        <div class="box-card-content2-list-item-title">
+                           <span class="eg">else()</span>
+                          <span>{{ item.name }}</span>
+                        </div>
+                        <div class="box-card-content2-list-item-list">
+                                <span class="basic-info">内容</span>
+                                <div class="box-card-content2-list-item-list-basic">
+                                    <div class="basic-item-info" v-for="(item1,index1) in item.basic":key="index1" >
+                                      {{ item1.name }}
+                                    </div>
+                                    <div class="operation-icons">
+                                      <i class="el-icon-edit" @click.stop="handleEdit(item, index)"></i>
+                                      <i class="el-icon-delete" @click.stop="handleDelete(index)"></i>
+                                    </div>
+                                </div>
+                        </div>
+
+                      </div>
 
                     </div>
                   </div>
@@ -174,8 +217,9 @@
                 </div>
            
                 </el-card>
-                <el-card class="box-card  h-100" v-if="!isShowYpList">
-                <div slot="header" class="clearfix" >
+              <el-card class="box-card  h-100" v-if="!isShowYpList&&!isShowJsList">
+                <template >
+                  <div slot="header" class="clearfix" >
                     <i class="el-icon-arrow-left" style="margin-right: 5px; cursor: pointer;"  @click="showYpList"></i>
                     <span  @click="showYpList">退出</span>
                 </div>
@@ -200,7 +244,46 @@
                 <div class="add-yp-footer">
                    <el-button type="primary">保存</el-button>
                 </div>
-                </el-card>
+                </template>
+    
+            </el-card>
+            <el-card v-if="isShowJsList&&!isShowYpList">
+              <div slot="header" class="clearfix" >
+                    <i class="el-icon-arrow-left" style="margin-right: 5px; cursor: pointer;"  @click="showYpList"></i>
+                    <span  @click="showYpList">退出</span>
+                </div>
+                <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(37, 80, 162);;color: white;" icon="el-icon-connection">关联元素</el-button>
+                  </div>
+                </div>
+                <div class="add-yp-detail">
+                  <el-form label-position="left" label-width="80px" :model="jsDetail"  :rules="jsRuleForm">
+                    <el-form-item label="检测项" prop="name">
+                      <el-input v-model="jsDetail.name"></el-input>
+                    </el-form-item>
+                    <el-form-item label="技术指标">
+                      <div class="input-with-icon"  v-for="(item, index) in jsDetail.basic" :key="index">
+                        <el-input placeholder="请输入内容" v-model="item.name" class="input-with-select">
+                          <el-select v-model="item.select" slot="prepend" placeholder="符号" style="width: 150px;">
+                            <el-option  v-for="(item1,index) in fqOptions" :key="index" :label="item1.label" :value="item1.label"></el-option>
+                          </el-select>
+                          
+                        </el-input>
+                        <i class="el-icon-circle-plus-outline" @click="addBasicInfo1"  ></i>
+                        <i class="el-icon-remove-outline" @click="removeBasicInfo1(index)" v-if="index!==0"></i>
+                      </div>
+                    </el-form-item>
+                    
+                  </el-form>
+                </div>
+                <div class="add-yp-footer">
+                   <el-button type="primary">保存</el-button>
+                </div>
+            </el-card>
+              
          </el-col>
     </el-row>
     <!-- 新增文件夹 -->
@@ -340,7 +423,38 @@ import {getLazytree} from "@/api/manager/wbsprivate";
         ],
         addFileDialogVisible:false,
         fileForm:{},
-        fileList:[]
+        fileList:[],
+        ypList:[
+          {id:1,name:'样品名称',
+          basic:
+          [{name:'基本信息1'} , {name:'基本信息2'}    , {name:'基本信息3'}    , {name:'基本信息4'}]
+          },  
+        ],
+        jsList:[
+          {id:1,name:'技术指标名称',
+          basic:
+          [{name:'基本信息1'} , {name:'基本信息2'}    , {name:'基本信息3'}    , {name:'基本信息4'}]
+          },  
+        ],
+        isShowJsList:false,
+        jsDetail: {
+          name: '',
+          basic: [{ name: '',select:"" }, ]
+        },
+        jsRuleForm: {
+          name: [
+            { required: true, message: '请输入技术指标名称', trigger: 'blur' }
+          ],
+        },
+        fqOptions: [
+          { label: '大于', value: '大于' },
+          { label: '等于', value: '等于' },
+          { label: '小于', value: '小于' },
+          { label: '大于等于', value: '大于等于' },
+          { label: '小于等于', value: '小于等于' },
+          { label: '不等于', value: '不等于' },
+        ]
+       
       };
     },
      computed: {
@@ -413,6 +527,8 @@ import {getLazytree} from "@/api/manager/wbsprivate";
       },
       addYp(){
         this.isShowYpList = false;
+        this.isShowJsList = false;
+
 
       },
       showYpList() {
@@ -439,7 +555,53 @@ import {getLazytree} from "@/api/manager/wbsprivate";
           }).then(() => {
            this.manageData.splice(index, 1);
           })
-    }
+    },
+      handleEdit(item, index) {
+        // 处理编辑逻辑
+        console.log('编辑项目:', item, index);
+      },
+
+      handleDelete(index) {
+        this.$confirm('删除后，数据无法恢复，是否确认删除?', '删除确认', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          this.ypList.splice(index, 1);
+          this.$message.success('删除成功');
+        }).catch(() => {});
+      },
+       handleEdit1(item, index) {
+        // 处理编辑逻辑
+        console.log('编辑项目:', item, index);
+      },
+
+      handleDelete1(index) {
+        this.$confirm('删除后，数据无法恢复，是否确认删除?', '删除确认', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          this.jsList.splice(index, 1);
+          this.$message.success('删除成功');
+        }).catch(() => {});
+      },
+      //新增技术指标
+      addJs(){
+      
+         this.isShowJsList = true;
+         this.isShowYpList = false;
+        
+      },
+      addBasicInfo1() {
+        this.jsDetail.basic.push({ name: '' });
+      },
+    
+    // 删除基础信息行
+    removeBasicInfo1(index) {
+      this.jsDetail.basic.splice(index, 1);
+    },
+    
     }
   };
 </script>
@@ -527,7 +689,7 @@ import {getLazytree} from "@/api/manager/wbsprivate";
 }
 .box-card-content2{
   margin-top: 10px;
-  padding: 10px;
+
 
   .box-card-content2-title{
     color:  rgba(130, 130, 130, 1);
@@ -563,6 +725,8 @@ import {getLazytree} from "@/api/manager/wbsprivate";
   font-size: 20px;
   font-weight: bold;
   padding: 10px;
+  display: flex;
+  justify-content: space-between;
  
 }
 .input-with-icon {
@@ -608,4 +772,75 @@ import {getLazytree} from "@/api/manager/wbsprivate";
   // 可选: 添加上边框
   border-top: 1px solid #EBEEF5;
 }
+.box-card-content2-list{
+  margin-top: 20px;
+  max-height: 300px;
+  overflow-y: auto;
+  
+  .eg{
+    color:rgba(37, 80, 162, 1);
+    margin-right: 10px;
+  }
+
+  .box-card-content2-list-item{
+    height: 80px;
+    padding: 10px;
+    border: 2px solid #EBEEF5;
+    margin-bottom: 10px;
+
+
+   
+  }
+  .box-card-content2-list-item-list{
+    display: flex;
+    margin-top: 20px;
+    align-items: center;
+    position: relative;
+    .operation-icons {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    display: flex;
+    gap: 10px;
+
+    i {
+      cursor: pointer;
+      font-size: 16px;
+
+      &.el-icon-edit {
+        color: #409EFF;
+        &:hover {
+          color: #66b1ff;
+        }
+      }
+      
+      &.el-icon-delete {
+        color: #F56C6C;
+        &:hover {
+          color: #f78989;
+        }
+      }
+    }
+  }
+    .basic-info{
+      color: gray;
+      font-size: 14px;
+    }
+    .box-card-content2-list-item-list-basic{
+      display: flex;
+      margin-left: 10px;
+      width: 100%;
+      overflow-x: auto;
+      flex: 1;
+
+      .basic-item-info{
+        margin-right: 10px;
+        margin-right: 20px; 
+            flex-shrink: 0; // 防止项目被压缩
+
+        
+      }
+    }
+  }
+}
 </style>