@dt-frames/ui 1.0.9 → 1.0.12

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

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

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

@@ -0,0 +1,32 @@
+import { computed, Ref, unref } from "vue"
+
+export function useHelpers(
+    acceptRef: Ref<string[]>, 
+    helpTextRef: Ref<string>, 
+    maxNumberRef: Ref<number>, 
+    maxSizeRef: Ref<number>
+) {
+    // 文件类型
+    const getAccept = computed(() => {
+        const accept = unref(acceptRef);
+        if (accept && accept.length > 0) {
+            return accept;
+        }
+        return [];
+    })
+
+    const getStringAccept = computed(() => {
+        return unref(getAccept)
+            .map((item) => {
+                if (item.indexOf('/') > 0 || item.startsWith('.')) {
+                    return item
+                }
+                return `.${item}`
+            })
+            .join(',')
+    })
+
+    return {
+        getStringAccept
+    }
+}

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

@@ -0,0 +1,38 @@
+<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>

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

@@ -0,0 +1,48 @@
+import { Fn } from "@vueuse/core"
+import { PropType } from "vue"
+
+export type FileType = {
+    fileName: String
+    [key: string]: any
+}
+
+export const basicUploadProps = {
+    // 是否显示模板下载
+    showTemplateDownload: {
+        type: Boolean,
+        default: false,
+    },
+    // 模板下载
+    templateDownload: {
+        type: Function as PropType<Fn>,
+        default: () => {}
+    },
+    helpText: {
+        type: String as PropType<string>,
+        default: '',
+    },
+    // 是否支持批量上传
+    multiple: {
+        type: Boolean as PropType<boolean>,
+        default: true,
+    },
+    // 文件支持的类型
+    accept: {
+        type: Array as PropType<string[]>,
+        default: () => [],
+    },
+    // 文件最大多少MB
+    maxSize: {
+        type: Number as PropType<number>,
+        default: 2,
+    },
+    // 最大数量的文件，Infinity不限制
+    maxNumber: {
+        type: Number as PropType<number>,
+        default: Infinity,
+    },
+    defaultFiles: {
+        type: Array as PropType<FileType[]>,
+        default: []
+    }
+}

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

@@ -0,0 +1,166 @@
+<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>
+                    文件上传
+                </Button>
+            </Upload>
+            <Button type="primary" v-if="showTemplateDownload" @click="templateDownload">
+                <span v-icon="'ic:baseline-file-download'"></span>
+                模板下载
+            </Button>
+        </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>
+
+</template>
+
+<script lang="ts" setup>
+    import { h, ref, toRefs, watchEffect } from 'vue'
+    import { Button, Upload, Image } from 'ant-design-vue'
+    import { DtTable, useTable } from '../../table'
+    import { basicUploadProps } from './props'
+    import { useHelpers } from './helper'
+    import { useMessage } from '@dt-frames/core'
+    import * as SparkMD5 from 'spark-md5'
+
+
+    const { message } = useMessage()
+    
+    const filesRef = ref([])
+    const historyFilesRef = ref([])
+    const allFilesRef = ref([])
+
+    // 控制图片预览显示隐藏
+    const imgVisable = ref( false )
+    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 [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)
+            } },
+        ],
+        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() )
+                    },
+                    action: () => {
+                        setImgVisible(true)
+                    }
+                },
+                { title: '编辑', icon: 'mdi:text-box-edit-outline' },
+                { title: '删除', icon: 'mdi:delete-outline' }
+            ]
+        }
+    })
+
+
+    watchEffect(() => {
+        historyFilesRef.value = props.defaultFiles.map(file => {
+            return {
+                ...file,
+                fileName: file.fileName,
+                status: 0,
+                fileStatue: '历史上传'
+            }
+        })
+
+        allFilesRef.value = [...historyFilesRef.value, ...filesRef.value]
+    })
+    
+
+    function beforeUpload(file: File) {
+        const { maxSize } = props
+        
+        if( maxSize && file.size / 1024 / 1024 >= maxSize ) {
+            message.error(`只能上传不超过${ maxSize }MB的文件!`)
+            return false
+        }
+
+        addFile( file )
+
+        return false
+    }
+
+    // 添加文件
+    function addFile(file: File) {
+        let blobSlice = File.prototype.slice || (File.prototype as any).mozSlice || (File.prototype as any).webkitSlice
+        let chunkSize = 2097152,
+            chunks = Math.ceil(file.size / chunkSize),
+            currentChunk = 0,
+            spark = new SparkMD5.ArrayBuffer(),
+            fileReader = new FileReader()
+
+        fileReader.onload = function (e) {
+            spark.append(e.target['result']);
+            currentChunk++;
+
+            if (currentChunk < chunks) {
+                loadNext();
+            } else {
+                filesRef.value.push({
+                    fileName: file.name,
+                    fileId: spark.end(),
+                    file,
+                    status: 1,
+                    fileStatue: '待上传'
+                })
+            }
+        }
+
+        function loadNext() {
+            var start = currentChunk * chunkSize,
+                end = ((start + chunkSize) >= file.size) ? file.size : start + chunkSize
+            
+            fileReader.readAsArrayBuffer(blobSlice.call(file, start, end))
+        }
+
+        loadNext()
+    }
+
+
+    defineExpose({
+        allFilesRef
+    })
+</script>

package/src/theme/header/helper/menu-tree.ts

@@ -13,7 +13,7 @@ function deleteChildrenProp( menu: any ) {
 
 // 获取当前路由的面包屑
 export function getBreadCrumb(path: string, menus?: Menus[]) {
-    const _menus = menus || DtCache.getLocal(CacheKey.MENUS) || []
+    const _menus = menus || DtCache.getLocal(CacheKey.MENUS)?.children || []
 
     let routes: Menus[] = []
 
@@ -58,7 +58,7 @@ export function getFilterMenu( filter: string = '', flag: boolean = false) {
         } )
     }
 
-    getTargetMenus( DtCache.getLocal(CacheKey.MENUS) );
+    getTargetMenus( DtCache.getLocal(CacheKey.MENUS)?.children );
 
     return _menus;
 }

package/src/theme/header/index.less

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

package/src/theme/sider/helper/split-menu.ts

@@ -67,7 +67,7 @@ export function useSplitMenu( splitType: Ref<MenuSplitTye> ) {
 
     async function getMenus() {
         if (unref(normalType)) {
-            menusRef.value = DtCache.getLocal(CacheKey.MENUS)
+            menusRef.value = DtCache.getLocal(CacheKey.MENUS)?.children
             return;
         }
 
@@ -85,7 +85,7 @@ export function useSplitMenu( splitType: Ref<MenuSplitTye> ) {
 }
 
 
-async function getMenus() { return DtCache.getLocal(CacheKey.MENUS) }
+async function getMenus() { return DtCache.getLocal(CacheKey.MENUS)?.children }
 
 function getFirstMenuPath(item: Menus) {
     let isFind = false, path = ''

package/es/components/dialog/index.d.ts

@@ -1,2 +0,0 @@
-import { useDialog } from './src/hooks/useDialog';
-export { useDialog };

package/es/components/dialog/src/hooks/useDialog.d.ts

@@ -1,3 +0,0 @@
-export declare function useDialog(): {
-    createDialog: (component: any, options: any) => Promise<unknown>;
-};

package/src/components/dialog/index.ts

@@ -1,5 +0,0 @@
-import { useDialog } from './src/hooks/useDialog'
-
-export {
-    useDialog
-}

package/src/components/dialog/src/hooks/useDialog.ts

@@ -1,85 +0,0 @@
-import { ModalProps, Recordable } from "@dt-frames/core"
-import { VNode, h, createVNode, render as vueRender, Component } from "vue"
-
-export function useDialog() {
-    function createDialog( component: any, options: any ) {
-        return new Promise( resolve => {
-            const div = document.createElement('div');
-            document.body.appendChild(div);
-    
-            const wrapper = () => {
-                return h(component, {
-                    params: {
-                        ...options,
-                        afterClose: ( data: any ) => destroy( data )
-                    }
-                    
-                })
-            };
-    
-            let dialogInstance = render();
-    
-            function render() {
-                const vm = createVNode(component.children[0]);
-                vueRender(vm, div);
-                return vm;
-            }
-    
-            function destroy( data: any ) {
-                if (dialogInstance && div.parentNode) {
-                    vueRender(null, div);
-                    dialogInstance.component.update();
-                    dialogInstance = null;
-                    div.parentNode.removeChild(div);
-                }
-    
-                resolve( data );
-            }
-        } )
-    }
-    // function createDialog(component: any, props?: ModalProps) {
-    //     const afterClose = (rsp: Recordable) => { }
-
-    //     const div = document.createElement('div')
-    //     document.body.appendChild(div)
-
-    //     const wrapper = () => {
-    //         return (
-    //             h(component, {
-    //                 params: {
-    //                     ...props,
-    //                     afterClose: ( data: Recordable ) => destroy( data )
-    //                 }
-    //             })
-    //         )
-    //     }
-
-    //     let dialogInstance = render()
-        
-    //     function render(){
-    //         const vm = createVNode(wrapper)
-    //         vueRender(vm, div)
-    //         return vm
-    //     }
-
-    //     const destroy = ( data: Recordable ) => {
-    //         if (dialogInstance && div.parentNode) {
-    //             vueRender(null, div)
-    //             dialogInstance.component.update()
-    //             dialogInstance = null
-    //             div.parentNode.removeChild(div)
-    //         }
-
-    //         afterClose( data )
-    //     }
-
-
-    //     return {
-    //         afterClose
-    //     }
-    // }
-
-    return {
-        createDialog
-    }
-}