zc

src/api/medicUniversity-3_1/index.js

@@ -575,3 +575,99 @@ export function getHxpapplyDraftsList(query) {
   })
 }
 
+//查询实验室
+export function getNoAdminSubjectListNopage(data) {
+  return request({
+    url: '/laboratory/subject/list/nopage',
+    method: 'get',
+    params: data
+  })
+}
+
+//查询机柜剩余量
+export function getRestStock(data) {
+  return request({
+    url: '/chemical/hxpapply/getRestStock',
+    method: 'get',
+    params: data
+  })
+}
+
+// 新增申购
+export function addHxpapply(data) {
+  return request({
+    url: '/chemical/hxpapply',
+    method: 'post',
+    data: data
+  })
+}
+
+//删除申购/草稿
+export function delHxpapply(id) {
+  return request({
+    url: '/chemical/hxpapply/'+id,
+    method: 'delete',
+  })
+}
+
+//查询编辑详情
+export function getHxpapply(id) {
+  return request({
+    url: '/chemical/hxpapply/'+id,
+    method: 'get',
+  })
+}
+
+//申购撤销接口
+export function approvalRevoke(data) {
+  return request({
+    url: '/chemical/applytask/approvalRevoke',
+    method: 'put',
+    data: data
+  })
+}
+
+//审批流程查询
+export function getConfigList(data) {
+  return request({
+    url: '/chemical/auditconfig/getConfigList',
+    method: 'get',
+    params: data
+  })
+}
+
+
+//审批流程提交
+export function auditconfig(data) {
+  return request({
+    url: '/chemical/auditconfig',
+    method: 'post',
+    data: data
+  })
+}
+
+// 查询部门结构
+export function treeselect(query) {
+  return request({
+    url: '/system/dept/treeselect',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询用户列表
+export function listUser(query) {
+  return request({
+    url: '/system/user/teacher/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 审批详情
+export function hxpapplyAudit(id) {
+  return request({
+    url: '/chemical/hxpapply/audit/'+id,
+    method: 'get',
+  })
+}

src/views/medicUniversity-3_1/chemicalManagement/chemicalProcurement/approvalProcess/index.vue

@@ -3,7 +3,7 @@
   <div class="app-container approvalProcess">
     <div class="title-box">
       <p>化学品申购审批流程</p>
-      <!--<p class="reset-button-one"><i class="el-icon-arrow-left"></i>返回</p>-->
+      <p class="inquire-button-one" @click="submitForm">提交</p>
     </div>
     <div class="approvalProcess-page scrollbar-box">
       <div class="process-max-box">
@@ -27,7 +27,7 @@
             <i class="el-icon-close" @click="listDelButton"></i>
           </div>
           <div class="process-name-box" @click="openDialogButton(index)">
-            <p class="process-name-p">{{!item.list[0]?'请选择审批人':(item.list[0]&&!item.list[1]?item.list[0].name:(!item.list[0]?'已选择'+item.list.length+'人':''))}}</p>
+            <p class="process-name-p">{{!item.actAudituserInfo[0]?'请选择审批人':(item.actAudituserInfo[0]&&!item.actAudituserInfo[1]?item.actAudituserInfo[0].nickName:(item.actAudituserInfo[1]?'已选择'+item.actAudituserInfo.length+'人':''))}}</p>
             <i class="el-icon-arrow-right"></i>
           </div>
           <div class="process-img-box">
@@ -48,22 +48,24 @@
           <div class="big-box">
             <!--input部分-->
             <div class="input-box">
-              <input type="text" placeholder="搜索姓名或工号、身份">
-              <p class="el-icon-search"></p>
+              <input type="text" placeholder="搜索姓名或工号、身份"
+                     v-model="queryParamsData.nickName">
+              <p class="el-icon-search" @click="handleQuery"></p>
             </div>
             <!--面包屑部分-->
             <div class="title-list-box scrollbar-box">
               <div class="title-for" v-for="(item,index) in titleList" :key="index" @click="titleClick(index)">
-                <span :class="index!=titleList.length-1?'spanColor':''">{{item.name}}</span>
+                <span :class="index!=titleList.length-1?'spanColor':''">{{item.label}}</span>
                 <span v-if="index!=titleList.length-1" class="el-icon-arrow-right"></span>
               </div>
             </div>
             <!--可滚动数据部分-->
             <div class="list-max-box scrollbar-box">
               <!--部门部分-->
-              <div class="dept-box" v-for="(item,index) in deptList" :key="item.deptId">
+              <div class="dept-box" @click="deptClick(item)"
+                   v-for="(item,index) in deptList" :key="item.deptId">
                 <img src="@/assets/ZDimages/medicUniversity-3_1/icon-mc.png">
-                <p>{{item.name}}</p>
+                <p>{{item.label}}</p>
                 <img src="@/assets/ZDimages/medicUniversity-3_1/icon-mc-xj.png">
                 <p>下级</p>
               </div>
@@ -71,8 +73,8 @@
               <div class="user-box" v-for="(item,index) in userList" :key="index" @click="addObjButton(item)">
                 <img v-if="item.type" src="@/assets/ZDimages/personnelManagement/icon_xzqx_xz.png">
                 <img v-if="!item.type" src="@/assets/ZDimages/personnelManagement/icon_xzqx_zc.png">
-                <p>{{item.name}}</p>
-                <p>{{item.text}}</p>
+                <p>{{item.nickName}}</p>
+                <p>{{item.positionName}}</p>
               </div>
             </div>
           </div>
@@ -80,9 +82,9 @@
         <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" :key="index">
-              <img :src="item.url">
-              <p>{{item.name}}</p>
+            <div class="user-for-box" v-for="(item,index) in userDialogRightList.actAudituserInfo" :key="index">
+              <img :src="item.avatar">
+              <p>{{item.nickName}}</p>
               <p class="el-icon-circle-close" @click="delRightUser(index)"></p>
             </div>
           </div>
@@ -100,7 +102,7 @@
           />
         </div>
         <div class="radio-box">
-          <el-radio-group v-model="radio">
+          <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>
@@ -109,8 +111,8 @@
       </div>
       <div slot="footer" class="dialog-footer">
         <p class="dialog-footer-null-p"></p>
-        <el-button>取 消</el-button>
-        <el-button type="primary">确 定</el-button>
+        <el-button @click="offDialog">取 消</el-button>
+        <el-button type="primary" @click="upDataButton">确 定</el-button>
         <p class="dialog-footer-null-p"></p>
       </div>
     </el-dialog>
@@ -118,12 +120,11 @@
 </template>
 
 <script>
+  import { getConfigList,treeselect,listUser,auditconfig } from "@/api/medicUniversity-3_1/index";
   export default {
     name: "index",
     data(){
       return{
-        // 审批流程类型
-        radio:null,
         //流程数据
         dataList:[],
         //人员选择页面开关
@@ -131,24 +132,11 @@
         //选中流程的index
         userDialogTypeIndex:null,
         //窗口右侧已选中人员数据
-        userDialogRightList:[
-          {name:"柴云龙1",id:1,url:"https://img2.baidu.com/it/u=2493740568,4186617519&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"},
-          {name:"柴云龙2",id:2,url:"https://img2.baidu.com/it/u=2493740568,4186617519&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"},
-          {name:"柴云龙3",id:3,url:"https://img2.baidu.com/it/u=2493740568,4186617519&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"},
-          {name:"柴云龙4",id:4,url:"https://img2.baidu.com/it/u=2493740568,4186617519&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"},
-          {name:"柴云龙5",id:5,url:"https://img2.baidu.com/it/u=2493740568,4186617519&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"},
-          {name:"柴云龙6",id:6,url:"https://img2.baidu.com/it/u=2493740568,4186617519&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"},
-        ],
-        //查询院系的index
-        userDialogDeptIndex:null,
+        userDialogRightList:{},
         //面包屑数据
-        titleList:[
-          {name:"中国矿业大学",deptId:"1"},
-          {name:"环境与测绘学院",deptId:"2"},
-          {name:"实验中心",deptId:"3"},
-        ],
+        titleList:[],
         //院系数据
-        deptList:[{name:"实验中心"},{name:"实验中心"},{name:"实验中心"},{name:"实验中心"},{name:"实验中心"},],
+        deptList:[],
         //人员数据
         userList:[
           {name:"柴云龙1",type:true,text:"安全责任人",id:1,},
@@ -169,22 +157,72 @@
           pageSize:20,
         },
         //数据数量
-        total:10,
+        total:20,
       }
     },
     created() {
 
     },
     mounted(){
-
+      this.getConfigList();
     },
     methods: {
+      //提交
+      submitForm(){
+        let self = this;
+        self.$confirm('确认要提交吗?', "警告", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        }).then(function() {
+          for(let i=0;i<self.dataList.length;i++){
+            if(!self.dataList[i].actAudituserInfo[0]){
+              self.msgError('第'+(i+1)+'个审批流程未添加人员')
+              return
+            }
+          }
+          let list = [];
+          for(let i=0;i<self.dataList.length;i++){
+            let bigObj = {
+              auditType:self.dataList.auditType,
+              actAudituser:[],
+            };
+            for(let o=0;o<self.dataList[i].actAudituserInfo.length;o++){
+              let obj = {
+                auditUserId:self.dataList[i].actAudituserInfo[o].userId,
+              };
+              bigObj.actAudituser.push(obj);
+            }
+            list.push(bigObj);
+          }
+          auditconfig(list).then(response => {
+            self.msgSuccess(response.msg);
+            self.getConfigList();
+          });
+        }).then(() => {
+        }).catch(() => {});
+      },
+      //确认
+      upDataButton(){
+        this.dataList[this.userDialogTypeIndex] = JSON.parse(JSON.stringify(this.userDialogRightList));
+        this.userDialogType = false;
+      },
+      //关闭弹窗
+      offDialog(){
+        this.userDialogType = false;
+      },
+      // 查询设置
+      getConfigList(){
+        getConfigList().then(response => {
+          this.dataList = response.rows
+        });
+      },
       //添加勾选人员
       addObjButton(item){
         if(!item.type){
-          if(this.userDialogRightList.length<10){
-            this.userDialogRightList.push(item);
-            this.checkDataProcess(1);
+          if(this.userDialogRightList.actAudituserInfo.length<10){
+            this.userDialogRightList.actAudituserInfo.push(item);
+            this.checkDataProcess();
           }else{
             this.msgError('选择不能超过10人')
           }
@@ -192,16 +230,16 @@
       },
       //删除选中人员
       delRightUser(index){
-        this.userDialogRightList.splice(index,1);
-        this.checkDataProcess(2);
+        this.userDialogRightList.actAudituserInfo.splice(index,1);
+        this.checkDataProcess();
       },
       // 勾选数据处理
-      checkDataProcess(type){
+      checkDataProcess(){
         let self = this;
         for(let i=0;i<self.userList.length;i++){
           let num = 0;
-          for(let o=0;o<self.userDialogRightList.length;o++){
-            if(self.userList[i].id == self.userDialogRightList[o].id){
+          for(let o=0;o<self.userDialogRightList.actAudituserInfo.length;o++){
+            if(self.userList[i].userId == self.userDialogRightList.actAudituserInfo[o].userId){
               num++
             }
           }
@@ -209,13 +247,11 @@
         }
         self.$forceUpdate();
       },
-      //获取人员列表
-      getUserList(){
-        this.queryParamsData = JSON.parse(JSON.stringify(this.queryParams));
-      },
       //面包屑点击事件
       titleClick(index){
         let self = this;
+        this.getCatalogListOne(this.titleList[index].id);
+        this.getUserList(this.titleList[index].id);
         let list = [];
         let data = JSON.parse(JSON.stringify(self.titleList))
         for(let i=index;i>=0;i--){
@@ -223,16 +259,59 @@
         }
         this.$set(this,'titleList',list);
       },
+      // 目录点击事件
+      deptClick(item){
+        this.titleList.push(item);
+        this.getCatalogListOne(item.id);
+        this.getUserList(item.id);
+      },
+      // 查询目录
+      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(deptId){
+        this.queryParamsData = JSON.parse(JSON.stringify(this.queryParams));
+        this.queryParamsData.deptId = deptId;
+        listUser(this.queryParamsData).then(response => {
+          this.userList = response.rows;
+          this.checkDataProcess();
+        });
+      },
+      handleQuery() {
+        this.queryParamsData.pageNum = 1;
+        this.queryParamsData.pageSize = 20;
+        this.queryParams = JSON.parse(JSON.stringify(this.queryParamsData));
+        this.getUserList("");
+        this.getCatalogList("");
+      },
       // 编辑人员页面开启
       openDialogButton(index){
         let self = this;
+        this.$set(this.queryParamsData,'nickName',"");
+        this.$set(this.queryParams,'nickName',"");
+        this.getCatalogList("");
+        this.getUserList("");
+        this.$set(this,'userDialogRightList',JSON.parse(JSON.stringify(this.dataList[index])));
         this.$set(this,'userDialogTypeIndex',index);
-        // this.$set(this,'userDialogRightList',self.dataList[index].list);
         this.$set(this,'userDialogType',true);
       },
       //添加流
       listAddButton(){
-        let obj = {list:[]};
+        let obj = {
+          actAudituser:[],
+          actAudituserInfo:[],
+          auditType:1,
+        };
         this.dataList.push(obj);
       },
       //删除流

src/views/medicUniversity-3_1/chemicalManagement/chemicalProcurement/purchaseRequisition/addPage.vue

@@ -1,34 +1,35 @@
-<!--新增/编辑-->
+<!--新增-->
 <template>
   <div class="addPage">
     <div class="title-box">
       <p>化学品申购</p>
-      <p class="reset-button-one" @click="backPage"><i class="el-icon-arrow-left"></i>返回</p>
+      <p class="reset-button-one" @click="backPage(1)"><i class="el-icon-arrow-left"></i>返回</p>
     </div>
     <div class="page-max-box scrollbar-box">
       <el-form :model="formData" ref="form" :inline="true" :rules="rules">
-        <el-form-item label="申购原因：" prop="ded1" label-width="100px">
+        <el-form-item label="申购原因：" prop="applyReason" label-width="100px">
           <el-input
             type="textarea"
             resize="none"
             maxLength="50"
             :rows="4"
             style="width:1200px;"
-            v-model="formData.chemicalName"
+            v-model="formData.applyReason"
             placeholder="请输入申购原因"
             clearable/>
         </el-form-item>
         <div class="two-form-flex">
           <div class="two-form-left">
-            <el-form-item label="实验室：" prop="ded2" label-width="100px">
+            <el-form-item label="实验室：" prop="subId" label-width="100px">
               <el-select
                 style="width:360px;"
-                v-model="formData.subjectId"
+                v-model="formData.subId"
                 filterable
                 remote
                 clearable
-                @focus="selectFocus"
                 reserve-keyword
+                @change="subChange"
+                @focus="selectFocus"
                 @clear="clearClick"
                 placeholder="请选择实验室"
                 :remote-method="getSelectList"
@@ -42,7 +43,7 @@
               </el-select>
             </el-form-item>
           </div>
-          <p class="two-form-right add-button-one-90">更换化学品</p>
+          <p class="two-form-right add-button-one-90" @click="backPage(2)">更换化学品</p>
         </div>
         <div class="form-list-max-box">
           <div class="form-list-title-box">
@@ -51,47 +52,48 @@
             <p>剩余可存放量</p>
             <p>本次申购量</p>
           </div>
-          <div class="form-list-data-box" v-for="(item,index) in formData.list" :key="index">
+          <div class="form-list-data-box" v-for="(item,index) in formData.maxList" :key="index">
             <div class="form-list-data-title">
-              <p>{{item.name}}</p>
+              <p>{{item.chemicalName}}</p>
             </div>
             <div class="form-list-data-for-max-box">
               <div class="form-list-data-for" v-for="(minItem,minIndex) in item.list" :key="minIndex">
                 <div class="form-list-one-box">
-                  <el-form-item label="" :prop="'list.'+ index +'.list.'+ minIndex +'.id'"
-                                :rules="rules.id">
-                    <el-select v-model="minItem.id" clearable placeholder="请选择化学品柜">
-                      <el-option label="1号柜" value="1"></el-option>
-                      <el-option label="2号柜" value="2"></el-option>
-                      <el-option label="3号柜" value="3"></el-option>
-                      <el-option label="4号柜" value="4"></el-option>
+                  <el-form-item label="" :prop="'maxList.'+ index +'.list.'+ minIndex +'.cabinetId'"
+                                :rules="rules.cabinetId">
+                    <el-select v-model="minItem.cabinetId" clearable placeholder="请选择化学品柜"
+                      @change="(val)=>selectCabinet(index,minIndex,val)">
+                      <el-option v-for="item in cabinetLit"
+                                 :key="item.id" :value="item.id" :label="item.cabinetName"></el-option>
                     </el-select>
                   </el-form-item>
                 </div>
                 <p class="form-list-text-p">
-                  10g
+                  {{minItem.applyText?minItem.applyText:'请选择化学品柜'}}
                 </p>
                 <div class="form-list-two-box">
-                  <el-form-item label="" :prop="'list.'+ index +'.list.'+ minIndex +'.num'"
-                                :rules="rules.num">
+                  <el-form-item label="" :prop="'maxList.'+ index +'.list.'+ minIndex +'.applyNum'"
+                                :rules="rules.applyNum">
                     <el-input
                       maxLength="30"
-                      v-model="minItem.num"
+                      v-model="minItem.applyNum"
                       placeholder="请输入本次申购量"
                       clearable
+                      onkeyup="this.value=this.value.replace(/\D/g,'')"
+                      onafterpaste="this.value=this.value.replace(/\D/g,'')"
                       style="width: 220px"
                     ><i slot="append">g</i></el-input>
                   </el-form-item>
-                  <p class="el-icon-delete button-icon-p" style="margin-left:80px;" @click="delObj(index,minIndex)"></p>
-                  <p class="el-icon-circle-plus-outline button-icon-p" v-if="minIndex ==formData.list[index].list.length-1" @click="addObj(index)"></p>
+                  <p class="el-icon-delete button-icon-p" v-if="formData.maxList[index].list.length>1" @click="delObj(index,minIndex)"></p>
+                  <p class="el-icon-circle-plus-outline button-icon-p" v-if="minIndex ==formData.maxList[index].list.length-1" @click="addObj(index)"></p>
                 </div>
               </div>
             </div>
           </div>
         </div>
         <div class="bottom-button-box">
-          <p class="add-button-one-90 right-button" @click="upData">保存草稿</p>
-          <p class="inquire-button-one right-button" @click="upData">提交</p>
+          <p class="add-button-one-90 right-button" @click="upData(2)">保存草稿</p>
+          <p class="inquire-button-one right-button" @click="upData(1)">提交</p>
         </div>
       </el-form>
     </div>
@@ -99,110 +101,169 @@
 </template>
 
 <script>
+  import { getNoAdminSubjectListNopage,getCabinetBySubId,getRestStock,addHxpapply,getHxpapply } from "@/api/medicUniversity-3_1/index";
   export default {
     name: "addPage",
     props:{
       addPagePropsData:{},
+      multipleTableList:{},
     },
     data(){
       return{
         loading:false,
         formData:{
-          list:[
-            {
-              name:"甲醇",
-              list:[
-                {
-                  id:"1",
-                  maxNum:10,
-                  num:"",
-                },
-                {
-                  id:"",
-                  maxNum:10,
-                  num:"",
-                },
-              ]
-            },
-            {
-              name:"乙醇",
-              list:[
-                {
-                  id:"2",
-                  maxNum:10,
-                  num:"",
-                }
-              ]
-            },
-          ],
+          subId:"",
+          applyReason:"",
+          maxList:[],
         },
         rules:{
-          ded1:[
+          applyReason:[
             { required: true, message: '请输入申购原因', trigger: 'blur' },
             { required: true, message: "请输入申购原因", validator: this.spaceJudgment, trigger: "blur" }
           ],
-          ded2:[
+          subId:[
             { required: true, message: '请选择实验室', trigger: 'blur' },
             { required: true, message: "请选择实验室", validator: this.spaceJudgment, trigger: "blur" }
           ],
-          id:[
+          cabinetId:[
             { required: true, message: '请选择化学品柜', trigger: 'blur' },
             { required: true, message: "请选择化学品柜", validator: this.spaceJudgment, trigger: "blur" }
           ],
-          num:[
+          applyNum:[
             { required: true, message: '请输入本次申购量', trigger: 'blur' },
             { required: true, message: "请输入本次申购量", validator: this.spaceJudgment, trigger: "blur" }
           ],
         },
         //实验室列表
         selectList:[],
-
+        //机柜列表
+        cabinetLit:[],
       }
     },
     created() {
 
     },
     mounted(){
-
+      if(this.addPagePropsData.subjectId){
+        this.$set(this.formData,'subjectId',this.addPagePropsData.subjectId);
+      }
+      if(this.addPagePropsData.chemicalName){
+        this.$set(this.formData,'chemicalName',this.addPagePropsData.chemicalName);
+      }
+      this.getSubject();
+      this.addData();
     },
     methods: {
+      //新增逻辑
+      addData(){
+        let self = this;
+        for(let i=0;i<self.multipleTableList.length;i++){
+          let obj = {
+            chemicalId:self.multipleTableList[i].id,
+            chemicalName:self.multipleTableList[i].chemicalName,
+            list:[{cabinetId:"",applyNum:"",applyText:""}],
+          }
+          self.formData.maxList.push(obj);
+        }
+      },
       //删除子项
       delObj(index,minIndex){
-        this.formData.list[index].list.splice(minIndex,1)
+        this.formData.maxList[index].list.splice(minIndex,1)
       },
       //增加子项
       addObj(index){
-        let obj = {
-          id:"",
-          maxNum:10,
-          num:"",
-        }
-        this.formData.list[index].list.push(obj);
+        let obj = {cabinetId:"",applyNum:"",applyText:""}
+        this.formData.maxList[index].list.push(obj);
       },
       //提交
-      upData(){
+      upData(type){
+        let self = this;
         this.$refs["form"].validate((valid) => {
           if (valid) {
-
+            let text = type==1?'提交':'保存';
+            this.$confirm('是否确认'+text+'?', "警告", {
+              confirmButtonText: "确定",
+              cancelButtonText: "取消",
+              type: "warning"
+            }).then(function() {
+              let upObj = {
+                applyStatus:type,
+                subId:self.formData.subId,
+                applyReason:self.formData.applyReason,
+                actHxpapplyDetailList:[],
+              };
+              for(let i=0;i<self.formData.maxList.length;i++){
+                for(let o=0;o<self.formData.maxList[i].list.length;o++){
+                  let obj = {
+                    chemicalId: self.formData.maxList[i].chemicalId,
+                    chemicalName: self.formData.maxList[i].chemicalName,
+                    cabinetId: self.formData.maxList[i].list[o].cabinetId,
+                    applyNum: self.formData.maxList[i].list[o].applyNum
+                  }
+                  upObj.actHxpapplyDetailList.push(obj)
+                }
+              }
+              addHxpapply(upObj).then(response => {
+                self.msgSuccess(response.msg);
+                self.backPage(3)
+              });
+            }).then(() => {
+            }).catch(() => {});
           }
         })
       },
       //返回
-      backPage(){
-        this.$parent.goPage(1);
+      backPage(type){
+        if(type == 1){
+          this.$parent.goPage(1);
+        }else if(type == 2){
+          let obj = {
+            type:true,
+            subjectId:this.formData.subjectId,
+            chemicalName:this.formData.chemicalName,
+          };
+          this.$parent.goPage(3,obj);
+        }else if(type == 3){
+          this.$parent.backPage();
+        }
+      },
+      // 机柜选中
+      selectCabinet(index,minIndex,val){
+        let obj = {
+          subId:this.formData.subId,
+          chemicalId:this.formData.maxList[index].chemicalId,
+          cabinetId:this.formData.maxList[index].list[minIndex].cabinetId,
+        };
+        getRestStock(obj).then(response => {
+          this.$set(this.formData.maxList[index].list[minIndex],'applyText',response.data.restStock);
+        });
+      },
+      // 实验室选中
+      subChange(val){
+        let self = this;
+        getCabinetBySubId({id:val}).then(response => {
+          this.$set(this,'cabinetLit',response.data);
+          for(let i=0;i<self.formData.maxList.length;i++){
+            for(let o=0;o<self.formData.maxList[i].list.length;o++){
+              console.log(self.formData.maxList[i].list[o])
+              this.$set(this.formData.maxList[i].list[o],'cabinetId',"");
+              this.$set(this.formData.maxList[i].list[o],'applyText',"");
+            }
+          }
+        });
+      },
+      getSubject(){
+        //查询院系下实验室
+        getNoAdminSubjectListNopage().then(response => {
+          //当前列表
+          this.selectList = JSON.parse(JSON.stringify(response.data));
+          //原始列表数据
+          this.selectListData = JSON.parse(JSON.stringify(response.data));
+        });
       },
       selectFocus(){
-        if(!this.selectList[0]){
-          //查询院系下实验室
-          getSubList(idText).then(response => {
-            //当前列表
-            this.selectList = JSON.parse(JSON.stringify(response.data));
-            //原始列表数据
-            this.selectListData = JSON.parse(JSON.stringify(response.data));
-          });
-        }
+        this.selectList = JSON.parse(JSON.stringify(this.selectListData));
       },
-
       /** 实验室-本地懒加载 */
       getSelectList(val) {
         let self = this;
@@ -315,6 +376,9 @@
               }
               .form-list-two-box{
                 flex:1;
+                .button-icon-p:nth-child(2){
+                  margin-left:80px;
+                }
                 .button-icon-p{
                   color:#A2A2A2;
                   width:40px;

src/views/medicUniversity-3_1/chemicalManagement/chemicalProcurement/purchaseRequisition/approvalPage.vue

@@ -9,22 +9,24 @@
     <div class="page-max-box scrollbar-box">
       <div class="text-box-one">
         <p>编号：</p>
-        <p></p>
-        <p>申购人：</p>
-        <p>已撤销</p>
+        <p>{{dataInfo.applyNum}}</p>
+        <p>申购人：{{dataInfo.applyUserName}}</p>
+        <p :class="dataInfo.approvalStatus==0?'colorA':(dataInfo.approvalStatus==1?'colorB':(dataInfo.approvalStatus==2?'colorC':(dataInfo.approvalStatus==3?'colorD':'')))"
+        >{{dataInfo.approvalStatus==0?'审批中':(dataInfo.approvalStatus==1?'已通过':(dataInfo.approvalStatus==2?'已拒绝':(dataInfo.approvalStatus==3?'已撤销':'')))}}</p>
       </div>
       <div class="text-box-two">
         <p>申购原因：</p>
-        <p></p>
+        <p>{{dataInfo.applyReason}}</p>
       </div>
       <div class="text-box-one">
         <p>实验室：</p>
-        <p></p>
+        <p style="flex:1;">{{dataInfo.subName}}</p>
       </div>
       <div class="text-box-three">
         <p class="el-icon-info"></p>
         <p>勾选的化学品为已同意申购</p>
       </div>
+      <!--学生-->
       <div class="table-title-box-one">
         <img src="@/assets/ZDimages/medicUniversity-3_1/icon_sp_wxz.png">
         <!--<img src="@/assets/ZDimages/medicUniversity-3_1/icon_ytg_xz.png">-->
@@ -35,14 +37,17 @@
         <p>申购人剩余可存放量</p>
         <p>本次申购量</p>
       </div>
-      <!--学生-->
-      <div class="table-list-box-one">
+      <div class="table-list-box-one" v-for="(item,index) in dataInfo.actHxpapplyDetailList" :key="index">
         <img src="@/assets/ZDimages/medicUniversity-3_1/icon_sp_wxz.png">
         <!--<img src="@/assets/ZDimages/medicUniversity-3_1/icon_ytg_xz.png">-->
         <p></p>
-        <p>甲醇</p>
-        <p>1号柜</p>
-        <p>楼栋-楼层-房间号</p>
+        <p>{{item.chemicalName}}</p>
+        <el-tooltip class="item" effect="dark" :content="item.cabinetName" placement="top">
+          <p>{{item.cabinetName}}</p>
+        </el-tooltip>
+        <el-tooltip class="item" effect="dark" :content="item.posi" placement="top">
+          <p>{{item.posi}}</p>
+        </el-tooltip>
         <p>10g</p>
         <p>1000g</p>
       </div>
@@ -61,13 +66,17 @@
         <p>本次申购量</p>
         <p>操作</p>
       </div>
-      <div class="table-list-box-two">
+      <div class="table-list-box-two" v-for="(item,index) in dataInfo.actHxpapplyDetailList" :key="index">
         <img src="@/assets/ZDimages/medicUniversity-3_1/icon_sp_wxz.png">
         <!--<img src="@/assets/ZDimages/medicUniversity-3_1/icon_ytg_xz.png">-->
         <p></p>
-        <p>甲醇</p>
-        <p>1号柜</p>
-        <p>楼栋-楼层-房间号</p>
+        <p>{{item.chemicalName}}</p>
+        <el-tooltip class="item" effect="dark" :content="item.cabinetName" placement="top">
+          <p>{{item.cabinetName}}</p>
+        </el-tooltip>
+        <el-tooltip class="item" effect="dark" :content="item.posi" placement="top">
+          <p>{{item.posi}}</p>
+        </el-tooltip>
         <p>10g</p>
         <p>10g</p>
         <p>10g</p>
@@ -158,24 +167,32 @@
 </template>
 
 <script>
+import { hxpapplyAudit } from "@/api/medicUniversity-3_1/index";
   export default {
     name: "approvalPage",
     props:{
-      addPagePropsData:{},
+      approvalPagePropsData:{},
     },
     data(){
       return{
         //详情展示弹窗开关
-        infoDialogType:true,
+        infoDialogType:false,
+        dataInfo:{},
       }
     },
     created() {
 
     },
     mounted(){
-
+      this.hxpapplyAudit();
     },
     methods: {
+      //获取审批详情
+      hxpapplyAudit(){
+        hxpapplyAudit(this.approvalPagePropsData.id).then(response => {
+          this.$set(this,'dataInfo',response.data);
+        });
+      },
       //返回
       backPage(){
         this.$parent.pageToggle(1);
@@ -228,6 +245,7 @@
         }
         p:nth-child(2){
           width:205px;
+          padding-left:10px;
         }
         p:nth-child(3){
           flex:1;
@@ -236,12 +254,15 @@
 
         }
         .colorA{
-          color:#666666;
+          color:#FF8C00;
         }
         .colorB{
-          color:#666666;
+          color:#25C402;
         }
         .colorC{
+          color:#FA5151;
+        }
+        .colorD{
           color:#666666;
         }
       }
@@ -258,6 +279,7 @@
           text-align: right;
         }
         p:nth-child(2){
+          padding-left:10px;
           flex:1;
           background: #F5F5F5;
           border-radius:4px;
@@ -330,9 +352,19 @@
         }
         p:nth-child(4){
           width:299px;
+          padding-right:20px;
+          display:block;
+          overflow:hidden;
+          text-overflow:ellipsis;
+          white-space:nowrap;
         }
         p:nth-child(5){
           width:288px;
+          padding-right:20px;
+          display:block;
+          overflow:hidden;
+          text-overflow:ellipsis;
+          white-space:nowrap;
         }
         p:nth-child(6){
           flex:1;
@@ -405,9 +437,19 @@
         }
         p:nth-child(4){
           width:121px;
+          padding-right:20px;
+          display:block;
+          overflow:hidden;
+          text-overflow:ellipsis;
+          white-space:nowrap;
         }
         p:nth-child(5){
           width:165px;
+          padding-right:20px;
+          display:block;
+          overflow:hidden;
+          text-overflow:ellipsis;
+          white-space:nowrap;
         }
         p:nth-child(6){
           width:121px;

src/views/medicUniversity-3_1/chemicalManagement/chemicalProcurement/purchaseRequisition/draftPage.vue

@@ -1,7 +1,7 @@
 <!--草稿箱-->
 <template>
   <div class="draftPage">
-    <div class="draftPage-min">
+    <div class="draftPage-min" v-if="pageType == 1">
       <el-form :model="queryParamsData" class="form-box" ref="queryForm" :inline="true">
         <el-form-item label="关键字" prop="searchValue">
           <el-input
@@ -48,11 +48,11 @@
             <div class="button-box">
               <p class="table-min-button"
                  style="margin:0!important;"
-                 @click="goPageInfo(2,scope.row)"
+                 @click="pageToggle(2,scope.row.id)"
               >编辑</p>
               <p class="table-min-button"
                  style="margin:0!important;"
-                 @click="goPageInfo(2,scope.row)"
+                 @click="delHxpapply(scope.row.id)"
               >删除</p>
             </div>
           </template>
@@ -67,13 +67,18 @@
         @pagination="getList"
       />
     </div>
+    <edit-page :editPagePropsData="editPagePropsData" v-if="pageType == 2"></edit-page>
   </div>
 </template>
 
 <script>
-  import { getHxpapplyDraftsList } from "@/api/medicUniversity-3_1/index";
+  import editPage from "./editPage.vue"
+  import { getHxpapplyDraftsList,delHxpapply,getHxpapply } from "@/api/medicUniversity-3_1/index";
   export default {
     name: "draftPage",
+    components: {
+      editPage
+    },
     data(){
       return{
         // 遮罩层
@@ -96,6 +101,8 @@
         total:0,
         //数据数组
         tableList:[],
+        //详情数据
+        editPagePropsData:{}
       }
     },
     created() {
@@ -105,6 +112,73 @@
       this.getList();
     },
     methods: {
+      //编辑页面
+      pageToggle(type,id){
+        if(type == 1){
+          this.pageType = 1;
+          this.resetQuery();
+        }else if(type == 2){
+          this.getHxpapply(id);
+        }
+      },
+      //查询详情
+      getHxpapply(id){
+        getHxpapply(id).then(response => {
+          let maxObj = {
+            id:id,
+            subId:parseInt(response.data.subId),
+            applyReason:response.data.applyReason,
+            maxList:[],
+          }
+          for(let i=0;i<response.data.actHxpapplyDetailList.length;i++){
+            let num = 0;
+            for(let o=0;o<maxObj.maxList.length;o++){
+              if(maxObj.maxList[o].chemicalId == response.data.actHxpapplyDetailList[i].chemicalId){
+                num++
+              }
+            }
+            if(num == 0){
+              let obj = {
+                chemicalId:parseInt(response.data.actHxpapplyDetailList[i].chemicalId),
+                chemicalName:response.data.actHxpapplyDetailList[i].chemicalName,
+                list:[],
+              }
+              maxObj.maxList.push(obj);
+            }
+          }
+          for(let i=0;i<response.data.actHxpapplyDetailList.length;i++){
+            for(let o=0;o<maxObj.maxList.length;o++){
+              console.log('maxObj.maxList[o].chemicalId',maxObj.maxList[o].chemicalId)
+              console.log('response.data.actHxpapplyDetailList[i].chemicalId',response.data.actHxpapplyDetailList[i].chemicalId)
+              if(maxObj.maxList[o].chemicalId == response.data.actHxpapplyDetailList[i].chemicalId){
+                let minObj = {
+                  cabinetId:parseInt(response.data.actHxpapplyDetailList[i].cabinetId),
+                  applyNum:parseInt(response.data.actHxpapplyDetailList[i].applyNum),
+                  applyText:response.data.actHxpapplyDetailList[i].remainingStorage,
+                };
+                maxObj.maxList[o].list.push(minObj);
+              }
+            }
+          }
+          this.$set(this,'editPagePropsData',maxObj);
+          this.pageType = 2;
+        });
+      },
+      //删除
+      delHxpapply(id){
+        let self = this;
+        this.$confirm('是否确认删除?', "警告", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        }).then(function() {
+          delHxpapply(id).then(response => {
+            self.msgSuccess(response.msg);
+            self.resetQuery();
+          });
+        }).then(() => {
+        }).catch(() => {});
+      },
       //获取数据列表
       getList(){
         this.queryParamsData = JSON.parse(JSON.stringify(this.queryParams));

src/views/medicUniversity-3_1/chemicalManagement/chemicalProcurement/purchaseRequisition/editCheckPage.vue

@@ -0,0 +1,232 @@
+<!--申购-->
+<template>
+  <div class="editCheckPage">
+    <div class="editCheckPage-min">
+      <el-form :model="queryParamsData" class="form-box" ref="queryForm" :inline="true">
+        <el-form-item label="关键字" prop="searchValue">
+          <el-input
+            style="width:210px;"
+            maxLength="30"
+            v-model="queryParamsData.searchValue"
+            placeholder="化学品名/别名/CAS号"
+            clearable
+            size="small"
+          />
+        </el-form-item>
+        <el-form-item label="化学品分类" prop="chemicalClassify">
+          <el-select v-model="queryParamsData.chemicalClassify" clearable placeholder="请选择化学品分类" style="width:180px;">
+            <el-option
+              v-for="item in optionsListOne"
+              :key="item.id"
+              :label="item.classifyName"
+              :value="item.id">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="属性" prop="classifyAttribute">
+          <el-select v-model="queryParamsData.classifyAttribute" clearable placeholder="请选择属性" style="width:180px;">
+            <el-option
+              v-for="item in optionsListTwo"
+              :key="item.dictValue"
+              :label="item.dictLabel"
+              :value="item.dictValue">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <p class="inquire-button-one" @click="handleQuery" style="margin-right:10px;">查询</p>
+          <p class="reset-button-one" @click="resetQuery">重置</p>
+        </el-form-item>
+        <el-form-item style="float: right;">
+          <el-col :span="1.5">
+            <p class="inquire-button-one"
+               @click="goPage"
+            >确定</p>
+          </el-col>
+        </el-form-item>
+        <el-form-item style="float: right;">
+          <el-col :span="1.5">
+            <p class="reset-button-one"
+               @click="backPage"
+            >返回</p>
+          </el-col>
+        </el-form-item>
+      </el-form>
+      <el-table  border :data="tableList" ref="multipleTable" @selection-change="handleSelectionChange" :row-key="getRowKeys">
+        <el-table-column type="selection" width="50" align="center" :reserve-selection="true"/>
+        <el-table-column label="ID" align="center" prop="chemicalNum" show-overflow-tooltip/>
+        <el-table-column label="化学品名" align="center" prop="chemicalName" show-overflow-tooltip/>
+        <el-table-column label="CAS号" align="center" prop="casNum" show-overflow-tooltip/>
+        <el-table-column label="分类" align="center" prop="classifyName" show-overflow-tooltip/>
+        <el-table-column label="属性" align="center" prop="classifyAttribute" show-overflow-tooltip/>
+        <el-table-column label="形态" align="center" prop="chemicalShapeInfo" show-overflow-tooltip/>
+        <el-table-column label="纯度" align="center" prop="purity" show-overflow-tooltip/>
+      </el-table>
+      <pagination
+        v-show="total>0"
+        :total="total"
+        :page-sizes="[20, 30, 40, 50]"
+        :page.sync="queryParams.pageNum"
+        :limit.sync="queryParams.pageSize"
+        @pagination="getList"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+  import { hxpChemicalList,classifyList } from "@/api/medicUniversity-3_1/index";
+  import addPage from "./addPage.vue"
+  export default {
+    name: "editCheckPage",
+    components: {
+      addPage,
+    },
+    props:{
+      editCheckIds:{},
+    },
+    data(){
+      return{
+        // 遮罩层
+        loading:false,
+        // 分类
+        optionsListOne:[],
+        // 属性
+        optionsListTwo:[],
+        // 创建时间
+        dateRange:[],
+        // 搜索数据
+        queryParamsData:{
+          pageNum:1,
+          pageSize:20,
+        },
+        // 搜索实际发送数据
+        queryParams:{
+          pageNum:1,
+          pageSize:20,
+        },
+        //数据数量
+        total:0,
+        //数据数组
+        tableList:[],
+        // 选中用户组
+        userIds: [],
+        // 非多个禁用
+        multiple: true,
+        //表格扩展选择器---需要在@selection-change绑定的方法内监控selection数组长度
+        selectedNum:0,
+        //新增页参数
+        addPagePropsData:{},
+        //勾选数据
+        multipleTableList:[],
+        //编辑参数
+        editPropsData:{},
+      }
+    },
+    created() {
+
+    },
+    mounted(){
+      this.getDicts("hxp_classifyattribute").then(response => {
+        this.optionsListTwo = response.data;
+      })
+      this.classifyList();
+      this.getListOne();
+    },
+    methods: {
+      //确定申购
+      goPage(){
+        if(!this.multipleTableList[0]){
+          this.msgError("请勾选化学品")
+          return
+        }
+        this.$parent.pageToggle(3,this.multipleTableList);
+      },
+      //获取数据列表
+      getListOne(){
+        let self = this;
+        let obj = {
+          ids:this.editCheckIds.ids,
+          pageNum:1,
+          pageSize:100,
+        };
+        hxpChemicalList(obj).then(data => {
+          for(let i=0;i<data.rows.length;i++){
+            self.$refs.multipleTable.toggleRowSelection(data.rows[i],true)
+          }
+          setTimeout(function(){
+            self.getList();
+          },100);
+        });
+      },
+      getList(){
+        let self = this;
+        this.queryParamsData = JSON.parse(JSON.stringify(this.queryParams));
+        hxpChemicalList(this.queryParamsData).then(response => {
+          this.total = response.total;
+          this.tableList = response.rows;
+        });
+      },
+      //获取化学品分类列表
+      classifyList(){
+        classifyList().then(response => {
+          this.optionsListOne = response.rows;
+        });
+      },
+      /** 搜索按钮操作 */
+      handleQuery() {
+        this.queryParamsData.pageNum = 1;
+        this.queryParamsData.pageSize = 20;
+        this.queryParams = JSON.parse(JSON.stringify(this.queryParamsData));
+        this.getList();
+      },
+      /** 重置按钮操作 */
+      resetQuery() {
+        this.$set(this,'queryParamsData',{});
+        this.$set(this,'queryParams',{});
+        this.handleQuery();
+      },
+      //返回
+      backPage(){
+        this.$parent.pageToggle(1);
+      },
+      // 多选框选中数据
+      handleSelectionChange(selection) {
+        this.selectedNum = selection.length;
+        this.userIds = selection.map(item => item.id)
+        this.$set(this,'multipleTableList',selection);
+        this.multiple = !selection.length
+      },
+      /*===记录勾选数据===
+        需要再el-table 添加  :row-key="getRowKeys"
+        需要在selection 添加 :reserve-selection="true"
+      */
+      getRowKeys(row) {
+        return row.id
+      },
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .editCheckPage{
+    flex:1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    p{
+      margin:0;
+      padding:0;
+    }
+    .editCheckPage-min{
+      flex:1;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      padding:20px;
+      .button-box{
+        display: flex;
+      }
+    }
+  }
+</style>

src/views/medicUniversity-3_1/chemicalManagement/chemicalProcurement/purchaseRequisition/editPage.vue

@@ -0,0 +1,453 @@
+<!--编辑-->
+<template>
+  <div class="editPage">
+    <div class="editPage-min" v-if="pageType == 1">
+      <div class="title-box">
+        <p>化学品申购</p>
+        <p class="reset-button-one" @click="backPage"><i class="el-icon-arrow-left"></i>返回</p>
+      </div>
+      <div class="page-max-box scrollbar-box">
+        <el-form :model="formData" ref="form" :inline="true" :rules="rules">
+          <el-form-item label="申购原因：" prop="applyReason" label-width="100px">
+            <el-input
+              type="textarea"
+              resize="none"
+              maxLength="50"
+              :rows="4"
+              style="width:1200px;"
+              v-model="formData.applyReason"
+              placeholder="请输入申购原因"
+              clearable/>
+          </el-form-item>
+          <div class="two-form-flex">
+            <div class="two-form-left">
+              <el-form-item label="实验室：" prop="subId" label-width="100px">
+                <el-select
+                  style="width:360px;"
+                  v-model="formData.subId"
+                  filterable
+                  remote
+                  clearable
+                  reserve-keyword
+                  @change="subChange"
+                  @focus="selectFocus"
+                  @clear="clearClick"
+                  placeholder="请选择实验室"
+                  :remote-method="getSelectList"
+                  :loading="loading">
+                  <el-option
+                    v-for="item in selectList"
+                    :key="item.id"
+                    :label="item.name"
+                    :value="item.id">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </div>
+            <p class="two-form-right add-button-one-90" @click="pageToggle(2)">更换化学品</p>
+          </div>
+          <div class="form-list-max-box">
+            <div class="form-list-title-box">
+              <p>化学品名称</p>
+              <p>化学品柜</p>
+              <p>剩余可存放量</p>
+              <p>本次申购量</p>
+            </div>
+            <div class="form-list-data-box" v-for="(item,index) in formData.maxList" :key="index">
+              <div class="form-list-data-title">
+                <p>{{item.chemicalName}}</p>
+              </div>
+              <div class="form-list-data-for-max-box">
+                <div class="form-list-data-for" v-for="(minItem,minIndex) in item.list" :key="minIndex">
+                  <div class="form-list-one-box">
+                    <el-form-item label="" :prop="'maxList.'+ index +'.list.'+ minIndex +'.cabinetId'"
+                                  :rules="rules.cabinetId">
+                      <el-select v-model="minItem.cabinetId" clearable placeholder="请选择化学品柜"
+                                 @change="(val)=>selectCabinet(index,minIndex,val)">
+                        <el-option v-for="item in cabinetLit"
+                                   :key="item.id" :value="item.id" :label="item.cabinetName"></el-option>
+                      </el-select>
+                    </el-form-item>
+                  </div>
+                  <p class="form-list-text-p">
+                    {{minItem.applyText?minItem.applyText:'请选择化学品柜'}}
+                  </p>
+                  <div class="form-list-two-box">
+                    <el-form-item label="" :prop="'maxList.'+ index +'.list.'+ minIndex +'.applyNum'"
+                                  :rules="rules.applyNum">
+                      <el-input
+                        maxLength="30"
+                        v-model="minItem.applyNum"
+                        placeholder="请输入本次申购量"
+                        clearable
+                        onkeyup="this.value=this.value.replace(/\D/g,'')"
+                        onafterpaste="this.value=this.value.replace(/\D/g,'')"
+                        style="width: 220px"
+                      ><i slot="append">g</i></el-input>
+                    </el-form-item>
+                    <p class="el-icon-delete button-icon-p" v-if="formData.maxList[index].list.length>1" @click="delObj(index,minIndex)"></p>
+                    <p class="el-icon-circle-plus-outline button-icon-p" v-if="minIndex ==formData.maxList[index].list.length-1" @click="addObj(index)"></p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="bottom-button-box">
+            <p class="add-button-one-90 right-button" @click="upData(2)">保存草稿</p>
+            <p class="inquire-button-one right-button" @click="upData(1)">提交</p>
+          </div>
+        </el-form>
+      </div>
+    </div>
+    <edit-check-page :editCheckIds="editCheckIds" v-if="pageType == 2"></edit-check-page>
+  </div>
+</template>
+
+<script>
+  import editCheckPage from "./editCheckPage.vue"
+  import { getNoAdminSubjectListNopage,getCabinetBySubId,getRestStock,addHxpapply,getHxpapply } from "@/api/medicUniversity-3_1/index";
+  export default {
+    name: "editPage",
+    components: {
+      editCheckPage
+    },
+    props:{
+      editPagePropsData:{},
+    },
+    data(){
+      return{
+        pageType:1,
+        loading:false,
+        formData:{
+          subId:"",
+          applyReason:"",
+          maxList:[],
+        },
+        rules:{
+          applyReason:[
+            { required: true, message: '请输入申购原因', trigger: 'blur' },
+            { required: true, message: "请输入申购原因", validator: this.spaceJudgment, trigger: "blur" }
+          ],
+          subId:[
+            { required: true, message: '请选择实验室', trigger: 'blur' },
+            { required: true, message: "请选择实验室", validator: this.spaceJudgment, trigger: "blur" }
+          ],
+          cabinetId:[
+            { required: true, message: '请选择化学品柜', trigger: 'blur' },
+            { required: true, message: "请选择化学品柜", validator: this.spaceJudgment, trigger: "blur" }
+          ],
+          applyNum:[
+            { required: true, message: '请输入本次申购量', trigger: 'blur' },
+            { required: true, message: "请输入本次申购量", validator: this.spaceJudgment, trigger: "blur" }
+          ],
+        },
+        //实验室列表
+        selectList:[],
+        //机柜列表
+        cabinetLit:[],
+        //当前选中化学品(用于下级页面)
+        editCheckIds:{},
+      }
+    },
+    created() {
+
+    },
+    mounted(){
+      this.editData();
+    },
+    methods: {
+      //去选择页面
+      pageToggle(type,data){
+        let self = this;
+        if(type == 1){
+          this.pageType = 1;
+        }else if(type == 2){
+          let text = "";
+          for(let i=0;i<self.formData.maxList.length;i++){
+            if(i == 0){
+              text = self.formData.maxList[i].chemicalId
+            }else{
+              text = text + ',' +self.formData.maxList[i].chemicalId
+            }
+          }
+          this.$set(this.editCheckIds,'ids',text);
+          this.pageType = 2;
+        }else if(type == 3){
+          let newList = [];
+          for(let i=0;i<self.formData.maxList.length;i++){
+            for(let o=0;o<data.length;o++){
+              if(self.formData.maxList[i].chemicalId == data[o].id){
+                newList.push(self.formData.maxList[i]);
+              }
+            }
+          }
+          newList = JSON.parse(JSON.stringify(newList));
+          this.$set(this.formData,'maxList',newList);
+          for(let i=0;i<data.length;i++){
+            let num = 0;
+            for(let o=0;o<self.formData.maxList.length;o++){
+              if(self.formData.maxList[o].chemicalId == data[i].id){
+                num++
+              }
+            }
+            if(num == 0){
+              let obj = {
+                chemicalId:data[i].id,
+                chemicalName:data[i].chemicalName,
+                list:[{cabinetId:"",applyNum:"",applyText:""}],
+              }
+              self.formData.maxList.push(obj);
+            }
+          }
+          this.pageType = 1;
+        }
+      },
+      //新增逻辑
+      editData(){
+        this.$set(this,'formData',this.editPagePropsData);
+        this.getSubject();
+        this.getCabinet(this.editPagePropsData.subId);
+      },
+      //删除子项
+      delObj(index,minIndex){
+        this.formData.maxList[index].list.splice(minIndex,1)
+      },
+      //增加子项
+      addObj(index){
+        let obj = {cabinetId:"",applyNum:"",applyText:""}
+        this.formData.maxList[index].list.push(obj);
+      },
+      //提交
+      upData(type){
+        let self = this;
+        this.$refs["form"].validate((valid) => {
+          if (valid) {
+            let text = type==1?'提交':'保存';
+            this.$confirm('是否确认'+text+'?', "警告", {
+              confirmButtonText: "确定",
+              cancelButtonText: "取消",
+              type: "warning"
+            }).then(function() {
+              let upObj = {
+                id:self.formData.id,
+                applyStatus:type,
+                subId:self.formData.subId,
+                applyReason:self.formData.applyReason,
+                actHxpapplyDetailList:[],
+              };
+              for(let i=0;i<self.formData.maxList.length;i++){
+                for(let o=0;o<self.formData.maxList[i].list.length;o++){
+                  let obj = {
+                    chemicalId: self.formData.maxList[i].chemicalId,
+                    chemicalName: self.formData.maxList[i].chemicalName,
+                    cabinetId: self.formData.maxList[i].list[o].cabinetId,
+                    applyNum: self.formData.maxList[i].list[o].applyNum
+                  }
+                  upObj.actHxpapplyDetailList.push(obj)
+                }
+              }
+              addHxpapply(upObj).then(response => {
+                self.msgSuccess(response.msg);
+                self.backPage();
+              });
+            }).then(() => {
+            }).catch(() => {});
+          }
+        })
+      },
+      //返回
+      backPage(){
+        this.$parent.pageToggle(1);
+      },
+      // 机柜选中
+      selectCabinet(index,minIndex,val){
+        let obj = {
+          subId:this.formData.subId,
+          chemicalId:this.formData.maxList[index].chemicalId,
+          cabinetId:this.formData.maxList[index].list[minIndex].cabinetId,
+        };
+        getRestStock(obj).then(response => {
+          this.$set(this.formData.maxList[index].list[minIndex],'applyText',response.data.restStock);
+        });
+      },
+      // 实验室选中
+      subChange(val){
+        let self = this;
+        getCabinetBySubId({id:val}).then(response => {
+          this.$set(this,'cabinetLit',response.data);
+          for(let i=0;i<self.formData.maxList.length;i++){
+            for(let o=0;o<self.formData.maxList[i].list.length;o++){
+              console.log(self.formData.maxList[i].list[o])
+              this.$set(this.formData.maxList[i].list[o],'cabinetId',"");
+              this.$set(this.formData.maxList[i].list[o],'applyText',"");
+            }
+          }
+        });
+      },
+      getSubject(){
+        //查询院系下实验室
+        getNoAdminSubjectListNopage().then(response => {
+          //当前列表
+          this.selectList = JSON.parse(JSON.stringify(response.data));
+          //原始列表数据
+          this.selectListData = JSON.parse(JSON.stringify(response.data));
+        });
+      },
+      getCabinet(val){
+        getCabinetBySubId({id:val}).then(response => {
+          this.$set(this,'cabinetLit',response.data);
+        });
+      },
+      selectFocus(){
+        this.selectList = JSON.parse(JSON.stringify(this.selectListData));
+      },
+      /** 实验室-本地懒加载 */
+      getSelectList(val) {
+        let self = this;
+        let list = [];
+        for(let i=0;i<self.selectListData.length;i++){
+          if(self.selectListData[i].name.indexOf(val) != -1){
+            list.push(self.selectListData[i]);
+          }
+        }
+        this.selectList = JSON.parse(JSON.stringify(list))
+      },
+      //实验室选中清除
+      clearClick(){
+        this.selectList = JSON.parse(JSON.stringify(this.selectListData))
+      },
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .editPage{
+    flex:1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    .editPage-min{
+      flex:1;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      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;
+        }
+      }
+      .page-max-box{
+        flex:1;
+        display: flex;
+        flex-direction: column;
+        padding:20px 80px;
+        .two-form-flex{
+          display: flex;
+          .two-form-left{
+            flex:1;
+          }
+          .two-form-right{
+            width:130px;
+          }
+        }
+        .form-list-max-box{
+          .form-list-title-box{
+            display: flex;
+            background: #F5F5F5;
+            border-bottom:1px solid #e0e0e0;
+            p{
+              line-height:60px;
+              font-size:16px;
+              color:#333;
+            }
+            p:nth-child(1){
+              padding-left:58px;
+              width:255px;
+            }
+            p:nth-child(2){
+              width:469px;
+            }
+            p:nth-child(3){
+              width:252px;
+            }
+            p:nth-child(4){
+              flex:1;
+            }
+          }
+          .form-list-data-box{
+            display: flex;
+            border:1px solid #e0e0e0;
+            border-top:none;
+            padding-top:20px;
+            .form-list-data-title{
+              vertical-align:middle;
+              width:255px;
+              display: flex;
+              p{
+                height:40px;
+                line-height:40px;
+                align-self: center;
+                margin-top:-20px;
+                margin-left:58px;
+              }
+            }
+            .form-list-data-for-max-box{
+              .form-list-data-for{
+                display: flex;
+                .form-list-one-box{
+                  width:469px;
+                }
+                .form-list-text-p{
+                  width:252px;
+                  line-height:40px;
+                  font-size:14px;
+                }
+                .form-list-two-box{
+                  flex:1;
+                  .button-icon-p:nth-child(2){
+                    margin-left:80px;
+                  }
+                  .button-icon-p{
+                    color:#A2A2A2;
+                    width:40px;
+                    height:40px;
+                    line-height:40px;
+                    text-align: center;
+                    cursor: pointer;
+                    margin-left:20px;
+                  }
+                }
+              }
+            }
+          }
+        }
+        .bottom-button-box{
+          display: flex;
+          width:260px;
+          margin:55px auto;
+          p:nth-child(1){
+            width:120px;
+            margin-right:20px;
+          }
+          p:nth-child(2){
+            width:120px;
+          }
+        }
+      }
+    }
+  }
+</style>

src/views/medicUniversity-3_1/chemicalManagement/chemicalProcurement/purchaseRequisition/index.vue

@@ -110,11 +110,11 @@
         <el-table-column label="操作" align="center" width="220" class-name="small-padding fixed-width">
           <template slot-scope="scope">
             <div class="button-box">
-              <p class="table-min-button" v-show="scope.row.approvalStatus == 2 || scope.row.approvalStatus == 3" style="margin-right:10px;" @click="pageToggle(4)">编辑</p>
-              <p class="table-min-button" v-show="scope.row.approvalStatus == 1 && !scope.row.lsName" style="margin-right:10px;" @click="pageToggle(4)">撤销</p>
-              <p class="table-min-button" v-show="scope.row.approvalStatus == 1" style="margin-right:10px;" @click="pageToggle(4)">审批</p>
-              <p class="table-min-button" style="margin-right:10px;" @click="pageToggle(4)">审批单</p>
-              <p class="table-min-button" v-show="scope.row.approvalStatus == 2 || scope.row.approvalStatus == 3">删除</p>
+              <p class="table-min-button" v-show="scope.row.approvalStatus == 2 || scope.row.approvalStatus == 3" style="margin-right:10px;" @click="pageToggle(5,scope.row.id)">编辑</p>
+              <p class="table-min-button" v-show="scope.row.approvalStatus == 1 && !scope.row.lsName" style="margin-right:10px;" @click="approvalRevoke(scope.row)">撤销</p>
+              <p class="table-min-button" v-show="scope.row.approvalStatus == 1" style="margin-right:10px;" @click="pageToggle(6,scope.row.id)">审批</p>
+              <p class="table-min-button" style="margin-right:10px;" @click="pageToggle(7,scope.row.id)">审批单</p>
+              <p class="table-min-button" v-show="scope.row.approvalStatus == 2 || scope.row.approvalStatus == 3" @click="delHxpapply(scope.row)">删除</p>
             </div>
           </template>
         </el-table-column>
@@ -140,26 +140,30 @@
     <draft-Page v-if="pageType == 2"></draft-Page>
     <list-Page :listPagePropsData="listPagePropsData" v-if="pageType == 3"></list-Page>
     <approval-page :approvalPagePropsData="approvalPagePropsData" v-if="pageType == 4"></approval-page>
+    <edit-page :editPagePropsData="editPagePropsData" v-if="pageType == 5"></edit-page>
   </div>
 </template>
 
 <script>
-  import { getHxpapplyList } from "@/api/medicUniversity-3_1/index";
+  import { getHxpapplyList,delHxpapply,approvalRevoke,getHxpapply } from "@/api/medicUniversity-3_1/index";
   import draftPage from "./draftPage.vue"
   import listPage from "./listPage.vue"
   import approvalPage from "./approvalPage.vue"
+  import editPage from "./editPage.vue"
   export default {
     name: "index",
     components: {
       draftPage,
       listPage,
-      approvalPage
+      approvalPage,
+      editPage
     },
     data(){
       return{
         // 传参数据
         listPagePropsData:{},
         approvalPagePropsData:{},
+        editPagePropsData:{},
         //页面状态
         pageType:1,
         // 申请时间
@@ -195,17 +199,109 @@
       this.getList();
     },
     methods: {
-      pageToggle(type){
+      //操作
+      pageToggle(type,id){
         if(type == 1){
+          //返回列表重置搜索项
           this.pageType = 1;
+          this.resetQuery();
         }else if(type == 2){
+          //去草稿箱
           this.pageType = 2
         }else if(type == 3){
+          //新增-去选择列表
           this.pageType = 3
         }else if(type == 4){
+          //查看详情
           this.pageType = 4
+        }else if(type == 5){
+          //编辑
+          getHxpapply(id).then(response => {
+            let maxObj = {
+              id:id,
+              subId:parseInt(response.data.subId),
+              applyReason:response.data.applyReason,
+              maxList:[],
+            }
+            for(let i=0;i<response.data.actHxpapplyDetailList.length;i++){
+              let num = 0;
+              for(let o=0;o<maxObj.maxList.length;o++){
+                if(maxObj.maxList[o].chemicalId == response.data.actHxpapplyDetailList[i].chemicalId){
+                  num++
+                }
+              }
+              if(num == 0){
+                let obj = {
+                  chemicalId:parseInt(response.data.actHxpapplyDetailList[i].chemicalId),
+                  chemicalName:response.data.actHxpapplyDetailList[i].chemicalName,
+                  list:[],
+                }
+                maxObj.maxList.push(obj);
+              }
+            }
+            for(let i=0;i<response.data.actHxpapplyDetailList.length;i++){
+              for(let o=0;o<maxObj.maxList.length;o++){
+                if(maxObj.maxList[o].chemicalId == response.data.actHxpapplyDetailList[i].chemicalId){
+                  let minObj = {
+                    cabinetId:parseInt(response.data.actHxpapplyDetailList[i].cabinetId),
+                    applyNum:parseInt(response.data.actHxpapplyDetailList[i].applyNum),
+                    applyText:response.data.actHxpapplyDetailList[i].remainingStorage,
+                  };
+                  maxObj.maxList[o].list.push(minObj);
+                }
+              }
+            }
+            this.$set(this,'editPagePropsData',maxObj);
+            this.pageType = 5;
+          });
+        }else if(type == 6){
+          //审批
+          let obj = {
+            id:id,
+            type:1,
+          };
+          this.$set(this,'approvalPagePropsData',obj);
+          this.pageType = 4;
+        }else if(type == 7){
+          //审批单
+          let obj = {
+            id:id,
+            type:2,
+          };
+          this.$set(this,'approvalPagePropsData',obj);
+          this.pageType = 4;
         }
       },
+      //撤销
+      approvalRevoke(row){
+        let self = this;
+        this.$confirm('是否确认撤销?', "警告", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        }).then(function() {
+          approvalRevoke({taskId:row.id}).then(response => {
+            self.msgSuccess(response.msg);
+            self.resetQuery();
+          });
+        }).then(() => {
+        }).catch(() => {});
+      },
+      //删除
+      delHxpapply(row){
+        let self = this;
+        this.$confirm('是否确认删除?', "警告", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        }).then(function() {
+          delHxpapply(row.id).then(response => {
+            self.msgSuccess(response.msg);
+            self.resetQuery();
+          });
+        }).then(() => {
+        }).catch(() => {});
+      },
       //获取数据列表
       getList(){
         this.queryParamsData = JSON.parse(JSON.stringify(this.queryParams));

src/views/medicUniversity-3_1/chemicalManagement/chemicalProcurement/purchaseRequisition/listPage.vue

@@ -1,7 +1,7 @@
 <!--申购-->
 <template>
   <div class="listPage">
-    <div class="listPage-min" v-if="pageType == 1">
+    <div class="listPage-min" v-show="pageType == 1">
       <el-form :model="queryParamsData" class="form-box" ref="queryForm" :inline="true">
         <el-form-item label="关键字" prop="searchValue">
           <el-input
@@ -71,7 +71,10 @@
         @pagination="getList"
       />
     </div>
-    <add-page v-if="pageType == 2"></add-page>
+    <add-page :addPagePropsData="addPagePropsData"
+              :multipleTableList="multipleTableList"
+              :editPropsData="editPropsData"
+              v-if="pageType == 2"></add-page>
   </div>
 </template>
 
@@ -83,9 +86,6 @@
     components: {
       addPage,
     },
-    props:{
-      listPagePropsData:{},
-    },
     data(){
       return{
         // 遮罩层
@@ -97,7 +97,7 @@
         // 属性
         optionsListTwo:[],
         // 创建时间
-        dateRange:[{}],
+        dateRange:[],
         // 搜索数据
         queryParamsData:{
           pageNum:1,
@@ -111,13 +111,19 @@
         //数据数量
         total:0,
         //数据数组
-        tableList:[{},{}],
+        tableList:[],
         // 选中用户组
         userIds: [],
         // 非多个禁用
         multiple: true,
         //表格扩展选择器---需要在@selection-change绑定的方法内监控selection数组长度
         selectedNum:0,
+        //新增页参数
+        addPagePropsData:{},
+        //勾选数据
+        multipleTableList:[],
+        //编辑参数
+        editPropsData:{},
       }
     },
     created() {
@@ -131,11 +137,23 @@
       this.getList();
     },
     methods: {
-      goPage(type){
+      //确定申购
+      goPage(type,data){
+        let self = this;
         if(type==1){
           this.pageType = 1;
+          this.$set(this,'addPagePropsData',{});
+          this.$set(this,'multipleTableList',[]);
+          this.$refs.multipleTable.clearSelection()
         }else if(type == 2){
+          if(!this.multipleTableList[0]){
+            this.msgError("请勾选化学品")
+            return
+          }
           this.pageType = 2;
+        }else if(type == 3){
+          this.$set(this,'addPagePropsData',JSON.parse(JSON.stringify(data)));
+          this.pageType = 1;
         }
       },
       //获取数据列表
@@ -172,7 +190,8 @@
       // 多选框选中数据
       handleSelectionChange(selection) {
         this.selectedNum = selection.length;
-        this.userIds = selection.map(item => item.userId)
+        this.userIds = selection.map(item => item.id)
+        this.$set(this,'multipleTableList',selection);
         this.multiple = !selection.length
       },
       /*===记录勾选数据===

src/views/studentViews/chemicalManagement/studentPurchaseRequisition/approvalPage.vue

@@ -0,0 +1,588 @@
+<template>
+  <div class="approvalPage">
+    <div class="title-box">
+      <p>化学品申购</p>
+      <p class="reset-button-one button-p" @click="backPage">返回</p>
+      <!--已拒绝/已撤销时显示-->
+      <p class="inquire-button-one button-p" @click="backPage">编辑</p>
+    </div>
+    <div class="page-max-box scrollbar-box">
+      <div class="text-box-one">
+        <p>编号：</p>
+        <p></p>
+        <p>申购人：</p>
+        <p>已撤销</p>
+      </div>
+      <div class="text-box-two">
+        <p>申购原因：</p>
+        <p></p>
+      </div>
+      <div class="text-box-one">
+        <p>实验室：</p>
+        <p></p>
+      </div>
+      <div class="text-box-three">
+        <p class="el-icon-info"></p>
+        <p>勾选的化学品为已同意申购</p>
+      </div>
+      <div class="table-title-box-one">
+        <img src="@/assets/ZDimages/medicUniversity-3_1/icon_sp_wxz.png">
+        <!--<img src="@/assets/ZDimages/medicUniversity-3_1/icon_ytg_xz.png">-->
+        <p>全选</p>
+        <p>化学品名</p>
+        <p>化学品柜</p>
+        <p>位置</p>
+        <p>申购人剩余可存放量</p>
+        <p>本次申购量</p>
+      </div>
+      <!--学生-->
+      <div class="table-list-box-one">
+        <img src="@/assets/ZDimages/medicUniversity-3_1/icon_sp_wxz.png">
+        <!--<img src="@/assets/ZDimages/medicUniversity-3_1/icon_ytg_xz.png">-->
+        <p></p>
+        <p>甲醇</p>
+        <p>1号柜</p>
+        <p>楼栋-楼层-房间号</p>
+        <p>10g</p>
+        <p>1000g</p>
+      </div>
+      <!--管理-->
+      <div class="table-title-box-two">
+        <img src="@/assets/ZDimages/medicUniversity-3_1/icon_sp_wxz.png">
+        <!--<img src="@/assets/ZDimages/medicUniversity-3_1/icon_ytg_xz.png">-->
+        <p>全选</p>
+        <p>化学品名</p>
+        <p>化学品柜</p>
+        <p>位置</p>
+        <p>学院库存</p>
+        <p>实验室库存</p>
+        <p>化学品库存</p>
+        <p>申购人剩余可存放量</p>
+        <p>本次申购量</p>
+        <p>操作</p>
+      </div>
+      <div class="table-list-box-two">
+        <img src="@/assets/ZDimages/medicUniversity-3_1/icon_sp_wxz.png">
+        <!--<img src="@/assets/ZDimages/medicUniversity-3_1/icon_ytg_xz.png">-->
+        <p></p>
+        <p>甲醇</p>
+        <p>1号柜</p>
+        <p>楼栋-楼层-房间号</p>
+        <p>10g</p>
+        <p>10g</p>
+        <p>10g</p>
+        <p>10g</p>
+        <p>1000g</p>
+        <p>化学品</p>
+        <p>化学品详情</p>
+      </div>
+      <p class="approval-title-p">审批流程</p>
+      <!--审批流程-->
+      <div class="approval-list-max-box">
+        <div class="approval-for-box">
+          <div class="left-max-box">
+            <div class="left-top-box">
+              <img src="">
+              <!--<img src="">-->
+              <div class="left-top-text-box">
+                <p>发起申请</p>
+                <p>练英雄</p>
+              </div>
+            </div>
+            <p class="left-bottom-p"></p>
+            <img class="left-position-img" src="@/assets/ZDimages/medicUniversity-3_1/icon_cgsq_ytg.png">
+            <img class="left-position-img" src="@/assets/ZDimages/medicUniversity-3_1/icon_cgsq_yjj.png">
+          </div>
+          <div class="right-max-box">
+            <div class="right-for-name-box">
+              <img src="https://img0.baidu.com/it/u=1034508305,2958640538&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500">
+              <p>李达渊</p>
+              <img src="@/assets/ZDimages/medicUniversity-3_1/icon_bz_1.png">
+              <!--<img src="@/assets/ZDimages/medicUniversity-3_1/icon_bz_2.png">-->
+              <img src="@/assets/ZDimages/medicUniversity-3_1/icon_cgsq_ytg.png">
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="bottom-button-box">
+        <p class="add-button-two-90">拒绝</p>
+        <p class="inquire-button-one">同意</p>
+      </div>
+    </div>
+    <el-dialog title="化学品详情" :visible.sync="infoDialogType" v-if="infoDialogType" width="900px" append-to-body class="approvalPage-info-dialog-box">
+      <div class="approvalPage-info-dialog-text-big-box">
+        <div class="approvalPage-info-dialog-box-text-box">
+          <p>化学品名：</p>
+          <p>甲醇</p>
+        </div>
+        <div class="approvalPage-info-dialog-box-text-box">
+          <p>化学品ID：</p>
+          <p>12345678</p>
+        </div>
+      </div>
+      <div class="approvalPage-info-dialog-text-big-box">
+        <div class="approvalPage-info-dialog-box-text-box">
+          <p>CAS：</p>
+          <p>1-35-64664</p>
+        </div>
+        <div class="approvalPage-info-dialog-box-text-box">
+          <p>别名：</p>
+          <p>无</p>
+        </div>
+      </div>
+      <div class="approvalPage-info-dialog-text-big-box">
+        <div class="approvalPage-info-dialog-box-text-box">
+          <p>分类：</p>
+          <p>危险化学品</p>
+        </div>
+        <div class="approvalPage-info-dialog-box-text-box">
+          <p>属性：</p>
+          <p>易制毒、易腐蚀</p>
+        </div>
+      </div>
+      <div class="approvalPage-info-dialog-text-big-box">
+        <div class="approvalPage-info-dialog-box-text-box">
+          <p>纯度：</p>
+          <p>无</p>
+        </div>
+        <div class="approvalPage-info-dialog-box-text-box">
+          <p>形态：</p>
+          <p>液体（g）</p>
+        </div>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { hxpapplyAudit } from "@/api/medicUniversity-3_1/index";
+  export default {
+    name: "approvalPage",
+    props:{
+      approvalPagePropsData:{},
+    },
+    data(){
+      return{
+        //详情展示弹窗开关
+        infoDialogType:false,
+        dataInfo:{},
+      }
+    },
+    created() {
+
+    },
+    mounted(){
+      this.hxpapplyAudit();
+    },
+    methods: {
+      //获取审批详情
+      hxpapplyAudit(){
+        hxpapplyAudit(this.approvalPagePropsData.id).then(response => {
+          this.$set(this,'dataInfo',response.data);
+        });
+      },
+      //返回
+      backPage(){
+        this.$parent.pageToggle(1);
+      },
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .approvalPage{
+    flex:1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    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;
+      }
+      .button-p{
+        margin:25px 25px 0 0;
+      }
+    }
+    .page-max-box{
+      flex:1;
+      display: flex;
+      flex-direction: column;
+      padding:20px 80px;
+      .text-box-one{
+        display: flex;
+        margin-bottom:10px;
+        font-size:16px;
+        p{
+          color:#333;
+          line-height:50px;
+        }
+        p:nth-child(1){
+          width:85px;
+          text-align: right;
+        }
+        p:nth-child(2){
+          width:205px;
+        }
+        p:nth-child(3){
+          flex:1;
+        }
+        p:nth-child(4){
+
+        }
+        .colorA{
+          color:#666666;
+        }
+        .colorB{
+          color:#666666;
+        }
+        .colorC{
+          color:#666666;
+        }
+      }
+      .text-box-two{
+        display: flex;
+        margin-bottom:10px;
+        font-size:16px;
+        p{
+          color:#333;
+          line-height:50px;
+        }
+        p:nth-child(1){
+          width:85px;
+          text-align: right;
+        }
+        p:nth-child(2){
+          flex:1;
+          background: #F5F5F5;
+          border-radius:4px;
+        }
+      }
+      .text-box-three{
+        display: flex;
+        font-size:14px;
+        p:nth-child(1){
+          font-size:14px;
+          width:14px;
+          height:14px;
+          margin:14px 11px 14px 14px;
+          text-align: center;
+          color:#ffb400;
+          border-radius:50%;
+        }
+        p:nth-child(2){
+          flex:1;
+          line-height:42px;
+        }
+      }
+      .table-title-box-one{
+        display: flex;
+        background: #f5f5f5;
+        img:nth-child(1){
+          width:16px;
+          height:16px;
+          margin:17px 17px 0 29px;
+        }
+        p{
+          line-height: 50px;
+          font-size:16px;
+        }
+        p:nth-child(2){
+          width:130px;
+        }
+        p:nth-child(3){
+          width:184px;
+        }
+        p:nth-child(4){
+          width:299px;
+        }
+        p:nth-child(5){
+          width:288px;
+        }
+        p:nth-child(6){
+          flex:1;
+        }
+        p:nth-child(7){
+          width:145px;
+        }
+      }
+      .table-list-box-one{
+        display: flex;
+        img:nth-child(1){
+          width:16px;
+          height:16px;
+          margin:13px 17px 0 29px;
+        }
+        p{
+          line-height: 42px;
+          font-size:14px;
+        }
+        p:nth-child(2){
+          width:130px;
+        }
+        p:nth-child(3){
+          width:184px;
+        }
+        p:nth-child(4){
+          width:299px;
+        }
+        p:nth-child(5){
+          width:288px;
+        }
+        p:nth-child(6){
+          flex:1;
+        }
+        p:nth-child(7){
+          width:145px;
+          color: #0045AF;
+        }
+      }
+      .table-title-box-two{
+        display: flex;
+        background: #f5f5f5;
+        img:nth-child(1){
+          width:16px;
+          height:16px;
+          margin:17px 17px 0 18px;
+        }
+        p{
+          line-height: 50px;
+          font-size:16px;
+        }
+        p:nth-child(2){
+          width:72px;
+        }
+        p:nth-child(3){
+          width:113px;
+        }
+        p:nth-child(4){
+          width:121px;
+        }
+        p:nth-child(5){
+          width:165px;
+        }
+        p:nth-child(6){
+          width:121px;
+        }
+        p:nth-child(7){
+          width:136px;
+        }
+        p:nth-child(8){
+          width:132px;
+        }
+        p:nth-child(9){
+          width:169px;
+        }
+        p:nth-child(10){
+          flex:1;
+        }
+        p:nth-child(11){
+          width:145px;
+          margin-left:55px;
+        }
+      }
+      .table-list-box-two{
+        display: flex;
+        img:nth-child(1){
+          width:16px;
+          height:16px;
+          margin:17px 17px 0 18px;
+        }
+        p{
+          line-height: 50px;
+          font-size:14px;
+        }
+        p:nth-child(2){
+          width:72px;
+        }
+        p:nth-child(3){
+          width:113px;
+        }
+        p:nth-child(4){
+          width:121px;
+        }
+        p:nth-child(5){
+          width:165px;
+        }
+        p:nth-child(6){
+          width:121px;
+        }
+        p:nth-child(7){
+          width:136px;
+        }
+        p:nth-child(8){
+          width:132px;
+        }
+        p:nth-child(9){
+          width:169px;
+        }
+        p:nth-child(10){
+          flex:1;
+        }
+        p:nth-child(11){
+          width:80px;
+          height:28px;
+          line-height:28px;
+          margin-right:14px;
+          color:#0045af;
+          border:1px solid #0045af;
+          border-radius:4px;
+          text-align: center;
+          margin-top:7px;
+          cursor: pointer;
+        }
+        p:nth-child(12){
+          width:100px;
+          height:28px;
+          line-height:28px;
+          color:#0045af;
+          border:1px solid #0045af;
+          border-radius:4px;
+          text-align: center;
+          margin-top:7px;
+          cursor: pointer;
+        }
+      }
+      .approval-title-p{
+        font-size:16px;
+        background: #f5f5f5;
+        line-height: 50px;
+        margin-bottom:23px;
+      }
+      .approval-list-max-box{
+        .approval-for-box{
+          display: flex;
+          .left-max-box{
+            display: flex;
+            flex-direction: column;
+            width:219px;
+            position: relative;
+            .left-top-box{
+              display: flex;
+              img{
+                width:60px;
+                height:60px;
+                border-radius:4px;
+                margin-right:30px;
+              }
+              .left-top-text-box{
+                p{
+                  line-height:30px;
+                  font-size:14px;
+                  color:#333;
+                }
+              }
+            }
+            .left-bottom-p{
+              width:2px;
+              flex:1;
+              background: #e0e0e0;
+              margin-left:29px;
+            }
+            .left-position-img{
+              width:20px;
+              height:20px;
+              position: absolute;
+              top:50px;
+              left:50px;
+            }
+          }
+          .right-max-box{
+            flex:1;
+            min-height:108px;
+            border:1px solid #e0e0e0;
+            margin-bottom:27px;
+            padding:19px 14px 0;
+            .right-for-name-box{
+              display: flex;
+              position: relative;
+              img:nth-child(1){
+                width:40px;
+                height:40px;
+                border-radius:4px;
+                margin-right:8px;
+              }
+              p:nth-child(2){
+                line-height:44px;
+                font-size:14px;
+              }
+              img:nth-child(3){
+                width:12px;
+                height:10px;
+                margin:16px 17px 0 13px;
+              }
+              img:nth-child(4){
+                width:20px;
+                height:20px;
+                position: absolute;
+                top:30px;
+                left:30px;
+              }
+            }
+          }
+          .right-max-end{
+            margin-bottom:0;
+          }
+        }
+      }
+      .bottom-button-box{
+        display: flex;
+        width:217px;
+        margin:30px auto;
+        p{
+          width:100px;
+        }
+        p:nth-child(1){
+          margin-right:17px;
+        }
+      }
+    }
+  }
+</style>
+<style lang="scss">
+  .approvalPage-info-dialog-box{
+    p{
+      margin:0;
+    }
+    .approvalPage-info-dialog-text-big-box{
+      display: flex;
+      .approvalPage-info-dialog-box-text-box:nth-child(1){
+        margin-right:100px;
+        margin-left:20px;
+      }
+      .approvalPage-info-dialog-box-text-box{
+        width:357px;
+        display: flex;
+        p{
+          line-height:50px;
+          color:#333;
+          font-size:16px;
+        }
+        p:nth-child(1){
+          width:80px;
+          text-align: right;
+        }
+        p:nth-child(2){
+          flex:1;
+          text-align: right;
+        }
+      }
+    }
+    .el-dialog__footer{
+      text-align:center;
+    }
+  }
+</style>