@dt-frames/ui 1.0.12 → 1.0.16

package/src/components/forms/src/hooks/useFormActions.ts

@@ -1,63 +0,0 @@
-/** ==================================
- *  处理查询条件中的按钮收缩
- *  ==================================*/
-
-import { isBoolean, Recordable, useAppStore } from "@dt-frames/core"
-import { ComputedRef, Ref, toRaw, unref } from "vue"
-import { RESET_BTN_NAME, SEARCH_BTN_NAME } from "../const/form.const"
-import { ButtonProps, FormProps, FormSchema } from "../types/form.type"
-
-type FormOpt = {
-    updateSchema: (data: Partial<FormSchema> | Partial<FormSchema>[]) => Promise<void>
-    getProps: ComputedRef<FormProps>
-    getSchema: ComputedRef<FormSchema[]>,
-    defaultValue: Ref<Recordable>,
-    getFormValues: () => Recordable,
-    setFormValues: (values: Recordable) => Promise<void>,
-}
-
-export function useFormActions(opt: FormOpt) {
-    const { getProps, getSchema, defaultValue,  updateSchema, getFormValues, setFormValues } = opt
-    const { appConf } = useAppStore()
-
-    // 切换查询条件的展开 折叠
-    function handleAdvanced(isAdvanced: boolean) {
-        const { schemas, minShowColumn = appConf.ui.form?.minShowColumn || 2 } = unref(getProps)
-
-        let schema = schemas.reduce( ( t: FormSchema[], it: FormSchema, index ) => {
-            if( index > minShowColumn - 1)
-            it.isAdvanced = isAdvanced
-            t.push( it )
-
-            return t
-        }, [] )
-
-        updateSchema( schema )
-    }
-
-    function handleMethod(params: boolean | ButtonProps) {
-        const { onSearch, onReset } = unref(getProps)
-
-        if( isBoolean( params ) ) {
-
-            // 如果为boolean 则视为查询条件的切换按钮
-            handleAdvanced(params as boolean)
-
-        } else if(params.name === SEARCH_BTN_NAME) {
-
-            // 查询
-            onSearch(getFormValues())
-
-        } else if(params.name === RESET_BTN_NAME) {
-            
-            // 重置
-            setFormValues(toRaw(defaultValue.value))
-            onReset(getFormValues())
-
-        } else {
-            (params as ButtonProps).onClick()
-        }
-    }
-
-    return [ handleMethod ]
-}

package/src/components/forms/src/hooks/useFormEvents.ts

@@ -1,248 +0,0 @@
-import { deepMerge, isObject, isString, Recordable } from "@dt-frames/core"
-import { ComputedRef, nextTick, Ref, toRaw, unref } from "vue"
-import { uniqBy, cloneDeep } from 'lodash-es'
-import { FormActionType, FormProps, FormSchema } from "../types/form.type"
-import { handleInputNumberValue } from "./helper"
-import dayjs from 'dayjs'
-
-/** =================================
- *  定义表单的事件
- *  =================================*/
-type FormEventsType = {
-    emit: (event: string, ...args: any[]) => void
-    getProps: ComputedRef<FormProps>;
-    getSchema: ComputedRef<FormSchema[]>
-    formModel: Recordable,
-    defaultValue: Ref<Recordable>,
-    formElRef: Ref<FormActionType>,
-    schemaRef: Ref<FormSchema[]>,
-    handleFormValues: Function;
-}
-
-export function useFormEvents({
-    emit,
-    getSchema,
-    formModel,
-    defaultValue,
-    formElRef,
-    schemaRef,
-    handleFormValues
-}: FormEventsType) {
-
-    /**
-     * 获取form表单的值
-    */
-    function getFormValues() {
-        const formEl = unref(formElRef);
-        if (!formEl) return {};
-
-        return handleFormValues(toRaw(unref(formModel)))
-    }
-
-    /**
-     * 更新表单的值
-     */
-    function updateSchema(data: Partial<FormSchema> | Partial<FormSchema>[]): Promise<void> {
-        let updateItems: Partial<FormSchema>[] = []
-
-        updateItems = isObject(data) 
-            ? [ data as FormSchema ]
-            : [...data]
-
-        if( updateItems.every( it => it.component !== 'Divider' && !it.name ) ) {
-            console.error( '所有的元素都必须设置name属性' )
-            return
-        }
-
-        let schema: FormSchema[] = []
-        updateItems.forEach( it => {
-            unref(getSchema).forEach( val => {
-                if( val.name === it.name ) {
-                    const newSchema = deepMerge(val, it)
-                    schema.push(newSchema as FormSchema)
-                } else {
-                    schema.push(val)
-                }
-            } )
-        } )
-
-        schemaRef.value = uniqBy(schema, 'name')
-    }
-
-
-    /**
-     * 重新设置schema
-     */
-    function resetSchema(data: Partial<FormSchema> | Partial<FormSchema>[]): Promise<void> {
-        let updateItems: Partial<FormSchema>[] = []
-
-        updateItems = isObject(data) 
-            ? [ data as FormSchema ]
-            : [...data]
-
-        if( updateItems.every( it => it.component !== 'Divider' && !it.name ) ) {
-            console.error( '所有的元素都必须设置name属性' )
-            return
-        }
-    
-        schemaRef.value = updateItems as FormSchema[]
-    }
-
-    /**
-     * 清除验证条件
-    */
-    async function clearValidate(name?: string | string[]) {
-        await unref(formElRef)?.clearValidate(name);
-    }
-
-    /**
-     * 重置form表单
-     */
-    function resetForms() {
-        if ( !unref(formElRef) ) return
-
-        Object.keys( formModel ).forEach( key => {
-            const schema = unref(getSchema).find((item) => item.name === key)
-            const isInput = 
-                schema?.component &&
-                ['Input', 'InputPassword', 'InputSearch', 'InputTextArea'].includes(schema.component)
-
-            formModel[key] = isInput ? defaultValue.value[key] || '' : defaultValue.value[key]
-
-        } )
-
-        nextTick(() => clearValidate())
-
-        emit('reset', toRaw(formModel))
-    }
-
-    /**
-     * 根据属性名删除表单
-     */
-    function removeFormByName(names: string | string[]) {
-        if( !names ) return
-
-        const schemaList: FormSchema[] = cloneDeep(unref(getSchema))
-        const nameList: string[] = isString(names) ? [names] : names
-
-        for (const name of nameList) {
-            _removeSchemaByName(name, schemaList);
-        }
-        schemaRef.value = schemaList
-    }
-
-    function _removeSchemaByName(name: string, schemaList: FormSchema[]) {
-        const index = schemaList.findIndex((schema) => schema.name === name);
-        if (index !== -1) {
-            delete formModel[name];
-            schemaList.splice(index, 1);
-        }
-    }
-
-
-    /**
-     * 设置属性的值
-     */
-    function setFormValues(values: Recordable | null): Promise<void> {
-
-        if( !values || !Object.keys( values ).length ) {
-            for(let it in formModel) formModel[it] = Array.isArray(formModel[it]) ? [] : null 
-            return 
-        }
-
-        const names = unref(getSchema).map((item) => item.name).filter(Boolean)
-
-        const validKeys: string[] = []
-
-        Object.keys(values).forEach( key => {
-            const schema = unref(getSchema).find((item) => item.name === key)
-            let value = values[key]
-
-            const hasKey = Reflect.has(values, key)
-
-            value = handleInputNumberValue(schema?.component, value)
-
-            if (hasKey && names.includes(key)) {
-                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 { props } = schema || {}
-
-                        let _props = props as any
-
-                        if (typeof props === 'function') {
-                            _props = props({ formModel });
-                        }
-                        formModel[key] = value ? (_props?.valueFormat ? value : dayjs(value)) : null
-                    }
-                } else {
-                    formModel[key] = value
-                }
-
-                validKeys.push(key)
-            }
-        } )
-
-        return validateFields(validKeys).catch((_) => {})
-    }
-
-    /**
-     * 动态添加一个表单
-     */
-    function appendFormItems(schema: FormSchema, prefixName?: string, first = false) {
-        const schemaList: FormSchema[] = cloneDeep(unref(getSchema))
-
-        const index = schemaList.findIndex((schema) => schema.name === prefixName)
-
-        if (!prefixName || index === -1 || first) {
-            first ? schemaList.unshift(schema) : schemaList.push(schema);
-            schemaRef.value = schemaList;
-            return;
-        }
-
-        if (index !== -1) {
-            schemaList.splice(index + 1, 0, schema);
-        }
-
-        schemaRef.value = schemaList;
-    }
-
-    /**
-     * 检验有效的属性值
-     */
-     async function validate(nameList: (string | number)[]) {
-        return await unref(formElRef)?.validate(nameList);
-    }
-
-    /**
-     * 返回有效的区域
-     */
-    async function validateFields(nameList: (string | number)[]) {
-        return unref(formElRef)?.validateFields(nameList);
-    }
-
-    function itemIsDateType(key: string) {
-        return unref(getSchema).some((item) => {
-          return item.name === key ? ['DatePicker', 'MonthPicker', 'WeekPicker', 'TimePicker', 'RangePicker'].includes(item.component) : false;
-        });
-    }
-
-
-    return {
-        updateSchema,
-        resetSchema,
-        clearValidate,
-        resetForms,
-        removeFormByName,
-        setFormValues,
-        appendFormItems,
-        getFormValues,
-        validate,
-        validateFields
-    }
-}

package/src/components/forms/src/hooks/useFormValue.ts

@@ -1,49 +0,0 @@
-import { Recordable } from "@dt-frames/core";
-import { getCurrentInstance, Ref, reactive, readonly, watchEffect, computed, nextTick, toRaw, unref } from "vue";
-import { isEqual } from 'lodash-es'
-
-export function useFormValue<T extends Recordable>(
-    props: T,
-    key: keyof T = 'value',
-    changeEvent = 'change',
-    emitData?: Ref<any[]>
-) {
-    const instance = getCurrentInstance()
-    const emit = instance?.emit
-
-    const innerState = reactive({
-        value: props[key]
-    })
-
-    const defaultState = readonly(innerState)
-
-    const setState = ( val: any ) => {
-        innerState.value = val
-
-        nextTick(() => {
-            emit?.(changeEvent, val, ...(toRaw(unref(emitData)) || []))
-        })
-    }
-
-    watchEffect(() => {
-        innerState.value = props[key]
-    })
-
-    const state: any = computed({
-        get() {
-            return innerState.value
-        },
-        set(value) {
-            if( isEqual(value, defaultState.value) ) return
-
-            innerState.value = value as T[keyof T]
-
-            nextTick(() => {
-                emit?.(changeEvent, value, ...(toRaw(unref(emitData)) || []))
-            })
-
-        }
-    })
-
-    return [state, setState, defaultState]
-}

package/src/components/forms/src/hooks/useFormValues.ts

@@ -1,131 +0,0 @@
-/** =========================================================
- *  处理表单的值
- *  ==========================================================*/
-import { dateFormat, isFunction, isObject, isString, Recordable } from "@dt-frames/core";
-import { isArray } from "@vue/shared";
-import { set } from "lodash-es";
-import dayjs from "dayjs";
-import { ComputedRef, Ref, unref } from "vue";
-import { FormProps, FormSchema } from "../types/form.type";
-import { datePickerType } from "./helper";
-
-type FormValueOptions = {
-    getProps: ComputedRef<FormProps>
-    defaultValue: Ref<any>
-    getSchema: ComputedRef<FormSchema[]>
-    formModel: Recordable
-}
-
-export function useFormValues({
-    defaultValue,
-    getSchema,
-    formModel,
-    getProps
-}: FormValueOptions) {
-
-    /**
-     * 可以动态获取formModel的值
-     */
-    function handleFormValues(values: Recordable) {
-        if( !isObject(values) ) return { }
-
-        const res: Recordable = {}
-
-        for(let [key, value] of Object.entries(values)) {
-            if( !key || (Array.isArray(value) && value.length === 0) || isFunction(value) ) {
-                continue
-            }
-
-            /**
-             *  TODO 这里需要对时间进行处理
-             */ 
-
-
-            if ( isString(value) ) {
-                value = value.trim();
-            }
-
-            set(res, key, value)
-        }
-
-        return res
-    }
-
-
-    /**
-     * 设置默认值
-     * 设置初始化的formModel值
-    */
-    function initDefault() {
-        const schema = unref( getSchema ).filter(it => it.component )
-        const obj: Recordable = {}
-
-        schema.forEach( item => {
-            
-            const { props = {}, name, component } = item
-
-            let { defaultValue, mode, format, treeCheckable } = isFunction( props ) ? props() : props
-            const names: string[] = isString(name) ? [ name ] : name
-
-            if( defaultValue !== null && defaultValue !== undefined ) {
-
-                // 处理时间
-                if( datePickerType.includes(component) ) {
-                    const modeType = {
-                        time: 'YYYY-MM-DD HH:mm:ss',
-                        date: 'YYYY-MM-DD',
-                        month: 'YYYY-MM',
-                        year: 'YYYY'
-                    }
-
-                    const _format = format || ( modeType[mode] ) || modeType.date
-
-                    if ( !isArray(defaultValue) ) {
-                        // 单个时间
-                        obj[names[0]] = dayjs(defaultValue, _format)
-                        formModel[names[0]] = dayjs(defaultValue, _format)
-                    } else {
-                        
-                        // 范围时间
-                        let rangeTimes = defaultValue.reduce(( t, it ) => {
-                            t.push( dayjs(it, _format) )
-                            return t
-                        }, [])
-
-                        obj[names[0]] = rangeTimes
-                        formModel[names[0]] = rangeTimes
-                    }
-                } else {
-                    // 如果names是数组 则代表有多个默认值 如 InputGroup
-                    if( names.length > 1 ) {
-                        names.forEach( ( key, index ) => {
-                            obj[ key ] = defaultValue[ index ]
-                            formModel[ key ] = defaultValue[ index ]
-                        } )
-                    } else {
-                        obj[names[0]] = defaultValue
-                        formModel[names[0]] = defaultValue
-                    }
-                }
-            } else {
-                names.forEach( ( key, index ) => {
-                    let defaultV = null
-                    // 如果为树结构且为多选  或者复选框为多选状态
-                    if( (component === 'TreeSelect' && (mode === 'multiple' || treeCheckable)) || 
-                        (component === 'Select' && mode === 'multiple') ) {
-                        defaultV = []
-                    }
-
-                    formModel[ key ] = obj[ key ] = defaultV
-                } )
-            }
-        } )
-
-        defaultValue.value = obj
-    }
-
-    return {
-        handleFormValues,
-        initDefault
-    }
-}

package/src/components/forms/src/hooks/useLabelWidth.ts

@@ -1,57 +0,0 @@
-/** =========================================================
- *  处理表单的label宽度问题
- *  ==========================================================*/ 
-
-import { isString, isNumber, useAppStore } from "@dt-frames/core";
-import { computed, Ref, unref } from "vue";
-import { FormProps, FormSchema } from "../types/form.type";
-
-// 计算label的宽度
-export function useLabelWidth(schemaItemRef: Ref<FormSchema>, propsRef: Ref<FormProps>) {
-    return computed(() => {
-        // 当前元素上关于label的设置
-        const { labelWidth, labelCol = { }, wrapperCol = { } } =  unref( schemaItemRef )
-        // 获取全局配置
-        const { appConf } = useAppStore()
-
-        // 整个form关于label的设置
-        const { 
-            labelWidth: gLabelWidth,
-            labelCol: glabelCol,
-            wrapperCol: gwrapperCol,
-            layout = appConf.ui.form.layout
-        } = unref( propsRef )
-
-        // 如果宽度设置为0 
-        if( (isString(labelWidth) || isNumber(labelWidth)) && Number(labelWidth.toString()) === 0 ) {
-            return {
-                labelCol: {
-                    ...labelCol,
-                    ...{ style: { textAlign: 'left' } }
-                },
-                wrapperCol
-            }
-        }
-
-        let width = labelWidth || gLabelWidth
-        const labelcol = { ...glabelCol, ...labelCol }
-        const wrapcol = { ...gwrapperCol, ...wrapperCol }
-
-        if (width) {
-            width = isNumber(width) ? `${width}px` : width
-        }
-
-        return {
-            labelCol: {
-                style: { width },
-                ...labelcol
-            },
-            wrapperCol: {
-                style: { width: layout === 'vertical' ? '100%' : `calc(100% - ${width})` },
-                ...wrapcol
-            }
-        }
-
-    })
-}
-