新增样品信息修改

src/views/codeRule/ruleManage.vue

@@ -21,7 +21,8 @@
                 </el-card>
                 </div>
             </el-col>
-        <el-col :span="18" class="h-100" v-if="isShowList">
+      <template v-if="!isShowDetail">
+          <el-col :span="18" class="h-100" v-if="isShowList">
             <div class="h-100 rule-box-all">
                
                 <el-card class="box-card  h-100">
@@ -72,11 +73,63 @@
                 </el-card>
             </div>
         </el-col>
-        <el-col :span="18" class="h-100" v-if="!isShowList">
-             
+         <el-col :span="18" class="h-100" v-if="!isShowList">
+            <div class="h-100 rule-box-all">
+               
                 <el-card class="box-card  h-100">
                 <div slot="header" class="clearfix">
                     <i class="el-icon-arrow-left" style="margin-right: 5px; cursor: pointer;" @click="goBack"></i>
+                    <span @click="goBack">返回上一级</span>
+                        <div style="float: right;">
+                            <el-button
+                            icon="el-icon-plus"
+                            size="small"
+                            style="background-color:#2550A2;color:white;font-weight:bold;"
+                            plain
+                            @click="addRule"
+                            >新增
+                            </el-button>
+                            <el-button
+                            icon="el-icon-document-copy"
+                            
+                            size="small"
+                            style="background-color:#FFA042;color:white;font-weight:bold;"
+                            plain
+                            >管理
+                            </el-button>
+                            
+                         
+                        </div>
+                </div>
+                <div class="rule-box">
+                    <div class="rule-box-item" v-for="item in ruleItemOptions" :key="item.id" @click="ruleDetailClick1">
+                        <div class="rule-box-item-icon">
+                          <i class="el-icon-tickets" style=" cursor: pointer; font-size: 48px;color:#2550A2"></i>
+                        </div>
+                        <div class="rule-box-item-title">{{ item.title }}</div>
+                    </div>
+                    
+                </div>
+                <el-pagination
+                    style="margin-top: 30px;text-align: center;"
+                      @size-change="handleSizeChange"
+                      @current-change="handleCurrentChange"
+                      :current-page="currentPage"
+                      :page-size="pageSize"
+                      :total="ruleItemOptions.length"
+                      layout="prev, pager, next"
+                      class="pagination"
+                    >
+                    </el-pagination>
+                </el-card>
+            </div>
+        </el-col>
+      </template>
+        <el-col :span="18" class="h-100" v-if="isShowDetail">
+             
+                <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>
                 </div>
                 <div class="box-card-title">
@@ -121,6 +174,33 @@
                 </div>
            
                 </el-card>
+                <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="showYpList"></i>
+                    <span  @click="showYpList">退出</span>
+                </div>
+                <div class="add-yp-title">
+                  <span>新增</span>
+                </div>
+                <div class="add-yp-detail">
+                  <el-form label-position="left" label-width="80px" :model="ypDetail"  :rules="ypRuleForm">
+                    <el-form-item label="样品信息" prop="name">
+                      <el-input v-model="ypDetail.name"></el-input>
+                    </el-form-item>
+                    <el-form-item label="基础信息">
+                      <div class="input-with-icon"  v-for="(item, index) in ypDetail.basic" :key="index">
+                        <el-input v-model="item.name"></el-input>
+                        <i class="el-icon-circle-plus-outline" @click="addBasicInfo"  v-if="index!==0"></i>
+                        <i class="el-icon-remove-outline" @click="removeBasicInfo(index)"></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>
     <el-dialog
@@ -174,6 +254,18 @@ import {getLazytree} from "@/api/manager/wbsprivate";
         isShowList:true,
         currentPage: 1,
         pageSize: 40, // 8列 * 5行 = 40
+        isShowYpList:true,
+        isShowDetail:false,
+        ypDetail: {
+          name: '',
+          basic: [{ name: '' }, { name: '' }, { name: '' }, { name: '' }]
+        },
+        ypRuleForm: {
+          name: [
+            { required: true, message: '请输入样品名称', trigger: 'blur' }
+          ],
+        
+        }
       };
     },
      computed: {
@@ -212,7 +304,11 @@ import {getLazytree} from "@/api/manager/wbsprivate";
                 });
         },
         goBack() {
-                this.$router.go(-1)
+                this.isShowList = true;
+         },
+         goBack1() {
+          
+          this.isShowDetail = false;
          },
          addRule(){
           this.addDialogVisible = true;
@@ -220,6 +316,10 @@ import {getLazytree} from "@/api/manager/wbsprivate";
          ruleDetailClick(){
           this.isShowList = false;
          },
+         ruleDetailClick1(){
+      
+          this.isShowDetail = true;
+         },
         handleCurrentChange(val) {
         this.currentPage = val
       },
@@ -228,8 +328,21 @@ import {getLazytree} from "@/api/manager/wbsprivate";
         this.currentPage = 1
       },
       addYp(){
-        
-      }
+        this.isShowYpList = false;
+
+      },
+      showYpList() {
+        this.isShowYpList = true;
+      },
+       // 添加基础信息行
+    addBasicInfo() {
+      this.ypDetail.basic.push({ name: '' });
+    },
+    
+    // 删除基础信息行
+    removeBasicInfo(index) {
+      this.ypDetail.basic.splice(index, 1);
+    }
     }
   };
 </script>
@@ -252,6 +365,14 @@ import {getLazytree} from "@/api/manager/wbsprivate";
 .box-card {
   display: flex;
   flex-direction: column;
+  height: 100%;
+  // 内容区域
+  .el-card__body {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
 }
 .rule-box{
   width: 100%;
@@ -337,11 +458,57 @@ import {getLazytree} from "@/api/manager/wbsprivate";
   }
   }
 }
-.box-card-content2-list{
 
-}
 .box-card-content2-bottom{
   margin-top: 20px;
 }
-
+.add-yp-title{
+  font-size: 20px;
+  font-weight: bold;
+  padding: 10px;
+ 
+}
+.input-with-icon {
+  display: flex;
+  align-items: center;
+  margin-bottom: 15px;
+  
+  .el-input {
+    flex: 1;
+  }
+  
+  i {
+    margin-left: 10px;
+    font-size: 20px;
+    cursor: pointer;
+    
+    &.el-icon-circle-plus-outline {
+      color: #409EFF;
+      &:hover {
+        color: #66b1ff;
+      }
+    }
+    
+    &.el-icon-remove-outline {
+      color: #F56C6C;
+      &:hover {
+        color: #f78989;
+      }
+    }
+  }
+}
+.add-yp-detail{
+    flex: 1;
+    overflow-y: auto;
+   padding: 20px;
+   height: calc(100% - 285px); /* 减去标题和底部按钮的高度 */
+}
+// 新增底部按钮容器样式
+.add-yp-footer {
+  display: flex;
+  justify-content: center;
+  padding: 20px 0;
+  // 可选: 添加上边框
+  border-top: 1px solid #EBEEF5;
+}
 </style>