@dt-frames/ui 1.0.8 → 1.0.11

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

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

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

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

package/src/components/table/src/hooks/useColumns.ts

@@ -1,9 +1,10 @@
 import type { PaginationProps } from 'ant-design-vue/lib/pagination'
-import { computed, ComputedRef, Ref, ref, unref, toRaw, watch, h } from "vue";
-import { cloneDeep, isEqual } from 'lodash-es'
-import { BasicColumn, BasicTableProps, CellFormat } from "../types/table.type";
-import { SetColumnsParams } from '../types/tableHeader.type';
-import { isArray, isBoolean, isFunction, isObject, isString, Recordable, useAppStore, getDictValueByCode } from '@dt-frames/core';
+import { computed, ComputedRef, Ref, ref, unref, toRaw, watch, h } from "vue"
+import { cloneDeep, isEqual, omit } from 'lodash-es'
+import { renderEditCell } from '../components/editable'
+import { BasicColumn, BasicTableProps } from "../types/table.type"
+import { SetColumnsParams } from '../types/tableHeader.type'
+import { isArray, isBoolean, isFunction, isObject, isString, Recordable, useAppStore, getDictValueByCode } from '@dt-frames/core'
 import TableAction from '../components/TableActions.vue'
 
 // 索引列及操作列标识
@@ -157,12 +158,11 @@ function handleActionColumn(propsRef: ComputedRef<BasicTableProps>, columns: Bas
             customRender: ({ record, index}) => {
                 return h(
                     TableAction as any,
-                    {
+                    omit({
                         ...columnObj,
                         record,
-                        align: null,
                         index
-                    }
+                    }, 'align')
                 )
             }
         })
@@ -211,6 +211,13 @@ export function useColumns(
 
         return columns
             .filter( column => isIfShow(column) )
+            .map(column => {
+                if( column.edit ) {
+                    column.customRender = renderEditCell(column)
+                }
+
+                return column
+            })
 
     })
 

package/src/components/table/src/hooks/useDataSource.ts

@@ -24,19 +24,6 @@ export function useDataSource(
     // 拷贝一份表格数据 然后再做数据处理
     const dataSourceRef = ref<Recordable[]>([])
 
-    // const { defSort, onTableChange } = unref( propsRef )
-    // const { appConf } = useAppStore()
-
-    // onTableChange({
-    //     pagination: {
-    //         current: 1,
-    //         pageSize: appConf.ui.table.defaultPageSize
-    //     },
-    //     sort:defSort,
-    //     filter: null,
-    //     showBtnLoading: false
-    // }, false)
-
     watch(
         () => unref(propsRef).dataSource,
         (dataSource) => {

package/src/components/table/src/hooks/useTableHeader.ts

@@ -9,10 +9,10 @@ export function useTableHeader(
     handlers: { onColumnsChange: (data: ColumnChangeParam[]) => void }
 ) {
     const getHeaderProps = computed((): Recordable => {
-        const { tableSetting, toolbar } = unref(propsRef)
+        const { tableSetting, toolbar = [] } = unref(propsRef)
 
         const { getSlot } = useSlots()
-        const hideTitle = !slots.toolbar && !slots.headerTop && !tableSetting
+        const hideTitle = !toolbar.length && !slots.toolbar && !slots.headerTop && !tableSetting
 
         return {
             title: hideTitle 

package/src/components/table/src/index.vue

@@ -49,7 +49,11 @@
         emits: [
             'register',
             'columns-change',
-            'selection-change'
+            'selection-change',
+            'row-click',
+            'row-dbClick',
+            'expanded-rows-change',
+            'edit-change'
         ],
         setup(props, { emit, attrs, slots }) {
             // table实例
@@ -116,6 +120,7 @@
                 getCacheColumns,
                 getSelectRows,
                 getSelectRowKeys,
+                emit,
                 getSize: () => {
                     return unref(getBind).size as SizeType;
                 }

package/src/components/table/src/props.ts

@@ -12,7 +12,7 @@ export const TableProps = {
     clickRowSelect: { type: Boolean, default: false },
 
     // 表格设置
-    tableSetting: {type: Object as PropType<TableSetting>, default: () => ({})},
+    tableSetting: {type: Object as PropType<TableSetting | boolean>, default: () => ({})},
 
     // 是否显示斑马条纹
     striped: { type: Boolean, default: true },

package/src/components/table/src/types/table.type.ts

@@ -88,6 +88,22 @@ export type ActionType = {
     btns?: BtnsType[]
 }
 
+export type ComponentType =
+  | 'Input'
+  | 'InputNumber'
+  | 'Select'
+  | 'TreeSelect'
+  | 'Checkbox'
+  | 'Switch'
+  | 'DatePicker'
+  | 'TimePicker'
+
+export type LableValOptions = {
+    label: string;
+    value: any;
+    [key: string]: string | number | boolean
+}[]
+
 
 export interface BasicColumn extends ColumnProps {
     // 子元素
@@ -107,7 +123,17 @@ export interface BasicColumn extends ColumnProps {
 
     edit?: boolean
     editRow?: boolean
-    // editable?: boolean
+    editable?: boolean
+    editComponent?: ComponentType
+    editComponentProps?:
+    | ((opt: {
+        text: string | number | boolean | Recordable;
+        record: Recordable;
+        column: BasicColumn;
+        index: number;
+      }) => Recordable)
+    | Recordable
+    editRule?: boolean | ((text: string, record: Recordable) => Promise<string>)
 
     // 是否显示序号列
     showIndexColumn?: boolean
@@ -130,4 +156,5 @@ export type TableActionType = {
     setCacheColumnsByField?: (dataIndex: string | undefined, value: BasicColumn) => void
     getSelectRows: ( ) => void
     getSelectRowKeys: ( ) => void
+    emit?: any
 }

package/src/components/tree/index.less

@@ -0,0 +1,41 @@
+.dt-tree{
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+
+    .dt-tree-header{
+        .headerTitle{
+            text-align: center;
+            line-height: 32px;
+            font-weight: bolder;
+        }
+
+        .dt-tree-search{
+            display: flex;
+            padding: 0 0 10px 10px;
+            border-bottom: 1px solid #e7e7e7;
+            &>i{
+                width: 24px;
+                display: block;
+                text-align: center;
+                cursor: pointer;
+            }
+            .dt-tree-search-input{
+                flex: 1;
+                input{
+                    font-size: 12px;
+                }
+            }
+        }
+    }
+
+    .ant-spin-nested-loading{
+        flex: 1;
+        overflow-y: auto;
+        padding: 10px 0;
+
+        .tree-title{
+            font-size: 12px;
+        }
+    }
+}

package/src/components/tree/index.ts

@@ -0,0 +1,5 @@
+import DtTree from './src/index.vue'
+
+export {
+    DtTree
+}

package/src/components/tree/src/components/TreeHeader.vue

@@ -0,0 +1,97 @@
+<template>
+    <div class="dt-tree-header">
+        <slot name="headerTitle" v-if="slots.headerTitle"></slot>
+
+        <h4 v-if="!slots.headerTitle && title" class="headerTitle">{{ title }}</h4>
+
+        <div v-if="search || toolbar" class="dt-tree-search">
+            <div class="dt-tree-search-input" v-if="search">
+                <InputSearch size="small" allowClear v-model:value="searchValue" placeholder="搜索"/>
+            </div>
+
+            <Dropdown @click.prevent v-if="toolbar">
+                <i class="i ic:baseline-more-vert"></i>
+                <template #overlay>
+                    <Menu @click="handleMenuClick">
+                        <template v-for="item in toolbarList" :key="item.value">
+                            <MenuItem v-bind="{ key: item.value }">
+                                {{ item.label }}
+                            </MenuItem>
+                            <MenuDivider v-if="item.divider" />
+                        </template>
+                    </Menu>
+                </template>
+            </Dropdown>
+        </div>
+
+    </div>
+</template>
+
+<script lang="ts" setup>
+    import { useSlots, ref, watch, computed } from 'vue'
+    import { InputSearch, Dropdown, Menu, MenuItem, MenuDivider } from 'ant-design-vue'
+    import { useDebounceFn } from '@vueuse/core'
+    import { searchProps } from '../props'
+    import { ToolbarEnum } from '../type/tree'
+
+    const slots = useSlots()
+    const emits = defineEmits([
+        'search',
+        'strictly-change',
+        'strictly-change'
+    ])
+    const props = defineProps( searchProps )
+
+    const searchValue = ref('')
+
+    function emitChange(value?: string){
+        emits('search', value)
+    }
+
+    function handleMenuClick(e) {
+        const { key } = e;
+        switch (key) {
+            case ToolbarEnum.SELECT_ALL: props.checkAll?.(true); break
+            case ToolbarEnum.UN_SELECT_ALL: props.checkAll?.(false); break
+            case ToolbarEnum.EXPAND_ALL: props.expandAll?.(true); break
+            case ToolbarEnum.UN_EXPAND_ALL: props.expandAll?.(false); break
+            case ToolbarEnum.CHECK_STRICTLY: emits('strictly-change', false); break
+            case ToolbarEnum.CHECK_UN_STRICTLY: emits('strictly-change', true); break
+        }
+    }
+
+    const toolbarList = computed(() => {
+        const { checkable } = props
+
+        const defaultToolbarList = [
+            { label: '展开全部', value: ToolbarEnum.EXPAND_ALL },
+            {
+                label: '折叠全部',
+                value: ToolbarEnum.UN_EXPAND_ALL,
+                divider: checkable,
+            },
+        ];
+
+        return checkable
+        ? [
+            { label: '选择全部', value: ToolbarEnum.SELECT_ALL },
+            {
+                label: '取消选择',
+                value: ToolbarEnum.UN_SELECT_ALL,
+                divider: checkable,
+            },
+            ...defaultToolbarList,
+            { label: '层级关联', value: ToolbarEnum.CHECK_STRICTLY },
+            { label: '层级独立', value: ToolbarEnum.CHECK_UN_STRICTLY },
+        ]
+        : defaultToolbarList;
+    })
+
+    const debounceEmitChange = useDebounceFn(emitChange, 200)
+    watch(
+        () => searchValue.value,
+        (v) => {
+            debounceEmitChange(v);
+        },
+    )
+</script>