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

<template>
  <div class="app-container">
    <van-nav-bar left-arrow fixed placeholder @click-left="goBack">
      <template #title>
        <p style="font-weight: bold;">{{ navBarTitle }}</p>
      </template>
      <template #right>
        <van-icon name="../../../static/images/icon/icon_flow.png" size="20" @click="goFlow"/>
      </template>
    </van-nav-bar>

    <van-form @submit="submitForm" @failed="getError" :show-error-message="false" scroll-to-error validate-first>
      <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>

      <div style="padding: 16px 0;">
        <van-row >
          <van-col span="24" align="center">
            <van-button type="info" native-type="submit" class="submitButton">保<i style="margin-right: 1em;"></i>存</van-button>
          </van-col>
        </van-row>
      </div>
    </van-form>
  </div>
</template>

<script>

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

export default {
  name: "cashExpenseForm",
  data() {
    return {
      navBarTitle: '',
      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;
    });
    if (this.$route.query.id) {
      this.navBarTitle = '修改资金审批申请';
      this.getDetail();
    } else {
      this.navBarTitle = '添加资金审批申请';
    }
  },
  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: '此流程无节点，无法选择！'});
        }
      });
    },
    getError(e){
      this.$notify({ type: 'danger', message: e.errors[0].message });
    },
    submitForm() {
      if (this.form.id) {
        updateCashExpense(this.form).then(response => {
          if (response.code === 200) {
            this.$toast({
              icon: 'success',
              message: '保存成功',
              duration: '1000',
              onClose: () => {
                this.goBack();
              }
            });
          }
        });
      } else {
        addCashExpense(this.form).then(response => {
          if (response.code === 200) {
            this.$toast({
              icon: 'success',
              message: '保存成功',
              duration: "1000",
              onClose: () => {
                this.goBack();
              }
            });
          }
        });
      }
    },
    goFlow() {
      if (this.form.id) {   // 修改时
        this.$router.push({path: '/yinnong/cashExpenseProcess', query: { id: this.form.id, templateId: this.form.approvalTemplateId }});
      } else {              // 新增时
        if (this.form.approvalTemplateId) {
          this.$router.push({path: '/yinnong/cashExpenseProcess', query: { templateId: this.form.approvalTemplateId }});
        } else {
          this.$notify({type: 'danger', message: '无审批流程！'});
        }
      }
    },
  }
}
</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>