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

<template>
  <div class="approvalPage">
    <div class="approvalPage-min" v-if="pageType == 1">
      <div class="title-box">
        <p>化学品申购</p>
        <p class="reset-button-one button-p" @click="backPage">返回</p>
        <!--已拒绝/已撤销时显示-->
        <p class="inquire-button-one button-p" v-if="dataInfo.approvalStatus==2||dataInfo.approvalStatus==3" @click="goEditPage">编辑</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&&approvalPagePropsData.userType==1?'等待我审批':(dataInfo.approvalStatus==0&&approvalPagePropsData.userType!=1?'等待审批':(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" v-if="approvalPagePropsData.type == 2">
          <img @click="allCheckClick" :class="approvalPagePropsData.type==1?'cursor-img':''" v-if="!allCheckType" src="@/assets/ZDimages/medicUniversity-3_1/icon_sp_wxz.png">
          <img @click="allCheckClick" :class="approvalPagePropsData.type==1?'cursor-img':''" v-if="allCheckType" 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-if="approvalPagePropsData.type == 2" v-for="(item,index) in dataInfo.actHxpapplyDetailList" :key="index">
          <img @click="checkClick(item)" :class="approvalPagePropsData.type==1?'cursor-img':''" v-if="!item.checkType" src="@/assets/ZDimages/medicUniversity-3_1/icon_sp_wxz.png">
          <img @click="checkClick(item)" :class="approvalPagePropsData.type==1?'cursor-img':''" v-if="item.checkType" 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>{{item.remainingStorage}}</p>
          <p>{{item.applyNum}}</p>
        </div>
        <!--审批-->
        <div class="table-title-box-two" v-if="approvalPagePropsData.type == 1">
          <img @click="allCheckClick" :class="approvalPagePropsData.type==1?'cursor-img':''" v-if="!allCheckType" src="@/assets/ZDimages/medicUniversity-3_1/icon_sp_wxz.png">
          <img @click="allCheckClick" :class="approvalPagePropsData.type==1?'cursor-img':''" v-if="allCheckType" 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-if="approvalPagePropsData.type == 1" v-for="(item,index) in dataInfo.actHxpapplyDetailList" :key="index">
          <img @click="checkClick(item)" :class="approvalPagePropsData.type==1?'cursor-img':''" v-if="!item.checkType" src="@/assets/ZDimages/medicUniversity-3_1/icon_sp_wxz.png">
          <img @click="checkClick(item)" :class="approvalPagePropsData.type==1?'cursor-img':''" v-if="item.checkType" 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>{{item.collegeInventory}}</p>
          <p>{{item.subInventory}}</p>
          <p>{{item.cabinetStorage}}</p>
          <p>{{item.remainingStorage}}</p>
          <p>{{item.applyNum}}</p>
          <p @click="pageToggle(2,item)">化学品</p>
          <p @click="getHxpChemicalInfo(item.chemicalId)">化学品详情</p>
        </div>
        <p class="approval-title-p">审批流程</p>
        <!--审批流程-->
        <div class="approval-list-max-box">
          <div class="approval-for-box">
            <div class="approval-for-box-min">
              <div class="left-max-box">
                <div class="left-top-box">
                  <img src="">
                  <!--<img src="">-->
                  <div class="left-top-text-box">
                    <p>发起申请</p>
                    <p>{{dataInfo.applyUserName}}</p>
                  </div>
                </div>
                <p class="left-bottom-p"></p>
                <img class="left-position-img" src="@/assets/ZDimages/medicUniversity-3_1/icon_cgsq_ytg.png">
              </div>
              <div class="right-max-box" style="border:none;">
              </div>
            </div>
          </div>
          <div class="approval-for-box" v-if="dataInfo.approvalStatus!=3" v-for="(item,index) in dataInfo.configInfoList" :key="index">
            <div class="approval-for-box-min">
              <div class="left-max-box">
                <div class="left-top-box" v-if="item.auditType == 1">
                  <img v-if="item.actApplytaskNodeList[1]" src="@/assets/ZDimages/medicUniversity-3_1/icon_cgsq_ycsp.png">
                  <img v-if="!item.actApplytaskNodeList[1]" :src="item.actApplytaskNodeList[0].applyUserList[0].avatar">
                  <div class="left-top-text-box">
                    <p>{{item.actApplytaskNodeList[1]?'依次审批':item.actApplytaskNodeList[0].applyUserList[0].postName}}</p>
                    <p>{{item.approvalName}}</p>
                  </div>
                </div>
                <div class="left-top-box" v-if="item.auditType == 2">
                  <img v-if="item.actApplytaskNodeList[0].applyUserList[1]" src="@/assets/ZDimages/medicUniversity-3_1/icon_cgsq_ycsp.png">
                  <img v-if="!item.actApplytaskNodeList[0].applyUserList[1]" :src="item.actApplytaskNodeList[0].applyUserList[0].avatar">
                  <div class="left-top-text-box">
                    <p>{{item.actApplytaskNodeList[0].applyUserList[1]?'或签':item.actApplytaskNodeList[0].applyUserList[0].postName}}</p>
                    <p>{{item.approvalName}}</p>
                  </div>
                </div>
                <p class="left-bottom-p" v-if="index!=dataInfo.configInfoList.length-1"></p>
                <img class="left-position-img" v-if="item.applyTaskStatus == 1" src="@/assets/ZDimages/medicUniversity-3_1/icon_cgsq_ytg.png">
                <img class="left-position-img" v-if="item.applyTaskStatus == 2" src="@/assets/ZDimages/medicUniversity-3_1/icon_cgsq_yjj.png">
              </div>
              <!--依次审批-->
              <div class="right-max-box" v-if="item.auditType == 1">
                <div class="right-for-name-box" v-for="(minItem,minIndex) in item.actApplytaskNodeList" :key="minIndex">
                  <div class="right-for-name-box-min">
                    <img :src="minItem.applyUserList[0].avatar">
                    <p>{{minItem.applyUserList[0].name}}</p>
                    <img class="right-min-img" src="@/assets/ZDimages/medicUniversity-3_1/icon_bz_1.png" v-if="minItem.nodeStatus == 1&&minIndex!=item.actApplytaskNodeList.length-1">
                    <img class="right-min-img" src="@/assets/ZDimages/medicUniversity-3_1/icon_bz_2.png" v-if="!minItem.nodeStatus == 1&&minIndex!=item.actApplytaskNodeList.length-1">
                    <img class="position-min-img" src="@/assets/ZDimages/medicUniversity-3_1/icon_cgsq_ytg.png" v-if="minItem.nodeStatus == 1">
                    <img class="position-min-img" src="@/assets/ZDimages/medicUniversity-3_1/icon_cgsq_yjj.png" v-if="minItem.nodeStatus == 2">
                  </div>
                </div>
              </div>
              <!--或审-->
              <div class="right-max-box" v-if="item.auditType == 2">
                <div class="right-for-name-box" v-for="(minItem,minIndex) in item.actApplytaskNodeList[0].applyUserList" :key="minIndex">
                  <div class="right-for-name-box-min">
                    <img :src="minItem.avatar">
                    <p>{{minItem.name}}</p>
                    <img class="right-min-img" src="@/assets/ZDimages/medicUniversity-3_1/icon_bz_1.png" v-if="item.actApplytaskNodeList[0].applyUserid == minItem.id&&minIndex!=item.actApplytaskNodeList[0].applyUserList.length-1">
                    <img class="right-min-img" src="@/assets/ZDimages/medicUniversity-3_1/icon_bz_2.png" v-if="item.actApplytaskNodeList[0].applyUserid != minItem.id&&minIndex!=item.actApplytaskNodeList[0].applyUserList.length-1">
                    <img class="position-min-img" src="@/assets/ZDimages/medicUniversity-3_1/icon_cgsq_ytg.png" v-if="item.actApplytaskNodeList[0].applyUserid == minItem.id">
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="approval-for-box" v-if="dataInfo.approvalStatus==3">
            <div class="approval-for-box-min">
              <div class="left-max-box">
                <div class="left-top-box">
                  <img src="">
                  <!--<img src="">-->
                  <div class="left-top-text-box">
                    <p>已撤销</p>
                    <p>{{dataInfo.applyUserName}}</p>
                  </div>
                </div>
              </div>
              <div class="right-max-box" style="border:none;">
              </div>
            </div>
          </div>
          <p class="approval-for-min-p" v-if="dataInfo.approvalStatus==2">{{refuseContentText}}</p>
        </div>
        <div class="bottom-button-box" v-if="approvalPagePropsData.type == 1">
          <p class="add-button-two-90" @click="rejectButton" v-hasPermi="['chemical:refuseApplytask:edit']">拒绝</p>
          <p class="inquire-button-one" @click="agreeButton" v-hasPermi="['chemical:applytask:edit']">同意</p>
        </div>
      </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>{{infoDialogData.chemicalName}}</p>
        </div>
        <div class="approvalPage-info-dialog-box-text-box">
          <p>化学品ID：</p>
          <p>{{infoDialogData.id}}</p>
        </div>
      </div>
      <div class="approvalPage-info-dialog-text-big-box">
        <div class="approvalPage-info-dialog-box-text-box">
          <p>CAS：</p>
          <p>{{infoDialogData.casNum}}</p>
        </div>
        <div class="approvalPage-info-dialog-box-text-box">
          <p>别名：</p>
          <p>{{infoDialogData.anotherName}}</p>
        </div>
      </div>
      <div class="approvalPage-info-dialog-text-big-box">
        <div class="approvalPage-info-dialog-box-text-box">
          <p>分类：</p>
          <p>{{infoDialogData.chemicalClassify}}</p>
        </div>
        <div class="approvalPage-info-dialog-box-text-box">
          <p>属性：</p>
          <p>{{infoDialogData.classifyAttribute}}</p>
        </div>
      </div>
      <div class="approvalPage-info-dialog-text-big-box">
        <div class="approvalPage-info-dialog-box-text-box">
          <p>纯度：</p>
          <p>{{infoDialogData.purity}}</p>
        </div>
        <div class="approvalPage-info-dialog-box-text-box">
          <p>形态：</p>
          <p>{{infoDialogData.chemicalShape}}</p>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="getHxpChemicalInfoOff">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="拒绝审批意见" :visible.sync="approvalTextType" v-if="approvalTextType" width="900px" append-to-body class="approvalPage-info-dialog-box">
      <el-form :model="formData" ref="form" :inline="true" label-width="120px">
        <el-form-item label="拒绝意见：" prop="refuseContent">
          <el-input
            maxlength="50"
            style="width:500px;"
            v-model="refuseContent"
            placeholder="请输入拒绝意见"
            clearable
            size="small"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="rejectButton">取 消</el-button>
        <el-button type="primary" @click="rejectDialogButton">确 定</el-button>
      </div>
    </el-dialog>
    <list-page-one :listPropsData="listPropsData" v-if="pageType == 2"></list-page-one>
  </div>
</template>

<script>
  import listPageOne from "./listPageOne.vue"
  import { classifyList,hxpapplyAudit,hxpapply,approvalTask,approvalRefuse,getHxpChemicalInfo } from "@/api/medicUniversity-3_1/index";
  export default {
    name: "approvalPage",
    components: {
      listPageOne
    },
    props:{
      approvalPagePropsData:{},
    },
    data(){
      return{
        //页面状态
        pageType:0,
        //详情展示弹窗开关
        infoDialogType:false,
        //拒绝审批开关
        approvalTextType:false,
        formData:{},
        refuseContent:"",
        dataInfo:{},
        //全选状态
        allCheckType:false,
        refuseContentText:"",
        //化学品详情
        infoDialogData:{},
        //化学品形态
        optionsList:[],
        //化学品分类列表
        optionsListOne:[],
        //属性列表
        optionsListTwo:[],
        //机柜页面传参
        listPropsData:{}
      }
    },
    created() {

    },
    mounted(){
      this.classifyList();
      this.getDicts("chemical_shape").then(response => {
        this.optionsList = response.data;
      })
      this.getDicts("hxp_classifyattribute").then(response => {
        this.optionsListTwo = response.data;
      })
      this.hxpapplyAudit();
    },
    methods: {
      //同意审批
      agreeButton(){
        let self = this;
        let list = [];
        for(let i=0;i<self.dataInfo.actHxpapplyDetailList.length;i++){
          if(self.dataInfo.actHxpapplyDetailList[i].checkType){
            let obj = {
              chemicalId:self.dataInfo.actHxpapplyDetailList[i].chemicalId
            };
            list.push(obj);
          }
        }
        if(!list[0]){
          this.msgError('请选择通过审批的化学品')
          return
        }
        self.$confirm(`是否确认审批通过?`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(async () => {
          let obj = {
            taskId:self.dataInfo.id,
            actHxpapplyDetailList:list,
          };
          approvalTask(obj).then(response => {
            this.msgSuccess(response.msg);
            this.backPage();
          });
        }).catch(() => {})
      },
      //拒绝审批
      rejectButton(){
        this.approvalTextType = !this.approvalTextType;
      },
      rejectDialogButton(){
        let self = this;
        // self.$confirm(`是否确认拒绝通过?`, "提示", {
        //   confirmButtonText: "确定",
        //   cancelButtonText: "取消",
        //   type: "warning"
        // }).then(async () => {
        //   let obj = {
        //     taskId:self.dataInfo.id,
        //     refuseContent:self.refuseContent,
        //   };
        // approvalRefuse(obj).then(response => {
        //   this.msgSuccess(response.msg);
        //   this.backPage();
        // });
        // }).catch(() => {})
        let obj = {
          taskId:self.dataInfo.id,
          refuseContent:self.refuseContent,
        };
        approvalRefuse(obj).then(response => {
          this.msgSuccess(response.msg);
          this.backPage();
        });
      },
      //获取审批详情
      hxpapplyAudit(){
        let userId = localStorage.getItem('userId')
        if(this.approvalPagePropsData.type == 1){
          hxpapplyAudit(this.approvalPagePropsData.id).then(response => {
            //处理添加勾选状态
            for(let i=0;i<response.data.actHxpapplyDetailList.length;i++){
              response.data.actHxpapplyDetailList[i].checkType = false;
            }
            for(let i=0;i<response.data.configInfoList.length;i++){
              if(response.data.configInfoList[i].auditType == 1){
                //依次审批
                for(let o=0;o<response.data.configInfoList[i].actApplytaskNodeList.length;o++){
                  if(response.data.configInfoList[i].applyTaskStatus == 0){
                    if(response.data.actApplytask.nowStep == response.data.configInfoList[i].actApplytaskNodeList[o].id){
                      //进行中
                      if(response.data.configInfoList[i].actApplytaskNodeList[o].nodeStatus == 0){
                        if(userId == response.data.configInfoList[i].actApplytaskNodeList[o].id){
                          response.data.configInfoList[i].approvalName = '我(审批中)'
                          break
                        }else{
                          response.data.configInfoList[i].approvalName = response.data.configInfoList[i].actApplytaskNodeList[o].applyUserList[0].name+'(审批中)'
                          break
                        }
                      }
                    }else{
                      //未进行的
                      if(response.data.configInfoList[i].actApplytaskNodeList[o].nodeStatus == 0){
                        if(userId == response.data.configInfoList[i].actApplytaskNodeList[o].id){
                          response.data.configInfoList[i].approvalName = '我(审批人)'
                          break
                        }else{
                          response.data.configInfoList[i].approvalName = response.data.configInfoList[i].actApplytaskNodeList[o].applyUserList[0].name+'(审批人)'
                          break
                        }
                      }
                    }
                  }else if(response.data.configInfoList[i].applyTaskStatus == 1){
                    if(response.data.configInfoList[i].actApplytaskNodeList[1]){
                      response.data.configInfoList[i].approvalName = '已通过'
                      break
                    }else{
                      response.data.configInfoList[i].approvalName = response.data.configInfoList[i].actApplytaskNodeList[o].applyUserList[0].name+'(已通过)'
                      break
                    }
                  }else if(response.data.configInfoList[i].applyTaskStatus == 2){
                    if(userId == response.data.configInfoList[i].actApplytaskNodeList[o].applyUserList[0].id){
                      response.data.configInfoList[i].approvalName = '我(已拒绝)'
                      break
                    }else{
                      response.data.configInfoList[i].approvalName = response.data.configInfoList[i].actApplytaskNodeList[o].applyUserList[0].name+'(已拒绝)'
                      break
                    }
                  }
                }
              }else if(response.data.configInfoList[i].auditType == 2){
                //或签审批
                for(let o=0;o<response.data.configInfoList[i].actApplytaskNodeList.length;o++) {
                  let minNum = 0;
                  for(let x=0;x<response.data.configInfoList[i].actApplytaskNodeList[o].applyUserList.length;x++){
                    if(userId == response.data.configInfoList[i].actApplytaskNodeList[o].applyUserList[x].id){
                      minNum++
                    }
                  }
                  if(minNum == 0){
                    //没自己
                    if(response.data.configInfoList[i].applyTaskStatus == 0){
                      //未审批
                      if(response.data.actApplytask.nowStep == response.data.configInfoList[i].actApplytaskNodeList[o].id){
                        response.data.configInfoList[i].approvalName = "审批中";
                      }else{
                        response.data.configInfoList[i].approvalName = "待审批";
                      }
                    }else if(response.data.configInfoList[i].applyTaskStatus == 1){
                      //已通过
                      response.data.configInfoList[i].approvalName = "已通过";
                    }else if(response.data.configInfoList[i].applyTaskStatus == 2){
                      //已拒绝
                      response.data.configInfoList[i].approvalName = "已拒绝";
                    }
                  }else{
                    //有自己
                    if(response.data.configInfoList[i].applyTaskStatus == 0){
                      //未审批
                      if(response.data.actApplytask.nowStep == response.data.configInfoList[i].actApplytaskNodeList[o].id){
                        response.data.configInfoList[i].approvalName = "我(审批中)";
                      }else{
                        response.data.configInfoList[i].approvalName = "我(审批人)";
                      }
                    }else if(response.data.configInfoList[i].applyTaskStatus == 1){
                      //已通过
                      response.data.configInfoList[i].approvalName = "我(已通过)";
                    }else if(response.data.configInfoList[i].applyTaskStatus == 2){
                      //已拒绝
                      response.data.configInfoList[i].approvalName = "我(已拒绝)";
                    }
                  }
                }
              }
            }
            this.$set(this,'dataInfo',response.data);
            this.$set(this,'pageType',1);
          });
        }else if(this.approvalPagePropsData.type == 2){
          hxpapply(this.approvalPagePropsData.id).then(response => {
            //处理添加勾选状态
            for(let i=0;i<response.data.actHxpapplyDetailList.length;i++){
              if(response.data.actHxpapplyDetailList[i].tickStatus == 1){
                response.data.actHxpapplyDetailList[i].checkType = true;
              }else{
                response.data.actHxpapplyDetailList[i].checkType = false;
              }
            }
            for(let i=0;i<response.data.configInfoList.length;i++){
              if(response.data.configInfoList[i].auditType == 1){
                //依次审批
                for(let o=0;o<response.data.configInfoList[i].actApplytaskNodeList.length;o++){
                  if(response.data.configInfoList[i].applyTaskStatus == 0){
                    if(response.data.actApplytask.nowStep == response.data.configInfoList[i].actApplytaskNodeList[o].id){
                      //进行中
                      if(response.data.configInfoList[i].actApplytaskNodeList[o].nodeStatus == 0){
                        if(userId == response.data.configInfoList[i].actApplytaskNodeList[o].id){
                          response.data.configInfoList[i].approvalName = '我(审批中)'
                          break
                        }else{
                          response.data.configInfoList[i].approvalName = response.data.configInfoList[i].actApplytaskNodeList[o].applyUserList[0].name+'(审批中)'
                          break
                        }
                      }
                    }else{
                      //未进行的
                      if(response.data.configInfoList[i].actApplytaskNodeList[o].nodeStatus == 0){
                        if(userId == response.data.configInfoList[i].actApplytaskNodeList[o].id){
                          response.data.configInfoList[i].approvalName = '我(审批人)'
                          break
                        }else{
                          response.data.configInfoList[i].approvalName = response.data.configInfoList[i].actApplytaskNodeList[o].applyUserList[0].name+'(审批人)'
                          break
                        }
                      }
                    }
                  }else if(response.data.configInfoList[i].applyTaskStatus == 1){
                    if(response.data.configInfoList[i].actApplytaskNodeList[1]){
                      response.data.configInfoList[i].approvalName = '已通过'
                      break
                    }else{
                      response.data.configInfoList[i].approvalName = response.data.configInfoList[i].actApplytaskNodeList[o].applyUserList[0].name+'(已通过)'
                      break
                    }
                  }else if(response.data.configInfoList[i].applyTaskStatus == 2){
                    this.refuseContentText = response.data.configInfoList[i].refuseContent;
                    if(userId == response.data.configInfoList[i].actApplytaskNodeList[o].applyUserList[0].id){
                      response.data.configInfoList[i].approvalName = '我(已拒绝)'
                      break
                    }else{
                      response.data.configInfoList[i].approvalName = response.data.configInfoList[i].actApplytaskNodeList[o].applyUserList[0].name+'(已拒绝)'
                      break
                    }
                  }
                }
              }else if(response.data.configInfoList[i].auditType == 2){
                //或签审批
                for(let o=0;o<response.data.configInfoList[i].actApplytaskNodeList.length;o++) {
                  let minNum = 0;
                  for(let x=0;x<response.data.configInfoList[i].actApplytaskNodeList[o].applyUserList.length;x++){
                    if(userId == response.data.configInfoList[i].actApplytaskNodeList[o].applyUserList[x].id){
                      minNum++
                    }
                  }
                  if(minNum == 0){
                    //没自己
                    if(response.data.configInfoList[i].applyTaskStatus == 0){
                      //未审批
                      if(response.data.actApplytask.nowStep == response.data.configInfoList[i].actApplytaskNodeList[o].id){
                        response.data.configInfoList[i].approvalName = "审批中";
                      }else{
                        response.data.configInfoList[i].approvalName = "待审批";
                      }
                    }else if(response.data.configInfoList[i].applyTaskStatus == 1){
                      //已通过
                      response.data.configInfoList[i].approvalName = "已通过";
                    }else if(response.data.configInfoList[i].applyTaskStatus == 2){
                      //已拒绝
                      this.refuseContentText = response.data.configInfoList[i].refuseContent;
                      response.data.configInfoList[i].approvalName = "已拒绝";
                    }
                  }else{
                    //有自己
                    if(response.data.configInfoList[i].applyTaskStatus == 0){
                      //未审批
                      if(response.data.actApplytask.nowStep == response.data.configInfoList[i].actApplytaskNodeList[o].id){
                        response.data.configInfoList[i].approvalName = "我(审批中)";
                      }else{
                        response.data.configInfoList[i].approvalName = "我(审批人)";
                      }
                    }else if(response.data.configInfoList[i].applyTaskStatus == 1){
                      //已通过
                      response.data.configInfoList[i].approvalName = "我(已通过)";
                    }else if(response.data.configInfoList[i].applyTaskStatus == 2){
                      //已拒绝
                      this.refuseContentText = response.data.configInfoList[i].refuseContent;
                      response.data.configInfoList[i].approvalName = "我(已拒绝)";
                    }
                  }
                }
              }
            }
            this.$set(this,'dataInfo',response.data);
            this.$set(this,'pageType',1);
          });
        }
      },
      //返回
      backPage(){
        this.$parent.pageToggle(1);
      },
      goEditPage(){
        let obj = {
          id:this.approvalPagePropsData.id
        }
        this.$parent.pageToggle(5,obj);
      },
      //勾选处理
      checkClick(item){
        let self = this;
        if(self.approvalPagePropsData.type != 1){
          return
        }
        item.checkType = !item.checkType;
        let num = 0;
        for(let i=0;i<self.dataInfo.actHxpapplyDetailList.length;i++){
          if(self.dataInfo.actHxpapplyDetailList[i].checkType){
            num++
          }
        }
        this.allCheckType = num == self.dataInfo.actHxpapplyDetailList.length;
      },
      //全选
      allCheckClick(){
        let self = this;
        if(self.approvalPagePropsData.type != 1){
          return
        }
        if(this.allCheckType){
          this.allCheckType = false;
          for(let i=0;i<self.dataInfo.actHxpapplyDetailList.length;i++){
            self.dataInfo.actHxpapplyDetailList[i].checkType = false;
          }
        }else{
          this.allCheckType = true;
          for(let i=0;i<self.dataInfo.actHxpapplyDetailList.length;i++){
            self.dataInfo.actHxpapplyDetailList[i].checkType = true;
          }
        }
      },
      //化学品详情
      getHxpChemicalInfo(id){
        let self = this;
        getHxpChemicalInfo(id).then(response => {
          //化学品形态
          for(let i=0;i<self.optionsList.length;i++){
            if(response.data.chemicalShape == self.optionsList[i].dictValue){
              this.$set(response.data,'chemicalShape',self.optionsList[i].dictLabel);
            }
          }
          //化学品分类列表
          for(let i=0;i<self.optionsListOne.length;i++){
            if(response.data.chemicalClassify == self.optionsListOne[i].id){
              this.$set(response.data,'chemicalClassify',self.optionsListOne[i].classifyName);
            }
          }
          //属性列表
          let list = response.data.classifyAttribute.split(',');
          console.log("list",list);
          let newText = '';
          for(let o=0;o<list.length;o++){
            for(let i=0;i<self.optionsListTwo.length;i++){
              if(list[o] == self.optionsList[i].dictValue){
                if(o == 0){
                  newText = self.optionsList[i].dictLabel
                }else{
                  newText = newText + ',' +self.optionsList[i].dictLabel
                }
              }
            }
          }
          this.$set(response.data,'classifyAttribute',newText);
          this.infoDialogData = response.data;
          this.infoDialogType = true;
        });
      },
      getHxpChemicalInfoOff(){
        this.infoDialogType = false;
      },
      //获取化学品分类列表
      classifyList(){
        classifyList().then(response => {
          this.optionsListOne = response.rows;
        });
      },
      pageToggle(type,item){
        if(type == 1){
          this.pageType = 1;
        }else if(type == 2){
          let obj = {
            cabinetName:item.chemicalName,
            posi:item.posi,
            safeUserName:item.safeUserNames,
            id:item.cabinetId,
          };
          this.$set(this,'listPropsData',obj);
          this.pageType = 2;
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  .approvalPage{
    flex:1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    p{
      margin:0;
      padding:0;
    }
    .approvalPage-min{
      flex:1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      .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;
          margin-bottom:10px;
          .cursor-img{
            cursor: pointer;
          }
          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;
          .cursor-img{
            cursor: pointer;
          }
          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;
          margin-bottom:10px;
          .cursor-img{
            cursor: pointer;
          }
          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;
          .cursor-img{
            cursor: pointer;
          }
          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:11px;
            cursor: pointer;
          }
          p:nth-child(12){
            width:100px;
            height:28px;
            line-height:28px;
            margin-right:14px;
            color:#0045af;
            border:1px solid #0045af;
            border-radius:4px;
            text-align: center;
            margin-top:11px;
            cursor: pointer;
          }
        }
        .approval-title-p{
          font-size:16px;
          background: #f5f5f5;
          line-height: 50px;
          margin-bottom:23px;
          padding-left:20px;
          margin-top:10px;
        }
        .approval-list-max-box{
          .approval-for-box{
            .approval-for-box-min{
              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:80px;
                border:1px solid #e0e0e0;
                margin-bottom:27px;
                padding:19px 14px 0;
                .right-for-name-box{
                  display: inline-block;
                  margin-bottom:17px;
                  .right-for-name-box-min{
                    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;
                    }
                    .right-min-img{
                      width:12px;
                      height:10px;
                      margin:16px 17px 0 13px;
                    }
                    .position-min-img{
                      width:20px;
                      height:20px;
                      position: absolute;
                      top:30px;
                      left:30px;
                    }
                  }
                }
              }
              .right-max-box-border-none{
                border:none;
              }
              .right-max-end{
                margin-bottom:0;
              }
            }
          }
          .approval-for-min-p{
            margin:20px 95px;
            font-size:14px;
            line-height:20px;
            color:#666666;
            background: #F5F5F5;
            padding:10px 35px;
            word-wrap:break-word;
            word-break:break-all;
            overflow: hidden;
          }
        }
        .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>