查询数据表格封装

查询数据表格封装

table.js的mixins公用方法。 mixins.

import { treeDataTranslate } from "@/utils";
import { getFirstLevelTreeData } from "@/utils/tree";
import { getOrderMenus } from "@/utils/menu";
import Vue from "vue";

const DEFAULT_SEARCH_PARAMS = {
  pageNum: 1,
  pageSize: 10
};

const tableMixins = {
  data() {
    return {
      listUrl: "",
      lazyLoad: false,
      pageSizes: [10, 20, 30],
      searchParams: DEFAULT_SEARCH_PARAMS,
      loading: false,
      list: [],
      total: 0,
      treeParams: [],
      swapMenus: [],
      highlightRow: false,
      record: undefined,
      tableHeight: "calc(100vh - 320px)"
    };
  },
  methods: {
    formatBool(row, column, cellValue, index) {
      return cellValue === true ? "是" : "否";
    },
    handleRefresh() {
      Object.keys(this.searchParams).map(key => {
        this.searchParams[key] = undefined;
      });
      this.highlightCurrentRow = false;
      this.getDataList();
    },
    // 获取数据列表
    getDataList(parms) {
      if(parms){
        this.searchParams.pageNum = 1 //翻页后再查询-默认页数为1
      }
      this.loading = true;
      this.$http({
        url: this.$http.adornUrl(this.listUrl),
        method: "get",
        params: this.$http.adornParams(this.searchParams)
      }).then(data => {
        if (data) {  
          const dataList=[];
          // 如果有数据就赋值给list  
          if(Object.prototype.toString.call(data) ==  '[object Object]'){
            dataList = data.list ||data.page.list;
          }else if(Object.prototype.toString.call(data) ==  '[object Array]'){
            dataList = data
          }
          if (this.treeParams.length > 0) {
          // 如果是要树形加载的数据，在页面需要设置treeParams属性；
          // 如果页面有这个属性，进行树形转换，封装如下
            const transData = treeDataTranslate(dataList, ...this.treeParams);
            this.list = this.lazyLoad
              ? getFirstLevelTreeData(transData)
              : transData;
          } else {
            this.list = dataList;
          }
          this.total =data.page?data.page.total:data.total
        } else {
          this.list = [];
          this.total = 0;
        }
        this.loading = false;
        if(this.$refs.Table){//清除单选选择
          this.$refs.Table.setCurrentRow();
        }
      });
    },

    handleSizeChange(pageSize) {
      this.searchParams.pageSize = pageSize;
      this.searchParams.pageNum = 1;
      this.getDataList();
    },

    handleCurrentChange(page) {
      this.searchParams.pageNum = page;
      this.getDataList();
    },

    getOrderDataList(record, type) {
      const { swapMenus, orderMenus } = getOrderMenus(this.list, record, type);
      this.list = JSON.parse(JSON.stringify(orderMenus));
      this.swapMenus = swapMenus;
    }
  }
};

export { tableMixins };

其中树状图的封装 utils.

/**
 * 树形数据转换
 * @param {*} data
 * @param {*} id
 * @param {*} pid
 */
export function treeDataTranslate(data, id = "id", pid = "parentId") {
 
  var res = [];
  var temp = {};
  for (var i = 0; i < data.length; i++) {
    temp[data[i][id]] = data[i];
    delete temp[data[i][id]].children;
  }
  for (var k = 0; k < data.length; k++) {
    if (temp[data[k][pid]] && data[k][id] !== data[k][pid]) {
      if (!temp[data[k][pid]]["children"]) {
        temp[data[k][pid]]["children"] = [];
        temp[data[k][pid]]["hasChildren"] = false;
      }
      if (!temp[data[k][pid]]["_level"]) {
        temp[data[k][pid]]["_level"] = 1;
      }
      data[k]["_level"] = temp[data[k][pid]]._level + 1;
      temp[data[k][pid]]["children"].push(data[k]);
      temp[data[k][pid]]["hasChildren"] = true
    } else {
      res.push(data[k]);
    }
  }
  return res;
}

生成树形结构一级菜单数据 utils/tree.

// 生成树形结构一级菜单数据
export const getFirstLevelTreeData = data => {
  let _cloneData = [...data];
  return _cloneData.map(item => {
    return {
      ...item,
      children: [],
      // TODO: 后端返回的hasChild字段不正确 总是false
      hasChildren: true
    };
  });
};

menu.js的封装： utils/menu.js.

import _ from "lodash";

/**
 * 数组交换
 * @param {*} arr   数组
 * @param {*} index 当前选中的索引
 * @param {*} type  down | up
 */
function swap(arr, swapMenus, sourceIndex, targetIndex) {
  let temp;
  let tempOrderNum = 0;

  console.log(arr, sourceIndex, targetIndex);

  tempOrderNum = arr[sourceIndex].orderNum;
  arr[sourceIndex].orderNum = arr[targetIndex].orderNum;
  arr[targetIndex].orderNum = tempOrderNum;

  temp = arr[sourceIndex];
  arr[sourceIndex] = arr[targetIndex];
  arr[targetIndex] = temp;

  swapMenus.push({
    menuId: arr[sourceIndex].menuId,
    orderNum: arr[sourceIndex].orderNum
  });
  swapMenus.push({
    menuId: arr[targetIndex].menuId,
    orderNum: arr[targetIndex].orderNum
  });
}

/**
 * 获取排序后的list
 * @param {*} arr    数组
 * @param {*} record 当前记录
 * @param {*} type   up | down
 */
function getOrderDataList(arr, swapMenus, record, type) {
  const listArr = _.cloneDeep(arr);
  return listArr.reduce((pre, item, index) => {
    if (item.menuId === record.menuId) {
      const len = pre.length;
      if (type === "up") {
        const targetIndex = index - 1;
        const lastIndex = targetIndex >= 0 ? targetIndex : len + targetIndex;
        swap(pre, swapMenus, index, lastIndex);
      } else {
        const targetIndex = index + 1;
        const nextIndex = targetIndex < len ? targetIndex : targetIndex - len;
        swap(pre, swapMenus, index, nextIndex);
      }
    }
    return pre;
  }, arr);
}

export function getOrderMenus(menus, record, type) {
  const { parentId } = record;
  let orderMenus = [];
  let swapMenus = [];

  function findMenus(menus) {
    if (parentId === 0) {
      return getOrderDataList(menus, swapMenus, record, type);
    }

    return menus.map(menu => {
      let cloneMenu = _.cloneDeep(menu);
      if (menu.children && menu.children.length > 0) {
        if (parentId === menu.menuId) {
          cloneMenu.children = getOrderDataList(
            menu.children,
            swapMenus,
            record,
            type
          );
        }
        return {
          ...menu,
          children: findMenus(menu.children)
        };
      }
      return cloneMenu;
    });
  }
  orderMenus = findMenus(menus);
  return { swapMenus, orderMenus };
}