@dt-frames/ui 1.0.8 → 1.0.11

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;
     }
 }
 
@@ -171,3 +171,9 @@
         color: #333;
     }
 }
+
+.edit-cell-rule-popover .ant-popover-inner-content{
+    padding: 4px 8px;
+    color: #ed6f6f;
+    border-radius: 2px;
+}

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/style/theme/header/index.less

@@ -417,7 +417,7 @@
     margin-bottom: 20px;
 
     .select-item{
-        width: 130px;
+        width: 130px !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" | "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.8",
+	"version": "1.0.11",
 	"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/components/dialog.vue

@@ -26,7 +26,7 @@
         }
     } )
 
-    const [registerDialog] = useModal({
+    const [registerDialog, { closeModal }] = useModal({
         ...omit(toRaw(props), [
             'actions',
             'curd',
@@ -63,9 +63,11 @@
                 getFormValues()
             )
             
-            obj.id 
+            let pro = obj.id 
                 ? props.curd.onUpdate( obj )
                 : props.curd.onAdd( obj )
+
+            pro.then( rsp => closeModal() )
         }
     }
 </script>

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/hooks/useModal.ts

@@ -155,10 +155,11 @@ export function useModal(props?: Partial<ModalProps>,callbackFn?: Function): Use
         getVisible: computed(() => visibleData[~~unref(uidRef)]),
 
         // 关闭弹框进行回调
-        closeModal: (rsp: Recordable) => {
-            cbTransfer[unref(uidRef)](rsp)
-            getInstance()?.setModalProps({ visible: false });
+        closeModal: (rsp?: Recordable) => {
+            if(cbTransfer[unref(uidRef)]) cbTransfer[unref(uidRef)](rsp)
+            getInstance()?.setModalProps({ visible: false })
         },
+
         openModal: <T = any>(visable = true, data?: T, openOnSet = true) => {
             getInstance()?.setModalProps({
                 visible: visable
@@ -178,6 +179,7 @@ export function useModal(props?: Partial<ModalProps>,callbackFn?: Function): Use
                 dataTransfer[id] = toRaw(data);
             }
         },
+        
         setModalProps: (props: Partial<ModalProps>) => {
             getInstance()?.setModalProps(props);
         },

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
     });
@@ -148,7 +148,7 @@
     // 弹框保存
     function handleSave() {
         emits('save')
-        handleCancel()
+        // handleCancel()
     }
 
     // 弹框关闭

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

@@ -15,7 +15,7 @@ export interface ReturnMethods extends ModalMethods{
 
 export interface ReturnInnerMethods extends ModalMethods {
     openModal: <T = any>(props?: boolean, data?: T, openOnSet?: boolean) => void
-    closeModal: (rsp: Recordable) => void
+    closeModal: (rsp?: Recordable) => void
     changeLoading: (loading: boolean) => void
     getVisible?: ComputedRef<boolean>
     redoModalHeight: () => void

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

@@ -1,23 +1,27 @@
-import { http, isString, JsonResult, Recordable, ApiType } from "@dt-frames/core";
+import { http, isString, JsonResult, Recordable, ApiType, isObject } from "@dt-frames/core";
 
 export function useFetch(api: string | ApiType, baseUrl: string = '') {
     /**
      * 发送请求
      * handleParams 记录返回的值
      */
-    function fetch(params: Recordable = { }) {
-        let type = 'post', header = { }, model = {}, _api = ''
+    function fetch(params: any) {
+        let type, header = { }, model = {}
         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]( _api, Object.assign({}, model, params), {
+            let param = isObject(params) ? Object.assign({}, model, params) : params
+
+            http[type || 'post']( api, param, {
                 ...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()
     }
@@ -115,7 +134,7 @@ export function useSource(opt: SourceType) {
     function onAdd(model: Recordable) {
         const { fetch } = useFetch(add, baseUrl)
 
-        fetch(model).then( (rsp: any) => {
+        return fetch(model).then( (rsp: any) => {
             message.success('新增成功')
             search()
         } )
@@ -132,7 +151,7 @@ export function useSource(opt: SourceType) {
     // 修改
     function onUpdate(model: Recordable) {
         const { fetch } = useFetch(update, baseUrl)
-        fetch(model).then( (rsp: any) => {
+        return fetch(model).then( (rsp: any) => {
             message.success('更新数据成功')
             search()
         } )
@@ -143,7 +162,8 @@ export function useSource(opt: SourceType) {
     function onDeletes(ids: any) {
         const { fetch } = useFetch(deletes, baseUrl)
         
-        fetch(ids).then( (rsp: any) => {
+        fetch(toRaw(ids)).then( (rsp: any) => {
+            message.success(`${ ids.length > 1 ? '批量' : '' } 删除成功！`)
             search()
         } )
     }
@@ -176,8 +196,8 @@ export function useSource(opt: SourceType) {
     }
 
     return {
-        api,
-        apiFul,
+        api: apiFul,
+        apiPath,
         form,
         table,
         curd,
@@ -188,6 +208,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;
     }
 }
 
@@ -171,3 +171,9 @@
         color: #333;
     }
 }
+
+.edit-cell-rule-popover .ant-popover-inner-content{
+    padding: 4px 8px;
+    color: #ed6f6f;
+    border-radius: 2px;
+}

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

@@ -9,7 +9,7 @@
                 <slot name="toolbar"></slot>
             </div>
 
-            <div class="dt-table-header-actions__right">
+            <div class="dt-table-header-actions__right" v-if="tableTools">
                 <TableSettinCom
                     :setting="tableTools"
                     @columns-change="handleColumnChange"
@@ -42,7 +42,7 @@
         },
         props: {
             tableTools: {
-                type: Object as PropType<TableSetting>
+                type: Object as PropType<TableSetting | boolean>
             },
             toolbar: {
                 type: Array as PropType<BtnsType[]>,

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/components/editable/CellComponent.ts

@@ -0,0 +1,57 @@
+import { Recordable } from "@dt-frames/core"
+import { Popover } from "ant-design-vue"
+import { DefineComponent, FunctionalComponent, h, Ref } from "vue"
+import { ComponentType } from "../../types/table.type"
+import { componentMap } from "./componentMap"
+
+
+type ComponentProps = {
+    component: ComponentType
+    rule: boolean
+    popoverVisible: boolean
+    ruleMessage: string
+    getPopupContainer?: any
+}
+
+export type EditRecordRow<T = Recordable> = Partial<
+  {
+    onEdit: (editable: boolean, submit?: boolean) => Promise<boolean>;
+    onValid: () => Promise<boolean>;
+    editable: boolean;
+    onCancel: Function;
+    onSubmit: Function;
+    submitCbs: Function[];
+    cancelCbs: Function[];
+    validCbs: Function[];
+    editValueRefs: Recordable<Ref>;
+  } & T
+>
+
+export const CellComponent: FunctionalComponent = ({
+    component = 'Input',
+    rule = true,
+    ruleMessage,
+    popoverVisible,
+    getPopupContainer
+}: ComponentProps,
+    { attrs }
+) => {
+    const Comp = componentMap.get(component) as DefineComponent
+    
+    const DefaultComp = h(Comp, attrs)
+
+    if (!rule) return DefaultComp
+
+    return h(
+        Popover,
+        {
+            overlayClassName: 'edit-cell-rule-popover',
+            visible: !!popoverVisible,
+            ...(getPopupContainer ? { getPopupContainer } : {}),
+        },
+        {
+            default: () => DefaultComp,
+            content: () => ruleMessage,
+        },
+    )
+}