<template> <div> <c-col :span="24"> <el-form-item :label="label" :prop="rule"> <c-fullbox> <c-input v-model.trim="model[breed][kids][kidss]" :disabled="disabled" :placeholder="`请输入${label}`" @keyup.enter.native="showRmbCtyDialog()"></c-input> <template slot="footer"> <c-button type="primary" size="small" :disabled="disabled" icon="el-icon-search" style="margin-left:5px;padding: 0 12px;" @click="showRmbCtyDialog()"> </c-button> </template> </c-fullbox> </el-form-item> </c-col> <!-- 弹窗 --> <el-dialog width="80%" :visible.sync="dialogTableVisible" title="跨境人民币报送国家信息表" destroy-on-close> <div v-if="!loading && 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 { getBopCtyCountryData } from "~/service/business/common"; import { getCnyctyCod } from "~/service/business/rmb"; export default { inject: ["root"], props: { model: { type: Object, default: () => {} }, breed: { type: String, required: true }, kids: { type: String }, kidss: { type: String }, disabled: { type: Boolean, default: false }, label: { type: String, default: "国别" }, rule: { type: String, required: true }, rmb: { type: Boolean, default: false } }, data() { return { dialogTableVisible: false, tableList: [], loading: true, total: 0, currentPage: 1, // 页数 pageSizes: [5, 10, 20, 30, 40, 50, 100], pageSize: 5, // 条数 tableColumn: [ { prop: "cod", label: "国家/地区编号" }, { prop: "numcod", label: "国家/地区数字代码" }, { prop: "txt", label: "国家/地区简称" }, { prop: "fultxt", label: "国家/地区全称" } ] }; }, methods: { showRmbCtyDialog() { this.dialogTableVisible = true; this.currentPage = 1; this.getTableData(); }, async getTableData() { this.loading = true; this.tableList = []; let params = { countryCod: this.model[this.breed][this.kids][this.kidss] || "", pageNum: this.currentPage, pageSize: this.pageSize }; //报送国别查询码值不同 const res = this.rmb ? await getCnyctyCod(params) : await getBopCtyCountryData(params); if (res.respCode == SUCCESS) { if (res.data && res.data.list) { this.total = res.data.total; this.tableList = res.data.list; } } this.loading = false; }, //回填数据 dbClickRow(row) { this.model[this.breed][this.kids][this.kidss] = row.cod; this.dialogTableVisible = false; }, sizeChange(num) { console.log(111, num); this.pageSize = num; this.getTableData(); }, currentChange(num) { console.log(222, num); this.currentPage = num; this.getTableData(); } } }; </script> <style scoped lang="less"> ::v-deep .el-dialog__body { height: calc(100% - 55px); } .el-table .cell { white-space: pre-wrap; } </style>