@meethive/components 0.0.1

package/es/ProTable/ProTable.js

@@ -0,0 +1,279 @@
+ function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
+import { defineComponent, useSlots, watch, onMounted, onUnmounted, computed, ref, reactive, inject } from 'vue'
+import { Spin } from 'ant-design-vue'
+import { debounce } from 'lodash-es'
+import Header from './Header.js'
+import Alert from './Alert.js'
+import Content from './Content.js'
+import JPagination from './Pagination.js'
+import { proTableProps } from './setting'
+import { TableConfig } from '../utils/constants'
+import { useTableInject } from './hooks'
+import useProTableStyle from './style'
+import { onlyMessage } from '@meethive/utils'
+import { useLocaleReceiver } from '../LocaleReciver'
+
+export default defineComponent({
+  name: 'JProTable',
+  components: {
+    Spin,
+    Header,
+    Alert,
+    Content,
+    JPagination
+  },
+  props: {
+    ...proTableProps
+  } ,
+  setup(props, { expose }) {
+    const tableConfig = inject(TableConfig, {
+      pagination: {}
+    })
+    const slots = useSlots()
+
+    const myPagination = computed(() => {
+      const globalPagination = (tableConfig ).pagination || {}
+      let showQuickJumper = _nullishCoalesce(_nullishCoalesce(globalPagination.showQuickJumper, () => ( props.pagination.showQuickJumper)), () => ( false))
+      return {
+        showSizeChanger: true,
+        size: 'size',
+        pageSizeOptions: ['12', '24', '48', '96'],
+        ...globalPagination,
+        ...props.pagination,
+        showQuickJumper
+      }
+    })
+
+    const loading = ref(false)
+    const _dataSource = ref([])
+    const _mode = ref(props.mode || props.modeValue || 'CARD')
+    const column = ref(4)
+
+    const page = reactive({
+      pageIndex: 0,
+      pageSize: 12,
+      total: 0,
+      loading: false
+    })
+
+    const prefixCls = computed(() => 'pro-table')
+    const [wrapSSR, hashId] = useProTableStyle(prefixCls)
+    const [contextLocale] = useLocaleReceiver('ProTable')
+
+    let currentRequestId = 0
+    const extraSlots = ['headerRightRender', 'headerLeftRender', 'paginationRender', 'alertRender']
+
+    const _rowSelection = useTableInject()
+
+    const showAlert = computed(() => {
+      return props.alertShow && (_optionalChain([props, 'access', _ => _.rowSelection, 'optionalAccess', _2 => _2.selectedRowKeys, 'optionalAccess', _3 => _3.length]) || _optionalChain([_rowSelection, 'optionalAccess', _4 => _4.value, 'optionalAccess', _5 => _5.selectedRowKeys, 'optionalAccess', _6 => _6.length]))
+    })
+
+    const showPagination = computed(() => {
+      return !!_dataSource.value.length && !props.noPagination && props.type === 'PAGE'
+    })
+
+    const onCheck = (e) => {
+      _mode.value = e.target.value
+    }
+
+    const handleData = (result, _params) => {
+      if (props.type === 'PAGE') {
+        // 判断如果是最后一页且最后一页为空，就跳转到前一页
+        // 判断条件：如果是total分开查询，判断result的长度；如果不分开查询就判断result.data的长度
+        if (props.totalRequest) {
+          if (result.length === 0) {
+            return true
+          } else {
+            _dataSource.value = result || []
+            page.pageIndex = _optionalChain([_params, 'optionalAccess', _7 => _7.pageIndex]) || 0
+            page.pageSize = _optionalChain([_params, 'optionalAccess', _8 => _8.pageSize]) || 12
+            page.total = page.pageSize * (page.pageIndex + 1) + 1
+          }
+        } else {
+          if (
+            _optionalChain([result, 'optionalAccess', _9 => _9.total]) &&
+            _optionalChain([result, 'optionalAccess', _10 => _10.pageSize]) &&
+            _optionalChain([result, 'optionalAccess', _11 => _11.pageIndex]) &&
+            _optionalChain([result, 'optionalAccess', _12 => _12.data, 'optionalAccess', _13 => _13.length]) === 0
+          ) {
+            return true
+          } else {
+            _dataSource.value = _optionalChain([result, 'optionalAccess', _14 => _14.data]) || []
+            page.pageIndex = _optionalChain([result, 'optionalAccess', _15 => _15.pageIndex]) || 0
+            page.pageSize = _optionalChain([result, 'optionalAccess', _16 => _16.pageSize]) || 12
+            page.total = _optionalChain([result, 'optionalAccess', _17 => _17.total]) || 0
+          }
+        }
+      } else {
+        _dataSource.value = result || []
+      }
+      return false
+    }
+
+    const handleSearch = async (_params) => {
+      if (Array.isArray(props.dataSource)) {
+        _dataSource.value = props.dataSource
+      } else if (props.request) {
+        const __params = {
+          pageIndex: page.pageIndex,
+          pageSize: Number(page.pageSize),
+          ...props.defaultParams,
+          ..._params,
+          terms: [
+            ...(_optionalChain([props, 'access', _18 => _18.defaultParams, 'optionalAccess', _19 => _19.terms]) || []),
+            ...(_optionalChain([_params, 'optionalAccess', _20 => _20.terms]) || [])
+          ]
+        }
+        loading.value = true
+        const resp = await props.request(__params).finally(() => {
+          loading.value = false
+        })
+        if (resp.success) {
+          const flag = handleData(resp.result || {}, _params)
+          if (flag) {
+            // 判断如果是最后一页且最后一页为空，就跳转到前一页
+            if (props.totalRequest) {
+              onlyMessage(_optionalChain([contextLocale, 'access', _21 => _21.value, 'access', _22 => _22.pagination, 'optionalAccess', _23 => _23.lastPage]) || '', 'error')
+              // 置灰下一页
+              page.total = page.pageSize * (page.pageIndex > 0 ? page.pageIndex : 1)
+            } else {
+              page.pageIndex = page.pageIndex > 0 ? page.pageIndex - 1 : 0
+              handleSearch({
+                ..._params,
+                pageSize: page.pageSize,
+                pageIndex: page.pageIndex
+              })
+            }
+          }
+        } else {
+          _dataSource.value = []
+        }
+        if (props.totalRequest) {
+          currentRequestId++
+          const requestId = currentRequestId
+          page.loading = true
+          props.totalRequest(__params).then((res) => {
+            if (res.success) {
+              page.total = res.result || 0
+            }
+          }).finally(() => {
+            if (requestId === currentRequestId) {
+              page.loading = false
+            }
+          })
+        }
+      } else {
+        _dataSource.value = []
+      }
+    }
+
+    const _debounceFn = debounce(handleSearch, 300)
+
+    const onPageChange = (_page, size) => {
+      handleSearch({
+        ...props.params,
+        pageSize: size,
+        pageIndex: page.pageSize === size ? (_page ? _page - 1 : 0) : 0
+      })
+    }
+
+    const onClose = () => {
+      if (props.rowSelection) {
+        _optionalChain([props, 'access', _24 => _24.rowSelection, 'access', _25 => _25.onChange, 'optionalCall', _26 => _26([], [])])
+        _optionalChain([props, 'access', _27 => _27.rowSelection, 'access', _28 => _28.onSelectNone, 'optionalCall', _29 => _29()])
+      } else if (_optionalChain([_rowSelection, 'optionalAccess', _30 => _30.value])) {
+        _optionalChain([_rowSelection, 'access', _31 => _31.value, 'optionalAccess', _32 => _32.onSelectNone, 'optionalCall', _33 => _33()])
+      }
+    }
+
+    /**
+     * 刷新数据
+     * @param _params
+     */
+    const reload = (_params) => {
+      handleSearch({
+        ...props.params,
+        ..._params,
+        pageSize: page.pageSize || 12,
+        pageIndex: page.pageIndex || 0
+      })
+    }
+
+    const _gridColumns = computed(() => {
+      if (_optionalChain([props, 'access', _34 => _34.gridColumns, 'optionalAccess', _35 => _35.length])) {
+        const arr = props.gridColumns
+        const lastValue = _optionalChain([arr, 'access', _36 => _36.slice, 'call', _37 => _37(-1), 'optionalAccess', _38 => _38[0]])
+        if (_optionalChain([arr, 'optionalAccess', _39 => _39.length]) < 4) {
+          while (arr.length < 4) {
+            arr.push(lastValue)
+          }
+          return arr
+        } else {
+          return props.gridColumns.slice(0, 4)
+        }
+      } else {
+        return [1, 2, 3, 4]
+      }
+    })
+
+    // 监听宽度，计算显示卡片个数
+    const windowChange = () => {
+      const ele = document.getElementById('jtable-body-spin')
+      if (ele) {
+        const styles = window.getComputedStyle(ele)
+        const width = parseFloat(styles.width)
+        if (width <= 992) {
+          column.value = _optionalChain([_gridColumns, 'access', _40 => _40.value, 'optionalAccess', _41 => _41[0]]) || 1
+        } else if (width > 992 && width <= 1440) {
+          column.value = _optionalChain([_gridColumns, 'access', _42 => _42.value, 'optionalAccess', _43 => _43[1]]) || 2
+        } else if (width > 1440 && width <= 1600) {
+          column.value = _optionalChain([_gridColumns, 'access', _44 => _44.value, 'optionalAccess', _45 => _45[2]]) || 3
+        } else if (width > 1600) {
+          column.value = _optionalChain([_gridColumns, 'access', _46 => _46.value, 'optionalAccess', _47 => _47[3]]) || 4
+        }
+      }
+    }
+
+    watch(() => props.params, (newValue) => {
+      _debounceFn(newValue || {})
+    }, { deep: true, immediate: true })
+
+    watch(() => props.dataSource, (newVal) => {
+      if (newVal && !props.request) {
+        handleSearch(props.params)
+      }
+    }, { deep: true, immediate: true })
+
+    onMounted(() => {
+      windowChange() // 初始化
+      window.onresize = () => {
+        windowChange()
+      }
+    })
+
+    onUnmounted(() => {
+      window.onresize = null
+    })
+
+    expose({ reload, dataSource: _dataSource })
+
+    return {
+      slots,
+      hashId,
+      loading,
+      _dataSource,
+      _mode,
+      column,
+      page,
+      myPagination,
+      showAlert,
+      showPagination,
+      extraSlots,
+      _rowSelection,
+      onCheck,
+      onPageChange,
+      onClose
+    }
+  }
+})

package/es/ProTable/hooks/index.js

@@ -0,0 +1,2 @@
+export * from './useTableSelection'
+export * from './useTableInject'

package/es/ProTable/hooks/useTableInject.js

@@ -0,0 +1,6 @@
+import { inject, } from 'vue'
+import { PROTABLE_ROW_SELECTION_KEY, } from './useTableSelection'
+
+export const useTableInject = () => {
+  return inject(PROTABLE_ROW_SELECTION_KEY, null )
+}

package/es/ProTable/hooks/useTableSelection.js

@@ -0,0 +1,115 @@
+import { ref, provide, watch, unref, computed, } from 'vue'
+import { omit } from 'lodash-es'
+
+export const PROTABLE_ROW_SELECTION_KEY = Symbol('protable-row-selection-key')
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+export const useTableSelection = (options = {
+  type: 'checkbox',
+  rowKey: 'id',
+  isCheck: true
+}) => {
+  const { type = 'checkbox', rowKey = 'id' } = options
+
+  const selectedRowKeys = ref([])
+  const selectedRows = ref([])
+  const selectionObj = ref(null)
+
+  const isCheckRef = computed(() => {
+    return unref(options.isCheck)
+  })
+
+  const onSelect = (record, selected) => {
+    if (type === 'checkbox') {
+      if (selected) {
+        selectedRows.value.push(record)
+      } else {
+        selectedRows.value = selectedRows.value.filter((i) => i[rowKey] !== record[rowKey])
+      }
+      selectedRowKeys.value = selectedRows.value.map((i) => i[rowKey])
+    }
+  }
+
+  // 单选
+  const onChange = (_selectedRowKeys, _selectedRows) => {
+    if (type === 'radio') {
+      selectedRowKeys.value = _selectedRowKeys
+      selectedRows.value = _selectedRows
+    }
+  }
+
+  const onSelectAll = (selected, _selectedRows, changeRows) => {
+    if (selected) {
+      selectedRows.value.push(...changeRows)
+    } else {
+      const arr = changeRows.map((item) => item[rowKey])
+      selectedRows.value = selectedRows.value.filter((i) => !arr.includes(i[rowKey]))
+    }
+    selectedRowKeys.value = selectedRows.value.map((i) => i[rowKey])
+  }
+
+  const onSelectNone = () => {
+    selectedRowKeys.value = []
+    selectedRows.value = []
+  }
+
+  const updateSelection = () => {
+    if (isCheckRef.value) {
+      // 提供选择上下文
+      selectionObj.value = type === 'checkbox'
+        ? {
+            ...omit(options, ['isCheck']),
+            type,
+            rowKey,
+            selectedRowKeys,
+            onSelect,
+            onSelectAll,
+            onSelectNone
+          }
+        : {
+            ...omit(options, ['isCheck']),
+            type,
+            rowKey,
+            selectedRowKeys,
+            onChange,
+            onSelectNone
+          }
+    } else {
+      // 清空选择状态
+      onSelectNone()
+      selectionObj.value = null
+    }
+  }
+
+  watch(isCheckRef, () => {
+    updateSelection()
+  }, {
+    immediate: true,
+    deep: false // 注意：deep 设为 false
+  })
+
+  provide(PROTABLE_ROW_SELECTION_KEY, selectionObj)
+
+  return {
+    selectedRowKeys,
+    selectedRows,
+    onSelectNone
+  }
+}

package/es/ProTable/index.js

@@ -0,0 +1,8 @@
+import ProTable from './ProTable.js'
+
+ProTable.install = function (app) {
+  app.component(ProTable.name, ProTable)
+}
+
+export default ProTable
+export * from './hooks'

package/es/ProTable/setting.js

@@ -0,0 +1,138 @@
+import { tableProps } from 'ant-design-vue/es/table/Table'
+import { paginationProps } from 'ant-design-vue/es/pagination/Pagination'
+import { omit } from 'lodash-es'
+
+export const _headerProps = {
+  mode: {
+    type: [String, undefined] ,
+    default: undefined
+  },
+  modeValue: {
+    type: String,
+    default: 'TABLE'
+  }
+}
+
+export const _alertProps = {
+  alertShow: {
+    type: Boolean,
+    default: true
+  },
+  rowSelection: {
+    type: Object,
+    default: () => undefined
+  }
+}
+
+export const _contentProps = {
+  ...tableProps(),
+  ..._headerProps,
+  cardBodyClass: {
+    type: String,
+    default: ''
+  },
+  columns: {
+    type: Array,
+    default: () => []
+  },
+  dataSource: {
+    type: Array,
+    default: undefined
+  },
+  gridColumns: {
+    type: Array,
+    default: () => [1, 2, 3, 4]
+  },
+  scroll: {
+    type: [Object, Boolean],
+    default: () => ({}) //  x: 1366
+  },
+  rowKey: {
+    type: [String, Function],
+    default: 'id'
+  },
+  type: {
+    type: String,
+    default: 'PAGE'
+  },
+  height: {
+    type: Number,
+    default: 500
+  }
+}
+
+export const _paginationProps = {
+  ...omit(paginationProps(), ['onChange']),
+  total: {
+    type: Number,
+    default: 0
+  },
+  pageSize: {
+    type: Number,
+    default: 12
+  },
+  pageIndex: {
+    type: Number,
+    default: 0
+  },
+  /**
+   *  是否显示分页内容
+   */
+  isShowContent: {
+    type: Boolean
+  },
+  /**
+   * 总数loading状态
+   */
+  totalLoading: {
+    type: Boolean,
+    default: false
+  },
+  totalRequest: {
+    type: Function,
+    default: undefined
+  }
+}
+
+export const proTableProps = {
+  ..._contentProps,
+  ..._alertProps,
+  bodyStyle: {
+    type: Object,
+    default: () => ({
+      padding: '16px 24px 24px'
+    })
+  },
+  request: {
+    type: Function,
+    default: undefined
+  },
+  totalRequest: {
+    type: Function,
+    default: undefined
+  },
+  params: {
+    type: Object,
+    default: () => ({})
+  },
+  type: {
+    type: String,
+    default: 'PAGE'
+  },
+  defaultParams: {
+    type: Object,
+    default: () => ({})
+  },
+  noPagination: {
+    type: Boolean,
+    default: false
+  },
+  pagination: {
+    type: Object,
+    default: () => ({
+      showSizeChanger: true,
+      size: 'size',
+      pageSizeOptions: ['12', '24', '48', '96']
+    })
+  }
+}

package/es/ProTable/style/index.js

@@ -0,0 +1,113 @@
+import genComponentStyle from '../../style/styleRegister'
+
+const genProTableStyle = (config) => {
+  const { token } = config
+  return {
+    '.jtable-body-spin': {
+      height: '100%',
+      width: '100%',
+      backgroundColor: '#fff',
+      '.ant-spin-nested-loading': {
+        height: '100%',
+        '.ant-spin-container': {
+          height: '100%'
+        }
+      },
+      '.jtable-body': {
+        width: '100%',
+        boxSizing: 'border-box',
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'column'
+      }
+    },
+    '.jtable-body-header': {
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      marginBottom: '16px',
+      width: '100%',
+      gap: '8px',
+      '.jtable-body-header-left': {
+        flex: 1,
+        minWidth: 0
+      },
+      '.jtable-body-header-right': {
+        display: 'flex',
+        gap: '8px',
+        alignItems: 'center',
+        '.jtable-body-header-right-button': {
+          width: '62px',
+          '.right-button-icon': {
+            fontSize: '16px',
+            color: '#d9d9d9'
+          },
+          '.ant-radio-button-wrapper': {
+            padding: '0 8px'
+          },
+          '.ant-radio-button-wrapper-checked': {
+            color: token.colorPrimary
+          }
+        }
+      }
+    },
+    '.jtable-box': {
+      flex: 1,
+      minHeight: 0,
+      '.jtable-card': {
+        height: '100%',
+        overflowY: 'auto',
+        '.jtable-card-items': {
+          display: 'grid',
+          gridGap: '26px',
+          '.jtable-card-item': {
+            display: 'flex',
+            minWidth: 0
+          }
+        },
+        '.j-table-empty': {
+          marginTop: '100px'
+        }
+      },
+      '.ant-table-wrapper': {
+        height: '100%',
+        '.ant-table': {
+          height: '100%',
+          '.ant-table-container': {
+            height: '100%',
+            '.ant-table-content': {
+              height: '100%'
+            }
+          }
+        }
+      },
+      '.j-table-scroll': {
+        '.ant-table-container': {
+          display: 'flex',
+          flexDirection: 'column'
+        },
+        '.ant-table-body': {
+          flex: 1,
+          minHeight: 0,
+          overflowY: 'auto'
+        }
+      }
+    },
+    '.jtable-alert': {
+      marginBottom: '16px'
+    },
+    '.jtable-pagination': {
+      width: '100%',
+      display: 'flex',
+      justifyContent: 'flex-end',
+      marginTop: '16px',
+      '.hide-content': {
+        [`${token.antCls}-pagination-item,& ${token.antCls}-pagination-jump-prev, & ${token.antCls}-pagination-jump-next`]: {
+          display: 'none'
+        }
+      }
+    }
+  }
+}
+
+export default genComponentStyle([genProTableStyle])