|
|
@@ -0,0 +1,418 @@
|
|
|
+<!--文件上传组件-->
|
|
|
+<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="1"
|
|
|
+ :http-request="httpRequest" :on-exceed="(files, fileList) => {
|
|
|
+ $message.warning(`一次仅限上传1份文件`)
|
|
|
+ }" :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>
|
|
|
+ <span style="margin-left: 20px;color: red;">提示:一次仅限上传1份文件</span>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ </el-upload>
|
|
|
+ <div style="height: calc(100% - 80px);margin-top: 10px">
|
|
|
+ <!-- 进度条 -->
|
|
|
+ <el-progress style="margin-left: 5em" v-if="progressFlag" :percentage="loadProgress"></el-progress>
|
|
|
+ <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, fileList)"
|
|
|
+ :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)
|
|
|
+ this.fileList.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 (file.status !== 'ready') {
|
|
|
+ let fileListNamesList = []
|
|
|
+ console.log(JSON.stringify(this.fileList));
|
|
|
+ this.fileList.forEach(fileItem => {
|
|
|
+ fileListNamesList.push(fileItem.name)
|
|
|
+ })
|
|
|
+
|
|
|
+ if (fileListNamesList.indexOf(file.name) != -1) {
|
|
|
+ console.log(this.fileList);
|
|
|
+
|
|
|
+ this.$message.error(`${file.name}已存在，无法重复上传`)
|
|
|
+
|
|
|
+ return
|
|
|
+ } else {
|
|
|
+
|
|
|
+ if (!beforeAvatarUpload(file, fileList, this.maxValue)) {
|
|
|
+ this.$message.error('文件大小不能超过 ' + this.maxValue + ' MB!')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ // this.dataListNew = []
|
|
|
+ // this.dataList.forEach((item) => {
|
|
|
+ // this.dataListNew.push(item)
|
|
|
+ // })
|
|
|
+ var fileListNames = []
|
|
|
+ for (let fileItem of this.fileList) {
|
|
|
+ fileListNames.push(fileItem.name)
|
|
|
+ }
|
|
|
+ // for (let item of fileList) {
|
|
|
+
|
|
|
+
|
|
|
+ let item1 = JSON.parse(JSON.stringify(file))
|
|
|
+ // if (fileListNames.length === 0 || fileListNames.indexOf(item1.name) === -1) {
|
|
|
+ this.fileList.push(item1)
|
|
|
+ // }
|
|
|
+ item1.createTime = moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
|
|
|
+ item1.createBy = {
|
|
|
+ id: '',
|
|
|
+ name: ''
|
|
|
+ }
|
|
|
+ item1.createBy.id = this.$store.state.user.id
|
|
|
+ item1.createBy.name = this.$store.state.user.name
|
|
|
+ this.dataListNew.push(item1)
|
|
|
+ this.dataList.push(item1)
|
|
|
+ // }
|
|
|
+ for (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 !== {}) {
|
|
|
+ this.ossService.getTemporaryUrl(item.raw.url).then((data) => {
|
|
|
+ item.lsUrl = data
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ 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, fileList) {
|
|
|
+ // 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)
|
|
|
+ }
|
|
|
+ var newFileList = [];
|
|
|
+ for (var i = 0; i < fileList.length; i++) {
|
|
|
+ if (fileList[i].name !== row.name) {
|
|
|
+ newFileList.push(fileList[i])
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.fileList = newFileList;
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 关闭dialog时使用 清除el-upload中上传的文件
|
|
|
+ */
|
|
|
+ clearUpload() {
|
|
|
+ this.$refs.upload.clearFiles()
|
|
|
+ this.dataList = []
|
|
|
+ this.dataListNew = []
|
|
|
+ this.fileList = []
|
|
|
+ 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>
|
huangguoce