@dt-frames/ui 1.0.9 → 1.0.12

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

@@ -80,5 +80,28 @@
     }
 }
 
+.input-with-dialog{
+    position: relative;
+    span{
+        background: none;
+        cursor: pointer;
+    }
+
+    i{
+        position: absolute;
+        right: 15px;
+        top: 0;
+        bottom: 0;
+        margin: auto;
+        line-height: 32px;
+        opacity: 0.3;
+        cursor: pointer;
+    }
+    
+    .ant-input{
+        color: #333;
+        cursor: pointer;
+    }
+}
 
 

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.9",
+	"version": "1.0.12",
 	"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

@@ -18,7 +18,8 @@
         ...{ 
             onRegister: { type: Function },
             formProps: {
-                type: Object as PropType<Ref<Partial<FormProps>>>
+                type: Object as PropType<Partial<FormProps>>,
+                default: () => ({})
             },
             formsVal: {
                 type: Object as PropType<Ref<Recordable>>
@@ -26,7 +27,7 @@
         }
     } )
 
-    const [registerDialog] = useModal({
+    const [registerDialog, { closeModal }] = useModal({
         ...omit(toRaw(props), [
             'actions',
             'curd',
@@ -39,7 +40,7 @@
     })
 
     const [ registerForm, { getFormValues, setFormValues } ] = useForm({
-        ...( props.formProps.value || {} ),
+        ...( props.formProps || {} ),
         schemas: props.schemas,
         mode: 'dialog'
     })
@@ -63,9 +64,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/index.less

@@ -80,5 +80,28 @@
     }
 }
 
+.input-with-dialog{
+    position: relative;
+    span{
+        background: none;
+        cursor: pointer;
+    }
+
+    i{
+        position: absolute;
+        right: 15px;
+        top: 0;
+        bottom: 0;
+        margin: auto;
+        line-height: 32px;
+        opacity: 0.3;
+        cursor: pointer;
+    }
+    
+    .ant-input{
+        color: #333;
+        cursor: pointer;
+    }
+}
 
 

package/src/components/forms/src/componentMap.ts

@@ -3,10 +3,12 @@ import { Component } from "vue"
 import { Input, Select, Radio, Checkbox, AutoComplete, Cascader, DatePicker, InputNumber, Switch, TimePicker, TreeSelect, Slider, Rate, Divider } from 'ant-design-vue'
 import RadioButtonGroup from './components/radioButton.vue'
 import FormIcon from './components/formIcon.vue'
+import formInputUseDialog from './components/formInputUseDialog.vue'
 import { ComponentType } from "./types/form.type"
 
 const components = {
     Input,
+    InputWithDialog: formInputUseDialog,
     InputTextArea: Input.TextArea,
     InputSearch: Input.Search,
     InputGroup: Input.Group,

package/src/components/forms/src/components/formInputUseDialog.vue

@@ -0,0 +1,43 @@
+<template>
+    <div class="input-with-dialog">
+        <div @click="onClickInput">
+            <Input v-bind="bindProps"></Input>
+        </div>
+        <i class="i mdi:close-circle" @click="clearProps"></i>
+    </div>
+</template>
+
+<script lang="ts" setup>
+    import { computed, useAttrs } from 'vue'
+    import { Input } from 'ant-design-vue'
+    import { omit } from 'lodash-es'
+    import { error, isFunction } from '@dt-frames/core'
+
+    const attrs = useAttrs()
+
+    const bindProps = computed(() => {
+        return {
+            ...omit(attrs, [
+                'formValues'
+            ]),
+            disabled: true
+        }
+    })
+
+    function onClickInput() {
+        const { model, schema = { } } = attrs.formValues as any
+
+        if( !schema.openDialog || !isFunction(schema.openDialog) ) {
+            error('openDialog必须是函数')
+            return 
+        }
+
+        schema.openDialog( model )
+    }
+
+    function clearProps() {
+        const { model, schema = { } } = attrs.formValues as any
+        [...schema.linkProps, schema.name].forEach( it => model[it] = null )
+    }
+    
+</script>

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"
@@ -32,7 +32,7 @@
                 const { defaultValues, formModel, schema } = props;
 
                 return {
-                    name: schema.name,
+                    name: (schema as FormSchema).name,
                     model: formModel,
                     values: {
                         ...defaultValues,
@@ -44,7 +44,7 @@
 
             // 是否显示当前条目
             const getShow = computed(() => {
-                const { show = true, isAdvanced = true } = props.schema
+                const { show = true, isAdvanced = true } = props.schema as FormSchema
 
                 // 是否处于收缩状态
                 if( !isAdvanced ) {
@@ -61,13 +61,13 @@
             // 设置表单绑定的特殊属性，如前后缀、禁用启用、日期格式等
             const getComponentProps = computed(() => {
                 const { schema, formModel, formActionType } = props
-                let { props: cProps = {} } = schema
+                let { props: cProps = {} } = schema as FormSchema
 
                 if (isFunction(cProps)) {
                     cProps = cProps( { schema, formModel, formActionType } ) ?? {}
                 }
 
-                if (schema.component === 'Divider') {
+                if ((schema as FormSchema).component === 'Divider') {
                     cProps = Object.assign({ type: 'horizontal' }, cProps, {
                         orientation: 'left',
                         plain: true,
@@ -83,7 +83,7 @@
              * 支持的类型参照 ../types/form.type.ts 中 ComponentType
              */
             function renderItem() {
-                const { component, props: cProps, slot, render, name, colon = appConf.ui.form.colon, suffix } = props.schema
+                const { component, props: cProps, slot, render, name, colon = appConf.ui.form.colon, suffix } = props.schema as FormSchema
 
                 // 计算label的属性
                 const { labelCol, wrapperCol } = unref( useLabelWidth( schema, formProps ) )
@@ -139,7 +139,7 @@
              * 渲染Label标签元素
             */
             function renderLabel() {
-                const { label, toolTip, subLabel, toolTipProps } = props.schema
+                const { label, toolTip, subLabel, toolTipProps } = props.schema as FormSchema
 
                 const renderLabel 
                     = subLabel 
@@ -164,7 +164,7 @@
             */
             function renderFormItem() {
                 const { schema, formModel, formActionType } = props
-                const { component, name, changeEvent = 'change', valueField, renderComponent, props: sProps  } = props.schema
+                const { component, name, changeEvent = 'change', valueField, renderComponent, props: sProps  } = props.schema as FormSchema
 
                 const isCheck = component && ['Switch', 'Checkbox'].includes(component)
 
@@ -216,7 +216,7 @@
                 // 设置表单禁用启用
                 const getDisable = computed(() => {
                     const { disabled: gDisabled } = props.formProps as FormProps
-                    const { dynamicDisabled } = props.schema
+                    const { dynamicDisabled } = props.schema as FormSchema
                     const { disabled: itemDisabled = false } = unref( getComponentProps )
 
                     let disabled = !!gDisabled || itemDisabled
@@ -261,7 +261,7 @@
                 /**
                  * 所有属性汇总，包括方法、属性及值的绑定
                 */
-                const compAttr: Recordable = {
+                let compAttr: Recordable = {
                     ...itemProps,
                     ...bindValue,
                     ...on
@@ -288,7 +288,7 @@
              * 处理验证规则
              */ 
             function handleRules(): ValidationRule[] {
-                const { rules: defaultRules = [], component, label, dynamicRules, required } = props.schema
+                const { rules: defaultRules = [], component, label, dynamicRules, required } = props.schema as FormSchema
 
                 // 1、如果为动态规则，则直接返回rules
                 if( isFunction( dynamicRules ) ) {
@@ -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

@@ -19,6 +19,7 @@ export type FormCallBackParams = {
 // 组件的类型
 export type ComponentType = 
     | 'Input'
+    | 'InputWithDialog'
     | 'InputGroup'
     | 'InputPassword'
     | 'InputSearch'
@@ -155,7 +156,7 @@ export type FormProps = {
 // 表单当个元素配置项
 export type FormSchema = {
     // 表单绑定的属性，亦作为name属性，用于后期自动化测试
-    name: string | string[]
+    name?: string | string[]
     // 值发生变化触发的函数名
     changeEvent?: string
     // 绑定v-model的值
@@ -176,7 +177,7 @@ export type FormSchema = {
     // tooltip 配置信息
     toolTipProps?: ToolTipProps
     // 表单控件类型
-    component: ComponentType
+    component?: ComponentType
     // 表单控件参数
     props?: 
         | ((opt: {
@@ -205,7 +206,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
@@ -236,6 +237,11 @@ export type FormSchema = {
 
     // 是否处于收缩状态 仅在 search 模式下使用
     isAdvanced?: boolean
+    
+    // 只有当类型为inputWithDialog 是否才有此属性
+    openDialog?: (parms: Recordable) => void
+    // 点击删除按钮需要清空的属性
+    linkProps?: 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

@@ -61,7 +61,13 @@ export function useModalOut(): UseModalReturnType{
             getInstance()?.redoModalHeight?.()
         },
 
-        openModal: (params?: Recordable, openOnSet = true) => {
+        openModal: (
+            params?: {
+                data?: Recordable,
+                afterClose?: ( data: Recordable ) => void
+            }, 
+            openOnSet = true
+        ) => {
             getInstance()?.setModalProps({
                 visible: true
             })
@@ -155,10 +161,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 +185,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

@@ -8,14 +8,17 @@ export type ModalMethods = {
 }
 
 export interface ReturnMethods extends ModalMethods{
-    openModal: <T = any>(data?: T, openOnSet?: boolean) => void
+    openModal: (data?: {
+        data?: Recordable,
+        afterClose?: ( data: Recordable ) => void
+    }, openOnSet?: boolean) => void
     closeModal: () => void
     getVisible?: ComputedRef<boolean>
 }
 
 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