ovwp.vue

<template>
	<div class="eibs-tab">
		<c-col :span="12" class="col-left">
			<c-col :span="24">
				<el-form-item label="业务主键" prop="tcrVo.levyno">
					<c-input v-model="model.tcrVo.levyno" placeholder="请输入业务主键" disabled />
				</el-form-item>
			</c-col>
			<c-col :span="24">
				<el-form-item label="银行业务编号" prop="tcrVo.banktrano">
					<c-input v-model="model.tcrVo.banktrano" maxlength="16" placeholder="请输入银行业务编号" disabled />
				</el-form-item>
			</c-col>
			<c-col :span="24">
				<el-form-item label="银行机构代码" prop="tcrVo.bankorgcode">
					<c-input v-model="model.tcrVo.bankorgcode" placeholder="请输入银行机构代码" disabled />
				</el-form-item>
			</c-col>
			<c-col :span="24">
				<el-form-item label="收款人账号" prop="tcrVo.payeeacct">
					<c-input v-model="model.tcrVo.payeeacct" placeholder="请输入收款人账号" />
				</el-form-item>
			</c-col>
			<c-col :span="24">
				<el-form-item label="付款人常驻国家（地区）代码" prop="tcrVo.payercountrycode">
					<c-fullbox>
						<c-input v-model.trim="model.tcrVo.payercountrycode" 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="tcrVo.payeraccttype">
					<c-select v-model="model.tcrVo.payeraccttype" style="width:100%" @change="payeraccttypeC" placeholder="请输入付款人账户类型" dbCode="payeea">
					</c-select>
				</el-form-item>
			</c-col>
		</c-col>
		<c-col :span="12" class="col-right">
			<c-col :span="24">
				<el-form-item label="操作类型" prop="tcrVo.opertype">
					<c-select disabled v-model="model.tcrVo.opertype" style="width:100%" placeholder="请选择操作类型" dbCode="opetyp">
					</c-select>
				</el-form-item>
			</c-col>
			<c-col :span="24">
				<el-form-item label="变更/撤销原因" prop="tcrVo.actiondesc">
					<c-input v-model="model.tcrVo.actiondesc" placeholder="请输入变更/撤销原因" type="textarea" disabled />
				</el-form-item>
			</c-col>
			<c-col :span="24">
				<el-form-item label="付款人账号" prop="tcrVo.payeracct">
					<c-input v-model="model.tcrVo.payeracct" placeholder="请输入付款人账号" />
				</el-form-item>
			</c-col>
			<c-col :span="24">
				<el-form-item label="是否退款" prop="tcrVo.ifrefund">
					<c-select v-model="model.tcrVo.ifrefund" style="width:100%" @change="ifrefundC" placeholder="请输入是否退款" dbCode="cxmflg">
					</c-select>
				</el-form-item>
			</c-col>
			<c-col :span="24">
				<el-form-item label="原支出申报号码" prop="tcrVo.oripaylevyno">
					<c-input v-model="model.tcrVo.oripaylevyno" placeholder="请输入原支出申报号码" :disabled="model.tcrVo.ifrefund != 'Y'" />
				</el-form-item>
			</c-col>
			<el-dialog v-dialogDrag width="80%" v-if="dialogTableVisible" :visible.sync="dialogTableVisible" title="付款人常驻国家（地区）代码" destroy-on-close>
				<div v-if="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>
		</c-col>
	</div>
</template>

<script>
import { getBopCtyCountryData } from "~/service/business/common";
import event from "../event";
export default {
  props: ["model", "codes"],
  inject: ["root"],
  mixins: [event],
  data() {
    return {
      dialogTableVisible: false,
      tableList: [],
      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: {
    showBenCtyDialog() {
      this.dialogTableVisible = true;
      this.currentPage = 1;
      this.getTableData();
    },
    async getTableData() {
      this.tableList = [];
      let params = {
        countryCod: "",
        pageNum: this.currentPage,
        pageSize: this.pageSize
      };
      const res = await getBopCtyCountryData(params);
      if (res.respCode == SUCCESS) {
        if (res.data && res.data.list) {
          this.total = res.data.total;
          this.tableList = res.data.list;
        }
      }
    },
    //回填数据
    dbClickRow(row) {
      this.model.tcrVo.payercountrycode = row.cod;
      this.dialogTableVisible = false;
    },
    sizeChange(num) {
      this.pageSize = num;
      this.getTableData();
    },
    currentChange(num) {
      this.currentPage = num;
      this.getTableData();
    }
  }
};
</script>
<style scoped>
</style>