tableMixin.js

import * as utils from "@/utils/";
export default {
  data() {
    return {
      // 界面加载遮罩显示与否控制
      loading: false,
      // 表格数据,如需特殊处理，可以在应用组件内检测本数据进行处理
      tableData: [{
        id: 1,
        productName: '商品1',
        firstCategoryName: '一',
        secondCategoryName: '二',
        storeName: '店铺',
        description: '审核通过',
        link: 'http://www.baidu.com',
      }],
      // 表格滚动相关
      scroll: {},
      // 表格分页相关
      pagination: {
        total: 0, // 总数据量
        pageNo: 1, // 请求页
        current: 1, // 当前页
        pageSize: 10, // 默认每页显示数量
        showSizeChanger: true, // 显示可改变每页数量
        showQuickJumper: true,
        pageSizeOptions: ["10", "20", "30", "40"], // 每页数量选项
        showTotal: total =>
          `共 ${total}条记录  第${this.pagination.current}/${Math.ceil(
            this.pagination.total / this.pagination.pageSize
          )}页`
      },
      // 交互查询相关参数对象
      confirmSearch: {}
    };
  },
  created() {
    if (this.$route.query.backInfo) {
      let backInfo = JSON.parse(this.$route.query.backInfo);
      this.pagination.current = this.pagination.pageNo =
        backInfo.pageInfo.pageNo;
      this.pagination.pageSize = backInfo.pageInfo.pageSize;
      this.confirmSearch = {
        ...backInfo.searchInfo
      };
    }
    this.init()
  },
  mounted() {
    this.scroll = utils.tableScroll(this.columns, this.$refs.table);
  },
  methods: {
    // 查询
    searchHandle(queryName, id) {
      this.$refs[queryName].validate(valid => {
        if (valid) {
          this.pagination.current = this.pagination.pageNo = 1;
          let searchParams = {}
          for (let li in this[queryName]) {
            if (this[queryName][li] != "" || (Array.isArray(this[queryName][li]) && this[queryName][li].length || typeof this[queryName][li] === "number")) {
              searchParams[li] = this[queryName][li];
            }
          }
          this.confirmSearch = {
            ...searchParams,
            id
          };
          this.tableListHandle();
        } else {
          return false;
        }
      });
    },
    // 重置
    resetQuery(queryName) {
      this[queryName] = {}
    },
    // 分页信息变化
    pageChangeHandle(option) {
      this.pagination.pageSize = option.pageSize;
      this.pagination.current = this.pagination.pageNo = option.current;
      this.tableListHandle()
    },
    // 表格数据渲染
    tableListHandle() {
      this.loading = true
      this[this.queryName] = {
        ...this.confirmSearch
      }
      console.log('this.tableUrl',this.tableUrl)
      this.$http.post(this.tableUrl, {
        ...this.confirmSearch,
        pageNo: this.pagination.pageNo,
        pageSize: this.pagination.pageSize
      }).then(resData => {
        /**
         * 列表渲染特殊处理
         * 原因：需求表明编辑等功能完成后需要回到原页面，但改变数据的某些状态或是字段会影响到渲染当前数据为空
         * 处理：如果请求的当前界面列表数据为空则回退一页
         */
        if (!resData.data.list.length && this.pagination.current > 1) {
          this.pagination.current = this.pagination.pageNo = this.pagination.pageNo - 1
          this.tableListHandle()
        } else {
          this.tableData = resData.data.list
          this.pagination.total = Number(resData.data.total);
        }
      }).catch(err => {
        this.$message.error(err.statusText)
      }).finally(() => {
        this.loading = false
      })
    },
    // 列表也跳转其他路由界面统一处理
    toOtherRouterPage(routerName, routerQuery) {
      let tableInfo = {
        searchInfo: {
          ...this.confirmSearch
        },
        pageInfo: {
          pageNo: this.pagination.pageNo,
          pageSize: this.pagination.pageSize
        }
      };
      this.$router.push({
        name: routerName,
        query: {
          ...routerQuery,
          tableInfo: JSON.stringify(tableInfo)
        }
      })
    }
  },
}