xg_total_process_master_cloud_vue/src/views/common/InvoiceReimbursementUpLoadComponent.vue

<!--文件上传组件-->
<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" :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> <span
					style="margin-left: 20px;font-size:14px;font-weight:normal;color:red;" type="primary">
					上传报销的数电发票xml文件</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,
	fileNameInvoice,
	// 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, fileNameInvoice(file), this.directory, this.maxValue)
		},
		async beforeUpload(file) {
			if (this.uploadDelFlag) {
				this.$message.warning('该文件已上传，请勿重复上传');
				this.uploadKey = Math.random()

				return true; // 取消上传
			} else {
				// 对文件进行判定
				const isXml = file.type === 'text/xml'; // 假设只接受 XML 文件
				if (!isXml) {
					this.$message.error('只能上传 XML 文件');
					return false; // 取消上传
				} else {
					try {
						//对上传的xml文件信息进行处理并通过后端接口进行解析返回到父页面进行调整
						const formBody = new FormData()
						formBody.append('file', file)
						await this.ossService.disposeXmlFile(formBody).then((data) => {
							if (Object.keys(data).length === 0) {
								this.$message.warning('上传的数电发票格式错误');
								this.loading = false;
								// 在验证失败时删除已经添加的行
								const index = this.fileList.findIndex(item => item.name === file.name);
								if (index !== -1) {
									this.deleteFileById(this.fileList[index], index, this.fileList);
								}
							} else {
								let parent = this.$parent
								while (!parent.invoiceReimbursementDispose) {
									parent = parent['$parent']
								}
								var flag = parent.invoiceReimbursementDispose(data)
								//var flag = this.$parent.invoiceReimbursementDispose(data);
								if (!flag) {
									this.httpRequest(file);
								} else {
									this.$message.error('发票号：' + data.InvoiceNumber + "已上传，请勿重复上传")
									// 在验证失败时删除已经添加的行
									const index = this.dataListNew.findIndex(item => item.name === file.name);
									if (index !== -1) {
										this.deleteFileById(this.dataListNew[index], index, this.dataListNew);
									}
									this.loading = false;
								}

							}
						})
					} catch (error) {
						console.error(error);
					}
				}
				// 其他判定逻辑...
				return true; // 允许上传
			}
		},
		handleOnDownToOss(row, url) {
			this.ossService.getFileSizeByUrl(url).then((data) => {
				let file = {
					lsUrl: data.url,
					size: data.size,
					createBy: {
						id: this.$store.state.user.id,
						name: this.$store.state.user.name,
					},
					createTime: moment(new Date()).format('YYYY-MM-DD HH:mm:ss'),
					name: row.fileName,
					percentage: 100,
					status: "success",
					url: url
				}
				this.dataList.push(file)
				this.dataListNew.push(file)
				this.fileList.push(file)
			})
		},
		uploadVideoProcess(event, file, fileList) {
			let parent = this.$parent
			while (!parent.inputForm) {
				parent = parent['$parent']
			}
			var reimbursementType = parent.inputForm.reimbursementType
			this.progressFlag = true // 显示进度条
			this.loadProgress = parseInt(event.percent) // 动态获取文件上传进度
			if (this.loadProgress >= 100) {
				this.loadProgress = 100
				if ("1" === reimbursementType) {
					var fileName = file.raw.name;

					const spliceLength2 = fileName.lastIndexOf(".");
					var fileNameSuffix = fileName.slice(spliceLength2 + 1);
					let lowerFileNameSuffix = fileNameSuffix.toLowerCase();
					if (lowerFileNameSuffix === "xml") {
						//对上传的xml文件信息进行处理并通过后端接口进行解析返回到父页面进行调整
						const formBody = new FormData()
						formBody.append('file', file.raw)
						this.ossService.disposeXmlFile(formBody).then((data) => {
							if (Object.keys(data).length > 0) {
								parent.invoiceReimbursementDisposeData(data, file)
							} else {
								this.$message.warning('上传的数电发票格式错误')
								this.loading = false;
								// 在验证失败时删除已经添加的行
								const index = this.fileList.findIndex(item => item.name === file.name);
								if (index !== -1) {
									this.deleteFileById(this.fileList[index], index, this.fileList);
								}
							}
						})
					}

				}
				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) {
			this.uploadKey = Math.random()
			console.log(fileList)
			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;
				}
				const isXml = fileItem.type === 'text/xml'; // 假设只接受 XML 文件
				if (!isXml) {
					console.log("删除该文件")
					//fileList[i].remove()
					fileList.splice(i, 1);
					// Since the element is removed, decrease the index by 1 to adjust for the removed element
					i--;
				}
			}
			this.uploadDelFlag = false;
			// if (file.status !== 'ready') {
			//   return
			// }
			if (!beforeAvatarUpload(file, fileList, this.maxValue)) {
				this.$message.error('文件大小不能超过 ' + this.maxValue + ' MB!')
				return
			}
			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++
				}
			}


			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) {
			console.log("dasfgasdas")
			// 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']
			}

			var reimbursementType = parent.inputForm.reimbursementType
			if ("1" === reimbursementType) {
				var fileName = ''
				if (null === row.raw || undefined === row.raw) {
					fileName = row.name;
				} else {
					fileName = row.raw.name;
				}

				const spliceLength2 = fileName.lastIndexOf(".");
				var fileNameSuffix = fileName.slice(spliceLength2 + 1);
				let lowerFileNameSuffix = fileNameSuffix.toLowerCase();
				if (lowerFileNameSuffix === "xml") {
					//对上传的xml文件信息进行处理并通过后端接口进行解析返回到父页面进行调整
					const formBody = new FormData()
					if (null === row.raw || undefined === row.raw) {
						this.ossService.downLoadFileDisposeXmlFile(row.url).then((data) => {
							parent.deleteInvoiceReimbursementDisposeData(data)
						})
					} else {
						formBody.append('file', row.raw)
						this.ossService.disposeXmlFile(formBody).then((data) => {
							if (data) {
								parent.deleteInvoiceReimbursementDisposeData(data)
							} else {
								this.$message.warning('上传的数电发票格式错误')
								this.loading = false;
								// 在验证失败时删除已经添加的行
								const index = this.fileList.findIndex(item => item.name === file.name);
								if (index !== -1) {
									this.deleteFileById(this.fileList[index], index, this.fileList);
								}
							}
						})
					}
				}

			}
		},
		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']
			}
			var reimbursementType = parent.inputForm.reimbursementType
			if ("1" === reimbursementType) {
				var fileName = ''
				if (null === row.raw || undefined === row.raw) {
					fileName = row.name;
				} else {
					fileName = row.raw.name;
				}

				const spliceLength2 = fileName.lastIndexOf(".");
				var fileNameSuffix = fileName.slice(spliceLength2 + 1);
				let lowerFileNameSuffix = fileNameSuffix.toLowerCase();
				if (lowerFileNameSuffix === "xml") {
					//对上传的xml文件信息进行处理并通过后端接口进行解析返回到父页面进行调整
					const formBody = new FormData()
					if (null === row.raw || undefined === row.raw) {
						this.ossService.downLoadFileDisposeXmlFile(row.url).then((data) => {
							//parent.deleteInvoiceReimbursementDisposeData(data)
						})
					} else {
						formBody.append('file', row.raw)
						this.ossService.disposeXmlFile(formBody).then((data) => {
							if (data) {
								//parent.deleteInvoiceReimbursementDisposeData(data)
							} else {
								this.$message.warning('上传的数电发票格式错误')
								this.loading = false;
								// 在验证失败时删除已经添加的行
								const index = this.fileList.findIndex(item => item.name === file.name);
								if (index !== -1) {
									this.deleteFileById(this.fileList[index], index, this.fileList);
								}
							}
						})
					}
				}

			}
		},
		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']
			}
			var reimbursementType = parent.inputForm.reimbursementType

			if ("1" === reimbursementType) {
				var fileName = ''
				if (null === row.raw || undefined === row.raw) {
					fileName = row.name;
				} else {
					fileName = row.raw.name;
				}

				const spliceLength2 = fileName.lastIndexOf(".");
				var fileNameSuffix = fileName.slice(spliceLength2 + 1);
				let lowerFileNameSuffix = fileNameSuffix.toLowerCase();
				if (lowerFileNameSuffix === "xml") {
					//对上传的xml文件信息进行处理并通过后端接口进行解析返回到父页面进行调整
					const formBody = new FormData()
					if (null === row.raw || undefined === row.raw) {
						this.ossService.downLoadFileDisposeXmlFile(row.url).then((data) => {
							parent.deleteInvoiceReimbursementDisposeData(data)
						})
					} else {
						formBody.append('file', row.raw)
						this.ossService.disposeXmlFile(formBody).then((data) => {
							parent.deleteInvoiceReimbursementDisposeData(data)
						})
					}
				}

			}
		},
		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;
}
</style>