nsgk_mobile/src/views/yinnong/bankAgriculture/cashExpense/cashExpenseDetail.vue

<template>
  <div class="app-container">
    <van-nav-bar left-arrow fixed placeholder @click-left="goBack">
      <template #title>
        <p style="font-weight: bold;">资金审批申请详情</p>
      </template>
      <template #right>
        <van-icon name="../../../static/images/icon/icon_flow.png" size="20" @click="goFlow"/>
      </template>
    </van-nav-bar>

    <van-form readonly>
      <div class="main_box">
        <van-field v-model="form.cashAt" label="申请日期" placeholder="请选择申请日期"
                   required :rules="[{ required: true }]"
                   input-align="right" right-icon="arrow-down"
                   readonly clickable @click="showCashAt = true" />
        <van-popup v-model="showCashAt" position="bottom">
          <van-datetime-picker
            :value="currentDate"
            type="date"
            title="请选择申请日期"
            :min-date="minDate"
            :max-date="maxDate"
            @confirm="onConfirmCashAt"
            @cancel="showCashAt = false"
          />
        </van-popup>
        <van-field v-model="form.cashAmount" label="申请金额(元)" placeholder="请输入申请金额(元)"
                   required :rules="[{ required: true }]" input-align="right" type="number" />
        <van-field v-model="capitalExpenditureType" label="资金支出类别" placeholder="请选择资金支出类别"
                   required :rules="[{ required: true }]"
                   input-align="right" right-icon="arrow-down"
                   readonly clickable @click="showType = true" />
        <van-popup v-model="showType" position="bottom">
          <van-picker
            show-toolbar
            :columns="capitalExpenditureTypeOptions"
            value-key="dictLabel"
            @confirm="onConfirmType"
            @cancel="showType = false"
          />
        </van-popup>
        <van-field v-model="form.cashRemarks" label="支款说明" placeholder="请输入支款说明"
                   required :rules="[{ required: true }]" input-align="right" maxlength="200" />
        <van-field v-model="form.cashierNo" label="付款账号" placeholder="请输入付款账号"
                   input-align="right" maxlength="50" />
        <van-field v-model="form.cashierName" label="付款单位" placeholder="请输入付款单位"
                   input-align="right" maxlength="150" />
        <van-field v-model="form.payeeName" label="收款方名称" placeholder="请输入收款方名称"
                   input-align="right" maxlength="150" />
        <van-field v-model="form.payeePhone" label="收款方电话" placeholder="请输入收款方电话"
                   input-align="right" maxlength="20" />
        <van-field v-model="approvalTemplateName" label="审批流程" placeholder="请选择审批流程"
                   required :rules="[{ required: true }]"
                   input-align="right" right-icon="arrow-down"
                   readonly clickable @click="showTemplate = true"
        />
        <van-popup v-model="showTemplate" position="bottom">
          <van-picker
            show-toolbar
            :columns="templateList"
            value-key="name"
            @confirm="onConfirmTemplate"
            @cancel="showTemplate = false"
          />
        </van-popup>
      </div>
    </van-form>
  </div>
</template>

<script>

import { selectApprovalByTemplateId, listTemplate } from "@/api/onlineHome/bankAgriculture/paymentApproval";
import { getCashExpense } from "@/api/onlineHome/bankAgriculture/cashExpense";

export default {
  name: "cashExpenseDetail",
  data() {
    return {
      showCashAt: false,

      minDate: new Date(1978, 0, 1),
      maxDate: new Date(2100, 11, 31),
      currentDate: new Date(),
      form: {},

      capitalExpenditureType: null,
      capitalExpenditureTypeOptions:[],
      showType: false,

      approvalTemplateName: null,
      showTemplate:false,
      templateList:[],
    };
  },
  created() {
    this.reset();
    this.getDicts("capital_expenditure_type").then((res) => {
      this.capitalExpenditureTypeOptions = res.data;
    });
    listTemplate({ type: '10' }).then(response => {
      this.templateList = response.rows;
    });
    this.getDetail();
  },
  methods: {
    goBack(){
      this.$router.push({path:'/yinnong/cashExpenseList'})
    },
    onConfirmCashAt(data) {
      this.form.cashAt = this.format(data, 'yyyy-MM-dd');
      this.showCashAt = false;
    },
    onConfirmType(value){
      this.form.capitalExpenditureType = value.dictValue;
      this.capitalExpenditureType = value.dictLabel;
      this.showType = false;
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        bookId: null,
        deptId: null,
        bookName: null,
        cashAt: null,
        cashAmount: null,
        cashRemarks: null,
        capitalExpenditureType: null,
        cashierNo: null,
        cashierName: null,
        payeeName: null,
        payeePhone: null,
        approvalTemplateId: null,
        auditStatus: null,
        auditbatchNo: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null
      };
    },
    getDetail(){
      getCashExpense(this.$route.query.id).then(response => {
        this.form = response.data;
        this.capitalExpenditureType = this.selectDictLabel(this.capitalExpenditureTypeOptions, response.data.capitalExpenditureType);
        const template = this.templateList.find(item => item.id === response.data.approvalTemplateId);
        this.approvalTemplateName = template.name;
      });
    },
    onConfirmTemplate(data) {
      selectApprovalByTemplateId(data.id).then(res => {
        this.showTemplate = false;
        if (res.approvalDetails.length > 0) {
          this.approvalTemplateName = data.name
          this.form.approvalTemplateId = data.id
        } else {
          this.approvalTemplateName = null;
          this.form.approvalTemplateId = null;
          this.$notify({type: 'danger', message: '此流程无节点，无法选择！'});
        }
      });
    },
    goFlow(){
      this.$router.push({path: '/yinnong/cashExpenseProcess', query: { id: this.form.id, templateId: this.form.approvalTemplateId }});
    },
  }
}
</script>

<style scoped lang="scss">
.app-container {
  padding: 2% 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;
}

.submitButton {
  width: 80%;
  margin: 0 auto;
  background-color: #1D6FE9;
}
</style>