mixins_JeecgListMixin.js

mixins/JeecgListMixin.js

通用表格页面mixin，通常用于一般表格页面。包含了新增弹窗、编辑弹窗、详情弹窗、请求列表、搜索、删除、多选、批量删除、翻页、导入、导出、预览、文件下载等方法。

引入后，在页面的data项中新增url配置

/**
 * 新增修改完成调用 modalFormOk 方法 编辑弹框组件ref须定义为modalForm
 * 高级查询按钮调用 superQuery 方法  高级查询组件ref须定义为superQueryModal
 * data中url定义 list为查询列表  delete为删除单条记录  deleteBatch为批量删除
 */
data() {
  return {
    url: {
      list: '', // 列表请求地址
      delete: '', // 删除请求地址
      deleteBatch: '', // 批量删除请求地址
      exportXlsUrl: '', // 导出excel请求地址
    },
    disableMixinCreated: false // 禁用mixin中的created钩子函数
  }
}

mixin部分

data() {
  return {
    // token header
    tokenHeader: { 'X-Access-Token': Vue.ls.get(ACCESS_TOKEN) },
    // 查询条件-请不要在queryParam中声明非字符串值的属性
    queryParam: {},
    // 数据源列表
    dataSource: [],
    // 分页参数
    ipagination: {
      current: 1,
      pageSize: 10,
      pageSizeOptions: ['10', '20', '30'],
      showTotal: (total, range) => {
        return range[0] + '-' + range[1] + ' 共' + total + '条'
      },
      showQuickJumper: true,
      showSizeChanger: true,
      total: 0
    },
    // 排序参数
    isorter: {
      column: 'createTime',
      order: 'desc'
    },
    // 筛选参数
    filters: {},
    // table加载状态
    loading: false,
    // table选中keys
    selectedRowKeys: [],
    // table选中records
    selectionRows: [],
    // 搜索条件折叠
    toggleSearchStatus: false,
    // 高级查询条件生效状态
    superQueryFlag: false,
    // 高级查询条件
    superQueryParams: '',
    // 高级查询拼接方式
    superQueryMatchType: 'and'
  }
}

created() {
  if (!this.disableMixinCreated) {
    this.loadData()
    // 初始化字典配置 在自己页面定义
    this.initDictConfig()
  }
}

methods: {
  // 根据 url.list 加载数据
  loadData(arg)
  // 高级查询
  handleSuperQuery(params, matchType)
  // 获取查询条件
  getQueryParams()
  // 选择表格行
  onSelectChange(selectedRowKeys, selectionRows)
  // 清空选中行
  onClearSelected()
  // 搜索
  searchQuery()
  // 显示高级查询
  superQuery()
  // 重置查询参数
  searchReset()
  // 批量删除
  batchDel()
  // 删除
  handleDelete()
  // 点击编辑，显示编辑弹窗
  handleEdit(record)
  // 点击新增，显示新增弹窗
  handleAdd()
  // 分页
  handleTableChange(pagination, filters, sorter)
  // 展开|收起更多搜索项
  handleToggleSearch()
  // 新增/修改 成功时，重载列表
  modalFormOk()
  // 详情
  handleDetail(record)
  // 导出2
  handleExportXls2()
  // 导出
  handleExportXls(fileName)
  // 导入
  handleImportExcel(info)
  // 图片预览
  getImgView(text)
  // 文件下载
  downloadFile(text)
}