物资-抄送仓管后可在详情页下载领用单

Co-authored-by: Copilot <copilot@github.com>

src/views/psiManagement/collect/CollectForm.vue

@@ -3,7 +3,15 @@
 		<el-form :model="inputForm" ref="inputForm" v-loading="loading" :class="method === 'view' ? 'readonly' : ''"
 			:disabled="(status === 'audit' || status === 'taskFormDetail')" label-width="100px" @submit.native.prevent>
 
-			<el-divider content-position="left"><i class="el-icon-document"></i> 基础信息</el-divider>
+			<el-divider content-position="left"><i class="el-icon-document"></i> 基础信息
+				<el-form style="display: inline-block;" v-if="hasPermission('psi:edit') && downloadStatus == '5'"
+					:disabled="false">
+					<el-button style="margin-left: 20px" type="primary" @click="exportByTemplate(inputForm.id)" plain>
+						下载领用单
+					</el-button>
+				</el-form>
+
+			</el-divider>
 			<el-row :gutter="26">
 				<el-col :span="12">
 					<el-form-item label="领用编号" prop="collectNo">
@@ -249,6 +257,8 @@
 		<MaterialTypePullFormByOption ref="materialTypePullFormByOption" @getProgramForType="getProgramForType1">
 		</MaterialTypePullFormByOption>
 		<UserPullForm ref="userPullForm" @getProgramForUser="getProgramForUser"></UserPullForm>
+		<CollectImageTemplate v-if="exportTemplateData" ref="collectImageTemplate" :template-data="exportTemplateData">
+		</CollectImageTemplate>
 	</div>
 </template>
 
@@ -265,6 +275,7 @@ import PurchasePageForm from './PurchasePageForm'
 import PurchasePageFormByOption from './PurchasePageFormByOption'
 import CommonApi from '@/api/cw/common/CommonApi'
 import WareHouseService from '@/api/psi/WareHouseService'
+import CollectImageTemplate from './CollectImageTemplate'
 export default {
 	data() {
 		const nameTitleSuffix = {
@@ -314,7 +325,10 @@ export default {
 			keyWatch: '',
 			produceDateSelectVisible: false,
 			produceDateOptions: [],
-			recordIndexRow: ''
+			recordIndexRow: '',
+			exportTemplateData: null,
+			html2CanvasLoader: null,
+			downloadStatus: "0",
 		}
 	},
 	CollectService: null,
@@ -348,7 +362,8 @@ export default {
 		MaterialTypePullFormByOption,
 		UserPullForm,
 		PurchasePageForm,
-		PurchasePageFormByOption
+		PurchasePageFormByOption,
+		CollectImageTemplate
 	},
 	computed: {
 		bus: {
@@ -437,6 +452,9 @@ export default {
 				this.collectService.findById(this.inputForm.id).then((data) => {
 					if (this.inputForm.id !== 'false') {
 						this.inputForm = this.recover(this.inputForm, data)
+						if (this.commonJS.isNotEmpty(data.status) && !data.statusReturn) {
+							this.downloadStatus = data.status
+						}
 						if (this.commonJS.isEmpty(this.inputForm.handledByOffice)) {
 							this.inputForm.handledByOffice = this.$store.state.user.office.id
 						}
@@ -1060,7 +1078,95 @@ export default {
 				this.inputForm.recordList[rowIndex].collectNumber = ''
 				return
 			}
-		}
+		},
+		// 导出领用单，图片格式
+		async exportByTemplate(id) {
+			const filename = `${this.moment(new Date()).format('YYYY-MM-DD')}领用单`
+			this.loading = true
+			try {
+				const data = await this.collectService.templateImageData({
+					id: id
+				})
+				this.exportTemplateData = {
+					...data,
+					collectList: Array.isArray(data.collectList) ? data.collectList : []
+				}
+				await this.waitForTemplateRender()
+				const html2canvas = await this.ensureHtml2Canvas()
+				//将组件作为模板
+				const exportEl = this.$refs.collectImageTemplate && this.$refs.collectImageTemplate.getExportElement()
+				if (!exportEl) {
+					throw new Error('领用模板不存在')
+				}
+				const canvas = await html2canvas(exportEl, {
+					backgroundColor: '#ffffff',
+					scale: 2,
+					useCORS: true
+				})
+				this.downloadCanvas(canvas, filename)
+			} catch (e) {
+				this.$message.error('领用单图片导出失败')
+			} finally {
+				this.exportTemplateData = null
+				this.loading = false
+			}
+		},
+		waitForTemplateRender() {
+			return new Promise((resolve) => {
+				this.$nextTick(() => {
+					setTimeout(resolve, 80)
+				})
+			})
+		},
+		ensureHtml2Canvas() {
+			if (window.html2canvas) {
+				return Promise.resolve(window.html2canvas)
+			}
+			if (this.html2CanvasLoader) {
+				return this.html2CanvasLoader
+			}
+			this.html2CanvasLoader = new Promise((resolve, reject) => {
+				const script = document.createElement('script')
+				script.src = '/datav/cdn/html2canvas/html2canvas.min.js'
+				script.async = true
+				script.onload = () => {
+					if (window.html2canvas) {
+						resolve(window.html2canvas)
+						return
+					}
+					reject(new Error('html2canvas不存在'))
+				}
+				script.onerror = () => reject(new Error('load html2canvas failed'))
+				document.body.appendChild(script)
+			})
+			return this.html2CanvasLoader
+		},
+		// 通过将模板转换canvas的方式下载图片
+		downloadCanvas(canvas, filename) {
+			const realFilename = filename.endsWith('.png') ? filename : `${filename}.png`
+			const triggerDownload = (href) => {
+				const downloadElement = document.createElement('a')
+				downloadElement.href = href
+				downloadElement.download = realFilename
+				document.body.appendChild(downloadElement)
+				downloadElement.click()
+				document.body.removeChild(downloadElement)
+				if (href.indexOf('blob:') === 0) {
+					window.URL.revokeObjectURL(href)
+				}
+			}
+			if (canvas.toBlob) {
+				canvas.toBlob((blob) => {
+					if (!blob) {
+						triggerDownload(canvas.toDataURL('image/png'))
+						return
+					}
+					triggerDownload(window.URL.createObjectURL(blob))
+				}, 'image/png')
+				return
+			}
+			triggerDownload(canvas.toDataURL('image/png'))
+		},
 	}
 }
 </script>

src/views/psiManagement/collect/CollectImageTemplate.vue

@@ -10,7 +10,7 @@
 					<span class="info-value">{{ safeText(templateData.collectNo) }}</span>
 				</div>
 				<div class="info-item">
-					<span class="info-label">领用时间</span>
+					<span class="info-label">领用日期</span>
 					<span class="info-value">{{ safeText(templateData.collectDate) }}</span>
 				</div>
 				<div class="info-item">