<template> <!-- 此组件用于cips页面回填参与行 --> <div> <!-- 行号 --> <c-col :span="24"> <el-form-item :label="mainInfo.keyLabel" :prop="`${mainInfo.moduleKey}.${mainInfo.keyProp}`"> <c-input v-model="model[mainInfo.moduleKey][mainInfo.keyProp]" placeholder="请输入" @keyup.enter.native="showPtapDialog" @change="resetHanghao" clearable @clear="clear" @input="extkeyChange"> </c-input> </el-form-item> </c-col> <!-- 名称 --> <c-col :span="24"> <c-form-item :label="mainInfo.otherLabel" :prop="`${mainInfo.moduleKey}.${mainInfo.otherProp}`"> <c-input v-model="model[mainInfo.moduleKey][mainInfo.otherProp]" placeholder="请输入" @keyup.enter.native="showPtapDialog1" @change="resetMincheng" show-word-limit></c-input> </c-form-item> </c-col> <!-- 弹窗 --> <el-dialog v-dialogDrag width="80%" :title="dialogTitle" :visible.sync="dialogTableVisible" v-if="dialogTableVisible"> <div v-if="!loading && tableList.length === 0">暂无数据</div> <div v-else style="width: 100%;"> <el-table id='tableRef' style="width: 100%;" max-height="300px" v-loading="loading" :data="tableList" @row-dblclick="dbClickRow" :before-close="beforeClose"> <el-table-column v-for="(item,key) in tableColumn" :key="key" :prop="item.prop" :render-header="renderheader" :label="item.label"> </el-table-column> </el-table> <el-pagination layout="prev, pager, next, jumper" :total="total" :page-size="pageSize" :current-page="currentPage" @current-change="currentChange"> </el-pagination> </div> </el-dialog> </div> </template> <script> import { columnMap } from "./ptapColumn.js"; import { getCipmodBankInfo } from "~/service/business/common"; import { get } from 'lodash' // 银行信息模块 export default { inject: ["root"], props: { model: { type: Object, default: () => { } }, coltyp: { //决定弹框的表头 type: String, default: 'X' }, mainInfo: { type: Object, default: function () { return { moduleKey: '', keyLabel: '', keyProp: '', otherLabel: '', otherProp: '', cyzgbs: '', banktyp: '' }; } }, }, data() { return { dialogTitle: "", // 弹框标题 dialogTableVisible: false, // 控制弹框的展示和隐藏 loading: false, total: 0, currentPage: 1, pageSizes: [5, 10, 20, 30, 40, 50, 100], pageSize: 5, tableList: [], tableColumn: [] }; }, watch: {}, methods: { beforeClose(done) { this.dialogTableVisible = false; this.currentPage = 1; done(); }, resetHanghao() { if (this.model[this.mainInfo.moduleKey][this.mainInfo.keyProp] == "") { this.model[this.mainInfo.moduleKey][this.mainInfo.keyProp] = ''; this.model[this.mainInfo.moduleKey][this.mainInfo.otherProp] = ''; } }, resetMincheng() { if (this.model[this.mainInfo.moduleKey][this.mainInfo.otherProp] == '') { this.model[this.mainInfo.moduleKey][this.mainInfo.keyProp] = ''; this.model[this.mainInfo.moduleKey][this.mainInfo.otherProp] = ''; } }, renderheader(h, { column, $index }) { return h("span", {}, [ h("span", {}, column.label.split("/")[0]), h("br"), h("span", {}, column.label.split("/")[1]) ]); }, async showPtapDialog() { // 参考老系统,去掉检验 // if (this.model[this.mainInfo.moduleKey][this.mainInfo.keyProp].length < 6) { // this.$alert('至少输入六位行号', '提示信息', { // confirmButtonText: '确定', // }); // return // } // 分层取值 await this.getTableData(); if (this.total == 1) { this.dbClickRow(this.tableList[0]); } else { this.dialogTitle = `详情`; this.dialogTableVisible = true; this.tableColumn = columnMap[this.coltyp]; } }, async showPtapDialog1() { if (this.model[this.mainInfo.moduleKey][this.mainInfo.otherProp].length < 4) { this.$alert('至少输入四位名称', '提示信息', { confirmButtonText: '确定', }); return } // 设置弹框标题 await this.getTableData(); if (this.total == 1) { this.dbClickRow(this.tableList[0]); } else { this.dialogTitle = `详情`; this.dialogTableVisible = true; this.tableColumn = columnMap[this.coltyp]; } // 分层取值 }, currentChange(num) { this.currentPage = num; this.getTableData(); }, dbClickRow(row, column, event) { this.model[this.mainInfo.moduleKey][this.mainInfo.keyProp] = row.bch; this.model[this.mainInfo.moduleKey][this.mainInfo.otherProp] = row.bchname; this.dialogTableVisible = false; }, // 获取弹框内的table数据 async getTableData() { return new Promise(async (resolve) => { this.loading = true; this.tableList = []; this.pageSize = 10; this.total = 0; // 获取table的表格数据 let params = { bch: this.model[this.mainInfo.moduleKey][this.mainInfo.keyProp] || "", bchname: this.model[this.mainInfo.moduleKey][this.mainInfo.otherProp] || "", cyzgbs: this.mainInfo.cyzgbs, banktyp: this.mainInfo.banktyp, pageNum: this.currentPage, pageSize: this.pageSize }; getCipmodBankInfo(params).then( res => { if (res.respCode == SUCCESS) { if (res.data && res.data.list) { this.total = res.data.total; this.tableList = res.data.list.map(it => ({ ...it, // 添加新key将Party Number和Address Number换行 partyBankExtkey: `${it.bch}`, partyBankName: `${it.bchname}` })); this.currentPage = res.data.pageNum; this.pageSize = res.data.limit; resolve(this.tableList) } } } ) this.loading = false; }) } }, clear() { this.$emit('clear') }, //extkey清空时 extkeyChange() { if (!this.model[this.argadr.grp][this.argadr.rol].pts.extkey) { this.model[this.argadr.grp][this.argadr.rol].pts.nam = '' this.model[this.argadr.grp][this.argadr.rol].pts.ennam = '' this.model[this.argadr.grp][this.argadr.rol].pts.enadr = '' this.model[this.argadr.grp][this.argadr.rol].pts.cnnam = '' this.model[this.argadr.grp][this.argadr.rol].pts.cnadr = '' this.model[this.argadr.grp][this.argadr.rol].pts.adrblk = '' this.model[this.argadr.grp][this.argadr.rol].pts.ptainr = '' this.model[this.argadr.grp][this.argadr.rol].pts.ptyinr = '' this.markExtkey = '' // this.disabledDetail = true } }, } </script> <style scoped> .el-dialog__body { /* min-height: 120%; */ } .el-table .cell { white-space: pre-wrap; } </style>