listPage.js

import { mapGetters } from 'vuex';

/**
 * 需要页面组件自己注入或重写参数
 * listData: 页面列表数据 导入名字key需重命名为listData
 * pagination: 列表的分页数据
 * filters: 带有搜索条件的页面需自己定义filters
 *
 * 需要页面组件自己注入或重写方法
 * fetchList: 获取列表数据的方法 通常为触发action的方法
 * updatePagination: 切换分页大小需要注入此方法更新分页信息
 */
export default {
  data() {
    return {
      // listData: [], // 需页面组件自己注入列表并命名为 listData
      filters: {},
      selected: {},
      selectedList: [], // 带有选择框列表选中的列表项
      editType: 0, // 带有新增/编辑的页面区分编辑状态
      dialogEditVisible: false, // 带有新增/编辑的页面弹出框可/不可见
      dialogDetailVisible: false, // 详情弹窗
    };
  },
  //
  computed: {
    ...mapGetters(['loading']),
  },
  created() {
    // 当页面没有列表数据的时候调用
    if (!this.listData || !this.listData.length) {
      this.fetchList({
        pageNum: 1,
      });
    }
  },
  methods: {
    // 页面组件需自己实现获取列表数据的方法
    fetchList() {},
    // 点击搜索时处理函数
    searchList() {
      this.changePage(1);
    },
    // 获取过滤条件方法 组件可自己实现
    getFilters() {
      let { timeRange, ...filters } = this.$getFilters(this.filters);
      if (timeRange) {
        const [starttime, endtime] = timeRange;
        if (starttime) filters.starttime = starttime;
        if (endtime) filters.endtime = endtime;
      }
      return filters;
    },
    // 页码改变时处理函数
    changePage(index = 1) {
      const filters = this.getFilters();
      this.fetchList({
        ...filters,
        pageNum: index,
      });
    },
    // 分页大小改变时处理函数
    changeSizeHandle(pageSize) {
      const filters = this.getFilters();
      this.fetchList({
        ...filters,
        pageNum: 1,
        pageSize: pageSize,
      });
      this.updatePagination({
        pageNum: 1,
        pageSize: pageSize,
      });
    },
    // 当列表可选时 处理选择函数
    handleSelectionChange(val) {
      this.selectedList = val;
    },
    resetEditDialog(done) {
      if (typeof this.initSelected === 'function') {
        this.selected = this.initSelected();
      } else {
        this.selected = {};
      }
      done && typeof done == 'function'
        ? done()
        : (this.dialogEditVisible = false);
    },
    resetDetailDialog(done) {
      if (typeof this.initSelected === 'function') {
        this.selected = this.initSelected();
      } else {
        this.selected = {};
      }
      done && typeof done == 'function'
        ? done()
        : (this.dialogEditVisible = false);
    },
  },
};