@dt-frames/ui 1.0.12 → 1.0.16

package/src/components/table/src/components/TableRender.vue

@@ -1,76 +0,0 @@
-<script lang="tsx">
-    import { getDictValueByCode, isFunction, isObject, Recordable, formatNumber, isVnode } from '@dt-frames/core'
-    import dayjs from 'dayjs'
-    import { defineComponent, PropType, unref, ref, render as render1, createVNode, computed } from 'vue'
-    import { BasicColumn } from '../types/table.type'
-
-    export default defineComponent({
-        name: 'TableFormat',
-        props: {
-            column: {
-                type: Object as PropType<BasicColumn>
-            },
-            record: {
-                type: Object as PropType<Recordable>
-            },
-            index: {
-                type: Number
-            }
-        },
-        setup(props: {
-            column: BasicColumn,
-            record: Recordable,
-            index: number
-        }) {
-            let renderText = ref()
-
-            function renderCell() {
-                const { column, record, index } = props
-                const { render, dataIndex } = column
-                const text = record[dataIndex.toString()]
-
-                if( isObject(render) ) {
-                    const { dict, date, number, percent } = render as Recordable
-                     
-                    if( dict ) {
-                        renderText = getDictValueByCode(text, dict)
-                    }
-
-                    if( date ) {
-                        renderText.value = dayjs(text).format(date || 'YYYY-MM-DD')
-                    }
-
-                    if( number ) {
-                        renderText.value = formatNumber(text, number)
-                    }
-
-                    if( percent ) {
-                        renderText.value = formatNumber((text || 0) * 100, percent) + '%'
-                    }
-
-                    if( isVnode(render) ) {
-                        renderText.value = ( <> { render } </> )
-                    }
-
-                    if( render['setup'] ) {
-                        renderText.value = createVNode(render as any, { text })
-                    }
-
-                    
-                } else {
-                    renderText.value = text
-                }
-
-                if( isFunction(render) ) {
-                    let afterRenderData = render(record, index, text)
-                    renderText.value = isVnode(afterRenderData) ? ( <>{ afterRenderData }</> ) : afterRenderData
-                }
-            }
-
-            renderCell()
-
-            return () => <span>{unref(renderText)}</span>
-        }
-    })
-
-</script>

package/src/components/table/src/components/editable/CellComponent.ts

@@ -1,57 +0,0 @@
-import { Recordable } from "@dt-frames/core"
-import { Popover } from "ant-design-vue"
-import { DefineComponent, FunctionalComponent, h, Ref } from "vue"
-import { ComponentType } from "../../types/table.type"
-import { componentMap } from "./componentMap"
-
-
-type ComponentProps = {
-    component: ComponentType
-    rule: boolean
-    popoverVisible: boolean
-    ruleMessage: string
-    getPopupContainer?: any
-}
-
-export type EditRecordRow<T = Recordable> = Partial<
-  {
-    onEdit: (editable: boolean, submit?: boolean) => Promise<boolean>;
-    onValid: () => Promise<boolean>;
-    editable: boolean;
-    onCancel: Function;
-    onSubmit: Function;
-    submitCbs: Function[];
-    cancelCbs: Function[];
-    validCbs: Function[];
-    editValueRefs: Recordable<Ref>;
-  } & T
->
-
-export const CellComponent: FunctionalComponent = ({
-    component = 'Input',
-    rule = true,
-    ruleMessage,
-    popoverVisible,
-    getPopupContainer
-}: ComponentProps,
-    { attrs }
-) => {
-    const Comp = componentMap.get(component) as DefineComponent
-    
-    const DefaultComp = h(Comp, attrs)
-
-    if (!rule) return DefaultComp
-
-    return h(
-        Popover,
-        {
-            overlayClassName: 'edit-cell-rule-popover',
-            visible: !!popoverVisible,
-            ...(getPopupContainer ? { getPopupContainer } : {}),
-        },
-        {
-            default: () => DefaultComp,
-            content: () => ruleMessage,
-        },
-    )
-}

package/src/components/table/src/components/editable/EditTableCell.vue

@@ -1,181 +0,0 @@
-<template>
-    <div class="editable-cell">
-        <CellComponent
-            ref="elRef"
-            v-bind="getComponentProps"
-            :component = "column?.editComponent"
-            :popoverVisible = "getRuleVisible"
-            :rule = "editRule"
-            :ruleMessage = "ruleMessage"
-            :class = "getWrapperClass"
-            :onChange = "handleChange"
-            :onOptionsChange = "handleOptionsChange"
-        >
-        </CellComponent>
-    </div>
-</template>
-
-<script lang="tsx">
-    import { DtEvent, isBoolean, isNumber, isString, Recordable } from "@dt-frames/core"
-    import { isFunction } from "@vueuse/core"
-    import { omit } from 'lodash-es'
-    import { Spin } from "ant-design-vue"
-    import { defineComponent, PropType, ref, unref, computed, toRaw } from "vue"
-    import { BasicColumn, ComponentType, LableValOptions } from "../../types/table.type"
-    import { CellComponent, EditRecordRow } from "./CellComponent"
-    import { getTableInstance } from "../../hooks/useTableInstance"
-
-
-    export default defineComponent({
-        name: 'EditableCell',
-        components: {
-            Spin,
-            CellComponent
-        },
-        props: {
-            value: {
-                type: [String, Number, Boolean, Object] as PropType<string | number | boolean | Recordable>,
-                default: ''
-            },
-            record: {
-                type: Object as PropType<EditRecordRow>,
-            },
-            column: {
-                type: Object as PropType<BasicColumn>,
-                default: ():BasicColumn => ({}),
-            },
-            index: Number
-        },
-        setup(props) {
-            const table = getTableInstance()
-            const elRef = ref()
-
-            const { editRule, align = 'left' } = props.column
-
-            const ruleMessage = ref('')
-            const ruleVisible = ref(false)
-
-            const optionsRef = ref<LableValOptions>([])
-            const currentValueRef = ref<any>(props.value)
-
-            const getComponent = computed(() => props.column?.editComponent || 'Input')
-            
-            // 提示信息是否可见
-            const getRuleVisible = computed(() => {
-                return unref( ruleMessage ) && unref( ruleVisible )
-            })
-
-            const getWrapperClass = computed(() => {
-                return `edit-cell-align-${align}`
-            })
-
-            const getIsCheckComp = computed(() => {
-                const component = unref(getComponent);
-                return ['Checkbox', 'Switch'].includes(component);
-            })
-
-            const createPlaceholderMessage = ( component: ComponentType ) => {
-                if( component.includes('Input') ) {
-                    return '请输入'
-                }
-
-                return '请选择'
-            }
-
-            // 设置表格属性
-            const getComponentProps = computed(() => {
-                const isCheckValue = unref(getIsCheckComp)
-                const valueField = isCheckValue ? 'checked' : 'value'
-
-                const val = unref(currentValueRef)
-                const value = isCheckValue ? (isNumber(val) && isBoolean(val) ? val : !!val) : val
-
-                let compProps = props.column?.editComponentProps ?? {}
-                
-                const { record, column, index } = props
-                if (isFunction(compProps)) {
-                    compProps = compProps({ text: val, record, column, index }) ?? {}
-                }
-
-                return {
-                    size: 'small',
-                    getPopupContainer: () => document.body,
-                    placeholder: createPlaceholderMessage(unref(getComponent)),
-                    ...omit(compProps, 'onChange'),
-                    [valueField]: value
-                }
-            })
-
-
-            async function handleChange( e: any ) {
-                const component = unref(getComponent)
-
-                if( !e ) {
-                    currentValueRef.value = e
-                } else if (component === 'Checkbox') {
-                    currentValueRef.value = (e as DtEvent).target.checked
-                } else if (component === 'Switch') {
-                    currentValueRef.value = e
-                } else if (e?.target && Reflect.has(e.target, 'value')) {
-                    currentValueRef.value = (e as DtEvent).target.value
-                } else if (isString(e) || isBoolean(e) || isNumber(e)) {
-                    currentValueRef.value = e
-                }
-                const onChange = unref(getComponentProps)?.onChange
-                if (onChange && isFunction(onChange)) onChange(...arguments)
-
-                table.emit?.('edit-change', {
-                    column: props.column,
-                    value: unref(currentValueRef),
-                    record: toRaw(props.record),
-                })
-
-                handleSubmitRule()
-            }
-
-
-            async function handleSubmitRule() {
-                const { column, record } = props
-                const { editRule } = column
-                const currentValue = unref(currentValueRef)
-
-                if ( editRule ) {
-                    if( isBoolean(editRule) && !currentValue && !isNumber(currentValue) ) {
-                        ruleVisible.value = true
-                        const component = unref(getComponent)
-                        ruleMessage.value = createPlaceholderMessage(component)
-                        return false
-                    }
-
-                    if( isFunction(editRule) ) {
-                        const res = await editRule(currentValue, record as Recordable)
-
-                        if (!!res) {
-                            ruleMessage.value = res;
-                            ruleVisible.value = true;
-                            return false;
-                        }
-                    }
-                }
-
-                ruleMessage.value = ''
-                return true
-            }
-
-            function handleOptionsChange(options: LableValOptions) {
-                optionsRef.value = options
-            }
-
-            return {
-                props,
-                getComponentProps,
-                getRuleVisible,
-                editRule,
-                ruleMessage,
-                getWrapperClass,
-                handleChange,
-                handleOptionsChange
-            }
-        }
-    })
-</script>

package/src/components/table/src/components/editable/componentMap.ts

@@ -1,18 +0,0 @@
-import { Input, Select, Checkbox, DatePicker, InputNumber, Switch, TimePicker, TreeSelect } from 'ant-design-vue'
-import { Component } from 'vue'
-import { ComponentType } from '../../types/table.type'
-
-const componentMap = new Map<ComponentType, Component>()
-
-componentMap.set('Input', Input)
-componentMap.set('InputNumber', InputNumber)
-componentMap.set('Select', Select)
-componentMap.set('TreeSelect', TreeSelect)
-componentMap.set('Switch', Switch)
-componentMap.set('Checkbox', Checkbox)
-componentMap.set('DatePicker', DatePicker)
-componentMap.set('TimePicker', TimePicker)
-
-export { 
-    componentMap 
-}

package/src/components/table/src/components/editable/index.ts

@@ -1,58 +0,0 @@
-import { isArray } from '@dt-frames/core'
-import { h } from 'vue'
-import { BasicColumn } from "../../types/table.type"
-import EditableCell from './EditTableCell.vue'
-
-function renderEditCell(column: BasicColumn) {
-    return ({text: value, record, index}) => {
-        // 触发校验
-        record.onValid = async () => {
-            if ( isArray( record?.validCbs ) ) {
-                const validFns = (record?.validCbs || []).map((fn) => fn())
-                const res = await Promise.all( validFns )
-                return res.every((item) => !!item)
-            }
-
-            return false
-        }
-
-        // 触发修改
-        record.onEdit = async (edit: boolean, submit = false) => {
-            if (!submit) {
-                record.editable = edit;
-            }
-
-            // 提交
-            if (!edit && submit) {
-                if ( !(await record.onValid()) ) return false
-                
-                const res = await record.onSubmitEdit?.()
-
-                if (res) {
-                    record.editable = false
-                    return true
-                }
-
-                return false
-            }
-
-            // 取消
-            if (!edit && !submit) {
-                record.onCancelEdit?.()
-            }
-
-            return true
-        }
-
-        return h(EditableCell, {
-            value,
-            record,
-            column,
-            index,
-        })
-    }
-}
-
-export {
-    renderEditCell
-}