nsgk_mobile/src/views/yinnong/bankAgriculture/cashExpense/cashExpenseProcess.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">
      <div v-if="showAuditHistory">
        <van-divider content-position="center"><h3>审批历史</h3></van-divider>
        <div style="text-align: center; font-size: 14px; color: #969799">批次号：{{ auditbatchNo }}</div>
        <van-row v-for="(item, index) in processList" :key="index">
          <van-col span="4" align="right">
            <p class="icon_jian yellow" v-show="item.auditStatus === '1'">
              <van-icon name="minus" size="14"/>
            </p>
            <p class="icon_jian blue" v-show="item.auditStatus === '3'">
              <van-icon name="success" size="14"/>
            </p>
            <p class="icon_jian red" v-show="item.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="item.auditStatus === '1'" class="textYellow">{{ item.actorName }}</p>
                <p v-show="item.auditStatus === '3'" class="textBlue">{{ item.actorName }}</p>
                <p v-show="item.auditStatus === '2'" class="textRed">{{ item.actorName }}</p>
              </van-col>
              <van-col span="12" style="padding: 0;">
                <p v-show="item.auditStatus === '1'" class="textYellow">{{ item.auditTime }}</p>
                <p v-show="item.auditStatus === '3'" class="textBlue">{{ item.auditTime }}</p>
                <p v-show="item.auditStatus === '2'" class="textRed">{{ item.auditTime }}</p>
              </van-col>
            </van-row>
            <van-row>
              <van-col span="12" style="padding: 0;">
                <p v-show="item.auditStatus === '1'" class="textYellow">{{ item.auditBy }}</p>
                <p v-show="item.auditStatus === '3'" class="textBlue">{{ item.auditBy }}</p>
                <p v-show="item.auditStatus === '2'" class="textRed">{{ item.auditBy }}</p>
              </van-col>
              <van-col span="12" style="padding: 0;">
                <p v-show="item.auditStatus === '1'" class="textYellow">{{ item.auditRemark }}</p>
                <p v-show="item.auditStatus === '3'" class="textBlue">{{ item.auditRemark }}</p>
                <p v-show="item.auditStatus === '2'" class="textRed">{{ item.auditRemark }}</p>
              </van-col>
            </van-row>
          </van-col>
        </van-row>
      </div>
      <van-divider content-position="center"><h3>审批流程</h3></van-divider>
      <van-row v-for="(item, index) in approvalTemplateDetailList" :key="index">
        <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>{{ item.name }}</p>
            </van-col>
            <van-col span="12" style="padding: 0;">
              <p v-show="item.approvalLevel === '1'">组级审批</p>
              <p v-show="item.approvalLevel === '2'">村级审批</p>
              <p v-show="item.approvalLevel === '3'">镇级审批</p>
              <p v-show="item.approvalLevel === '4'">区县审批</p>
            </van-col>
          </van-row>
          <van-row>
            <van-col span="24" style="padding: 0;">
              <p>{{ item.nickName }}</p>
            </van-col>
          </van-row>
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
import { selectApprovalByTemplateId } from "@/api/onlineHome/bankAgriculture/paymentApproval";
import { getCashExpense } from "@/api/onlineHome/bankAgriculture/cashExpense";
import { A_auditHistoryList } from "@/api/audit/aauditpipeline";

export default {
  name: "cashExpenseProcess",
  data() {
    return {
      processList: [],
      approvalTemplateDetailList: [],
      auditbatchNo: null,
      showAuditHistory: false,
    };
  },
  created() {
    if (this.$route.query.id) {
      this.queryProcess(this.$route.query.id);
    }
    if (this.$route.query.templateId) {
      this.queryApprovalTemplate(this.$route.query.templateId);
    }
  },
  methods: {
    queryProcess(id) {
      getCashExpense(id).then((response) => {
        // 查询审批历史
        if (response.data.auditStatus !== '0') {
          this.showAuditHistory = true;
          this.auditbatchNo = response.data.auditbatchNo;
          if (response.data.auditbatchNo != null && response.data.auditbatchNo !== '') {
            A_auditHistoryList(response.data.auditbatchNo).then(res => {
              this.processList = res.rows;
              this.processList.sort((p1, p2) => p1.id - p2.id);
            });
          }
        }
        // this.queryApprovalTemplate(response.data.approvalTemplateId);
      });
    },
    queryApprovalTemplate(approvalTemplateId) {
      selectApprovalByTemplateId(approvalTemplateId).then(rs => {
        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;
}

.yellow {
  background-color: #e6a23c;
}

.blue {
  background-color: #409eff;
}

.red {
  background-color: #F56C6C;
}

.textYellow {
  color: #e6a23c !important;
}

.textBlue {
  color: #409eff !important;
}

.textRed {
  color: #F56C6C !important;
}

.van-col {
  padding: 10Px 10Px;
}

.van-col:nth-child(2) {
  font-size: 16Px;
  color: #878787;
  line-height: 22Px;
}
</style>