@dt-frames/ui 1.0.12 → 1.0.13

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/package.json

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

package/src/components/curd/src/components/dialog.vue

@@ -29,7 +29,6 @@
 
     const [registerDialog, { closeModal }] = useModal({
         ...omit(toRaw(props), [
-            'actions',
             'curd',
             'formProps',
             'formsVal',

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/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/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);

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/table/src/hooks/useRowSelection.ts

@@ -126,7 +126,7 @@ export function useRowSelection(
         return unref( getRowSelectionRef )
     }
 
-    function getSelectRowKeys() {
+    function getSelectRowKeys(): string[] {
         return unref(selectedRowKeysRef);
     }
 

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

@@ -6,7 +6,7 @@ import { useHeaderCode } from './useHeaderCode'
 
 type Props = Partial<DynamicProps<BasicTableProps>>
 
-export function useTable(tableProps?: Props) {
+export function useTable(tableProps?: Props): [registerTable: (...args: any) => void, methods: TableActionType] {
     const tableRef = ref<Nullable<TableActionType>>(null)
     const loadedRef = ref<Nullable<boolean>>(false)
 

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

@@ -9,10 +9,10 @@ export function useTableHeader(
     handlers: { onColumnsChange: (data: ColumnChangeParam[]) => void }
 ) {
     const getHeaderProps = computed((): Recordable => {
-        const { tableSetting, toolbar = [] } = unref(propsRef)
+        const { tableSetting, toolbar } = unref(propsRef)
 
         const { getSlot } = useSlots()
-        const hideTitle = !toolbar.length && !slots.toolbar && !slots.headerTop && !tableSetting
+        const hideTitle = !toolbar && !slots.toolbar && !slots.headerTop && !tableSetting
 
         return {
             title: hideTitle 

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

@@ -154,7 +154,7 @@ export type TableActionType = {
     getRowSelection: () => TableRowSelection<Recordable>
     getCacheColumns: () => BasicColumn[]
     setCacheColumnsByField?: (dataIndex: string | undefined, value: BasicColumn) => void
-    getSelectRows: ( ) => void
-    getSelectRowKeys: ( ) => void
+    getSelectRows: ( ) => Recordable[]
+    getSelectRowKeys: ( ) => string[]
     emit?: any
 }

package/src/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/src/components/upload/index.ts

@@ -1,7 +1,5 @@
-import DtUploadModal from './src/index.vue'
 import DtUpload from './src/upload.vue'
 
 export {
-    DtUploadModal,
     DtUpload
 }

package/src/components/upload/src/helper.ts

@@ -26,7 +26,35 @@ export function useHelpers(
             .join(',')
     })
 
+    const getHelpText = computed(() => {
+        const helpText = unref(helpTextRef)
+        if (helpText) {
+            return helpText
+        }
+
+        const helpTexts: string[] = []
+
+        const accept = unref(acceptRef)
+        if (accept.length > 0) {
+            helpTexts.push(`支持${ accept.join(',') }格式`)
+        }
+
+        const maxSize = unref(maxSizeRef)
+        if (maxSize) {
+            helpTexts.push(`不超过${ maxSize }M`)
+        }
+
+        const maxNumber = unref(maxNumberRef)
+        if (maxNumber && maxNumber !== Infinity) {
+            helpTexts.push(`最多可选择${ maxNumber }个文件`);
+        }
+
+        return helpTexts.join(',') || '请上传pptx、doc、jpg、jpeg、png、bmp、gif、xls、xlsx、txt、rar、zip、7z、tar、gz格式文件'
+
+    })
+
     return {
-        getStringAccept
+        getStringAccept,
+        getHelpText
     }
 }

package/src/components/upload/src/props.ts

@@ -34,7 +34,6 @@ export const basicUploadProps = {
     // 文件最大多少MB
     maxSize: {
         type: Number as PropType<number>,
-        default: 2,
     },
     // 最大数量的文件，Infinity不限制
     maxNumber: {
@@ -44,5 +43,9 @@ export const basicUploadProps = {
     defaultFiles: {
         type: Array as PropType<FileType[]>,
         default: []
+    },
+    showView: {
+        type: Boolean,
+        default: false
     }
 }

package/src/components/upload/src/upload.vue

@@ -1,46 +1,49 @@
 <template>
-    <div class="file-header">
-        <div>
-            <Upload
-                :accept="getStringAccept"
-                :multiple="multiple"
-                :before-upload="beforeUpload"
-                :show-upload-list="false"
-            >
-                <Button type="primary">
-                    <span v-icon="'ic:baseline-file-upload'"></span>
-                    文件上传
+    <div class="dt-file">
+        <div class="file-header">
+            <div>
+                <Upload
+                    :accept="getStringAccept"
+                    :multiple="multiple"
+                    :before-upload="beforeUpload"
+                    :show-upload-list="false"
+                >
+                    <Button type="primary">
+                        <span v-icon="'ic:baseline-file-upload'"></span>
+                        文件上传
+                    </Button>
+                </Upload>
+                <Button type="primary" v-if="showTemplateDownload" @click="templateDownload">
+                    <span v-icon="'ic:baseline-file-download'"></span>
+                    模板下载
                 </Button>
-            </Upload>
-            <Button type="primary" v-if="showTemplateDownload" @click="templateDownload">
-                <span v-icon="'ic:baseline-file-download'"></span>
-                模板下载
-            </Button>
+            </div>
+            <slot></slot>
         </div>
-        <slot></slot>
-    </div>
 
-    <div class="file-type-tips ant-alert-info">
-        <span v-icon="'ant-design:info-circle-outlined'"></span>
-        <i>请上传pptx、doc、jpg、jpeg、png、bmp、gif、xls、xlsx、txt、rar、zip、7z、tar、gz格式文件</i>
-    </div>
-    
-    <DtTable @register="registerTable"></DtTable>
-
-    <Image
-        :width="200"
-        :style="{ display: 'none' }"
-        :preview="{
-            visible: imgVisable,
-            onVisibleChange: setImgVisible,
-        }"
-        src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
-    ></Image>
+        <div class="file-type-tips ant-alert-info">
+            <span v-icon="'ant-design:info-circle-outlined'"></span>
+            <i>{{ getHelpText }}</i>
+        </div>
+        
+        <DtTable @register="registerTable"></DtTable>
+
+        <Image
+            :width="200"
+            :style="{ display: 'none' }"
+            :preview="{
+                visible: imgVisable,
+                onVisibleChange: setImgVisible,
+            }"
+            :src="imgSrcRef"
+        ></Image>
 
+    </div>
+   
 </template>
 
 <script lang="ts" setup>
-    import { h, ref, toRefs, watchEffect } from 'vue'
+    import { h, ref, toRefs, watchEffect, watch, computed } from 'vue'
     import { Button, Upload, Image } from 'ant-design-vue'
     import { DtTable, useTable } from '../../table'
     import { basicUploadProps } from './props'
@@ -53,62 +56,77 @@
     
     const filesRef = ref([])
     const historyFilesRef = ref([])
-    const allFilesRef = ref([])
+    const allFilesRef = computed(() => {
+        return [...historyFilesRef.value, ...filesRef.value ]
+    })
 
     // 控制图片预览显示隐藏
     const imgVisable = ref( false )
+    const imgSrcRef = ref()
     const setImgVisible = (value) => imgVisable.value = value
 
     const props = defineProps( basicUploadProps )
 
     const { accept, helpText, maxNumber, maxSize } = toRefs(props)
-    const { getStringAccept } = useHelpers( accept, helpText, maxNumber, maxSize )
+    const { 
+        getStringAccept,
+        getHelpText
+    } = useHelpers( accept, helpText, maxNumber, maxSize )
 
+    const isImage = (fileType: string) => ['pdf', 'jpg', 'jpeg', 'png', 'bmp', 'gif'].includes( fileType )
 
-    const [registerTable, { }] = useTable({
+    const [registerTable] = useTable({
         tableSetting: false,
         pagination: false,
         dataSource: allFilesRef,
         columns: [
             { title: '文件名称', dataIndex: 'fileName' },
-            { title: '上传状态', dataIndex: 'fileStatue', render(row) {
-                return h('span', {
-                    style: `color: ${ row.status === 0 ? 'orange' : 'green' }`,
-                }, row.fileStatue)
-            } },
+            { title: '上传状态', dataIndex: 'fileStatue', className: 'orange' },
         ],
         operations: {
             expand: true,
             btns: [
                 { title: '预览', icon: 'ic:baseline-remove-red-eye',
                     ifShow(row) {
-                        const supportFileTypes = ['pdf', 'jpg', 'jpeg', 'png', 'bmp', 'gif']
-                        return supportFileTypes.includes( row.fileName.split('.').pop() )
+                        if( !props.showView ) return false
+                        return isImage( row.fileName.split('.').pop() )
                     },
-                    action: () => {
-                        setImgVisible(true)
+                    action: ({ row }) => {
+                        if( isImage( row.fileName.split('.').pop() ) ) {
+                            setImgVisible(true)
+                        }
                     }
                 },
-                { title: '编辑', icon: 'mdi:text-box-edit-outline' },
-                { title: '删除', icon: 'mdi:delete-outline' }
+                { title: '删除', icon: 'mdi:delete-outline', action: ({row}) => {
+                    if( !row.status ) historyFilesRef.value = historyFilesRef.value.filter( it => it.fileId !== row.fileId )
+                    else {
+                        filesRef.value = filesRef.value.filter( it => it.fileId !== row.fileId )
+                    }
+                } }
             ]
         }
     })
 
-
-    watchEffect(() => {
-        historyFilesRef.value = props.defaultFiles.map(file => {
-            return {
-                ...file,
-                fileName: file.fileName,
-                status: 0,
-                fileStatue: '历史上传'
+    watch(
+        () => props.defaultFiles,
+        v => {
+            if( v ) {
+                historyFilesRef.value = props.defaultFiles.map((file, index) => {
+                    return {
+                        ...file,
+                        fileId: file.id || index,
+                        fileName: file.fileName,
+                        status: 0,
+                        fileStatue: '历史上传'
+                    }
+                })
             }
-        })
+        },
+        {
+            immediate: true
+        }
+    )
 
-        allFilesRef.value = [...historyFilesRef.value, ...filesRef.value]
-    })
-    
 
     function beforeUpload(file: File) {
         const { maxSize } = props
@@ -139,13 +157,20 @@
             if (currentChunk < chunks) {
                 loadNext();
             } else {
-                filesRef.value.push({
+                let fileObj = {
                     fileName: file.name,
                     fileId: spark.end(),
                     file,
                     status: 1,
                     fileStatue: '待上传'
-                })
+                }
+
+                if( props.multiple ) {
+                    filesRef.value.push(fileObj)
+                } else {
+                    historyFilesRef.value = []
+                    filesRef.value = [fileObj]
+                }
             }
         }
 

package/src/components/upload/src/index.vue

@@ -1,38 +0,0 @@
-<template>
-    <DtModal
-        @save="handleSave()"
-        @register="register"
-    >
-        <div class="dt-upload-wrap">
-            <DtUpload ref="uploadRef" :defaultFiles="defaultFiles">
-                111
-            </DtUpload>
-        </div>
-    </DtModal>
-</template>
-
-<script lang="ts" setup>
-    import { ref } from 'vue'
-    import { DtModal, useModal } from '../../modal'
-    import DtUpload from './upload.vue'
-
-    const uploadRef = ref(null)
-    const emites = defineEmits(['register'])
-
-    // 注册弹框
-    const [register] = useModal({
-        width: '700px',
-        title: '文件上传',
-        maskClosable: false,
-    })
-
-    const defaultFiles = [
-        { fileName: '叮咚发票667.09.pdf', fileId: '1' }
-    ]
-
-    // 保存
-    function handleSave() {
-        console.log(uploadRef.value.allFilesRef)
-        alert("s-s-s-")
-    }
-</script>