@dt-frames/ui 1.0.9 → 1.0.12

package/src/components/source/src/hooks/useFetch.ts

@@ -1,23 +1,27 @@
-import { http, isString, JsonResult, Recordable, ApiType } from "@dt-frames/core";
+import { http, isString, JsonResult, Recordable, ApiType, isObject } from "@dt-frames/core";
 
 export function useFetch(api: string | ApiType, baseUrl: string = '') {
     /**
      * 发送请求
      * handleParams 记录返回的值
      */
-    function fetch(params: Recordable = { }) {
-        let type, header = { }, model = {}, _api = ''
+    function fetch(params: any) {
+        let type, header = { }, model = {}
         if(isString( api )) {
-            _api = baseUrl + api
+            api = baseUrl + api
         } else {
             type = api.type
-            _api = baseUrl + api.api
+            if( api.api.indexOf(baseUrl) === -1 ) {
+                api.api = `${baseUrl}${api.api}`
+            }
             header = api.header
             model = api.model
         }
 
         return new Promise(( resolve, reject ) => {
-            http[type || 'post']( _api, Object.assign({}, model, params), {
+            let param = isObject(params) ? Object.assign({}, model, params) : params
+
+            http[type || 'post']( api, param, {
                 ...header,
                 ...{ onlyData: false }
             }).then(

package/src/components/source/src/hooks/useSource.ts

@@ -1,5 +1,5 @@
 import { ref, reactive, toRaw, Ref } from 'vue'
-import { isString, Recordable, useMessage } from "@dt-frames/core"
+import { isFunction, isString, Recordable, useMessage } from "@dt-frames/core"
 import { BaseDataType, SourceType } from "../types/source.type"
 import { useFetch } from './useFetch'
 import { TableParamsType } from '../types/table.type'
@@ -19,11 +19,22 @@ export function useSource(opt: SourceType) {
 
     const { message } = useMessage()
     const apiFul: Recordable = {}
+    const apiPath: Recordable = {}
 
     // 定义加载状态
     for( let it in api ) {
         loading['on' + it.slice(0,1).toUpperCase() + it.slice(1).toLowerCase()] = ref(false)
-        apiFul[it] = baseUrl + (isString(api[it]) ? api[it] : (api[it] as ApiType).api)
+
+        if( isString(api[it] )) {
+            apiFul[it] = baseUrl + api[it]
+        } else {
+            apiFul[it] = {
+                ...(api[it] as ApiType),
+                api: baseUrl + (api[it] as ApiType).api
+            }
+        }
+
+        apiPath[it] = baseUrl + (isString(api[it]) ? api[it] : (api[it] as ApiType).api)
     }
 
     // 定义分页数据
@@ -48,7 +59,7 @@ export function useSource(opt: SourceType) {
     /**
      * 分页查询
      */
-    function onSearch(model: Recordable) {
+    function onSearch(model: Recordable = {}) {
         baseData.entityDTO = { ...model }
         baseData.pageDTO.pageNo = 0
         loading.onSearch.value = true
@@ -71,15 +82,23 @@ export function useSource(opt: SourceType) {
      * 如果为首次  则为数据初始化 不需要查询
      */
     function onTableChange( params: TableParamsType, needSearch: boolean = true ) {
-        const { pagination, showBtnLoading, sort = [], filter } = params
+        const { pagination, showBtnLoading, sort, filter } = params
 
         baseData.pageDTO = {
             pageNo: pagination.current - 1,
             pageSize: pagination.pageSize
         }
 
-        // baseData.orderDTOs = sort.length ?? null
-        baseData.orderDTOs = []
+        const { field, order } = sort
+
+        if( field ) {
+            baseData.orderDTOs = [{
+                propertyName: field,
+                dir: order === 'ascend' ? 'asc' : 'desc'
+            }]
+        } else {
+            baseData.orderDTOs = []
+        }
 
         if( needSearch ) search()
     }
@@ -115,7 +134,7 @@ export function useSource(opt: SourceType) {
     function onAdd(model: Recordable) {
         const { fetch } = useFetch(add, baseUrl)
 
-        fetch(model).then( (rsp: any) => {
+        return fetch(model).then( (rsp: any) => {
             message.success('新增成功')
             search()
         } )
@@ -132,7 +151,7 @@ export function useSource(opt: SourceType) {
     // 修改
     function onUpdate(model: Recordable) {
         const { fetch } = useFetch(update, baseUrl)
-        fetch(model).then( (rsp: any) => {
+        return fetch(model).then( (rsp: any) => {
             message.success('更新数据成功')
             search()
         } )
@@ -143,7 +162,8 @@ export function useSource(opt: SourceType) {
     function onDeletes(ids: any) {
         const { fetch } = useFetch(deletes, baseUrl)
         
-        fetch(ids).then( (rsp: any) => {
+        fetch(toRaw(ids)).then( (rsp: any) => {
+            message.success(`${ ids.length > 1 ? '批量' : '' } 删除成功！`)
             search()
         } )
     }
@@ -176,8 +196,8 @@ export function useSource(opt: SourceType) {
     }
 
     return {
-        api,
-        apiFul,
+        api: apiFul,
+        apiPath,
         form,
         table,
         curd,
@@ -188,6 +208,7 @@ export function useSource(opt: SourceType) {
         onUpdate,
         onTableChange,
         onDownload,
-        onSearch
+        onSearch,
+        
     }
 }

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

@@ -3,6 +3,6 @@ import { Recordable } from "@dt-frames/core";
 export type TableParamsType = {
     pagination: any,
     showBtnLoading: boolean,
-    sort: Recordable[],
+    sort: Recordable,
     filter: any
 }

package/src/components/table/index.less

@@ -77,8 +77,8 @@
     display: inline-block;
     vertical-align: middle;
     cursor: pointer;
-    svg{
-        display: flex;
+    i{
+        color: @primary-color;
     }
 }
 
@@ -171,3 +171,9 @@
         color: #333;
     }
 }
+
+.edit-cell-rule-popover .ant-popover-inner-content{
+    padding: 4px 8px;
+    color: #ed6f6f;
+    border-radius: 2px;
+}

package/src/components/table/src/components/TableHeader.vue

@@ -9,7 +9,7 @@
                 <slot name="toolbar"></slot>
             </div>
 
-            <div class="dt-table-header-actions__right">
+            <div class="dt-table-header-actions__right" v-if="tableTools">
                 <TableSettinCom
                     :setting="tableTools"
                     @columns-change="handleColumnChange"
@@ -42,7 +42,7 @@
         },
         props: {
             tableTools: {
-                type: Object as PropType<TableSetting>
+                type: [Object, Boolean] as PropType<TableSetting | boolean>
             },
             toolbar: {
                 type: Array as PropType<BtnsType[]>,

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

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

@@ -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/useCustomRow.ts

@@ -0,0 +1,86 @@
+import { DtEvent, Recordable } from "@dt-frames/core"
+import { ComputedRef, unref } from "vue"
+import { BasicTableProps } from "../types/table.type"
+
+interface Options {
+    setSelectedRowKeys: (keys: string[]) => void
+    getSelectRowKeys: () => string[]
+    clearSelectedRowKeys: () => void
+    emit: any
+  }
+
+export function useCustomRow(
+    propsRef: ComputedRef<BasicTableProps>,
+    { setSelectedRowKeys, getSelectRowKeys, clearSelectedRowKeys, emit }: Options
+) {
+    const customRow = (record: Recordable, index: number) => {
+        return {
+            onClick: (e) => {
+                e?.stopPropagation()
+
+                function handleClick() {
+                    const { rowSelection, rowKey, clickToRowSelect } = unref(propsRef)
+                    if (!rowSelection || !clickToRowSelect) return
+                    
+                    const keys = getSelectRowKeys()
+                    const key = record[rowKey]
+                    if (!key) return
+
+                    const isCheckbox = rowSelection.type === 'checkbox'
+                    if (isCheckbox) {
+                        const tr: HTMLElement = (e as MouseEvent)
+                            .composedPath?.()
+                            .find((dom: HTMLElement) => dom.tagName === 'TR') as HTMLElement;
+                        if (!tr) return
+
+                        const checkBox = tr.querySelector('input[type=checkbox]')
+
+                        if (!checkBox || checkBox.hasAttribute('disabled')) return
+
+                        if (!keys.includes(key)) {
+                            setSelectedRowKeys([...keys, key])
+                            return
+                        }
+
+                        const keyIndex = keys.findIndex((item) => item === key)
+                        keys.splice(keyIndex, 1)
+                        setSelectedRowKeys(keys)
+                        return
+                    }
+
+                    const isRadio = rowSelection.type === 'radio'
+
+                    if (isRadio) {
+                        if (!keys.includes(key)) {
+                            if (keys.length) {
+                                clearSelectedRowKeys()
+                            }
+                            setSelectedRowKeys([key])
+                            return
+                        }
+                        clearSelectedRowKeys()
+                    }
+                }
+
+                handleClick()
+                emit('row-click', record, index, e)
+            },
+            onDblclick: (event: Event) => {
+                emit('row-dbClick', record, index, event);
+            },
+            onContextmenu: (event: Event) => {
+                emit('row-contextmenu', record, index, event);
+            },
+            onMouseenter: (event: Event) => {
+                emit('row-mouseenter', record, index, event);
+            },
+            onMouseleave: (event: Event) => {
+                emit('row-mouseleave', record, index, event);
+            },
+        }
+    }
+
+    return {
+        customRow,
+    }
+}

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