@dt-frames/ui 1.0.10 → 1.0.13

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

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

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>