@dt-frames/ui 1.0.0 → 1.0.1

package/src/components/modal/src/index.vue

@@ -1,173 +0,0 @@
-<template>
-    <Modal v-bind="getBindValue" @cancel="handleCancel">
-        <template #closeIcon v-if="!$slots.closeIcon">
-            <CloseIcon 
-                :canFullscreen="getBindValue.canFullscreen"
-                :fullScreen="fullScreenRef"
-                @cancel="handleCancel"
-                @fullscreen="toggleFullScreen"
-            />
-        </template>
-
-        <template #title v-if="!$slots.title">
-            {{ getMergeProps.title }}
-        </template>
-
-        <template #footer v-if="!$slots.footer">
-            <!-- 默认的footer内容 -->
-            <ModalFooter :showSave="getBindValue.showSave" @handle-save="handleSave" @handle-cancel="handleCancel">
-                <template #[item]="data" v-for="item in Object.keys($slots)">
-                    <slot :name="item" v-bind="data || {}"></slot>
-                </template>
-            </ModalFooter>
-        </template>
-
-        <ModalWrapper
-            :useWrapper="getBindValue.useWrapper"
-            :footerOffset="wrapperFooterOffset"
-            :fullScreen="fullScreenRef"
-            ref="modalWrapperRef"
-            :loading="getBindValue.loading"
-            :loading-tip="getBindValue.loadingTip"
-            :minHeight="getBindValue.minHeight"
-            :height="getWrapperHeight"
-            :visible="visibleRef"
-            :modalFooterHeight="footer !== undefined && !footer ? 0 : undefined"
-            v-bind="omit(getBindValue.wrapperProps, 'visible', 'height', 'modalFooterHeight')"
-            @ext-height="handleExtHeight"
-            @height-change="handleHeightChange"
-        >
-            <slot></slot>
-        </ModalWrapper>
-
-        <template #[item]="data" v-for="item in Object.keys(omit($slots, 'default'))">
-            <slot :name="item" v-bind="data || {}"></slot>
-        </template>
-    </Modal>
-</template>
-
-<script lang="ts" setup>
-    import { computed, unref, ref, watch, getCurrentInstance, nextTick } from 'vue';
-    import Modal from './components/modal';
-    import { omit } from 'lodash-es';
-    import { useFullScreen } from './hooks/useFullScreen';
-    import { basicProps } from './props';
-    import ModalWrapper from './components/modal-wrap.vue';
-    import ModalFooter from './components/modalFooter.vue'
-
-    import CloseIcon from './components/close-icon.vue';
-    import { isFunction, deepMerge, ModalProps, ModalMethods } from '@dt-frames/core';
-    
-    const visibleRef = ref(false);
-    const propsRef = ref<Partial<ModalProps>>();
-    const modalWrapperRef = ref(null);
-    const extHeightRef = ref(0);
-
-    const props = defineProps( basicProps );
-    const emits = defineEmits(['visible-change', 'height-change', 'cancel', 'save', 'register', 'update:visible'])
-
-
-    const modalMethods: ModalMethods = {
-        setModalProps,
-        emitVisible: undefined,
-        redoModalHeight: () => {
-          nextTick(() => {
-            if (unref(modalWrapperRef)) {
-              (unref(modalWrapperRef) as any).setModalHeight();
-            }
-          });
-        },
-    }
-
-    const { getWrapClassName, toggleFullScreen, fullScreenRef } = useFullScreen({
-        wrapClassName: computed(() => props.wrapClassName),
-        extHeightRef,
-        modalWrapperRef
-    });
-
-    const getMergeProps = computed(() => {
-        return {
-            ...props,
-            ...(unref(propsRef) as any)
-        }
-    })
-
-    const getBindValue = computed(() => {
-        const bindValue = {
-            ...unref(getMergeProps),
-            ...(unref(propsRef) as any),
-            visible: unref(visibleRef),
-            wrapClassName: unref(getWrapClassName),
-        }
-        
-        return omit(bindValue, unref(fullScreenRef) ? ['height', 'title'] : 'title');
-    });
-
-    const getWrapperHeight = computed(() => {
-        if (unref(fullScreenRef)) return undefined;
-        return unref(getBindValue).height;
-    });
-
-    const instance = getCurrentInstance();
-    if (instance) { emits('register', modalMethods, instance.uid); }
-
-    watch(() => unref(visibleRef), (v) => {
-        emits('visible-change', v);
-        emits('update:visible', v);
-        instance && modalMethods.emitVisible?.(v, instance.uid);
-        nextTick(() => {
-            if (props.scrollTop && v && unref(modalWrapperRef)) {
-                (unref(modalWrapperRef).$el as any).scrollTop = 0;
-            }
-        });
-    },{
-        immediate: false,
-    })
-
-    function handleHeightChange(height: string) {
-        emits('height-change', height);
-    }
-
-    function handleExtHeight(height: number) {
-        extHeightRef.value = height;
-    }
-
-
-    function setModalProps(props: Partial<ModalProps>) {
-
-        propsRef.value = deepMerge(unref(propsRef) || ({} as any), props);
-
-        if (Reflect.has(props, 'visible')) {
-            visibleRef.value = !!props.visible;
-        }
-        if (Reflect.has(props, 'defaultFullscreen')) {
-            fullScreenRef.value = !!props.defaultFullscreen;
-        }
-    }
-
-    // 弹框保存
-    function handleSave() {
-        emits('save')
-        handleCancel()
-    }
-
-    // 弹框关闭
-    async function handleCancel(e: Event = null) {
-        if( e ) {
-            e?.stopPropagation();
-
-            // 过滤自定义关闭按钮的空白区域
-            if ((e.target as HTMLElement)?.classList?.contains('dt-basic-modal-close--custom')) return;
-
-            if (props.closeFunc && isFunction(props.closeFunc)) {
-                const isClose: boolean = await props.closeFunc();
-                visibleRef.value = !isClose;
-                return;
-            }
-        }
-
-        visibleRef.value = false;
-
-        emits('cancel', e)
-    }
-</script>

package/src/components/modal/src/props.ts

@@ -1,43 +0,0 @@
-import { CSSProperties, PropType, VNodeChild } from "vue";
-
-// 支持设置的属性
-const modalProps = {
-    visible     : { type: Boolean },
-    scrollTop   : { type: Boolean, default: true },
-    height      : { type: Number },
-    minHeight   : { type: Number },
-    draggable   : { type: Boolean, default: true },
-    closeFunc   : Function
-};
-
-export const basicProps = Object.assign({}, modalProps, {
-    defaultFullscreen   : { type: Boolean },
-    canFullscreen       : { type: Boolean, default: true },
-    wrapperFooterOffset : { type: Number, default: 0 },
-    useWrapper          : { type: Boolean, default: true },
-    loading             : { type: Boolean },
-    loadingTip          : { type: String },
-    closable            : { type: Boolean, default: true },
-    destroyOnClose      : { type: Boolean },
-    title               : { type: String },
-    visible             : { type: Boolean },
-    width               : { type: String as PropType<Number | String> },
-    wrapClassName       : { type: String },
-    zIndex              : { type: Number },
-    centered            : { type: Boolean },
-    showSave            : { type: Boolean },
-
-    // 掩膜
-    mask                : { type: Boolean, default: true },
-    maskClosable        : { type: Boolean, default: true },
-    keyboard            : { type: Boolean, default: true },
-    maskStyle           : Object as PropType<CSSProperties>,
-
-    footer              : Object as PropType<VNodeChild | JSX.Element>,
-    
-    bodyStyle           : Object as PropType<CSSProperties>,
-
-    wrapperProps        : Object,
-    afterClose          : Function,
-    getContainer        : Function as PropType<() => any>
-})

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

@@ -1,27 +0,0 @@
-import { ModalProps } from "@dt-frames/core"
-import { ComputedRef } from "vue"
-
-export type ModalMethods = {
-    setModalProps: ( props: Partial<ModalProps> ) => void
-    emitVisible?: ( visable: boolean, uid: number ) => void
-    redoModalHeight?: () => void
-}
-
-export interface ReturnMethods extends ModalMethods{
-    openModal: <T = any>(props?: boolean, data?: T, openOnSet?: boolean) => void
-    closeModal: () => void
-    getVisible?: ComputedRef<boolean>
-}
-
-export interface ReturnInnerMethods extends ModalMethods {
-    openModal: <T = any>(props?: boolean, data?: T, openOnSet?: boolean) => void
-    closeModal: () => void
-    changeLoading: (loading: boolean) => void
-    getVisible?: ComputedRef<boolean>
-    redoModalHeight: () => void
-}
-
-export type RegisterFn = (modalMethods: ModalMethods, uuid?: string) => void
-
-export type UseModalReturnType = [RegisterFn, ReturnMethods]
-export type UseModalInnerReturnType = [RegisterFn, ReturnInnerMethods];

package/src/components/router/base-router.vue

@@ -1,11 +0,0 @@
-<template>
-    <router-view></router-view>
-</template>
-
-<script lang="ts">
-    import { defineComponent } from 'vue'
-
-    export default defineComponent({
-        name: 'dt-base-router'
-    })
-</script>

package/src/components/router/index.ts

@@ -1,3 +0,0 @@
-import DtBaseRouter from './base-router.vue'
-
-export { DtBaseRouter }

package/src/components/source/index.ts

@@ -1 +0,0 @@
-export * from './src/index'

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

@@ -1,70 +0,0 @@
-import { ApiType } from "../types/source.type";
-import { message } from 'ant-design-vue'
-import { http, isBoolean, isFunction, isString, JsonResult, Recordable } from "@dt-frames/core";
-
-export function useFetch(api: string | ApiType, baseUrl: string = '') {
-    
-    const getApiObj= () => {
-        if( isString(api) ) {
-            return { api }
-        }
-
-        return { ...api }
-    }
-
-    /**
-     * 是否可以向服务器发送请求
-     * 如果beforeFetch返回的是false, 则停止请求
-     * */ 
-    const getParams = (params: Recordable = { }) => {
-        const { model, beforeFetch } = getApiObj()
-
-        if( !api ) {
-            message.error('请求的url不能为空')
-            return false
-        }
-
-        return beforeFetch && isFunction( beforeFetch ) 
-            ? beforeFetch( Object.assign({}, model, params) )
-            : params
-    }
-
-
-
-    /**
-     * 发送请求
-     * handleParams 记录返回的值
-     */
-    function fetch(params: Recordable = { }) {
-        const handleParams = getParams( params )
-
-        if( isBoolean( handleParams ) && handleParams === false)
-            return Promise.resolve()
-
-        const { api: _api, type = 'post', header = { }, afterFetch } = getApiObj()
-
-        return new Promise(( resolve, reject ) => {
-            http[type]( `${ baseUrl }${_api}`, handleParams, {
-                ...header,
-                ...{ onlyData: false }
-            }).then(
-                (data: JsonResult) => {
-                    if( afterFetch && isFunction(afterFetch) ) {
-                        data = afterFetch( data )
-                    }
-                    if( data.status ) {
-                        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,178 +0,0 @@
-import { computed, ref, reactive, toRaw, Ref } from 'vue'
-import { http, isFunction, 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
-
-        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 = 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

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

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

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

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

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