@dt-frames/ui 1.0.7 → 1.0.10

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

@@ -77,8 +77,8 @@
     display: inline-block;
     vertical-align: middle;
     cursor: pointer;
-    svg{
-        display: flex;
+    i{
+        color: @primary-color;
     }
 }
 

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

@@ -0,0 +1,41 @@
+.dt-tree{
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+
+    .dt-tree-header{
+        .headerTitle{
+            text-align: center;
+            line-height: 32px;
+            font-weight: bolder;
+        }
+
+        .dt-tree-search{
+            display: flex;
+            padding: 0 0 10px 10px;
+            border-bottom: 1px solid #e7e7e7;
+            &>i{
+                width: 24px;
+                display: block;
+                text-align: center;
+                cursor: pointer;
+            }
+            .dt-tree-search-input{
+                flex: 1;
+                input{
+                    font-size: 12px;
+                }
+            }
+        }
+    }
+
+    .ant-spin-nested-loading{
+        flex: 1;
+        overflow-y: auto;
+        padding: 10px 0;
+
+        .tree-title{
+            font-size: 12px;
+        }
+    }
+}

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

@@ -0,0 +1,43 @@
+.dt-upload-wrap{
+    height: 350px;
+    padding: 10px 20px;
+    display: flex;
+    flex-direction: column;
+
+    .ant-table-wrapper{
+        flex: 1;
+        .ant-table-body{
+            border-bottom: 1px solid #e7e7e7;
+        }
+    }
+}
+
+.file-header{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    &>div{
+        display: flex;
+        flex-direction: row;
+        button{
+            margin-right: 10px;
+        }
+    }
+}
+
+.file-type-tips{
+    line-height: 24px;
+    padding: 5px 10px;
+    font-size: 12px;
+    display: flex;
+    margin: 10px 0;
+    border: 1px dashed @primary-color;
+    cursor: inherit;
+    span i{
+        color: @primary-color;
+        margin-right: 7px;
+    }
+    i{
+        color: #666;
+    }
+}

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" | "theme" | "multiple" | "inlineCollapsed" | "disabledOverflow" | "forceSubMenuRender" | "selectable" | "inlineIndent" | "subMenuOpenDelay" | "subMenuCloseDelay" | "triggerSubMenuAction">;
+            }>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "disabled" | "mode" | "multiple" | "selectable" | "inlineCollapsed" | "disabledOverflow" | "forceSubMenuRender" | "theme" | "inlineIndent" | "subMenuOpenDelay" | "subMenuCloseDelay" | "triggerSubMenuAction">;
             $attrs: {
                 [x: string]: unknown;
             };
@@ -742,10 +742,10 @@ declare const _sfc_main: import("vue").DefineComponent<{
 }, {
     type: string;
     mode: MenuMode;
-    theme: import("@dt-frames/core").Theme;
-    isHorizontal: boolean;
     inlineCollapsed: boolean;
+    theme: import("@dt-frames/core").Theme;
     inlineIndent: number;
+    isHorizontal: boolean;
     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" | "forceRender" | "arrow" | "minOverlayWidthMatchTrigger" | "destroyPopupOnHide">;
+            }>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "visible" | "overlayStyle" | "disabled" | "arrow" | "forceRender" | "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" | "theme" | "multiple" | "inlineCollapsed" | "disabledOverflow" | "forceSubMenuRender" | "selectable" | "inlineIndent" | "subMenuOpenDelay" | "subMenuCloseDelay" | "triggerSubMenuAction">;
+            }>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "disabled" | "mode" | "multiple" | "selectable" | "inlineCollapsed" | "disabledOverflow" | "forceSubMenuRender" | "theme" | "inlineIndent" | "subMenuOpenDelay" | "subMenuCloseDelay" | "triggerSubMenuAction">;
             $attrs: {
                 [x: string]: unknown;
             };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@dt-frames/ui",
-	"version": "1.0.7",
+	"version": "1.0.10",
 	"keywords": [
 		"ui",
 		"dt-ui"
@@ -32,6 +32,7 @@
 		"@vueuse/core": "^7.5.2",
 		"lodash-es": "^4.17.21",
 		"sortablejs": "^1.15.0",
+		"spark-md5": "^3.0.2",
 		"vue": "^3.2.25",
 		"vue-router": "^4.0.12",
 		"xlsx": "^0.18.5"

package/src/components/curd/src/hooks/useCurd.tsx

@@ -16,7 +16,7 @@ export function useCurd(curdOpt: CrudOptType) {
                     <DtModal 
                         { ...curdOpt }
                         formsVal = { formsVal }
-                        formProps = { curdOpt.formProps }
+                        formProps = { curdOpt.formProps as any }
                         onRegister = { register }
                     ></DtModal>
                 </div>

package/src/components/forms/src/components/formItem.vue

@@ -2,7 +2,7 @@
     import { defineComponent, PropType, Ref, toRefs, unref, computed } from "vue"
     import { Col, Tooltip, Divider, Form, FormItem } from 'ant-design-vue'
     import { upperFirst, cloneDeep } from 'lodash-es'
-    import { isFunction, isBoolean, isNull, Recordable, useSlots, useAppStore, isString, isArray } from "@dt-frames/core"
+    import { isFunction, isBoolean, isNull, Recordable, useSlots, useAppStore, isString, isArray, error } from "@dt-frames/core"
     import type { ValidationRule } from 'ant-design-vue/lib/form/Form'
 
     import { useLabelWidth } from "../hooks/useLabelWidth"
@@ -377,7 +377,7 @@
              *      3、否则通过属性去动态设置渲染条目
              */
             return () => {
-                const { colSlot, renderCol, colProps } = props.schema
+                const { colSlot, renderCol, colProps, component, render } = props.schema as FormSchema
                 const { colProps: gColProps, mode } = props.formProps as FormProps
 
                 let _colProps = colProps 
@@ -388,6 +388,19 @@
 
                 const values = unref(getValues)
 
+                if( !component ) {
+                    if( !render ) {
+                        error('请配置render函数')
+                        return 
+                    }
+
+                    return ( 
+                        <Col span={24}>
+                            { render() }
+                        </Col>
+                    )
+                }
+
                 const getContent = () => {
                     return colSlot
                         ? getSlot(slots, colSlot, values)

package/src/components/forms/src/hooks/useFormEvents.ts

@@ -1,8 +1,9 @@
-import { dateFormat, deepMerge, isObject, isString, Recordable } from "@dt-frames/core"
+import { deepMerge, isObject, isString, Recordable } from "@dt-frames/core"
 import { ComputedRef, nextTick, Ref, toRaw, unref } from "vue"
 import { uniqBy, cloneDeep } from 'lodash-es'
 import { FormActionType, FormProps, FormSchema } from "../types/form.type"
 import { handleInputNumberValue } from "./helper"
+import dayjs from 'dayjs'
 
 /** =================================
  *  定义表单的事件
@@ -166,7 +167,7 @@ export function useFormEvents({
                     if (Array.isArray(value)) {
                         const arr: any[] = [];
                         for (const ele of value) {
-                            arr.push(ele ? dateFormat(ele) : null);
+                            arr.push(ele ? dayjs(ele) : null);
                         }
                         formModel[key] = arr;
                     } else {
@@ -177,7 +178,7 @@ export function useFormEvents({
                         if (typeof props === 'function') {
                             _props = props({ formModel });
                         }
-                          formModel[key] = value ? (_props?.valueFormat ? value : dateFormat(value)) : null
+                        formModel[key] = value ? (_props?.valueFormat ? value : dayjs(value)) : null
                     }
                 } else {
                     formModel[key] = value

package/src/components/forms/src/hooks/useFormValues.ts

@@ -57,7 +57,7 @@ export function useFormValues({
      * 设置初始化的formModel值
     */
     function initDefault() {
-        const schema = unref( getSchema )
+        const schema = unref( getSchema ).filter(it => it.component )
         const obj: Recordable = {}
 
         schema.forEach( item => {

package/src/components/forms/src/types/form.type.ts

@@ -155,7 +155,7 @@ export type FormProps = {
 // 表单当个元素配置项
 export type FormSchema = {
     // 表单绑定的属性，亦作为name属性，用于后期自动化测试
-    name: string | string[]
+    name?: string | string[]
     // 值发生变化触发的函数名
     changeEvent?: string
     // 绑定v-model的值
@@ -176,7 +176,7 @@ export type FormSchema = {
     // tooltip 配置信息
     toolTipProps?: ToolTipProps
     // 表单控件类型
-    component: ComponentType
+    component?: ComponentType
     // 表单控件参数
     props?: 
         | ((opt: {
@@ -205,7 +205,7 @@ export type FormSchema = {
     show?: boolean | ( ( parms: FormCallBackParams ) => boolean )
 
     // 渲染item
-    render?: (parms: FormCallBackParams) => VNode | VNode[] | string
+    render?: (parms?: FormCallBackParams) => VNode | VNode[] | string
 
     // 渲染col
     renderCol?: (parms: FormCallBackParams) => VNode | VNode[] | string

package/src/components/index.ts

@@ -8,7 +8,8 @@ import { useSource } from './source'
 import { useCurd } from './curd'
 import { export2Excel } from './excel'
 import { DtIframe } from './iframe'
-import { useDialog } from './dialog';
+import { DtUpload, DtUploadModal } from './upload'
+import { DtTree } from './tree'
 
 const dtComponents = [
     { name: 'dt-base-router', component: DtBaseRouter },
@@ -16,6 +17,9 @@ const dtComponents = [
     { name: 'dt-pick-icon', component: DtPickIcon },
     { name: 'dt-modal', component: DtModal },
     { name: 'dt-form', component: DtForm },
+    { name: 'dt-upload', component: DtUpload },
+    { name: 'dt-upload-modal', component: DtUploadModal },
+    { name: 'dt-tree', component: DtTree },
 ];
 
 
@@ -37,12 +41,14 @@ export {
     DtTable,
     FormButtons,
     DtIframe,
+    DtUpload,
+    DtUploadModal,
+    DtTree,
     useForm,
     useTable,
     useSource,
     useCurd,
     useModal,
     useModalOut,
-    export2Excel,
-    useDialog
+    export2Excel
 }

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

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

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

@@ -1,58 +1,29 @@
-import { ApiType } from "../types/source.type";
-import { message } from 'ant-design-vue'
-import { http, isBoolean, isFunction, isString, JsonResult, Recordable } from "@dt-frames/core";
+import { http, isString, JsonResult, Recordable, ApiType } 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()
+        let type, header = { }, model = {}, _api = ''
+        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 ) => {
-            http[type]( `${ baseUrl }${_api}`, handleParams, {
+            http[type || 'post']( api, Object.assign({}, model, params), {
                 ...header,
                 ...{ onlyData: false }
             }).then(
                 (data: JsonResult) => { 
-                    if( afterFetch && isFunction(afterFetch) ) {
-                        data = afterFetch( data )
-                    }
-                    
                     resolve( data?.data )
                 },
                 (error) => {

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

@@ -1,11 +1,11 @@
 import { ref, reactive, toRaw, Ref } from 'vue'
 import { isString, Recordable, useMessage } from "@dt-frames/core"
-import { ApiType, BaseDataType, SourceType } from "../types/source.type"
+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'
+import { useAppStore, ApiType } from '@dt-frames/core'
 
 export function useSource(opt: SourceType) {
     const loading: {
@@ -19,11 +19,22 @@ export function useSource(opt: SourceType) {
 
     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)
-        apiFul[it] = baseUrl + (isString(api[it]) ? api[it] : (api[it] as ApiType).api)
+
+        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)
     }
 
     // 定义分页数据
@@ -48,7 +59,7 @@ export function useSource(opt: SourceType) {
     /**
      * 分页查询
      */
-    function onSearch(model: Recordable) {
+    function onSearch(model: Recordable = {}) {
         baseData.entityDTO = { ...model }
         baseData.pageDTO.pageNo = 0
         loading.onSearch.value = true
@@ -71,15 +82,23 @@ export function useSource(opt: SourceType) {
      * 如果为首次  则为数据初始化 不需要查询
      */
     function onTableChange( params: TableParamsType, needSearch: boolean = true ) {
-        const { pagination, showBtnLoading, sort = [], filter } = params
+        const { pagination, showBtnLoading, sort, filter } = params
 
         baseData.pageDTO = {
             pageNo: pagination.current - 1,
             pageSize: pagination.pageSize
         }
 
-        // baseData.orderDTOs = sort.length ?? null
-        baseData.orderDTOs = []
+        const { field, order } = sort
+
+        if( field ) {
+            baseData.orderDTOs = [{
+                propertyName: field,
+                dir: order === 'ascend' ? 'asc' : 'desc'
+            }]
+        } else {
+            baseData.orderDTOs = []
+        }
 
         if( needSearch ) search()
     }
@@ -176,8 +195,8 @@ export function useSource(opt: SourceType) {
     }
 
     return {
-        api,
-        apiFul,
+        api: apiFul,
+        apiPath,
         form,
         table,
         curd,
@@ -188,6 +207,7 @@ export function useSource(opt: SourceType) {
         onUpdate,
         onTableChange,
         onDownload,
-        onSearch
+        onSearch,
+        
     }
 }

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

@@ -1,4 +1,4 @@
-import { Recordable } from "@dt-frames/core"
+import { Recordable, ApiType } from "@dt-frames/core"
 
 export type PageQueryType = {
     entityDTO: Recordable,
@@ -10,26 +10,6 @@ export type PageQueryType = {
     }
 }
 
-export type ApiType = {
-    // api接口
-    api: string
-
-    // 请求类型
-    type?: 'get' | 'post' | 'put' | 'delete',
-
-    // 请求头信息
-    header?: any
-
-    // 默认的基础数据
-    model?: Recordable
-
-    // 请求之前
-    beforeFetch?: <T = any>( params: T ) => T
-
-    // 请求之后
-    afterFetch?: <T = any>( data: any)  => T
-}
-
 
 export type ApiObjType = {
     // 新增

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

@@ -77,8 +77,8 @@
     display: inline-block;
     vertical-align: middle;
     cursor: pointer;
-    svg{
-        display: flex;
+    i{
+        color: @primary-color;
     }
 }
 

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

@@ -1,11 +1,9 @@
 <script lang="tsx">
     import { getDictValueByCode, isFunction, isObject, Recordable, formatNumber, isVnode } from '@dt-frames/core'
     import dayjs from 'dayjs'
-    import { defineComponent, PropType, unref, ref, h, toRaw, render as render1, resolveComponent, resolveDynamicComponent, createVNode } from 'vue'
+    import { defineComponent, PropType, unref, ref, render as render1, createVNode, computed } from 'vue'
     import { BasicColumn } from '../types/table.type'
 
-    import { Switch } from 'ant-design-vue'
-
     export default defineComponent({
         name: 'TableFormat',
         props: {

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

@@ -24,19 +24,6 @@ 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) => {

package/src/components/tree/index.less

@@ -0,0 +1,41 @@
+.dt-tree{
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+
+    .dt-tree-header{
+        .headerTitle{
+            text-align: center;
+            line-height: 32px;
+            font-weight: bolder;
+        }
+
+        .dt-tree-search{
+            display: flex;
+            padding: 0 0 10px 10px;
+            border-bottom: 1px solid #e7e7e7;
+            &>i{
+                width: 24px;
+                display: block;
+                text-align: center;
+                cursor: pointer;
+            }
+            .dt-tree-search-input{
+                flex: 1;
+                input{
+                    font-size: 12px;
+                }
+            }
+        }
+    }
+
+    .ant-spin-nested-loading{
+        flex: 1;
+        overflow-y: auto;
+        padding: 10px 0;
+
+        .tree-title{
+            font-size: 12px;
+        }
+    }
+}

package/src/components/tree/index.ts

@@ -0,0 +1,5 @@
+import DtTree from './src/index.vue'
+
+export {
+    DtTree
+}