@meethive/components 0.0.1

package/lib/EditTable/EditTable.js

@@ -0,0 +1,434 @@
+ 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, ref, reactive, computed, watch, provide, useSlots } from 'vue'
+import { tableProps } from 'ant-design-vue/lib/table'
+import { useFullscreen } from '@vueuse/core'
+import { findIndex, get, sortBy } from 'lodash-es'
+
+import {
+  FULL_SCREEN,
+  RIGHT_MENU,
+  TABLE_DATA_SOURCE,
+  TABLE_ERROR,
+  TABLE_GROUP_ACTIVE,
+  TABLE_GROUP_ERROR,
+  TABLE_GROUP_OPTIONS,
+  TABLE_H_SCROLL,
+  TABLE_OPEN_GROUP,
+  TABLE_TOOL,
+  TABLE_WRAPPER
+} from './consts'
+import { handleColumnsWidth } from './utils'
+import { useGroup, useResizeObserver, useValidate } from './hooks'
+import { useFormContext } from './context'
+import { bodyProps } from './props'
+import Header from './Header.js'
+import Body from './Body.js'
+import Group from './Group.js'
+import { useLocaleReceiver } from '../LocaleReciver'
+import useEditTableStyle from './style'
+
+const defaultGroupId = 'group_1'
+
+export default defineComponent({
+  name: 'JEditTable',
+  components: {
+    Header,
+    Body,
+    Group
+  },
+  props: {
+    ...tableProps(),
+    ...bodyProps(),
+    searchColumns: {
+      type: Array,
+      default: undefined
+    },
+    serial: {
+      type: [Object, Boolean],
+      default: () => ({
+        width: 66,
+        title: ''
+      })
+    },
+    validateRowKey: {
+      type: Boolean,
+      default: false
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    }
+  } ,
+  emits: ['scrollDown', 'rightMenuClick', 'editChange', 'searchVisibleChange'],
+  setup(props, { emit, expose }) {
+    const [contextLocale] = useLocaleReceiver('EditTable')
+    const prefixCls = computed(() => 'jetlinks-edit-table')
+    const [wrapSSR, hashId] = useEditTableStyle(prefixCls)
+    const slots = useSlots()
+
+    const myColumns = ref([])
+    const tableWrapper = ref()
+    const tableBody = ref()
+    const scrollBarRef = ref()
+
+    const tableStyle = reactive({
+      width: '100%',
+      height: props.height
+    })
+
+    const showScroll = ref(false)
+    const horizontalScrollWidth = ref(0)
+    const horizontalScrollLeft = ref(0)
+
+    const fields = {}
+    const fieldsErrMap = ref({})
+    const fieldsGroupError = ref({})
+    const scrollDefaultWidth = ref(17)
+
+    const sortData = reactive
+
+
+
+
+({
+      key: undefined,
+      order: undefined,
+      orderKeys: [],
+      dataIndex: undefined
+    })
+
+    const { groupActive, groupOptions, addGroup, removeGroup, updateGroupActive, updateGroupOptions } =
+      useGroup(props.openGroup)
+
+    const _dataSource = computed(() => {
+      const _options = new Map()
+      const sortDataSource = sortData.key
+        ? sortBy(props.dataSource, (val) => {
+            if (!val.id) return 99999999
+            const index = findIndex(sortData.orderKeys, (val2) => get(val, sortData.key) === val2)
+            return sortData.order === 'desc' ? index : ~index + 1
+          })
+        : props.dataSource
+
+      sortDataSource.forEach((item, index) => {
+        item.__dataIndex = index
+        if (props.openGroup) {
+          const _groupId = _optionalChain([item, 'optionalAccess', _ => _.expands, 'optionalAccess', _2 => _2.groupId])
+          if (!_groupId) {
+            item.expands.groupId = groupActive.value || defaultGroupId
+            item.expands.groupName = groupActive.label || contextLocale.value.Group.one + '1'
+          }
+          const _optionsItem = _options.get(item.expands.groupId)
+          if (!_optionsItem) {
+            _options.set(item.expands.groupId, {
+              value: _optionalChain([item, 'optionalAccess', _3 => _3.expands, 'optionalAccess', _4 => _4.groupId]),
+              label: _optionalChain([item, 'optionalAccess', _5 => _5.expands, 'optionalAccess', _6 => _6.groupName]),
+              effective: item.id ? 1 : 0,
+              len: 1
+            })
+          } else {
+            if (item.id) {
+              _optionsItem.effective += 1
+            }
+            _optionsItem.len += 1
+            _options.set(item.expands.groupId, _optionsItem)
+          }
+          item.__serial = _optionalChain([_optionsItem, 'optionalAccess', _7 => _7.len]) || 1
+        } else {
+          item.__serial = index + 1
+        }
+      })
+
+      if (props.openGroup) {
+        updateGroupOptions([..._options.values()])
+      }
+      return sortDataSource
+    })
+
+    const bodyDataSource = computed(() => {
+      if (props.openGroup) {
+        return _dataSource.value.filter((item) => item.expands.groupId === groupActive.value)
+      }
+      return _dataSource.value
+    })
+
+    useResizeObserver(tableWrapper, onResize)
+
+    const { isFullscreen, toggle } = useFullscreen(tableWrapper)
+
+    const { rules, validateItem, validate, errorMap } = useValidate(
+      _dataSource,
+      props.columns,
+      props.rowKey,
+      {
+        onError: (err) => {
+          fieldsErrMap.value = {}
+          fieldsGroupError.value = {}
+          const errMap = {}
+
+          err.forEach((item, errIndex) => {
+            item.forEach((e, eIndex) => {
+              const field = findField(e.__dataIndex, e.field)
+              const _eventKey = field ? field.eventKey : `${e.__dataIndex}-${e.field}`
+              if (field) {
+                field.showErrorTip(e.message)
+              }
+              errMap[_eventKey] = e.message
+
+              if (errIndex === 0 && eIndex === 0) {
+                if (props.openGroup) {
+                  const expands = _dataSource.value[e.__dataIndex].expands
+                  updateGroupActive(expands.groupId, expands.groupName)
+                }
+                setTimeout(() => {
+                  tableBody.value.scrollTo(e.__serial - 1)
+                }, 10)
+              }
+            })
+          })
+          fieldsErrMap.value = errMap
+        },
+        onSuccess: () => {
+          fieldsErrMap.value = {}
+        },
+        onEdit: () => {
+          emit('editChange', true)
+        },
+        validateRowKey: props.validateRowKey
+      }
+    )
+
+    provide(TABLE_WRAPPER, tableWrapper)
+    provide(FULL_SCREEN, isFullscreen)
+    provide(RIGHT_MENU, { click: rightMenu, getPopupContainer: () => tableWrapper.value })
+    provide(TABLE_ERROR, fieldsErrMap)
+    provide(TABLE_GROUP_ERROR, fieldsGroupError)
+    provide(TABLE_DATA_SOURCE, _dataSource)
+    provide(TABLE_OPEN_GROUP, props.openGroup)
+    provide(TABLE_TOOL, {
+      scrollTo: (record) => {
+        if (props.openGroup) {
+          const expands = record.expands
+          updateGroupActive(expands.groupId, expands.groupName)
+        }
+        setTimeout(() => {
+          tableBody.value.scrollTo(record.__serial)
+        }, 10)
+      },
+      selected: (keys) => {
+        tableBody.value.updateSelectedKeys(keys)
+      },
+      order: (type, key, orderKeys, dataIndex) => {
+        sortData.key = key
+        sortData.order = type
+        sortData.orderKeys = orderKeys
+        sortData.dataIndex = dataIndex
+      },
+      cleanOrder: () => {
+        sortData.key = undefined
+        sortData.order = undefined
+        sortData.orderKeys = []
+        sortData.dataIndex = undefined
+      },
+      sortData
+    })
+    provide(TABLE_GROUP_OPTIONS, groupOptions)
+    provide(TABLE_GROUP_ACTIVE, groupActive)
+    provide(TABLE_H_SCROLL, horizontalScrollLeft)
+
+    const addField = (key, field) => {
+      fields[key] = field
+    }
+
+    const removeField = (key) => {
+      delete fields[key]
+    }
+
+    function findField(index, name) {
+      const fieldId = Object.keys(fields).find((key) => {
+        const { names } = fields[key]
+        return names[0] === index && names[1] === name
+      })
+      return fields[fieldId]
+    }
+
+    function removeFieldError(key) {
+      delete fieldsErrMap.value[key]
+    }
+
+    function addFieldError(key, message) {
+      fieldsErrMap.value[key] = message
+    }
+
+    const scrollWidth = computed(() => {
+      return props.dataSource.length * props.cellHeight > props.height ? scrollDefaultWidth.value : 0
+    })
+
+    const handleColumns = () => {
+      let newColumns = [...props.columns]
+      if (props.serial) {
+        const serial = {
+          dataIndex: '__serial',
+          title: (props.serial ).title || contextLocale.value.serial,
+          customRender: (customData) => {
+            if (_optionalChain([(props.serial ), 'optionalAccess', _8 => _8.customRender])) {
+              return (props.serial ).customRender(customData)
+            }
+            return customData.index + 1
+          },
+          width: _optionalChain([(props.serial ), 'optionalAccess', _9 => _9.width]),
+          fixed: 'left'
+        }
+        newColumns = [serial, ...props.columns]
+      }
+      myColumns.value = handleColumnsWidth(newColumns, (tableStyle.width ) - scrollWidth.value)
+      horizontalScrollWidth.value = myColumns.value.reduce((prev, next) => {
+        prev += next.width
+        return prev
+      }, 0)
+      if (horizontalScrollWidth.value > (tableStyle.width )) {
+        showScroll.value = true
+      }
+    }
+
+    function onResize({ width = 0 }) {
+      tableStyle.width = width || '100%'
+      handleColumns()
+    }
+
+    const onScrollDown = (len) => {
+      emit('scrollDown', len)
+    }
+
+    function rightMenu(menuType, record, copyValue) {
+      emit('rightMenuClick', menuType, record, copyValue)
+    }
+
+    const scrollToById = (key) => {
+      const _index = _dataSource.value.findIndex((item) => item[props.rowKey] === key)
+      tableBody.value.scrollTo(_index)
+    }
+
+    const scrollToByIndex = (index) => {
+      tableBody.value.scrollTo(index)
+    }
+
+    const getTableWrapperRef = () => {
+      return tableWrapper.value
+    }
+
+    const groupDelete = (id, index) => {
+      removeGroup(index)
+      Object.keys(fieldsErrMap.value).forEach((errorKey) => {
+        const [idx] = errorKey.split('-')
+        const dataSourceItem = _dataSource.value[Number(idx)]
+        const groupId = _optionalChain([dataSourceItem, 'optionalAccess', _10 => _10.expands, 'optionalAccess', _11 => _11.groupId])
+        if (groupId === id) {
+          removeFieldError(errorKey)
+          removeField(errorKey)
+        }
+      })
+      emit('groupDelete', id)
+    }
+
+    const groupEdit = (record) => {
+      emit('groupEdit', record)
+    }
+
+    const getGroupActive = () => {
+      return groupActive.value
+    }
+
+    const onHorizontalScroll = () => {
+      horizontalScrollLeft.value = scrollBarRef.value.scrollLeft
+    }
+
+    watch(
+      () => fieldsErrMap.value,
+      (errorMapVal) => {
+        fieldsGroupError.value = {}
+        if (props.openGroup) {
+          const groupErrorMap = {}
+          Object.keys(errorMapVal).forEach((errorKey) => {
+            const [idx] = errorKey.split('-')
+            const dataSourceItem = _dataSource.value[Number(idx)]
+            const groupId = _optionalChain([dataSourceItem, 'optionalAccess', _12 => _12.expands, 'optionalAccess', _13 => _13.groupId])
+            const groupErrorItem = {
+              [errorKey]: {
+                message: errorMapVal[errorKey],
+                index: idx,
+                serial: dataSourceItem.__serial
+              }
+            }
+            if (groupErrorMap[groupId]) {
+              groupErrorMap[groupId].push(groupErrorItem)
+            } else {
+              groupErrorMap[groupId] = [groupErrorItem]
+            }
+          })
+          fieldsGroupError.value = groupErrorMap
+        }
+      },
+      { deep: true }
+    )
+
+    watch(
+      () => scrollWidth.value,
+      () => {
+        onResize({ width: tableStyle.width  })
+      }
+    )
+
+    watch(
+      () => [JSON.stringify(props.columns), tableStyle.width],
+      () => {
+        handleColumns()
+      }
+    )
+
+    useFormContext({
+      dataSource: computed(() => props.dataSource),
+      errorMap,
+      rules,
+      addField,
+      removeField,
+      removeFieldError,
+      addFieldError,
+      validateItem
+    })
+
+    expose({
+      validate,
+      tableWrapper,
+      scrollToById,
+      scrollToByIndex,
+      getTableWrapperRef,
+      getGroupActive
+    })
+
+    return {
+      slots,
+      hashId,
+      isFullscreen,
+      toggle,
+      tableWrapper,
+      tableBody,
+      scrollBarRef,
+      myColumns,
+      tableStyle,
+      showScroll,
+      horizontalScrollWidth,
+      horizontalScrollLeft,
+      scrollWidth,
+      bodyDataSource,
+      groupActive,
+      groupOptions,
+      addGroup,
+      updateGroupActive,
+      onScrollDown,
+      groupDelete,
+      groupEdit,
+      onHorizontalScroll
+    }
+  }
+})

package/lib/EditTable/FormItem.js

@@ -0,0 +1,169 @@
+ 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, reactive, computed, watch, provide, onBeforeUnmount } from 'vue'
+import { Tooltip as ATooltip } from 'ant-design-vue'
+import { get, isArray } from 'lodash-es'
+import { useProvideFormItemContext } from 'ant-design-vue/es/form/FormItemContext'
+import { useInjectError, useInjectForm } from './hooks'
+import { TABLE_FORM_ITEM_ERROR } from './consts'
+import genEditTableStyle from './style'
+
+export default defineComponent({
+  name: 'JEditTableFormItem',
+  components: {
+    ATooltip
+  },
+  props: {
+    name: {
+      type: [String, Array],
+      default: undefined
+    },
+    required: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['change'],
+  setup(props, { emit }) {
+    const prefixCls = computed(() => 'jetlinks-edit-table')
+    const [wrapSSR, hashId] = genEditTableStyle(prefixCls)
+
+    const context = useInjectForm()
+    const globalErrorMessage = useInjectError()
+
+    let hideTimer = null
+
+    const eventKey = computed(() => {
+      const names = isArray(props.name) ? props.name : [props.name]
+      return names.join('-')
+    })
+
+    const errorMap = reactive({
+      message: '',
+      visible: false
+    })
+
+    const filedId = computed(() => {
+      const names = isArray(props.name) ? props.name : [props.name]
+      const [index, ...extra] = names
+      return `${index}-${extra.join('.')}`
+    })
+
+    const filedName = computed(() => {
+      const names = isArray(props.name) ? props.name : [props.name]
+      return [...names].pop()
+    })
+
+    const filedValue = computed(() => {
+      return get(context.dataSource.value, props.name )
+    })
+
+    provide(TABLE_FORM_ITEM_ERROR, errorMap)
+
+    const popContainer = (e) => {
+      return e
+    }
+
+    const removeTimer = () => {
+      if (hideTimer) {
+        window.clearTimeout(hideTimer)
+        hideTimer = null
+      }
+    }
+
+    const showErrorTip = (msg) => {
+      removeTimer()
+      errorMap.message = msg
+      errorMap.visible = true
+    }
+
+    const hideErrorTip = () => {
+      errorMap.visible = false
+      removeTimer()
+      hideTimer = window.setTimeout(() => {
+        errorMap.message = ''
+      }, 300)
+    }
+
+    const validateRules = () => {
+      let index = 0
+      if (isArray(props.name)) {
+        index = props.name[0] 
+      }
+      const promise = context.validateItem(
+        { [filedName.value ]: get(context.dataSource.value, props.name ) },
+        index
+      )
+
+      promise.catch((res) => {
+        const error = _optionalChain([res, 'optionalAccess', _ => _.filter, 'call', _2 => _2((item) => item.field === filedName.value)]) || []
+        if (error.length === 0) {
+          hideErrorTip()
+          context.removeFieldError(eventKey.value)
+        } else {
+          removeTimer()
+          errorMap.message = _optionalChain([error, 'access', _3 => _3[0], 'optionalAccess', _4 => _4.message]) || errorMap.message
+          errorMap.visible = !!error.length
+          context.addFieldError(eventKey.value, errorMap.message)
+        }
+        return errorMap.message
+      })
+
+      return promise
+    }
+
+    const onFieldBlur = () => {
+      // validateRules()
+    }
+
+    const onFieldChange = () => {
+      validateRules()
+      emit('change')
+    }
+
+    watch(
+      () => globalErrorMessage.value,
+      (val) => {
+        if (val[eventKey.value]) {
+          showErrorTip(val[eventKey.value])
+        } else {
+          hideErrorTip()
+        }
+      },
+      { immediate: true, deep: true }
+    )
+
+    useProvideFormItemContext(
+      {
+        id: filedId,
+        onFieldChange,
+        onFieldBlur
+      } ,
+      computed(() => get(context.dataSource.value, props.name ))
+    )
+
+    onBeforeUnmount(() => {
+      hideErrorTip()
+    })
+
+    watch(
+      () => [filedName.value, props.name],
+      () => {
+        context.addField(eventKey.value, {
+          filedName: filedName.value,
+          eventKey: eventKey.value,
+          names: props.name,
+          validateRules,
+          showErrorTip
+        })
+      },
+      { immediate: true }
+    )
+
+    return {
+      hashId,
+      eventKey,
+      errorMap,
+      popContainer
+    }
+  }
+})