@dt-frames/ui 1.0.2 → 1.0.3

package/src/components/forms/src/componentMap.ts

@@ -0,0 +1,44 @@
+// 根据组件类型 定义一个组件map 方便使用
+import { Component } from "vue"
+import { Input, Select, Radio, Checkbox, AutoComplete, Cascader, DatePicker, InputNumber, Switch, TimePicker, TreeSelect, Slider, Rate, Divider } from 'ant-design-vue'
+import RadioButtonGroup from './components/radioButton.vue'
+import FormIcon from './components/formIcon.vue'
+import { ComponentType } from "./types/form.type"
+
+const components = {
+    Input,
+    InputTextArea: Input.TextArea,
+    InputSearch: Input.Search,
+    InputGroup: Input.Group,
+    InputPassword: Input.Password,
+    Select,
+    TreeSelect,
+    Radio,
+    RadioGroup: Radio.Group,
+    RadioButtonGroup,
+    Checkbox,
+    CheckboxGroup: Checkbox.Group,
+    AutoComplete,
+    Cascader,
+    DatePicker,
+    MonthPicker: DatePicker.MonthPicker,
+    WeekPicker: DatePicker.WeekPicker,
+    RangePicker: DatePicker.RangePicker,
+    InputNumber,
+    Switch,
+    TimePicker,
+    Slider,
+    Rate,
+    Divider,
+    Icon: FormIcon
+}
+
+const componentMap = new Map<ComponentType, Component>()
+
+for( let item in components ) {
+    componentMap.set( item as ComponentType, components[item] )
+}
+
+export {
+    componentMap
+}

package/src/components/forms/src/components/formButton.vue

@@ -0,0 +1,150 @@
+<template>
+    <Col v-bind="colOpt" v-if="show">
+        <FormItem class="form-btns" :style="{
+            'margin-bottom': mode === 'search' ? '24px' : '0px' 
+        }">
+            <template v-for="button in buttonList">
+                <Button 
+                    v-if="button.show === undefined ? true : button.show"
+                    :type="button.type"
+                    :class="button.class"
+                    :disabled="button.disabled"
+                    :permission="button.auth"
+                    :loading="button.loading"
+                    @click="handleBtnClick(button)"
+                >
+                    <template #icon>
+                        <span v-if="button.preIcon" v-icon="button.preIcon" className="preIcon"></span>
+                    </template>
+
+                    {{ button.name }}
+                    <span v-if="button.postIcon" v-icon="button.postIcon" className="preIcon"></span>
+                </Button>
+            </template>
+            
+            <Button
+                type="link"
+                class="advanced"
+                v-if="showAdvanceRef"
+                @click="toggleAdvanced">
+                <span class="text">{{ advancedRef ? '收起' : '展开' }}</span>
+                <span :class="getAdvanceClass">
+                    <DtIcon :icon-class="'ic:baseline-arrow-drop-down'" :size="22"></DtIcon>
+                </span>
+            </Button>
+            
+        </FormItem>
+    </Col>
+</template>
+
+<script lang="ts">
+    import { computed, defineComponent, PropType, ref, watch, nextTick } from 'vue'
+    import { ButtonProps } from '../types/form.type'
+    import { Col, FormItem, Button } from 'ant-design-vue'
+    import { authMounted } from '../../../../directives'
+    import { DtIcon } from '../../../icons'
+    import { isFunction, Recordable } from '@dt-frames/core'
+
+
+    export default defineComponent({
+        name: 'form-buttons',
+        props: {
+            mode: {
+                type: String as PropType<'search' | 'dialog' | null>,
+                default: 'search'
+            },
+            show: {
+                type: Boolean,
+                default: true
+            },
+            showAdvancedButton: {
+                type: Boolean,
+                default: true
+            },
+            minShowColumn: {
+                type: Number,
+                default: 2
+            },
+            buttonList: {
+                type: [Array] as PropType<ButtonProps[]>,
+                default: []
+            },
+            isAdvanced: {
+                type: Boolean,
+                default: true
+            }
+        },
+        components: {
+            Col,
+            FormItem,
+            Button,
+            DtIcon
+        },
+        directives: {
+            'permission': authMounted
+        },
+        setup(props, { emit }) {
+            const advancedRef = ref<Boolean>(props.isAdvanced)
+
+            // 是否显示折叠按钮
+            const showAdvanceRef = computed(() => {
+                return props.mode === 'search' ? props.showAdvancedButton : false
+            })
+
+            // 计算options属性
+            const colOpt = computed(() => {
+                let style: Recordable = {
+                    textAlign: 'right'
+                }
+
+                if( props.mode === 'dialog' ) {
+                    Object.assign(style, {
+                        display: 'inline-block',
+                    })
+                }
+
+                return { style }
+            })
+
+            // 计算更多图标的css样式
+            const getAdvanceClass = computed(() => {
+                return [
+                    'basic-arrow',
+                    { 'basic-arrow--active': !advancedRef.value }
+                ]
+            })
+
+            const toggleAdvanced = () => {
+                advancedRef.value = !advancedRef.value
+
+                emit('handle-method', advancedRef.value)
+            }
+
+            watch(() => props.isAdvanced, (v) => {
+                if( v ) {
+                    nextTick(() => toggleAdvanced())
+                }
+            }, {
+                immediate: true
+            })
+
+            // 处理按钮点击事件
+            function handleBtnClick(button: ButtonProps) {
+                if( button.onClick && isFunction(button.onClick) ) {
+                    button.onClick()
+                }else {
+                    emit('handle-method', button)
+                }
+            }
+
+            return {
+                colOpt,
+                advancedRef,
+                showAdvanceRef,
+                getAdvanceClass,
+                toggleAdvanced,
+                handleBtnClick
+            }
+        }
+    })
+</script>

package/src/components/forms/src/components/formIcon.vue

@@ -0,0 +1,50 @@
+<template>
+    <div>
+        <InputGroup compact>
+            <Input ref="iconRef" v-model:value="state" :placeholder="props.placeholder" style="width: calc(100% - 32px)" />
+            <Button @click="openModal()" :style="{
+                padding: '0',
+                textAlign: 'center'
+            }">
+                <template #icon>
+                    <span class="i" :class="state || 'ic:baseline-dialpad'"></span>
+                </template>
+            </Button>
+        </InputGroup>
+
+        <DtModal @register="register">
+            <DtPickIcon @chooseIcon="chooseIcon($event)"/>
+        </DtModal>
+    </div>
+    
+</template>
+
+<script lang="ts" setup>
+    import { ref } from 'vue'
+    import { InputGroup, Input, Button } from 'ant-design-vue'
+    import { DtPickIcon } from '../../../icons'
+    import { DtModal, useModal } from '../../../modal'
+    import { useFormValue } from '../hooks/useFormValue'
+
+    const iconRef = ref(null)
+    const [register, { openModal, closeModal }] = useModal({
+        title: '选择字体图标',
+        width: '70%',
+        showSave: false,
+        centered: true
+    })
+
+    const props = defineProps({
+        value: String,
+        placeholder: String
+    })
+
+    let [state, setState] = useFormValue(props)
+
+    function chooseIcon(icon) {
+        setState(icon)
+
+        closeModal()
+    }
+
+</script>

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>