a-common-list/packages/ya-wei-list/src/list.js

基于vxe-table封装的自定义可配置表格

/**
 * lz，2022-09-13 10:13
 * 调用接口的通用列表
 */

import { Button } from '../../button'
// import { VXETable } from '../../v-x-e-table'
// 引入通用表格
import aCommonList from '../../a-common-list/src/list'
// 引入高级查询
import advancedQuery from '../../advanced-query/src/query'
// 引入分页
import VxePager from '../../pager/src/pager'
// 引入配置信息
import options from './options'
// 引入axios用于请求接口
import { axios } from './request'

export default {
  name: 'ya-wei-list',
  inheritAttrs: false,
  data () {
    return {
      // 表格数据
      tableData: [],
      // 表格列
      columns: [],
      // 表格加载状态
      loading: false,
      // 表格配置
      tableOption: {},
      // 表格分页数据
      tablePage: {
        // 当前页
        pageNo: 1,
        // 每页数据量
        pageSize: options.pageSize,
        // 列表总量
        totalResult: 0
      },
      // 是否显示高级查询
      showQuery: false,
      // 高级查询页面渲染所需数据
      queryOption: [],
      // 列表高级查询查询条件
      listQuery: {}
    }
  },
  props: {
    // 表格配置key
    tableKey: {
      type: String,
      require: true
    },
    // 是否显示分页
    showTablePage: {
      type: Boolean,
      default: true
    },
    // 是否显示表格上方区域
    showTop: {
      type: Boolean,
      default: true
    },
    // 是否显示高级查询
    showAdvancedQuery: {
      type: Boolean,
      default: true
    },
    // 自定义分页参数
    customPage: {
      type: Object,
      default: () => {
        return {
          // 当前页
          pageNo: options.pageNo,
          // 每页数据量
          pageSize: options.pageSize,
          // 列表总量
          totalResult: 0
        }
      }
    },
    // 列表高级查询查询条件
    superParams: {
      type: Array,
      default: () => []
    }
  },
  // 监听属性 类似于data概念",
  computed: {},
  // 监控data中的数据变化",
  watch: {
    // 监听表格key
    tableKey () {
      this.initTable()
    },
    // 深度监听自定义分页
    customPage: {
      deep: true,
      handler (val) {
        if (val) this.initTablePage()
      }
    }
  },
  methods: {
    // 获取表格当前选中数据
    getCheckboxRecords () {
      const ref = this.tableKey
      return this.$refs[ref]?.$refs[ref]?.getCheckboxRecords() || []
    },
    // 分页触发方法
    handlePageChange ({ currentPage, pageSize }) {
      this.tablePage.pageNo = currentPage
      this.tablePage.pageSize = pageSize
      this.initData()
    },
    // 清空数据
    clearData () {
      this.tableData = []
      this.columns = []
      this.loading = false
      this.tableOption = {}
      this.tablePage = {
        pageNo: options.pageNo,
        pageSize: options.pageSize,
        totalResult: 0
      }
    },
    // 刷新表格
    reload () {
      this.tableData = []
      this.loading = false
      this.initData()
    },
    // 初始化表格
    initTable () {
      this.clearData()
      this.initOption()
        .then(() => {
          this.initData()
        })
    },
    // 初始化分页
    initTablePage (e) {
      // 自定义分页数据不存在或者开启分页，不使用自定义分页数据
      if (this.showTablePage) {
        this.tablePage = {
          pageNo: e.pageNo || options.pageNo,
          pageSize: e.pageSize || options.pageSize,
          totalResult: e?.total
        }
      } else if (this.customPage) {
        const page = { ...this.customPage }
        if (Object.keys(page).length > 0) {
          this.tablePage = page
        }
      }
    },
    // 初始化表格数据
    async initData () {
      this.loading = true
      const { success, result } = await this.getTableData()
      if (success) {
        this.tableData = result.records || []
      }
      this.loading = false
    },
    // 初始化表格配置
    async initOption () {
      const { success, result } = await this.getTableOption()
      if (success) {
        this.queryOption = JSON.parse(JSON.stringify(result.relFields))
        this.tableOption = {
          width: result.width,
          height: result.height,
          align: result.columnTitleAlign,
          border: true
        }
        this.initTablePage(result)
        // 让columns最后赋值，避免出现意外情况
        const timeout = setTimeout(() => {
          this.initColumn(result.relFields)
          clearTimeout(timeout)
        }, 50)
      }
    },
    // 初始化表格列
    initColumn (list) {
      let columns = []
      const list1 = [...list]
      list1.filter(item => item.field).map(item => {
        const column = Object.assign(item, {
          width: item.columnWidths,
          title: item.fieldCn,
          field: item.field?.fieldName
        })
        if (item.columnSort) column.sort = item.columnSort
        columns.push(column)
      })
      columns = columns.filter(item => item.title && item.field)
      /* columns.push({
        columnAttributes: '-3',
        width: 100,
        title: '测试checkBox',
        field: 'checkBox'
      })
      columns.push({
        columnAttributes: '-2',
        width: 100,
        title: '操作',
        field: 'caoZuo'
      }) */
      this.columns = columns || []
    },
    // 获取插槽所用数据
    getScopedSlots (columns, h) {
      const slots = {}
      const $scopedSlots = this.$scopedSlots
      if (columns && columns.length > 0) {
        // 为所有列增加头部插槽，插槽名=列字段+Header
        columns.map(item => {
          const header = `${item.field}Header`
          if ($scopedSlots[header]) {
            slots[header] = (props) => {
              return h('div', $scopedSlots[header](props))
            }
          }
          // 判断当前列是否为自定义列，如果是增加与列字段同名的插槽
          if (item.columnAttributes === -2 || item.columnAttributes === '-2') {
            if ($scopedSlots[item.field]) {
              slots[item.field] = (props) => {
                return h('div', $scopedSlots[item.field](props))
              }
            }
          }
        })
      }
      return slots
    },
    // 通过接口调用获取表格配置
    async getTableOption () {
      const configName = this.tableKey
      if (configName) {
        const res = await axios.request({
          url: 'grid-config/queryAllByName',
          method: 'GET',
          params: {
            configName
          }
        })
        // if (!res.success) VXETable.modal.message({ status: 'error', content: res.message || '查询表格配置失败' })
        return Promise.resolve(res.data)
      }
    },
    // 通过接口调用获取表格数据
    async getTableData () {
      const configName = this.tableKey
      if (configName) {
        const { pageNo, pageSize } = this.tablePage
        const superParams = this.superParams
        const listQuery = this.listQuery
        const res = await axios.request({
          url: 'list-common/queryCommonList',
          method: 'POST',
          params: {
            configName,
            pageNo,
            pageSize
          },
          data: {
            superParams,
            listQuery
          }
        })
        // if (!res.success) VXETable.modal.message({ status: 'error', content: res.message || '查询表格数据失败' })
        return Promise.resolve(res.data)
      }
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）",数据模型已加载，方法已加载,html模板已加载,html模板未渲染
  created () {
    this.initTable()
  },
  render (h) {
    // eslint-disable-next-line @typescript-eslint/no-this-alias
    const that = this
    const { tableOption, loading, tableData, columns, tablePage } = this.$data
    const ref = this.tableKey
    const aCommonListAttr = {
      tableKey: ref,
      tableOption,
      loading,
      tableData,
      columns
    }
    const scopedSlots = this.getScopedSlots(columns, h)
    const vxePagerAttr = {
      border: true,
      loading,
      currentPage: tablePage.pageNo,
      pageSize: tablePage.pageSize,
      total: tablePage.totalResult,
      pageSizes: options.pageSizes,
      layouts: ['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']
    }
    // 是否显示分页
    const showTablePage = this.showTablePage
    // 是否显示高级查询
    const showAdvancedQuery = this.showAdvancedQuery
    return h('div', { class: 'ya-wei-list' },
      [
        this.showTop && h('vxe-toolbar', {
          scopedSlots: {
            buttons () {
              return [that.$slots.buttons, h(Button, {
                attrs: { content: '刷新', status: 'primary' },
                on: {
                  click: () => {
                    that.initData()
                  }
                }
              }), showAdvancedQuery && h(Button, {
                attrs: { content: '高级查询', status: 'primary' },
                on: {
                  click: () => {
                    that.showQuery = true
                  }
                }
              })]
            }
          }
        }),
        showAdvancedQuery && h(advancedQuery, {
          attrs: { visible: this.showQuery, option: this.queryOption || [], tableKey: this.tableKey, data: this.listQuery },
          on: {
            updateVisible: (flag) => {
              this.showQuery = flag
            },
            submit: (e) => {
              this.listQuery = e
              this.initData()
            }
          }
        }),
        h(aCommonList, { ref, attrs: aCommonListAttr, scopedSlots, on: this.$listeners }),
        showTablePage && h(VxePager, { attrs: vxePagerAttr, on: { 'page-change': this.handlePageChange } })
      ]
    )
  }
}