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

## 1. 开始使用 ```js // 在npm项目中的main.js文件中加入以下代码 import Base from "cnetong-core-frontend";

/**
 * 用法
 * ```
 *  new PageTable({
        autoLoad: false, //不允许自动加载
        doLoad(param){
            return axios.get('....',param).
            then(()=>{
                return {data:resp.data,total:resp.total}
            })
        }, //加载调用方法
        param: {},
        log:false // 是否开启调试
      })
 * ```
 */
import de from "element-ui/src/locale/lang/de";

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

/**
 * 连接查询表单,表格,分页组件
 */
class PageTable {
  data = [];
  selection = [];
  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._size = config["size"] || 20;

    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) {
        console.log("表格即將加載:", param);
      }
      let resp = await this.doLoad.call(this, param);
      let data = resp[paramName.data];
      let total = resp[paramName.total];
      this.completeData(data);
      this.data = data;
      this.total = total;
      this.lastParam = param;
      this.selection = [];
    } finally {
      this.isLoading = false;
    }
  }

  /**
   * 强化数据,为数据增加编辑中,加载中等状态
   * @param {Array} data 要处理的数据,必须是一个数组
   */
  completeData(data) {
    if (data instanceof Array) {
      //加工数据
      data.forEach((rc, idx) => {
        rc.$isLoading = false;
        rc.$isEditing = false;
        rc.$rownum = (this.curr - 1) * this.size + idx + 1;
      });
    }
  }

  /**
   *响应排序处理
   * @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:String}} exp 导出组件的导出事件
   * @param table {{columns:[]}} 表格对象
   */
  handleExport(exp, table) {
    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;
    }
    let columns = [];
    table.$children.forEach((element) => {
      if (element.prop && element.label) {
        let column_t = {
          field: element.prop.trim(),
          label: element.label.trim()
        };
        //判断该字段是否是字典项
        if (element.$attrs.dict !== undefined) {
          column_t["sysCode"] = element.$attrs.dict;
        }
        columns.push(column_t);
      }
    });

    param.columns = JSON.stringify(columns);
    param.permName = param.permName || table.title || table.$parent.title || table.$parent.$parent.title;

    if (this.isLog && console.log) {
      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;