nsgk_mobile/src/views/onlineHome/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-if="processList.待申请!=2">
          <van-col span="6" align="right"><p class="icon_jian blue"><van-icon name="success" size="14" /></p></van-col>
          <van-col span="18" class="textBlue">草稿</van-col>
        </van-row>
        <van-row v-if="processList.待申请==2">
          <van-col span="6" align="right"><p class="icon_jian blue"><van-icon name="success" size="14" /></p></van-col>
          <van-col span="18" class="textBlue">已申请
            <van-row>
              <van-col span="24" style="padding: 0;" class="textBlue" v-show="processList.待申请==2">申请人：{{processList.申请人}}</van-col>
            </van-row>
            <van-row>
              <van-col span="24" style="padding: 0;" class="textBlue" v-show="processList.待申请==2">申请时间：{{processList.申请时间}}</van-col>
            </van-row>
          </van-col>
        </van-row>
        <van-row>
          <van-col span="6" align="right">
            <p class="icon_jian" v-show="processList.乡镇审批==1"><van-icon name="minus" size="14" /></p>
            <p class="icon_jian blue" v-show="processList.乡镇审批==2"><van-icon name="success" size="14" /></p>
            <p class="icon_jian red" v-show="processList.乡镇审批==3"><van-icon name="cross" size="14" /></p>
          </van-col>
          <van-col span="18">
            <p v-show="processList.乡镇审批==1">乡镇审批</p>
            <p v-show="processList.乡镇审批==2" class="textBlue">乡镇审批</p>
            <p v-show="processList.乡镇审批==3" class="textRed">乡镇审批</p>
            <van-row>
              <van-col span="24" style="padding: 0;" v-if="processList.乡镇审批人!=null&&processList.乡镇审批人!=''">
                <p v-show="processList.乡镇审批==1">审批人：{{processList.乡镇审批人}}</p>
                <p v-show="processList.乡镇审批==2" class="textBlue">审批人：{{processList.乡镇审批人}}</p>
                <p v-show="processList.乡镇审批==3" class="textRed">审批人：{{processList.乡镇审批人}}</p>
              </van-col>
            </van-row>
            <van-row>
              <van-col span="24" style="padding: 0;" v-if="processList.乡镇审批时间!=null&&processList.乡镇审批时间!=''">
                <p v-show="processList.乡镇审批==1">审批时间：{{processList.乡镇审批时间}}</p>
                <p v-show="processList.乡镇审批==2" class="textBlue">审批时间：{{processList.乡镇审批时间}}</p>
                <p v-show="processList.乡镇审批==3" class="textRed">审批时间：{{processList.乡镇审批时间}}</p>
              </van-col>
            </van-row>
          </van-col>
        </van-row>
        <van-row v-if="form.approveLevel==2">
          <van-col span="6" align="right">
            <p class="icon_jian" v-show="processList.区县审批==1"><van-icon name="minus" size="14" /></p>
            <p class="icon_jian blue" v-show="processList.区县审批==2"><van-icon name="success" size="14" /></p>
            <p class="icon_jian red" v-show="processList.区县审批==3"><van-icon name="cross" size="14" /></p>
          </van-col>
          <van-col span="18">
            <p v-show="processList.区县审批==1">区县审批</p>
            <p v-show="processList.区县审批==2" class="textBlue">区县审批</p>
            <p v-show="processList.区县审批==3" class="textRed">区县审批</p>

            <van-row>
              <van-col span="24" style="padding: 0;" v-if="processList.区县审批人!=null&&processList.区县审批人!=''">
                <p v-show="processList.区县审批==1">审批人：{{processList.区县审批人}}</p>
                <p v-show="processList.区县审批==2" class="textBlue">审批人：{{processList.区县审批人}}</p>
                <p v-show="processList.区县审批==3" class="textRed">审批人：{{processList.区县审批人}}</p>
              </van-col>
            </van-row>
            <van-row>

              <van-col span="24" style="padding: 0;" v-if="processList.区县审批时间!=null&&processList.区县审批时间!=''">
                <p v-show="processList.区县审批==1">审批时间：{{processList.区县审批时间}}</p>
                <p v-show="processList.区县审批==2" class="textBlue">审批时间：{{processList.区县审批时间}}</p>
                <p v-show="processList.区县审批==3" class="textRed">审批时间：{{processList.区县审批时间}}</p>
              </van-col>
            </van-row>
          </van-col>
        </van-row>
        <van-row v-show="form.transferType==1||form.transferType=='常用转账'">
          <van-col span="6" align="right">
            <p class="icon_jian" v-show="processList.支付状态==1"><van-icon name="minus" size="14" /></p>
            <p class="icon_jian blue" v-show="processList.支付状态==2"><van-icon name="success" size="14" /></p>
            <p class="icon_jian red" v-show="processList.支付状态==3"><van-icon name="cross" size="14" /></p>
          </van-col>
          <van-col span="18">
            <p v-show="processList.支付状态==1">待支付</p>
            <p v-show="processList.支付状态==2" class="textBlue">支付成功</p>
            <p v-show="processList.支付状态==3" class="textRed">支付异常</p>
            <van-row>
              <van-col span="24" style="padding: 0;">
                <p v-show="processList.支付状态==2||processList.支付状态==3">支付时间：{{processList.支付时间}}</p>
              </van-col>
            </van-row>
          </van-col>
        </van-row>
        <van-row v-show="form.transferType==1||form.transferType=='常用转账'">
          <van-col span="6" align="right">
            <p class="icon_jian" v-show="processList.入账状态==1"><van-icon name="minus" size="14" /></p>
            <p class="icon_jian blue" v-show="processList.入账状态==2"><van-icon name="success" size="14" /></p>
            <p class="icon_jian red" v-show="processList.入账状态==3"><van-icon name="cross" size="14" /></p>
          </van-col>
          <van-col span="18">
            <p v-show="processList.入账状态==1">未入账</p>
            <p v-show="processList.入账状态==2" class="textBlue">入账成功</p>
            <p v-show="processList.入账状态==3" class="textRed">入账异常</p>
            <van-row>
              <van-col span="24" style="padding: 0;">
                <p v-show="processList.入账状态==2||processList.入账状态==3">入账时间：{{processList.入账时间}}</p>
              </van-col>
            </van-row>
          </van-col>
        </van-row>
      </div>
    </div>
</template>

<script>
import {
  getTransferProcess,
  getTransfer,
  getProjectto,
  queryTransferDetail
} from "@/api/onlineHome/bankAgriculture/paymentApproval";
export default {
  name: "approvalProcess",
  data() {
    return {
      processList:{},
      form:{}
    };
  },
  created() {
    this.handleUpdate(this.$route.query.id);
  },
  methods: {
    //查询审批进程
    getTransferProcess(id){
      getTransferProcess(id).then(res => {
        this.processList = res.data.processSchedule
        console.log(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) {
      getTransfer(id).then((response) => {
        this.form = response.data;
        this.processList = {}
        this.getTransferProcess(this.$route.query.id);
        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: 20Px 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>