dedsudiyu 1 year ago
parent
commit
1c7f622f52

BIN
src/assets/ZDimages/chemicalManage/arrow.png


BIN
src/assets/ZDimages/chemicalManage/icon_splc_fqr.png


BIN
src/assets/ZDimages/chemicalManage/icon_splc_spr.png


+ 24 - 0
src/assets/styles/button.scss

@@ -275,6 +275,30 @@
     background-color: $buttonColorI;
     color:$buttonColorA;
   }
+  .page-top-title-save-p{
+    font-weight:500;
+    cursor:pointer;
+    display: inline-block;
+    text-align: center;
+    width: 90px;
+    height: 40px;
+    line-height:40px;
+    border-radius: 6px;
+    color: $buttonColorA;
+    border: 1px solid $buttonColorD;
+    background-color: $buttonColorD;
+    font-size: 14px;
+    overflow: hidden;
+    margin-left:20px;
+    i{
+      margin:0 5px 0 0;
+    }
+  }
+  .page-top-title-save-p:hover{
+    border:1px solid $buttonColorI;
+    background-color: $buttonColorI;
+    color:$buttonColorA;
+  }
   .page-top-title-out-p{
     font-weight:500;
     cursor:pointer;

+ 1 - 3
src/views/chemicalManage/inventoryManagement/savePending/addPage.vue

@@ -535,9 +535,7 @@
         }
       }
       .border-p{
-        height:20px;
-        background-color: #F5F5F5;
-        margin-top:20px;
+        border-top:20px solid #F5F5F5;
       }
       .for-table-box{
         padding:0 80px 40px;

+ 1 - 3
src/views/chemicalManage/inventoryManagement/savePending/infoPage.vue

@@ -225,9 +225,7 @@
         }
       }
       .border-p{
-        height:20px;
-        background-color: #F5F5F5;
-        margin-top:30px;
+        border-top:20px solid #F5F5F5;
       }
       .for-table-box{
         margin-top:30px;

+ 603 - 0
src/views/chemicalManage/purchaseManage/examineProcess/examineUserDialog.vue

@@ -0,0 +1,603 @@
+<!--审批流程-->
+<template>
+  <div class="app-container approvalProcess">
+    <el-dialog title="选择人员" :visible.sync="userDialogType" :close-on-click-modal="false" v-if="userDialogType"
+               width="900px" append-to-body id="approvalProcess-dialog-box">
+      <div class="dialog-max-big-box">
+        <div class="dialog-left-max-big-box">
+          <p class="title-p">选择:</p>
+          <div class="big-box">
+            <!--input部分-->
+            <div class="input-box">
+              <input type="text" placeholder="搜索姓名或工号、身份"
+                     v-model="queryParamsData.searchValue">
+              <p class="el-icon-search" @click="handleQuery"></p>
+            </div>
+            <!--可滚动数据部分-->
+            <div class="list-max-box scrollbar-box">
+              <!--人员部分-->
+              <div class="user-box" v-for="(item,index) in userList" :key="index" @click="addObjButton(item)">
+                <img v-if="item.type" src="@/assets/ZDimages/basicsModules/icon_xzqx_xz.png">
+                <img v-if="!item.type" src="@/assets/ZDimages/basicsModules/icon_xzqx_zc.png">
+                <p>{{item.nickName}}</p>
+                <p>{{item.positionName}}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="dialog-right-max-big-box">
+          <p class="title-p">已选:</p>
+          <div class="big-box scrollbar-box">
+            <div class="user-for-box" v-for="(item,index) in userDialogRightList.actAudituserInfo" :key="index">
+              <img v-if="item.avatar" :src="item.avatar">
+              <img v-if="!item.avatar" src="@/assets/ZDimages/basicsModules/tx_cion.png">
+              <p>{{item.nickName}}</p>
+              <p class="el-icon-circle-close" @click="delRightUser(index)"></p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="dialog-bottom-box">
+        <div class="pagination-box">
+          <pagination :page-sizes="[20, 30, 40, 50]"
+                      v-show="total>0"
+                      :total="total"
+                      :pager-count="5"
+                      layout="total, prev, pager, next"
+                      :page.sync="queryParams.pageNum"
+                      :limit.sync="queryParams.pageSize"
+                      @pagination="getUserList()"
+          />
+        </div>
+        <div class="radio-box">
+          <el-radio-group v-model="userDialogRightList.auditType">
+            <el-radio :label="1" style="color:#999;">依次审批</el-radio>
+            <el-radio :label="2" style="color:#999;">或签</el-radio>
+          </el-radio-group>
+        </div>
+        <div class="text-box">选择不能超过10人</div>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <p class="dialog-footer-null-p"></p>
+        <el-button @click="offDialog">取 消</el-button>
+        <el-button type="primary" @click="upDataButton">确 定</el-button>
+        <p class="dialog-footer-null-p"></p>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+  import { getConfigList,treeselect,listUser,auditconfig } from "@/apiDemo/medicUniversity-3_1/index";
+  export default {
+    name: "index",
+    data(){
+      return{
+        //流程数据
+        dataList:[],
+        //人员选择页面开关
+        userDialogType:false,
+        //选中流程的index
+        userDialogTypeIndex:null,
+        //窗口右侧已选中人员数据
+        userDialogRightList:{},
+        //面包屑数据
+        titleList:[],
+        //院系数据
+        deptList:[],
+        //人员数据
+        userList:[
+          {name:"柴云龙1",type:true,text:"安全责任人",id:1,},
+          {name:"柴云龙2",type:false,text:"安全责任人",id:2,},
+          {name:"柴云龙3",type:true,text:"安全责任人",id:3,},
+          {name:"柴云龙4",type:false,text:"安全责任人",id:4,},
+          {name:"柴云龙5",type:true,text:"安全责任人",id:5,},
+          {name:"柴云龙6",type:false,text:"安全责任人",id:6,},
+        ],
+        //查询数据
+        queryParamsData:{
+          pageNum:1,
+          pageSize:20,
+        },
+        // 搜索实际发送数据
+        queryParams:{
+          pageNum:1,
+          pageSize:20,
+        },
+        //数据数量
+        total:0,
+        deptId:"",
+      }
+    },
+    created() {
+
+    },
+    mounted(){
+      this.getConfigList();
+    },
+    methods: {
+      //关闭弹窗
+      offDialog(){
+        this.$set(this,'userDialogType',false);
+        this.$set(this.queryParamsData,'searchValue',"");
+        this.$set(this.queryParams,'nickName',"");
+        this.$set(this,'deptId',"");
+        this.$set(this,'userDialogRightList',[]);
+        this.$set(this,'userDialogTypeIndex',"");
+      },
+      // 查询设置
+      getConfigList(){
+        getConfigList().then(response => {
+          this.dataList = response.rows
+        });
+      },
+      //添加勾选人员
+      addObjButton(item){
+        if(!item.type){
+          if(this.userDialogRightList.actAudituserInfo.length<10){
+            this.userDialogRightList.actAudituserInfo.push(item);
+            this.checkDataProcess();
+          }else{
+            this.msgError('选择不能超过10人')
+          }
+        }
+      },
+      //删除选中人员
+      delRightUser(index){
+        this.userDialogRightList.actAudituserInfo.splice(index,1);
+        this.checkDataProcess();
+      },
+      // 勾选数据处理
+      checkDataProcess(){
+        let self = this;
+        for(let i=0;i<self.userList.length;i++){
+          let num = 0;
+          for(let o=0;o<self.userDialogRightList.actAudituserInfo.length;o++){
+            if(self.userList[i].userId == self.userDialogRightList.actAudituserInfo[o].userId){
+              num++
+            }
+          }
+          self.userList[i].type = num != 0;
+        }
+        self.$forceUpdate();
+      },
+      //面包屑点击事件
+      titleClick(index){
+        let self = this;
+        this.getCatalogListOne(this.titleList[index].id);
+        this.$set(this.queryParams,'pageNum',1);
+        this.$set(this,'deptId',this.titleList[index].id);
+        this.getUserList();
+        let list = [];
+        let data = JSON.parse(JSON.stringify(self.titleList))
+        for(let i=index;i>=0;i--){
+          list.unshift(data[i]);
+        }
+        this.$set(this,'titleList',list);
+      },
+      // 目录点击事件
+      deptClick(item){
+        this.titleList.push(item);
+        this.getCatalogListOne(item.id);
+        this.$set(this.queryParams,'pageNum',1);
+        this.$set(this,'deptId',item.id);
+        this.getUserList();
+      },
+      // 查询目录
+      getCatalogListOne(id){
+        treeselect({parentId:id}).then(response => {
+          this.deptList = response.data;
+        });
+      },
+      // 查询目录初始化
+      getCatalogList(id){
+        treeselect({parentId:id}).then(response => {
+          this.deptList = response.data[0].children;
+          this.$set(this,'titleList',[response.data[0]]);
+        });
+      },
+      // 查询人员列表
+      getUserList(){
+        this.queryParamsData = JSON.parse(JSON.stringify(this.queryParams));
+        this.queryParamsData.deptId = this.deptId;
+        listUser(this.queryParamsData).then(response => {
+          this.userList = response.rows;
+          this.total = response.total;
+          this.checkDataProcess();
+        });
+      },
+      handleQuery() {
+        this.$set(this.queryParamsData,'pageNum',1);
+        this.queryParams = JSON.parse(JSON.stringify(this.queryParamsData));
+        this.getUserList();
+      },
+      // 编辑人员页面开启
+      openDialogButton(index){
+        let self = this;
+        this.$set(this.queryParamsData,'searchValue',"");
+        this.$set(this.queryParams,'nickName',"");
+        this.$set(this,'deptId',"");
+        this.getCatalogList("");
+        this.getUserList("");
+        this.$set(this,'userDialogRightList',JSON.parse(JSON.stringify(this.dataList[index])));
+        this.$set(this,'userDialogTypeIndex',index);
+        this.$set(this,'userDialogType',true);
+      },
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .approvalProcess{
+    flex:1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden!important;
+    p{
+      margin:0;
+      padding:0;
+    }
+    .title-box{
+      display: flex;
+      height:90px;
+      border-bottom: 1px solid #D8D8D8;
+      p:nth-child(1){
+        flex:1;
+        font-size:16px;
+        line-height:90px;
+        margin-left:18px;
+        color:#0045AF;
+      }
+      p:nth-child(2){
+        margin:25px 25px 0 0;
+      }
+    }
+    .approvalProcess-page{
+      flex:1;
+      font-weight:500;
+      padding:40px 0;
+      .process-max-box{
+        width:350px;
+        height:215px;
+        margin:0 auto;
+        .process-big-box{
+          width:350px;
+          height:130px;
+          .process-text-box{
+            width:350px;
+            height:50px;
+            background: #0183fa;
+            display: flex;
+            img{
+              width:24px;
+              height:24px;
+              margin:13px 8px 13px 20px;
+            }
+            p{
+              flex:1;
+              font-size:16px;
+              color:#fff;
+              line-height:50px;
+            }
+          }
+          .process-name-p{
+            width:350px;
+            height:80px;
+            border:1px solid #e0e0e0;
+            line-height:80px;
+            font-size:16px;
+            padding-left:20px;
+          }
+        }
+        .process-img-box{
+          position: relative;
+          height:85px;
+          .process-img-bottom{
+            display: block;
+            width:17px;
+            height:85px;
+            margin:0 auto;
+          }
+          .process-add-button-img{
+            cursor: pointer;
+            position: absolute;
+            bottom:36px;
+            left:163px;
+            width:24px;
+            height:24px;
+          }
+        }
+      }
+      .process-max-box-for-over{
+        height:300px!important;
+      }
+      .process-max-box-for{
+        width:350px;
+        height:215px;
+        margin:0 auto;
+        .process-big-box{
+          width:350px;
+          height:130px;
+          .process-text-box{
+            width:350px;
+            height:50px;
+            background: #FFA50A;
+            display: flex;
+            img{
+              width:24px;
+              height:24px;
+              margin:13px 8px 13px 20px;
+            }
+            p{
+              flex:1;
+              font-size:16px;
+              color:#fff;
+              line-height:50px;
+            }
+            i{
+              cursor: pointer;
+              color:#fff;
+              font-size:24px;
+              line-height:50px;
+              margin:0 18px 0 0;
+            }
+          }
+          .process-name-box{
+            display: flex;
+            border:1px solid #e0e0e0;
+            cursor: pointer;
+            .process-name-p{
+              width:350px;
+              height:80px;
+              line-height:80px;
+              font-size:16px;
+              padding-left:20px;
+            }
+            .el-icon-arrow-right{
+              line-height:80px;
+              font-size:24px;
+              margin-right:13px;
+              color:#999;
+            }
+          }
+          .process-img-box{
+            position: relative;
+            height:85px;
+            .process-img-bottom{
+              display: block;
+              width:17px;
+              height:85px;
+              margin:0 auto;
+            }
+            .process-add-button-img{
+              cursor: pointer;
+              position: absolute;
+              bottom:36px;
+              left:163px;
+              width:24px;
+              height:24px;
+            }
+          }
+          .over-text-one{
+            text-align: center;
+            font-size:16px;
+            line-height:20px;
+            color:#3D3D3D;
+            margin:15px 0 10px 0;
+          }
+          .over-text-two{
+            text-align: center;
+            font-size:14px;
+            line-height:20px;
+            color:#999999;
+          }
+        }
+      }
+    }
+  }
+</style>
+<style lang="scss">
+  #approvalProcess-dialog-box{
+    p{
+      margin:0;
+    }
+    .el-dialog__body{
+      padding:0 30px;
+      .dialog-max-big-box{
+        display: flex;
+        .dialog-left-max-big-box{
+          flex:1;
+          .title-p{
+            margin:18px 0 14px 0;
+            font-size:16px;
+            color:#333;
+          }
+          .big-box{
+            width: 400px;
+            height:515px;
+            background: #F5F5F5;
+            border-radius: 6px;
+            overflow: hidden;
+            .input-box{
+              width:358px;
+              height:40px;
+              margin:21px 21px 0;
+              display: flex;
+              border-radius:6px;
+              overflow: hidden;
+              input{
+                border:none;
+                outline:none;
+                color:#333;
+                height:40px;
+                width:300px;
+                padding-left:10px;
+              }
+              input::placeholder{
+                color:#CCCCCC;
+              }
+              p{
+                cursor: pointer;
+                width:58px;
+                line-height:40px;
+                font-size:24px;
+                background: #fff;
+                color:#E0E0E0;
+                text-align: center;
+              }
+            }
+            .title-list-box{
+              width:400px;
+              padding:0 20px;
+              height:54px;
+              overflow-x: scroll;
+              overflow-y: hidden;
+              white-space: nowrap;
+              .title-for{
+                display: inline-block;
+                /*display: flex;*/
+                .spanColor{
+                  color:#0045AF;
+                  cursor: pointer;
+                }
+                span:nth-child(1){
+                  display: inline-block;
+                  line-height:54px;
+                  font-size:14px;
+                }
+                span:nth-child(2){
+                  display: inline-block;
+                  width:24px;
+                  text-align: center;
+                  line-height:54px;
+                  color:#333333;
+                  font-size:14px;
+                }
+              }
+            }
+            .list-max-box{
+              height:400px;
+              .dept-box:hover{
+                background: rgba(0,69,175,0.1);
+              }
+              .dept-box{
+                cursor: pointer;
+                display: flex;
+                img:nth-child(1){
+                  width:30px;
+                  height:30px;
+                  margin:11px 16px 0 23px;
+                }
+                p:nth-child(2){
+                  flex:1;
+                  line-height:52px;
+                  font-size:14px;
+                  color:#333;
+                }
+                img:nth-child(3){
+                  width:20px;
+                  height:20px;
+                  margin: 16px 9px;
+                }
+                p:nth-child(4){
+                  line-height:52px;
+                  font-size:14px;
+                  color:#0045af;
+                  margin-right:22px;
+                }
+              }
+              .user-box:hover{
+                background: rgba(0,69,175,0.1);
+              }
+              .user-box{
+                cursor: pointer;
+                display: flex;
+                img:nth-child(1){
+                  width:14px;
+                  height:14px;
+                  margin:12px 13px 0 28px;
+                }
+                p:nth-child(2){
+                  line-height:40px;
+                  color:#333;
+                  font-size:14px;
+                  flex:1;
+                }
+                p:nth-child(3){
+                  line-height:40px;
+                  color:#333;
+                  font-size:14px;
+                  margin-right:30px;
+                }
+              }
+            }
+          }
+        }
+        .dialog-right-max-big-box{
+          flex:1;
+          .title-p{
+            margin:18px 0 14px 20px;
+            font-size:16px;
+            color:#333;
+          }
+          .big-box{
+            width: 400px;
+            height:515px;
+            background: #F5F5F5;
+            border-radius: 6px;
+            margin-left:20px;
+            .user-for-box:hover{
+              background: rgba(0,69,175,0.1);
+            }
+            .user-for-box{
+              display: flex;
+              img{
+                width:40px;
+                height:40px;
+                margin:10px 23px 0 26px;
+                border-radius:50%;
+              }
+              p:nth-child(2){
+                flex:1;
+                line-height:60px;
+                font-size:14px;
+                color:#333;
+              }
+              p:nth-child(3){
+                cursor: pointer;
+                line-height:60px;
+                font-size:24px;
+                color:#A2A2A2;
+                margin-right:27px;
+              }
+            }
+          }
+        }
+      }
+    }
+    .dialog-bottom-box{
+      height:56px;
+      display: flex;
+      .pagination-box{
+        width:400px;
+      }
+      .radio-box{
+        flex:1;
+        font-size:14px;
+        margin-left:50px;
+        margin-top:22px;
+      }
+      .text-box{
+        margin-top:20px;
+        font-size:14px;
+        color:#999999;
+      }
+    }
+    .dialog-footer{
+      display: flex;
+      .dialog-footer-null-p{
+        flex:1;
+      }
+    }
+  }
+</style>

File diff suppressed because it is too large
+ 522 - 700
src/views/chemicalManage/purchaseManage/examineProcess/index.vue


+ 142 - 93
src/views/chemicalManage/purchaseManage/purchaseExamine/index.vue

@@ -1,48 +1,49 @@
-<!--申购审核-->
+<!-- 申购审核 -->
 <template>
   <div class="app-container purchaseExamine">
-    <div class="page-container purchaseExamine-page" v-if="pageType == 1">
+    <div class="page-container purchaseExaminePage" v-if="pageType === 1">
       <div class="page-form-title-box">
         <el-form :model="queryParams" class="form-box" ref="queryForm"
-                 :inline="true" style="width:100%;" label-width="90px">
-          <el-form-item label="">
-            <el-select style="width:140px;" v-model="queryParams.deptId" placeholder="请选择学院" clearable label-width="80px">
+                 :inline="true" style="width:100%;">
+          <el-form-item label="" prop="queryParamsData2">
+            <el-select v-model="queryParams.queryParamsData2" placeholder="请选择学院" style="width: 200px">
               <el-option
-                v-for="dict in deptList"
-                :key="dict.deptId"
-                :label="dict.deptName"
-                :value="dict.deptId"
-              ></el-option>
+                v-for="dict in optionList"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
+              />
             </el-select>
           </el-form-item>
-          <el-form-item label="">
-            <el-select v-model="queryParams.state " clearable placeholder="请选择状态" style="width: 140px">
+          <el-form-item label="" prop="queryParamsData2">
+            <el-select v-model="queryParams.queryParamsData2" placeholder="请选择状态" style="width: 200px">
               <el-option
-                v-for="dict in options"
+                v-for="dict in optionList"
                 :key="dict.value"
                 :label="dict.label"
                 :value="dict.value"
               />
             </el-select>
           </el-form-item>
-          <el-form-item label="">
+          <el-form-item label="" prop="state">
             <el-date-picker
               :clearable="false"
-              v-model="queryParams.time"
+              v-model="dateRange"
               size="small"
-              style="width: 140px"
+              style="width: 240px"
               value-format="yyyy-MM-dd"
-              type="date"
-              placeholder="请选择申请时间"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始时间"
+              end-placeholder="结束时间"
             ></el-date-picker>
           </el-form-item>
-          <el-form-item label="">
+          <el-form-item label="" prop="queryParamsData1">
             <el-input
               maxLength="30"
-              v-model="queryParams.searchValue"
+              v-model="queryParams.queryParamsData1"
               placeholder="化学品名/CAS/实验室/申购人/课题组/课题组成员"
-              clearable
-              style="width: 360px"
+              style="width: 340px"
             />
           </el-form-item>
           <p class="page-inquire-common-style-button" @click="handleQuery">查询</p>
@@ -50,23 +51,38 @@
         </el-form>
       </div>
       <div class="page-content-box">
-        <el-table class="table-box" v-loading="loading" border :data="dataList" @selection-change="handleSelectionChange" ref="multipleTable">
-          <el-table-column type="selection" width="50" align="center"/>
-          <el-table-column label="申请时间" align="left" prop="name" />
-          <el-table-column label="申购人" align="left" prop="name" />
-          <el-table-column label="实验室" align="left" prop="name" />
-          <el-table-column label="学院" align="left" prop="name" />
-          <el-table-column label="楼栋楼层" align="left" prop="name" />
-          <el-table-column label="申购状态" align="left" prop="name" />
-          <el-table-column label="操作" align="left" class-name="small-padding fixed-width">
+        <div class="page-content-button">
+          <p :class="queryParams.queryParamsData4 == 1?'check-p':''" @click="checkButton(1)">待审核</p>
+          <p :class="queryParams.queryParamsData4 == 2?'check-p':''" @click="checkButton(2)">已审核</p>
+        </div>
+        <el-table class="table-box" v-loading="loading" border :data="dataList">
+          <el-table-column label="申请时间" prop="createTime" show-overflow-tooltip>
+            <template slot-scope="scope">
+              <span>{{ parseTime(scope.row.createTime) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="申购人" prop="name" width="140" show-overflow-tooltip/>
+          <el-table-column label="实验室" prop="name" width="200" show-overflow-tooltip/>
+          <el-table-column label="学院" prop="name" width="250" show-overflow-tooltip/>
+          <el-table-column label="楼栋楼层" prop="name" width="250" show-overflow-tooltip/>
+          <el-table-column label="审核时间" prop="createTime" width="180"
+                           v-if="queryParams.queryParamsData4==2" show-overflow-tooltip>
+            <template slot-scope="scope">
+              <span>{{ parseTime(scope.row.createTime) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="申购状态" prop="content" width="150" show-overflow-tooltip/>
+          <el-table-column label="操作" width="130" show-overflow-tooltip v-if="tableButtonType">
             <template slot-scope="scope">
               <div class="table-button-box">
                 <p class="table-button-null"></p>
                 <p class="table-button-p"
                    @click="tableButton(2,scope.row)"
+                   v-hasPermiRouter="['demo:demo:detail']"
                 >详情</p>
                 <p class="table-button-p"
-                   @click="tableButton(5,scope.row)"
+                   @click="tableButton(3,scope.row)"
+                   v-hasPermiRouter="['demo:demo:edit']"
                 >审核</p>
                 <p class="table-button-null"></p>
               </div>
@@ -82,107 +98,140 @@
         />
       </div>
     </div>
+    <info-page :propsData="propsData" v-if="pageType === 2"></info-page>
   </div>
 </template>
-
 <script>
-  import exportComponent from "@/components/exportComponent/exportComponent.vue";
-  import { iotTypeList,iotTypeDetail,iotTypeAdd,iotTypeUpdate,iotTypeDelete } from "@/api/iotDevice";
-  //import infoPage from "./infoPage.vue"
-  import {listDepartments} from "@/api/commonality/noPermission";
+  //import { getDicts } from "@/api/commonality/noPermission";
+  //import { systemUserSelect } from "@/api/commonality/permission";
+  //import { getInfo } from "@/api/basicsModules/index";
+  import infoPage from "./infoPage.vue";
   export default {
     name: 'index',
     components: {
-      exportComponent,
-     // infoPage,
-
+     infoPage
     },
-    data(){
-      return{
-        loading:false,
+    data () {
+      return {
+        tableButtonType:this.hasPermiDom(['demo:demo:detail','demo:demo:edit','demo:demo:del',]),
+        //页面状态
         pageType:1,
-        options:[{label:'启用',value:true},{label:'停用',value:false}],
+        //页面遮罩
+        loading:false,
+        //下拉列表数据
+        optionList:[{value:true,label:'启用'},{value:false,label:'停用'}],
+        //查询条件
         queryParams:{
           page:1,
           pageSize:20,
-          searchValue :"",
-          deptId:'',
-          state :'',
+          queryParamsData1:"",
+          queryParamsData2 :null,
+          queryParamsData3 :null,
+          queryParamsData4 :1,
         },
+        //时间数据
+        dateRange:[],
+        //列表数据
         dataList:[{}],
+        //数据数量
         total:0,
-        deptList:[],
         //组件传参
         propsData:{},
-        exportConfig:{
-          api:'system/user/student/export',             //导出接口地址
-          ids:'',                                       //勾选导出,勾选的IDS
-          fileName:'导出文件名',                         //导出文件的命名
-        },
       }
     },
-    created(){
+    created () {
 
     },
-    mounted(){
+    mounted () {
       //this.getList();
-      //this.listDepartments();
     },
-    methods:{
-      /** 搜索按钮操作 */
-      handleQuery() {
-        this.queryParams.pageNum = 1;
+    methods: {
+      //切换
+      checkButton(type){
+        this.$set(this.queryParams,'queryParamsData4',type);
         this.getList();
       },
-      /** 重置按钮操作 */
-      resetQuery() {
-        this.queryParams.searchValue = "";
-        this.handleQuery();
-      },
-
-      // 多选框选中数据
-      handleSelectionChange(selection) {
-        this.selectedNum = selection.length;
-        this.ids = selection.map(item => item.id);
-        this.single = selection.length != 1;
-        this.multiple = !selection.length;
+      //查询按钮
+      handleQuery(){
+        this.$set(this.queryParams,'page',1);
+        this.getList();
       },
-      //获取学院
-      listDepartments(){
-        listDepartments().then(response => {
-          this.deptList = response.data;
+      //重置按钮
+      resetQuery(){
+        this.$set(this,'dateRange',[])
+        this.$set(this,'queryParams',{
+          page:1,
+          pageSize:20,
+          queryParamsData1:"",
+          queryParamsData2 :null,
         });
+        this.getList();
       },
       //获取数据列表
       getList(){
-        this.$set(this,'loading',true);
-        iotTypeList(this.queryParams).then(response => {
-          this.$set(this,'dataList',response.data.records);
-          this.$set(this,'total',response.data.total);
-          this.$set(this,'loading',false);
-        });
+        // this.$set(this,'loading',true);
+        // let obj = JSON.parse(JSON.stringify(this.queryParams))
+        // if(this.dateRange[0]){
+        //   obj.startTime = this.dateRange[0]+'T00:00:00'
+        //   obj.endTime = this.dateRange[1]+'T23:59:59'
+        // }else{
+        //   obj.startTime = "";
+        //   obj.endTime = "";
+        // }
+        // getListFunction(obj).then(response => {
+        //   this.$set(this,'loading',false);
+        //   this.$set(this,'dataList',response.data.records);
+        //   this.$set(this,'total',response.data.total);
+        // });
       },
+      //操作按钮
       tableButton(type,row){
         let self = this;
-        if(type == 2){
+        if(type == 1){
+          //新增
+          this.$set(this,'pageType',2);
+          this.$set(this,'propsData',{});
+        }else if(type == 2){
           //详情
-          this.$set(this,'propsData',JSON.parse(JSON.stringify(row)));
           this.$set(this,'pageType',2);
-        }else if(type == 5){
-
-        }else if(type == 'out'){
+          let obj = JSON.parse(JSON.stringify(row))
+          obj.showType = true;
+          this.$set(this,'propsData',obj);
+        }else if(type == 3){
+          //返回并刷新
           this.$set(this,'pageType',1);
+          this.getList();
         }
       },
     },
   }
 </script>
-
 <style scoped lang="scss">
-
-.purchaseExamine{
-  .purchaseExamine-page{
-
+  .purchaseExamine{
+    .purchaseExaminePage{
+      .page-content-box{
+        .page-content-button{
+          display: flex;
+          p{
+            width:100px;
+            line-height:40px;
+            text-align: center;
+            border-top-right-radius: 4px;
+            border-top-left-radius: 4px;
+            border:1px solid #dedede;
+            border-bottom:none;
+            color:#333;
+            margin-right:10px;
+            cursor: pointer;
+            font-size:14px;
+          }
+          .check-p{
+            border:1px solid #0045AF;
+            background-color: #0045AF;
+            color:#fff;
+          }
+        }
+      }
+    }
   }
-}
 </style>

+ 298 - 0
src/views/chemicalManage/purchaseManage/purchaseExamine/infoPage.vue

@@ -0,0 +1,298 @@
+<template>
+  <div class="page-container purchaseExamine-infoPage">
+    <div class="page-top-title-box">
+      <p class="page-top-title-name-p">详情</p>
+      <p class="page-top-title-out-p" @click="backPage">返回</p>
+      <p class="page-top-title-add-p" @click="submitForm">提交</p>
+    </div>
+    <div class="content-box scrollbar-box">
+      <div class="title-max-big-box">
+        <p class="title-p">申购信息</p>
+      </div>
+      <div class="flex-text-max-box">
+        <div>
+          <p>实验室:</p>
+          <p>{{newData.data1}}</p>
+        </div>
+        <div>
+          <p>申购人:</p>
+          <p>{{newData.data2}}</p>
+        </div>
+        <div>
+          <p>导师:</p>
+          <p>{{newData.data3}}</p>
+        </div>
+      </div>
+      <div class="flex-text-max-box">
+        <div>
+          <p>课题组:</p>
+          <p>{{newData.data4}}</p>
+        </div>
+        <div>
+          <p>课题组负责人:</p>
+          <p>{{newData.data5}}</p>
+        </div>
+        <div>
+          <p>液体已存储量:</p>
+          <p>{{newData.data6}}</p>
+        </div>
+        <div>
+          <p>固体已存储量:</p>
+          <p>{{newData.data7}}</p>
+        </div>
+      </div>
+      <div class="flex-text-max-big-box">
+        <div>
+          <p>用途:</p>
+          <p>{{newData.data8}}</p>
+        </div>
+      </div>
+      <p class="border-p"></p>
+      <div class="title-max-big-box">
+        <p class="title-p">化学品信息</p>
+        <div class="num-max-big-box">
+          <p>本次申购量</p>
+          <p>液体:</p>
+          <p>固体:</p>
+        </div>
+      </div>
+      <div class="for-table-box">
+        <el-table class="table-box" border :data="newData.chemicalsList">
+          <el-table-column label="名称" prop="name" show-overflow-tooltip/>
+          <el-table-column label="CAS" prop="content" width="200" show-overflow-tooltip/>
+          <el-table-column label="类别" prop="content" width="200" show-overflow-tooltip/>
+          <el-table-column label="纯度" prop="content" width="200" show-overflow-tooltip/>
+          <el-table-column label="规格" prop="content" width="200" show-overflow-tooltip/>
+          <el-table-column label="单位" prop="content" width="180" show-overflow-tooltip/>
+          <el-table-column label="数量" prop="content" width="150" show-overflow-tooltip/>
+        </el-table>
+      </div>
+      <p class="border-p"></p>
+      <div class="title-max-big-box">
+        <p class="title-p">审核记录</p>
+        <p :class="newData.data9 == 1?'title-type-a':(newData.data9 == 2?'title-type-b':'title-type-c')">
+          {{newData.data9 == 1?'已完成':(newData.data9 == 2?'XX节点审核中':'已撤销')}}
+        </p>
+      </div>
+      <div class="for-table-box">
+        <el-table class="table-box" border :data="newData.chemicalsList">
+          <el-table-column label="审核人" prop="content" width="200" show-overflow-tooltip/>
+          <el-table-column label="审核节点" prop="content" width="150" show-overflow-tooltip/>
+          <el-table-column label="状态" prop="content" width="150" show-overflow-tooltip/>
+          <el-table-column label="时间" prop="content" width="250" show-overflow-tooltip/>
+          <el-table-column label="备注" prop="content" show-overflow-tooltip>
+            <template slot-scope="scope">
+              <div>{{scope.row.content}}</div>
+              <div class="table-form-max-box">
+                <div class="table-form-box">
+                  <p class="table-form-title">*</p>
+                  <p class="table-form-name">审核状态:</p>
+                  <el-select v-model="tableForm.formData1"
+                             class="table-date"
+                             placeholder="请选择学院" style="width: 120px">
+                    <el-option label="通过" :value="1"/>
+                    <el-option label="驳回" :value="2"/>
+                  </el-select>
+                </div>
+                <div class="table-form-box">
+                  <p class="table-form-title">*</p>
+                  <p class="table-form-name">审核意见:</p>
+                  <el-input
+                    class="table-date"
+                    maxLength="30"
+                    v-model="tableForm.formData2"
+                    placeholder="请输入审核意见"
+                    style="width: 300px"
+                  />
+                </div>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  //import { getDicts } from "@/api/commonality/noPermission";
+  //import { systemUserSelect } from "@/api/commonality/permission";
+  //import { getInfo } from "@/api/basicsModules/index";
+  export default {
+    name: 'infoPage',
+    props:{
+      propsData:{},
+    },
+    data(){
+      return{
+        newData:{
+          data1:'实验室名称(房间号)',
+          data2:'李苗苗-13255668899',
+          data3:'李苗苗-13255668899',
+          data4:'课题组名称',
+          data5:'李苗苗-13255668899',
+          data6:'6666ml(上限100000ml)',
+          data7:'1000g(上限100000g)',
+          data8:'我是用途说明我是用途说明我是用途说明我是用途说明我是用途说明我是用途说明我是用途说明',
+          data9:2,
+          chemicalsList:[{},{},{},{},{},{},{},],
+          examineList:[{},{},{},{},{},{},{},],
+        },
+        tableForm:{
+
+        },
+      }
+    },
+    created(){
+
+    },
+    mounted(){
+
+    },
+    methods:{
+      // 返回按钮
+      backPage(){
+        this.$parent.tableButton(3);
+      },
+      /** 提交按钮 */
+      submitForm() {
+        this.$refs["form"].validate(valid => {
+          if (valid) {
+
+          }
+        })
+      }
+    },
+  }
+</script>
+
+<style scoped lang="scss">
+  .purchaseExamine-infoPage{
+    .content-box{
+      flex:1;
+      display: flex;
+      flex-direction: column;
+      .title-max-big-box{
+        display: flex;
+        height:80px;
+        padding:0 80px;
+        .title-p{
+          flex:1;
+          line-height:80px;
+          font-size:16px;
+        }
+        .num-max-big-box{
+          display: flex;
+          margin:20px 0;
+          line-height:40px;
+          border:1px solid #A9A9A9;
+          border-radius:4px;
+          overflow: hidden;
+          p{
+            font-size:16px;
+            text-align: center;
+            width:120px;
+          }
+          p:nth-child(1){
+            background-color: #F5F5F5;
+          }
+          p:nth-child(2){
+
+          }
+          p:nth-child(3){
+
+          }
+        }
+        .add-item-button{
+          width:120px;
+          margin:20px 0;
+        }
+        .title-type-a{
+          line-height:80px;
+          font-size:16px;
+          color:#1BBC46;
+        }
+        .title-type-b{
+          line-height:80px;
+          font-size:16px;
+          color:#FF8C11;
+        }
+        .title-type-c{
+          line-height:80px;
+          font-size:16px;
+          color:#666666;
+        }
+      }
+      .border-p{
+        border-top:20px solid #F5F5F5;
+      }
+      .flex-text-max-box{
+        display: flex;
+        div{
+          display: flex;
+          p{
+            font-size:16px;
+            line-height:20px;
+            margin-bottom:30px;
+          }
+          p:nth-child(1){
+            width:144px;
+            text-align: right;
+          }
+          p:nth-child(2){
+            width:200px;
+          }
+        }
+      }
+      .flex-text-max-big-box{
+        display: flex;
+        div{
+          display: flex;
+          p{
+            font-size:16px;
+            line-height:20px;
+            margin-bottom:30px;
+          }
+          p:nth-child(1){
+            width:144px;
+            text-align: right;
+          }
+          p:nth-child(2){
+            flex:1;
+          }
+        }
+      }
+      .for-table-box{
+        padding:0 80px 40px;
+        .table-form-max-box{
+          display: flex;
+          .table-form-box{
+            display: flex;
+            .table-form-title{
+              color:red;
+              font-size:14px;
+              line-height:34px;
+              margin-left:20px;
+            }
+            .table-form-name{
+              color:#333;
+              font-size:14px;
+              line-height:27px;
+              margin-left:2px;
+            }
+            .table-date{
+              height:26px;
+              ::v-deep input{
+                display: block;
+                height:26px!important;
+              }
+              ::v-deep .el-input--medium .el-input__icon{
+                line-height:28px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+</style>

+ 547 - 136
src/views/chemicalManage/purchaseManage/purchaseRegister/addPage.vue

@@ -3,128 +3,448 @@
     <div class="page-top-title-box">
       <p class="page-top-title-name-p">{{newData.id?'编辑':'申购'}}</p>
       <p class="page-top-title-out-p" @click="backPage">返回</p>
+      <p class="page-top-title-save-p" @click="submitForm">保存</p>
+      <p class="page-top-title-add-p" @click="submitForm">提交</p>
     </div>
-    <div class="content-box">
-      <div class="content-box-t">
-        <el-form class="add-form-box" :model="newData" ref="form" :rules="rules" label-width="164px">
-          <div class="content-box-t-t">申购信息</div>
-          <div class="content-box-t-m">
-            <el-form-item label="实验室:" prop="subId">
-              <el-select v-model="newData.subId" placeholder="请选择实验室" style="width: 350px">
-                <el-option v-for="item in subOptions" :key="item.subId" :label="item.subName" :value="item.subId"/>
+    <div class="content-box scrollbar-box">
+      <el-form :model="newData" ref="form" :rules="rules">
+        <div class="title-max-big-box">
+          <p class="title-p">申购信息</p>
+        </div>
+        <div class="form-item-box">
+          <el-form-item label="实验室:" prop="data1" label-width="150px">
+            <el-select
+              style="width:350px;"
+              v-model="newData.data1"
+              filterable
+              remote
+              reserve-keyword
+              @change="subChange"
+              placeholder="请搜索选择实验室"
+              :remote-method="subSelectList">
+              <el-option
+                v-for="item in subOptions"
+                :key="item.subId"
+                :label="item.subName"
+                :value="item.subId">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="申购人:" prop="data2" label-width="150px">
+            <el-select
+              style="width:350px;"
+              v-model="newData.data2"
+              filterable
+              remote
+              reserve-keyword
+              @change="userChange"
+              placeholder="请搜索选择归属人"
+              :remote-method="userSelectList">
+              <el-option
+                v-for="item in userOptions"
+                :key="item.userId"
+                :label="item.userName"
+                :value="item.userId">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <div class="form-check-max-box">
+            <div class="form-check-box" @click="checkButton">
+              <div class="form-check" :class="newData.data3?'form-check-a':''">
+                <p></p>
+              </div>
+              <p class="form-check-title">课题组</p>
+            </div>
+            <el-form-item label="" prop="data4" v-if="newData.data3">
+              <el-select
+                style="width:350px;"
+                v-model="newData.data4"
+                filterable
+                remote
+                reserve-keyword
+                @change="researchGroupChange"
+                placeholder="请搜索选择课题组"
+                :remote-method="researchGroupSelectList">
+                <el-option
+                  v-for="item in researchGroupOptions"
+                  :key="item.researchGroupId"
+                  :label="item.researchGroupName"
+                  :value="item.researchGroupId">
+                </el-option>
               </el-select>
             </el-form-item>
-            <el-form-item label="申购人:" prop="name">
-              <el-input v-model="newData.deviceName" placeholder="回显当前账号姓名-联系电话"  style="width:350px;"></el-input>
+          </div>
+        </div>
+        <div class="form-flex-max-box">
+          <div class="form-left-max-box">
+            <el-form-item label="用途:" prop="data6" label-width="150px">
+              <el-input
+                v-model="newData.data6"
+                placeholder="请输入"
+                class="item-examples-demo"
+                style="width:350px;height:100px;"
+                maxLength='50' type="textarea" resize="none"
+                show-word-limit :autosize="{ minRows: 4, maxRows: 4}">
+              </el-input>
             </el-form-item>
-            <div class="research-selete">
-              <img src="@/assets/ZDimages/chemicalManage/icon_6.png">
-              <i>课题组</i>
-              <el-select v-model="newData.subId" placeholder="回显所属课题组" style="width: 350px">
-                <el-option v-for="item in subOptions" :key="item.subId" :label="item.subName" :value="item.subId"/>
+          </div>
+          <div class="form-right-max-box">
+            <el-form-item label="导师:" prop="data7" label-width="150px">
+              <el-select
+                style="width:825px;"
+                v-model="newData.data7"
+                filterable
+                remote
+                reserve-keyword
+                @change="userChange"
+                placeholder="请搜索选择归属人"
+                :remote-method="userSelectList">
+                <el-option
+                  v-for="item in userOptions"
+                  :key="item.userId"
+                  :label="item.userName"
+                  :value="item.userId">
+                </el-option>
               </el-select>
+            </el-form-item>
+            <div class="form-text-box">
+              <div>
+                <p>液体已存储量:</p>
+                <p>{{subData.subData1}}</p>
+              </div>
+              <div>
+                <p>固体已存储量:</p>
+                <p>{{subData.subData2}}</p>
+              </div>
             </div>
           </div>
-          <div class="content-box-t-b">
-            <el-form-item label="用途:">
-              <el-input type="textarea" v-model="newData.deviceName" placeholder="请输入用途"  :rows="4"style="width:350px;"></el-input>
-            </el-form-item>
-            <div class="content-box-t-b-r">
-              <el-form-item label="导师:">
-                <el-input  v-model="newData.deviceName" placeholder="回显所属导师-联系电话"  style="width:825px;"></el-input>
+        </div>
+        <p class="border-p"></p>
+        <div class="title-max-big-box">
+          <p class="title-p">化学品信息</p>
+          <div class="num-max-big-box">
+            <p>本次申购量</p>
+            <p>液体:</p>
+            <p>固体:</p>
+          </div>
+          <p class="add-item-button page-submit-common-style-button" @click="addButton">+ 添加化学品</p>
+        </div>
+        <div class="for-table-box">
+          <el-table class="table-box" border :data="newData.dataList">
+            <el-table-column label="名称" prop="name" show-overflow-tooltip/>
+            <el-table-column label="CAS" prop="content" width="150" show-overflow-tooltip/>
+            <el-table-column label="类别" prop="content" width="150" show-overflow-tooltip/>
+            <el-table-column label="纯度" prop="content" width="150" show-overflow-tooltip/>
+            <el-table-column label="规格" prop="content" width="240" show-overflow-tooltip>
+              <template slot-scope="scope">
+                <el-input-number
+                  class="table-date-input-right-border"
+                  v-model="scope.row.rowData3"
+                  style="width:120px;"
+                  :controls="false"
+                  :min="1" :max="9999">
+                </el-input-number>
+                <el-select
+                  class="table-date-input-left-border"
+                  v-model="scope.row.rowData4"
+                  style="width:94px;">
+                  <el-option label="ml" value="ml"></el-option>
+                  <el-option label="g" value="g"></el-option>
+                </el-select>
+              </template>
+            </el-table-column>
+            <el-table-column label="单位" prop="content" width="120" show-overflow-tooltip>
+              <template slot-scope="scope">
+                <el-select
+                  class="table-date"
+                  v-model="scope.row.rowData5"
+                  style="width:94px;">
+                  <el-option label="瓶" value="ml"></el-option>
+                  <el-option label="袋" value="g"></el-option>
+                </el-select>
+              </template>
+            </el-table-column>
+            <el-table-column label="数量" prop="content" width="120" show-overflow-tooltip>
+              <template slot-scope="scope">
+                <el-input-number
+                  class="table-date"
+                  v-model="scope.row.rowData6"
+                  style="width:94px;"
+                  :controls="false"
+                  :min="1" :max="200">
+                </el-input-number>
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" prop="content" width="80" show-overflow-tooltip>
+              <template slot-scope="scope">
+                <div class="table-button-box">
+                  <p class="table-button-null"></p>
+                  <p class="table-button-p"
+                     @click="delItem(scope.row,scope.$index)"
+                     v-hasPermiRouter="['demo:demo:del']"
+                  >删除</p>
+                  <p class="table-button-null"></p>
+                </div>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </el-form>
+    </div>
+    <el-dialog class="savePending-dialog"
+               :modal-append-to-body="false"
+               :close-on-click-modal="false" :close-on-press-escape="false"
+               title="添加化学品"
+               :visible.sync="savePendingDialogType"
+               v-if="savePendingDialogType"
+               width="800px" height="482px"
+               append-to-body>
+      <div style="height:300px;overflow: hidden">
+        <div>
+          <el-form :model="newData" ref="dialogForm" :rules="dialogRules">
+            <div style="display: flex;margin:120px 0;">
+              <el-form-item label="化学品:" prop="dialogData1" label-width="80px">
+                <el-select
+                  style="width:500px;"
+                  v-model="dialogForm.dialogData1"
+                  filterable
+                  remote
+                  reserve-keyword
+                  @change="chemicalsChange"
+                  placeholder="请选择化学品"
+                  :remote-method="chemicalsSelectList">
+                  <el-option
+                    v-for="item in chemicalsOptions"
+                    :key="item.chemicalsId"
+                    :label="item.chemicalsName"
+                    :value="item.chemicalsId">
+                  </el-option>
+                </el-select>
               </el-form-item>
-              <div class="content-box-t-b-r-b"><p>液体已存储量:6666ml(上限100000ml)</p><p>固体已存储量:1000g(上限100000g)</p></div>
+              <p class="page-save-common-style-button" style="margin-left:20px;width:100px;" @click="addItemButton">新增化学品</p>
             </div>
-          </div>
-        </el-form>
+          </el-form>
+        </div>
       </div>
-      <div class="line"></div>
-      <div class="content-box-b">
-        <div class="content-box-b-t"><p>化学品信息</p></div>
+      <div slot="footer" class="dialog-footer dialog-footer-box">
+        <p class="dialog-footer-button-null"></p>
+        <p class="dialog-footer-button-info" @click="dialogOut">取消</p>
+        <p class="dialog-footer-button-primary" @click="dialogSubmit">确定</p>
+        <p class="dialog-footer-button-null"></p>
       </div>
-    </div>
-    <div class="page-bottom-button-box">
-      <p class="page-bottom-button-null-p"></p>
-      <p class="page-bottom-button-cancel-p" @click="backPage" >取消</p>
-      <p class="page-bottom-button-submit-p" @click="submitForm">提交审核</p>
-      <p class="page-bottom-button-submit-p" style="margin-left:0px;" @click="submitForm" >保存</p>
-      <p class="page-bottom-button-null-p"></p>
-    </div>
+    </el-dialog>
+    <add-chemicals ref="addChemicals"></add-chemicals>
   </div>
 </template>
 
 <script>
-  import { systemBuildingGetTreeList,laboratorySubRelInfoGetListByFloor } from "@/api/commonality/permission";
+  import addChemicals from "@/views/chemicalManage/components/addChemicals.vue";
   export default {
     name: 'addPage',
+    components: {
+      addChemicals
+    },
     props:{
       propsData:{},
-    },
-    components: {
-
     },
     data(){
       return{
-        newData:{},
+        //添加化学品弹窗
+        savePendingDialogType:false,
+        dialogForm:{},
+        dialogRules:{
+          dialogData1: [
+            { required: true, message: "请搜索选择化学品", trigger: "blur" },
+            { required: true, message: "请搜索选择化学品", validator: this.spaceJudgment, trigger: "blur" }
+          ],
+        },
+        // 化学品列表
+        chemicalsOptions:[],
+        // 实验室列表
         subOptions:[],
+        // 人员列表
+        userOptions:[],
+        // 课题组列表
+        researchGroupOptions:[],
+        newData:{
+          data1:'',
+          data2:'',
+          data3:false,
+          data4:'',
+          data5:'',
+          data6:'',
+          dataList:[{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},],
+        },
         rules:{
-          subId: [
-            { required: true, message: "请选择实验室", trigger: "blur" },
+          data1: [
+            { required: true, message: "请搜索选择实验室", trigger: "blur" },
+            { required: true, message: "请搜索选择实验室", validator: this.spaceJudgment, trigger: "blur" }
+          ],
+          data2: [
+            { required: true, message: "请搜索选择归属人", trigger: "blur" },
+            { required: true, message: "请搜索选择归属人", validator: this.spaceJudgment, trigger: "blur" }
+          ],
+          data4: [
+            { required: true, message: "请搜索选择课题组", trigger: "blur" },
+            { required: true, message: "请搜索选择课题组", validator: this.spaceJudgment, trigger: "blur" }
           ],
-          name: [
-            { required: true, message: "请输入申购人", trigger: "blur" },
+          data7: [
+            { required: true, message: "请搜索选择导师", trigger: "blur" },
+            { required: true, message: "请搜索选择导师", validator: this.spaceJudgment, trigger: "blur" }
           ],
         },
-
+        subData:{
+          subData1:'6666ml(上限100000ml)',
+          subData2:'1000g(上限100000g)',
+        },
       }
     },
     created(){
-      //this.initialize();
+
     },
     mounted(){
 
     },
     methods:{
-      radioFun(){
-        this.$set(this.newData,'state',!this.newData.state)
-      },
-      initialize(){
-        //编辑
-        if(this.propsData.id){
-          this.$set(this,'newData',{
-            id:this.propsData.id,
-          });
-
-        }else{
-          this.$set(this,'newData',{
-            deviceName:'',
-            deviceNo:'',
-            typeId:'',
-            typeKey:'',
-            typeName:'',
-            attributeId:'',
-            code:'',
-            state:true,
-            address:[],
-            subId:'',
-            remark:'',
-          });
-        }
-      },
       // 返回按钮
       backPage(){
-        this.$parent.tableButton('out','');
+        this.$parent.tableButton('out');
+      },
+      //添加化学品
+      addButton(){
+        this.$set(this,'savePendingDialogType',true);
+      },
+      //关闭弹窗
+      dialogOut(){
+        this.$set(this,'savePendingDialogType',false);
+      },
+      //弹窗提交
+      dialogSubmit(){
+        this.$refs["dialogForm"].validate(valid => {
+          if (valid) {
+            this.newData.dataList.push({});
+            this.$set(this,'savePendingDialogType',false);
+          }
+        })
+      },
+      //新增化学品
+      addItemButton(){
+        this.$refs.addChemicals.addChemicalsOpen('1');
+      },
+      //化学品添加成功
+      submitSuccessful(){
+        console.log('添加成功')
       },
       /** 提交按钮 */
       submitForm() {
-        this.$refs["form"].validate(maxValid => {
-          this.$refs.forElFormItem.$refs["form"].validate(valid => {
-            if (valid) {
+        this.$refs["form"].validate(valid => {
+          if (valid) {
 
-            }
-          })
+          }
         })
       },
+      //删除化学品
+      delItem(row,index){
+        console.log('row=>',row)
+        console.log('index=>',index)
+        let self = this;
+        this.$confirm('是否确认删除?', "警告", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        }).then(function() {
+        }).then(() => {
+          self.newData.dataList.splice(index,1);
+        }).catch(() => {});
+      },
+      //选中人员
+      userChange(val){
+        let self = this;
+        // console.log(val)
+        // for(let i=0;i<self.optionsUser.length;i++){
+        //   if(self.optionsUser[i].userId == val){
+        //     this.$set(this,'shadeName',self.optionsUser[i].userName);
+        //     this.$set(this,'shadeMobile',self.optionsUser[i].mobile);
+        //   }
+        // }
+      },
+      //搜索人员
+      userSelectList(query){
+        if (query !== '' && query.length>1) {
+          // systemUserSelectUser({"userName":query,'userType':'1'}).then(response => {
+          //   this.$set(this,'userOptions',response.data);
+          // });
+        } else {
+          this.$set(this,'subOptions',[]);
+        }
+      },
+      //选中实验室
+      subChange(val){
+        let self = this;
+        // console.log(val)
+        // for(let i=0;i<self.optionsUser.length;i++){
+        //   if(self.optionsUser[i].userId == val){
+        //     this.$set(this,'shadeName',self.optionsUser[i].userName);
+        //     this.$set(this,'shadeMobile',self.optionsUser[i].mobile);
+        //   }
+        // }
+      },
+      //搜索实验室
+      subSelectList(query){
+        if (query !== '' && query.length>1) {
+          // systemUserSelectUser({"userName":query,'userType':'1'}).then(response => {
+          //   this.$set(this,'userOptions',response.data);
+          // });
+        } else {
+          this.$set(this,'subOptions',[]);
+        }
+      },
+      //选中化学品
+      chemicalsChange(val){
+        let self = this;
+        // console.log(val)
+        // for(let i=0;i<self.optionsUser.length;i++){
+        //   if(self.optionsUser[i].userId == val){
+        //     this.$set(this,'shadeName',self.optionsUser[i].userName);
+        //     this.$set(this,'shadeMobile',self.optionsUser[i].mobile);
+        //   }
+        // }
+      },
+      //搜索化学品
+      chemicalsSelectList(query){
+        if (query !== '' && query.length>1) {
+          // systemUserSelectUser({"userName":query,'userType':'1'}).then(response => {
+          //   this.$set(this,'userOptions',response.data);
+          // });
+        } else {
+          this.$set(this,'chemicalsOptions',[]);
+        }
+      },
+      //课题组开关
+      checkButton(){
+        this.$set(this.newData,'data3',!this.newData.data3);
+      },
+      //选中课题组
+      researchGroupChange(val){
+        let self = this;
+        // console.log(val)
+        // for(let i=0;i<self.optionsUser.length;i++){
+        //   if(self.optionsUser[i].userId == val){
+        //     this.$set(this,'shadeName',self.optionsUser[i].userName);
+        //     this.$set(this,'shadeMobile',self.optionsUser[i].mobile);
+        //   }
+        // }
+      },
+      //搜索课题组
+      researchGroupSelectList(query){
+        if (query !== '' && query.length>1) {
+          // systemUserSelectUser({"userName":query,'userType':'1'}).then(response => {
+          //   this.$set(this,'userOptions',response.data);
+          // });
+        } else {
+          this.$set(this,'researchGroupOptions',[]);
+        }
+      },
     },
   }
 </script>
@@ -132,78 +452,169 @@
 <style scoped lang="scss">
   .purchaseRegister-addPage{
     .content-box{
-      .content-box-t{
-        width: 100%;
-        padding: 34px 100px 40px 0px;
-        box-sizing: border-box;
-        .content-box-t-t{
-          padding-left: 80px;
-          box-sizing: border-box;
-          font-size: 16px;
-          font-family: Microsoft YaHei, Microsoft YaHei;
-          font-weight: 400;
-          color: #333333;
-          line-height: 24px;
-          margin-bottom: 20px;
-        }
-        .content-box-t-m{
+      flex:1;
+      display: flex;
+      flex-direction: column;
+      .title-max-big-box{
+        display: flex;
+        height:80px;
+        padding:0 80px;
+        .title-p{
+          flex:1;
+          line-height:80px;
+          font-size:16px;
+        }
+        .num-max-big-box{
           display: flex;
-          justify-content: flex-start;
-          align-items: center;
-          margin-bottom: 10px;
-          .research-selete{
+          margin:20px 30px;
+          line-height:40px;
+          border:1px solid #A9A9A9;
+          border-radius:4px;
+          overflow: hidden;
+          p{
+            font-size:16px;
+            text-align: center;
+            width:120px;
+          }
+          p:nth-child(1){
+            background-color: #F5F5F5;
+          }
+          p:nth-child(2){
+
+          }
+          p:nth-child(3){
+
+          }
+        }
+        .add-item-button{
+          width:120px;
+          margin:20px 0;
+        }
+      }
+      .form-item-box{
+        display: flex;
+        .form-check-max-box{
+          display: flex;
+          .form-check-box{
+            width:125px;
             display: flex;
-            justify-content: flex-start;
-            align-items: center;
-            margin-bottom: 20px;
-            >img{
-              width: 18px;
+            cursor: pointer;
+            .form-check{
+              width:18px;
               height: 18px;
-              margin-left: 32px;
+              border-radius:50%;
+              border:1px solid #999;
+              margin:11px 11px 11px 36px;
+              p{
+                width:12px;
+                height:12px;
+                margin:2px;
+                border-radius:50%;
+              }
             }
-            >i{
-              width: 48px;
-              font-size: 16px;
-              font-family: Microsoft YaHei, Microsoft YaHei;
-              font-weight: 400;
-              color: #333333;
-              line-height: 24px;
-              margin-left: 10px;
-              margin-right: 16px;
-              font-style: normal;
+            .form-check-a{
+              border:1px solid #0183FA;
+              p{
+                background-color: #0183FA;
+              }
+            }
+            .form-check-title{
+              line-height:40px;
+              font-size:14px;
+              color:#333;
             }
           }
         }
-        .content-box-t-b{
-          display: flex;
-          justify-content: flex-start;
-          .content-box-t-b-r{
-            .content-box-t-b-r-b{
+      }
+      .form-flex-max-box{
+        display: flex;
+        .form-left-max-box{
+
+        }
+        .form-right-max-box{
+          .form-text-box{
+            display: flex;
+            div{
               display: flex;
-              justify-content: flex-start;
-              >p{
-                font-size: 16px;
-                font-family: Microsoft YaHei, Microsoft YaHei;
-                font-weight: 400;
-                color: #333333;
-                line-height: 24px;
+              p{
+                font-size:14px;
+                line-height:40px;
               }
-              >p:nth-of-type(1){
-                margin-left: 35px;
+              p:nth-child(1){
+                width:138px;
+                text-align: right;
+                margin-right:12px;
               }
-              >p:nth-of-type(2){
-                margin-left: 146px;
+              p:nth-child(2){
+                width:350px;
               }
             }
-
           }
-
         }
       }
-      .line{
-        width: 1579px;
-        height: 20px;
-        background: #F5F5F5;
+      .border-p{
+        border-top:20px solid #F5F5F5;
+      }
+      .for-table-box{
+        padding:0 80px 40px;
+        ::v-deep .el-table__empty-text {
+          position: relative; /* 确保伪元素在正常流中 */
+          background: #fff; /* 设置背景颜色 */
+        }
+        ::v-deep .el-table__empty-text::before {
+          content: "请添加化学品"; /* 设置要显示的文本内容 */
+          color: #999; /* 设置文本颜色 */
+          font-size: 14px; /* 设置文本大小 */
+          text-align: center; /* 水平居中 */
+          z-index: -1; /* 将伪元素置于最后,不影响布局 */
+        }
+        .table-date{
+          height:26px;
+          ::v-deep input{
+            display: block;
+            height:26px!important;
+          }
+          ::v-deep .el-input__icon{
+            line-height:26px;
+          }
+        }
+        .table-date-padding{
+          width:146px;
+          height:26px;
+          ::v-deep input{
+            display: block;
+            height:26px!important;
+            padding:0 35px;
+          }
+          ::v-deep .el-input__icon{
+            line-height:26px;
+          }
+        }
+        .table-date-input-right-border{
+          height:26px;
+          ::v-deep input{
+            display: block;
+            height:26px!important;
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+          }
+          ::v-deep .el-input__icon{
+            line-height:26px;
+          }
+        }
+        .table-date-input-left-border{
+          height:26px;
+          ::v-deep input{
+            display: block;
+            height:26px!important;
+            border-left:none;
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+          }
+          ::v-deep .el-input__icon{
+            line-height:26px;
+          }
+        }
       }
     }
   }

+ 42 - 16
src/views/chemicalManage/purchaseManage/purchaseRegister/index.vue

@@ -66,7 +66,7 @@
           <p class="page-reset-common-style-button" @click="resetQuery">重置</p>
           <p class="page-submit-common-style-button"
              style="float: right;margin-left:20px;"
-             @click="tableButton(5,'')"
+             @click="tableButton(1,'')"
              v-hasPermiRouter="['demo:demo:demo']"
           >申购</p>
           <p class="page-add-common-style-button"
@@ -82,14 +82,22 @@
       <div class="page-content-box">
         <el-table class="table-box" v-loading="loading" border :data="dataList" @selection-change="handleSelectionChange" ref="multipleTable">
           <el-table-column type="selection" width="50" align="center"/>
-          <el-table-column label="申请时间" align="left" prop="name" />
-          <el-table-column label="申购人" align="left" prop="name" />
-          <el-table-column label="实验室" align="left" prop="name" />
-          <el-table-column label="学院" align="left" prop="name" />
-          <el-table-column label="楼栋楼层" align="left" prop="name" />
-          <el-table-column label="完成时间" align="left" prop="name" />
-          <el-table-column label="状态" align="left" prop="name" />
-          <el-table-column label="操作" align="left" class-name="small-padding fixed-width">
+          <el-table-column label="申请时间" align="left" prop="createTime" show-overflow-tooltip>
+            <template slot-scope="scope">
+              <span>{{ parseTime(scope.row.createTime) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="申购人" width="100" align="left" prop="name" show-overflow-tooltip/>
+          <el-table-column label="实验室" width="200" align="left" prop="name" show-overflow-tooltip/>
+          <el-table-column label="学院" width="240" align="left" prop="name" show-overflow-tooltip/>
+          <el-table-column label="楼栋楼层" width="240" align="left" prop="name" show-overflow-tooltip/>
+          <el-table-column label="完成时间" width="180" align="left" prop="createTime" show-overflow-tooltip>
+            <template slot-scope="scope">
+              <span>{{ parseTime(scope.row.createTime) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="状态" width="150" align="left" prop="name" show-overflow-tooltip/>
+          <el-table-column label="操作" width="130" align="left" >
             <template slot-scope="scope">
               <div class="table-button-box">
                 <p class="table-button-null"></p>
@@ -102,6 +110,9 @@
                 <p class="table-button-p"
                    @click="tableButton(4,scope.row)"
                 >删除</p>
+                <p class="table-button-p"
+                   @click="tableButton(5,scope.row)"
+                >撤销</p>
                 <p class="table-button-null"></p>
               </div>
             </template>
@@ -142,7 +153,7 @@
     data(){
       return{
         loading:false,
-        pageType:1,
+        pageType:3,
         options:[{label:'启用',value:true},{label:'停用',value:false}],
         dateRangeA:[],
         dateRangeB:[],
@@ -153,7 +164,7 @@
           queryParamsData2 :"",
           queryParamsData3 :"",
         },
-        dataList:[{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},],
+        dataList:[{},],
         total:10,
         deptList:[],
         // 选中数组
@@ -212,13 +223,13 @@
       },
       tableButton(type,row){
         let self = this;
-        if(type == 2){
-          //详情
-          this.$set(this,'propsData',JSON.parse(JSON.stringify(row)));
-          this.$set(this,'pageType',2);
-        }else if(type == 5){
+        if(type == 1){
           //申购
           this.$set(this,'pageType',2);
+        }else if(type == 2){
+          //详情
+          this.$set(this,'propsData',JSON.parse(JSON.stringify(row)));
+          this.$set(this,'pageType',3);
         }else if(type == 3){
           this.$set(this,'pageType',2);
           //编辑
@@ -238,6 +249,21 @@
               self.getList();
             });
           }).catch(() => {});
+        }else if(type == 5){
+          //撤销
+          this.$confirm('是否确认撤销?', "警告", {
+            confirmButtonText: "确定",
+            cancelButtonText: "取消",
+            type: "warning"
+          }).then(function() {
+          }).then(() => {
+            // iotTypeDelete({typeId:row.typeId}).then(response => {
+            //   self.msgSuccess(response.message)
+            //   self.getList();
+            // });
+          }).catch(() => {});
+        }else if(type == 6){
+          //提交审核
         }else if(type == 'out'){
           this.$set(this,'pageType',1);
         }

+ 173 - 201
src/views/chemicalManage/purchaseManage/purchaseRegister/infoPage.vue

@@ -5,86 +5,88 @@
       <p class="page-top-title-out-p" @click="backPage">返回</p>
     </div>
     <div class="content-box scrollbar-box">
-        <div class="content-box-left">
-            <li class="chemical-name">化学品名称<p class="chemical-state">已出库</p></li>
-            <li>形态/纯度/CAS12-34-56</li>
-            <li>类别:易制毒<p class="control-state">管控</p></li>
-            <li>编码:123456789</li>
-            <li>RFID标签:123456789</li>
-            <li>规格:500ml/瓶</li>
-            <li>实时库存:500ml</li>
-            <li>过期时间:2023-10-29 | 30天前提醒</li>
-            <li>领用时效:1小时</li>
-            <li>实验室:实验室名称(房间号)</li>
-            <li>安全员:曹秀康-13227872222</li>
-            <li>位置:化学品柜-柜门-层</li>
-            <li>归属人:李砖头</li>
+      <div class="title-max-big-box">
+        <p class="title-p">申购信息</p>
+      </div>
+      <div class="flex-text-max-box">
+        <div>
+          <p>实验室:</p>
+          <p>{{newData.data1}}</p>
         </div>
-        <div class="lines"></div>
-        <div class="content-box-right">
-            <div class="record">
-              <div class="record-li">
-                  <div class="record-li-t">
-                      <div class="record-li-t-l">空瓶出库</div>
-                      <div class="record-li-t-r">
-                        <p>操作视频</p>
-                        <p>开门视频</p>
-                      </div>
-                  </div>
-                  <div class="record-li-m">
-                    <p>操作时间</p>
-                    <p>领用量</p>
-                    <p>使用量</p>
-                    <p>是否整瓶领用</p>
-                    <p>称重方式</p>
-                    <p>双人认证</p>
-                    <p>操作人</p>
-                  </div>
-                  <div class="record-li-b">
-                      <p>2023/09/15  16:39</p>
-                      <p>400ml</p>
-                      <p>400ml</p>
-                      <p>是</p>
-                      <p>手工录入</p>
-                      <p>张漂亮、李砖头</p>
-                      <p>李砖头</p>
-                    </div>
-              </div>
-              <div class="record-li">
-                <div class="record-li-t">
-                  <div class="record-li-t-l">空瓶出库</div>
-                  <div class="record-li-t-r">
-                    <p>操作视频</p>
-                    <p>开门视频</p>
-                  </div>
-                </div>
-                <div class="record-li-m">
-                  <p>操作时间</p>
-                  <p>领用量</p>
-                  <p>使用量</p>
-                  <p>是否整瓶领用</p>
-                  <p>称重方式</p>
-                  <p>双人认证</p>
-                  <p>操作人</p>
-                </div>
-                <div class="record-li-b">
-                  <p>2023/09/15  16:39</p>
-                  <p>400ml</p>
-                  <p>400ml</p>
-                  <p>是</p>
-                  <p>手工录入</p>
-                  <p>张漂亮、李砖头</p>
-                  <p>李砖头</p>
-                </div>
-              </div>
-            </div>
+        <div>
+          <p>申购人:</p>
+          <p>{{newData.data2}}</p>
         </div>
+        <div>
+          <p>导师:</p>
+          <p>{{newData.data3}}</p>
+        </div>
+      </div>
+      <div class="flex-text-max-box">
+        <div>
+          <p>课题组:</p>
+          <p>{{newData.data4}}</p>
+        </div>
+        <div>
+          <p>课题组负责人:</p>
+          <p>{{newData.data5}}</p>
+        </div>
+        <div>
+          <p>液体已存储量:</p>
+          <p>{{newData.data6}}</p>
+        </div>
+        <div>
+          <p>固体已存储量:</p>
+          <p>{{newData.data7}}</p>
+        </div>
+      </div>
+      <div class="flex-text-max-big-box">
+        <div>
+          <p>用途:</p>
+          <p>{{newData.data8}}</p>
+        </div>
+      </div>
+      <p class="border-p"></p>
+      <div class="title-max-big-box">
+        <p class="title-p">化学品信息</p>
+        <div class="num-max-big-box">
+          <p>本次申购量</p>
+          <p>液体:</p>
+          <p>固体:</p>
+        </div>
+      </div>
+      <div class="for-table-box">
+        <el-table class="table-box" border :data="newData.chemicalsList">
+          <el-table-column label="名称" prop="name" show-overflow-tooltip/>
+          <el-table-column label="CAS" prop="content" width="200" show-overflow-tooltip/>
+          <el-table-column label="类别" prop="content" width="200" show-overflow-tooltip/>
+          <el-table-column label="纯度" prop="content" width="200" show-overflow-tooltip/>
+          <el-table-column label="规格" prop="content" width="200" show-overflow-tooltip/>
+          <el-table-column label="单位" prop="content" width="180" show-overflow-tooltip/>
+          <el-table-column label="数量" prop="content" width="150" show-overflow-tooltip/>
+        </el-table>
+      </div>
+      <p class="border-p"></p>
+      <div class="title-max-big-box">
+        <p class="title-p">审核记录</p>
+        <p :class="newData.data9 == 1?'title-type-a':(newData.data9 == 2?'title-type-b':'title-type-c')">
+          {{newData.data9 == 1?'已完成':(newData.data9 == 2?'XX节点审核中':'已撤销')}}
+        </p>
+      </div>
+      <div class="for-table-box">
+        <el-table class="table-box" border :data="newData.chemicalsList">
+          <el-table-column label="审核人" prop="content" width="200" show-overflow-tooltip/>
+          <el-table-column label="审核节点" prop="content" width="150" show-overflow-tooltip/>
+          <el-table-column label="状态" prop="content" width="150" show-overflow-tooltip/>
+          <el-table-column label="时间" prop="content" width="250" show-overflow-tooltip/>
+          <el-table-column label="备注" prop="content" show-overflow-tooltip/>
+        </el-table>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
-  import {} from "@/api/chemicalManage/index";
   export default {
     name: 'infoPage',
     props:{
@@ -92,7 +94,19 @@
     },
     data(){
       return{
-        showType:false,
+        newData:{
+          data1:'实验室名称(房间号)',
+          data2:'李苗苗-13255668899',
+          data3:'李苗苗-13255668899',
+          data4:'课题组名称',
+          data5:'李苗苗-13255668899',
+          data6:'6666ml(上限100000ml)',
+          data7:'1000g(上限100000g)',
+          data8:'我是用途说明我是用途说明我是用途说明我是用途说明我是用途说明我是用途说明我是用途说明',
+          data9:2,
+          chemicalsList:[{},{},{},{},{},{},{},],
+          examineList:[{},{},{},{},{},{},{},],
+        },
       }
     },
     created(){
@@ -104,7 +118,7 @@
     methods:{
       // 返回按钮
       backPage(){
-        this.$parent.tableButton(7);
+        this.$parent.tableButton('out');
       },
     }
   }
@@ -112,145 +126,103 @@
 
 <style scoped lang="scss">
   .infoPage{
-    .content-box{
+    .content-box {
       flex:1;
       display: flex;
-      padding:20px;
-      .content-box-left{
-        width: 412px;
-        padding: 0 28px 0 60px;
-        box-sizing: border-box;
-        >li{
-          list-style-type: none;
-          font-size: 16px;
-          font-family: Microsoft YaHei, Microsoft YaHei;
-          font-weight: 400;
-          color: #333333;
-          margin-bottom: 30px;
-          display: flex;
+      flex-direction: column;
+      .title-max-big-box{
+        display: flex;
+        height:80px;
+        padding:0 80px;
+        .title-p{
+          flex:1;
+          line-height:80px;
+          font-size:16px;
         }
-        .chemical-name{
+        .num-max-big-box{
           display: flex;
-          justify-content: space-between;
-          align-items: center;
-          .chemical-state{
-            width: 80px;
-            height: 30px;
-            background: #0183FA;
-            border-radius: 6px 6px 6px 6px;
-            font-size: 16px;
-            font-family: Microsoft YaHei, Microsoft YaHei;
-            font-weight: 400;
-            color: #FFFFFF;
-            line-height: 30px;
+          margin:20px 0;
+          line-height:40px;
+          border:1px solid #A9A9A9;
+          border-radius:4px;
+          overflow: hidden;
+          p{
+            font-size:16px;
             text-align: center;
+            width:120px;
           }
-        }
+          p:nth-child(1){
+            background-color: #F5F5F5;
+          }
+          p:nth-child(2){
 
-        .control-state{
-          width: 50px;
-          height: 24px;
-          border-radius: 4px 4px 4px 4px;
-          opacity: 1;
-          border: 1px solid #FC7F1A;
-          font-size: 12px;
-          font-family: Microsoft YaHei, Microsoft YaHei;
-          font-weight: 400;
-          color: #FC7F1A;
-          line-height: 24px;
-          text-align: center;
-          margin-left:10px;
-          float: right;
+          }
+          p:nth-child(3){
+
+          }
+        }
+        .add-item-button{
+          width:120px;
+          margin:20px 0;
+        }
+        .title-type-a{
+          line-height:80px;
+          font-size:16px;
+          color:#1BBC46;
+        }
+        .title-type-b{
+          line-height:80px;
+          font-size:16px;
+          color:#FF8C11;
+        }
+        .title-type-c{
+          line-height:80px;
+          font-size:16px;
+          color:#666666;
         }
       }
-      .lines{
-        width:1px ;
-        height: 760px;
-        opacity: 1;
-        border: 1px dashed #D8D8D8;
+      .border-p{
+        border-top:20px solid #F5F5F5;
       }
-      .content-box-right{
-        margin-left:56px ;
-        .record{
-          width: 1028px;
-          height:auto;
-          opacity: 1;
-          border-bottom: 1px dashed #D8D8D8;
-          padding-bottom: 20px;
-          .record-li{
-            margin-bottom: 20px;
-            .record-li-t{
-              display: flex;
-              justify-content: space-between;
-              .record-li-t-l{
-                width: 150px;
-                height: 40px;
-                background: #0183FA;
-                border-radius: 8px 8px 0px 0px;
-                font-size: 16px;
-                font-family: Microsoft YaHei, Microsoft YaHei;
-                font-weight: 400;
-                color: #FFFFFF;
-                line-height: 40px;
-                text-align: center;
-              }
-              .record-li-t-r{
-                display: flex;
-                >p{
-                  width: 100px;
-                  height: 30px;
-                  border-radius: 6px 6px 6px 6px;
-                  opacity: 1;
-                  border: 1px solid #0183FA;
-                  font-size: 16px;
-                  font-family: Microsoft YaHei, Microsoft YaHei;
-                  font-weight: 400;
-                  color: #0183FA;
-                  line-height: 30px;
-                  text-align: center;
-                  margin-left:10px;
-                  cursor: pointer;
-                }
-              }
-            }
-            .record-li-m{
-              display: flex;
-              justify-content: flex-start;
-              border: 1px solid #E0E0E0;
-              >p{
-                flex: 1;
-                height: 40px;
-                background: #F5F5F5;
-                font-size: 16px;
-                font-family: Microsoft YaHei, Microsoft YaHei;
-                font-weight: 400;
-                color: #333333;
-                line-height: 40px;
-                text-align: center;
-                border-right: 1px solid #E0E0E0;
-              }
-            }
-            .record-li-b{
-              display: flex;
-              justify-content: flex-start;
-              border-bottom: 1px solid #E0E0E0;
-              border-left: 1px solid #E0E0E0;
-              border-right: 1px solid #E0E0E0;
-              >p{
-                flex: 1;
-                height: 40px;
-                font-size: 14px;
-                font-family: Microsoft YaHei, Microsoft YaHei;
-                font-weight: 400;
-                color: #333333;
-                line-height: 40px;
-                text-align: center;
-                border-right: 1px solid #E0E0E0;
-              }
-            }
+      .flex-text-max-box{
+        display: flex;
+        div{
+          display: flex;
+          p{
+            font-size:16px;
+            line-height:20px;
+            margin-bottom:30px;
+          }
+          p:nth-child(1){
+            width:144px;
+            text-align: right;
+          }
+          p:nth-child(2){
+            width:200px;
           }
         }
       }
+      .flex-text-max-big-box{
+        display: flex;
+        div{
+          display: flex;
+          p{
+            font-size:16px;
+            line-height:20px;
+            margin-bottom:30px;
+          }
+          p:nth-child(1){
+            width:144px;
+            text-align: right;
+          }
+          p:nth-child(2){
+            flex:1;
+          }
+        }
+      }
+      .for-table-box{
+        padding:0 80px 40px;
+      }
     }
   }
 </style>