@dt-frames/ui 1.0.2 → 1.0.5

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

@@ -0,0 +1,63 @@
+/** ==================================
+ *  处理查询条件中的按钮收缩
+ *  ==================================*/
+
+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

@@ -0,0 +1,247 @@
+import { dateFormat, 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"
+
+/** =================================
+ *  定义表单的事件
+ *  =================================*/
+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 ? dateFormat(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 : dateFormat(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

@@ -0,0 +1,49 @@
+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

@@ -0,0 +1,131 @@
+/** =========================================================
+ *  处理表单的值
+ *  ==========================================================*/
+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 )
+        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

@@ -0,0 +1,57 @@
+/** =========================================================
+ *  处理表单的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
+            }
+        }
+
+    })
+}
+