BusinessCty.vue

<template>
	<div>
		<c-fullbox>
			<c-input v-model="model" :disabled="disabled" placeholder="" @keyup.enter.native="showBenCtyDialog()" @change="handleChange"></c-input>
			<template slot="footer">
				<c-button type="primary" size="small" :disabled="disabled" icon="el-icon-search" style="margin-left: 10px;padding: 0 12px;" @click="showBenCtyDialog()">
				</c-button>
			</template>
		</c-fullbox>
		<!-- 弹窗 -->
		<el-dialog v-dialogDrag width="64%" :visible.sync="dialogTableVisible" :append-to-body="true" :title="rmb ? '跨境人民币申报国家信息表' : '收支申报国家信息表'" destroy-on-close v-if="dialogTableVisible" @close="handleClose">
			<div style="width: 100%;height: 100%;">
				<c-col :span="24">
					<c-col :span="8">
						<el-form-item label="国家/地区编号">
							<c-input v-model="formData.cod" @input="handleSearch"></c-input>
						</el-form-item>
					</c-col>
					<c-col :span="8">
						<el-form-item label="国家/地区数字代码">
							<c-input v-model="formData.numcod" @input="handleSearch"></c-input>
						</el-form-item>
					</c-col>
					<c-col :span="8">
						<el-form-item label="国家/地区简称">
							<c-input v-model="formData.txt" @input="handleSearch"></c-input>
						</el-form-item>
					</c-col>
				</c-col>
				<el-table height="calc(100% - 52px)" :data="tableList" @row-dblclick="dbClickRow">
					<el-table-column
						v-for="(item,key) in tableColumn"
						:key="key"
						:prop="item.prop"
						:label="item.label"
						:width="item.width"
						 :sortable="['cod', 'numcod', 'txt'].includes(item.prop)"
					>
					</el-table-column>
				</el-table>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { getBopCtyCountryData } from "~/service/business/common";
import commonDepend from "~/mixin/commonDepend.js";
import { getCnyctyCod } from "~/service/business/rmb";
export default {
  inject: ["root"],
  mixins: [commonDepend],
  props: {
    value: {
      type: [String],
      default: ""
    },
    disabled: {
      type: Boolean,
      default: false
    },
    customModifykey: {
      type: String,
      default: null
    },
    rmb: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
			dialogTableVisible: false,
      tableList: [],
			markTableList: [],
      loading: true,
      tableColumn: [
        { prop: "cod", label: "国家/地区编号", width: '180' },
        { prop: "numcod", label: "国家/地区数字代码", width: '200' },
        { prop: "txt", label: "国家/地区简称", width: 'auto' },
        { prop: "fultxt", label: "国家/地区全称", width: 'auto' }
			],
			formData: {
				cod: '',
				numcod: '',
				txt: '',
			}
    };
  },

  computed: {
    model: {
      get() {
        return this.value;
      },
      set(newVal) {
        this.$emit("input", newVal);
      }
    }
  },

  methods: {
    async showBenCtyDialog() {
			await this.getTableData(true);
			if (this.tableList.length == 1) {
				this.model = this.tableList[0].cod;
			} else {
				this.dialogTableVisible = true;
			}
		},
		handleSearch() {
			this.tableList = this.markTableList.filter((item) => {
				return item.cod.startsWith(this.formData.cod) && item.numcod.startsWith(this.formData.numcod) && item.txt.startsWith(this.formData.txt)
			})
		},
		initFilter() {
			this.tableList = this.markTableList.filter((item) => {
				return item.cod.includes(this.model) || item.numcod.includes(this.model) || item.txt.includes(this.model)
			})
		},
    getTableData(type) {
			return new Promise(async (resolve) => {
				this.loading = true;
				this.tableList = [];
				let params = {
					countryCod: "",
					pageNum: 1,
					pageSize: 10000
				};
				//报送国别查询码值不同
				const res = this.rmb
					? await getCnyctyCod(params)
					: await getBopCtyCountryData(params);
				if (res.respCode == SUCCESS) {
					if (res.data && res.data.list) {
						this.markTableList = res.data.list;
						this.tableList = res.data.list;
						if (type && this.model) {
							this.initFilter()
						}
						resolve(this.tableList)
					}
				}
				this.loading = false;
			})
		},
		handleClose() {
			this.dialogTableVisible = false;
			this.resetFormData()
		},
    //回填数据
    dbClickRow(row) {
      this.model = row.cod;
      this.dialogTableVisible = false;
      this.handleChange();
			this.$emit("handleChange");
			this.resetFormData()
		},
		resetFormData () {
			this.formData.cod = ''
			this.formData.numcod = ''
			this.formData.txt = ''
		},
    handleChange() {
      if (!this.customModifykey) {
        // 添加isModify属性
        this.changeModify();
      }
    }
  }
};
</script>

<style scoped lang="less">
::v-deep .el-dialog__body {
  height: calc(100% - 55px);
}
.el-table .cell {
  white-space: pre-wrap;
}
</style>