RmbCty.vue

<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>