@dt-frames/ui 1.0.13 → 1.0.15

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

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

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

@@ -1,3 +0,0 @@
-export function usePage() {
-    
-}

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

@@ -1,214 +0,0 @@
-import { ref, reactive, toRaw, Ref } from 'vue'
-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'
-import { DownloadType } from '../../../table/src/types/tableHeader.type'
-import { handleDownloadPage } from '../../../excel/index'
-import { useAppStore, ApiType } 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
-
-    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)
-
-        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)
-    }
-
-    // 定义分页数据
-    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
-        }
-
-        const { field, order } = sort
-
-        if( field ) {
-            baseData.orderDTOs = [{
-                propertyName: field,
-                dir: order === 'ascend' ? 'asc' : 'desc'
-            }]
-        } else {
-            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)
-
-        return fetch(model).then( (rsp: any) => {
-            message.success('新增成功')
-            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)
-        return fetch(model).then( (rsp: any) => {
-            message.success('更新数据成功')
-            search()
-        } )
-    }
-
-
-    // 删除
-    function onDeletes(ids: any) {
-        const { fetch } = useFetch(deletes, baseUrl)
-        
-        fetch(toRaw(ids)).then( (rsp: any) => {
-            message.success(`${ ids.length > 1 ? '批量' : '' } 删除成功！`)
-            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: apiFul,
-        apiPath,
-        form,
-        table,
-        curd,
-        loading,
-        onAdd,
-        onQueryById,
-        onDeletes,
-        onUpdate,
-        onTableChange,
-        onDownload,
-        onSearch,
-        
-    }
-}

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

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

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

@@ -1,58 +0,0 @@
-import { Recordable, ApiType } from "@dt-frames/core"
-
-export type PageQueryType = {
-    entityDTO: Recordable,
-    orderDTOs: Recordable[],
-    pageDTO: {
-        pageNo: number
-        pageSize: number
-        [key: string]: any
-    }
-}
-
-
-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

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

package/src/components/table/index.less

@@ -1,179 +0,0 @@
-.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;
-    i{
-        color: @primary-color;
-    }
-}
-
-.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;
-    }
-}
-
-.edit-cell-rule-popover .ant-popover-inner-content{
-    padding: 4px 8px;
-    color: #ed6f6f;
-    border-radius: 2px;
-}

package/src/components/table/index.ts

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

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

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

@@ -1,78 +0,0 @@
-<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" v-if="tableTools">
-                <TableSettinCom
-                    :setting="tableTools"
-                    @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, Boolean] as PropType<TableSetting | boolean>
-            },
-            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>