nsgk_mobile/src/views/onlineHome/bankAgriculture/paymentAccount/paymentAccountAdd.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>
    <van-form @submit="goModify" @failed="getError" :show-error-message="false" scroll-to-error validate-first>
      <p class="main_title">基础信息</p>
      <div class="main_box">
        <van-field
          readonly
          clickable
          label="账户类型"
          placeholder="请选择"
          v-model="accountType"
          @click="showAccountType = true"
          input-align="right"
          right-icon="arrow-down"
          label-width="auto"
        />
        <van-popup v-model="showAccountType" position="bottom">
          <van-picker
            show-toolbar
            :columns="typeDictionaries"
            @confirm="onConfirmType"
            @cancel="showAccountType = false"
          />
        </van-popup>
        <van-field label="账户名称" required :rules="[{ required: true , message:'请输入账户名称' }]" v-model="form.accountName" placeholder="请输入账户名称" input-align="right" label-width="auto"/>
        <van-field
          readonly
          clickable
          label="关联科目"
          placeholder="请选择"
          v-model="subjectDeatil"
          @click="showSubjectId = true"
          input-align="right"
          right-icon="arrow-down"
          label-width="auto"
          required
          :rules="[{ required: true , message:'请选择关联科目' }]"
        />
        <van-popup v-model="showSubjectId" position="bottom">
          <van-picker
            show-toolbar
            :columns="subjectDictionaries"
            @confirm="onConfirmSubject"
            @cancel="showSubjectId = false"
          />
        </van-popup>
        <van-field label="银行账户" v-model="form.bankAccountNumber" placeholder="请输入银行账户" input-align="right" label-width="auto"/>
        <van-field label="开户银行" v-model="form.bankName" placeholder="请输入开户银行" input-align="right" label-width="auto"/>
        <van-field label="联行号" v-model="form.paymentLines" placeholder="请输入联行号" input-align="right" label-width="auto"/>
        <van-field label="操作员代码" v-model="form.operatorCode" placeholder="请输入操作员代码" input-align="right" label-width="auto"/>
        <van-field label="企业编码" v-model="form.enterpriseCode" placeholder="请输入企业编码" input-align="right" label-width="auto"/>
        <van-field label="开户银行地址" v-model="form.site" placeholder="请输入开户银行地址" input-align="right" label-width="auto"/>
        <van-field label="账户密码" v-model="form.accountPassword" placeholder="请输入账户密码" input-align="right" label-width="auto"/>
        <van-field label="初始余额" v-model="form.initialBalance" required :rules="[{ required: true , message:'请输入初始余额' }]" placeholder="请输入初始余额" input-align="right" label-width="auto"/>
        <van-cell title="是否停用">
          <template #right-icon>
            <van-radio-group direction="horizontal" v-model="form.status">
              <van-radio name="Y">是</van-radio>
              <van-radio name="N">否</van-radio>
            </van-radio-group>
          </template>
        </van-cell>
      </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 class="clear"></div>
      </div>
    </van-form>
  </div>
</template>

<script>
  import { getSubjectDetail , addAccount } from "@/api/onlineHome/bankAgriculture/paymentAccount";
  export default {
    name: "paymentAccountAdd",
    data() {
      return {
        showAccountType:false,
        showSubjectId:false,

        minDate: new Date(),
        maxDate: new Date(2025, 10, 1),
        currentDate: new Date(),
        jgList:{},

        accountType:'',
        jglx:'',
        wfydlx:'',

        wfydlxDictionaries:[],
        jglxDictionaries:[],
        subjectDictionaries:[],
        typeDictionaries:[],
        subjectDeatil:'',

        form:{}
      };
    },
    created() {
      this.getDetail();
    },
    methods: {
      getDetail(){
        // 账户类型
        this.houseGetDicts("account_type_cashier").then((res) => {
          for (var i = 0; i < res.data.length; i++) {
            this.typeDictionaries.push({text: res.data[i].dictLabel, value: res.data[i].dictValue});
          }
        });
        getSubjectDetail().then((res) => {
          for (var i = 0; i < res.rows.length; i++) {
            this.subjectDictionaries.push({text: res.rows[i].subjectNameAll, value: res.rows[i].subjectId});
          }
        });
      },
      getError(e){
        console.log(e)
        this.$notify({ type: 'danger', message: e.errors[0].message });
      },
      onConfirmSubject(data){
        this.subjectDeatil = data.text;
        this.form.subjectId = data.value;
        this.form.subjectNameAll = data.text;
        this.showSubjectId = false;
      },
      onConfirmType(data){
        this.accountType = data.text;
        this.form.accountType = data.value;
        this.showAccountType = false;
      },
      goModify(){
        console.log(this.form)
        this.form.balance = this.form.initialBalance;
        addAccount(this.form).then((response) => {
          this.$toast.success('添加成功');
          setTimeout(function(){
            history.go(-1)
          },2000)
        });
      },
      goBack(){
        window.history.go(-1)
      }
    },
  }
</script>

<style scoped lang="scss">
  .app-container {
    padding: 2% 0;
  }
  .main_title{
    font-size: 0.4rem;
    color: #1D6FE9;
    margin: 0.2rem 6%;
    margin-top: 0;
    position: relative;
  }
  .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;
  }

  .addFamily{
    position: absolute;
    top: -2px;
    right: 0;
    border-radius: 50%;
  }
</style>