cnetong-core-frontend/base/libs/PageTable.js

- CURD组件的编辑对话框增加按钮slot

/**
 * 用法
 * ```
 *  new PageTable({
        autoLoad: false, //不允许自动加载
        doLoad(param){
            return axios.get('....',param).
            then(()=>{
                return {data:resp.data,total:resp.total}
            })
        }, //加载调用方法
        param: {},
        log:false // 是否开启调试
      })
 * ```
 */

const paramName = {
  size: "pageSize",
  page: "pageNum",
  total: "totalRows",
  data: "datarows",
  sort: "sort"
};

/**
 * 连接查询表单,表格,分页组件
 */
class PageTable {
  data = [];
  param = {};
  total = 0;
  autoLoad = false;
  isLoading = false;
  isLog = false;
  sort = "";

  lastParam = {}; //最后一次加载的参数

  loaded = false; //初始化还没有加载状态
  _param = {};

  _curr = 1;
  _size = 20;

  /**
   * 加载方法[占位]
   * @param param.page 页码
   * @param param.size 页长
   */
  doLoad(param) {}

  constructor(config) {
    this.doLoad = config["doLoad"];
    this.autoLoad = config["autoLoad"];
    this._param = config["param"] || {};
    this.isLog = config["log"] === true;
    this.columns = config["columns"];

    this.handleReset();

    if (this.autoLoad) {
      this.handleLoad();
    }
  }

  /**
   * 处理加载
   */
  async handleLoad() {
    let param = {
      [paramName.page]: this.curr,
      [paramName.size]: this.size,
      [paramName.sort]: this.sort
    };
    Object.assign(param, this.param);
    this.isLoading = true;
    try {
      if (this.isLog) {
        console.log("表格即將加載:", param);
      }
      let resp = await this.doLoad(param);
      let data = resp[paramName.data];
      let total = resp[paramName.total];
      this.strengData(data);
      this.data = data;
      this.total = total;
      this.lastParam = this.param;
    } finally {
      this.isLoading = false;
    }
  }

  /**
   * 强化数据,为数据增加编辑中,加载中等状态
   * @param {Array} data 要处理的数据,必须是一个数组
   */
  strengData(data) {
    //加工数据
    data.forEach(rc => {
      rc.$isLoading = false;
      rc.$isEditing = false;
    });
  }

  /**
   *响应排序处理
   * @param {{column:String,order:String}} sort elementUI的排序事件
   */
  handleSort(sort) {
    this.sort = "";
    if (sort.column) {
      let od = sort.order === "descending" ? "desc" : "asc";
      this.sort = sort.prop + "," + od;
    }
    let ignore=this.handleLoad();
  }

  /**
   * 响应导出
   * @param {{type:String,mode:['page'|'full']}} exp 导出组件的导出事件
   */
  handleExport(exp) {
    let param = Object.assign({}, this.lastParam, exp);
    param[paramName.sort] = this.sort;
    if (exp.mode === "page") {
      param[paramName.page] = this.curr;
      param[paramName.size] = this.size;
    }

    if (this.isLog) {
      console.log("表格即將导出:", param);
    }
    this.doLoad(param);
  }

  /**
   * 重置查询表单
   */
  handleReset() {
    this.param = Object.assign({}, this._param);
  }

  get curr() {
    return this._curr;
  }

  set curr(curr) {
    let nld = this._curr !== curr;
    this._curr = curr;
    //只有改变页码的时候才加载数据
    if (nld) this.handleLoad();
  }

  get size() {
    return this._size;
  }

  set size(size) {
    this._size = size;
    this.handleLoad();
  }
}

export default PageTable;