@dt-frames/ui 1.0.2 → 1.0.3

package/src/components/forms/src/components/radioButton.vue

@@ -0,0 +1,58 @@
+
+
+<template>
+    <RadioGroup v-bind="attrs" v-model:value="state" button-style="solid">
+        <template v-for="item in getOptions" :key="`${item.value}`">
+            <RadioButton :value="item.value" :disabled="item.disabled">
+                {{ item.label }}
+            </RadioButton>
+        </template>
+    </RadioGroup>
+</template>
+
+<script lang="ts">
+    import { computed, defineComponent, PropType } from "vue"
+    import { RadioGroup, RadioButton } from 'ant-design-vue'
+    import { isString } from "@dt-frames/core"
+    import { useFormValue } from "../hooks/useFormValue";
+
+    type OptionsItem = { label: string; value: string | number | boolean; disabled?: boolean }
+    type RadioItem = string | OptionsItem
+
+    export default defineComponent({
+        name: 'radio-button',
+        props: {
+            value: {
+                type: [String, Number, Boolean] as PropType<string | number | boolean>,
+            },
+            options: {
+                type: Array as PropType<RadioItem[]>,
+                default: () => [],
+            },
+        },
+        components: {
+            RadioGroup, 
+            RadioButton
+        },
+        setup(props, { attrs }) {
+            const [state] = useFormValue(props)
+
+            const getOptions = computed((): OptionsItem[] => {
+                const { options } = props;
+                if (!options || options?.length === 0) return [];
+
+                const isStringArr = options.some((item) => isString(item));
+                if (!isStringArr) return options as OptionsItem[];
+
+                return options.map((item) => ({ label: item, value: item })) as OptionsItem[];
+            });
+
+
+            return {
+                attrs,
+                getOptions,
+                state
+            }
+        }
+    })
+</script>

package/src/components/forms/src/const/form.const.ts

@@ -0,0 +1,7 @@
+export const SEARCH_BTN_NAME = '查询'
+export const RESET_BTN_NAME = '重置'
+
+export const SEARCH_BTNS = [
+    { name: SEARCH_BTN_NAME, preIcon: 'mdi:magnify', type: 'primary' },
+    { name: RESET_BTN_NAME, preIcon: 'mdi:refresh', type: 'default' }
+]

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

@@ -0,0 +1,70 @@
+import { ComponentType } from "../types/form.type";
+import type { ValidationRule } from 'ant-design-vue/lib/form/Form'
+import { isNumber } from "@dt-frames/core";
+
+/**
+ * 生成占位符 
+ * 根据组件名称不同 生成不同的占位符
+ */ 
+export function createPlaceholder(component: ComponentType) {
+    if( component.includes('Input') || component.includes('Complete') ) {
+        return '请输入'
+    }
+
+    if(
+        component.includes('Picker') ||
+        component.includes('Select') ||
+        component.includes('Cascader') ||
+        component.includes('Checkbox') ||
+        component.includes('Radio') ||
+        component.includes('Switch')
+    ) {
+        return '请选择'
+    }
+
+    if(component.includes('Icon')) {
+        return '请设置图标'
+    }
+
+    return ''
+}
+
+
+// 定义表单的type
+export function setComponentRuleType(
+    rule: ValidationRule, 
+    component: ComponentType, 
+    valueFormat: string
+) {
+    if (['DatePicker', 'MonthPicker', 'WeekPicker', 'TimePicker'].includes(component)) {
+        
+        rule.type = valueFormat ? 'string' : 'object';
+
+    } else if (['RangePicker', 'Upload', 'CheckboxGroup', 'TimePicker'].includes(component)) {
+        
+        rule.type = 'array';
+
+      } else if (['InputNumber'].includes(component)) {
+        
+        rule.type = 'number';
+
+      }
+}
+
+// 获取Input的值
+export function handleInputNumberValue(component?: ComponentType, val?: any) {
+    if (!component) return val;
+    if ([
+        'Input', 
+        'InputPassword', 
+        'InputSearch', 
+        'InputTextArea'
+    ].includes(component)) {
+      return val && isNumber(val) ? `${val}` : val;
+    }
+    return val;
+}
+
+
+// 时间类型
+export const datePickerType: string[] = ['DatePicker', 'MonthPicker', 'WeekPicker', 'TimePicker', 'RangePicker']

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

@@ -0,0 +1,130 @@
+/** =========================================================
+ *  对form表单进行一次封装，方便后期调用
+ *  ==========================================================*/ 
+
+import { Recordable } from "@dt-frames/core";
+import { ref, unref, onUnmounted, watch, nextTick } from "vue";
+import { FormActionType, FormProps, FormSchema } from "../types/form.type";
+
+type RegisterFn = (formInstance: FormActionType) => void;
+type UseFormReturnType = [RegisterFn, FormActionType]
+
+export function useForm(props: FormProps): UseFormReturnType {
+    const formRef = ref( null )
+    const loadedRef = ref( false )
+
+    function registerForm(instance: FormActionType) {
+
+        // 卸载之后，表单数据清空
+        onUnmounted(() => {
+            formRef.value = null
+            loadedRef.value = false
+        })
+
+        // 如果表单实例已经存在，停止注册表单
+        if( unref(loadedRef) && instance === unref(formRef) ) return
+        formRef.value = instance
+        loadedRef.value = true
+
+        /**
+         * 深度监听props的变化,首次监听
+         * 动态更改表单实例
+        */
+        watch(
+            () => props,
+            () => props && instance.setProps(props),
+            {
+                immediate: true,
+                deep: true
+            }
+        )
+    }
+
+
+    /**
+     * 定义表单的操作方法
+     */
+    async function getForm() {
+        const form = unref( formRef )
+
+        if( !form ) console.error('表单未申明!');
+        
+        await nextTick()
+
+        return form
+    }
+
+    const methods: FormActionType = {
+        // 设置属性值
+        setProps: async (props: FormProps) => {
+            const form = await getForm()
+            form.setProps(props)
+        },
+
+        // 批量更新
+        updateSchema: async (data: Partial<FormSchema> | Partial<FormSchema>[]) => {
+            const form = await getForm()
+            form.updateSchema( data )
+        },
+
+        // 重置
+        resetSchema: async ( data: Partial<FormSchema> | Partial<FormSchema>[] ) => {
+            const form = await getForm()
+            form.resetSchema(data)
+        },
+
+        // 清除验证规则
+        clearValidate: async (name?: string | string[]) => {
+            const form = await getForm()
+            form.clearValidate(name)
+        },
+
+        // 表单重置
+        resetForms: async () => {
+            const form = await getForm()
+            form.resetForms()
+        },
+
+        // 根据属性名删除表单
+        removeFormByName: async (name?: string | string[]) => {
+            unref(formRef)?.removeFormByName( name )
+        },
+
+        // 设置表单的值
+        setFormValues: async ( values: Recordable ) => {
+            const form = await getForm()
+            form.setFormValues(values)
+        },
+
+        // 动态添加一个表单
+        appendFormItems: async (
+            schema: FormSchema,
+            prefixName: string | undefined,
+            first: boolean
+        ) => {
+            const form = await getForm()
+            form.appendFormItems( schema, prefixName, first )
+        },
+
+        // 检验有效的属性值
+        validate: async ( nameList: (string | number)[] ) => {
+            const form = await getForm()
+            return form.validate(nameList)
+        },
+
+        // 返回有效的区域
+        validateFields: async (nameList: (string | number)[]) => {
+            const form = await getForm()
+            return form.validateFields(nameList)
+        },
+
+        // 获取属性值
+        getFormValues: () => {
+            return unref(formRef)?.getFormValues()
+        }
+
+    }
+
+
+    return [ registerForm, methods ]
+}

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