|
|
@@ -0,0 +1,795 @@
|
|
|
+<!--文件上传组件-->
|
|
|
+<template>
|
|
|
+ <div :key="uploadKey">
|
|
|
+ <el-divider v-if="showDivider" content-position="left"><i class="el-icon-document"></i> {{dividerName}}
|
|
|
+ <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>
|
|
|
+ </el-divider>
|
|
|
+ <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 prop="invoiceType" label="发票类型" align="center" show-overflow="title">
|
|
|
+ <template #default="scope">
|
|
|
+ {{
|
|
|
+ $dictUtils.getDictLabel(
|
|
|
+ "invoice_reimbursement_type",
|
|
|
+ scope.row.invoiceType,
|
|
|
+ "-"
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="invoiceProjectName" label="发票项目名" align="center" :edit-render="{}" show-overflow="title">
|
|
|
+ <template #edit="scope">
|
|
|
+ <el-input maxlength="50" readonly="true" v-model="scope.row.invoiceProjectName" ></el-input>
|
|
|
+ </template>
|
|
|
+ </el-table-column >
|
|
|
+ <el-table-column prop="number" label="发票号" align="center" :edit-render="{}" show-overflow="title">
|
|
|
+ <template #edit="scope">
|
|
|
+ <el-input oninput ="value=value.replace(/\D|^/g,'')" readonly="true" maxlength="30" @change="isExict(scope.row)" v-model="scope.row.number" ></el-input>
|
|
|
+ </template>
|
|
|
+ </el-table-column >
|
|
|
+ <el-table-column prop="invoiceDate" label="开票日期" align="center" :edit-render="{}" show-overflow="title">
|
|
|
+ <template v-slot:edit="scope">
|
|
|
+ <el-input v-model="scope.row.invoiceDate" readonly="true" type="date" transfer placeholder="请选择日期"></el-input>
|
|
|
+ </template>
|
|
|
+ </el-table-column >
|
|
|
+ <el-table-column prop="invoiceUnit" label="开票单位" align="center" :edit-render="{}" show-overflow="title">
|
|
|
+ <template #edit="scope">
|
|
|
+ <el-input maxlength="50" readonly="true" v-model="scope.row.invoiceUnit" ></el-input>
|
|
|
+ </template>
|
|
|
+ </el-table-column >
|
|
|
+ <el-table-column prop="buyerName" label="购买方名称" align="center" :edit-render="{}" show-overflow="title">
|
|
|
+ <template #edit="scope">
|
|
|
+ <el-input maxlength="50" readonly="true" v-model="scope.row.buyerName" ></el-input>
|
|
|
+ </template>
|
|
|
+ </el-table-column >
|
|
|
+ <el-table-column prop="amount" label="金额" align="center" :edit-render="{}" show-overflow="title">
|
|
|
+ <template #edit="scope">
|
|
|
+ <el-input maxlength="15" readonly="true" v-model="scope.row.amount" @input="scope.row.amount = twoDecimalPlaces(scope.row.amount)" @change="countAmount(scope.row)"></el-input>
|
|
|
+ </template>
|
|
|
+ </el-table-column >
|
|
|
+ <el-table-column prop="taxAmount" label="税额" align="center" :edit-render="{}" show-overflow="title">
|
|
|
+ <template #edit="scope">
|
|
|
+ <el-input maxlength="15" readonly="true" v-model="scope.row.taxAmount" @input="scope.row.taxAmount = twoDecimalPlaces(scope.row.taxAmount)" @change="countAmount(scope.row)"></el-input>
|
|
|
+ </template>
|
|
|
+ </el-table-column >
|
|
|
+ <el-table-column prop="count" label="价税合计" align="center" :edit-render="{}" show-overflow="title">
|
|
|
+ <template #edit="scope">
|
|
|
+ <el-input disabled="true" v-model="scope.row.count" ></el-input>
|
|
|
+ </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="deleteFileById(scope.row, scope.$index,fileList)" :disabled="auth==='view'&&delFlag === false&&createBy!==scope.row.createBy.name">删除</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,
|
|
|
+ uploadingCount: 0, // 记录当前正在上传的文件数量
|
|
|
+ totalCount: 0, // 记录总的文件数量
|
|
|
+ duplicateFileNames: [], // 存储重复文件名
|
|
|
+ noXmlFiles: [], // 存储非当前公司的文件名
|
|
|
+ reNumFiles: [], // 存储重复发票号
|
|
|
+ toCompany:'', //用于区分属于哪个公司的数电发票,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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隐藏
|
|
|
+ * * @param toCompany ‘动态区分属于那个公司
|
|
|
+ * 注：值为空时，默认值为 '江苏兴光项目管理有限公司'
|
|
|
+ *
|
|
|
+ *
|
|
|
+ */
|
|
|
+ async newUpload (auth, fileList, directory, maxValue, dividerName, uploadFlag, delFlag, showDivider,toCompany) {
|
|
|
+ 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 (this.commonJS.isEmpty(toCompany)) {
|
|
|
+ this.dividerName = '江苏兴光项目管理有限公司'
|
|
|
+ } else {
|
|
|
+ this.toCompany = toCompany
|
|
|
+ }
|
|
|
+ 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 false; // 取消上传
|
|
|
+ }else{
|
|
|
+ // 对文件进行判定
|
|
|
+ const isXml = file.type === 'text/xml'; // 假设只接受 XML 文件
|
|
|
+ if (!isXml) {
|
|
|
+ this.$message.error('只能上传 XML 文件');
|
|
|
+ return false; // 取消上传
|
|
|
+ }
|
|
|
+ // 其他判定逻辑...
|
|
|
+ return true; // 允许上传
|
|
|
+ }
|
|
|
+ },
|
|
|
+ uploadVideoProcess (event, file, fileList) {
|
|
|
+ this.progressFlag = true // 显示进度条
|
|
|
+ this.loadProgress = parseInt(event.percent) // 动态获取文件上传进度
|
|
|
+ if (this.loadProgress >= 100) {
|
|
|
+ this.loadProgress = 100
|
|
|
+ // 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){
|
|
|
+ // this.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) // 一秒后关闭进度条
|
|
|
+ }
|
|
|
+ },
|
|
|
+ invoiceReimbursementDisposeData: function (data,file) {
|
|
|
+ var invoiceReimbursements = this.dataListNew;
|
|
|
+ //创建判断值，若行信息存在相同的发票号，则进行数据检查调整，若不存在发票号，则新增行，并将信息写入
|
|
|
+ var includeFlag = false;
|
|
|
+ if(!invoiceReimbursements) {
|
|
|
+ invoiceReimbursements = [];
|
|
|
+ }
|
|
|
+ if(this.toCompany === data.BuyerInformationBuyerName){
|
|
|
+ invoiceReimbursements.forEach(item => {
|
|
|
+ if (file.name === item.name){
|
|
|
+ item.invoiceType = data.InherentLabelGeneralOrSpecialVATLabelCode;
|
|
|
+ item.invoiceProjectName = data.IssuItemInformationItemName;
|
|
|
+ item.number = data.InvoiceNumber;
|
|
|
+ item.invoiceDate = this.formatDate(data.IssueTime);
|
|
|
+ item.invoiceUnit = data.SellerInformationSellerName;
|
|
|
+ item.amount = data.BasicInformationTotalAmWithoutTax;
|
|
|
+ item.taxAmount = data.BasicInformationTotalTaxAm;
|
|
|
+ item.count = data.BasicInformationTotalTaxincludedAmount;
|
|
|
+ item.buyerName = data.BuyerInformationBuyerName;
|
|
|
+ }
|
|
|
+
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ formatDate(date) {
|
|
|
+ // 正则表达式匹配 "xxx年x月x日" 格式的日期
|
|
|
+ const regex = /(\d{4})年(\d{1,2})月(\d{1,2})日/;
|
|
|
+ const matches = date.match(regex);
|
|
|
+ const parts = date.split('/');
|
|
|
+
|
|
|
+ if (matches) {
|
|
|
+ const year = matches[1]; // 年
|
|
|
+ const month = String(matches[2]).padStart(2, '0'); // 月，确保是两位数
|
|
|
+ const day = String(matches[3]).padStart(2, '0'); // 日，确保是两位数
|
|
|
+ return `${year}-${month}-${day}`; // 返回 yyyy-mm-dd 格式的日期
|
|
|
+ } else if(parts.length === 3){
|
|
|
+ const year = parts[0]; // 年份
|
|
|
+ const month = String(parts[1]).padStart(2, '0'); // 月，确保是两位数
|
|
|
+ const day = String(parts[2]).padStart(2, '0'); // 日，确保是两位数
|
|
|
+ return `${year}-${month}-${day}`; // 返回 yyyy-mm-dd 格式的日期
|
|
|
+ } else {
|
|
|
+ const d = new Date(date);
|
|
|
+ const year = d.getFullYear();
|
|
|
+ const month = String(d.getMonth() + 1).padStart(2, '0'); // 获取月份并确保是两位数
|
|
|
+ const day = String(d.getDate()).padStart(2, '0'); // 获取日期并确保是两位数
|
|
|
+ return `${year}-${month}-${day}`;
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ 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',fileList)
|
|
|
+
|
|
|
+ // 用来存放没有重复且有有效URL的文件，准备上传
|
|
|
+ let filesToUpload = [];
|
|
|
+ let validFiles = [];
|
|
|
+
|
|
|
+ // 用于存储已经上传的文件 `lastModified` + `size` 作为唯一标识
|
|
|
+ let uploadedFileIdentifiers = new Set();
|
|
|
+ for (let existingFile of this.dataListNew) {
|
|
|
+ const existingFileName = existingFile.name; // 假设每个文件有 `name` 属性
|
|
|
+ uploadedFileIdentifiers.add(existingFileName); // 将已有文件的名称添加到 Set 中
|
|
|
+ }
|
|
|
+
|
|
|
+ // 2. 文件大小检查
|
|
|
+ if (!beforeAvatarUpload(file, fileList, this.maxValue)) {
|
|
|
+ this.$message.error('文件大小不能超过 ' + this.maxValue + ' MB!');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 3. 验证文件是否重复（使用 `lastModified` 和 `size` 来判断）
|
|
|
+ for (let item of fileList) {
|
|
|
+ const fileName = item.raw ? item.raw.name : item.name;
|
|
|
+ const fileIdentifier = fileName; // 唯一标识：文件大小 + 修改时间
|
|
|
+
|
|
|
+ // 检查该文件标识是否已存在
|
|
|
+ if (uploadedFileIdentifiers.has(fileIdentifier)) {
|
|
|
+ // 记录重复文件名
|
|
|
+ this.duplicateFileNames.push(fileName);
|
|
|
+ } else {
|
|
|
+ // 文件没有重复，加入上传列表
|
|
|
+ filesToUpload.push(item);
|
|
|
+ uploadedFileIdentifiers.add(fileIdentifier); // 将文件标识加入已上传集合
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 4. 如果没有文件需要上传，则直接返回
|
|
|
+ // if (filesToUpload.length === 0) return;
|
|
|
+
|
|
|
+ // 5. 删除无效URL的文件
|
|
|
+ let invalidFiles = []; // 用于存储需要删除的文件
|
|
|
+
|
|
|
+ // 使用异步操作来判断文件URL的有效性
|
|
|
+ for (let item of filesToUpload) {
|
|
|
+ const fileUrl = item.raw ? item.raw.url : item.url;
|
|
|
+
|
|
|
+ // 检查临时 URL 是否有效
|
|
|
+ if (fileUrl && fileUrl.trim() !== '') {
|
|
|
+ try {
|
|
|
+ const temporaryUrl = await this.ossService.getTemporaryUrl(fileUrl);
|
|
|
+
|
|
|
+ if (!temporaryUrl || temporaryUrl.trim() === '') {
|
|
|
+ // 如果临时 URL 无效，则标记该文件为无效并删除
|
|
|
+ invalidFiles.push(item);
|
|
|
+ } else {
|
|
|
+ // 如果临时 URL 有效，继续添加文件到有效文件列表
|
|
|
+ validFiles.push(item);
|
|
|
+ item.lsUrl = temporaryUrl;
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ // 如果临时 URL 获取失败，也标记该文件为无效
|
|
|
+ invalidFiles.push(item);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ filesToUpload = validFiles; // 只保留有效的文件
|
|
|
+
|
|
|
+ // 6. 给文件添加上传时间和上传人
|
|
|
+ for (let item of filesToUpload) {
|
|
|
+ item.createTime = moment(new Date()).format('YYYY-MM-DD HH:mm:ss');
|
|
|
+ item.createBy = {
|
|
|
+ id: this.$store.state.user.id,
|
|
|
+ name: this.$store.state.user.name,
|
|
|
+ };
|
|
|
+ }
|
|
|
+
|
|
|
+ const validCompanyFiles = [];//存放符合公司的文件
|
|
|
+ let errorFiles = [];//存放数据格式错误的文件
|
|
|
+ let errorDateFiles = [];//存放日期格式错误的文件
|
|
|
+ for (let i = 0; i < filesToUpload.length; i++) {
|
|
|
+ const item = filesToUpload[i];
|
|
|
+ if (item.raw !== undefined && item.raw !== null && item.raw !== {}) {
|
|
|
+ // 设置文件的 URL
|
|
|
+ item.url = item.raw.url;
|
|
|
+
|
|
|
+ // 仅处理 XML 文件
|
|
|
+ if (item.raw.name && item.raw.name.toLowerCase().endsWith(".xml")) {
|
|
|
+ // 创建 FormData 对象并发送文件
|
|
|
+ const formBody = new FormData();
|
|
|
+ formBody.append('file', item.raw);
|
|
|
+ // 调用后端接口解析 XML 文件
|
|
|
+ const data = await this.ossService.disposeXmlFile(formBody);
|
|
|
+ if (Object.keys(data).length > 0) {
|
|
|
+ // 如果文件的公司名称与this.toCompany不一致，则删除该文件
|
|
|
+ if (this.toCompany !== data.BuyerInformationBuyerName) {
|
|
|
+ this.noXmlFiles.push(item.raw.name)
|
|
|
+ // this.$message.warning("仅可上传江苏兴光项目管理有限公司的报销数电发票");
|
|
|
+ continue;
|
|
|
+ }
|
|
|
+ var flag = this.invoiceReimbursementDispose(data)
|
|
|
+ console.log('flag',flag)
|
|
|
+ if (flag){
|
|
|
+ this.reNumFiles.push(data.InvoiceNumber)
|
|
|
+ continue;
|
|
|
+ }
|
|
|
+ let inDate = this.formatDate(data.IssueTime)
|
|
|
+ if (inDate.indexOf("NaN") != -1 && this.commonJS.isNotEmpty(inDate)){
|
|
|
+ errorDateFiles.push(item.raw.name);
|
|
|
+ continue;
|
|
|
+ }
|
|
|
+ validCompanyFiles.push(item); // 符合条件的文件
|
|
|
+ }else {
|
|
|
+ console.log('error',data)
|
|
|
+ errorFiles.push(item.raw.name)
|
|
|
+ continue;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ filesToUpload = validCompanyFiles;
|
|
|
+ // 将新符合条件的文件追加到原文件列表上
|
|
|
+ console.log('this.dataList',this.dataList)
|
|
|
+ console.log('validCompanyFiles',filesToUpload)
|
|
|
+ this.dataListNew = [...this.dataList, ...filesToUpload];
|
|
|
+ this.fileList = [...filesToUpload];
|
|
|
+ // 记录上传文件的数量
|
|
|
+ console.log('fileList',fileList)
|
|
|
+ this.totalCount = fileList.length;
|
|
|
+ //记录changes方法执行了多少次,此处加判定是为了处理防抖,change方法会对每一个文件执行两次,此处判定后只会增加一次
|
|
|
+ if (file.status !== 'ready'){
|
|
|
+ this.uploadingCount++
|
|
|
+ }
|
|
|
+
|
|
|
+ // 9. 检查是否是最后一个文件上传，如果是，执行一次去重和提示
|
|
|
+ console.log('this.totalCount',this.totalCount)
|
|
|
+ console.log('this.uploadingCount',this.uploadingCount)
|
|
|
+ if (this.uploadingCount === this.totalCount) {
|
|
|
+ this.duplicateFileNames = [...new Set(this.duplicateFileNames)];
|
|
|
+ this.noXmlFiles = [...new Set(this.noXmlFiles)];
|
|
|
+ this.reNumFiles = [...new Set(this.reNumFiles)];
|
|
|
+ errorFiles = [...new Set(errorFiles)];
|
|
|
+ invalidFiles = [...new Set(invalidFiles)];
|
|
|
+ errorDateFiles = [...new Set(errorDateFiles)];
|
|
|
+ // 提示重复文件
|
|
|
+ if (this.duplicateFileNames.length > 0) {
|
|
|
+ this.$message.warning(`以下文件已经上传，跳过了这些文件：\n${this.duplicateFileNames.join('\n')}`);
|
|
|
+ }
|
|
|
+ // 提示xml文件不是当前公司报销的文件
|
|
|
+ if (this.noXmlFiles.length > 0) {
|
|
|
+ this.$message.warning(`仅可上传${this.toCompany}的报销数电发票：\n${this.noXmlFiles.join('\n')}`);
|
|
|
+ }
|
|
|
+ // 提示发票号重复文件
|
|
|
+ if (this.reNumFiles.length > 0) {
|
|
|
+ this.$message.error(`发票号:\n${this.reNumFiles.join('\n')}已上传,请勿重复上传`);
|
|
|
+ }
|
|
|
+ //数电发票格式错误的文件
|
|
|
+ if (errorFiles.length > 0){
|
|
|
+ this.$message.warning(`上传的数电发票格式错误:\n${errorFiles.join('\n')}`);
|
|
|
+ }
|
|
|
+ //临时路径错误的文件
|
|
|
+ if (invalidFiles.length > 0){
|
|
|
+ this.$message.warning(`文件: "\n${invalidFiles.join('\n')}" 获取失败，已从上传列表中删除。`);
|
|
|
+ }
|
|
|
+ //临时路径错误的文件
|
|
|
+ if (errorDateFiles.length > 0){
|
|
|
+ this.$message.warning(`文件: "\n${errorDateFiles.join('\n')}" 日期格式错误，已从上传列表中删除。`);
|
|
|
+ }
|
|
|
+ // 重置计数器
|
|
|
+ this.uploadingCount = 0;
|
|
|
+ this.totalCount = 0; // 可以根据需求来重置
|
|
|
+ this.duplicateFileNames = []; // 清空记录
|
|
|
+ this.noXmlFiles = []; // 清空记录
|
|
|
+ this.reNumFiles = []; // 清空记录
|
|
|
+ this.dataList = this.dataListNew
|
|
|
+ }
|
|
|
+ // 清空 fileList，如果 fileList 不为空
|
|
|
+ if (fileList && fileList.length > 0) {
|
|
|
+ this.fileList = [];
|
|
|
+ }
|
|
|
+ // 在 changes 完成后，手动调用 handleUploadSuccess
|
|
|
+ await this.handleUploadSuccess(null, null, this.fileList); // 传入空参数或实际参数
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ async handleUploadSuccess(response, file, fileList) {
|
|
|
+
|
|
|
+
|
|
|
+ // 遍历当前的数据列表
|
|
|
+ if (this.dataListNew.length>0){
|
|
|
+ for (let item of this.dataListNew) {
|
|
|
+
|
|
|
+ // 如果 item.raw 存在且有效
|
|
|
+ if (item.raw !== undefined && item.raw !== null && item.raw !== {}) {
|
|
|
+ // 设置文件的 URL
|
|
|
+ item.url = item.raw.url;
|
|
|
+
|
|
|
+ // 仅处理 XML 文件
|
|
|
+ if (item.raw.name && item.raw.name.toLowerCase().endsWith(".xml")) {
|
|
|
+ // 创建 FormData 对象并发送文件
|
|
|
+ const formBody = new FormData();
|
|
|
+ formBody.append('file', item.raw);
|
|
|
+
|
|
|
+ try {
|
|
|
+ // 调用后端接口解析 XML 文件
|
|
|
+ const data = await this.ossService.disposeXmlFile(formBody);
|
|
|
+
|
|
|
+ if (Object.keys(data).length > 0) {
|
|
|
+ // 解析成功，更新数据行
|
|
|
+ await this.invoiceReimbursementDisposeData(data, item);
|
|
|
+ }
|
|
|
+ // else {
|
|
|
+ // // XML 格式错误，删除文件
|
|
|
+ // this.$message.warning('上传的数电发票格式错误');
|
|
|
+ // const index = this.fileList.findIndex(f => f.name === item.name);
|
|
|
+ // if (index !== -1) {
|
|
|
+ // this.deleteFileById(this.fileList[index], index, this.fileList);
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ } catch (error) {
|
|
|
+ this.$message.error('处理 XML 文件失败');
|
|
|
+ console.log('XML 处理失败', error);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 更新表格数据
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$forceUpdate(); // 强制更新表格
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ invoiceReimbursementDispose(data) {
|
|
|
+ var invoiceReimbursements = this.dataList;
|
|
|
+ console.log('invoiceReimbursements',invoiceReimbursements)
|
|
|
+ console.log('data',data)
|
|
|
+ //创建判断值，若行信息存在相同的发票号，则进行数据检查调整，若不存在发票号，则新增行，并将信息写入
|
|
|
+ var includeFlag = false;
|
|
|
+ if(!invoiceReimbursements) {
|
|
|
+ invoiceReimbursements = [];
|
|
|
+ }
|
|
|
+
|
|
|
+ invoiceReimbursements.forEach(item => {
|
|
|
+ if(item.number === data.InvoiceNumber) {
|
|
|
+ includeFlag = true;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ return includeFlag;
|
|
|
+ },
|
|
|
+ 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;
|
|
|
+ },
|
|
|
+ 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;
|
|
|
+ // 更新表格数据
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$forceUpdate(); // 强制更新表格
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 关闭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>
|
sangwenwei