nsgk_mobile/src/views/yinnong/bankAgriculture/cashExpense/cashExpenseApproval.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 class="main_box examine_box" v-if="this.$route.query.type === 'todo'">
      <van-row type="flex" justify="space-between" align="center">
        <van-col span="5">审批<br/>意见</van-col>
        <van-col span="19">
          <van-radio-group v-model="pass" direction="horizontal">
            <van-radio name="true">同意</van-radio>
            <van-radio name="false">驳回</van-radio>
          </van-radio-group>
          <van-field v-model="comment" type="textarea" placeholder="请输入审批意见" rows="2" />
        </van-col>
      </van-row>
    </div>

    <div style="margin: 16px 2%;" v-if="this.$route.query.type === 'todo'">
      <van-row>
        <van-col span="24" align="center">
          <van-button type="info" native-type="submit" @click="submitApproval" class="submitButton">保<i style="margin-right: 1em;"></i>存</van-button>
        </van-col>
      </van-row>
      <div class="clear"></div>
    </div>
  </div>
</template>

<script>

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

export default {
  name: "cashExpenseApproval",
  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:[],

      // 审核意见默认值
      pass: "true",
      comment: "同意",
    };
  },
  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();
  },
  watch: {
    pass: function (val) {
      this.comment = val === "true" ? "同意" : "驳回";
    },
  },
  methods: {
    goBack(){
      this.$router.back(-1);
    },
    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: '此流程无节点，无法选择！'});
        }
      });
    },
    submitApproval() {
      approval({
        taskId: this.$route.query.taskId,
        auditbatchNo: this.$route.query.auditbatchNo,
        pass: this.pass,
        remark: this.comment,
        deptId: this.form.deptId
      }).then((response) => {
        if (response.code === 200) {
          this.$toast.success("保存成功");
          setTimeout(function () {
            history.go(-1)
          }, 500);
        } else {
          this.$toast.success("保存失败");
        }
      });
    },
    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;
}

.examine_box {
  background-color: #1D6FE9 !important;
  padding: 0.18rem !important;
  padding-left: 0 !important;
  border-radius: 0.15rem !important;
  margin-top: 0.3rem !important;
}

.examine_box .van-col:first-child {
  color: #FFF !important;
  font-size: 0.45rem !important;
  text-align: center !important;
}

.examine_box .van-col:last-child {
  background-color: #FFF !important;
  border-radius: 0.15rem !important;
  overflow: hidden !important;

  .van-radio-group--horizontal {
    padding: 0.2rem 0;
    border-bottom: 1px solid #eee;
  }
}

/deep/ .van-radio--horizontal {
  margin-left: 20px;
  margin-right: 0;
}

.submitButton {
  width: 96%;
  margin: 0 auto;
}
</style>