@dt-frames/ui 1.0.4 → 1.0.7

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

@@ -1,4 +1,4 @@
-import { defineComponent, Slots, toRefs, unref } from "vue";
+import { defineComponent, toRefs, unref } from "vue";
 import { Modal } from 'ant-design-vue';
 import { useAttrs, useSlots } from '@dt-frames/core';
 import { basicProps } from '../props';
@@ -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/components/modalFooter.vue

@@ -23,7 +23,7 @@
     })
 
     const buttonActions: ButtonProps[] = [
-        { name: '保存', preIcon: 'mdi:content-save', type: 'primary', flag: 'OK', show: props.showSave },
+        { name: '保存', preIcon: 'mdi:content-save', type: 'primary', flag: 'OK' },
         { name: '关闭', preIcon: 'mdi:close', flag: 'CANCEL' },
     ]
 

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,12 +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 { basicProps } from '../props'
 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{
@@ -25,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 
@@ -60,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))
@@ -140,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/useFetch.ts

@@ -48,13 +48,12 @@ export function useFetch(api: string | ApiType, baseUrl: string = '') {
                 ...header,
                 ...{ onlyData: false }
             }).then(
-                (data: JsonResult) => {
+                (data: JsonResult) => { 
                     if( afterFetch && isFunction(afterFetch) ) {
                         data = afterFetch( data )
                     }
-                    if( data.status ) {
-                        resolve( data.data )
-                    }
+                    
+                    resolve( data?.data )
                 },
                 (error) => {
                     reject( error )

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

@@ -1,6 +1,6 @@
-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 { 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: []
     })
 
 
@@ -74,7 +78,8 @@ export function useSource(opt: SourceType) {
             pageSize: pagination.pageSize
         }
 
-        baseData.orderDTOs = sort
+        // baseData.orderDTOs = sort.length ?? null
+        baseData.orderDTOs = []
 
         if( needSearch ) search()
     }
@@ -90,7 +95,7 @@ export function useSource(opt: SourceType) {
         ).then( (rsp: any) => {
             const { records, pageDTO } = rsp
            
-            dataSource.value = records
+            dataSource.value.splice(0, dataSource.value.length, ...records)
 
             pagination.value = {
                 current: (pageDTO?.pageNo??0) + 1, 
@@ -111,6 +116,7 @@ export function useSource(opt: SourceType) {
         const { fetch } = useFetch(add, baseUrl)
 
         fetch(model).then( (rsp: any) => {
+            message.success('新增成功')
             search()
         } )
     }
@@ -127,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()
         } )
     }
@@ -170,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/source/src/types/table.type.ts

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

package/src/components/table/index.less

@@ -82,6 +82,11 @@
     }
 }
 
+.dt-table-action-dropdown{
+    vertical-align: middle;
+    cursor: pointer;
+}
+
 .ant-table-fixed-left table, .ant-table-fixed-right table{
     width: min-content;
 }
@@ -115,12 +120,13 @@
     .ant-dropdown-menu-title-content{
         display: flex;
         align-items: center;
+        font-size: 13px;
         svg{
             display: block;
         }
 
         .dt-icon{
-            padding: 0 8px;
+            padding-right: 8px;
         }
     }
 }
@@ -159,4 +165,9 @@
             margin-left: 0;
         }
     }
+
+    .ant-table-thead > tr > th{
+        font-weight: bolder;
+        color: #333;
+    }
 }

package/src/components/table/index.ts

@@ -3,5 +3,5 @@ import DtTable from "./src/index.vue"
 
 export {
     DtTable, 
-    useTable 
+    useTable,
 }

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

@@ -13,7 +13,7 @@
             :getPopupContainer="getPopupContainer"
             :trigger="['click']"
         >
-            <DtIcon :icon-class="'mdi:cog-outline'"></DtIcon>
+            <DtIcon :icon-class="'ic:baseline-settings'" class-name="dt-table-action-dropdown"></DtIcon>
 
             <template #overlay>
                 <Menu class="dt-action-select">
@@ -22,7 +22,7 @@
                             v-if="item.ifShow"
                             @click="handleAction(item)"
                         >
-                            <DtIcon :icon-class="item.icon" :color="item.color"></DtIcon>
+                            <DtIcon :icon-class="item.icon" :color="item.color" :size="16"></DtIcon>
                             <span>{{ item.title }}</span>
                         </MenuItem>
                     </template>

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/Column.vue

@@ -99,11 +99,10 @@
     import { Tooltip, Popover, Checkbox, Button, CheckboxGroup, Divider } from 'ant-design-vue'
     import { getPopupContainer as getParentContainer, isNullAndUnDef } from '@dt-frames/core'
     import { DtIcon } from '../../../../icons/index'
-    import { computed, reactive, ref, unref, watchEffect, useAttrs } from 'vue'
+    import { computed, reactive, ref, unref, watchEffect, useAttrs, nextTick } from 'vue'
     import type { ColumnStateType, ColumnOptionsType } from '../../types/tableHeader.type'
     import { getTableInstance } from '../../hooks/useTableInstance'
     import { BasicColumn } from '../../types/table.type'
-    import { nextTick } from 'process'
     import { isFunction } from '@vueuse/core'
     import { cloneDeep, omit } from 'lodash-es'
 

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/useColumns.ts

@@ -147,7 +147,7 @@ function handleActionColumn(propsRef: ComputedRef<BasicTableProps>, columns: Bas
             title: '操作',
             align: 'center',
             expand,
-            width: (expand ? (column.btns.length * 30 + 40) : 70) + 'px',
+            width: `${ (expand ? (column.btns.length * 30 + 40) : 70) }px`,
             ...column,
             flag: ACTION_COLUMN,
         }
@@ -256,7 +256,7 @@ export function useColumns(
 
 
     // 设置列信息
-    function setColumns(columnList: Partial<BasicColumn>[] | string[]) {
+    function setColumns(columnList: Partial<BasicColumn>[] | string[] = []) {
         const columns = cloneDeep(columnList)
 
         if( !isArray( columns ) ) return

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 {