@dt-frames/ui 1.0.11 → 1.0.15

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

@@ -1,310 +0,0 @@
-<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 ?? [])
-            )
-
-            watch(
-                () => unref(getProps).onSearch,
-                () => {
-                    useTimeoutFn(() => {
-                        // 如果有onSearch默认查询
-                        const { onSearch, autoFetch } = unref(getProps)
-
-                        if( autoFetch && onSearch && isFunction(onSearch) ) {
-                            onSearch(toRaw(defaultValue.value))
-                        }  
-                    }, 1)
-                }
-            )
-
-            onMounted(() => {
-                // 每次加载 进行重置
-                setFormValues( null )
-                emit('register', formActionMethods)
-                initDefault()
-            })
-
-            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

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

package/src/components/forms/src/types/form.type.ts

@@ -1,269 +0,0 @@
-import { Recordable } from "@dt-frames/core"
-import { VNode } from "vue"
-import { RuleObject } from 'ant-design-vue/lib/form/interface'
-import type { RowProps } from 'ant-design-vue/lib/grid/Row'
-
-export type Rule = RuleObject & {
-    trigger?: 'blur' | 'change' | ['change', 'blur'];
-};
-
-export type ButtonFlag = 'OK' | 'CANCEL'
-
-export type FormCallBackParams = {
-    schema: Omit<FormSchema, 'props'> 
-    values: Recordable
-    model: Recordable
-    name: string
-}
-
-// 组件的类型
-export type ComponentType = 
-    | 'Input'
-    | 'InputGroup'
-    | 'InputPassword'
-    | 'InputSearch'
-    | 'InputTextArea'
-    | 'InputNumber'
-    | 'InputCountDown'
-    | 'Select'
-    | 'TreeSelect'
-    | 'ApiTree'
-    | 'ApiTreeSelect'
-    | 'Radio'
-    | 'RadioButtonGroup'
-    | 'RadioGroup'
-    | 'Checkbox'
-    | 'CheckboxGroup'
-    | 'AutoComplete'
-    | 'Cascader'
-    | 'DatePicker'
-    | 'MonthPicker'
-    | 'RangePicker'
-    | 'WeekPicker'
-    | 'TimePicker'
-    | 'Switch'
-    | 'Upload'
-    | 'IconPicker'
-    | 'Render'
-    | 'Slider'
-    | 'Rate'
-    | 'Divider'
-    | 'Icon'
-
-// 对表单元素进行拓展
-export type ColEx = {
-    // 样式
-    style?: any
-    // 占用空间大小
-    span?: number | string
-    // 排序
-    order?: number | string
-    // 偏移量
-    offset?: number | string
-    // 中等屏幕
-    md?: number | string
-    // 小电脑屏幕
-    xl?: number | string
-    // 大屏幕
-    xxl?: number | string
-}
-
-export type ToolTipProps = {
-    color: string;
-    placement: 'top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom'
-}
-
-// 按钮属性
-export type ButtonProps = {
-    // 按钮名称
-    name?: string
-    // 按钮风格
-    color?: 'error' | 'warning' | 'success' | ''
-    // 按钮类型
-    type?: 'primary' | 'ghost' | 'dashed' | 'link' | 'text' | 'default' | undefined
-    // 按钮class
-    class?: string
-    // 是否禁用
-    disabled?: boolean
-    // 是否显示
-    show?: boolean
-    // 按钮前面图标
-    preIcon?: string
-    // 按钮后面图标
-    postIcon?: string
-    // 按钮权限
-    auth?: string
-    // 按钮标识
-    flag?: ButtonFlag
-    // 是否处于加载中
-    loading?: boolean
-    // 按钮点击事件
-    onClick?: (...args) => any
-}
- 
-// 整个表单配置项
-export type FormProps = {
-    mode?: 'search' | 'dialog',
-    // 是否默认查询
-    autoFetch?: boolean
-    // 对齐方式
-    layout?: 'vertical' | 'inline' | 'horizontal'
-    // 绑定的model
-    model?: Recordable
-    // 定义标签的宽度
-    labelWidth?: number | string
-    // 对齐方式
-    labelAlign?: 'left' | 'right'
-    // 标签设置
-    labelCol?: Partial<ColEx>
-    // 包裹设置
-    wrapperCol?: Partial<ColEx>
-    // 行样式
-    rowProps?: RowProps
-    // col相关的配置
-    colProps?: Partial<ColEx>
-    // 表单数据配置
-    schemas?: FormSchema[]
-    // 尺寸
-    size?: 'default' | 'small' | 'large'
-    // 是否禁用
-    disabled?: boolean
-    // 回车键搜索
-    autoSubmitOnEnter?: boolean
-    // 是否一直显示所有条目
-    alwaysShowLines?: number
-    // 是否使用紧凑布局
-    compact?: boolean
-
-    // 提交 只有当mode为查询时候有
-    onSearch?: Function
-    onReset?: Function
-    // 最小显示的条目
-    minShowColumn?: number
-    // 是否显示折叠按钮
-    showAdvancedButton?: boolean
-    enterToSearch?: boolean
-
-    // form 按钮
-    buttons?: ButtonProps[]
-    // 加载状态
-    loading?: Recordable,
-    // css样式
-    style?: Recordable
-}
-
-// 表单当个元素配置项
-export type FormSchema = {
-    // 表单绑定的属性，亦作为name属性，用于后期自动化测试
-    name?: string | string[]
-    // 值发生变化触发的函数名
-    changeEvent?: string
-    // 绑定v-model的值
-    valueField?: string
-    // 标签名
-    label?: string | VNode
-    // 标签描述 如 这是标签(subLable): ***
-    subLabel?: string
-    // 标签宽度
-    labelWidth?: string | number
-    // 标签对齐方式
-    labelAlign?: 'left' | 'right'
-
-    // 帮助信息
-    toolTip?:
-        | string
-        | (( parms: FormCallBackParams ) => string | string[])
-    // tooltip 配置信息
-    toolTipProps?: ToolTipProps
-    // 表单控件类型
-    component?: ComponentType
-    // 表单控件参数
-    props?: 
-        | ((opt: {
-            schema?: FormSchema
-            // tableAction: TableActionType
-            formActions?: any
-            formActionType?: FormActionType
-            formModel?: Recordable
-        }) => Recordable)
-        | object
-    required?: boolean | ( ( parms: FormCallBackParams ) => boolean )
-    // // 输入框的后缀
-    suffix?: string | number | ( ( parms: FormCallBackParams ) => boolean )
-    // 验证规则
-    rules?: Rule[]
-    // 提示信息是否带上lable
-    rulesMessageJoinLabel?: boolean
-
-    // 默认值
-    defaultValue?: any;
-
-    // 占用多少格子
-    span?: number
-
-    // 是否显示
-    show?: boolean | ( ( parms: FormCallBackParams ) => boolean )
-
-    // 渲染item
-    render?: (parms?: FormCallBackParams) => VNode | VNode[] | string
-
-    // 渲染col
-    renderCol?: (parms: FormCallBackParams) => VNode | VNode[] | string
-
-    // col相关的配置
-    colProps?: Partial<ColEx>
-
-    // 表单的前后缀、禁用启用, 日期格式
-    renderComponent?: 
-        | ((parms: FormCallBackParams) => Recordable)
-        | VNode
-        | VNode[]
-        | string
-
-    slot?: string
-    colSlot?: string
-
-    dynamicDisabled?: boolean | ((parms: FormCallBackParams) => boolean)
-    dynamicRules?: (parms: FormCallBackParams) => Rule[]
-
-    // lable后面是否有冒号
-    colon?: boolean
-    
-    // 标签宽度
-    labelCol?: Partial<ColEx>  
-    // 内容宽度
-    wrapperCol?: Partial<ColEx>
-
-    // 是否处于收缩状态 仅在 search 模式下使用
-    isAdvanced?: boolean
-}
-
-
-// 表单操作类型
-export type FormActionType = {
-    setProps: ( props: FormProps ) => Promise<void>
-    updateSchema: (data: Partial<FormSchema> | Partial<FormSchema>[]) => Promise<void>,
-    resetSchema: (data: Partial<FormSchema> | Partial<FormSchema>[]) => Promise<void>,
-    clearValidate: (name?: string | string[]) => Promise<void>
-    resetForms: (data: Partial<FormSchema> | Partial<FormSchema>[]) => void,
-    removeFormByName: (name: string | string[]) => void,
-    setFormValues: (values: Recordable) => Promise<void>,
-    appendFormItems: (
-        schema: FormSchema,
-        prefixField: string | undefined,
-        first?: boolean | undefined,
-    ) => void,
-    validate: (nameList?: (string | number)[]) => Promise<any>,
-    validateFields: (nameList?: (string | number)[]) => Promise<any>,
-    getFormValues: () => Recordable,
-
-}
-
-// 按钮收缩相关的操作
-export type AdvanceState = {
-    isAdvanced: boolean
-    hideAdvanceBtn: boolean
-    isLoad: boolean
-    actionSpan: number
-  }
-