fx-platform-ui 0.0.2 → 0.0.4

package/packages/component.ts

@@ -1,8 +1,9 @@
 /**
  * 导出所有组件
  */
-import PlCard from './components/card'
+import PlForm from './components/form'
+import PlTable from './components/table'
 
-export default [PlCard]
+export default [PlForm, PlTable]
 
-export { PlCard }
+export { PlForm, PlTable }

package/packages/components/form/index.tsx

@@ -0,0 +1,10 @@
+import { App } from 'vue'
+
+import PlForm from './src/index.vue'
+PlForm.install = function (app: App) {
+  // 组件注册，按需引入
+  app.component(PlForm.name, PlForm)
+  return app
+}
+
+export default PlForm

package/packages/components/form/src/components/form-action.vue

@@ -0,0 +1,135 @@
+<template>
+  <Col v-if="showActionButtonGroup" v-bind="actionColOpt">
+    <div
+      style="width: 100%"
+      :style="{ textAlign: actionColOpt.style.textAlign }"
+    >
+      <FormItem>
+        <slot name="resetBefore"></slot>
+        <AButton
+          type="default"
+          class="btn-mr"
+          v-bind="getResetBtnOptions"
+          @click="resetFields"
+        >
+          {{ getResetBtnOptions.text }}
+        </AButton>
+        <slot name="submitBefore"></slot>
+        <AButton
+          type="primary"
+          class="btn-mr"
+          v-bind="getSubmitBtnOptions"
+          @click="submit"
+        >
+          {{ getSubmitBtnOptions.text }}
+        </AButton>
+        <slot name="advanceBefore"></slot>
+        <AButton
+          v-if="showAdvancedButton && !hideAdvanceBtn"
+          type="link"
+          size="small"
+          @click="toggleAdvanced"
+        >
+          <BasicArrow class="ml-1" :expand="!isAdvanced" />
+        </AButton>
+      </FormItem>
+    </div>
+  </Col>
+</template>
+
+<script lang="ts" setup name="platFormAction">
+import { ExtractPropTypes, computed, type PropType } from 'vue'
+import buttonProps from 'ant-design-vue/es/button/buttonTypes'
+import { FormItem, Col } from 'ant-design-vue'
+import { useFormContext } from '../hook'
+import type { ColEx } from '../types'
+type ButtonProps = Partial<ExtractPropTypes<typeof buttonProps>>
+// { text: string } 主要用来显示按钮文字
+type ButtonOptions = Partial<ButtonProps> & { text?: string }
+
+defineOptions({
+  inheritAttrs: false
+})
+
+const emit = defineEmits(['toggle-advanced'])
+const props = defineProps({
+  showActionButtonGroup: {
+    type: Boolean,
+    default: true
+  },
+  showResetButton: {
+    type: Boolean,
+    default: true
+  },
+  showSubmitButton: {
+    type: Boolean,
+    default: true
+  },
+  showAdvancedButton: {
+    type: Boolean,
+    default: true
+  },
+  resetButtonOptions: {
+    type: Object as PropType<ButtonOptions>,
+    default: () => ({})
+  },
+  submitButtonOptions: {
+    type: Object as PropType<ButtonOptions>,
+    default: () => ({})
+  },
+  actionColOptions: {
+    type: Object as PropType<Partial<ColEx>>,
+    default: () => ({})
+  },
+  actionSpan: {
+    type: Number,
+    default: 6
+  },
+  isAdvanced: Boolean,
+  hideAdvanceBtn: Boolean
+})
+const { resetFields, submit } = useFormContext()
+
+const actionColOpt = computed(() => {
+  const { showAdvancedButton, actionSpan: span, actionColOptions } = props
+  const actionSpan = 24 - span
+  const advancedSpanObj = showAdvancedButton
+    ? { span: actionSpan < 6 ? 24 : actionSpan }
+    : {}
+  const actionColOpt: Partial<ColEx> = {
+    style: { textAlign: 'right' },
+    span: showAdvancedButton ? 6 : 4,
+    ...advancedSpanObj,
+    ...actionColOptions
+  }
+  return actionColOpt
+})
+
+const getResetBtnOptions = computed((): ButtonOptions => {
+  return Object.assign(
+    {
+      text: '重置'
+    },
+    props.resetButtonOptions
+  )
+})
+
+const getSubmitBtnOptions = computed((): ButtonOptions => {
+  return Object.assign(
+    {
+      text: '提交'
+    },
+    props.submitButtonOptions
+  )
+})
+
+function toggleAdvanced() {
+  emit('toggle-advanced', props.isAdvanced)
+}
+</script>
+
+<style lang="less" scoped>
+.btn-mr {
+  margin-right: 10px;
+}
+</style>

package/packages/components/form/src/hook/index.ts

@@ -0,0 +1,12 @@
+import type { FormState } from './useFormState'
+import type { FormEvents } from './useFormEvents'
+import type { FormMethods } from './useFormMethods'
+
+export * from './useFormState'
+export * from './useFormContext'
+export * from './useFormMethods'
+export * from './useFormEvents'
+export * from './useFormLabel'
+
+// @ts-ignore
+export type PlatFormType = FormState & FormEvents & FormMethods

package/packages/components/form/src/hook/useForm.tsx

@@ -0,0 +1,61 @@
+import { nextTick, ref, unref, watch, onMounted } from 'vue'
+import { isEmpty } from 'lodash-es'
+import PlatForm from '../../index'
+import type { Ref, SetupContext } from 'vue'
+import type { PlatFormInstance, PlatFormProps } from '../plat-form-props'
+
+export function useForm(props?: Partial<PlatFormProps>) {
+  const formRef = ref<PlatFormInstance>({} as PlatFormInstance)
+  async function getFormInstance() {
+    await nextTick()
+    const form = unref(formRef)
+    if (isEmpty(form)) {
+      console.error('未获取表单实例!')
+    }
+    return form
+  }
+  watch(
+    () => props,
+    () => {
+      props &&
+        onMounted(async () => {
+          ;(await getFormInstance())?.setSchemaFormProps(props)
+        })
+    },
+    {
+      immediate: true,
+      deep: true
+    }
+  )
+
+  const methods = new Proxy<Ref<PlatFormInstance>>(formRef, {
+    get(target, key) {
+      if (Reflect.has(target, key)) {
+        return unref(target)
+      }
+      if (Reflect.has(target.value, key)) {
+        return target.value[key]
+      }
+      // @ts-ignore
+      return async (...rest) => {
+        const form = await getFormInstance()
+        return form?.[key](...rest)
+      }
+    }
+  })
+
+  const SchemaFormRender = (
+    compProps: Partial<PlatFormProps>,
+    { attrs, slots }: SetupContext
+  ) => {
+    return (
+      <PlatForm
+        ref={formRef}
+        {...{ ...attrs, ...props, ...compProps }}
+        v-slots={slots}
+      ></PlatForm>
+    )
+  }
+
+  return [SchemaFormRender, unref(methods)] as const
+}

package/packages/components/form/src/hook/useFormContext.ts

@@ -0,0 +1,12 @@
+import { provide, inject } from 'vue'
+import type { PlatFormType } from '../hook'
+
+const key = Symbol('plat-form')
+// todo any需要修改
+export async function createFormContext(instance: PlatFormType) {
+  provide(key, instance)
+}
+
+export function useFormContext() {
+  return inject(key) as PlatFormType
+}

package/packages/components/form/src/hook/useFormEvents.ts

@@ -0,0 +1,272 @@
+import { unref, toRaw } from 'vue'
+import dayjs from 'dayjs'
+import { cloneDeep, uniqBy } from 'lodash-es'
+import { dateItemType, handleInputNumberValue } from '../methods'
+import { isArray, isFunction, isObject, isString } from '../../../../utils/is'
+import { deepMerge } from '../../../../utils'
+import type { FormState } from './useFormState'
+import type { PlatFormEmitFn } from '../plat-form-emits'
+import type { FormMethods } from '../hook'
+import type { NamePath } from 'ant-design-vue/lib/form/interface'
+import type { FormSchema } from '../types'
+
+// @ts-ignore
+export type FormEvents = ReturnType<typeof useFormEvents>
+// @ts-ignore
+type UseFormActionContext = FormState & {
+  emit: PlatFormEmitFn
+  handleFormValues: FormMethods['handleFormValues']
+}
+// @ts-ignore
+export function useFormEvents(formActionContext: UseFormActionContext) {
+  const {
+    emit,
+    formPropsRef,
+    formSchemasRef,
+    formModel,
+    cacheFormModel,
+    getFormProps,
+    platFormRef,
+    defaultFormValues,
+    handleFormValues
+  } = formActionContext
+
+  function getFieldsValue(): Recordable {
+    const formEl = unref(platFormRef)
+    if (!formEl) return {}
+    return handleFormValues(toRaw(unref(formModel)))
+  }
+  /**
+   * @description: Is it time
+   */
+  function itemIsDateType(key: string) {
+    return unref(formPropsRef).schemas?.some((item) => {
+      return item.field === key && isString(item.component)
+        ? dateItemType.includes(item.component)
+        : false
+    })
+  }
+
+  /**
+   * @description  更新formItemSchema
+   */
+  async function updateSchema(
+    data: Partial<FormSchema> | Partial<FormSchema>[]
+  ) {
+    let updateData: Partial<FormSchema>[] = []
+    if (isObject(data)) {
+      updateData.push(data as FormSchema)
+    }
+    if (isArray(data)) {
+      updateData = [...data]
+    }
+
+    const hasField = updateData.every(
+      (item) =>
+        item.component === 'Divider' ||
+        (Reflect.has(item, 'field') && item.field)
+    )
+
+    if (!hasField) {
+      console.error(
+        'All children of the form Schema array that need to be updated must contain the `field` field'
+      )
+      return
+    }
+    const schemas: FormSchema[] = []
+    updateData.forEach((item) => {
+      unref(formSchemasRef).forEach((val) => {
+        if (val.field === item.field) {
+          const newSchema = deepMerge(val, item)
+          schemas.push(newSchema)
+        } else {
+          schemas.push(val)
+        }
+      })
+    })
+
+    // @ts-ignore
+    unref(formPropsRef).schemas = uniqBy(schemas, 'field')
+  }
+
+  /**
+   * @description: 插入到指定 filed 后面，如果没传指定 field，则插入到最后,当 first = true 时插入到第一个位置
+   */
+  async function appendSchemaByField(
+    schemaItem: FormSchema,
+    prefixField?: string,
+    first = false
+  ) {
+    const schemaList = cloneDeep<FormSchema[]>(unref(formSchemasRef))
+
+    const index = schemaList.findIndex((schema) => schema.field === prefixField)
+
+    if (!prefixField || index === -1 || first) {
+      first ? schemaList.unshift(schemaItem) : schemaList.push(schemaItem)
+      formModel[schemaItem.field] = schemaItem.defaultValue
+      formPropsRef.value.schemas = schemaList
+      return
+    }
+    if (index !== -1) {
+      schemaList.splice(index + 1, 0, schemaItem)
+    }
+    formModel[schemaItem.field] = schemaItem.defaultValue
+    formPropsRef.value.schemas = schemaList
+  }
+
+  /**
+   * @description: 根据 field 删除 Schema
+   */
+  async function removeSchemaByFiled(fields: string | string[]): Promise<void> {
+    const schemaList = cloneDeep<FormSchema[]>(unref(formSchemasRef))
+
+    if (!fields) {
+      return
+    }
+
+    let fieldList: string[] = isString(fields) ? [fields] : fields
+    if (isString(fields)) {
+      fieldList = [fields]
+    }
+    for (const field of fieldList) {
+      if (isString(field)) {
+        const index = schemaList.findIndex((schema) => schema.field === field)
+        if (index !== -1) {
+          Reflect.deleteProperty(formModel, field)
+          schemaList.splice(index, 1)
+        }
+      }
+    }
+    formPropsRef.value.schemas = schemaList
+  }
+
+  async function resetSchema(
+    data: Partial<FormSchema> | Partial<FormSchema>[]
+  ) {
+    let updateData: Partial<FormSchema>[] = []
+    if (isObject(data)) {
+      updateData.push(data as FormSchema)
+    }
+    if (isArray(data)) {
+      updateData = [...data]
+    }
+    // @ts-ignore
+    unref(formPropsRef).schemas = updateData as FormSchema[]
+  }
+
+  /**
+   * @description: 设置表单字段值
+   */
+  async function setFieldsValue(values: Recordable): Promise<void> {
+    const schemas = unref(formSchemasRef)
+    const fields = schemas.map((item) => item.field).filter(Boolean)
+
+    Object.assign(cacheFormModel, values)
+
+    const validKeys: string[] = []
+    Object.keys(values).forEach((key) => {
+      const schema = schemas.find((item) => item.field === key)
+      let value = values[key]
+
+      const hasKey = Reflect.has(values, key)
+      if (isString(schema?.component)) {
+        value = handleInputNumberValue(schema?.component, value)
+      }
+      // 0| '' is allow
+      if (hasKey && fields.includes(key)) {
+        // time type
+        if (itemIsDateType(key)) {
+          if (Array.isArray(value)) {
+            const arr: any[] = []
+            for (const ele of value) {
+              arr.push(ele ? dayjs(ele) : null)
+            }
+            formModel[key] = arr
+          } else {
+            const { componentProps } = schema || {}
+            let _props = componentProps as any
+            if (isFunction(componentProps)) {
+              _props = _props({ formPropsRef, formModel })
+            }
+            formModel[key] = value
+              ? _props?.valueFormat
+                ? value
+                : dayjs(value)
+              : null
+          }
+        } else {
+          formModel[key] = value
+        }
+        validKeys.push(key)
+      }
+    })
+    validateFields(validKeys)
+  }
+
+  async function resetFields(): Promise<void> {
+    const { resetFunc, submitOnReset } = unref(getFormProps)
+    resetFunc && isFunction(resetFunc) && (await resetFunc())
+
+    Object.keys(formModel).forEach((key) => {
+      formModel[key] = defaultFormValues[key]
+    })
+
+    emit('reset', formModel)
+    submitOnReset && handleSubmit()
+    await clearValidate()
+    // setTimeout(clearValidate)
+  }
+
+  async function validateFields(nameList?: NamePath[] | undefined) {
+    return platFormRef.value?.validateFields(nameList)
+  }
+
+  async function validate(nameList?: NamePath[] | undefined) {
+    return await platFormRef.value?.validate(nameList)!
+  }
+
+  async function clearValidate(name?: string | string[]) {
+    await platFormRef.value?.clearValidate(name)
+  }
+
+  async function scrollToField(
+    name: NamePath,
+    options?: ScrollOptions | undefined
+  ) {
+    await platFormRef.value?.scrollToField(name, options)
+  }
+
+  // todo 需要测试一下
+  async function handleSubmit(e?: Event): Promise<void> {
+    e && e.preventDefault()
+    const { submitFunc } = unref(getFormProps)
+    if (submitFunc && isFunction(submitFunc)) {
+      await submitFunc()
+      return
+    }
+    const formEl = unref(platFormRef)
+    if (!formEl) return
+    try {
+      const values = await validate()
+      const res = handleFormValues(values)
+      emit('submit', res)
+    } catch (error: any) {
+      return Promise.reject(error)
+    }
+  }
+
+  return {
+    submit: handleSubmit,
+    clearValidate,
+    validate,
+    validateFields,
+    getFieldsValue,
+    updateSchema,
+    resetSchema,
+    appendSchemaByField,
+    removeSchemaByFiled,
+    resetFields,
+    setFieldsValue,
+    scrollToField
+  }
+}

package/packages/components/form/src/hook/useFormLabel.ts

@@ -0,0 +1,42 @@
+import { unref } from 'vue'
+import type { Ref } from 'vue'
+import type { FormSchema } from '../types'
+import type { PlatFormProps } from '../plat-form-props'
+import { isNumber } from '../../../../utils/is'
+
+export function useFormLabel(
+  schemaRef: Ref<FormSchema>,
+  formPropsRef: Ref<PlatFormProps>
+) {
+  const schemaItem = unref(schemaRef)
+  const { labelCol = {}, wrapperCol = {} } = schemaItem.formItemProps || {}
+  const { labelWidth, disabledLabelWidth } = schemaItem
+  const {
+    labelWidth: globalLabelWidth,
+    labelCol: globalLabelCol,
+    wrapperCol: globWrapperCol
+  } = unref(formPropsRef)
+
+  // 如果labelWidth是全局设置的，则会设置所有项
+  if (
+    (!globalLabelWidth && !labelWidth && !globalLabelCol) ||
+    disabledLabelWidth
+  ) {
+    labelCol.style = {
+      textAlign: 'left'
+    }
+    return { labelCol, wrapperCol }
+  }
+  let width = labelWidth || globalLabelWidth
+  const col = { ...globalLabelCol, ...labelCol }
+  const wrapCol = { ...globWrapperCol, ...wrapperCol }
+
+  if (width) {
+    width = isNumber(width) ? `${width}px` : width
+  }
+
+  return {
+    labelCol: { style: { width }, ...col },
+    wrapperCol: { style: { width: `calc(100% - ${width})` }, ...wrapCol }
+  }
+}

package/packages/components/form/src/hook/useFormMethods.ts

@@ -0,0 +1,134 @@
+import { unref } from 'vue'
+import { set } from 'lodash-es'
+import { deepMerge } from '../../../../utils'
+// @ts-ignore
+import { dateUtil } from '../../../../utils/dateUtil'
+import {
+  isFunction,
+  isNullOrUnDef,
+  isObject,
+  isArray,
+  isString
+} from '../../../../utils/is'
+import type { FormState } from './useFormState'
+import type { FormSchema } from '../types'
+import type { PlatFormProps } from '../plat-form-props'
+// deepMerge 深度合并
+
+export type FormMethods = ReturnType<typeof useFormMethods>
+
+type UseFormMethodsContext = FormState
+
+export const useFormMethods = (formMethodsContext: UseFormMethodsContext) => {
+  const {
+    compRefs,
+    formModel,
+    formPropsRef,
+    cacheFormModel,
+    defaultFormValues,
+    platFormRef,
+    getFormProps
+  } = formMethodsContext
+
+  // 将所有的表单组件实例保存起来
+  const setItemRef = (formItem: FormSchema) => {
+    return (el) => {
+      if (el) {
+        compRefs[formItem.field] = el
+      }
+    }
+  }
+
+  // todo 设置某个字段的值
+  const setFormModel = (key: string, value: any) => {
+    formModel[key] = value
+    cacheFormModel[key] = value
+    const { validateTrigger } = unref(getFormProps)
+    if (!validateTrigger || validateTrigger === 'change') {
+      platFormRef.value?.validateFields([key])
+    }
+  }
+
+  // 更新表单props
+  const setSchemaFormProps = (formProps: Partial<PlatFormProps>) => {
+    formPropsRef.value = deepMerge(unref(formPropsRef) || {}, formProps)
+  }
+
+  // Processing form values
+  function handleFormValues(values: Recordable) {
+    if (!isObject(values)) {
+      return {}
+    }
+    const res: Recordable = {}
+    for (const item of Object.entries(values)) {
+      let [, value] = item
+      const [key] = item
+      if (!key || (isArray(value) && value.length === 0) || isFunction(value)) {
+        continue
+      }
+      const transformDateFunc = unref(getFormProps).transformDateFunc
+      if (isObject(value)) {
+        value = transformDateFunc?.(value)
+      }
+
+      if (isArray(value) && value[0]?.format && value[1]?.format) {
+        value = value.map((item) => transformDateFunc?.(item))
+      }
+      // Remove spaces
+      if (isString(value)) {
+        value = value.trim()
+      }
+      set(res, key, value)
+    }
+    return handleRangeTimeValue(res)
+  }
+
+  /**
+   * @description: Processing time interval parameters
+   */
+  function handleRangeTimeValue(values: Recordable) {
+    const fieldMapToTime = unref(getFormProps).fieldMapToTime
+
+    if (!fieldMapToTime || !Array.isArray(fieldMapToTime)) {
+      return values
+    }
+
+    for (const [
+      field,
+      [startTimeKey, endTimeKey],
+      format = 'YYYY-MM-DD'
+    ] of fieldMapToTime) {
+      if (!field || !startTimeKey || !endTimeKey || !values[field]) {
+        continue
+      }
+
+      const [startTime, endTime]: string[] = values[field]
+
+      values[startTimeKey] = dateUtil(startTime).format(format)
+      values[endTimeKey] = dateUtil(endTime).format(format)
+      Reflect.deleteProperty(values, field)
+    }
+
+    return values
+  }
+
+  // 初始化数据
+  const initFormValues = () => {
+    unref(formPropsRef).schemas?.forEach((item) => {
+      const { defaultValue } = item
+      if (!isNullOrUnDef(defaultValue)) {
+        formModel[item.field] = defaultValue
+        defaultFormValues[item.field] = defaultValue
+        cacheFormModel[item.field] = defaultValue
+      }
+    })
+  }
+
+  return {
+    setItemRef,
+    initFormValues,
+    setFormModel,
+    setSchemaFormProps,
+    handleFormValues
+  }
+}