GridSelectDialog.vue

<template>
  <el-dialog
    :title="promptData.title"
    :visible.sync="show"
    custom-class="grid-ety"
    :highlight-current-row="true"
    width="60%"
    :before-close="beforeClose"
  >
    <el-table
      :data="tableData"
      border
      @row-dblclick="selectEty"
    >
      <el-table-column
        v-for="(item, idx) in promptData.columns"
        :key="idx"
        :property="item.prop"
        :label="item.label"
        :width="item.width"
      >
      </el-table-column>
    </el-table>
    <el-pagination
      layout="prev, pager, next, total, jumper"
      :total="pagination.total"
      :page-sizes="pagination.pageSizes"
      :page-size="pagination.pageSize"
      :current-page="pagination.currentPage"
      @current-change="currentChange"
      @size-change="handleSizeChange"
    >
    </el-pagination>
  </el-dialog>
</template>

<script>
import Api from "~/service/Api";
import commonApi from '~/mixin/commonApi';
export default {
  mixins: [commonApi],
  data() {
    return {
      show: false,
      cod: '',
      tableData: [],
      pagination: {
        currentPage: 1,
        pageSizes: [10, 20, 50, 100, 500],
        pageSize: 10,
        total: 0,
      },
      promptData: {
        title: 'Select a Transaction',
        columns: [
          {
            prop: 'cod',
            label: 'Description'
          },
          {
            prop: 'bus',
            label: 'Bus. Sector'
          },
          {
            prop: 'bustrnflg',
            label: 'Business Trn.'
          },
          {
            prop: 'reltyp',
            label: 'Release Method'
          },
          {
            prop: 'relamt',
            label: 'Real. Amount'
          },
          {
            prop: 'ccstyp',
            label: 'Compliance Check'
          },
          {
            prop: 'subflg',
            label: 'Subcontr. -creating Trn.'
          },
          {
            prop: 'sepflg',
            label: 'Temp. Settl. allowed'
          },
          {
            prop: 'rouflg',
            label: 'Routing allowed'
          },
          {
            prop: 'concreflg',
            label: 'Allocate New Contract'
          },
          {
            prop: 'negflg',
            label: 'Need pass. Data to Exec.'
          },
          {
            prop: 'jobflg',
            label: 'Job operation allowed'
          }

        ]
      }
    };
  },
  methods: {
    async handleSearch() {
      let params = {
        inr: '',
        oldkey: '',
        dissel: '',
        usrcon: '',
        rouflg: '',
        sepflg: '',
        cod: this.cod,
        dtaflg: '',
        lnkobj: '',
        pageNum: this.pagination.currentPage,
        pageSize: this.pagination.pageSize,
      };
      const loading = this.loading();
      let res = await Api.post('/service/trnrel/findAtpCod', params);
      if (res.respCode == SUCCESS) {
        this.tableData = res.data && res.data.atpList.list;
        this.pagination.total = Number((res.data && res.data.atpList.total) || 0);
      }
      loading.close();
    },
    currentChange(val) {
      this.pagination.currentPage = val;
      this.handleSearch()
    },
    handleSizeChange(val) {
      this.pagination.currentPage = 1;
      this.pagination.pageSize = val;
      this.handleSearch();
    },
    selectEty(row) {
      this.$emit("selectEty", {
        ...row,
        role: this.promptData.type
      });
      this.show = false;
      this.currentPage = 1;
    },
    beforeClose(done) {
      this.show = false;
      this.currentPage = 1;
      done();
    },
  },
};
</script>

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