@dt-frames/ui 1.0.1 → 1.0.4

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

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

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

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

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

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

package/src/components/source/index.ts

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

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

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

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

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

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

@@ -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
+}