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],
  props: {
    promptData: {
      type: Object,
      required: true,
      default: () => {
        return {
          title: '',
          columns: [],
          apiUrl: '',
          apiArgs: {}
        }
      }
    }
  },
  data() {
    return {
      show: false,
      cod: '',
      tableData: [],
      pagination: {
        currentPage: 1,
        pageSizes: [10, 20, 50, 100, 500],
        pageSize: 10,
        total: 0,
      },
    };
  },
  methods: {
    async handleSearch() {
      let params = {
        ...this.promptData.apiArgs,
        pageNum: this.pagination.currentPage,
        pageSize: this.pagination.pageSize,
      };
      const loading = this.loading();
      let res = await Api.post(this.promptData.apiUrl, 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>