TransOrder.vue

<template>
    <div class="eibs-tab">
        <c-col :span="12" style="padding-right: 20px;">
            <c-col :span="24">
                <el-form-item label="付款人" prop="transOrderVo.kfr">
                    <c-input v-model="model.transOrderVo.kfr" maxlength="34" placeholder=""></c-input>
                </el-form-item>
            </c-col>
            <c-col :span="24">
                <el-form-item label="付款账号" prop="transOrderVo.fkzh">
                    <c-input v-model="model.transOrderVo.fkzh" disabled maxlength="34" placeholder=""></c-input>
                </el-form-item>
            </c-col>
            <c-col :span="24">
                <el-form-item label="付款行行名称" prop="transOrderVo.fkhnam">
                    <c-input v-model="model.transOrderVo.fkhnam" disabled maxlength="34" placeholder=""></c-input>
                </el-form-item>
            </c-col>
            <c-col :span="24">
                <el-form-item label="付款行行号" prop="transOrderVo.fkhnum">
                    <c-input v-model="model.transOrderVo.fkhnum" disabled maxlength="34" placeholder=""></c-input>
                </el-form-item>
            </c-col>
            <c-col :span="24">
                <el-form-item label="起息日" prop="transOrderVo.qxr">
                    <c-date-picker type="date" v-model="model.transOrderVo.qxr" style="width: 100%" placeholder="请选择保函效期" ></c-date-picker>
                </el-form-item>
            </c-col>
        </c-col>
        <c-col :span="12" style="padding-left: 20px;">
            <c-col :span="24">
                <el-form-item label="收款人" prop="transOrderVo.skr">
                    <c-input v-model="model.transOrderVo.skr"  maxlength="34" placeholder=""></c-input>
                </el-form-item>
            </c-col>
            <c-col :span="24">
                <el-form-item label="收款人账号" prop="transOrderVo.skzh">
                    <c-input v-model="model.transOrderVo.skzh"  maxlength="34" placeholder=""></c-input>
                </el-form-item>
            </c-col>
            <c-col :span="24">
                <el-form-item label="收款行行名" prop="transOrderVo.skhnam">
                    <c-fullbox>
                        <c-input v-model="model.transOrderVo.skhnam"  maxlength="34" placeholder="请输入收款行行名"></c-input>
                        <template slot="footer">
                            <c-button type="primary" size="small"  icon="el-icon-search" style="margin-left:5px;padding: 0 12px;" @click="showBenCtyDialog()">
                            </c-button>
                        </template>
                    </c-fullbox>
                </el-form-item>
            </c-col>
            <c-col :span="24">
                <el-form-item label="收款行行号" prop="transOrderVo.skhnum">
                    <c-input v-model="model.transOrderVo.skhnum"  maxlength="34" placeholder=""></c-input>
                </el-form-item>
            </c-col>
            <c-col :span="24">
                <el-form-item label="备注" prop="transOrderVo.setrmk">
                    <c-input type="textarea" v-model="model.transOrderVo.setrmk"  maxlength="250" placeholder=""></c-input>
                </el-form-item>
            </c-col>
        </c-col>
        <!-- 弹窗 -->
		<el-dialog v-dialogDrag width="80%" v-if="dialogTableVisible" :visible.sync="dialogTableVisible" title="二代支付联行信息表" destroy-on-close>
			<div v-if="!loadingState && tableList.length === 0">暂无数据</div>
			<div v-else style="width: 100%;height: 100%;">
				<el-table height="calc(100% - 32px)" :data="tableList"   @row-dblclick="dbClickRow" >
					<el-table-column v-for="(item,key) in tableColumn" :key="key" :prop="item.prop" :label="item.label">
					</el-table-column>
				</el-table>
				<el-pagination 
					layout="prev, pager, next, jumper, ->, sizes, total" 
					:page-sizes="pageSizes" 
					:page-size="pageSize" 
					:current-page="currentPage"
				  :total="total" 
					@size-change="sizeChange" 
					@current-change="currentChange"
				></el-pagination>
			</div>
		</el-dialog>
    </div>
</template>
<script>
import event from "../event";
import Api from "~/service/Api"
export default {
    inject: ["root"],
    props: ["model", "codes"],
    mixins: [event],
    data() {
      return {
        dialogTableVisible: false,
        tableList: [],
        loadingState: true,
        total: 0,
        currentPage: 1, // 页数
        pageSizes: [5, 10, 20, 30, 40, 50, 100],
        pageSize: 5, // 条数
        tableColumn: [
            { prop: "fqcyjg", label: "联行行号" },
            { prop: "fukrhm", label: "联行行名" },
            { prop: "dihdig", label: "电话/电挂" }
        ]
      };
    },
    computed:{
    },
    methods: {
        showBenCtyDialog() {
			this.dialogTableVisible = true;
			this.currentPage = 1;
            this.getTableData();
        },
        async getTableData() {
            this.loadingState = true;
            this.tableList = [];
            let params = {
                skhnam: this.model.transOrderVo.skhnam || "",
                //skhnum: this.model.transOrderVo.skhnum || "",
                pageNum: this.currentPage,
                pageSize: this.pageSize
            };
            const res = await Api.post('/business/nitset/getBnl', params);
            if (res.respCode == SUCCESS) {
                if (res.data && res.data.list) {
                this.total = res.data.total;
                this.tableList = res.data.list;
                }
            }
            this.loadingState = false;
        },
        //回填数据
        dbClickRow(row) {
            this.model.transOrderVo.skr = row.fukrhm;
            this.model.transOrderVo.skhnam = row.fukrhm;
            this.model.transOrderVo.skhnum = row.fqcyjg;
            this.dialogTableVisible = false;
        },
        sizeChange(num) {
            this.pageSize = num;
            this.getTableData();
        },
        currentChange(num) {
            this.currentPage = num;
            this.getTableData();
        }
    },
    created() { },
}
</script>
<style scoped lang="less">
::v-deep .el-dialog__body {
	height: calc(100% - 55px)
}
.el-table .cell {
  white-space: pre-wrap;
}
</style>