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

<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>{{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>{{dataInfo.applyReason}}</p>
      </div>
      <div class="text-box-one">
        <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">-->
        <p>全选</p>
        <p>化学品名</p>
        <p>化学品柜</p>
        <p>位置</p>
        <p>申购人剩余可存放量</p>
        <p>本次申购量</p>
      </div>
      <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>{{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>
      <!--管理-->
      <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" 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>{{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>
        <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;
          padding-left:10px;
        }
        p:nth-child(3){
          flex:1;
        }
        p:nth-child(4){

        }
        .colorA{
          color:#FF8C00;
        }
        .colorB{
          color:#25C402;
        }
        .colorC{
          color:#FA5151;
        }
        .colorD{
          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){
          padding-left:10px;
          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;
          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;
        }
        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;
          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;
        }
        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>