nsgk_mobile/src/views/yinnong/bankAgriculture/paymentApproval/approvalProcess2.vue

<template>
    <div class="app-container">
      <van-nav-bar
        left-arrow
        fixed
        placeholder
        @click-left="$router.back(-1)"
      >
        <template #title>
          <p style="font-weight: bold;">付款申请流程</p>
        </template>
      </van-nav-bar>
      <div class="main_box">
        <van-row v-if="processList.待申请!=2">
          <van-col span="4" align="right"><p class="icon_jian blue"><van-icon name="success" size="14" /></p></van-col>
          <van-col span="20" class="textBlue">草稿</van-col>
        </van-row>
        <van-row v-if="processList.待申请==2">
          <van-col span="4" align="right"><p class="icon_jian blue"><van-icon name="success" size="14" /></p></van-col>
          <van-col span="20" class="textBlue">已申请
            <van-row>
              <van-col span="8" style="padding: 0;" class="textBlue" v-show="processList.待申请==2">{{processList.申请人}}</van-col>
              <van-col span="16" style="padding: 0;" class="textBlue" v-show="processList.待申请==2">{{processList.申请时间}}</van-col>
            </van-row>
          </van-col>
        </van-row>
        <van-row v-if="processList.status==2" v-for="(item1,index,i) in processList.审批事项" :key="i">
          <van-col span="4" align="right">
            <p class="icon_jian" v-show="item1.approverStatus==1"><van-icon name="minus" size="14" /></p>
            <p class="icon_jian blue" v-show="item1.approverStatus==2"><van-icon name="success" size="14" /></p>
            <p class="icon_jian red" v-show="item1.approverStatus==3"><van-icon name="cross" size="14" /></p>
          </van-col>
          <van-col span="20">
            <van-row>
              <van-col span="8" style="padding: 0;">
                <p v-show="item1.approverStatus == 1">{{item1.deptLabel}}</p>
                <p v-show="item1.approverStatus == 2" class="textBlue">{{item1.deptLabel}}</p>
                <p v-show="item1.approverStatus == 3" class="textRed">{{item1.deptLabel}}</p>
              </van-col>
              <van-col span="16" style="padding: 0;" >
                <p v-show="item1.approverStatus == 1">{{item1.time}}</p>
                <p v-show="item1.approverStatus == 2" class="textBlue">{{item1.time}}</p>
                <p v-show="item1.approverStatus == 3" class="textRed">{{item1.time}}</p>
              </van-col>
            </van-row>
            <van-row>
              <van-col span="16" style="padding: 0;" >
                <p v-show="item1.approverStatus == 1">{{item1.assigneeName}}</p>
                <p v-show="item1.approverStatus == 2" class="textBlue">{{item1.assigneeName}}</p>
                <p v-show="item1.approverStatus == 3" class="textRed">{{item1.assigneeName}}</p>
              </van-col>
              <van-col span="8" style="padding: 0;">
                <p v-show="item1.approverStatus == 1">{{item1.comment}}</p>
                <p v-show="item1.approverStatus == 2" class="textBlue">{{item1.comment}}</p>
                <p v-show="item1.approverStatus == 3" class="textRed">{{item1.comment}}</p>
              </van-col>
            </van-row>
          </van-col>
        </van-row>
        <van-divider content-position="center" v-if="approvalTemplateDetailList.length>0"><h4>审批流程</h4></van-divider>
        <van-row v-if="approvalTemplateDetailList.length>0" v-for="(item1,index,i) in approvalTemplateDetailList" :key="i">
          <van-col span="4" align="right">
            <p class="icon_jian" ><van-icon name="minus" size="14" /></p>
          </van-col>
          <van-col span="20">
            <van-row>
              <van-col span="12" style="padding: 0;">
                <p>{{item1.name}}</p>
              </van-col>
              <van-col span="12" style="padding: 0;">
                <p v-show="item1.approvalLevel == 1">组级审批</p>
                <p v-show="item1.approvalLevel == 2">村级审批</p>
                <p v-show="item1.approvalLevel == 3">镇级审批</p>
                <p v-show="item1.approvalLevel == 4">区县审批</p>
              </van-col>
            </van-row>
            <van-row>
              <van-col span="24" style="padding: 0;">
                <p>{{item1.nickName}}<span v-if="item1.feeLimit != 0 && item1.nickName != null">({{item1.feeLimit}}元)</span></p>
              </van-col>
            </van-row>
          </van-col>
        </van-row>
      </div>
    </div>
</template>

<script>
import {
  getTransferProcess,
  getTransfer,
  getProjectto,
  queryTransferDetail,
  selectApprovalByTemplateId
} from "@/api/onlineHome/bankAgriculture/paymentApproval";
import {
  getCash,
  getTransferProcess1,
  listCashdetailByCashId
} from "../../../../api/onlineHome/bankAgriculture/paymentApproval";
export default {
  name: "approvalProcess",
  data() {
    return {
      processList:{},
      form:{},
      approvalTemplateDeptList:[],
      approvalTemplateDetailList:[]
    };
  },
  created() {
    this.handleUpdate(this.$route.query.id);
  },
  methods: {
    //查询审批进程
    getTransferProcess1(id){
      getTransferProcess(id).then(res => {
        this.processList = res.data.processSchedule
        this.processList.乡镇审批时间 = this.processList.乡镇审批时间?this.format(this.processList.乡镇审批时间, "yyyy-MM-dd HH:mm:ss"):""
        this.processList.区县审批时间 = this.processList.区县审批时间?this.format(this.processList.区县审批时间, "yyyy-MM-dd HH:mm:ss"):""
        this.processList.支付状态时间 = this.processList.支付状态时间?this.format(this.processList.支付状态时间, "yyyy-MM-dd HH:mm:ss"):""
        this.processList.入账状态时间 = this.processList.入账状态时间?this.format(this.processList.入账状态时间, "yyyy-MM-dd HH:mm:ss"):""
      })
    },
    handleUpdate(id) {
      getCash(id).then((response) => {
        this.form = response.data;
        this.processList = {}
        if(this.form.auditStatus != 0){
          this.getTransferProcess1(this.$route.query.id);
        }
        if(this.form.approvalMode == 1){
          selectApprovalByTemplateId(this.form.approvalTemplateId).then(rs => {
            this.approvalTemplateDeptList = rs.approvalDepts;
            this.approvalTemplateDetailList = rs.approvalDetails;
            console.log("this.approvalTemplateDetailList:"+this.approvalTemplateDetailList);
            if(this.form.approveLevel === "1"){
              this.approvalTemplateDetailList.push({"approvalLevel":"3"});
            }else if(this.form.approveLevel === "2"){
              this.approvalTemplateDetailList.push({"approvalLevel":"4"});
            }
          })
        }
        if(this.form.capitalExpenditureType==2){
          this.capitalExpenditureOpen = true
          let param={
            'outId' : this.form.id,
            'ynType' : '2'
          }
          getProjectto(param).then(res => {
            this.projectForm = res.data
            this.projectForm.projectFundType+=""
            listCashdetailByCashId(id).then((r) => {
              this.chargeItme = r.data;
              this.length = this.chargeItme.length;
              this.detailTotal = r.total;
              this.loading = false;
            });
          })
        }else{
          this.capitalExpenditureOpen = false
          listCashdetailByCashId(id).then((r) => {
            this.chargeItme = r.data;
            this.length = this.chargeItme.length;
            this.detailTotal = r.total;
            this.loading = false;
          });
        }

      });

    },
  },
}
</script>

<style scoped lang="scss">
  .app-container {
    padding: 0.2rem 0;
  }
  .main_box{
    width: 96%;
    margin: 0 auto;
    border-radius: 6px;
    box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
    overflow: hidden;
    background-color: #FFF;
    padding: 20Px 0;
  }
  .icon_jian{
    background-color: #C9C9C9;
    display: inline-block;
    width: 20Px;
    height: 20Px;
    line-height: 24Px;
    text-align: center;
    border-radius: 50%;
    color: #FFF;
  }
  .blue{
    background-color: #1D6FE9;
  }
  .red{
    background-color: rgb(245, 108, 108);
  }
  .textBlue{
    color: #1D6FE9!important;
  }
  .textRed{
    color: rgb(245, 108, 108)!important;
  }
  .van-col{
    padding: 10Px 10Px;
  }
  .van-col:nth-child(2){
    font-size: 16Px;
    color: #878787;
    line-height: 22Px;
  }
  .van-row{
    .van-row{
      .van-col{
        padding: 5Px 0 0 0!important;
        color: #878787;
      }
    }
  }
</style>