|
|
@@ -1,428 +1,545 @@
|
|
|
<!--文件上传组件-->
|
|
|
<template>
|
|
|
- <div :key="uploadKey">
|
|
|
- <el-divider v-if="showDivider" content-position="left"><i class="el-icon-document"></i> <span style="color: red; font-size: 20px">*</span>{{dividerName}}<a style="color: red;font-size: 14px">仅能上传“pdf、doc、docx、xls、xlsx”格式文件</a></el-divider>
|
|
|
- <el-upload ref="upload" style="display: inline-block; :show-header='status'" action=""
|
|
|
- :limit="999" :http-request="httpRequest"
|
|
|
- multiple
|
|
|
- :on-exceed="(files, fileList) =>{
|
|
|
+ <div :key="uploadKey">
|
|
|
+ <el-divider v-if="showDivider" content-position="left"><i class="el-icon-document"></i> <span style="color: red; font-size: 20px">*</span>{{dividerName}}<a style="color: red;font-size: 14px"> 仅能上传“pdf、doc、docx、xls、xlsx”格式文件</a></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-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)" :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>
|
|
|
+ :show-file-list="false"
|
|
|
+ :before-upload="beforeUpload"
|
|
|
+ :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-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,
|
|
|
- exnameFix,
|
|
|
- // 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) {
|
|
|
- console.log('fileList',fileList)
|
|
|
- await this.fileLoadingFalse()
|
|
|
- if (this.commonJS.isEmpty(fileList)) {
|
|
|
- this.fileLoading = true
|
|
|
- } else {
|
|
|
- fileList.forEach((item)=>{
|
|
|
- let suffix = item.name.substring(item.name.lastIndexOf('.') + 1)
|
|
|
- if (suffix === 'pdf' || suffix === 'doc' || suffix === 'docx' || suffix === 'xls' || suffix === 'xlsx') {
|
|
|
+ // 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,
|
|
|
+ exnameFix,
|
|
|
+ // 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: [],
|
|
|
+ oldDataList: [],
|
|
|
+ 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: '',
|
|
|
+ uploadDelFlag: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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) {
|
|
|
+ this.uploadKey = Math.random()
|
|
|
+ await this.fileLoadingFalse()
|
|
|
+ if (this.commonJS.isEmpty(fileList)) {
|
|
|
+ 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
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.oldDataList = []
|
|
|
+ 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.oldDataList.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)
|
|
|
+ },
|
|
|
+ async beforeUpload(file) {
|
|
|
+ console.log("beforeUpload",file)
|
|
|
+ if(this.uploadDelFlag){
|
|
|
+ this.$message.warning('该文件已上传，请勿重复上传');
|
|
|
+ this.uploadKey = Math.random()
|
|
|
+
|
|
|
+ return true; // 取消上传
|
|
|
+ }else{
|
|
|
|
|
|
+ let suffix = file.name.substring(file.name.lastIndexOf('.') + 1)
|
|
|
+ if (suffix === 'pdf' || suffix === 'doc' || suffix === 'docx' || suffix === 'xls' || suffix === 'xlsx') {
|
|
|
+ this.httpRequest(file);
|
|
|
+ } else {
|
|
|
+ this.$message.error('只有“pdf、doc、docx、xls、xlsx”格式文件的类型可以上传')
|
|
|
+ return false; // 取消上传
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ // 其他判定逻辑...
|
|
|
+ return true; // 允许上传
|
|
|
+ },
|
|
|
+ uploadVideoProcess (event, file, fileList) {
|
|
|
+ let parent = this.$parent
|
|
|
+ while (!parent.inputForm) {
|
|
|
+ parent = parent['$parent']
|
|
|
+ }
|
|
|
+ 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 {
|
|
|
- this.$message.error('只有“pdf、doc、docx、xls、xlsx”格式文件的类型可以上传')
|
|
|
- this.dataListNew = []
|
|
|
- this.dataList=[]
|
|
|
- this.clearUpload()
|
|
|
- }
|
|
|
- })
|
|
|
- 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 (!exnameFix(file, '1', 'doc,docx,pdf,xls,xlsx')) {
|
|
|
- // for (let i = 0; i <this.dataListNew.length ; i++) {
|
|
|
- // this.deleteById(this.dataListNew[i],i,this.dataListNew)
|
|
|
- // }
|
|
|
- // this.fileList = []
|
|
|
- // this.dataListNew = []
|
|
|
- // this.$message.error('文件仅支持 xml 格式!')
|
|
|
- return
|
|
|
- }
|
|
|
- fileList.forEach((item)=>{
|
|
|
- let suffix = item.name.substring(item.name.lastIndexOf('.') + 1)
|
|
|
- if (suffix === 'pdf' || suffix === 'doc' || suffix === 'docx' || suffix === 'xls' || suffix === 'xlsx') {
|
|
|
+ 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) {
|
|
|
+ this.uploadKey = Math.random()
|
|
|
+ console.log(fileList)
|
|
|
+ this.uploadDelFlag = false;
|
|
|
+ // if (file.status !== 'ready') {
|
|
|
+ // return
|
|
|
+ // }
|
|
|
+ if (!beforeAvatarUpload(file, fileList, this.maxValue)) {
|
|
|
+ this.$message.error('文件大小不能超过 ' + this.maxValue + ' MB!')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ for (let i = 0; i < fileList.length; i++) {
|
|
|
+ var fileItem = fileList[i];
|
|
|
+ if(fileList[i].raw !== undefined && fileList[i].raw !== null && fileList[i].raw !== {}){
|
|
|
+ fileItem = fileList[i].raw;
|
|
|
+ }
|
|
|
+ let suffix = fileItem.name.substring(fileItem.name.lastIndexOf('.') + 1)
|
|
|
+ if (suffix === 'pdf' || suffix === 'doc' || suffix === 'docx' || suffix === 'xls' || suffix === 'xlsx') {
|
|
|
|
|
|
- } else {
|
|
|
- this.$message.error('只有“pdf、doc、docx、xls、xlsx”格式文件的类型可以上传')
|
|
|
- this.dataListNew = []
|
|
|
- this.dataList = []
|
|
|
- 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
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
- console.log('path',file);
|
|
|
- }
|
|
|
- this.tableKey = Math.random()
|
|
|
- this.uploadKey = Math.random()
|
|
|
+ }else{
|
|
|
|
|
|
- this.$emit('updateSealType',this.dataListNew)
|
|
|
- },
|
|
|
- showFile (row) {
|
|
|
- console.log('row', row)
|
|
|
- openWindowOnUrl(row)
|
|
|
- },
|
|
|
- onPreview (url) {
|
|
|
- this.url = url
|
|
|
- this.showViewer = true
|
|
|
+ console.log("删除该文件")
|
|
|
+ fileList.splice(i, 1);
|
|
|
+ i--;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- },
|
|
|
- // 关闭查看器
|
|
|
- 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
|
|
|
+ var verificationFileList = []
|
|
|
+ if(this.oldDataList){
|
|
|
+ for (let item of this.oldDataList) {
|
|
|
+ verificationFileList.push(item)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ for (let item of fileList) {
|
|
|
+ verificationFileList.push(item)
|
|
|
+ }
|
|
|
+ var fileCount = 0;
|
|
|
+ for (let item of verificationFileList) {
|
|
|
+ var fileItem = item;
|
|
|
+ if(item.raw !== undefined && item.raw !== null && item.raw !== {}){
|
|
|
+ fileItem = item.raw;
|
|
|
+ }
|
|
|
+ if(file.raw.name === fileItem.name){
|
|
|
+ fileCount ++
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- }
|
|
|
- },
|
|
|
- fileLoadingFalse () {
|
|
|
- this.fileLoading = false
|
|
|
- },
|
|
|
- // 开启/关闭页面的加载中状态
|
|
|
- changeLoading (loading) {
|
|
|
- if (this.commonJS.isNotEmpty(loading)) {
|
|
|
- this.loading = loading
|
|
|
- } else {
|
|
|
- this.loading = false
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+
|
|
|
+ if(fileCount>1){
|
|
|
+ this.uploadDelFlag = true;
|
|
|
+ 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) {
|
|
|
+ if(fileListNames.length === 0 || fileListNames.indexOf(item.name) === -1){
|
|
|
+ this.fileList.push(item)
|
|
|
+ }
|
|
|
+ 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 (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) {
|
|
|
+ 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;
|
|
|
+
|
|
|
+ let parent = this.$parent
|
|
|
+ while (!parent.inputForm) {
|
|
|
+ parent = parent['$parent']
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async deleteFileById (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;
|
|
|
+
|
|
|
+ let parent = this.$parent
|
|
|
+ while (!parent.inputForm) {
|
|
|
+ parent = parent['$parent']
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async parentDeleteById (row) {
|
|
|
+ console.log('this.dataListNew',this.dataListNew)
|
|
|
+ var index = null;
|
|
|
+ for (var j = 0; j < this.dataListNew.length; j++) {
|
|
|
+ if (this.dataListNew[j].name === row.name) {
|
|
|
+ index = j;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ 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 < this.fileList.length; i++) {
|
|
|
+ if (this.fileList[i].name !== row.name) {
|
|
|
+ newFileList.push(this.fileList[i])
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.fileList = newFileList;
|
|
|
+
|
|
|
+ let parent = this.$parent
|
|
|
+ while (!parent.inputForm) {
|
|
|
+ parent = parent['$parent']
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ async deleteFileinfo (row) {
|
|
|
+ var index = null;
|
|
|
+ for (var j = 0; j < this.dataListNew.length; j++) {
|
|
|
+ if (this.dataListNew[j].name === row.name) {
|
|
|
+ index = j;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ await this.dataListNew.splice(index, 1)
|
|
|
+ await this.dataList.splice(index, 1)
|
|
|
+ var newFileList = [];
|
|
|
+ for (var i = 0; i < this.fileList.length; i++) {
|
|
|
+ if (this.fileList[i].name !== row.name) {
|
|
|
+ newFileList.push(this.fileList[i])
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.fileList = newFileList;
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 关闭dialog时使用 清除el-upload中上传的文件
|
|
|
+ */
|
|
|
+ clearUpload () {
|
|
|
+ this.fileList = []//用于清除上传文件的缓存
|
|
|
+ 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;
|
|
|
- }
|
|
|
+ .el-divider__text {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
</style>
|
user5