@dt-frames/ui 1.0.6 → 1.0.7

package/es/style/components/icons/index.less

@@ -75,7 +75,7 @@
                 padding: 4px;
                 transform: all 0.2s;
                 border: 1px solid #fff;
-                &:hover{
+                &:hover, &.active-icon{
                     border: 1px solid @primary-color;
                     border-radius: 4px;
                     color: @primary-color;
@@ -94,4 +94,8 @@
         background: #fff !important;
         color: @icon-pick-hover-color ;
     }
+}
+
+.dt-icon-dialog > div{
+    top: 0 !important;
 }

package/es/theme/sider/components/basic-menu/basic-menu.d.ts

@@ -125,7 +125,7 @@ declare const _sfc_main: import("vue").DefineComponent<{
                 'onUpdate:openKeys': import("vue").PropType<(keys: import("ant-design-vue/lib/_util/type").Key[]) => void>;
                 'onUpdate:selectedKeys': import("vue").PropType<(keys: import("ant-design-vue/lib/_util/type").Key[]) => void>;
                 'onUpdate:activeKey': import("vue").PropType<(key: import("ant-design-vue/lib/_util/type").Key) => void>;
-            }>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "disabled" | "mode" | "inlineCollapsed" | "disabledOverflow" | "forceSubMenuRender" | "selectable" | "multiple" | "theme" | "inlineIndent" | "subMenuOpenDelay" | "subMenuCloseDelay" | "triggerSubMenuAction">;
+            }>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "disabled" | "mode" | "theme" | "multiple" | "inlineCollapsed" | "disabledOverflow" | "forceSubMenuRender" | "selectable" | "inlineIndent" | "subMenuOpenDelay" | "subMenuCloseDelay" | "triggerSubMenuAction">;
             $attrs: {
                 [x: string]: unknown;
             };
@@ -742,10 +742,10 @@ declare const _sfc_main: import("vue").DefineComponent<{
 }, {
     type: string;
     mode: MenuMode;
-    inlineCollapsed: boolean;
     theme: import("@dt-frames/core").Theme;
-    inlineIndent: number;
     isHorizontal: boolean;
+    inlineCollapsed: boolean;
+    inlineIndent: number;
     collapsedShowTitle: boolean;
     mixSider: boolean;
 }>;

package/es/theme/tabs/components/TabContent.d.ts

@@ -64,7 +64,7 @@ declare const _sfc_main: import("vue").DefineComponent<{}, {
                 'onUpdate:visible': {
                     type: import("vue").PropType<(val: boolean) => void>;
                 };
-            }>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "visible" | "overlayStyle" | "disabled" | "arrow" | "forceRender" | "minOverlayWidthMatchTrigger" | "destroyPopupOnHide">;
+            }>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "visible" | "overlayStyle" | "disabled" | "forceRender" | "arrow" | "minOverlayWidthMatchTrigger" | "destroyPopupOnHide">;
             $attrs: {
                 [x: string]: unknown;
             };
@@ -501,7 +501,7 @@ declare const _sfc_main: import("vue").DefineComponent<{}, {
                 'onUpdate:openKeys': import("vue").PropType<(keys: import("ant-design-vue/lib/_util/type").Key[]) => void>;
                 'onUpdate:selectedKeys': import("vue").PropType<(keys: import("ant-design-vue/lib/_util/type").Key[]) => void>;
                 'onUpdate:activeKey': import("vue").PropType<(key: import("ant-design-vue/lib/_util/type").Key) => void>;
-            }>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "disabled" | "mode" | "inlineCollapsed" | "disabledOverflow" | "forceSubMenuRender" | "selectable" | "multiple" | "theme" | "inlineIndent" | "subMenuOpenDelay" | "subMenuCloseDelay" | "triggerSubMenuAction">;
+            }>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "disabled" | "mode" | "theme" | "multiple" | "inlineCollapsed" | "disabledOverflow" | "forceSubMenuRender" | "selectable" | "inlineIndent" | "subMenuOpenDelay" | "subMenuCloseDelay" | "triggerSubMenuAction">;
             $attrs: {
                 [x: string]: unknown;
             };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@dt-frames/ui",
-	"version": "1.0.6",
+	"version": "1.0.7",
 	"keywords": [
 		"ui",
 		"dt-ui"
@@ -42,8 +42,8 @@
 	},
 	"devDependencies": {
 		"@iconify/json": "^1.1.460",
-		"@vitejs/plugin-vue": "^2.0.0",
-		"vite": "^2.7.2",
+		"@vitejs/plugin-vue": "^2.2.0",
+		"vite": "^2.8.0",
 		"vite-plugin-purge-icons": "^0.7.0",
 		"vite-plugin-theme": "^0.8.6"
 	}

package/src/components/forms/src/components/formIcon.vue

@@ -31,7 +31,8 @@
         title: '选择字体图标',
         width: '70%',
         showSave: false,
-        centered: true
+        centered: true,
+        wrapClassName: 'dt-icon-dialog',
     })
 
     const props = defineProps({
@@ -44,7 +45,7 @@
     function chooseIcon(icon) {
         setState(icon)
 
-        closeModal()
+        closeModal(icon)
     }
 
 </script>

package/src/components/forms/src/index.vue

@@ -223,21 +223,25 @@
                 (schemas) => resetSchema(schemas ?? [])
             )
 
+            watch(
+                () => unref(getProps).onSearch,
+                () => {
+                    useTimeoutFn(() => {
+                        // 如果有onSearch默认查询
+                        const { onSearch, autoFetch } = unref(getProps)
+
+                        if( autoFetch && onSearch && isFunction(onSearch) ) {
+                            onSearch(toRaw(defaultValue.value))
+                        }  
+                    }, 1)
+                }
+            )
+
             onMounted(() => {
                 // 每次加载 进行重置
                 setFormValues( null )
                 emit('register', formActionMethods)
                 initDefault()
-
-                // 为了保证table的数据能够成功传入useSource中，这里需要延迟执行search
-                useTimeoutFn(() => {
-                    // 如果有onSearch默认查询
-                    const { onSearch, autoFetch } = unref(getProps)
-
-                    if( autoFetch && onSearch && isFunction(onSearch) ) {
-                        onSearch(toRaw(defaultValue.value))
-                    }  
-                }, 20)
             })
 
             const getActionsProps = computed((): Recordable => {

package/src/components/icons/index.less

@@ -75,7 +75,7 @@
                 padding: 4px;
                 transform: all 0.2s;
                 border: 1px solid #fff;
-                &:hover{
+                &:hover, &.active-icon{
                     border: 1px solid @primary-color;
                     border-radius: 4px;
                     color: @primary-color;
@@ -94,4 +94,8 @@
         background: #fff !important;
         color: @icon-pick-hover-color ;
     }
+}
+
+.dt-icon-dialog > div{
+    top: 0 !important;
 }

package/src/components/icons/src/pick-icon.vue

@@ -23,7 +23,7 @@
                     ></InputSearch>
 
                     <template v-for="icon in currentIcons" :key="icon">
-                        <a @click="selectIcon(icon)">
+                        <a @click="selectIcon(icon)" :class="activeIcon === icon && 'active-icon'">
                             <Tooltip 
                                 placement="bottom"
                                 overlayClassName="dt-pick-icon-item">
@@ -56,6 +56,7 @@
     const activeIndex = ref(1)
     const filter = ref(null)
     const currentIcons = ref([])
+    const activeIcon = ref(null)
 
 
     const iconMenus = computed(() => {
@@ -110,6 +111,7 @@
     }
 
     function selectIcon(icon) {
+        activeIcon.value = icon
         emits('chooseIcon', icon)
     }
    

package/src/components/modal/src/components/modal-wrap.vue

@@ -44,8 +44,7 @@
         emits('ext-height', modalHeaderHeight + modalFooterHeight);
     });
 
-    async function setModalHeight() {
-        if (!props.visible) return;
+    async function getModalDom() {
         const wrapperRefDom = unref(wrapperRef);
         if (!wrapperRefDom) return;
 
@@ -54,45 +53,56 @@
         bodyDom.style.padding = '0';
         await nextTick();
 
+        const modalDom = bodyDom.parentElement && bodyDom.parentElement.parentElement;
+
+        return modalDom
+    }
+
+    async function setModalHeight() {
+        if (!props.visible) return;
+
         try {
-          const modalDom = bodyDom.parentElement && bodyDom.parentElement.parentElement;
-          if (!modalDom) return;
-
-          const modalRect = getComputedStyle(modalDom as Element).top;
-          const modalTop = Number.parseInt(modalRect);
-
-          let maxHeight =
-            window.innerHeight -
-            modalTop * 2 +
-            (props.footerOffset! || 0) -
-            props.modalFooterHeight -
-            props.modalHeaderHeight;
-
-          // 距离顶部过进会出现滚动条
-          if (modalTop < 40) {
-            maxHeight -= 26;
-          }
-          await nextTick();
-          const spinEl = unref(spinRef);
-
-          if (!spinEl) return;
-          await nextTick();
-          realHeight = spinEl.scrollHeight;
-
-          if (props.fullScreen) {
-              console.log(props.modalFooterHeight,props.modalHeaderHeight)
-            realHeightRef.value =
-              window.innerHeight - props.modalFooterHeight - props.modalHeaderHeight;
-          } else {
-            realHeightRef.value = props.height
-              ? props.height
-              : realHeight > maxHeight
-              ? maxHeight
-              : realHeight;
-          }
-          emits('height-change', unref(realHeightRef));
+            const modalDom = await getModalDom()
+            if (!modalDom) return;
+
+            const modalRect = getComputedStyle(modalDom as Element).top;
+            const modalTop = Number.parseInt(modalRect);
+
+            let maxHeight =
+                window.innerHeight -
+                (props.footerOffset! || 0) -
+                props.modalFooterHeight -
+                props.modalHeaderHeight
+                - 100;
+
+            // 距离顶部过进会出现滚动条
+            if (modalTop < 40) {
+                maxHeight -= 26;
+            }
+            await nextTick();
+            const spinEl = unref(spinRef);
+
+            if (!spinEl) return;
+            await nextTick();
+            realHeight = spinEl.scrollHeight;
+
+            if (props.fullScreen) {
+                realHeightRef.value =
+                window.innerHeight - props.modalFooterHeight - props.modalHeaderHeight;
+            } else {
+                realHeightRef.value = props.height
+                ? props.height
+                : realHeight > maxHeight
+                ? maxHeight
+                : realHeight;
+            }
+            emits('height-change', unref(realHeightRef));
+
+            const _modalDom = await getModalDom()
+            _modalDom.style.top = (window.innerHeight - _modalDom.offsetHeight) / 2 + 'px'
+
         } catch (error) {
-          console.log(error);
+            console.log(error);
         }
 
     }

package/src/components/modal/src/components/modal.tsx

@@ -23,7 +23,7 @@ export default defineComponent({
         const { extendSlots } = useSlots();
 
         return () => {
-            const propsData = { ...unref(attrs), ...props } as any;
+            const propsData = { ...unref(attrs), ...props, destroyOnClose: true } as any;
             return <Modal {...propsData}>{extendSlots(slots as any)}</Modal>;
         };
     }

package/src/components/modal/src/hooks/useFullScreen.ts

@@ -1,4 +1,5 @@
-import { ref, Ref, unref, computed } from "vue";
+import { ref, Ref, unref, computed } from "vue"
+import { dispatchResize } from '@dt-frames/core'
 
 interface FullScreenOptions{
     wrapClassName: Ref<string | undefined>;
@@ -17,6 +18,7 @@ export function useFullScreen(options: FullScreenOptions) {
     function toggleFullScreen(e: Event) {
         e && e.stopPropagation();
         fullScreenRef.value = !unref(fullScreenRef);
+        dispatchResize()
     }
 
     return {

package/src/components/modal/src/hooks/useModal.ts

@@ -1,11 +1,12 @@
-import { error, isFunction, Nullable } from "@dt-frames/core";
+import { error, isFunction, Nullable, Recordable } from "@dt-frames/core";
 import { ModalProps } from "@dt-frames/core"
 import { isEqual } from 'lodash-es'
 import { tryOnUnmounted } from '@vueuse/core'
 import { ModalMethods, ReturnInnerMethods, ReturnMethods, UseModalInnerReturnType, UseModalReturnType } from '../types/modal.type';
-import { computed, ExtractPropTypes, getCurrentInstance, nextTick, onUnmounted, reactive, ref, toRaw, unref, watch, watchEffect } from "vue";
+import { computed, getCurrentInstance, nextTick, onUnmounted, reactive, ref, toRaw, unref, watch, watchEffect } from "vue";
 
 const dataTransfer = reactive<any>({})
+const cbTransfer = reactive<any>({})
 const visibleData = reactive<{ [key: number]: boolean }>({})
 
 export function useModalOut(): UseModalReturnType{
@@ -24,6 +25,7 @@ export function useModalOut(): UseModalReturnType{
             modal.value = null
             loaded.value = false
             dataTransfer[unref(uid)] = null
+            cbTransfer[unref(uid)] = (rsp?: Recordable) => { }
         })
 
         if( unref(loaded) && modalMethod === unref(modal) ) return 
@@ -59,18 +61,28 @@ export function useModalOut(): UseModalReturnType{
             getInstance()?.redoModalHeight?.()
         },
 
-        openModal: <T = any>(visable = true, data?: T, openOnSet = true) => {
+        openModal: (params?: Recordable, openOnSet = true) => {
             getInstance()?.setModalProps({
-                visible: visable
+                visible: true
             })
 
-            if( !data ) return
+            const { data, afterClose } = params || {}
 
             const id = unref(uid)
 
+            // 设置回调
+            cbTransfer[unref(uid)] = (rsp?: Recordable) => {
+                if( afterClose && isFunction(afterClose)) {
+                    afterClose(rsp)
+                }
+            }
+
+            if( !data ) return
+
             if( openOnSet ) {
                 dataTransfer[id] = toRaw(data);
-                return;
+
+                return
             }
 
             const equal = isEqual(toRaw(dataTransfer[id]), toRaw(data))
@@ -139,8 +151,12 @@ export function useModal(props?: Partial<ModalProps>,callbackFn?: Function): Use
         changeLoading: (loading = true) => {
             getInstance()?.setModalProps({ loading })
         },
+
         getVisible: computed(() => visibleData[~~unref(uidRef)]),
-        closeModal: () => {
+
+        // 关闭弹框进行回调
+        closeModal: (rsp: Recordable) => {
+            cbTransfer[unref(uidRef)](rsp)
             getInstance()?.setModalProps({ visible: false });
         },
         openModal: <T = any>(visable = true, data?: T, openOnSet = true) => {

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

@@ -80,7 +80,7 @@
     }
 
     const { getWrapClassName, toggleFullScreen, fullScreenRef } = useFullScreen({
-        wrapClassName: computed(() => props.wrapClassName),
+        wrapClassName: computed(() => (unref(propsRef) as any).wrapClassName),
         extHeightRef,
         modalWrapperRef
     });

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

@@ -1,4 +1,4 @@
-import { ModalProps } from "@dt-frames/core"
+import { ModalProps, Recordable } from "@dt-frames/core"
 import { ComputedRef } from "vue"
 
 export type ModalMethods = {
@@ -8,14 +8,14 @@ export type ModalMethods = {
 }
 
 export interface ReturnMethods extends ModalMethods{
-    openModal: <T = any>(props?: boolean, data?: T, openOnSet?: boolean) => void
+    openModal: <T = any>(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
+    closeModal: (rsp: Recordable) => void
     changeLoading: (loading: boolean) => void
     getVisible?: ComputedRef<boolean>
     redoModalHeight: () => void

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

@@ -1,6 +1,6 @@
-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 { ref, reactive, toRaw, Ref } from 'vue'
+import { isString, Recordable, useMessage } from "@dt-frames/core"
+import { ApiType, BaseDataType, SourceType } from "../types/source.type"
 import { useFetch } from './useFetch'
 import { TableParamsType } from '../types/table.type'
 import { DownloadType } from '../../../table/src/types/tableHeader.type'
@@ -17,9 +17,13 @@ export function useSource(opt: SourceType) {
     const { baseUrl = '', api = {}, exportName = '' } = opt
     const { add, deletes, update, queryById, queryPage } = api
 
+    const { message } = useMessage()
+    const apiFul: 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)
     }
 
     // 定义分页数据
@@ -37,7 +41,7 @@ export function useSource(opt: SourceType) {
             pageNo: 0,
             pageSize: 10
         },
-        orderDTOs: {}
+        orderDTOs: []
     })
 
 
@@ -112,6 +116,7 @@ export function useSource(opt: SourceType) {
         const { fetch } = useFetch(add, baseUrl)
 
         fetch(model).then( (rsp: any) => {
+            message.success('新增成功')
             search()
         } )
     }
@@ -128,6 +133,7 @@ export function useSource(opt: SourceType) {
     function onUpdate(model: Recordable) {
         const { fetch } = useFetch(update, baseUrl)
         fetch(model).then( (rsp: any) => {
+            message.success('更新数据成功')
             search()
         } )
     }
@@ -171,9 +177,17 @@ export function useSource(opt: SourceType) {
 
     return {
         api,
+        apiFul,
         form,
         table,
         curd,
+        loading,
+        onAdd,
+        onQueryById,
+        onDeletes,
+        onUpdate,
+        onTableChange,
+        onDownload,
         onSearch
     }
 }

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

@@ -1,5 +1,15 @@
 import { Recordable } from "@dt-frames/core"
 
+export type PageQueryType = {
+    entityDTO: Recordable,
+    orderDTOs: Recordable[],
+    pageDTO: {
+        pageNo: number
+        pageSize: number
+        [key: string]: any
+    }
+}
+
 export type ApiType = {
     // api接口
     api: string
@@ -14,7 +24,7 @@ export type ApiType = {
     model?: Recordable
 
     // 请求之前
-    beforeFetch?: ( params: Recordable ) => boolean
+    beforeFetch?: <T = any>( params: T ) => T
 
     // 请求之后
     afterFetch?: <T = any>( data: any)  => T

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

@@ -11,6 +11,7 @@
 
             <div class="dt-table-header-actions__right">
                 <TableSettinCom
+                    :setting="tableTools"
                     @columns-change="handleColumnChange"
                 ></TableSettinCom>
             </div>

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

@@ -4,6 +4,8 @@
     import { defineComponent, PropType, unref, ref, h, toRaw, render as render1, resolveComponent, resolveDynamicComponent, createVNode } from 'vue'
     import { BasicColumn } from '../types/table.type'
 
+    import { Switch } from 'ant-design-vue'
+
     export default defineComponent({
         name: 'TableFormat',
         props: {
@@ -28,10 +30,6 @@
                 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
@@ -53,7 +51,7 @@
                     }
 
                     if( isVnode(render) ) {
-                        renderText.value = render
+                        renderText.value = ( <> { render } </> )
                     }
 
                     if( render['setup'] ) {
@@ -62,9 +60,13 @@
 
                     
                 } else {
-                    console.log(text)
                     renderText.value = text
                 }
+
+                if( isFunction(render) ) {
+                    let afterRenderData = render(record, index, text)
+                    renderText.value = isVnode(afterRenderData) ? ( <>{ afterRenderData }</> ) : afterRenderData
+                }
             }
 
             renderCell()

package/src/components/table/src/components/setting/Fullscreen.vue

@@ -30,7 +30,7 @@
                 if( !el || !el.parentNode ) return null
                 
                 // 找到路由的下一层 进行全屏
-                if(el.parentNode.className.indexOf('dt-layout-content') !== -1) {
+                if(el.parentNode.className?.indexOf('dt-layout-content') !== -1) {
                     wrapEl.value = el.parentNode
                 } else {
                     getParent( el.parentNode )

package/src/components/table/src/components/setting/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <Download></Download>
+    <Download v-if="getSetting.download"></Download>
     <SizeSetting v-if="getSetting.size" />
     <ColumnSetting
         v-if="getSetting.setting"
@@ -43,7 +43,7 @@
         setup(props, { emit }) {
             const getSetting = computed((): TableSetting => {
                 return {
-                    redo: true,
+                    download: true,
                     size: true,
                     setting: true,
                     fullscreen: true,

package/src/components/table/src/hooks/useDataSource.ts

@@ -24,6 +24,19 @@ 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) => {
@@ -75,20 +88,18 @@ export function useDataSource(
     }
 
 
-    onMounted(() => {
-        const { defSort, onTableChange } = unref( propsRef )
-        const { appConf } = useAppStore()
+    const { defSort, onTableChange } = unref( propsRef )
+    const { appConf } = useAppStore()
 
-        onTableChange({
-            pagination: {
-                current: 1,
-                pageSize: appConf.ui.table.defaultPageSize
-            },
-            sort:defSort,
-            filter: null,
-            showBtnLoading: false
-        }, false)
-    })
+    onTableChange({
+        pagination: {
+            current: 1,
+            pageSize: appConf.ui.table.defaultPageSize
+        },
+        sort:defSort,
+        filter: null,
+        showBtnLoading: false
+    }, false)
 
 
     return {