@dt-frames/ui 1.0.2 → 1.0.5

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

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

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

package/{es/style/components/icons/src → src/components/icons}/index.less

@@ -9,6 +9,7 @@
 .dt-icon{
     display: inline-block;
     text-align: center;
+    vertical-align: middle;
     & > svg{
         vertical-align: middle;
     }

package/src/components/icons/index.ts

@@ -0,0 +1,7 @@
+import DtIcon from './src/svg-icon.vue'
+import DtPickIcon from './src/pick-icon.vue'
+
+export { 
+    DtIcon,
+    DtPickIcon
+}