nsgk_mobile/src/views/sunVillage_info/bankAgriculture/paymentApproval/approvalProcess3.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="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.approvalTemplateId);
  },
  methods: {
    handleUpdate(approvalTemplateId) {
      console.log("approvalTemplateId:"+approvalTemplateId);
      console.log("this.$route.query.approvalMode:"+this.$route.query.approvalMode);
      if(this.$route.query.approvalMode == '1' && approvalTemplateId != undefined && approvalTemplateId != "undefined"){
        selectApprovalByTemplateId(approvalTemplateId).then(rs => {
          this.approvalTemplateDeptList = rs.approvalDepts;
          this.approvalTemplateDetailList = rs.approvalDetails;
        })
      }
    }
  },
}
</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>