|
@@ -0,0 +1,388 @@
|
|
|
+<!--文件上传组件-->
|
|
|
+<template>
|
|
|
+ <div :key="uploadKey">
|
|
|
+ <el-divider v-if="showDivider" content-position="left"><i class="el-icon-document"></i> {{dividerName}}</el-divider>
|
|
|
+ <el-upload ref="upload" style="display: inline-block; :show-header='status'" action=""
|
|
|
+ :limit="999" :http-request="httpRequest"
|
|
|
+ multiple
|
|
|
+ :on-exceed="(files, fileList) =>{
|
|
|
+ $message.warning(`当前限制选择 999 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length} 个文件`)
|
|
|
+ }"
|
|
|
+ :show-file-list="false"
|
|
|
+ :on-change="changes"
|
|
|
+ :on-progress="uploadVideoProcess"
|
|
|
+ :file-list="fileList">
|
|
|
+ <template v-if="auth==='view'&&uploadFlag===false" #tip>
|
|
|
+ <el-button :loading="loading" type="primary" size="default" :disabled="true"> 点击上传 </el-button>
|
|
|
+ </template>
|
|
|
+ <template v-else #trigger>
|
|
|
+ <el-button :loading="loading" type="primary" size="default"> 点击上传 </el-button>
|
|
|
+ </template>
|
|
|
+ </el-upload>
|
|
|
+ <div style="height: calc(100% - 80px);margin-top: 10px">
|
|
|
+ <el-table
|
|
|
+ ref="uploadTable"
|
|
|
+ v-loading="loading"
|
|
|
+ :key="tableKey"
|
|
|
+ :data="dataListNew">
|
|
|
+ <el-table-column type="seq" width="40"></el-table-column>
|
|
|
+ <el-table-column label="文件名称" prop="name" align="center">
|
|
|
+ <template #default="scope">
|
|
|
+ <div v-if="ifName(scope.row) === true">
|
|
|
+ <el-image
|
|
|
+ style="width: 30px; height: 30px;padding-top: 4px;"
|
|
|
+ :src="scope.row.lsUrl"
|
|
|
+ :preview-src-list="[scope.row.lsUrl]"
|
|
|
+ :preview-teleported="true"
|
|
|
+ ></el-image>
|
|
|
+ </div>
|
|
|
+ <div v-else>
|
|
|
+ <el-link type="primary" :underline="false" @click="showFile(scope.row)">{{scope.row.name}}</el-link>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="创建人" prop="createBy.name" align="center"></el-table-column>
|
|
|
+ <el-table-column label="创建时间" prop="createTime" align="center"></el-table-column>
|
|
|
+ <el-table-column label="文件大小" prop="size" align="center">
|
|
|
+ <template #default="scope">
|
|
|
+ {{getSize(scope.row.size)}}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作" width="200px" fixed="right" align="center">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-button text type="primary" key="01" icon="el-icon-download" size="small" @click="toHref(scope.row)" >下载</el-button>
|
|
|
+ <el-button text type="primary" key="02" icon="el-icon-delete" size="small" @click="deleteById(scope.row, scope.$index)" :disabled="auth==='view'&&delFlag === false&&createBy!==scope.row.createBy.name">删除</el-button>
|
|
|
+<!-- <el-button v-if="createBy===scope.row.createBy.name" type="text" icon="el-icon-delete" size="small" @click="deleteById(scope.row, scope.$index)" :disabled="auth==='view'&&delFlag === false">删除2</el-button>-->
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+<!-- <el-image-viewer v-if="showViewer" :on-close="closeViewer" :url-list="[url]" :zIndex=9999></el-image-viewer>-->
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ // eslint-disable-next-line no-unused-vars
|
|
|
+ import OSSSerivce, {
|
|
|
+ httpRequest,
|
|
|
+ // eslint-disable-next-line no-unused-vars
|
|
|
+ handleRemove,
|
|
|
+ fileName,
|
|
|
+ // eslint-disable-next-line no-unused-vars
|
|
|
+ beforeAvatarUpload,
|
|
|
+ // eslint-disable-next-line no-unused-vars
|
|
|
+ openWindowOnUrl,
|
|
|
+ // eslint-disable-next-line no-unused-vars
|
|
|
+ toHref
|
|
|
+ } from '@/api/sys/OSSService'
|
|
|
+ // import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
|
|
|
+ import moment from 'moment'
|
|
|
+ export default {
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ uploadKey: '',
|
|
|
+ progressFlag: false,
|
|
|
+ loadProgress: 0,
|
|
|
+ fileList: [],
|
|
|
+ dataList: [],
|
|
|
+ dataListNew: [],
|
|
|
+ url: '',
|
|
|
+ showViewer: false,
|
|
|
+ ossService: null,
|
|
|
+ auth: '',
|
|
|
+ directory: 'public',
|
|
|
+ maxValue: 300,
|
|
|
+ tableKey: '',
|
|
|
+ fileLoading: true,
|
|
|
+ dividerName: '',
|
|
|
+ uploadFlag: false,
|
|
|
+ delFlag: false,
|
|
|
+ createBy: '',
|
|
|
+ showDivider: true,
|
|
|
+ loading: false,
|
|
|
+ dataListLength: ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ },
|
|
|
+ created () {
|
|
|
+ this.ossService = new OSSSerivce()
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ // ElImageViewer
|
|
|
+ },
|
|
|
+ mounted () {
|
|
|
+ window.onPreview = this.onPreview
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ /**
|
|
|
+ * dividerName: 组件中divider的名称赋值
|
|
|
+ * showDivider: ‘附件‘Divider是否展示
|
|
|
+ * 注:值为空时,默认值为true
|
|
|
+ * showDivider=false时 ‘附件‘Divider隐藏
|
|
|
+ **/
|
|
|
+ setDividerName (dividerName, showDivider) {
|
|
|
+ if (this.commonJS.isNotEmpty(dividerName)) {
|
|
|
+ this.dividerName = dividerName
|
|
|
+ }
|
|
|
+ if (this.commonJS.isNotEmpty(showDivider)) {
|
|
|
+ if (showDivider === false) {
|
|
|
+ this.showDivider = false
|
|
|
+ } else {
|
|
|
+ this.showDivider = true
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.showDivider = true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 文件上传组件初始化
|
|
|
+ * @param auth
|
|
|
+ * auth的值为"view"时,不可上传/编辑文件
|
|
|
+ * auth为其他值时,可上传/编辑文件
|
|
|
+ * @param fileList 要显示到文件上传列表中的文件。
|
|
|
+ * 注:文件必须要有url属性并且文件的url属性值必须是在oss中的路径值
|
|
|
+ * 例:'/attachment-file/xxx/xxx/2022/9/08/xxx.jpg'
|
|
|
+ * @param directory 要存放到oss的哪个文件夹下。
|
|
|
+ * 注:值为空时,默认存放到"public"文件夹
|
|
|
+ * @param maxValue 上传文件允许的最大值,单位:MB
|
|
|
+ * 注:值为空时,默认值为300MB
|
|
|
+ * @param dividerName 组件中divider的名称
|
|
|
+ * 注:值为空时,默认值为‘附件’
|
|
|
+ * @param uploadFlag ‘上传文件’按钮是否禁用
|
|
|
+ * 注:值为空时,默认值为false
|
|
|
+ * auth=view&&uploadFlag=false时 ‘上传文件’按钮禁用
|
|
|
+ * @param delFlag ‘删除’按钮是否禁用
|
|
|
+ * 注:值为空时,默认值为false
|
|
|
+ * auth=view&&delFlag=false时 ‘删除’按钮禁用
|
|
|
+ * @param showDivider ‘附件‘Divider是否展示
|
|
|
+ * 注:值为空时,默认值为true
|
|
|
+ * showDivider=false时 ‘附件‘Divider隐藏
|
|
|
+ */
|
|
|
+ async newUpload (auth, fileList, directory, maxValue, dividerName, uploadFlag, delFlag, showDivider) {
|
|
|
+ await this.fileLoadingFalse()
|
|
|
+ if (this.commonJS.isEmpty(fileList)) {
|
|
|
+ this.fileLoading = true
|
|
|
+ } else {
|
|
|
+ this.dataListLength = fileList.length
|
|
|
+ }
|
|
|
+ if (this.commonJS.isEmpty(dividerName)) {
|
|
|
+ this.dividerName = '附件'
|
|
|
+ } else {
|
|
|
+ this.dividerName = dividerName
|
|
|
+ }
|
|
|
+ if (directory !== undefined && directory !== null && directory !== '' && directory !== {}) {
|
|
|
+ this.directory = directory
|
|
|
+ } else {
|
|
|
+ this.directory = 'public'
|
|
|
+ }
|
|
|
+ if (maxValue !== undefined && maxValue !== null && maxValue !== '' && maxValue !== 0) {
|
|
|
+ this.maxValue = maxValue
|
|
|
+ } else {
|
|
|
+ this.maxValue = 300
|
|
|
+ }
|
|
|
+ this.auth = auth
|
|
|
+ if (this.commonJS.isEmpty(uploadFlag)) {
|
|
|
+ this.uploadFlag = false
|
|
|
+ } else {
|
|
|
+ if (uploadFlag !== true && uploadFlag !== false) {
|
|
|
+ this.uploadFlag = false
|
|
|
+ } else {
|
|
|
+ this.uploadFlag = uploadFlag
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (this.commonJS.isEmpty(delFlag)) {
|
|
|
+ this.delFlag = false
|
|
|
+ } else {
|
|
|
+ if (delFlag !== true && delFlag !== false) {
|
|
|
+ this.delFlag = false
|
|
|
+ this.createBy = delFlag
|
|
|
+ } else {
|
|
|
+ this.delFlag = delFlag
|
|
|
+ }
|
|
|
+ }
|
|
|
+ for await (let item of fileList) {
|
|
|
+ await this.ossService.getFileSizeByUrl(item.url).then((data) => {
|
|
|
+ item.lsUrl = data.url
|
|
|
+ item.size = data.size
|
|
|
+ this.dataList.push(item)
|
|
|
+ this.dataListNew.push(item)
|
|
|
+ if (this.dataListNew.length === fileList.length) {
|
|
|
+ this.fileLoading = true
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ // this.dataList = JSON.parse(JSON.stringify(fileList))
|
|
|
+ // this.dataListNew = JSON.parse(JSON.stringify(fileList))
|
|
|
+ if (this.commonJS.isEmpty(showDivider)) {
|
|
|
+ this.showDivider = true
|
|
|
+ } else {
|
|
|
+ if (showDivider === false) {
|
|
|
+ this.showDivider = false
|
|
|
+ } else {
|
|
|
+ this.showDivider = true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async httpRequest (file) {
|
|
|
+ await httpRequest(file, fileName(file), this.directory, this.maxValue)
|
|
|
+ },
|
|
|
+ uploadVideoProcess (event, file, fileList) {
|
|
|
+ this.progressFlag = true // 显示进度条
|
|
|
+ this.loadProgress = parseInt(event.percent) // 动态获取文件上传进度
|
|
|
+ if (this.loadProgress >= 100) {
|
|
|
+ this.loadProgress = 100
|
|
|
+ setTimeout(() => {
|
|
|
+ this.progressFlag = false
|
|
|
+ }, 1000) // 一秒后关闭进度条
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getSize (value) {
|
|
|
+ if (this.commonJS.isEmpty(value)) {
|
|
|
+ return '0 B'
|
|
|
+ } else {
|
|
|
+ let val = parseInt(value)
|
|
|
+ if (this.commonJS.isEmpty(val)) {
|
|
|
+ return '0 B'
|
|
|
+ }
|
|
|
+ if (isNaN(val)) {
|
|
|
+ return '0 B'
|
|
|
+ }
|
|
|
+ if (val === 0) {
|
|
|
+ return '0 B'
|
|
|
+ }
|
|
|
+ let k = 1024
|
|
|
+ let sizes = ['B', 'KB', 'MB', 'GB', 'PB', 'TB', 'EB', 'ZB', 'YB']
|
|
|
+ let i = Math.floor(Math.log(val) / Math.log(k))
|
|
|
+ let result = val / Math.pow(k, i);
|
|
|
+ let kb = parseFloat(result.toPrecision(3));
|
|
|
+ return kb + '' + sizes[i]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async changes (file, fileList) {
|
|
|
+ // if (file.status !== 'ready') {
|
|
|
+ // return
|
|
|
+ // }
|
|
|
+ if (!beforeAvatarUpload(file, fileList, this.maxValue)) {
|
|
|
+ this.$message.error('文件大小不能超过 ' + this.maxValue + ' MB!')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.dataListNew = []
|
|
|
+ this.dataList.forEach((item) => {
|
|
|
+ this.dataListNew.push(item)
|
|
|
+ })
|
|
|
+ for (let item of fileList) {
|
|
|
+ item.createTime = moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
|
|
|
+ item.createBy = {
|
|
|
+ id: '',
|
|
|
+ name: ''
|
|
|
+ }
|
|
|
+ item.createBy.id = this.$store.state.user.id
|
|
|
+ item.createBy.name = this.$store.state.user.name
|
|
|
+ this.dataListNew.push(item)
|
|
|
+ }
|
|
|
+ for await (let item of this.dataListNew) {
|
|
|
+ if (item.raw !== undefined && item.raw !== null && item.raw !== {}) {
|
|
|
+ item.url = item.raw.url
|
|
|
+ if (item.raw.url !== undefined && item.raw.url !== null && item.raw.url !== {}) {
|
|
|
+ await this.ossService.getTemporaryUrl(item.raw.url).then((data) => {
|
|
|
+ item.lsUrl = data
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.tableKey = Math.random()
|
|
|
+ this.uploadKey = Math.random()
|
|
|
+ },
|
|
|
+ showFile (row) {
|
|
|
+ console.log('row', row)
|
|
|
+ openWindowOnUrl(row)
|
|
|
+ },
|
|
|
+ onPreview (url) {
|
|
|
+ this.url = url
|
|
|
+ this.showViewer = true
|
|
|
+ },
|
|
|
+ // 关闭查看器
|
|
|
+ closeViewer () {
|
|
|
+ this.url = ''
|
|
|
+ this.showViewer = false
|
|
|
+ },
|
|
|
+ toHref (row) {
|
|
|
+ toHref(row)
|
|
|
+ },
|
|
|
+ async deleteById (row, index) {
|
|
|
+ console.log('row', row)
|
|
|
+ // this.$refs.upload.handleRemove(this.dataListNew[index])
|
|
|
+ await this.dataListNew.splice(index, 1)
|
|
|
+ await this.dataList.splice(index, 1)
|
|
|
+ if (this.commonJS.isNotEmpty(row.id)) {
|
|
|
+ this.ossService.deleteMsgById(row.id)
|
|
|
+ }
|
|
|
+ this.tableKey = Math.random()
|
|
|
+ this.uploadKey = Math.random()
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 关闭dialog时使用 清除el-upload中上传的文件
|
|
|
+ */
|
|
|
+ clearUpload () {
|
|
|
+ this.$refs.upload.clearFiles()
|
|
|
+ this.dataList = []
|
|
|
+ this.dataListNew = []
|
|
|
+ this.createBy = ''
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 获取当前文件列表中的文件数据
|
|
|
+ */
|
|
|
+ getDataList () {
|
|
|
+ return this.dataListNew
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 判断进度条是否结束,附件是否加载完成
|
|
|
+ * @returns {boolean}
|
|
|
+ */
|
|
|
+ checkProgress () {
|
|
|
+ if (this.progressFlag === true) {
|
|
|
+ this.$message.warning('请等待附件上传完成再进行操作')
|
|
|
+ return true
|
|
|
+ }
|
|
|
+ if (this.fileLoading === false) {
|
|
|
+ this.$message.warning('请等待附件加载完成再进行操作')
|
|
|
+ if (this.dataListLength === this.dataListNew.length) {
|
|
|
+ this.fileLoading = true
|
|
|
+ }
|
|
|
+ return true
|
|
|
+ }
|
|
|
+ return false
|
|
|
+ },
|
|
|
+ ifName (row) {
|
|
|
+ if (this.commonJS.isEmpty(row.name)) {
|
|
|
+ row.name = '---'
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ let suffix = row.name.substring(row.name.lastIndexOf('.') + 1)
|
|
|
+ if (suffix === 'jpg' || suffix === 'png' || suffix === 'gif' || suffix === 'bmp' || suffix === 'jpeg') {
|
|
|
+ return true
|
|
|
+ } else {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ fileLoadingFalse () {
|
|
|
+ this.fileLoading = false
|
|
|
+ },
|
|
|
+ // 开启/关闭页面的加载中状态
|
|
|
+ changeLoading (loading) {
|
|
|
+ if (this.commonJS.isNotEmpty(loading)) {
|
|
|
+ this.loading = loading
|
|
|
+ } else {
|
|
|
+ this.loading = false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+<style>
|
|
|
+ .el-divider__text {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+</style>
|