@dt-frames/ui 1.0.0

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
+            }
+        }
+
+    })
+}
+

package/src/components/forms/src/index.less

@@ -0,0 +1,82 @@
+.text-secondary{
+    color: #666;
+}
+
+.suffix-item .suffix {
+    display: inline-flex;
+    padding-left: 6px;
+    margin-top: 1px;
+    line-height: 1;
+    align-items: center;
+}
+
+.form-btns{
+    button{
+        margin-left: 12px;
+    }
+
+    .advanced{
+        margin-left: 8px;
+        .text{
+            margin-right: 5px;
+        }
+        .basic-arrow{
+            margin-left: -8px;
+        }
+    }
+}
+
+.basic-arrow{
+    display: inline-block;
+    cursor: pointer;
+    transform: rotate(0deg);
+    transition: all 0.3s ease 0.1s;
+    transform-origin: center center;
+
+    
+    .dt-icon{
+        vertical-align: middle;
+        color: @primary-color !important;
+    }
+
+    &--active{
+        transform: rotate(180deg);
+    }
+}
+
+.form-btns{
+    .ant-form-item-control-input-content{
+        display: flex;
+        .ant-btn{
+            display: flex;
+            align-items: center;
+        }
+        .ant-btn .dt-icon{
+            font-size: 20px;
+            height: 100%;
+
+            svg{
+                display: block;
+                height: 100%;
+                text-align: center;
+            }
+
+            .preIcon{
+                padding-right: 2px;
+            }
+        }
+
+        .ant-btn-primary .dt-icon svg{
+            color: #fff;
+        }
+    }
+}
+
+.basic-form--compact{
+    .ant-form-item {
+        margin-bottom: 14px !important;
+    }
+}
+
+
+

package/src/components/forms/src/index.vue

@@ -0,0 +1,306 @@
+<template>
+    <Form
+        v-bind="getFormBindValue"
+        ref="formElRef"
+        :class="getFormClass"
+        :model="formModel"
+        :layout="getLayout"
+    >
+        <Row v-bind="getProps.rowProps">
+            <template v-for="schema in getSchema" :key="schema.prop">
+                <FormItem 
+                    :schema="schema"
+                    :formProps="getProps"
+                    :formModel="formModel"
+                    :defaultValues="defaultValue"
+                    :setFormModel="setFormModel"
+                    :formActionType="formActionMethods"
+                >
+                    <template #[item]="data" v-for="item in Object.keys($slots)">
+                        <slot :name="item" v-bind="data || {}"></slot>
+                    </template>
+                </FormItem>
+            </template>
+
+            <FormButtons 
+                v-if="getActionsProps.buttonList?.length && getProps.mode === 'search'" 
+                v-bind="getActionsProps"
+                @handle-method="handleMethod"
+            ></FormButtons>
+        </Row>
+    </Form>
+</template>
+
+<script lang="ts">
+    import { computed, ref, reactive, unref, onMounted, Ref, watch, defineComponent, toRaw } from 'vue'
+    import { Form, Row } from 'ant-design-vue'
+    import { Nullable, Recordable, deepMerge, useAppStore, isFunction, useTimeoutFn } from '@dt-frames/core'
+
+    import FormItem from './components/formItem.vue'
+    import FormButtons from './components/formButton.vue'
+    import { ButtonProps, FormActionType, FormProps, FormSchema } from './types/form.type'
+    import { BasicProps } from './prop'
+    import { useFormValues } from './hooks/useFormValues'
+    import { useFormEvents } from './hooks/useFormEvents'
+    import { useFormActions } from './hooks/useFormActions'
+    import { SEARCH_BTNS, SEARCH_BTN_NAME } from './const/form.const'
+
+
+    export default defineComponent({
+        name: 'dt-form',
+        components: {
+            Form, 
+            Row,
+            FormItem,
+            FormButtons
+        },
+        props: BasicProps,
+        emits: [ 'register', 'reset' ],
+        setup(props, { emit, attrs }) {
+            const { appConf } = useAppStore()
+            const formElRef = ref(null)
+
+            // 表单绑定的变量
+            const formModel = reactive<Recordable>({})
+            // 表单默认值
+            const defaultValue = ref<Recordable>({})
+            // 定义一个新的propref,防止污染原来的prop
+            const propsRef = ref<Partial<FormProps>>({})
+            // 表单条目
+            const schemaRef = ref<Nullable<FormSchema[]>>(null)
+
+            // 计算容器的css样式
+            const formStyle = computed(() => {
+                const { style, mode } = unref(getProps)
+                return {
+                    style: deepMerge({
+                        padding: mode === 'dialog' ? '20px' : null
+                    }, style)
+                }
+            })
+
+            // form绑定的属性
+            const getFormBindValue = computed( () => ({ 
+                ...attrs, 
+                ...props, 
+                ...unref(getProps),
+                ...unref(formStyle)
+            } as Recordable))
+
+            /**
+             * 获取form的所有配置信息
+             */
+            const getProps = computed( (): FormProps => {
+                const { labelAlign, rowProps } = props
+
+                // 全局设置
+                const globalProps = {
+                    labelAlign: labelAlign || appConf.ui.form.labelAlign,
+                    rowProps: rowProps || appConf.ui.form.rowProps
+                }
+
+                return { ...props, ...globalProps, ...(unref(propsRef) as any) } as unknown as FormProps
+            } )
+
+            // 计算布局方式
+            const getLayout = computed(() => {
+                return unref(getProps).layout || appConf.ui.form.layout
+            })
+
+            // form表单样式[紧凑型 | 正常]
+            const getFormClass = computed(() => {
+                const { compact, mode } = unref(getProps)
+
+                const getCompact = compact === null 
+                    ? ( mode === 'dialog' ? false : true)
+                    : compact
+
+                return [
+                    'basic-form',
+                    {
+                        'basic-form--compact': getCompact,
+                        'basic-form--search':  (mode === 'search' || mode === undefined) ? true : false
+                    },
+                ];
+            })
+
+            const getSchema = computed(() => {
+                const schemas = unref(schemaRef) || (unref(getProps).schemas as any)
+                return schemas as FormSchema[];
+            })
+
+            
+
+            /**
+             * 处理表单的初始化数据
+             */
+            const { handleFormValues, initDefault } = useFormValues({
+                getProps,
+                defaultValue,
+                getSchema,
+                formModel,
+            })
+
+            /**
+             * 处理表单函数
+            */
+            // 表单注册
+            async function setProps(formProps: Partial<FormProps>): Promise<void> {
+                propsRef.value = deepMerge(unref(propsRef) || {}, formProps);
+            }
+
+            // 设置formModel
+            function setFormModel(key: string, value: any) {
+                formModel[ key ] = value
+                const { validateTrigger } = unref(getFormBindValue)
+                
+                if (!validateTrigger || validateTrigger === 'change') {
+                    validateFields([key]).catch((_) => {});
+                }
+            }
+
+            const {
+                updateSchema,
+                resetSchema,
+                clearValidate,
+                resetForms,
+                removeFormByName,
+                setFormValues,
+                appendFormItems,
+                getFormValues,
+                validate,
+                validateFields
+            } = useFormEvents({
+                emit,
+                getProps,
+                getSchema,
+                formModel,
+                formElRef: formElRef as Ref<FormActionType>,
+                defaultValue,
+                schemaRef: schemaRef as unknown as Ref<FormSchema[]>,
+                handleFormValues
+            })
+
+            const formActionMethods: FormActionType = {
+                setProps,
+                updateSchema,
+                resetSchema,
+                clearValidate,
+                resetForms,
+                removeFormByName,
+                setFormValues,
+                appendFormItems,
+                getFormValues,
+                validate,
+                validateFields
+            }
+
+            // 操作按钮相关操作
+            const [ handleMethod ] = useFormActions({
+                getProps,
+                getSchema,
+                defaultValue,
+                updateSchema,
+                getFormValues,
+                setFormValues
+            })
+
+            
+            watch(
+                () => unref(getProps).model,
+                () => {
+                    const { model } = unref(getProps);
+                    if (!model) return;
+                    setFormValues(model);
+                },
+                {
+                    immediate: true,
+                },
+            )
+
+            watch(
+                () => unref(getProps).schemas,
+                (schemas) => resetSchema(schemas ?? [])
+            )
+
+            onMounted(() => {
+                // 每次加载 进行重置
+                setFormValues( null )
+                emit('register', formActionMethods)
+                initDefault()
+
+                // 为了保证table的数据能够成功传入useSource中，这里需要延迟执行search
+                useTimeoutFn(() => {
+                    // 如果有onSearch默认查询
+                    const { onSearch, autoFetch } = unref(getProps)
+
+                    if( autoFetch && onSearch && isFunction(onSearch) ) {
+                        onSearch(toRaw(defaultValue.value))
+                    }  
+                }, 20)
+            })
+
+            const getActionsProps = computed((): Recordable => {
+                const { 
+                    mode, 
+                    minShowColumn = appConf.ui.form.minShowColumn || 2, 
+                    schemas = [], 
+                    showAdvancedButton: advanced,
+                    loading,
+                    buttons
+                } = unref(getProps)
+
+                let showAdvancedButton = mode === 'search' ? true : false
+
+                if( advanced !== undefined ) {
+                    showAdvancedButton = advanced
+                }
+
+                if( schemas.length <= minShowColumn ) {
+                    showAdvancedButton = false
+                }
+
+                let buttonList: ButtonProps[] = []
+                if( !buttons && mode === 'search' ) {
+                    SEARCH_BTNS.forEach((it: any) => {
+                        it.loading = it.name === SEARCH_BTN_NAME ? loading?.onSearch : loading?.onReset
+                        buttonList.push(it)
+                    })
+                } else {
+                    buttonList = [...(buttons||[])]
+                }
+
+                let colspan = mode === 'search' ? appConf.ui.form.searchColspan : appConf.ui.form.dialogColspan
+
+                return {
+                    ...colspan,
+                    ...{ 
+                        showAdvancedButton,
+                        buttonList
+                    },
+                }
+            })
+
+            return {
+                getFormBindValue,
+                getFormClass,
+                formModel,
+                getLayout,
+                getProps,
+                getSchema,
+                defaultValue,
+                formActionMethods,
+                formElRef,
+                props,
+                setFormModel,
+                handleMethod,
+                getActionsProps
+            }
+        }
+    })
+
+    
+
+    
+
+</script>

package/src/components/forms/src/prop.ts

@@ -0,0 +1,80 @@
+import { Recordable } from "@dt-frames/core"
+import { PropType } from "vue"
+import { ColEx, FormActionType, FormProps, FormSchema } from "./types/form.type"
+import type { RowProps } from 'ant-design-vue/lib/grid/Row'
+
+
+export const BasicProps = {
+    mode: {
+        type: String as PropType<'search' | 'dialog' | null>,
+        default: 'search'
+    },
+    // 自动查询
+    autoFetch: {
+        type: Boolean,
+        default: true
+    },
+    // 绑定的model
+    model: {
+        type: Object as PropType<Recordable>,
+        default: {}
+    },
+    labelWidth: {
+        type: Number, String,
+        default: 100
+    },
+    // 表单配置规则
+    schemas: {
+        type: [Array] as PropType<FormSchema[]>,
+        default: () => [],
+    },
+    // 是否使用紧凑布局
+    compact: {
+        type: Boolean,
+        default: null
+    },
+    // 表单尺寸
+    size: {
+        type: String as PropType<'default' | 'small' | 'large'>
+    },
+    formActions: {
+        type: Object as PropType<FormActionType>
+    },
+    labelAlign: {
+        type: String as PropType<'left' | 'right'>
+    },
+    rowProps: Object as PropType<RowProps>,
+    colProps: Object as PropType<ColEx>
+}
+
+export const FormItemProps = {
+    // 配置参数
+    schema: {
+        type: Object as PropType<FormSchema>
+    },
+    // 表单属性
+    formProps: {
+        type: Object as PropType<FormProps>,
+        default: () => ({})
+    },
+    // 默认值
+    defaultValues: {
+        type: Object as PropType<Recordable>,
+        default: () => ({})
+    },
+    // 绑定的model
+    formModel: {
+        type: Object as PropType<Recordable>,
+        default: () => ({})
+    },
+    // 设置formModel
+    setFormModel: {
+        type: Function as PropType<(key: string, value: any) => void>
+    },
+    formActionType: {
+        type: Object as PropType<FormActionType>
+    },
+    style: {
+        type: Object as PropType<Recordable>
+    }
+}