From 00f6f26a9121255fe2634f1036174d0c3b869134 Mon Sep 17 00:00:00 2001 From: xingyu Date: Fri, 18 Aug 2023 19:26:09 +0800 Subject: [PATCH] fix: bugs --- .../Form/src/components/ApiRadioGroup.vue | 5 +- .../Form/src/hooks/useFormEvents.ts | 81 ++++++++++++++++--- .../modules/FormComponentPanel.vue | 8 +- src/hooks/core/useContext.ts | 4 +- 4 files changed, 76 insertions(+), 22 deletions(-) diff --git a/src/components/Form/src/components/ApiRadioGroup.vue b/src/components/Form/src/components/ApiRadioGroup.vue index 20f1db4..f539dfe 100644 --- a/src/components/Form/src/components/ApiRadioGroup.vue +++ b/src/components/Form/src/components/ApiRadioGroup.vue @@ -23,10 +23,7 @@ const props = defineProps({ value: { type: [String, Number, Boolean] as PropType, }, - isBtn: { - type: [Boolean] as PropType, - default: false, - }, + isBtn: propTypes.bool.def(false), numberToString: propTypes.bool, resultField: propTypes.string.def(''), labelField: propTypes.string.def('label'), diff --git a/src/components/Form/src/hooks/useFormEvents.ts b/src/components/Form/src/hooks/useFormEvents.ts index 39ac850..5b18aa5 100644 --- a/src/components/Form/src/hooks/useFormEvents.ts +++ b/src/components/Form/src/hooks/useFormEvents.ts @@ -4,7 +4,15 @@ import { nextTick, toRaw, unref } from 'vue' import { cloneDeep, get, set, uniqBy } from 'lodash-es' import type { FormActionType, FormProps, FormSchema } from '../types/form' import { dateItemType, defaultValueComponents, handleInputNumberValue } from '../helper' -import { isArray, isDef, isEmpty, isFunction, isNullOrUnDef, isObject, isString } from '@/utils/is' +import { + isArray, + isDef, + isEmpty, + isFunction, + isNullOrUnDef, + isObject, + isString, +} from '@/utils/is' import { deepMerge } from '@/utils' import { dateUtil } from '@/utils/dateUtil' import { error } from '@/utils/log' @@ -82,12 +90,10 @@ export function useFormEvents({ const fieldKeys = Object.keys(defaultValueObj || {}) if (fieldKeys.length) { fieldKeys.map((field) => { - formModel[field] = defaultValueObj[field] + formModel[field] = defaultValueObj![field] }) } - const isInput = schema?.component && defaultValueComponents.includes(schema.component) - const defaultValue = cloneDeep(defaultValueRef.value[key]) - formModel[key] = isInput ? defaultValue || '' : defaultValue + formModel[key] = getDefaultValue(schema, defaultValueRef, key) }) nextTick(() => clearValidate()) @@ -139,7 +145,11 @@ export function useFormEvents({ unref(formModel)[key] = arr } else { - unref(formModel)[key] = fieldValue ? (_props?.valueFormat ? fieldValue : dateUtil(fieldValue)) : null + unref(formModel)[key] = fieldValue + ? _props?.valueFormat + ? fieldValue + : dateUtil(fieldValue) + : null } } else { @@ -204,9 +214,19 @@ export function useFormEvents({ /** * @description: Insert after a certain field, if not insert the last */ - async function appendSchemaByField(schema: FormSchema | FormSchema[], prefixField?: string, first = false) { + async function appendSchemaByField( + schema: FormSchema | FormSchema[], + prefixField?: string, + first = false, + ) { const schemaList: FormSchema[] = cloneDeep(unref(getSchema)) - + const addSchemaIds: string[] = Array.isArray(schema) + ? schema.map(item => item.field) + : [schema.field] + if (schemaList.find(item => addSchemaIds.includes(item.field))) { + error('There are schemas that have already been added') + return + } const index = schemaList.findIndex(schema => schema.field === prefixField) const _schemaList = isObject(schema) ? [schema as FormSchema] : (schema as FormSchema[]) if (!prefixField || index === -1 || first) { @@ -231,10 +251,14 @@ export function useFormEvents({ if (isArray(data)) updateData = [...data] - const hasField = updateData.every(item => item.component === 'Divider' || (Reflect.has(item, 'field') && item.field)) + const hasField = updateData.every( + item => item.component === 'Divider' || (Reflect.has(item, 'field') && item.field), + ) if (!hasField) { - error('All children of the form Schema array that need to be updated must contain the `field` field') + error( + 'All children of the form Schema array that need to be updated must contain the `field` field', + ) return } schemaRef.value = updateData as FormSchema[] @@ -248,10 +272,14 @@ export function useFormEvents({ if (isArray(data)) updateData = [...data] - const hasField = updateData.every(item => item.component === 'Divider' || (Reflect.has(item, 'field') && item.field)) + const hasField = updateData.every( + item => item.component === 'Divider' || (Reflect.has(item, 'field') && item.field), + ) if (!hasField) { - error('All children of the form Schema array that need to be updated must contain the `field` field') + error( + 'All children of the form Schema array that need to be updated must contain the `field` field', + ) return } const schema: FormSchema[] = [] @@ -290,7 +318,9 @@ export function useFormEvents({ && Reflect.has(item, 'field') && item.field && !isNullOrUnDef(item.defaultValue) - && (!(item.field in currentFieldsValue) || isNullOrUnDef(currentFieldsValue[item.field]) || isEmpty(currentFieldsValue[item.field])) + && (!(item.field in currentFieldsValue) + || isNullOrUnDef(currentFieldsValue[item.field]) + || isEmpty(currentFieldsValue[item.field])) ) obj[item.field] = item.defaultValue }) @@ -377,3 +407,28 @@ export function useFormEvents({ scrollToField, } } + +function getDefaultValue( + schema: FormSchema | undefined, + defaultValueRef: UseFormActionContext['defaultValueRef'], + key: string, +) { + let defaultValue = cloneDeep(defaultValueRef.value[key]) + const isInput = checkIsInput(schema) + if (isInput) + return defaultValue || '' + + if (!defaultValue && schema && checkIsRangeSlider(schema)) + defaultValue = [0, 0] + + return defaultValue +} + +function checkIsRangeSlider(schema: FormSchema) { + if (schema.component === 'Slider' && schema.componentProps && schema.componentProps.range) + return true +} + +function checkIsInput(schema?: FormSchema) { + return schema?.component && defaultValueComponents.includes(schema.component) +} diff --git a/src/components/FormDesign/src/components/VFormDesign/modules/FormComponentPanel.vue b/src/components/FormDesign/src/components/VFormDesign/modules/FormComponentPanel.vue index a922dbd..db1c4d1 100644 --- a/src/components/FormDesign/src/components/VFormDesign/modules/FormComponentPanel.vue +++ b/src/components/FormDesign/src/components/VFormDesign/modules/FormComponentPanel.vue @@ -123,15 +123,17 @@ export default defineComponent({ } .draggable-box { - // width: 100%; + height: calc(100vh - 200px); + overflow: auto; + .drag-move { min-height: 62px; cursor: move; } .list-main { - height: 100%; - overflow: auto; + // height: 100%; + // overflow: auto; // 列表动画 .list-enter-active { transition: all 0.5s; diff --git a/src/hooks/core/useContext.ts b/src/hooks/core/useContext.ts index f4cfd16..c3a2fdd 100644 --- a/src/hooks/core/useContext.ts +++ b/src/hooks/core/useContext.ts @@ -12,11 +12,11 @@ type ShallowUnwrap = { } export function createContext(context: any, key: InjectionKey = Symbol(), options: CreateContextOptions = {}) { - const { readonly = true, createProvider = false, native = false } = options + const { readonly = true, createProvider = true, native = false } = options const state = reactive(context) const provideData = readonly ? defineReadonly(state) : state - !createProvider && provide(key, native ? context : provideData) + createProvider && provide(key, native ? context : provideData) return { state,