@dt-frames/ui 1.0.9 → 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.9",
+	"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

@@ -8,16 +8,18 @@ export function useFetch(api: string | ApiType, baseUrl: string = '') {
     function fetch(params: Recordable = { }) {
         let type, header = { }, model = {}, _api = ''
         if(isString( api )) {
-            _api = baseUrl + api
+            api = baseUrl + api
         } else {
             type = api.type
-            _api = baseUrl + api.api
+            if( api.api.indexOf(baseUrl) === -1 ) {
+                api.api = `${baseUrl}${api.api}`
+            }
             header = api.header
             model = api.model
         }
 
         return new Promise(( resolve, reject ) => {
-            http[type || 'post']( _api, Object.assign({}, model, params), {
+            http[type || 'post']( api, Object.assign({}, model, params), {
                 ...header,
                 ...{ onlyData: false }
             }).then(

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

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

package/src/components/tree/src/components/TreeHeader.vue

@@ -0,0 +1,97 @@
+<template>
+    <div class="dt-tree-header">
+        <slot name="headerTitle" v-if="slots.headerTitle"></slot>
+
+        <h4 v-if="!slots.headerTitle && title" class="headerTitle">{{ title }}</h4>
+
+        <div v-if="search || toolbar" class="dt-tree-search">
+            <div class="dt-tree-search-input" v-if="search">
+                <InputSearch size="small" allowClear v-model:value="searchValue" placeholder="搜索"/>
+            </div>
+
+            <Dropdown @click.prevent v-if="toolbar">
+                <i class="i ic:baseline-more-vert"></i>
+                <template #overlay>
+                    <Menu @click="handleMenuClick">
+                        <template v-for="item in toolbarList" :key="item.value">
+                            <MenuItem v-bind="{ key: item.value }">
+                                {{ item.label }}
+                            </MenuItem>
+                            <MenuDivider v-if="item.divider" />
+                        </template>
+                    </Menu>
+                </template>
+            </Dropdown>
+        </div>
+
+    </div>
+</template>
+
+<script lang="ts" setup>
+    import { useSlots, ref, watch, computed } from 'vue'
+    import { InputSearch, Dropdown, Menu, MenuItem, MenuDivider } from 'ant-design-vue'
+    import { useDebounceFn } from '@vueuse/core'
+    import { searchProps } from '../props'
+    import { ToolbarEnum } from '../type/tree'
+
+    const slots = useSlots()
+    const emits = defineEmits([
+        'search',
+        'strictly-change',
+        'strictly-change'
+    ])
+    const props = defineProps( searchProps )
+
+    const searchValue = ref('')
+
+    function emitChange(value?: string){
+        emits('search', value)
+    }
+
+    function handleMenuClick(e) {
+        const { key } = e;
+        switch (key) {
+            case ToolbarEnum.SELECT_ALL: props.checkAll?.(true); break
+            case ToolbarEnum.UN_SELECT_ALL: props.checkAll?.(false); break
+            case ToolbarEnum.EXPAND_ALL: props.expandAll?.(true); break
+            case ToolbarEnum.UN_EXPAND_ALL: props.expandAll?.(false); break
+            case ToolbarEnum.CHECK_STRICTLY: emits('strictly-change', false); break
+            case ToolbarEnum.CHECK_UN_STRICTLY: emits('strictly-change', true); break
+        }
+    }
+
+    const toolbarList = computed(() => {
+        const { checkable } = props
+
+        const defaultToolbarList = [
+            { label: '展开全部', value: ToolbarEnum.EXPAND_ALL },
+            {
+                label: '折叠全部',
+                value: ToolbarEnum.UN_EXPAND_ALL,
+                divider: checkable,
+            },
+        ];
+
+        return checkable
+        ? [
+            { label: '选择全部', value: ToolbarEnum.SELECT_ALL },
+            {
+                label: '取消选择',
+                value: ToolbarEnum.UN_SELECT_ALL,
+                divider: checkable,
+            },
+            ...defaultToolbarList,
+            { label: '层级关联', value: ToolbarEnum.CHECK_STRICTLY },
+            { label: '层级独立', value: ToolbarEnum.CHECK_UN_STRICTLY },
+        ]
+        : defaultToolbarList;
+    })
+
+    const debounceEmitChange = useDebounceFn(emitChange, 200)
+    watch(
+        () => searchValue.value,
+        (v) => {
+            debounceEmitChange(v);
+        },
+    )
+</script>