Browse Source

fix: bugs

main
xingyu 2 years ago
parent
commit
00f6f26a91
  1. 5
      src/components/Form/src/components/ApiRadioGroup.vue
  2. 81
      src/components/Form/src/hooks/useFormEvents.ts
  3. 8
      src/components/FormDesign/src/components/VFormDesign/modules/FormComponentPanel.vue
  4. 4
      src/hooks/core/useContext.ts

5
src/components/Form/src/components/ApiRadioGroup.vue

@ -23,10 +23,7 @@ const props = defineProps({
value: { value: {
type: [String, Number, Boolean] as PropType<string | number | boolean>, type: [String, Number, Boolean] as PropType<string | number | boolean>,
}, },
isBtn: { isBtn: propTypes.bool.def(false),
type: [Boolean] as PropType<boolean>,
default: false,
},
numberToString: propTypes.bool, numberToString: propTypes.bool,
resultField: propTypes.string.def(''), resultField: propTypes.string.def(''),
labelField: propTypes.string.def('label'), labelField: propTypes.string.def('label'),

81
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 { cloneDeep, get, set, uniqBy } from 'lodash-es'
import type { FormActionType, FormProps, FormSchema } from '../types/form' import type { FormActionType, FormProps, FormSchema } from '../types/form'
import { dateItemType, defaultValueComponents, handleInputNumberValue } from '../helper' 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 { deepMerge } from '@/utils'
import { dateUtil } from '@/utils/dateUtil' import { dateUtil } from '@/utils/dateUtil'
import { error } from '@/utils/log' import { error } from '@/utils/log'
@ -82,12 +90,10 @@ export function useFormEvents({
const fieldKeys = Object.keys(defaultValueObj || {}) const fieldKeys = Object.keys(defaultValueObj || {})
if (fieldKeys.length) { if (fieldKeys.length) {
fieldKeys.map((field) => { fieldKeys.map((field) => {
formModel[field] = defaultValueObj[field] formModel[field] = defaultValueObj![field]
}) })
} }
const isInput = schema?.component && defaultValueComponents.includes(schema.component) formModel[key] = getDefaultValue(schema, defaultValueRef, key)
const defaultValue = cloneDeep(defaultValueRef.value[key])
formModel[key] = isInput ? defaultValue || '' : defaultValue
}) })
nextTick(() => clearValidate()) nextTick(() => clearValidate())
@ -139,7 +145,11 @@ export function useFormEvents({
unref(formModel)[key] = arr unref(formModel)[key] = arr
} }
else { else {
unref(formModel)[key] = fieldValue ? (_props?.valueFormat ? fieldValue : dateUtil(fieldValue)) : null unref(formModel)[key] = fieldValue
? _props?.valueFormat
? fieldValue
: dateUtil(fieldValue)
: null
} }
} }
else { else {
@ -204,9 +214,19 @@ export function useFormEvents({
/** /**
* @description: Insert after a certain field, if not insert the last * @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 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 index = schemaList.findIndex(schema => schema.field === prefixField)
const _schemaList = isObject(schema) ? [schema as FormSchema] : (schema as FormSchema[]) const _schemaList = isObject(schema) ? [schema as FormSchema] : (schema as FormSchema[])
if (!prefixField || index === -1 || first) { if (!prefixField || index === -1 || first) {
@ -231,10 +251,14 @@ export function useFormEvents({
if (isArray(data)) if (isArray(data))
updateData = [...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) { 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 return
} }
schemaRef.value = updateData as FormSchema[] schemaRef.value = updateData as FormSchema[]
@ -248,10 +272,14 @@ export function useFormEvents({
if (isArray(data)) if (isArray(data))
updateData = [...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) { 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 return
} }
const schema: FormSchema[] = [] const schema: FormSchema[] = []
@ -290,7 +318,9 @@ export function useFormEvents({
&& Reflect.has(item, 'field') && Reflect.has(item, 'field')
&& item.field && item.field
&& !isNullOrUnDef(item.defaultValue) && !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 obj[item.field] = item.defaultValue
}) })
@ -377,3 +407,28 @@ export function useFormEvents({
scrollToField, 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)
}

8
src/components/FormDesign/src/components/VFormDesign/modules/FormComponentPanel.vue

@ -123,15 +123,17 @@ export default defineComponent({
} }
.draggable-box { .draggable-box {
// width: 100%; height: calc(100vh - 200px);
overflow: auto;
.drag-move { .drag-move {
min-height: 62px; min-height: 62px;
cursor: move; cursor: move;
} }
.list-main { .list-main {
height: 100%; // height: 100%;
overflow: auto; // overflow: auto;
// //
.list-enter-active { .list-enter-active {
transition: all 0.5s; transition: all 0.5s;

4
src/hooks/core/useContext.ts

@ -12,11 +12,11 @@ type ShallowUnwrap<T> = {
} }
export function createContext<T>(context: any, key: InjectionKey<T> = Symbol(), options: CreateContextOptions = {}) { export function createContext<T>(context: any, key: InjectionKey<T> = Symbol(), options: CreateContextOptions = {}) {
const { readonly = true, createProvider = false, native = false } = options const { readonly = true, createProvider = true, native = false } = options
const state = reactive(context) const state = reactive(context)
const provideData = readonly ? defineReadonly(state) : state const provideData = readonly ? defineReadonly(state) : state
!createProvider && provide(key, native ? context : provideData) createProvider && provide(key, native ? context : provideData)
return { return {
state, state,