@dt-frames/ui 1.0.11 → 1.0.15

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

@@ -1,420 +0,0 @@
-<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, error } 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, component, render } = props.schema as FormSchema
-                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)
-
-                if( !component ) {
-                    if( !render ) {
-                        error('请配置render函数')
-                        return 
-                    }
-
-                    return ( 
-                        <Col span={24}>
-                            { render() }
-                        </Col>
-                    )
-                }
-
-                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

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

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

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

@@ -1,130 +0,0 @@
-/** =========================================================
- *  对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 ]
-}