上传文件

src/layout/index.vue

@@ -13,7 +13,7 @@
                 <TopMenu />
             </div>
             <div class="header-content-bar">
-                <HcGlobalUpload />
+                <hc-upload-bar />
                 <HcRefresh />
                 <HcColor />
                 <HcTheme />
@@ -50,7 +50,6 @@ const store = useAppStore()
 import TopMenu from './modules/TopMenu.vue'
 import MenuBar from './modules/MenuBar.vue'
 import HcRefresh from './modules/Refresh.vue'
-import HcGlobalUpload from './modules/Upload.vue'
 import HcColor from './modules/Color.vue'
 import HcTheme from './modules/Theme.vue'
 import UserInfoBar from './modules/UserInfoBar.vue'

src/layout/modules/RouterMenu.vue

@@ -22,7 +22,7 @@
 <script setup>
 import { onMounted, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { getStore, setStore } from 'hc-vue3-ui'
+import { HcUpload, getStore, setStore } from 'hc-vue3-ui'
 
 const emit = defineEmits(['load'])
 //初始组合式
@@ -37,6 +37,7 @@ const barRoutes = ref({ key: '', path: '', title: '', query: null })
 onMounted(() => {
     const { name, path, meta, query } = useRoutes
     barRoutes.value = { path, key: name, title: meta?.title, query }
+    HcUpload.router(useRoutes?.name)
     setBarMenuData()
 })
 
@@ -47,6 +48,7 @@ watch(() => [
     useRoutes?.query,
     useRoutes?.meta?.title,
 ], ([key, path, query, title]) => {
+    HcUpload.router(key)
     barRoutes.value = { path, key, title, query }
     setBarMenuData()
 })

src/layout/modules/Upload.vue

@@ -1,155 +0,0 @@
-<template>
-    <div class="header-icon-bar hc-header-upload-file-bar">
-        <el-tooltip :content="isUploading ? '文件正在上传时，千万不要刷新页面' : '全局文件上传'" placement="top">
-            <div class="hc-upload-bar hc-flex" :class="[isUploading ? 'uploading' : '']" @click="uploadClick">
-                <hc-lottie v-if="isUploading" class="hc-lottie-icon" :datas="uploadJson" />
-                <hc-icon v-else name="upload-cloud" class="header-icon" />
-                <span v-if="isUploading" class="text">正在上传中...</span>
-            </div>
-        </el-tooltip>
-        <!-- 上传文件 -->
-        <hc-upload-file
-            ref="uploadRef"
-            :params="params"
-            :echo-params="echoParams"
-            :options="options"
-            @progress="uploadProgress"
-            @error="uploadError"
-            @cancel="uploadCancel"
-            @item="uploadItem"
-            @finish="uploadFinish"
-            @success="uploadSuccess"
-        />
-    </div>
-</template>
-
-<script setup>
-import { onMounted, onUnmounted, ref, watch } from 'vue'
-import HcUpload from '~src/plugins/HcUpload'
-import uploadJson from '~src/assets/upload.json'
-import { emitter } from 'hc-vue3-ui'
-import { useRoute } from 'vue-router'
-const useRoutes = useRoute()
-
-const EVENT_KEY = 'hc-global-upload-file'
-
-//页面渲染
-onMounted(() => {
-    HcUpload.router(useRoutes?.name)
-    setEmitterData()
-})
-
-//监听路由变化
-watch(() => useRoutes?.name, (name) => {
-    HcUpload.router(name)
-})
-
-//上传文件
-const uploadRef = ref(null)
-const params = ref({})
-const echoParams = ref({})
-const options = ref({})
-const isUploading = ref(false)
-
-//注册监听事件
-const setEmitterData = () => {
-    emitter.on(EVENT_KEY, ({ key, data }) => {
-        if (key === 'params') {
-            params.value = data.params
-            echoParams.value = data.echoParams
-            options.value = data.options
-        } else if (key === 'show') {
-            uploadRef.value?.setModalShow(true)
-        } else if (key === 'close') {
-            uploadRef.value?.setModalShow(false)
-        } else if (key === 'open') {
-            uploadRef.value?.selectFile()
-        } else if (key === 'clear') {
-            uploadRef.value?.cancelUpload()
-        } else if (key === 'cancel') {
-            uploadRef.value?.allCancel()
-        } else if (key === 'getUploading') {
-            const bool = getIsUploading()
-            emitter.emit(`${EVENT_KEY}-get-uploading`, bool)
-        }
-    })
-}
-
-//文件上传中，此事件是单个文件上传中时会触发
-const uploadProgress = ({ file, status }) => {
-    isUploading.value = true
-    emitter.emit(`${EVENT_KEY}-progress`, { file, status })
-}
-
-//文件上传失败 ，返回一个当前文件的数据对象
-const uploadError = (file) => {
-    isUploading.value = getIsUploading()
-    emitter.emit(`${EVENT_KEY}-error`, file)
-}
-
-//文件上传成功，返回一个当前文件的数据对象
-const uploadSuccess = (file) => {
-    isUploading.value = getIsUploading()
-    emitter.emit(`${EVENT_KEY}-success`, file)
-}
-
-//取消上传并从列表中移除
-const uploadCancel = ({ item, index }) => {
-    isUploading.value = getIsUploading()
-    emitter.emit(`${EVENT_KEY}-cancel`, { item, index })
-}
-
-//点击了使用此文件的事件
-const uploadItem = ({ item, index }) => {
-    emitter.emit(`${EVENT_KEY}-item`, { item, index })
-}
-
-//全部文件上传完成
-const uploadFinish = (files) => {
-    isUploading.value = getIsUploading()
-    emitter.emit(`${EVENT_KEY}-finish`, files)
-}
-
-//展开上传文件
-const uploadClick = () => {
-    uploadRef.value?.setModalShow(true)
-}
-
-//是否还有正在上传中的文件
-const getIsUploading = () => {
-    return uploadRef.value?.getIsUploading()
-}
-
-//页面被注销，关闭监听事件
-onUnmounted(() => {
-    emitter.off(EVENT_KEY)
-    HcUpload.resetAll()
-})
-</script>
-
-<style lang="scss" scoped>
-.hc-header-upload-file-bar .hc-upload-bar {
-    .hc-lottie-icon {
-        display: none;
-        position: relative;
-        height: 24px;
-    }
-    .text {
-        display: none;
-        font-size: 14px;
-        margin-left: 6px;
-        color: var(--el-color-primary-dark-2);
-    }
-    &.uploading {
-        padding: 0 10px 0 0;
-        border-radius: 50px;
-        background: var(--el-color-primary-light-8);
-        .header-icon {
-            display: none;
-        }
-        .hc-lottie-icon, .text {
-            display: block;
-        }
-    }
-}
-</style>

src/plugins/HcUpload.js

@@ -1,141 +0,0 @@
-import { emitter } from 'hc-vue3-ui'
-import { getObjVal, getObjValue, isNullES } from 'js-fast-way'
-
-//事件key
-const EVENT_KEY = 'hc-global-upload-file'
-
-//全局文件上传
-export default class HcUpload {
-
-    //功能页面key，用于找溯源
-    static routerKey = null
-    static pageKey = null
-
-    //上传文件的配置
-    static uploadOptions = {}
-
-    //发送给服务器的额外参数
-    static uploadParams = {}
-
-    //回显参数，此参数不会提交服务器，只会在事件里返回
-    static uploadEchoParams = {}
-
-    //初始化参数
-    static init(parameter = {}) {
-        const { options, params, echoParams, key } = getObjValue(parameter)
-        //上传文件的配置
-        const options_data = getObjValue(options)
-        this.uploadOptions = {
-            //自定义小文件上传的Url
-            url: options_data.url ? options_data.url : '/api/blade-resource/oss/endpoint/put-file2',
-            //自定义大文件上传的Url
-            target: options_data.target ? options_data.target : '/api/blade-resource/largeFile/endpoint/upload-file',
-            //自定义文件上传参数名
-            name: options_data.name ? options_data.name : 'file',
-            //请求头，此值必须要传，否则会上传失败
-            headers: getObjValue(options_data.headers),
-            //自定义文件上传类型
-            accept: options_data.accept ? options_data.accept : '*',
-            //自定义文件上传类型提示
-            accept_tip: options_data.accept_tip ? options_data.accept_tip : '不限制',
-            //开启分片的大小，单位是MB
-            size: options_data.size ? options_data.size : 10,
-            //是否可多选文件
-            multiple: options_data.multiple ?? true,
-        }
-        //发送给服务器的额外参数
-        this.uploadParams = getObjValue(params)
-        //回显参数，此参数不会提交服务器，只会在事件里返回
-        this.pageKey = key ?? this.routerKey
-        this.uploadEchoParams = {
-            ...getObjValue(echoParams),
-            pageKey: this.pageKey,
-        }
-        //发送相关配置参加给文件上传
-        this.sendEmit('params', {
-            options: this.uploadOptions,
-            params: this.uploadParams,
-            echoParams: this.uploadEchoParams,
-        })
-    }
-
-    //设置路由key
-    static router(key) {
-        this.routerKey = key ?? ''
-    }
-
-    //显示文件上传
-    static show(parameter = {}) {
-        if (getObjVal(parameter)) {
-            this.init(parameter)
-        }
-        this.sendEmit('show')
-    }
-
-    //关闭文件上传
-    static close() {
-        this.sendEmit('close')
-    }
-
-    //打开文件选择
-    static open(parameter = {}) {
-        if (getObjVal(parameter)) {
-            this.init(parameter)
-        }
-        this.sendEmit('open')
-    }
-
-    //清空所有文件
-    static clear() {
-        this.sendEmit('clear')
-    }
-
-    //取消并移除所有文件，包括已上传文件
-    static cancel() {
-        this.sendEmit('cancel')
-    }
-
-    //是否还有正在上传中的文件
-    static async getUploading() {
-        let _this = this
-        return new Promise((resolve) => {
-            _this.sendEmit('getUploading')
-            //监听事件
-            emitter.on(`${EVENT_KEY}-get-uploading`, (data) => {
-                resolve(data)
-            })
-        })
-    }
-
-    //监听事件
-    static on(key, fun) {
-        emitter.on(`${EVENT_KEY}-${key}`, (data) => {
-            if (typeof fun === 'function') {
-                fun(data)
-            }
-        })
-    }
-
-    //关闭监听事件
-    static off(key) {
-        if (isNullES(key)) {
-            const keys = ['progress', 'success', 'error', 'cancel', 'item', 'finish', 'get-uploading']
-            keys.forEach((item) => {
-                emitter.off(`${EVENT_KEY}-${item}`)
-            })
-        } else {
-            emitter.off(`${EVENT_KEY}-${key}`)
-        }
-    }
-
-    //发送事件给文件上传
-    static sendEmit(key, params = {}) {
-        emitter.emit(EVENT_KEY, { key: key, data: params })
-    }
-
-    //全部重置
-    static resetAll() {
-        this.off()
-        this.init()
-    }
-}

src/views/project/list.vue

@@ -42,7 +42,7 @@ import { getArrValue, getObjValue } from 'js-fast-way'
 import InfoDialog from './modules/list/info-dialog.vue'
 import HcWbsTree from './modules/list/wbs-tree.vue'
 import mainApi from '~api/project/project'
-import HcUpload from '~src/plugins/HcUpload'
+import { HcUpload } from 'hc-vue3-ui'
 
 defineOptions({
     name: 'ProjectList',