fx-platform-ui 0.0.2 → 0.0.3

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

@@ -0,0 +1,137 @@
+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
+    console.log('getFormProps', getFormProps)
+    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) {
+    console.log('before', values)
+    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)
+    }
+    console.log('time', res)
+    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
+  }
+}

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

@@ -0,0 +1,80 @@
+import { computed, reactive, ref, unref } from 'vue'
+import { cloneDeep } from 'lodash-es'
+import type { SetupContext } from 'vue'
+import type { PlatFormProps } from '../plat-form-props'
+import type { FormInstance } from 'ant-design-vue'
+
+// @ts-ignore
+export type FormState = ReturnType<typeof useFormState>
+
+export type useFormStateParams = {
+  props: PlatFormProps
+  attrs: SetupContext['attrs']
+}
+
+export const useFormState = ({ props, attrs }: useFormStateParams) => {
+  const formPropsRef = ref<PlatFormProps>(cloneDeep(props))
+
+  // 表单项数据
+  const formModel = reactive({ ...props.initialValues })
+  // 表单默认数据
+  const defaultFormValues = reactive({ ...props.initialValues })
+
+  // 表单实例
+  const platFormRef = ref<FormInstance>()
+
+  // 缓存的表单值
+  const cacheFormModel = reactive({ ...props.initialValues })
+
+  // 将所有的表单组件实例保存起来
+  const compRefs = reactive({})
+
+  // 展开/收缩配置项
+  const advanceState = reactive({
+    isAdvanced: true,
+    hideAdvanceBtn: false,
+    isLoad: false,
+    actionSpan: 6
+  })
+
+  // 获取表单所有属性
+  const getFormProps = computed(() => {
+    return {
+      ...attrs,
+      ...formPropsRef.value
+    } as PlatFormProps
+  })
+
+  // 获取栅栏row配置
+  const getRowConfig = computed(() => {
+    const { baseRowStyle, rowProps } = unref(getFormProps)
+    return {
+      style: baseRowStyle,
+      ...rowProps
+    }
+  })
+
+  const getFormActionBindProps = computed(() => ({
+    ...getFormProps.value,
+    ...advanceState
+  }))
+
+  const formSchemasRef = computed(() => {
+    const { schemas } = unref(getFormProps)
+    return schemas || []
+  })
+
+  return {
+    formModel,
+    defaultFormValues,
+    platFormRef,
+    formPropsRef,
+    cacheFormModel,
+    compRefs,
+    getFormProps,
+    advanceState,
+    getRowConfig,
+    getFormActionBindProps,
+    formSchemasRef
+  }
+}

package/packages/components/form/src/index.vue

@@ -0,0 +1,124 @@
+<template>
+  <Form
+    ref="platFormRef"
+    v-bind="pick(getFormProps, aFormPropKeys)"
+    :model="formModel"
+  >
+    <Row v-bind="getRowConfig">
+      <slot name="formHeader"></slot>
+      <template v-for="formSchema in formSchemasRef" :key="formSchema.field">
+        <PlatFormItem
+          :schema="formSchema"
+          :form-model="formModel"
+          :set-form-model="setFormModel"
+          :set-item-ref="setItemRef(formSchema)"
+        >
+          <template
+            v-for="item in Object.keys($slots)"
+            #[item]="data"
+            :key="item"
+          >
+            <slot :name="item" v-bind="data || {}"></slot>
+          </template>
+        </PlatFormItem>
+      </template>
+      <FormAction
+        v-bind="getFormActionBindProps"
+        @toggle-advanced="handleToggleAdvanced"
+      >
+        <template
+          v-for="item in [
+            'resetBefore',
+            'submitBefore',
+            'advanceBefore',
+            'advanceAfter'
+          ]"
+          #[item]="data"
+        >
+          <slot :name="item" v-bind="data || {}"></slot>
+        </template>
+      </FormAction>
+      <slot name="formFooter"></slot>
+    </Row>
+  </Form>
+</template>
+
+<script lang="ts" setup>
+import { useAttrs, watch } from 'vue'
+import { pick } from 'lodash-es'
+import { Form, Row } from 'ant-design-vue'
+import { platFormEmits } from './plat-form-emits'
+import { platFormProps, aFormPropKeys } from './plat-form-props'
+import {
+  useFormState,
+  useFormMethods,
+  useFormEvents,
+  createFormContext
+} from './hook'
+import FormAction from './components/form-action.vue'
+import PlatFormItem from './plat-form-item.vue'
+import type { PlatFormType } from './hook'
+
+defineOptions({
+  name: 'PlForm'
+})
+const attrs = useAttrs()
+const props = defineProps(platFormProps)
+const emit = defineEmits(platFormEmits)
+useFormState({ props, attrs })
+const platFormState = useFormState({ props, attrs })
+const {
+  formModel,
+  getRowConfig,
+  platFormRef,
+  getFormProps,
+  getFormActionBindProps,
+  formSchemasRef
+} = platFormState
+
+// 表单内部方法
+const platFormMethods = useFormMethods({ ...platFormState })
+const {
+  initFormValues,
+  handleFormValues,
+  setFormModel,
+  setItemRef,
+  setSchemaFormProps
+} = platFormMethods
+
+// 初始化表单
+initFormValues()
+
+// a-form表单事件二次封装和扩展
+const platFormEvents = useFormEvents({
+  ...platFormState,
+  emit,
+  handleFormValues
+})
+
+// 如果props修改
+// 同步外部对props的修改
+watch(props, () => setSchemaFormProps(props), {
+  deep: true,
+  immediate: true
+})
+
+// 当前组件所有的状态和方法
+const instance = {
+  ...platFormState,
+  ...platFormEvents,
+  ...platFormMethods
+} as PlatFormType
+
+emit('register', instance)
+
+createFormContext(instance)
+
+function handleToggleAdvanced() {
+  console.log('点击了收缩或展开')
+}
+
+defineExpose(instance)
+</script>
+
+<style scoped></style>

package/packages/components/form/src/methods.ts

@@ -0,0 +1,49 @@
+import { isNumber } from '../../../utils/is'
+import type { ComponentMapType } from './types'
+
+const DATE_TYPE = ['DatePicker', 'MonthPicker', 'WeekPicker', 'TimePicker']
+
+function genType() {
+  return [...DATE_TYPE, 'RangePicker']
+}
+
+export const dateItemType = genType()
+
+/**
+ * @description: 生成placeholder
+ */
+export function createPlaceholderMessage(
+  component: ComponentMapType,
+  label = ''
+) {
+  if (component.includes('Input') || component.includes('Complete')) {
+    return `${label}`
+  }
+  const chooseTypes: ComponentMapType[] = [
+    'Select',
+    'Cascader',
+    'Checkbox',
+    'CheckboxGroup',
+    'Switch',
+    'TreeSelect'
+  ]
+  if (component.includes('Picker') || chooseTypes.includes(component)) {
+    return `${label}`
+  }
+  return ''
+}
+
+export function handleInputNumberValue(
+  component?: ComponentMapType,
+  val?: any
+) {
+  if (!component) return val
+  if (
+    ['Input', 'InputPassword', 'InputSearch', 'InputTextArea'].includes(
+      component
+    )
+  ) {
+    return val && isNumber(val) ? `${val}` : val
+  }
+  return val
+}

package/packages/components/form/src/plat-form-emits.ts

@@ -0,0 +1,13 @@
+import { isObject } from '../../../utils/is'
+import type { ComponentInternalInstance } from 'vue'
+
+export const platFormEmits = {
+  register: (exposed: ComponentInternalInstance['exposed']) =>
+    isObject(exposed),
+  reset: (formModel: Recordable<any>) => isObject(formModel),
+  submit: (formModel: any) => isObject(formModel),
+  'advanced-change': () => true
+}
+
+export type PlatFormEmits = typeof platFormEmits
+export type PlatFormEmitFn = EmitFn<PlatFormEmits>