iov-pro-components 0.0.3

package/src/packages/table/src/main.vue

@@ -0,0 +1,668 @@
+<script>
+import isEqual from 'lodash/isEqual'
+import isNil from 'lodash/isNil'
+import lodashGet from 'lodash/get'
+import ProRequest from '@/packages/request'
+import Space from '@/packages/space'
+import Enums from '@/packages/enums'
+import ColumnTooltip from '@/packages/column-tooltip'
+import TableSearch from './search.vue'
+import TableFilter from './filter.vue'
+import TableSort, { SORT_ORDER } from './sort.vue'
+import { getComponentNames } from '@/utils/config-center'
+import { randomString } from '@/utils'
+import functionEval, { isEvalFunction } from '@/utils/function-eval'
+
+// 当前分页的事件
+export const PAGINATION_EVENTS = [
+  'size-change',
+  'current-change',
+  'prev-click',
+  'next-click	'
+]
+// 当前表格的事件
+export const TABLE_EVENTS = [
+  'select',
+  'select-all',
+  'selection-change',
+  'cell-mouse-enter',
+  'cell-mouse-leave',
+  'cell-click',
+  'cell-dblclick',
+  'row-click',
+  'row-contextmenu',
+  'row-dblclick',
+  'header-click',
+  'header-contextmenu',
+  'sort-change',
+  'filter-change',
+  'current-change',
+  'header-dragend',
+  'expand-change'
+]
+
+// 高级功能
+const ADVANCE_FUNCTION = {
+  searchable: TableSearch,
+  filters: TableFilter,
+  sortable: TableSort
+}
+
+export default {
+  name: 'IovProTable',
+  inject: {
+    pageThis: { value: 'pageThis', default: null }
+  },
+  props: {
+    // 外部数据源
+    dataSource: {
+      type: Array,
+      default: () => []
+    },
+    // 表格项配置属性
+    columns: {
+      type: Array,
+      default: () => []
+    },
+    // 配置项
+    config: {
+      type: Object,
+      default: () => ({
+        // 表格配置
+        table: {},
+        // 分页配置,如需分页，则设置此值为false
+        pagination: {}
+      })
+    },
+    // 请求函数
+    //  - api：请求方法
+    //  - params：请求入参
+    //  - requiredFields：接口请求必须的字段
+    //  - reloadOnParamsChange：当params发生变化，是否重新请求接口
+    //  - threshold：接口请求的阈值间隔，防止短时间快速请求
+    request: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      updatedTableConfig: {},
+      advanceData: {},
+      displayColumns: [],
+      tableKey: randomString(32),
+      currPage: 1,
+      pageSize: this.config?.pagination?.pageSize || 10
+    }
+  },
+  computed: {
+    /**
+     * 请求的入参
+     * @time 2024-11-15 09:40:22
+     */
+    requestProps() {
+      // 从配置中结构出api和入参，必穿字段等属性
+      const {
+        api,
+        params,
+        requiredFields,
+        reloadOnParamsChange,
+        threshold
+      } = this.request
+      // 请求入参
+      const requestParams = {
+        ...(params || {}),
+        ...this.advanceData,
+        currPage: this.currPage,
+        pageSize: this.pageSize
+      }
+      // 如果无需分页，则删除分页属性
+      if (this.config.pagination === false) {
+        delete requestParams.currPage
+        delete requestParams.pageSize
+      }
+      return {
+        api: (...args) => {
+          // 如果当前传入了函数
+          if (typeof api === 'function') {
+            return api(...args)
+          } else {
+            // 如果有外部数据源
+            if (this.dataSource?.length > 0) {
+              return this.getListByDataSource(...args)
+            }
+            return { list: [], totalCount: 0 }
+          }
+        },
+        params: requestParams,
+        requiredFields,
+        reloadOnParamsChange: isNil(reloadOnParamsChange) ? true : reloadOnParamsChange,
+        threshold: threshold || 10
+      }
+    },
+
+    /**
+     * 表格配置
+     * @time 2024-11-15 09:52:03
+     */
+    tableConfig() {
+      return {
+        ...(this.config.table || {}),
+        ...this.updatedTableConfig
+      }
+    },
+
+    /**
+     * 分页配置
+     * @time 2024-11-15 09:53:58
+     */
+    paginationConfig() {
+      return {
+        pageSizes: [10, 20, 50],
+        layout: 'total, prev, pager, next, sizes',
+        ...(this.config.pagination || {})
+      }
+    },
+
+    /**
+     * 映射字段
+     * @time 2024-11-15 13:57:44
+     */
+    aliasMap() {
+      return {
+        list: 'list',
+        totalCount: 'totalCount',
+        ...(this.request.aliasMap || {})
+      }
+    }
+  },
+  watch: {
+    /**
+     * 监听数据源变化
+     * @time 2024-11-20 11:26:50
+     */
+    dataSource() {
+      this.reset()
+    },
+
+    /**
+     * 监听请求入参变化
+     * @time 2025-01-23 19:04:03
+     */
+    'request.params': {
+      handler(newValue, oldValue) {
+        // 如果参数变化不需要重新请求数据
+        if (!this.request.reloadOnParamsChange) {
+          return
+        }
+        // 如果新老值相等，则不允许重新赋值
+        if (isEqual(newValue, oldValue)) {
+          return
+        }
+        // 从第一页开始加载
+        this.currPage = 1
+      },
+      deep: true
+    }
+  },
+  created() {
+    // 当前转换函数
+    this.functionEval = functionEval(() => ({
+      data: this.$refs.request.data,
+      config: this.config,
+      $route: this.$route,
+      $router: this.$router,
+      tableThis: this,
+      pageThis: this.pageThis || this.$parent
+    }))
+  },
+  mounted() {
+    this.doLayout(this.columns)
+  },
+  methods: {
+    /**
+     * 获取表格的props
+     * @param  {Object} props 当前输入的props
+     * @time 2024-11-15 09:56:58
+     */
+    getTableProps(props) {
+      // 当前属性的key
+      const PROP_KEYS = [
+        'index',
+        'columnKey',
+        'label',
+        'prop',
+        'width',
+        'minWidth',
+        'fixed',
+        'renderHeader',
+        'resizable',
+        'formatter',
+        'showOverflowTooltip',
+        'align',
+        'headerAlign',
+        'className',
+        'labelClassName',
+        'selectable',
+        'reserveSelection'
+      ]
+      return PROP_KEYS.reduce(
+        (memo, propKey) => {
+          // 如果值非空，则继续添加
+          if (!isNil(props[propKey])) {
+            memo[propKey] = props[propKey]
+          }
+          return memo
+        }, {}
+      )
+    },
+
+    /**
+     * 绑定事件
+     * @param  {Array} events 当前事件集合
+     * @time 2024-11-15 14:09:31
+     */
+    bindEvent(events) {
+      return events.reduce(
+        (memo, key) => {
+          // 赋值事件
+          memo[key] = (...args) => {
+            // 事件名称
+            let eventKey = key
+            // 如果是current-change事件
+            if (key === 'current-change') {
+              // 如果当前设置的表格事件
+              if (events === TABLE_EVENTS) {
+                eventKey = `table-${key}`
+              } else {
+                // 设置当前页
+                this.currPage = args[0]
+                // 刷新接口
+                this.$nextTick(this.refresh.bind(this))
+              }
+            }
+            // 如果页码发生改变
+            if (key === 'size-change') {
+              // 重置到第一页开始请求接口
+              this.currPage = 1
+              // 设置每页展示条数
+              this.pageSize = args[0]
+              // 刷新接口
+              this.$nextTick(this.refresh.bind(this))
+            }
+            // 将事件抛出去
+            this.$emit(eventKey, ...args)
+          }
+          return memo
+        }, {}
+      )
+    },
+
+    /**
+     * 从dataSource中获取列表数据
+     * @time 2024-11-22 11:23:49
+     */
+    getListByDataSource(params) {
+      // 获取所有入参的key（过滤掉分页属性，排序属性）
+      const paramKeys = Object.keys(params)
+        .filter(key => !['currPage', 'pageSize', 'sortBy', 'orderBy'].includes(key))
+        .filter(key => !isNil(params[key]))
+      // 开始过滤数据
+      let list = this.dataSource.filter(item => {
+        return paramKeys.every(key => {
+          // 如果筛选的数据是数组，但是当前表格数据不是
+          if (Array.isArray(params[key])) {
+            // 如果表格数据也是数组，则比较数据是否一致
+            if (Array.isArray(item[key])) {
+              return params[key].some(p => item[key].includes(p))
+            }
+            // 否则判断表格数据是否在筛选项里
+            return params[key].includes(item[key])
+          }
+          // 如果是字符串或者数字等类型，则判断
+          return `${item[key]}`.indexOf(params[key]) >= 0
+        })
+      })
+      // 开始排序
+      if (!isNil(params.orderBy)) {
+        list = list.sort((prev, next) => {
+          // 如果当前是升序
+          if (params.sortBy === SORT_ORDER.ASCENDING) {
+            return prev[params.orderBy] - next[params.orderBy]
+          }
+          // 如果是降序
+          return next[params.orderBy] - prev[params.orderBy]
+        })
+      }
+      // 开始分页（如果需要分页）
+      if (this.config.pagination !== false) {
+        list = list.slice((params.currPage - 1) * params.pageSize, params.currPage * params.pageSize)
+      }
+      return {
+        list,
+        totalCount: this.dataSource.length
+      }
+    },
+
+    /**
+     * 重新刷新数据
+     * @time 2024-11-18 09:44:47
+     */
+    refresh() {
+      // 重新刷新数据
+      this.$refs.request.onReload()
+    },
+
+    /**
+     * 重置分页数据后刷新
+     * @param  {Number} pageSize 页码
+     * @time 2024-11-18 09:46:02
+     */
+    reset(pageSize) {
+      // 如果当前是数字
+      if (typeof pageSize === 'number') {
+        this.pageSize = pageSize
+      }
+      // 从第一页开始加载
+      this.currPage = 1
+      // 刷新列表数据
+      this.$nextTick(this.refresh.bind(this))
+    },
+
+    /**
+     * 当选择了高级属性
+     * @param  {Object}       column 当前列的配置
+     * @param  {String|Array} value  当前输入或者选中的值
+     * @time 2024-11-22 11:10:38
+     */
+    onConfirmAdvance(column, value) {
+      // 取出当前prop的值
+      const { prop, config } = column
+      // 开始设置值
+      this.$set(this.advanceData, config?.fieldKey || prop, value)
+      // 从第一页开始加载
+      this.currPage = 1
+      // 抛出过滤改变的方法
+      this.$emit('filter-change', column, value)
+    },
+
+    /**
+     * 如果重置了高级属性
+     * @param  {Object} column 当前列的配置
+     * @time 2024-11-22 11:16:41
+     */
+    onResetAdvance(column) {
+      // 取出当前prop的值
+      const { config, prop } = column
+      // 开始设置值
+      this.$set(this.advanceData, config?.fieldKey || prop, undefined)
+      // 从第一页开始加载
+      this.currPage = 1
+      // 抛出过滤改变的方法
+      this.$emit('filter-change', column, column.filters ? [] : '')
+    },
+
+    /**
+     * 如果点击了排序属性
+     * @param  {Object} column 当前列的配置
+     * @param  {String} sort   当前排序方式
+     * @time 2024-11-22 11:16:41
+     */
+    onSortAdvance(column, sort) {
+      // 取出当前prop的值
+      const { prop } = column
+      // 设置排序方式
+      this.$set(this.advanceData, 'orderBy', isNil(sort) ? undefined : prop)
+      // 设置排序字段
+      this.$set(this.advanceData, 'sortBy', isNil(sort) ? undefined : sort)
+      // 如果request不监听params变化，则需要手动刷新
+      if (!this.requestProps.reloadOnParamsChange) {
+        this.reset(this.pageSize)
+      }
+      // 遍历所有的列，将其他列的排序方式清空
+      this.columns.forEach(c => {
+        // 如果循环出来的列是可排序，但是非当前排序字段
+        if (c !== column && c.sortable) {
+          this.$refs[`${c.prop}-sortable`] && this.$refs[`${c.prop}-sortable`].onReset()
+        }
+      })
+      // 抛出排序改变方法
+      this.$emit('sort-change', column, column.prop, sort)
+    },
+
+    /**
+     * 更新表格配置
+     * @param  {Object} config 表格配置
+     * @time 2024-11-27 15:57:50
+     */
+    updateTableConfig(config = {}) {
+      this.updatedTableConfig = {
+        ...this.updatedTableConfig,
+        ...config
+      }
+    },
+
+    /**
+     * 隐藏指定的表格
+     * @param  {Array} columns 表格数据
+     * @time 2024-11-27 18:42:59
+     */
+    doLayout(columns) {
+      // 记录当前隐藏的列
+      this.displayColumns = columns.filter(this.vif)
+      // 重新渲染
+      this.tableKey = randomString(32)
+    },
+
+    /**
+     * 判断当前表单项是否需要渲染
+     * @param  {Object} itemConfig 表单项配置
+     * @time 2024-10-31 16:56:03
+     */
+    vif(columnConfig) {
+      // 取出当前this
+      const tableThis = this
+      // 是否展示
+      let display = true
+      // 如果当前是boolean类型
+      if (typeof columnConfig.vif === 'boolean') {
+        display = columnConfig.vif
+      }
+      // 如果当前是函数
+      if (isEvalFunction(columnConfig.vif)) {
+        // 执行函数，获取展示状态
+        display = tableThis.functionEval(columnConfig.vif)()
+      }
+      // 返回状态
+      return display
+    }
+  },
+  render() {
+    const [
+      Table,
+      TableColumn,
+      Tag,
+      Link,
+      Pagination
+    ] = getComponentNames(['table', 'table-column', 'tag', 'link', 'pagination'])
+    return (
+      <ProRequest
+        ref='request'
+        props={this.requestProps}
+        scopedSlots={{
+          default: ({ loading, data }) => (
+            <div
+              v-loading_fullscreen_lock={loading}
+              element-loading-spinner='page-loading'
+              class='iov-pro-table'
+            >
+              <Table
+                ref='table'
+                key={this.tableKey}
+                props={{
+                  data: data ? lodashGet(data, this.aliasMap.list) : [],
+                  ...this.tableConfig
+                }}
+                class='iov-pro-table__table'
+                on={this.bindEvent(TABLE_EVENTS)}
+              >
+                { // 遍历配置项
+                  this.displayColumns.map(column => {
+                    // 当前属性
+                    const props = this.getTableProps(column)
+                    // slots
+                    const scopedSlots = {}
+                    // 插槽的执行方法
+                    const scopedSlotsFunc = column.slotName
+                      ? this.$scopedSlots[column.slotName]
+                      : this.$scopedSlots[column.prop]
+                    // 根据类型去设置props和scopedSlots
+                    switch (column.type) {
+                      case 'enum': // 如果当前是枚举类型
+                        scopedSlots.default = ({ row }) => <Enums value={row[column.prop]} enums={column.enums} />
+                        break
+                      case 'tag': // 如果当前是tag
+                        scopedSlots.default = ({ row }) => {
+                          // 如果没有数据，则不渲染
+                          if (isNil(row[column.prop])) {
+                            return null
+                          }
+                          // 当前值
+                          const value = Array.isArray(row[column.prop])
+                            ? row[column.prop]
+                            : [row[column.prop]]
+                          // 遍历当前值
+                          return (
+                            <Space
+                              direction='horizontal'
+                              align='center'
+                              space={6}
+                            >
+                              { // 遍历数据
+                                value.map(v => {
+                                  // 取出当前枚举的值
+                                  const columnEnum = column.enums.find(e => e.value === v) || {}
+                                  // 当前展示的tag
+                                  return <Tag type={columnEnum.type} props={{ size: 'mini', hit: true, ...(column.config || {}) }}>{columnEnum.label}</Tag>
+                                })
+                              }
+                            </Space>
+                          )
+                        }
+                        break
+                      case 'link': // 如果当前是超链接
+                        scopedSlots.default = ({ row }) => {
+                          // 超链接的点击事件
+                          const linkClick = column.linkClick ? column.linkClick : () => {}
+                          // 触发点击事件
+                          return <Link type='primary' underline={false} onClick={linkClick}>{ column.linkText || row[column.prop] }</Link>
+                        }
+                        break
+                      case 'popover': // 如果当前是浮动展示全部数据
+                        scopedSlots.default = ({ row }) => (
+                          <ColumnTooltip
+                            props={{
+                              data: row[column.prop],
+                              ...(column.config || {})
+                            }}
+                          />
+                        )
+                        break
+                      case 'img': // 如果当前是图片
+                        scopedSlots.default = ({ row }) => (
+                          <img
+                            attrs={{
+                              src: row[column.prop],
+                              ...(column.config || {})
+                            }}
+                          />
+                        )
+                        break
+                      case 'expand': // 如果当前是展开收起
+                        // 当前类型
+                        props.type = column.type
+                        // 设置默认插槽
+                        scopedSlots.default = scope => (scopedSlotsFunc ? scopedSlotsFunc(scope) : null)
+                        break
+                      case 'slot': // 如果当前是插槽
+                        scopedSlots.default = scope => (scopedSlotsFunc ? scopedSlotsFunc(scope) : null)
+                        break
+                      default:
+                        // 设置一下类型
+                        props.type = column.type
+                        break
+                    }
+                    // 表头header插槽
+                    const tableColumnHeader = []
+                    // 高级功能(筛选，搜索，排序)
+                    Object.keys(ADVANCE_FUNCTION).forEach(name => {
+                      // 如果有高级功能
+                      if (!isNil(column[name])) {
+                        // 获取当前组件
+                        const AdvanceFn = ADVANCE_FUNCTION[name]
+                        // 表头插槽多塞入一个组件
+                        tableColumnHeader.push(
+                          <AdvanceFn
+                            ref={`${column.prop}-${name}`}
+                            column={column}
+                            onSort={this.onSortAdvance.bind(this, column)}
+                            onConfirm={val => this.onConfirmAdvance(column, val)}
+                            onReset={this.onResetAdvance.bind(this, column)}
+                          />
+                        )
+                      }
+                    })
+                    // 表头插槽
+                    const scopedSlotsHeader = this.$scopedSlots[`${column.prop}:header`]
+                    // 如果当前有搜索，排序等功能
+                    if (tableColumnHeader.length > 0) {
+                      scopedSlots.header = () => (
+                        <Space
+                          class='iov-pro-table__header'
+                          align='center'
+                          space='4'
+                          direction='horizontal'
+                        >{scopedSlotsHeader ? scopedSlotsHeader() : <span>{column.label}</span>}{tableColumnHeader}</Space>
+                      )
+                    } else {
+                      // 如果表头需要插槽
+                      if (scopedSlotsHeader) {
+                        scopedSlots.header = scopedSlotsHeader
+                      }
+                    }
+                    return (
+                      <TableColumn
+                        ref='tableColumn'
+                        props={props}
+                        scopedSlots={scopedSlots}
+                      />
+                    )
+                  })
+                }
+              </Table>
+              { // 如果有分页数量才展示
+                data && lodashGet(data, this.aliasMap.totalCount) > 0 && this.config.pagination !== false
+                  ? (
+                    <Pagination
+                      props={{
+                        ...this.paginationConfig,
+                        currentPage: this.currPage,
+                        pageSize: this.pageSize,
+                        total: lodashGet(data, this.aliasMap.totalCount)
+                      }}
+                      class='iov-pro-table__pagination'
+                      on={this.bindEvent(PAGINATION_EVENTS)}
+                    />
+                  ) : null
+              }
+            </div>
+          )
+        }}
+        on={{
+          loaded: respData => this.$emit('loaded', respData)
+        }}
+      />
+    )
+  }
+}
+</script>