发票申请 添加 签约合同附件

src/views/common/UpLoadComponentSignContract.vue

@@ -0,0 +1,500 @@
+<!--文件上传组件-->
+<template>
+  <div :key="uploadKey">
+    <el-divider v-if="showDivider" content-position="left"><i class="el-icon-document"></i> 签约合同附件<span
+        style="color: red;font-weight: 600;">
+        (请上传已签约合同文件)
+      </span></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>
+      <AttachmentLib v-if="auth !== 'view'" :directory="directory" @onDownToOss="handleOnDownToOss">
+      </AttachmentLib>
+
+    </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'
+import AttachmentLib from './AttachmentLib.vue'
+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: {
+    AttachmentLib
+    // 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);
+
+      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) {
+        if (item.url && item.url !== null && item.url !== undefined && item.url !== "") {
+          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
+            }
+          })
+        } else {
+          this.dataList.push(item)
+          this.dataListNew.push(item)
+          this.fileList.push(item)
+          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
+        }
+      }
+    },
+    addMyAttachment(row) {
+      this.$confirm(`确定收藏到个人资料库?`, "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      }).then(() => {
+        let inputForm = {
+          classification: "",
+          fileDescription: "",
+          workAttachments: []
+        }
+        inputForm.workAttachments.push(row)
+        this.ossService.downloadAndUploadToMyCollect({
+          url: row.lsUrl,
+          fileName: row.name,
+          dir: this.directory,
+          workCollectAccessoryDTO: {
+            ...inputForm
+          }
+        }).then(res => {
+          this.$message.success(`操作成功`);
+        })
+      });
+
+    },
+    async httpRequest(file) {
+      await httpRequest(file, fileName(file), this.directory, this.maxValue)
+    },
+    handleOnDownToOss(row, url) {
+      let flag = false
+      this.fileList.forEach(item => {
+        if (row.fileName == item.name) {
+          flag = true
+        }
+      })
+      console.log(this.fileList);
+
+      if (flag) {
+        this.$message.error(`${row.fileName}已存在，无法重复上传`);
+        return
+      }
+      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) {
+      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(fileListNamesList);
+
+          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
+      }
+
+      const invalidFile = this.dataListNew.find(file => !file.url); // 找到第一个 URL 为空的文件
+      if (invalidFile) {
+        this.$message.warning(`${invalidFile.name}的URL为空，请检查后重新上传`)
+        return true; // 只要有一个 url 为空，直接 return
+      }
+
+      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>

src/views/cw/invoice/InvoiceFormTask.vue

@@ -733,6 +733,8 @@
 		</el-form>
 		<!--        附件-->
 		<UpLoadComponent ref="uploadComponent"></UpLoadComponent>
+		<UpLoadComponentSignContract ref="uploadComponentSignContract"></UpLoadComponentSignContract>
+
 		<ProgramPageForm ref="programPageForm" @getProgram="getProgram"></ProgramPageForm>
 		<ContractForm ref="contractForm" @getContract="getContract"></ContractForm>
 		<WorkClientForm ref="workClientForm" @getWorkClientRadioChoose="getWorkClient"></WorkClientForm>
@@ -780,6 +782,7 @@ import financeInvoiceService from '@/api/cw/invoice/CwFinanceInvoiceService'
 import workClientService from '@/api/cw/workClientInfo/WorkClientService'
 import ProgramPageForm from './ProgramPageForm'
 import UpLoadComponent from '@/views/common/UpLoadComponent'
+import UpLoadComponentSignContract from '@/views/common/UpLoadComponentSignContract'
 import ContractForm from '../projectRecords/WorkContractChooseCom'
 import WorkClientForm from '../workClientInfo/WorkClientChooseRadio'
 import WorkInvoiceForm from './WorkInvoiceChooseRadio'
@@ -861,6 +864,7 @@ export default {
 				procInsId: '',
 				processDefinitionId: '',
 				workAttachmentDtoList: [],
+				workAttachmenSignContract: [],
 				financeInvoiceDetailDTOList: [],
 				financeInvoiceReceivablesDTOList: [],
 				financeInvoiceInvalidDTO: {},
@@ -910,7 +914,8 @@ export default {
 		UpLoadComponent,
 		WorkClientBillingChooseRadio,
 		UserSelect1,
-		UserSelect2
+		UserSelect2,
+		UpLoadComponentSignContract
 	},
 	computed: {
 		bus: {
@@ -939,6 +944,7 @@ export default {
 			handler(newVal) {
 				this.$emit('changeLoading', newVal)
 				this.$refs.uploadComponent.changeLoading(newVal)
+				this.$refs.uploadComponentSignContract.changeLoading(newVal)
 			}
 		}
 	},
@@ -989,6 +995,7 @@ export default {
 				procInsId: '',
 				processDefinitionId: '',
 				workAttachmentDtoList: [],
+				workAttachmenSignContract: [],
 				financeInvoiceDetailDTOList: [],
 				financeInvoiceReceivablesDTOList: [],
 				financeInvoiceInvalidDTO: {
@@ -1029,6 +1036,7 @@ export default {
 				this.loading = true
 				financeInvoiceService.queryById(this.inputForm.id).then((data) => {
 					this.$refs.uploadComponent.clearUpload()
+					this.$refs.uploadComponentSignContract.clearUpload()
 					this.inputForm = this.recover(this.inputForm, data)
 					console.log('data', data)
 					if (this.commonJS.isEmpty(this.inputForm.actualDrawerEmailAddress)) {
@@ -1095,6 +1103,10 @@ export default {
 					if (this.commonJS.isEmpty(this.inputForm.workAttachmentDtoList) || this.inputForm.workAttachmentDtoList.length === 0) {
 						this.inputForm.workAttachmentDtoList = []
 					}
+					if (this.commonJS.isEmpty(this.inputForm.workAttachmenSignContract) || this.inputForm.workAttachmenSignContract.length === 0) {
+						this.inputForm.workAttachmenSignContract = []
+					}
+
 					if (this.commonJS.isEmpty(this.inputForm.financeInvoiceReceivablesDTOList) || this.inputForm.financeInvoiceReceivablesDTOList.length === 0) {
 						this.inputForm.financeInvoiceReceivablesDTOList = []
 					}
@@ -1144,6 +1156,7 @@ export default {
 						})
 					}
 					this.$refs.uploadComponent.newUpload(method, this.inputForm.workAttachmentDtoList, 'invoice')
+					this.$refs.uploadComponentSignContract.newUpload(method, this.inputForm.workAttachmenSignContract, 'signContract')
 					this.loading = false
 				})
 			})
@@ -1228,6 +1241,11 @@ export default {
 				this.loading = false
 				throw new Error()
 			}
+			if (await this.$refs.uploadComponentSignContract.checkProgress()) {
+				this.loading = false
+				throw new Error()
+			}
+
 			this.inputForm.account = this.inputForm.accountTotal
 			console.log(this.inputForm.account)
 			if (status === 'save') {
@@ -1235,6 +1253,8 @@ export default {
 				this.loading = true
 				this.inputForm.status = '1'
 				this.inputForm.workAttachmentDtoList = this.$refs.uploadComponent.getDataList()
+				//获取签约合同附件数组
+				this.inputForm.workAttachmenSignContract = this.$refs.uploadComponentSignContract.getDataList()
 				financeInvoiceService.saveForm(this.inputForm).then((data) => {
 					callback(data.businessTable, data.businessId, this.inputForm)
 					this.loading = false
@@ -1378,6 +1398,7 @@ export default {
 				if (valid) {
 					this.loading = true
 					this.inputForm.workAttachmentDtoList = this.$refs.uploadComponent.getDataList()
+					this.inputForm.workAttachmenSignContract = this.$refs.uploadComponentSignContract.getDataList()
 					if (this.inputForm.isMultiple === '1') {
 						// 是否多张开票,若选择是,则附件必须上传文件
 						if (this.commonJS.isEmpty(this.inputForm.workAttachmentDtoList)) {
@@ -1412,6 +1433,8 @@ export default {
 		close() {
 			this.bj1 = ''
 			this.$refs.uploadComponent.clearUpload()
+			this.$refs.uploadComponentSignContract.clearUpload()
+
 			this.$refs.inputForm.resetFields()
 			this.inputForm = {
 				id: '',
@@ -1732,6 +1755,9 @@ export default {
 			if (await this.$refs.uploadComponent.checkProgress()) {
 				this.loading = false
 				throw new Error()
+			} else if (await this.$refs.uploadComponentSignContract.checkProgress()) {
+				this.loading = false
+				throw new Error()
 			} else {
 				if (type === 'reject' || type === 'reback') {
 					financeInvoiceService.queryById(this.inputForm.id).then((data) => {