@dt-frames/ui 1.0.2 → 1.0.5

package/src/components/forms/src/components/formItem.vue

@@ -0,0 +1,407 @@
+<script lang="tsx">
+    import { defineComponent, PropType, Ref, toRefs, unref, computed } from "vue"
+    import { Col, Tooltip, Divider, Form, FormItem } from 'ant-design-vue'
+    import { upperFirst, cloneDeep } from 'lodash-es'
+    import { isFunction, isBoolean, isNull, Recordable, useSlots, useAppStore, isString, isArray } from "@dt-frames/core"
+    import type { ValidationRule } from 'ant-design-vue/lib/form/Form'
+
+    import { useLabelWidth } from "../hooks/useLabelWidth"
+    import { componentMap } from '../componentMap'
+    import { createPlaceholder, setComponentRuleType } from '../hooks/helper'
+    import { FormSchema, FormProps, FormCallBackParams, FormActionType } from '../types/form.type'
+    import { FormItemProps } from "../prop"
+
+
+    export default defineComponent({
+        name: 'FormItem',
+        inheritAttrs: false,
+        props: FormItemProps,
+        setup( props, { emit, slots } ) {
+            // 获取指定的slot
+            const { getSlot } = useSlots()
+            // 获取全局配置
+            const { appConf } = useAppStore()
+
+            const { schema, formProps } = toRefs(props) as {
+                schema: Ref<FormSchema>
+                formProps: Ref<FormProps>
+            }
+
+            // 计算每个条目的props
+            const getValues = computed(() => {
+                const { defaultValues, formModel, schema } = props;
+
+                return {
+                    name: schema.name,
+                    model: formModel,
+                    values: {
+                        ...defaultValues,
+                        ...formModel
+                    },
+                    schema: schema
+                } as FormCallBackParams
+            })
+
+            // 是否显示当前条目
+            const getShow = computed(() => {
+                const { show = true, isAdvanced = true } = props.schema
+
+                // 是否处于收缩状态
+                if( !isAdvanced ) {
+                    return false
+                }
+
+                if( isFunction(show) ) {
+                    return show(unref(getValues))
+                }
+
+                return show
+            })
+
+            // 设置表单绑定的特殊属性，如前后缀、禁用启用、日期格式等
+            const getComponentProps = computed(() => {
+                const { schema, formModel, formActionType } = props
+                let { props: cProps = {} } = schema
+
+                if (isFunction(cProps)) {
+                    cProps = cProps( { schema, formModel, formActionType } ) ?? {}
+                }
+
+                if (schema.component === 'Divider') {
+                    cProps = Object.assign({ type: 'horizontal' }, cProps, {
+                        orientation: 'left',
+                        plain: true,
+                    });
+                }
+
+                return cProps as Recordable
+            })
+
+
+            /**
+             * 动态渲染单个条目
+             * 支持的类型参照 ../types/form.type.ts 中 ComponentType
+             */
+            function renderItem() {
+                const { component, props: cProps, slot, render, name, colon = appConf.ui.form.colon, suffix } = props.schema
+
+                // 计算label的属性
+                const { labelCol, wrapperCol } = unref( useLabelWidth( schema, formProps ) )
+
+                if( component === 'Divider' ) {
+                    return (
+                        <Col span={24}>
+                            <Divider {...unref(cProps)}>{ renderLabel() }</Divider>
+                        </Col>
+                    )
+                } else {
+                    const getContent = () => {
+                        let value = unref(getValues)
+
+                        let _con = slot 
+                            ? getSlot(slots, slot, value)
+                            : render
+                            ? render(value)
+                            : renderFormItem()
+
+                        return (component === 'InputGroup' || component === 'Icon')
+                            ? (
+                                <FormItem rules = { handleRules() } class="M0">{ _con }</FormItem>
+                            )
+                            : _con
+                    }
+                    
+                    const getSuffix = () => {
+                        return isFunction( suffix ) ? suffix(unref(getValues)) : suffix 
+                    }
+
+                    return (
+                        <Form.Item
+                            name = { name }
+                            colon = { colon }
+                            class = {{ 'suffix-item': !!suffix }}
+                            label = { renderLabel() }
+                            rules = { handleRules() }
+                            labelCol = { labelCol }
+                            wrapperCol = { wrapperCol }
+                        >
+                            <div style="display:flex">
+                                <div style="flex:1;">{ getContent() }</div>
+                                {!!suffix && <span class="suffix">{getSuffix()}</span>}
+                            </div>
+                        </Form.Item>
+                    )
+                }
+            }
+
+
+            /**
+             * 渲染Label标签元素
+            */
+            function renderLabel() {
+                const { label, toolTip, subLabel, toolTipProps } = props.schema
+
+                const renderLabel 
+                    = subLabel 
+                    ? ( <span> {label} <span class="text-secondary">({subLabel})</span></span> )
+                    : ( label )
+
+                // 判断是否需要显示tooltips
+                const _toolTip = isFunction(toolTip) ? toolTip( unref(getValues) ) : toolTip
+
+                return _toolTip 
+                    ? (
+                        <span>
+                            { renderLabel }
+                            <Tooltip v-bind={ toolTipProps }>{ _toolTip }</Tooltip>
+                        </span>
+                    )
+                    : renderLabel
+            }
+
+            /**
+             * 渲染表单元素
+            */
+            function renderFormItem() {
+                const { schema, formModel, formActionType } = props
+                const { component, name, changeEvent = 'change', valueField, renderComponent, props: sProps  } = props.schema
+
+                const isCheck = component && ['Switch', 'Checkbox'].includes(component)
+
+                /**
+                 * 监听表单事件，默认是change
+                 */
+                const eventKey = `on${upperFirst(changeEvent)}`
+                // 绑定事件
+                const _sProps = isFunction( sProps ) 
+                    ? sProps({ schema, formModel, formActionType }) 
+                    : sProps
+
+                // 绑定onChange事件
+                const on: { 
+                    [key: string]: ( ...args: Array<any> ) => void 
+                } = {
+                    [ eventKey ]: ( ...args: Array<any> ) => {
+                        const [e] = args
+
+                        const target = e ? e.target : null
+                        const value = target ? (isCheck ? target.checked : target.value) : e
+
+                        if( isString( name ) ) {
+                            props.setFormModel(name, value)
+                        } else if( isArray( name ) ) {
+                            name.forEach( key => {
+                                props.setFormModel(key, value)
+                            } )
+                        }
+
+                        if( _sProps && _sProps[eventKey] ) _sProps[eventKey](...args, props)
+                    }
+                }
+                
+                // 监听其它事件
+                for(let it in _sProps) {
+                    if( it.startsWith('on') && it !== eventKey ) {
+                        on[it] = ( ...args: Array<any> ) => {
+                            _sProps[it]( ...args, props )
+                        }
+                    }
+                }
+
+                /**
+                 * 设置表单绑定的属性
+                 */
+                const { size } = props.formProps as FormProps
+
+                // 设置表单禁用启用
+                const getDisable = computed(() => {
+                    const { disabled: gDisabled } = props.formProps as FormProps
+                    const { dynamicDisabled } = props.schema
+                    const { disabled: itemDisabled = false } = unref( getComponentProps )
+
+                    let disabled = !!gDisabled || itemDisabled
+
+                    if (isBoolean(dynamicDisabled)) disabled = dynamicDisabled
+                    if (isFunction(dynamicDisabled)) disabled = dynamicDisabled(unref(getValues))
+
+                    return disabled
+                })
+                
+                const { enterToSearch = appConf.ui.form.enterToSearch, onSearch, mode } = props.formProps as FormProps
+
+                const itemProps: Recordable = {
+                    allowClear: appConf.ui.form.allowClear,
+                    getPopupContainer: (trigger: Element) => trigger.parentNode,
+                    size: size || appConf.ui.form.size,
+                    ...unref(getComponentProps),
+                    disabled: unref(getDisable),
+                    onPressEnter: (mode === 'search' &&  enterToSearch) ? onSearch : () => { }
+                }
+
+                // 设置表单占位符,注意：RangePicker是一个数组
+                if( !itemProps.disabled && component !== 'RangePicker' ) {
+                    itemProps.placeholder = unref(getComponentProps)?.placeholder || createPlaceholder( component )
+                }
+
+                // 处理默认值
+                if( ['DatePicker', 'MonthPicker', 'RangePicker'].includes(component) ) { 
+                    itemProps.defaultValue = props.formModel[ name as string ]
+                }
+
+                itemProps.codeName = name
+                itemProps.formValues = unref(getValues)
+
+                /**
+                 * 定义表单绑定的值v-bind:value
+                */
+                const bindValue: Recordable = {
+                    [valueField || (isCheck ? 'checked' : 'value')]: props.formModel[ name as string ]
+                }
+                
+                /**
+                 * 所有属性汇总，包括方法、属性及值的绑定
+                */
+                const compAttr: Recordable = {
+                    ...itemProps,
+                    ...bindValue,
+                    ...on
+                }
+
+                // 设置返回的DOM元素
+                const Comp = componentMap.get(component) as ReturnType<typeof defineComponent>
+
+                if( !renderComponent ) {
+                    return <Comp {...compAttr} />
+                }
+
+                // 定义一个组件插槽，用于处理后缀、前缀等问题,返回的是{ default: () => {} )这种数据格式
+                const compSlot = isFunction( renderComponent ) 
+                    ? { ...renderComponent( unref( getValues ) ) }
+                    : {
+                        default: () => renderComponent
+                    }
+
+                return <Comp {...compAttr}>{compSlot}</Comp>
+            }
+
+            /**
+             * 处理验证规则
+             */ 
+            function handleRules(): ValidationRule[] {
+                const { rules: defaultRules = [], component, label, dynamicRules, required } = props.schema
+
+                // 1、如果为动态规则，则直接返回rules
+                if( isFunction( dynamicRules ) ) {
+                    return dynamicRules( unref(getValues) ) as ValidationRule[]
+                }
+
+
+                // 2、如果没有静态规则，并且require为true
+                // 默认提示信息
+                const defaultMsg = createPlaceholder(component) + label
+
+                let rules = cloneDeep(defaultRules) as ValidationRule[]
+                // 是否必填
+                const getRequired = isFunction(required) ? required(unref(getValues)) : required
+
+                // 非空校验
+                function validator(rule: any, value: any) {
+                    const msg = rule.message || defaultMsg
+
+                    if( 
+                        // 空值
+                        (value === undefined || isNull(value)) ||
+                        // 数组
+                        (Array.isArray(value) && value.length === 0) ||
+                        // 空字符串
+                        (typeof value === 'string' && value.trim() === '') ||
+                        // 树组件未选择
+                        (
+                            typeof value === 'object' && 
+                            Reflect.has(value, 'checked') &&
+                            Reflect.has(value, 'halfChecked') &&
+                            Array.isArray(value.checked) &&
+                            Array.isArray(value.halfChecked) &&
+                            value.checked.length === 0 &&
+                            value.halfChecked.length === 0
+                        )
+                    ) {
+                        return Promise.reject(msg)
+                    }
+
+                    return Promise.resolve()
+                }
+
+                if( (!rules || !rules.length) && getRequired ) {
+                    rules = [{ required: getRequired, validator }]
+                }
+
+                // 3、如果有自定义的规则，则使用自定义的规则
+                const requiredIndex = rules.findIndex( rule => Reflect.has(rule, 'required') && !Reflect.has(rule, 'validator') )
+
+                if( requiredIndex !== -1 ) {
+                    const rule = rules[requiredIndex]
+
+                    if( !unref(getShow) ) {
+                        rule.required = false
+                    }
+
+                    if (!Reflect.has(rule, 'type')) {
+                        rule.type = component === 'InputNumber' ? 'number' : 'string';
+                    }
+
+                    rule.message = rule.message || defaultMsg
+
+                    if (component.includes('Input') || component.includes('Textarea')) {
+                        rule.whitespace = true
+                    }
+                    const valueFormat = unref(getComponentProps)?.valueFormat;
+
+                    setComponentRuleType(rule, component, valueFormat)
+                }
+                
+                const maxIndex = rules.findIndex((val) => val.max)
+
+                if (maxIndex !== -1 && !rules[maxIndex].validator) {
+                    rules[maxIndex].message = rules[maxIndex].message || `最大值为${ rules[maxIndex].max }`
+                }
+
+                return rules
+            }
+     
+
+            /**
+             *  返回整个Col元素
+             *      1、如果有slot  则渲染slot元素
+             *      2、如果有renderCol自定义dom元素，则使用renderCol
+             *      3、否则通过属性去动态设置渲染条目
+             */
+            return () => {
+                const { colSlot, renderCol, colProps } = props.schema
+                const { colProps: gColProps, mode } = props.formProps as FormProps
+
+                let _colProps = colProps 
+                    ? colProps
+                    : gColProps
+                    ? gColProps
+                    : (mode === 'search' ? appConf.ui.form.searchColspan : appConf.ui.form.dialogColspan)
+
+                const values = unref(getValues)
+
+                const getContent = () => {
+                    return colSlot
+                        ? getSlot(slots, colSlot, values)
+                        : renderCol
+                        ? renderCol( values )
+                        : renderItem()
+                }
+
+                return unref(getShow) && (
+                    <Col { ..._colProps }>
+                        { getContent() }
+                    </Col>
+                )
+            }
+        }
+    })
+</script>

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