@dt-frames/ui 1.0.2 → 1.0.5

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

@@ -0,0 +1,179 @@
+import { computed, ref, reactive, toRaw, Ref } from 'vue'
+import { http, isArray, isFunction, isObject, isString, JsonResult, Recordable } from "@dt-frames/core"
+import { BaseDataType, SourceType } from "../types/source.type"
+import { useFetch } from './useFetch'
+import { TableParamsType } from '../types/table.type'
+import { DownloadType } from '../../../table/src/types/tableHeader.type'
+import { handleDownloadPage } from '../../../excel/index'
+import { useAppStore } from '@dt-frames/core'
+
+export function useSource(opt: SourceType) {
+    const loading: {
+        [key: string]: Ref<boolean>
+    } = {
+        onSearch: ref(false),
+        onReset: ref(false)
+    }
+    const { baseUrl = '', api = {}, exportName = '' } = opt
+    const { add, deletes, update, queryById, queryPage } = api
+
+    // 定义加载状态
+    for( let it in api ) {
+        loading['on' + it.slice(0,1).toUpperCase() + it.slice(1).toLowerCase()] = ref(false)
+    }
+
+    // 定义分页数据
+    const { appConf } = useAppStore()
+    const pagination = ref({ 
+        current: appConf?.ui?.table?.defaultPageNo || 1, 
+        pageSize: appConf?.ui?.table?.defaultPageSize || 10, 
+        total: 0 
+    })
+
+    const dataSource = ref([])
+    const baseData = reactive<BaseDataType>({
+        entityDTO: {},
+        pageDTO: {
+            pageNo: 0,
+            pageSize: 10
+        },
+        orderDTOs: {}
+    })
+
+
+    /**
+     * 分页查询
+     */
+    function onSearch(model: Recordable) {
+        baseData.entityDTO = { ...model }
+        baseData.pageDTO.pageNo = 0
+        loading.onSearch.value = true
+
+        search()
+    }
+
+    // 重置
+    function onReset(model: Recordable) {
+        baseData.entityDTO = { ...model }
+        baseData.pageDTO.pageNo = 0
+        loading.onReset.value = true
+        
+        search()
+    }
+
+
+    /**
+     * table 表单发生改变时, 进行分页查询
+     * 如果为首次  则为数据初始化 不需要查询
+     */
+    function onTableChange( params: TableParamsType, needSearch: boolean = true ) {
+        const { pagination, showBtnLoading, sort = [], filter } = params
+
+        baseData.pageDTO = {
+            pageNo: pagination.current - 1,
+            pageSize: pagination.pageSize
+        }
+
+        // baseData.orderDTOs = sort.length ?? null
+        baseData.orderDTOs = []
+
+        if( needSearch ) search()
+    }
+
+    
+    // 查询
+    function search() {
+        const { fetch } = useFetch(queryPage, baseUrl)
+        loading.onQuerypage.value = true
+
+        fetch(
+            toRaw(baseData)
+        ).then( (rsp: any) => {
+            const { records, pageDTO } = rsp
+           
+            dataSource.value.splice(0, dataSource.value.length, ...records)
+
+            pagination.value = {
+                current: (pageDTO?.pageNo??0) + 1, 
+                pageSize: (pageDTO?.pageSize??10), 
+                total: pageDTO?.totalCount??0
+            }
+        } )
+        .finally(() => {
+            loading.onSearch.value = false
+            loading.onQuerypage.value = false
+            loading.onReset.value = false
+        })
+    }
+
+
+    // 新增
+    function onAdd(model: Recordable) {
+        const { fetch } = useFetch(add, baseUrl)
+
+        fetch(model).then( (rsp: any) => {
+            search()
+        } )
+    }
+
+
+    // 根据id查询
+    async function onQueryById(id: string) {
+        const { fetch } = useFetch(queryById, baseUrl)
+        return await fetch( { id } )
+    }
+
+
+    // 修改
+    function onUpdate(model: Recordable) {
+        const { fetch } = useFetch(update, baseUrl)
+        fetch(model).then( (rsp: any) => {
+            search()
+        } )
+    }
+
+
+    // 删除
+    function onDeletes(ids: any) {
+        const { fetch } = useFetch(deletes, baseUrl)
+        
+        fetch(ids).then( (rsp: any) => {
+            search()
+        } )
+    }
+
+    
+    // 导出
+    function onDownload( excelData: DownloadType ) {
+        handleDownloadPage(excelData, exportName)
+    }
+
+    const form = {
+        onSearch,
+        onReset,
+        loading
+    }
+
+    const table = {
+        dataSource,
+        pagination,
+        onTableChange,
+        onDownload,
+        loading: loading.onQuerypage
+    }
+
+    const curd = {
+        onAdd,
+        onQueryById,
+        onUpdate,
+        onDeletes
+    }
+
+    return {
+        api,
+        form,
+        table,
+        curd,
+        onSearch
+    }
+}

package/src/components/source/src/index.ts

@@ -0,0 +1,5 @@
+import { useSource } from './hooks/useSource'
+
+export {
+    useSource
+}

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

@@ -0,0 +1,68 @@
+import { Recordable } from "@dt-frames/core"
+
+export type ApiType = {
+    // api接口
+    api: string
+
+    // 请求类型
+    type?: 'get' | 'post' | 'put' | 'delete',
+
+    // 请求头信息
+    header?: any
+
+    // 默认的基础数据
+    model?: Recordable
+
+    // 请求之前
+    beforeFetch?: ( params: Recordable ) => boolean
+
+    // 请求之后
+    afterFetch?: <T = any>( data: any)  => T
+}
+
+
+export type ApiObjType = {
+    // 新增
+    add?: string | ApiType
+
+    // 修改
+    update?: string | ApiType
+
+    // 保存
+    save?: string | ApiType
+
+    // 删除
+    deletes?: string | ApiType
+
+    // 查找
+    queryById?: string | ApiType
+
+    // 分页查询
+    queryPage?: string | ApiType
+
+    // 其它接口
+    [key: string]: string | ApiType
+}
+
+
+export type SourceType = {
+    // 基础路径
+    baseUrl?: string
+
+    // 文件导出名称
+    exportName?: string
+
+    // api接口
+    api: ApiObjType
+}
+
+export type BaseDataType = {
+    entityDTO?: any
+
+    pageDTO?: {
+        pageNo: Number
+        pageSize: Number
+    } | null
+
+    orderDTOs: any
+}

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

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

package/src/components/table/index.less

@@ -0,0 +1,173 @@
+.table-striped td {
+    background-color: #fafafa;
+}
+
+.dt-table-header{
+    .dt-table-header-actions{
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+    }
+
+    .dt-table-header-actions__right{
+        display: flex;
+        .dt-icon{
+            margin: 0 5px;
+            cursor: pointer;
+        }
+    }
+}
+
+.column-setting{
+    &__check-item{
+        display: flex;
+        align-items: center;
+        min-width: 100%;
+        padding: 4px 16px 8px 0;
+    }
+    &__popover-title {
+        display: flex;
+    }
+}
+
+.column-setting__cloumn-list {
+    .ant-popover-inner-content{
+        padding: 12px 0 0 0;
+    }
+    .ant-checkbox-group {
+        width: 100%;
+        min-width: 260px;
+    }
+
+    .drag-icon{
+        margin: 0 5px;
+        cursor: move;
+    }
+
+    .ant-checkbox-wrapper{
+        flex: 1;
+    }
+
+    .dt-icon{
+        cursor: pointer;
+        display: flex;
+    }
+
+    .disabled{
+        .dt-icon{
+            cursor: not-allowed;
+            opacity: 0.5;
+        }
+    }
+
+    .active{
+        .dt-icon{
+            color: @primary-color !important;
+        }
+    }
+
+    .ant-popover-inner-content {
+        max-height: 400px;
+        overflow-y: auto;
+    }
+}
+
+.dt-table-action-btn{
+    width: 24px;
+    display: inline-block;
+    vertical-align: middle;
+    cursor: pointer;
+    svg{
+        display: flex;
+    }
+}
+
+.dt-table-action-dropdown{
+    vertical-align: middle;
+    cursor: pointer;
+}
+
+.ant-table-fixed-left table, .ant-table-fixed-right table{
+    width: min-content;
+}
+
+.ant-table-cell {
+    height: 44px !important;
+    line-height: 24px !important;
+    font-size: 14px !important;
+    padding: 4px 8px !important;
+} 
+
+.ant-table-small{
+    .ant-table-cell {
+        height: 32px !important;
+        line-height: 16px !important;
+        font-size: 12px !important;
+        padding: 2px 8px !important;
+    }
+}
+
+.ant-table-middle{
+    .ant-table-cell {
+        height: 38px !important;
+        line-height: 20px !important;
+        font-size: 13px !important;
+        padding: 4px 8px !important;
+    }  
+}
+
+.dt-action-select{
+    .ant-dropdown-menu-title-content{
+        display: flex;
+        align-items: center;
+        font-size: 13px;
+        svg{
+            display: block;
+        }
+
+        .dt-icon{
+            padding-right: 8px;
+        }
+    }
+}
+
+
+.dt-table{
+    .ant-table-pagination{
+        margin: 0 !important;
+        padding: 10px 0;
+        border: 1px solid #f0f0f0;
+    }
+    
+    .ant-table-title{
+        padding: 8px 0 !important;
+        border: none !important;
+    }
+
+    .ant-table-resize-handle{
+        right: -7px;
+        .ant-table-resize-handle-line{
+            width: 2px;
+        }
+    }
+
+    .ant-table-body {
+        position: relative;
+        table{
+            position: absolute;
+            top: 0;
+            left: 0;
+        }
+    }
+
+    .form-btns{
+        button:first-of-type {
+            margin-left: 0;
+        }
+    }
+
+    .ant-table-thead > tr > th{
+        font-weight: bolder;
+        color: #333;
+    }
+}

package/src/components/table/index.ts

@@ -0,0 +1,7 @@
+import { useTable } from './src/hooks/useTable';
+import DtTable from "./src/index.vue"
+
+export {
+    DtTable, 
+    useTable,
+}

package/src/components/table/src/components/TableActions.vue

@@ -0,0 +1,108 @@
+<template>
+    <template v-if="props.expand">
+        <span v-for="item in props.btns" class="dt-table-action-btn">
+            <Tooltip placement="bottom" v-if="item.ifShow">
+                <template #title>{{ item.title }}</template>
+                <span v-icon="item.icon" :color="item.color" @click="handleAction(item)"></span>
+            </Tooltip>
+        </span>
+    </template>
+
+    <template v-else>
+        <Dropdown 
+            :getPopupContainer="getPopupContainer"
+            :trigger="['click']"
+        >
+            <DtIcon :icon-class="'ic:baseline-settings'" class-name="dt-table-action-dropdown"></DtIcon>
+
+            <template #overlay>
+                <Menu class="dt-action-select">
+                    <template v-for="item in props.btns">
+                        <MenuItem
+                            v-if="item.ifShow"
+                            @click="handleAction(item)"
+                        >
+                            <DtIcon :icon-class="item.icon" :color="item.color" :size="16"></DtIcon>
+                            <span>{{ item.title }}</span>
+                        </MenuItem>
+                    </template>
+                    
+                </Menu>
+            </template>
+
+        </Dropdown>
+
+    </template>
+
+</template>
+
+<script lang="ts" setup>
+    import { PropType, watch, useAttrs } from 'vue';
+    import { Tooltip, Dropdown, Menu, MenuItem } from 'ant-design-vue'
+    import { BtnsType } from '../types/table.type';
+    import { DtIcon } from '../../../icons/index'
+    import { isBoolean, isFunction, getPopupContainer as getParentContainer } from '@dt-frames/core';
+
+    const props = defineProps({
+        fixed: {
+            type: String as PropType<boolean | 'left' | 'right' | undefined>,
+            default: 'right'
+        },
+        title: {
+            type: String
+        },
+        expand: {
+            type: Boolean,
+            default: false
+        },
+        width: {
+            type: String,
+            default: '70px'
+        },
+        btns: {
+            type: Array as PropType<BtnsType[]>,
+            default: []
+        },
+        flag: {
+            type: String as PropType<'ACTION'>
+        },
+        record: {
+            default: { }
+        },
+        index: {
+            type: Number
+        }
+    })
+
+    watch(
+        () => props.btns,
+        (btns) => {
+            btns.map( it => {
+                it.ifShow = isBoolean( it.ifShow )
+                    ? it.ifShow
+                    : isFunction( it.ifShow )
+                    ? it.ifShow( props.record )
+                    : true
+            } )
+        },{
+            immediate: true
+        }
+    )
+
+    function handleAction(it: BtnsType) {
+        if( isFunction( it.action ) ) {
+            it.action({
+                row: props.record,
+                index: props.index
+            })
+        }
+    }
+
+    const attrs = useAttrs()
+    function getPopupContainer() {
+        return isFunction(attrs.getPopupContainer)
+          ? attrs.getPopupContainer()
+          : getParentContainer();
+    }
+
+</script>

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

@@ -0,0 +1,77 @@
+<template>
+    <div class="dt-table-header">
+        <div class="dt-table-header-actions">
+            <div class="dt-table-header-actions__left">
+                <FormButtons 
+                    v-bind="getActionsProps"
+                    @handle-method="handleMethod"
+                ></FormButtons>
+                <slot name="toolbar"></slot>
+            </div>
+
+            <div class="dt-table-header-actions__right">
+                <TableSettinCom
+                    @columns-change="handleColumnChange"
+                ></TableSettinCom>
+            </div>
+        </div>
+
+        <div v-if="$slots.headerTop" style="margin: 5px">
+            <slot name="headerTop"></slot>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+    import { defineComponent, PropType } from "vue"
+    import { Button } from 'ant-design-vue'
+    import type { BtnsType, ColumnChangeParam, TableSetting } from "../types/table.type"
+    import TableSettinCom from './setting/index.vue'    
+    import { DtIcon } from '../../../icons/index'
+    import { FormButtons } from "../../../forms"
+    import { isFunction } from "@dt-frames/core"
+
+    export default defineComponent({
+        name: 'table-header',
+        components: {
+            TableSettinCom,
+            Button,
+            DtIcon,
+            FormButtons
+        },
+        props: {
+            tableTools: {
+                type: Object as PropType<TableSetting>
+            },
+            toolbar: {
+                type: Array as PropType<BtnsType[]>,
+                default: []
+            }
+        },
+        emits: ['columns-change'],
+        setup(props, { emit }) {
+            function handleColumnChange(data: ColumnChangeParam[]) {
+                emit('columns-change', data);
+            }
+
+            function handleMethod( e ) {
+                if( isFunction(e.onClick) ) {
+                    e.onClick()
+                }
+            }
+
+            const getActionsProps = {
+                mode: null,
+                showAdvancedButton: false,
+                show: true,
+                buttonList: props.toolbar
+            } as any
+
+            return {
+                getActionsProps,
+                handleColumnChange,
+                handleMethod
+            }
+        }
+    })
+</script>

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

@@ -0,0 +1,76 @@
+<script lang="tsx">
+    import { getDictValueByCode, isFunction, isObject, Recordable, formatNumber, isVnode } from '@dt-frames/core'
+    import dayjs from 'dayjs'
+    import { defineComponent, PropType, unref, ref, h, toRaw, render as render1, resolveComponent, resolveDynamicComponent, createVNode } 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( isFunction(render) ) {
+                    renderText.value = render(text, record, index)
+                }
+
+                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 {
+                    console.log(text)
+                    renderText.value = text
+                }
+            }
+
+            renderCell()
+
+            return () => <span>{unref(renderText)}</span>
+        }
+    })
+
+</script>