nsgk_mobile/src/views/sunVillage_info/bankAgriculture/paymentApproval/approvalProcess.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-for="(item,index) in processList" :key="index">
          <van-divider content-position="center"><h4>批次号：{{index}}</h4></van-divider>
          <van-row  v-for="(item1,index,i) in item" :key="i">
            <van-col span="4" align="right">
              <p class="icon_jian" v-show="item1.auditStatus=='1'"><van-icon name="minus" size="14" /></p>
              <p class="icon_jian blue" v-show="item1.auditStatus=='3'"><van-icon name="success" size="14" /></p>
              <p class="icon_jian red" v-show="item1.auditStatus=='2'"><van-icon name="cross" size="14" /></p>
            </van-col>
            <van-col span="20">
              <van-row>
                <van-col span="12" style="padding: 0;">
                  <p v-show="item1.auditStatus == '1'">{{item1.actorName}}</p>
                  <p v-show="item1.auditStatus == '3'" class="textBlue">{{item1.actorName}}</p>
                  <p v-show="item1.auditStatus == '2'" class="textRed">{{item1.actorName}}</p>
                </van-col>
                <van-col span="12" style="padding: 0;" >
                  <p v-show="item1.auditStatus == '1'">{{item1.auditTime}}</p>
                  <p v-show="item1.auditStatus == '3'" class="textBlue">{{item1.auditTime}}</p>
                  <p v-show="item1.auditStatus == '2'" class="textRed">{{item1.auditTime}}</p>
                </van-col>
              </van-row>
              <van-row>
                <van-col span="12" style="padding: 0;" >
                  <p v-show="item1.auditStatus == '1'">{{item1.auditBy}}</p>
                  <p v-show="item1.auditStatus == '3'" class="textBlue">{{item1.auditBy}}</p>
                  <p v-show="item1.auditStatus == '2'" class="textRed">{{item1.auditBy}}</p>
                </van-col>
                <van-col span="12" style="padding: 0;">
                  <p v-show="item1.auditStatus == '1'">{{item1.auditRemark}}</p>
                  <p v-show="item1.auditStatus == '3'" class="textBlue">{{item1.auditRemark}}</p>
                  <p v-show="item1.auditStatus == '2'" class="textRed">{{item1.auditRemark}}</p>
                </van-col>
              </van-row>
            </van-col>
          </van-row>
        </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";
export default {
  name: "approvalProcess",
  data() {
    return {
      processList:{},
      form:{},
      approvalTemplateDeptList:[],
      approvalTemplateDetailList:[]
    };
  },
  created() {
    this.handleUpdate(this.$route.query.id);
  },
  methods: {
    //查询审批进程
    getTransferProcess(id){
      getTransferProcess(id).then(res => {
        this.processList = res.data
        console.info( this.processList);
      })
    },
    handleUpdate(id) {
      getTransfer(id).then((response) => {
        this.form = response.data;
        this.processList = {}
        if(this.form.auditStatus != 0){
          this.getTransferProcess(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' : '1'
          }
          getProjectto(param).then(res => {
            this.projectForm = res.data
            this.projectForm.projectFundType+=""
            queryTransferDetail(id).then((r) => {
              this.chargeItme = r.rows;
              this.length = this.chargeItme.length;
              this.detailTotal = r.total;
              this.loading = false;
            });
          })
        }else{
          this.capitalExpenditureOpen = false
          queryTransferDetail(id).then((r) => {
            this.chargeItme = r.rows;
            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;
  }
</style>