@dt-frames/ui 1.0.10 → 1.0.13

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

@@ -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/upload/index.less

@@ -1,14 +1,6 @@
-.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;
-        }
+.dt-file {
+    td.orange{
+        color: orange;
     }
 }
 

package/es/style/theme/header/index.less

@@ -417,7 +417,7 @@
     margin-bottom: 20px;
 
     .select-item{
-        width: 130px;
+        width: 130px !important;
     }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@dt-frames/ui",
-	"version": "1.0.10",
+	"version": "1.0.13",
 	"keywords": [
 		"ui",
 		"dt-ui"

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,9 +27,8 @@
         }
     } )
 
-    const [registerDialog] = useModal({
+    const [registerDialog, { closeModal }] = useModal({
         ...omit(toRaw(props), [
-            'actions',
             'curd',
             'formProps',
             'formsVal',
@@ -39,7 +39,7 @@
     })
 
     const [ registerForm, { getFormValues, setFormValues } ] = useForm({
-        ...( props.formProps.value || {} ),
+        ...( props.formProps || {} ),
         schemas: props.schemas,
         mode: 'dialog'
     })
@@ -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/components/props.ts

@@ -1,5 +1,5 @@
 import { FormSchema, ButtonProps } from "../../../forms";
-import { PropType } from "vue";
+import { PropType, VNodeChild } from "vue";
 
 export const basicProps = {
     title: {
@@ -14,9 +14,9 @@ export const basicProps = {
         type: Array as PropType<FormSchema[]>,
         default: []
     },
-    actions: {
-        type: Array as PropType<ButtonProps[]>,
-        default: []
+    footer: {
+        type: Array as PropType<VNodeChild | JSX.Element | ButtonProps[]>,
+        default: undefined
     },
     canFullscreen: {
         type: Boolean,

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

@@ -7,7 +7,7 @@ import { CrudOptType } from "../types/curd.type";
 
 export function useCurd(curdOpt: CrudOptType) {
     const formsVal = ref<Recordable>()
-    const [register, { closeModal, setModalProps, openModal }] = useModalOut()
+    const [register, { openModal }] = useModalOut()
     const { confirm } = useMessage()
 
     const DtCurdModal = () => {

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

@@ -1,5 +1,6 @@
 import { Recordable } from "@dt-frames/core"
-import { FormSchema, ButtonProps, FormProps } from "../../../forms/src/types/form.type"
+import { VNodeChild } from "vue"
+import { FormSchema, FormProps, ButtonProps } from "../../../forms/src/types/form.type"
 
 export type CrudOptType = {
     // 标题
@@ -9,7 +10,7 @@ export type CrudOptType = {
     // 条目
     schemas: FormSchema[]
     // 操作栏
-    actions?: ButtonProps[]
+    footer?: VNodeChild | JSX.Element | ButtonProps[]
     // 是否显示全屏
     showFullscreen?: boolean
     // 是否显示关闭按钮

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

@@ -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 ) ) {

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

@@ -19,6 +19,7 @@ export type FormCallBackParams = {
 // 组件的类型
 export type ComponentType = 
     | 'Input'
+    | 'InputWithDialog'
     | 'InputGroup'
     | 'InputPassword'
     | 'InputSearch'
@@ -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,7 @@ import { useSource } from './source'
 import { useCurd } from './curd'
 import { export2Excel } from './excel'
 import { DtIframe } from './iframe'
-import { DtUpload, DtUploadModal } from './upload'
+import { DtUpload } from './upload'
 import { DtTree } from './tree'
 
 const dtComponents = [
@@ -18,7 +18,6 @@ const dtComponents = [
     { 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 },
 ];
 

package/src/components/modal/src/components/modalFooter.vue

@@ -2,13 +2,14 @@
     <slot name="appendFooter"></slot>
     <FormButtons
         :mode="'dialog'"
-        :buttonList="buttonActions"
+        :buttonList="buttonList"
         @handle-method="handleMethod($event)"
     ></FormButtons>
 </template>
 
 <script lang="ts" setup>
-    import { FormButtons, ButtonProps } from '../../../forms';
+    import { PropType, computed } from 'vue'
+    import { FormButtons, ButtonProps } from '../../../forms'
 
     const emits = defineEmits([
         'handleSave',
@@ -16,6 +17,7 @@
     ])
 
     const props = defineProps({
+        buttons: Object as PropType<ButtonProps[]>,
         showSave: {
             type: Boolean,
             default: true
@@ -27,6 +29,12 @@
         { name: '关闭', preIcon: 'mdi:close', flag: 'CANCEL' },
     ]
 
+    const buttonList = computed(() => {
+        if( props.buttons && props.buttons.length ) return props.buttons
+
+        return buttonActions
+    })
+
     // 处理按钮点击事件
     function handleMethod(item: ButtonProps) {
         switch( item.flag ) {

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

@@ -12,10 +12,10 @@
         <template #title v-if="!$slots.title">
             {{ getMergeProps.title }}
         </template>
-
+   
         <template #footer v-if="!$slots.footer">
             <!-- 默认的footer内容 -->
-            <ModalFooter :showSave="getBindValue.showSave" @handle-save="handleSave" @handle-cancel="handleCancel">
+            <ModalFooter :buttons="(propsRef.footer as any)" :showSave="getBindValue.showSave" @handle-save="handleSave" @handle-cancel="handleCancel">
                 <template #[item]="data" v-for="item in Object.keys($slots)">
                     <slot :name="item" v-bind="data || {}"></slot>
                 </template>
@@ -32,7 +32,7 @@
             :minHeight="getBindValue.minHeight"
             :height="getWrapperHeight"
             :visible="visibleRef"
-            :modalFooterHeight="footer !== undefined && !footer ? 0 : undefined"
+            :modalFooterHeight="modalFooterHeight"
             v-bind="omit(getBindValue.wrapperProps, 'visible', 'height', 'modalFooterHeight')"
             @ext-height="handleExtHeight"
             @height-change="handleHeightChange"
@@ -56,7 +56,7 @@
     import ModalFooter from './components/modalFooter.vue'
 
     import CloseIcon from './components/close-icon.vue';
-    import { isFunction, deepMerge, ModalProps, ModalMethods } from '@dt-frames/core';
+    import { isFunction, deepMerge, ModalProps, ModalMethods, isArray } from '@dt-frames/core';
     
     const visibleRef = ref(false);
     const propsRef = ref<Partial<ModalProps>>();
@@ -66,6 +66,12 @@
     const props = defineProps( basicProps );
     const emits = defineEmits(['visible-change', 'height-change', 'cancel', 'save', 'register', 'update:visible'])
 
+    const modalFooterHeight = computed(() => {
+        if( isArray(props.footer) ) {
+            return (unref(propsRef).footer as any).length ? 0 : undefined
+        }
+        return props.footer !== undefined && !props.footer ? 0 : undefined
+    })
 
     const modalMethods: ModalMethods = {
         setModalProps,
@@ -97,10 +103,16 @@
             ...unref(getMergeProps),
             ...(unref(propsRef) as any),
             visible: unref(visibleRef),
-            wrapClassName: unref(getWrapClassName),
+            wrapClassName: unref(getWrapClassName)
+        }
+
+        let omitArr = unref(fullScreenRef) ? ['height', 'title'] : ['title']
+
+        if( isArray( unref(propsRef).footer ) ) {
+            omitArr.push( 'footer' )
         }
         
-        return omit(bindValue, unref(fullScreenRef) ? ['height', 'title'] : 'title');
+        return omit(bindValue, omitArr);
     });
 
     const getWrapperHeight = computed(() => {
@@ -132,7 +144,6 @@
         extHeightRef.value = height;
     }
 
-
     function setModalProps(props: Partial<ModalProps>) {
 
         propsRef.value = deepMerge(unref(propsRef) || ({} as any), props);
@@ -148,7 +159,7 @@
     // 弹框保存
     function handleSave() {
         emits('save')
-        handleCancel()
+        // handleCancel()
     }
 
     // 弹框关闭

package/src/components/modal/src/props.ts

@@ -1,4 +1,5 @@
-import { CSSProperties, PropType, VNodeChild } from "vue";
+import { CSSProperties, PropType, VNodeChild } from "vue"
+import { ButtonProps } from "../../forms"
 
 // 支持设置的属性
 const modalProps = {
@@ -33,7 +34,7 @@ export const basicProps = Object.assign({}, modalProps, {
     keyboard            : { type: Boolean, default: true },
     maskStyle           : Object as PropType<CSSProperties>,
 
-    footer              : Object as PropType<VNodeChild | JSX.Element>,
+    footer              : Object as PropType<VNodeChild | JSX.Element | ButtonProps[]>,
     
     bodyStyle           : Object as PropType<CSSProperties>,
 

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

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

@@ -1,12 +1,12 @@
-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, header = { }, model = {}, _api = ''
+    function fetch(params: any) {
+        let type, header = { }, model = {}
         if(isString( api )) {
             api = baseUrl + api
         } else {
@@ -19,7 +19,9 @@ export function useFetch(api: string | ApiType, baseUrl: string = '') {
         }
 
         return new Promise(( resolve, reject ) => {
-            http[type || 'post']( 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

@@ -1,5 +1,5 @@
 import { ref, reactive, toRaw, Ref } from 'vue'
-import { isString, Recordable, useMessage } from "@dt-frames/core"
+import { isFunction, isString, Recordable, useMessage } from "@dt-frames/core"
 import { BaseDataType, SourceType } from "../types/source.type"
 import { useFetch } from './useFetch'
 import { TableParamsType } from '../types/table.type'
@@ -134,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()
         } )
@@ -151,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()
         } )
@@ -162,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()
         } )
     }

package/src/components/table/index.less

@@ -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, Boolean] as PropType<TableSetting | boolean>
             },
             toolbar: {
                 type: Array as PropType<BtnsType[]>,