Selp.vue

<template>
	<div class="eibs-tab">
		<c-col :span="24">
			<c-col :span="12" style="padding-right: 20px">
				<c-col :span="24">
					<el-form-item label="客户号" prop="recpan.cliextkey">
						<c-input v-model="model.recpan.cliextkey" @keyup.enter.native="showPtapDialog()" @blur="handleExtkeyBlur()" @clear="clear()" @input="extkeyInput()" maxlength="10" placeholder="请输入客户号"></c-input>
					</el-form-item>
				</c-col>

				<c-col :span="24">
					<el-form-item label="查询码" prop="recpan.scod">
						<c-input v-model="model.recpan.scod" maxlength="6" placeholder="请输入查询码"></c-input>
					</el-form-item>
				</c-col>

				<c-col :span="24">
					<el-form-item label="组织机构代码" prop="recpan.custcode">
						<c-input disabled v-model="model.recpan.custcode" maxlength="32" placeholder="请输入组织机构代码"></c-input>
					</el-form-item>
				</c-col>

				<c-col :span="24">
					<el-form-item label="客户名称" prop="recpan.clinam">
						<c-mul-row-input disabled type="textarea" :rows="2" :cols="70" :autosize="{minRows: 1,	maxRows: 2}" :showTip="false" v-model="model.recpan.clinam" placeholder="请输入客户名称"></c-mul-row-input>
					</el-form-item>
				</c-col>

				<c-col :span="24">
					<span style="float: right">
						<el-button size="small" @click="handleReset()">重置</el-button>
						<el-button type="primary" icon="el-icon-search" size="small" :loading="false" @click="onSearch">查询
						</el-button>
					</span>
				</c-col>
			</c-col>
		</c-col>

		<!-- 客户信息弹窗 -->
		<el-dialog title="客户信息详情" v-dialogDrag width="64%" :visible.sync="dialogTableVisible" destroy-on-close :close-on-click-modal="false" :close-on-press-escape="false" :show-close="true" v-if="dialogTableVisible" :modal-append-to-body="false" :append-to-body="true">
			<div v-if="!tableLoading && tableList.length === 0">暂无数据</div>
			<div v-else style="width: 100%;height: 100%;">
				<el-table id='tableRef' height="calc(100% - 32px)" style="width: 100%;" v-loading="tableLoading" :data="tableList" @row-dblclick="dbClickRow" :before-close="beforeClose">
					<el-table-column label="客户号" prop="extkey" width="auto">
					</el-table-column>
					<el-table-column label="客户名称" prop="nam1" width="auto">
					</el-table-column>
          <el-table-column label="所属机构名称" prop="bchname" width="auto">
					</el-table-column>
					<el-table-column label="客户类型" prop="ptytyp" width="auto">
					</el-table-column>
				</el-table>
				<el-pagination class="eContainer-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>

		<el-dialog :visible.sync="visible" v-if="visible" width="70%" title="企业信息">
			<m-infodsp :info="model.info"></m-infodsp>
		</el-dialog>
	</div>
</template>
<script>
import event from "../event";
import Infodsp from "./Infodsp.vue";
import { queryPtyInfos } from "~/service/business/common";
import commonFunctions from "~/mixin/commonFunctions.js";
import commonDepend from "~/mixin/commonDepend.js";

export default {
  inject: ["root"],
  props: ["model", "codes"],
  mixins: [event, commonFunctions, commonDepend],
  components: {
    "m-infodsp": Infodsp
  },
  data() {
    return {
      dialogTitle: "", // 弹框标题
      dialogTableVisible: false, // 控制弹框的展示和隐藏
      tableLoading: false,
      total: 0,
      currentPage: 1, // 页数
      pageSizes: [5, 10, 20, 30, 40, 50, 100],
      pageSize: 10, // 条数
      tableList: [],
      markExtkey: "",
      visible: false
    };
  },
  methods: {
    // extkey输入框失焦
    handleExtkeyBlur(e) {
      let extkey = this.model.recpan.cliextkey;
      if (extkey && extkey !== this.markExtkey) {
        this.showPtapDialog();
      }
    },

    // 弹框
    async showPtapDialog() {
      if (this.tableLoading || this.dialogTableVisible) {
        return;
      }
      const value = this.model.recpan.cliextkey;
      // 分层取值
      await this.getTableData(value);
      if (this.total == 1) {
        this.dbClickRow(this.tableList[0]);
      } else {
        // 设置弹框标题
        this.dialogTableVisible = true;
        this.$nextTick(() => {
          this.root.$refs["modelForm"].validateField([`recpan.cliextkey`]);
        });
      }
    },

    // 获取弹框内的table数据
    async getTableData(value) {
      return new Promise(async resolve => {
        this.tableLoading = true;
        this.tableList = [];
        // 获取table的表格数据
        let params = {
          extkey: value || "",
          bchbranch: JSON.parse(window.sessionStorage.accbch).branch,
          pageNum: this.currentPage,
          pageSize: this.pageSize
        };
        const loading = this.loading();
        const res = await queryPtyInfos(params, this.moduleRouter());
        loading.close();
        if (res.respCode == SUCCESS) {
          if (res.data && res.data.list) {
            this.total = res.data.total;
            this.tableList = res.data.list;
            resolve(this.tableList);
          }
        }
        this.tableLoading = false; //接口掉完变成false
      });
    },

    async dbClickRow(row, column, event) {
      this.markExtkey = row.extkey;
      this.model.recpan.cliextkey = row.extkey;
      this.model.recpan.clinam = row.nam1;
      this.model.recpan.custcode = row.juscod;
      this.$nextTick(() => {
        this.root.$refs["modelForm"].validateField([`recpan.cliextkey`]);
      });
      this.dialogTableVisible = false;
    },

    //extkey清空时
    extkeyInput() {
      if (!this.model.recpan.cliextkey) {
        this.model.recpan.clinam = "";
        this.model.recpan.custcode = "";
        this.markExtkey = "";
        this.clear();
      }
    },

    // 清除
    clear() {
      this.$emit("clear");
      this.$nextTick(() => {
        this.root.$refs["modelForm"].validateField([`recpan.cliextkey`]);
      });
    },

    // 关闭弹框
    handleCloseDialogTable() {
      this.dialogTableVisible = false;
    },

    beforeClose(done) {
      this.dialogTableVisible = false;
      this.currentPage = 1;
      done();
    },

    sizeChange(num) {
      this.pageSize = num;
      const value = this.model.recpan.cliextkey;
      this.getTableData(value);
    },

    currentChange(num) {
      this.currentPage = num;
      const value = this.model.recpan.cliextkey;
      this.getTableData(value);
    },

    async totalDeal() {
      await this.onSearch();
      if (this.model.info) {
        this.visible = true;
      }
    },
    handleReset() {
      this.model.recpan.cliextkey = null;
      this.model.recpan.scod = null;
      this.model.recpan.custcode = null;
      this.model.recpan.clinam = null;
    }
  },
  created() {}
};
</script>
<style>
</style>