nsgk_mobile/src/views/yinnong/bankAgriculture/collectionAccount/collectionAdd.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" style="margin-bottom: 10px;">
      <van-field v-model="value" placeholder="粘贴信息，自动拆分收款方、收款账号" @input="changeInform" />
    </div>

    <van-form @submit="goAdd" @failed="getError" :show-error-message="false" scroll-to-error validate-first>
      <p class="main_title">基础信息</p>
      <div class="main_box">
        <van-field label="收款方" required :rules="[{ required: true , message:'请输入收款方' }]" v-model="form.payee" placeholder="请输入收款方" input-align="right" label-width="auto"/>
        <van-field label="收款账户" required :rules="[{ required: true , message:'请输入收款账户' }]" v-model="form.payeeAccount" placeholder="请输入收款账户" input-align="right" label-width="auto"/>
        <van-field
          readonly
          clickable
          label="所属银行"
          placeholder="请选择"
          v-model="bankType"
          @click="showBankType = true"
          input-align="right"
          right-icon="arrow-down"
          label-width="auto"
          required
          :rules="[{ required: true , message:'请选择所属银行' }]"
        />
        <van-popup v-model="showBankType" position="bottom">
          <van-picker
            show-toolbar
            :columns="bankTypeOptions"
            @confirm="onConfirmBankType"
            @cancel="showBankType = false"
          />
        </van-popup>
        <van-field
          readonly
          clickable
          label="开户银行"
          placeholder="请选择"
          @click="showBankDeposit = true"
          v-model="bankDeposit"
          input-align="right"
          right-icon="arrow-down"
          label-width="auto"
          required
          :rules="[{ required: true , message:'请选择开户银行' }]"
        />
        <van-popup v-model="showBankDeposit" position="bottom" @close="bankDepositValue = ''" @closed="bankDepositSearch">
          <van-search v-model="bankDepositValue" show-action placeholder="请输入开户银行名称搜索" >
            <template #action>
              <div @click="bankDepositSearch">搜索</div>
            </template>
          </van-search>
          <van-picker
            show-toolbar
            :columns="bankDepositOptions"
            @confirm="onConfirmBankDeposit"
            @cancel="showBankDeposit = false"
          />
        </van-popup>
       <van-field label="联行号" readonly required :rules="[{ required: true , message:'请输入联行号' }]" v-model="form.payeePaymentLines"  input-align="right" label-width="auto"/>
       <van-field label="上级清算行" v-model="form.clearingBank"  input-align="right" label-width="auto" disabled/>
      </div>

      <div class="main_box" style="margin-top: 10px;">
        <van-field label="备注" v-model="form.remark" type="textarea" placeholder="请输入备注" input-align="right" rows="3" label-width="auto"/>
      </div>

      <div class="main_box" style="margin-top: 10px;">
        <van-cell title="账户类型" required>
          <template #right-icon>
            <van-radio-group direction="horizontal" required :rules="[{ required: true , message:'请选择账户类型' }]" v-model="form.accountType">
              <van-radio name="1">公户</van-radio>
              <van-radio name="2">私户</van-radio>
            </van-radio-group>
          </template>
        </van-cell>
        <van-field
          readonly
          clickable
          label="收款人类型"
          placeholder="请选择"
          v-model="payeeType"
          @click="showPayeeType = true"
          input-align="right"
          right-icon="arrow-down"
          label-width="auto"
          required
          :rules="[{ required: true , message:'请选择收款人类型' }]"
        />
        <van-popup v-model="showPayeeType" position="bottom">
          <van-picker
            show-toolbar
            :columns="payeeTypeOptions"
            @confirm="onConfirmPayeeType"
            @cancel="showPayeeType = false"
          />
        </van-popup>
        <van-cell title="数据状态" required>
          <template #right-icon>
            <van-radio-group direction="horizontal" required :rules="[{ required: true , message:'请选择数据状态' }]" v-model="form.status">
              <van-radio name="0">正常</van-radio>
              <van-radio name="1">停用</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 { addPayee,listDeposit } from "@/api/onlineHome/bankAgriculture/collectionAccount";
  import { isBankCard} from "@/utils/utils";
  export default {
    name: "collectionAdd",
    data() {
      return {
        showBankType:false,
        showBankDeposit:false,
        showPayeeType:false,
        depositListShow:false,
        bankDepositValue:'',
        form:{
          accountType:'1',
          status:'0'
        },

        bankType:'',
        payeeType:'',
        bankDeposit:'',
        bankTypeOptions:[],
        statusOptions:[],
        accountTypeOptions:[],
        payeeTypeOptions:[],
        bankDepositOptions:[],
        value:''
      };
    },
    created() {
      this.getDictionaries();
    },
    methods: {
      getDictionaries(){
        this.houseGetDicts("bank_type_all").then((res) => {
          for(var i = 0 ; i < res.data.length ; i++){
            this.bankTypeOptions.push({text:res.data[i].dictLabel,value:res.data[i].dictValue});
          }
        });
        this.houseGetDicts("sys_normal_disable").then((res) => {
          console.log(res)
          for(var i = 0 ; i < res.data.length ; i++){
            this.statusOptions.push({text:res.data[i].dictLabel,value:res.data[i].dictValue});
          }
        });
        this.houseGetDicts("bank_account_type").then((res) => {
          console.log(res)
          for(var i = 0 ; i < res.data.length ; i++){
            this.accountTypeOptions.push({text:res.data[i].dictLabel,value:res.data[i].dictValue});
          }
        });
        this.houseGetDicts("payee_type").then((res) => {
          for(var i = 0 ; i < res.data.length ; i++){
            this.payeeTypeOptions.push({text:res.data[i].dictLabel,value:res.data[i].dictValue});
          }
        });

      },
      changeInform(val){
        console.log(val)
        var that = this;
        var str = val;
        var numArr = str.match(/\d+/g)
        var nameArr = str.match(/[\u4e00-\u9fa5]/g)
        if(nameArr != null){
          nameArr = nameArr.join("")
        }
        if (numArr) {
          numArr.map(rr=>{
            if (rr.length>=16) {
              const carId = isBankCard(rr);
              if (carId) {
                that.form.payee = nameArr;
                that.form.payeeAccount = rr
              }
            }
          })
        }
      },
      getError(e){
        this.$notify({ type: 'danger', message: e.errors[0].message });
      },
      onConfirmBankType(data){
        this.bankType = data.text;
        this.form.bankType = data.value;
        this.bankDeposit = ""
        this.form.payeePaymentLines = ""
        this.showBankType = false;
        let queryParams={
          "bankType":this.form.bankType,
          "bankDeposit":this.bankDepositValue,
          "status": "0",
        }
        listDeposit(queryParams).then(response => {
          this.bankDepositOptions = []
          for(var i = 0 ; i < response.rows.length ; i++){
            this.bankDepositOptions.push({"text":response.rows[i].bankDeposit,"value":response.rows[i].id,
              "payeePaymentLines":response.rows[i].payeePaymentLines,"institutionNumber":response.rows[i].institutionNumber,"clearingBank":response.rows[i].clearingBank});
          }
        });
      },
      bankDepositSearch(data){
        this.bankDepositOptions = [];
        let queryParams={
          "bankType":this.form.bankType,
          "bankDeposit":this.bankDepositValue,
          "status": "0",
        }
        listDeposit(queryParams).then(response => {
          this.bankDepositOptions = []
          for(var i = 0 ; i < response.rows.length ; i++){
            this.bankDepositOptions.push({"text":response.rows[i].bankDeposit,"value":response.rows[i].id,
              "payeePaymentLines":response.rows[i].payeePaymentLines,"institutionNumber":response.rows[i].institutionNumber,"clearingBank":response.rows[i].clearingBank});
          }
        });
      },
      onConfirmBankDeposit(data){
        this.bankDeposit = data.text
        this.form.bankDeposit = data.text
        this.form.payeePaymentLines = data.payeePaymentLines
        this.form.clearingBank = data.clearingBank
        this.form.alternateField10 = data.institutionNumber
        this.showBankDeposit = false;
        this.depositListShow = false;
      },
      onConfirmPayeeType(data){
        this.payeeType = data.text;
        this.form.payeeType = data.value;
        this.showPayeeType = false;
      },
      goAdd(){
        addPayee(this.form).then(response => {
          this.$toast.success('新增成功');
          setTimeout(function(){
            history.go(-1)
          },2000)
        });
      },
      goBack(){
        window.history.go(-1)
      },
      selectDeposit(val){
        //depositListShow
        if (val == '' || this.bankDeposit == ''){return;}
        this.depositListShow = true;

        let queryParams={
          "bankType":this.form.bankType,
          "status": "0",
          "bankDeposit":this.bankDeposit,
          "pageNum":1,
          "pageSize":10
        }

        listDeposit(queryParams).then(response => {
          this.bankDepositOptions = []
          for(var i = 0 ; i < response.rows.length ; i++){
            this.bankDepositOptions.push(
              {
                "text":response.rows[i].bankDeposit,
                "value":response.rows[i].id,
                "payeePaymentLines":response.rows[i].payeePaymentLines,
                "institutionNumber":response.rows[i].institutionNumber,"clearingBank":response.rows[i].clearingBank
              }
            );
          }
        });

      }
    },
  }
</script>

<style scoped lang="scss">
  .deposit_list{
    height: 18vh;
    width: 96%;
    position: absolute;
    background: #fff;
    box-shadow: 0 10PX 10PX rgba(0, 0, 0, .5);
    left: 2%;
    z-index: 9;
    border-radius: 0 0 5PX 5PX;
    overflow-y: scroll;
  }
  .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>