nsgk_mobile/src/views/onlineHome/bankAgriculture/paymentAccount/paymentAccountModify.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"
          required
        />
        <van-popup v-model="showAccountType" position="bottom">
          <van-picker
            show-toolbar
            :columns="typeDictionaries"
            @confirm="onConfirmType"
            @cancel="showAccountType = false"
          />
        </van-popup>
        <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="请选择"
          v-model="villageAccountType"
          @click="showVillageAccountType = true"
          input-align="right"
          right-icon="arrow-down"
          label-width="auto"
          required
          :rules="[{ required: true , message:'请选择账户分类' }]"
          v-if="accountType=='银行存款'&&(form.bankType==1||form.bankType==2)"
        />
        <van-popup v-model="showVillageAccountType" position="bottom">
          <van-picker
            show-toolbar
            :columns="villageAccountTypeOptions"
            @confirm="onConfirmVillageAccountType"
            @cancel="showVillageAccountType = false"
          />
        </van-popup>
        <van-field
          readonly
          clickable
          label="所属镇账户"
          placeholder="请选择"
          v-model="taccountId"
          @click="showTaccountId = true"
          input-align="right"
          right-icon="arrow-down"
          label-width="auto"
          required
          :rules="[{ required: true , message:'请选择所属镇账户' }]"
          v-if="accountType=='银行存款'&&(form.bankType=='1'||form.bankType=='2')&&form.villageAccountType!=1"
        />
        <van-popup v-model="showTaccountId" position="bottom">
          <van-picker
            show-toolbar
            :columns="taccountIdOptions"
            @confirm="onConfirmTaccountId"
            @cancel="showTaccountId = false"
          />
        </van-popup>
        <van-field label="客户编号" v-if="accountType=='银行存款'&&(form.bankType=='1'||form.bankType=='2')" required :rules="[{ required: true , message:'请输入客户编号' }]" v-model="form.cifNo" placeholder="请输入客户编号" input-align="right" label-width="auto"/>
        <van-field label="账簿号" v-if="accountType=='银行存款'&&villageAccountType=='多级账簿'" required :rules="[{ required: true , message:'请输入账簿号' }]" v-model="form.accountNo" placeholder="请输入账簿号" input-align="right" label-width="auto"/>
        <van-field label="管控类型" v-if="accountType=='银行存款'&&form.bankType==2&&villageAccountType=='多级账簿'">
          <template #right-icon>
            <van-radio-group direction="horizontal" v-model="form.managementControlType" @change="onConfirmManagementControlType" required :rules="[{ required: true , message:'请选择管控类型' }]">
              <van-radio name="1">账簿余额</van-radio>
              <van-radio name="2">中心账簿</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field
          readonly
          clickable
          label="中心账套"
          placeholder="请选择"
          v-model="centralBookId"
          @click="showCentralBookId = true"
          input-align="right"
          right-icon="arrow-down"
          label-width="auto"
          required
          :rules="[{ required: true , message:'请选择开户银行' }]"
          v-if="accountType=='银行存款'&&form.managementControlType=='2'"
        />
        <van-popup v-model="showCentralBookId" position="bottom">
          <van-picker
            show-toolbar
            :columns="centralBookIdList"
            @confirm="onConfirmCentralBookId"
            @cancel="showCentralBookId = false"
          />
        </van-popup>
        <van-field
          readonly
          clickable
          label="会计科目"
          placeholder="请选择"
          v-model="centralSubjectId"
          @click="showCentralSubjectId = true"
          input-align="right"
          right-icon="arrow-down"
          label-width="auto"
          required
          :rules="[{ required: true , message:'请选择会计科目' }]"
          v-if="accountType=='银行存款'&&form.managementControlType=='2'"
        />
        <van-popup v-model="showCentralSubjectId" position="bottom">
          <van-picker
            show-toolbar
            :columns="centralSubjectIdList"
            @confirm="onConfirmCentralSubjectId"
            @cancel="showCentralSubjectId = false"
          />
        </van-popup>
        <van-field label="账户名称" required :rules="[{ required: true , message:'请输入账户名称' }]" v-model="form.accountName" placeholder="请输入账户名称" input-align="right" label-width="auto"/>
        <van-field label="银行账户" v-if="accountType=='银行存款'" :rules="[{ required: true , message:'请输入银行账户' }]"  v-model="form.bankAccountNumber" placeholder="请输入银行账户" input-align="right" label-width="auto" required/>
        <van-field
          readonly
          clickable
          label="开户银行"
          placeholder="请选择"
          v-model="form.bankName"
          @click="showBankDeposit = true"
          input-align="right"
          right-icon="arrow-down"
          label-width="auto"
          required
          :rules="[{ required: true , message:'请选择开户银行' }]"
          v-if="accountType=='银行存款'"
        />
        <van-popup v-model="showBankDeposit" position="bottom">
          <van-picker
            show-toolbar
            :columns="bankDepositList"
            @confirm="onConfirmBankDeposit"
            @cancel="showBankDeposit = false"
          />
        </van-popup>
        <van-field label="联行号" v-if="accountType=='银行存款'" :rules="[{ required: true , message:'请输入联行号' }]" v-model="form.paymentLines" placeholder="请输入联行号" input-align="right" label-width="auto" required/>
        <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-if="accountType=='银行存款'" :rules="[{ required: true , message:'请输入开户银行地址' }]" v-model="form.site" placeholder="请输入开户银行地址" input-align="right" label-width="auto" required/>
        <van-field label="支付口令" v-if="accountType=='银行存款'" :rules="[{ required: true , message:'请输入支付口令' }]" v-model="form.accountPassword" placeholder="请输入支付口令" input-align="right" label-width="auto" required/>
        <van-field label="账户类型" v-if="accountType=='银行存款'" required :rules="[{ required: true , message:'请选择账户类型' }]">
          <template #right-icon>
            <van-radio-group direction="horizontal" v-model="form.bankAccountType">
              <van-radio name="1">公户</van-radio>
              <van-radio name="2">私户</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field label="初始余额" v-model="form.initialBalance" required :rules="[{ required: true , message:'请输入初始余额' }]" placeholder="请输入初始余额" input-align="right" label-width="auto"/>
        <van-field label="内部账号" v-if="accountType=='银行存款'&&form.bankType=='3'" v-model="form.alternateField1" required :rules="[{ required: true , message:'请输入内部账号' }]" placeholder="请输入内部账号" input-align="right" label-width="auto"/>
        <van-field label="内部户名" v-if="accountType=='银行存款'&&form.bankType=='3'" v-model="form.alternateField2" required :rules="[{ required: true , message:'请输入内部户名' }]" placeholder="请输入内部户名" input-align="right" label-width="auto"/>
        <van-field label="账簿号" v-if="accountType=='银行存款'&&form.bankType=='3'" v-model="form.alternateField3" required :rules="[{ required: true , message:'请输入账簿号' }]" placeholder="请输入账簿号" input-align="right" label-width="auto"/>
        <van-field label="手机号码" v-if="accountType=='银行存款'&&form.bankType=='4'" v-model="form.alternateField1" required :rules="[{ required: true , message:'请输入手机号' }]" placeholder="请输入手机号" input-align="right" label-width="auto"/>
        <van-field label="是否停用" required :rules="[{ required: true , message:'请选择是否停用' }]">
          <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-field>
      </div>
      <p class="main_title" v-if="villageAccountType=='多级账簿'">账簿信息</p>
      <div class="main_box" v-if="villageAccountType=='多级账簿'">
        <van-field label="账簿是否限额" disabled>
          <template #right-icon>
            <van-radio-group direction="horizontal" v-model="form.alternateField1" :disabled="true">
              <van-radio name="Y">是</van-radio>
              <van-radio name="N">否</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field label="单笔交易限额" v-model="form.alternateField2" placeholder="0.00" input-align="right" label-width="auto" :disabled="true"/>
        <van-field label="账簿是否透支" disabled>
          <template #right-icon>
            <van-radio-group direction="horizontal" v-model="form.alternateField3" :disabled="true">
              <van-radio name="Y">是</van-radio>
              <van-radio name="N">否</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field label="透支类型" v-model="form.alternateField4" placeholder="无" input-align="right" label-width="auto" :disabled="true"/>
        <van-field label="透支额度（元）" v-model="form.alternateField5" placeholder="0.00" input-align="right" label-width="auto" :disabled="true"/>
      </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 { getAccount , getSubjectDetail , updateAccount,listDeposit,queryTaccount,getCentralBooks  } from "@/api/onlineHome/bankAgriculture/paymentAccount";
  import {getCentralSubjects} from "../../../../api/onlineHome/bankAgriculture/paymentAccount";
  export default {
    name: "paymentAccountModify",
    data() {
      return {
        showCentralSubjectId:false,
        showCentralBookId:false,
        showManagementControlType:false,
        showTaccountId:false,
        showVillageAccountType:false,
        villageAccountType:null,
        showAccountType:false,
        showSubjectId:false,
        showBankType:false,
        minDate: new Date(),
        showBankDeposit:false,
        maxDate: new Date(2025, 10, 1),
        currentDate: new Date(),
        jgList:{},
        managementControlType:'',
        taccountId:'',
        accountType:'',
        bankType:'',
        centralBookId:'',
        centralSubjectId:'',
        jglx:'',
        wfydlx:'',
        wfydlxDictionaries:[],
        jglxDictionaries:[],
        subjectDictionaries:[],
        typeDictionaries:[],
        villageAccountTypeOptions:[],
        taccountIdOptions:[],
        centralBookIdList:[],
        centralSubjectIdList:[],
        // 管控类型 == 中心账套时选择中心账套
        centralBooks: [],
        // 管控类型字典
        managementControlTypeOptions: [],
        bankDepositList:[],
        // 所属银行字典
        bankTypeOptions: [],
        subjectDeatil:'',
        bankDepositQueryParams: {
          pageNum: 1,
          pageSize: 10,
          bookId: null,
          deptId: null,
          payee: null,
          payeeAccount: null,
          bankDeposit: null,
          payeeType:null,
          bankType:null,
          status: "0",
        },
        form:{
          accountType: "102",
          bankUseType:"1",
          bankAccountType: "1",
          villageAccountType: "2",
          status: "N",
        }
      };
    },
    created() {
      this.getTaList();
      this.getDetail();
    },
    methods: {
      getDetail(){
        getAccount(this.$route.query.id).then((response) => {
          // 账户类型
          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});
            }
            this.accountType = this.selectDictLabel(res.data, response.data.accountType);
          });
          this.getDicts("bank_type").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.bankType = this.selectDictLabel(res.data, response.data.bankType);
            }
          });
          this.getDicts("village_account_type").then(res => {
            for (var i = 0; i < res.data.length; i++) {
              this.villageAccountTypeOptions.push({text: res.data[i].dictLabel, value: res.data[i].dictValue});
              this.villageAccountType = this.selectDictLabel(res.data, response.data.villageAccountType);
            }
          });
          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});
            }
            this.subjectDeatil = this.selectSubject(res.rows , response.data.subjectId);
          });

          queryTaccount({
            bankType:response.data.bankType
          }).then(res => {
            this.taccountIdOptions = res.rows;
            for (var i = 0; i < res.rows.length; i++) {
              this.$set(this.taccountIdOptions[i], "text",res.rows[i].payee);
              this.$set(this.taccountIdOptions[i], "value",res.rows[i].id);
              if(response.data.taccountId==res.rows[i].id){
                this.taccountId=  res.rows[i].payee
              }
            }
          });
          if(response.data.centralBookId!=null&&response.data.centralBookId!=""&&response.data.managementControlType=="2"){
            getCentralBooks({yinnongTaccountId: response.data.taccountId}).then((res) => {
              this.centralBookIdList = res.data;
              for (var i = 0; i < res.data.length; i++) {
                this.$set(this.centralBookIdList[i], "text",res.data[i].bookName);
                this.$set(this.centralBookIdList[i], "value",res.data[i].id);
              }
              this.centralBookId = this.selectSubject(res.data , response.data.centralBookId);
            });
            if(response.data.centralSubjectId!=null&&response.data.centralSubjectId!=""){
              getCentralSubjects({bookId: response.data.centralBookId}).then((res) => {
                this.centralSubjectIdList = res.data;
                for (var i = 0; i < res.data.length; i++) {
                  this.$set(this.centralSubjectIdList[i], "text",res.data[i].subjectName);
                  this.$set(this.centralSubjectIdList[i], "value",res.data[i].subjectId);
                }
                this.centralSubjectId = this.selectSubject(res.data , response.data.centralSubjectId);
              })
            }
            if(response.data.bankDeposit!=null&&response.data.bankDeposit!=""){
              this.bankDepositQueryParams.bankType = response.data.bankType;
              listDeposit(this.bankDepositQueryParams).then(response => {
                this.bankDepositList = response.rows;
                for (var i = 0; i < response.rows.length; i++) {
                  this.$set(this.bankDepositList[i], "text",response.rows[i].bankDeposit);
                  this.$set(this.bankDepositList[i], "value",response.rows[i].bankDeposit);
                }
                this.bankDeposit = this.selectSubject(response.rows , response.data.bankDeposit);
              })
            }
          }
          this.form = response.data;
        });
      },
      getTaList(){
        let params= {
          // 分页
          pageNum: 1,
          pageSize: 100,
          bankType:this.form.bankType,
        }
        // this.getCentralBookOptions();
        queryTaccount(params).then(res => {
          this.taccountIdOptions = res.rows;
          for (var i = 0; i < res.rows.length; i++) {
            this.$set(this.taccountIdOptions[i], "text",res.rows[i].payee);
            this.$set(this.taccountIdOptions[i], "value",res.rows[i].id);
          }
        });
      },
      getError(e){
        console.log(e)
        this.$notify({ type: 'danger', message: e.errors[0].message });
      },
      selectSubject(datas, value) {
        var actions = [];
        Object.keys(datas).some((key) => {
          if (datas[key].subjectId == ('' + value)) {
            actions.push(datas[key].subjectNameAll);
            return true;
          }
        })
        return actions.join('');
      },
      onConfirmCentralBookId(val){
        this.showCentralBookId = false
        this.$set(this.form, "centralBookId",val.value);
        this.centralBookId = val.text
        getCentralSubjects({bookId: val.id}).then((res) => {
          this.centralSubjectIdList = res.data;
          for (var i = 0; i < res.data.length; i++) {
            this.$set(this.centralSubjectIdList[i], "text",res.data[i].subjectName);
            this.$set(this.centralSubjectIdList[i], "value",res.data[i].subjectId);
          }
        })
      },
      onConfirmCentralSubjectId(val){
        this.showCentralSubjectId = false
        this.$set(this.form, "centralSubjectId",val.value);
        this.centralSubjectId = val.text
      },
      onConfirmManagementControlType(val){
        if(val==2){
          getCentralBooks({yinnongTaccountId: this.form.taccountId}).then((res) => {
            this.centralBookIdList = res.data;
            for (var i = 0; i < res.data.length; i++) {
              this.$set(this.centralBookIdList[i], "text",res.data[i].bookName);
              this.$set(this.centralBookIdList[i], "value",res.data[i].id);
            }
          });
        }
      },
      onConfirmBankDeposit(val){
        this.showBankDeposit = false
        this.$set(this.form, "bankName", val.bankDeposit);
        this.$set(this.form, "paymentLines", val.payeePaymentLines);
        this.$set(this.form, "alternateField10", val.institutionNumber);
      },
      onConfirmTaccountId(val){
        this.showTaccountId = false
        this.taccountId = val.text
        this.$set(this.form, "taccountId", val.value);
        this.$set(this.form, "cifNo", val.cifNo);
        this.$set(this.form, "accountName", val.payee);
        this.$set(this.form, "managementControlType", val.managementControlType);
        this.$set(this.form, "accountPassword", val.accountPassword);
        this.$set(this.form, "centralBookId", val.centralBookId);
        this.taccountIdOptions.map(res => {
          if(res.id==val.value){
            if(this.form.villageAccountType === '3'){
              this.$set(this.form, "bankAccountNumber", res.payeeAccount);
            }
            //this.form.bankName = res.bankDeposit;
            this.$set(this.form, "bankName", res.bankDeposit);
            this.$set(this.form, "paymentLines", res.payeePaymentLines);
          }
        })
      },
      onConfirmBankType(val){
        this.showBankType = false
        this.bankType = val.text
        this.$set(this.form, "bankType", val.value);
        this.getTaList();
        this.$set(this.form, "bankName", '');
        this.$set(this.form, "paymentLines", '');
        this.bankDepositQueryParams.bankType = val.value;
        listDeposit(this.bankDepositQueryParams).then(response => {
          this.bankDepositList = response.rows;
          for (var i = 0; i < response.rows.length; i++) {
            this.$set(this.bankDepositList[i], "text",response.rows[i].bankDeposit);
            this.$set(this.bankDepositList[i], "value",response.rows[i].bankDeposit);
          }
        })
      },
      onConfirmVillageAccountType(val){
        this.showVillageAccountType = false
        this.villageAccountType = val.text
        this.$set(this.form, "villageAccountType", val.value);
      },
      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;
        updateAccount(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>