优化

src/views/yinnong/bankAgriculture/paymentAccount/paymentAccountList.vue

@@ -31,10 +31,9 @@
               <p><span><i>￥</i>{{item.balance}}</span></p>
             </template>
             <template #default>
-              <p>{{item.bankAccountNumber == null || item.bankAccountNumber == '' ? '&nbsp;':item.bankAccountNumber}}</p>
-              <p style="font-size: 12px;font-weight: normal;color: #878787;">
-                {{item.accountName}}
-                <i style="margin-right: 1rem;"></i>
+              <p style="display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;word-break: break-all;overflow: hidden;">{{item.bankAccountNumber == null || item.bankAccountNumber == '' ? '&nbsp;':item.bankAccountNumber}}</p>
+              <p style="font-size: 12px;font-weight: normal;color: #878787;display: flex;justify-content: space-between;">
+                <span style="width: 60%;text-align:left;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;word-break: break-all;overflow: hidden;">{{item.accountName}}</span>
                 <span :style="{color: item.status == '否' ? '#1D6FE9' : '#FF4646'}">{{item.status == '否' ? '未' : '已'}}停用</span>
               </p>
             </template>

src/views/yinnong/bankAgriculture/paymentApproval/collectionApprovalAdd.vue

@@ -0,0 +1,276 @@
+<template>
+  <div class="app-container">
+    <van-nav-bar
+      left-arrow
+      fixed
+      placeholder
+      @click-left="goBack"
+    >
+      <template #title>
+        <p style="font-weight: bold;">添加收款账户信息</p>
+      </template>
+    </van-nav-bar>
+
+    <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="isPeersRead ? 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">
+          <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"/>
+      </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"
+          input-align="right"
+          right-icon="arrow-down"
+          label-width="auto"
+          required
+          :rules="[{ required: true , message:'请选择收款人类型' }]"
+        />
+<!--        @click="showPayeeType = true"-->
+        <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";
+  export default {
+    name: "collectionAdd",
+    data() {
+      return {
+        id:'',
+        isPeersRead:true,
+        showBankType:false,
+        showBankDeposit:false,
+        showPayeeType:false,
+        form:{
+          accountType:'1',
+          status:'0',
+          payeeType:'1'
+        },
+        bankType:'',
+        payeeType:'收款方',
+        bankDeposit:'',
+        bankTypeOptions:[],
+        statusOptions:[],
+        accountTypeOptions:[],
+        payeeTypeOptions:[],
+        bankDepositOptions:[],
+      };
+    },
+    created() {
+      this.getDictionaries();
+      const accountType = this.$route.params.accountType;
+      const isPeers = this.$route.params.isPeers;
+      const bankType = this.$route.params.bankType;
+      this.id = this.$route.params.id;
+      console.log(isPeers)
+      if (accountType){this.form.accountType = accountType;}
+      if (isPeers){
+        this.form.isPeers = isPeers;
+        if (isPeers == 'Y'){
+          this.isPeersRead = false;
+          this.getDicts("bank_type").then((res) => {
+            let bankText = this.selectDictLabel(res.data,bankType);
+            let data = {
+              text : bankText,
+              value : bankType
+            }
+            this.onConfirmBankType(data);
+          });
+        }
+      }
+    },
+    methods: {
+      getDictionaries(){
+        this.houseGetDicts("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.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});
+          }
+        });
+      },
+      getError(e){
+        this.$notify({ type: 'danger', message: e.errors[0].message });
+      },
+      onConfirmBankType(data){
+        console.log(data)
+        this.bankType = data.text;
+        this.form.bankType = data.value;
+        this.bankDeposit = ""
+        this.form.payeePaymentLines = ""
+        this.showBankType = false;
+        let queryParams={
+          "bankType":this.form.bankType,
+          "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});
+          }
+        });
+      },
+      onConfirmBankDeposit(data){
+        this.bankDeposit = data.text
+        this.form.bankDeposit = data.text
+        this.form.payeePaymentLines = data.payeePaymentLines
+        this.form.alternateField10 = data.institutionNumber
+        this.showBankDeposit = false;
+      },
+      onConfirmPayeeType(data){
+        this.payeeType = data.text;
+        this.form.payeeType = data.value;
+        this.showPayeeType = false;
+      },
+      goAdd(){
+        var that = this;
+        addPayee(this.form).then(response => {
+          this.$toast.success('新增成功');
+          setTimeout(function(){
+            that.form.bankTypeText = that.bankType;
+            that.$router.push({name: 'approvalModify', params: { payeeForm: that.form , id : that.id}});
+            // 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>