PtapNoRole.vue

<template>
  <!-- 此组件是ptap组件的补充版本，它是服务于不带角色的回填组件 -->
  <div>
    <c-row>
      <c-col :span="12" style="padding-right: 20px">
        <c-col :span="24">
          <el-form-item :label="mainInfo.keyLabel" :prop="`${mainInfo.moduleKey}.${mainInfo.keyProp}`">
            <c-fullbox>
              <c-input v-model="model[mainInfo.moduleKey][mainInfo.keyProp]" maxlength="18" placeholder="请输入"
                @keyup.enter.native="showPtapDialog()" @blur="showPtapDialog()"></c-input>
              <template slot="footer">
                <c-button style="margin: 0 0px 0 10px; padding: 0 0px" size="small" type="primary"
                  @click="showPtapDialog()">
                  <i class="el-icon-info" style="font-size:15px"></i>
                </c-button>
              </template>
            </c-fullbox>
          </el-form-item>
        </c-col>
        <c-col :span="24">
          <c-form-item :label="mainInfo.otherLabel" :prop="`${mainInfo.moduleKey}.${mainInfo.otherProp}`">
            <c-input v-model="model[mainInfo.moduleKey][mainInfo.otherProp]" maxlength="40" placeholder="请输入" disabled
              show-word-limit></c-input>
          </c-form-item>
        </c-col>
      </c-col>
      <!-- <c-col :span="12" style="padding-left: 20px">
        <c-col :span="24">
          <c-form-item :label="mainInfo.otherLabel" :prop="`${mainInfo.moduleKey}.${mainInfo.otherProp}`">
            <c-input v-model="model[mainInfo.moduleKey][mainInfo.otherProp]" maxlength="40" placeholder="请输入" disabled
              show-word-limit></c-input>
          </c-form-item>
        </c-col>
      </c-col> -->
    </c-row>

    <!-- 弹窗 -->
    <el-dialog v-dialogDrag width="80%" :title="dialogTitle" :visible.sync="dialogTableVisible"
      v-if="dialogTableVisible">
      <div v-if="!loading && tableList.length === 0">暂无数据</div>
      <div v-else style="width: 100%;">
        <el-table id='tableRef' style="width: 100%;" max-height="300px" v-loading="loading" :data="tableList"
          @row-dblclick="dbClickRow" :before-close="beforeClose">
          <el-table-column v-for="(item,key) in tableColumn" :key="key" :prop="item.prop" :render-header="renderheader"
            :label="item.label">
          </el-table-column>
        </el-table>
        <el-pagination layout="prev, pager, next, jumper" :total="total" :page-size="pageSize"
          :current-page="currentPage" @current-change="currentChange">
        </el-pagination>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import { columnMap } from "./ptapColumn.js";
  import { getPtaTableDtat, getPtsptaByInr } from "~/service/business/common";
  import { get } from 'lodash'
  // 机构信息模块
  export default {
    inject: ["root"],
    props: {
      model: {
        type: Object,
        default: () => { }
      },
      mainInfo: {
        type: Object,
        default: function () {
          return {
            moduleKey: '',
            keyLabel: '',
            keyProp: '',
            otherLabel: '',
            otherProp: ''
          };
        }
      },
      ptytyp: {
        //决定弹框的表头
        type: String,
        default: 'C'
      },
      bchinr: {
        type: String,
        default: '00000047'
      },
    },
    data() {
      return {
        dialogTitle: "", // 弹框标题
        dialogTableVisible: false, // 控制弹框的展示和隐藏
        loading: false,
        total: 0,
        currentPage: 1,
        pageSizes: [5, 10, 20, 30, 40, 50, 100],
        pageSize: 5,
        tableList: [],
        tableColumn: []
      };
    },
    watch: {},
    methods: {
      // 表头 头部换行，以 / 作为换行标志
      renderheader(h, { column, $index }) {
        return h("span", {}, [
          h("span", {}, column.label.split("/")[0]),
          h("br"),
          h("span", {}, column.label.split("/")[1])
        ]);
      },
      async showPtapDialog() {
        if (this.loading || this.dialogTableVisible) {
          return
        }
        await this.getTableData();
        console.log("this.total2----->", this.total)
        if (this.total == 1) {
          this.dbClickRow(this.tableList[0]);
        } else {
          // 设置弹框标题
          this.dialogTitle = `详情`;
          this.dialogTableVisible = true;
          this.tableColumn = columnMap[this.ptytyp];
        }
        // 分层取值

      },

      currentChange(num) {
        console.log("num---->", num)
        this.currentPage = num;
        this.getTableData();
      },

      // 获取弹框内的table数据
      async getTableData() {
        return new Promise(async (resolve) => {
          this.loading = true;
          this.tableList = [];
          this.currentPage = 1;
          this.pageSize = 10;
          this.total = 0;
          // 获取table的表格数据
          let params = {
            ptytyp: this.ptytyp,
            extkey: this.model[this.mainInfo.moduleKey][this.mainInfo.keyProp] || "",
            bchinr: this.bchinr,
            pageNum: this.currentPage,
            pageSize: this.pageSize
          };
          getPtaTableDtat(params, this.moduleRouter()).then(res => {
            if (res.respCode == SUCCESS) {
              if (res.data && res.data.list) {
                this.total = res.data.total;
                console.log("total1----->", this.total);
                this.tableList = res.data.list.map(it => ({
                  ...it,
                  // 添加新key将Party Number和Address Number换行
                  partyNumberAndAdressNumber: `${it.ptaptyextkey}\n${it.ptaobjkey}`,
                  bchbranchAndBchbchname: `${it.bchbranch}\n${it.bchbchname}`,
                  adrnam1AndPtanam1: `${it.adrnam1}\n${it.ptanam1}`,
                  adradr1AndAdrstr1: `${it.adradr1}\n${it.adrstr1}`,
                  adrstr2Andadrloccty: `${it.adrstr2}\n${it.adrloccty}`,
                  adrloczipAndadrloctxt: `${it.adrloczip}\n${it.adrloctxt}`
                }));
                this.currentPage = res.data.offset;
                this.pageSize = res.data.limit;
                resolve(this.tableList)
              }
            }
            this.loading = false; //接口掉完变成false
          });
        });
      },
      async dbClickRow(row, column, event) {
        let params = {
          inr: row.ptainr
        };
        const response = await getPtsptaByInr(params, this.moduleRouter());
        console.log("此行数据------>", row)
        if (response.respCode == SUCCESS) {
          // 此处为了回填数据时回调
          this.$emit('handleChange')
          // 回填数据
          this.model[this.mainInfo.moduleKey][this.mainInfo.keyProp] = row.ptaobjkey;
          this.model[this.mainInfo.moduleKey][this.mainInfo.otherProp] = response.data[this.mainInfo.otherProp];
          this.model.branch = row.bchbranch;
          this.model.pta.inr = row.ptainr;
          this.model.pts.extkey = row.ptaobjkey;
          this.model.pts.ennam = response.data.ennam;
          this.model.pts.cnnam = response.data.cnnam;
          this.model.pts.cnadr = response.data.cnadr;
          this.model.pts.enadr = response.data.enadr;
          this.model.pts.nam = response.data.nam;
        }
        this.dialogTableVisible = false;
      },
      beforeClose(done) {
        this.dialogTableVisible = false;
        this.currentPage = 1;
        done();
      }
    },

    created: function () { }
  };
</script>
<style scoped>
  .el-dialog__body {
    /* min-height: 120%; */
  }

  .el-table .cell {
    white-space: pre-wrap;
  }
</style>