fix:[模板管理]GSP015填报导出

src/views/business/comps/template/comps/gsp/GSP015.vue

@@ -15,56 +15,99 @@
 					<el-button class="mt-20" v-if="fillType === 'preFill'" type="primary"
 						@click="onAdd('ybsmDataList')">新增</el-button>
 					<el-button class="mt-20" v-if="fillType === 'actFill'" type="primary"
-						@click="onExport">导出</el-button>
-					<div v-for="(item, index) in formData.ybsmDataList" :key="item.id" class="template-form-item">
-						<div class="config-header">
-							<div></div>
-							<el-popconfirm title="确认删除当前数据？" @confirm="deleteConfig(item, 'ybsmDataList')">
-								<el-button slot="reference" v-if="fillType === 'preFill'" type="text"
-									icon="el-icon-delete">{{
-										$t('template.common.deleteBtn')
-									}}</el-button>
-							</el-popconfirm>
-						</div>
-						<BaseInfoFormPackage fieldItemLabel="取样进样信息" :ref="`ybsmFormPackageRef${index}`"
-							@clickButton="(e,d,key,formFields) => handleClickButton(e,d,key,formFields,index)"
-							:formConfig="ybsmFormConfig" :formData="item" />
-						<CustomTable :ref="`ybsmTableRef${index}`" :columns="ybsmColumns" prefix="qy"
-							:showOperation="fillType === 'actFill' || fillType === 'preFill'"
-							:showAddRow="fillType === 'preFill'" @onAddRow="() => addTableRow(index)"
-							fieldItemLabel="取样进样信息" :formData="item">
-							<template slot="operation" slot-scope="{ row, rowIndex, columns }">
-								<TableOpertaion :row="row" :rowIndex="rowIndex" :columns="columns"
-									@configComplete="(e)=>onConfigComplete(e,'qy')"
-									@printTag="(e)=>onPrintTag(e,index)"
-									:fillType="fillType"
-									:showFz="false"
-									:showKspz="false"
-									@deleteRow="() => deleteTableRow(rowIndex, index)">
-								</TableOpertaion>
-							</template>
-						</CustomTable>
-						<CustomTable :ref="`jyTableRef${index}`" :columns="yjColumns" prefix="jy"
-							fieldItemLabel="取样进样信息" @blur="(e) => onHandleTableBlur(e, index, 'jyTableRef')"
-							:showOperation="fillType === 'actFill'" :showAddRow="false"
-							:formData="{ stepTableFormData: item.jyStepTableFormData || [], headerSelectFields: item.jyHeaderSelectFields || {} }">
-							<template slot="operation" slot-scope="{ row, rowIndex, columns }">
-								<TableOpertaion :row="row" :rowIndex="rowIndex" :columns="columns"
-									@configComplete="(e)=>onConfigComplete(e,'jy')"
-									@printTag="(e)=>onPrintTag(e,index)"
-									:fillType="fillType"
-									:showFz="false"
-									:showKspz="false"
-									@deleteRow="() => deleteTableRow(rowIndex, index)">
-								</TableOpertaion>
-							</template>
-						</CustomTable>
-					</div>
+						@click="onExportXqjyxx">导出</el-button>
+					<vue-html2pdf :show-layout="true" pdf-content-width="100%" pdf-format="a2" :pdf-quality="2"
+						:float-layout="false" pdf-orientation="landscape" :paginate-elements-by-height="0"
+						:enable-download="true" :preview-modal="false" filename="取样进样信息" :html-to-pdf-options="{
+							margin: [10, 5, 10, 5], // 格式: [上, 右, 下, 左] (单位: mm)
+							// 或者使用对象格式
+							// margin: { top: 20, right: 15, bottom: 20, left: 15 },
+							filename: 'document.pdf',
+							image: {
+								type: 'jpeg',
+								quality: 2
+							},
+							enableLinks: false,
+							html2canvas: {
+								scale: 2,
+								useCORS: true
+							},
+							jsPDF: {
+								unit: 'mm',           // 单位: mm
+								format: 'a2',          // 纸张大小
+								orientation: 'landscape' // 方向
+							}
+						}" ref="html2PdfXqjyxx" @progress="onProgressXqjyxx">
+						<section slot="pdf-content">
+							<div v-for="(item, index) in formData.ybsmDataList" :key="item.id"
+								class="template-form-item">
+								<div class="config-header">
+									<div></div>
+									<el-popconfirm title="确认删除当前数据？" @confirm="deleteConfig(item, 'ybsmDataList')">
+										<el-button slot="reference" v-if="fillType === 'preFill'" type="text"
+											icon="el-icon-delete">{{
+												$t('template.common.deleteBtn')
+											}}</el-button>
+									</el-popconfirm>
+								</div>
+								<BaseInfoFormPackage fieldItemLabel="取样进样信息" :ref="`ybsmFormPackageRef${index}`"
+									@clickButton="(e, d, key, formFields) => handleClickButton(e, d, key, formFields, index)"
+									:formConfig="ybsmFormConfig" :formData="item" />
+								<CustomTable :ref="`ybsmTableRef${index}`" :columns="ybsmColumns" prefix="qy"
+									:showOperation="fillType === 'actFill' || fillType === 'preFill'"
+									:showAddRow="fillType === 'preFill'" @onAddRow="() => addTableRow(index)"
+									fieldItemLabel="取样进样信息" :formData="item">
+									<template slot="operation" slot-scope="{ row, rowIndex, columns }">
+										<TableOpertaion :row="row" :rowIndex="rowIndex" :columns="columns"
+											@configComplete="(e) => onConfigComplete(e, 'qy')"
+											@printTag="(e) => onPrintTag(e, index)" :fillType="fillType" :showFz="false"
+											:showKspz="false" @deleteRow="() => deleteTableRow(rowIndex, index)">
+										</TableOpertaion>
+									</template>
+								</CustomTable>
+								<CustomTable :ref="`jyTableRef${index}`" :columns="yjColumns" prefix="jy"
+									fieldItemLabel="取样进样信息" @blur="(e) => onHandleTableBlur(e, index, 'jyTableRef')"
+									:showOperation="fillType === 'actFill'" :showAddRow="false"
+									:formData="{ stepTableFormData: item.jyStepTableFormData || [], headerSelectFields: item.jyHeaderSelectFields || {} }">
+									<template slot="operation" slot-scope="{ row, rowIndex, columns }">
+										<TableOpertaion :row="row" :rowIndex="rowIndex" :columns="columns"
+											@configComplete="(e) => onConfigComplete(e, 'jy')"
+											@printTag="(e) => onPrintTag(e, index)" :fillType="fillType" :showFz="false"
+											:showKspz="false" @deleteRow="() => deleteTableRow(rowIndex, index)">
+										</TableOpertaion>
+									</template>
+								</CustomTable>
+							</div>
+						</section>
+					</vue-html2pdf>
 					<LineLabel label="二次稀释信息" />
 					<el-button class="mt-20" v-if="fillType === 'preFill'" type="primary"
 						@click="onAdd('ecDataList')">新增</el-button>
 					<el-button class="mt-20" v-if="fillType === 'actFill'" type="primary"
-						@click="onExport('ec')">导出</el-button>
+						@click="onExportEcxsxx()">导出</el-button>
+						<vue-html2pdf :show-layout="true" pdf-content-width="100%" pdf-format="a2" :pdf-quality="2"
+						:float-layout="false" pdf-orientation="landscape" :paginate-elements-by-height="0"
+						:enable-download="true" :preview-modal="false" filename="二次稀释信息" :html-to-pdf-options="{
+							margin: [10, 5, 10, 5], // 格式: [上, 右, 下, 左] (单位: mm)
+							// 或者使用对象格式
+							// margin: { top: 20, right: 15, bottom: 20, left: 15 },
+							filename: 'document.pdf',
+							image: {
+								type: 'jpeg',
+								quality: 2
+							},
+							enableLinks: false,
+							html2canvas: {
+								scale: 2,
+								useCORS: true
+							},
+							jsPDF: {
+								unit: 'mm',           // 单位: mm
+								format: 'a2',          // 纸张大小
+								orientation: 'landscape' // 方向
+							}
+						}" ref="html2PdfEcxsxx" @progress="onProgressEcxsxx">
+						<section slot="pdf-content">
 					<div v-for="(item, index) in formData.ecDataList" :key="item.id" class="template-form-item">
 						<div class="config-header">
 							<div></div>
@@ -83,16 +126,15 @@
 							@onAddRow="() => addEcTableRow(index, 'ecTableRef')" :formData="item">
 							<template slot="operation" slot-scope="{ row, rowIndex, columns }">
 								<TableOpertaion :row="row" :rowIndex="rowIndex" :columns="columns"
-									@configComplete="(e)=>onConfigComplete(e,'jy')"
-									@printTag="(e)=>onPrintTag(e,index)"
-									:fillType="fillType"
-									:showFz="false"
-									:showKspz="false"
+									@configComplete="(e) => onConfigComplete(e, 'jy')" @printTag="(e) => onPrintTag(e, index)"
+									:fillType="fillType" :showFz="false" :showKspz="false"
 									@deleteRow="() => deleteTableRow(rowIndex, index)">
 								</TableOpertaion>
 							</template>
 						</CustomTable>
 					</div>
+					</section>
+					</vue-html2pdf>
 					<Step :ref="`stepRef`" :formData="formData.stepData || []"></Step>
 
 					<BaseInfoFormPackage fieldItemLabel="template.common.remark" label="template.common.remark"
@@ -108,6 +150,7 @@
 import BaseInfoFormPackage from "@/components/Template/BaseInfoFormPackage";
 import TableOpertaion from "@/components/Template/operation/TableOpertaion";
 
+import VueHtml2pdf from 'vue-html2pdf'
 import LineLabel from "@/components/Template/LineLabel";
 import TableList from "@/components/Template/Table";
 import Step from "@/components/Template/Step";
@@ -128,7 +171,7 @@ const refConfig = {
 const compRefs = Object.values(refConfig);
 export default {
 	name: "SP0021",
-	components: { BaseInfoFormPackage, LineLabel, TableList, Step, CustomTable, TableOpertaion },
+	components: { BaseInfoFormPackage, LineLabel, VueHtml2pdf, TableList, Step, CustomTable, TableOpertaion },
 	mixins: [templateMixin],
 	props: {
 		fillType: {
@@ -176,50 +219,50 @@ export default {
 
 	},
 	methods: {
-		onConfigComplete(e,type){
-			const {rowData,headerSelectFields} = e;
+		onConfigComplete(e, type) {
+			const { rowData, headerSelectFields } = e;
 			let params = {
 				studySubjectId: this.formData.studySubjectId,
 				studyId: this.formData.studyId,
 				studyFormId: this.formData.id,
 			};
-			if(type === 'qy'){
-				 params = {
+			if (type === 'qy') {
+				params = {
 					...params,
-					bh:rowData.qybh,//编号
-					nd:rowData.sjzjnd,//浓度
-					nddw:headerSelectFields.sjzjnddw,//浓度单位
-					kc:rowData.sjqyl,//库存
-					kcdw:headerSelectFields.sjqydw,//库存单位
+					bh: rowData.qybh,//编号
+					nd: rowData.sjzjnd,//浓度
+					nddw: headerSelectFields.sjzjnddw,//浓度单位
+					kc: rowData.sjqyl,//库存
+					kcdw: headerSelectFields.sjqydw,//库存单位
 				}
-			}else if(type === 'jy'){
-				 params = {
+			} else if (type === 'jy') {
+				params = {
 					...params,
-					bh:rowData.jybh,//编号
-					nd:rowData.sjjynd,//浓度
-					nddw:headerSelectFields.sjjynddw,//浓度单位
-					kc:rowData.ztj,//库存
-					kcdw:headerSelectFields.ztjdw,//库存单位
+					bh: rowData.jybh,//编号
+					nd: rowData.sjjynd,//浓度
+					nddw: headerSelectFields.sjjynddw,//浓度单位
+					kc: rowData.ztj,//库存
+					kcdw: headerSelectFields.ztjdw,//库存单位
 				}
 			}
 			this.configCompleteRequest(params)
 		},
-		onPrintTag(e,index){
-			console.log(e,index,"onPrintTag")
+		onPrintTag(e, index) {
+			console.log(e, index, "onPrintTag")
 		},
-		handleClickButton(item,signData,key,formFields,index){
+		handleClickButton(item, signData, key, formFields, index) {
 			const ref = this.$refs[`ybsmFormPackageRef${index}`][0];
-			if(key === "startButton"){
-				ref.updateFormData("qysj",moment().format("YYYY/MM/DD HH:mm:ss"),{ isUpdateRecord: true, signData })
-			}else if(key === "endButton"){
+			if (key === "startButton") {
+				ref.updateFormData("qysj", moment().format("YYYY/MM/DD HH:mm:ss"), { isUpdateRecord: true, signData })
+			} else if (key === "endButton") {
 				const qysj = formFields.qysj;
-				if(!qysj){
+				if (!qysj) {
 					this.$message.error("请先记录开始时间");
 					return;
 				}
-				const subQysj = qysj.substr(0,19)
+				const subQysj = qysj.substr(0, 19)
 				const endTime = moment().format("YYYY/MM/DD HH:mm:ss");
-				ref.updateFormData("qysj",`${subQysj} ~ ${endTime}`,{ isUpdateRecord: true, signData })
+				ref.updateFormData("qysj", `${subQysj} ~ ${endTime}`, { isUpdateRecord: true, signData })
 			}
 		},
 		onHandleTableBlur(e, index, refName) {
@@ -234,7 +277,7 @@ export default {
 				const { bdtjdw, qytjdw, jytjdw, qynddw, ztjdw, sjjynddw } = headerSelectFields || {};
 
 				//将标定体积的单位转换成和终体积单位一致再计算；
-			
+
 
 				if (!!bdtj && !!qytj) {
 					const transBdtj = volumeConverter.convert(bdtj + bdtjdw, ztjdw);//转换后的标定体积
@@ -277,8 +320,43 @@ export default {
 			this.addEcTableRow(index, "jyTableRef");
 
 		},
-		onExport() {
-
+		//生成进度
+		onProgressXqjyxx(progress) {
+			console.log(`生成进度: ${progress}%`)
+			this.removePageBreak()
+			if (progress == 100) {
+				this.$modal.closeLoading()
+			} else {
+				this.$modal.loading()
+			}
+		},
+		//移除分页空白
+		removePageBreak() {
+			document.querySelectorAll('.html2pdf__page-break').forEach(el => {
+				el.remove()
+			})
+		},
+		onExportXqjyxx() {
+			this.$modal.loading()
+			setTimeout(() => {
+				this.$refs.html2PdfXqjyxx.generatePdf()
+			}, 200);
+		},
+		//生成进度
+		onProgressEcxsxx(progress) {
+			console.log(`生成进度: ${progress}%`)
+			this.removePageBreak()
+			if (progress == 100) {
+				this.$modal.closeLoading()
+			} else {
+				this.$modal.loading()
+			}
+		},
+		onExportEcxsxx() {
+			this.$modal.loading()
+			setTimeout(() => {
+				this.$refs.html2PdfEcxsxx.generatePdf()
+			}, 200);
 		},
 		//删除样本说明
 		deleteConfig(item, type = "ybsmDataList") {

src/views/business/comps/template/formConfig/gsp/gsp015.js

@@ -115,21 +115,21 @@ export const getQyTableColumns = ($this) => {
         {
             label: '取样编号',
             prop: 'qybh',
-            width: 280,
+            width: 200,
             bodyType: 'input',
             bodyFillType: 'preFill',
         },
         {
             label: '制剂编号',
             prop: 'zjbh',
-            width: 280,
+            width: 200,
             bodyType: 'gsp',
             bodyFillType: 'actFill',
         },
         {
             label: '预设制剂浓度',
             prop: 'yszjnd',
-            width: 280,
+            width: 200,
             headerSelectKey: 'yszjnddw',
             fillType: "preFill",
             headerOptions: $this.getDictOptions('business_nddw'),
@@ -140,7 +140,7 @@ export const getQyTableColumns = ($this) => {
         {
             label: '实际制剂浓度',
             prop: 'sjzjnd',
-            width: 280,
+            width: 200,
             headerSelectKey: 'sjzjnddw',
             fillType: "preFill",
             headerOptions: $this.getDictOptions('business_nddw'),
@@ -176,7 +176,7 @@ export const getQyTableColumns = ($this) => {
         {
             label: '预设取样量',
             prop: 'ysqyl',
-            width: 280,
+            width: 200,
             headerSelectKey: 'ysqyldw',
             fillType: "preFill",
             headerOptions: $this.getDictOptions('business_tjdw'),
@@ -188,7 +188,7 @@ export const getQyTableColumns = ($this) => {
         {
             label: '实际取样量',
             prop: 'sjqyl',
-            width: 280,
+            width: 200,
             headerSelectKey: 'sjqydw',
             fillType: "preFill",
             headerOptions: $this.getDictOptions('business_tjdw'),
@@ -206,21 +206,21 @@ export const getJyTableColumns = ($this) => {
         {
             label: '进样编号',
             prop: 'jybh',
-            width: 280,
+            width: 200,
             bodyType: 'input',
             bodyFillType: 'preFill',
         },
         {
             label: '取样编号',
             prop: 'qybh',
-            width: 280,
+            width: 200,
             bodyType: 'gsp',
             bodyFillType: 'actFill',
         },
         {
             label: '取样浓度',
             prop: 'qynd',
-            width: 280,
+            width: 200,
             headerSelectKey: 'qynddw',
             fillType: "preFill",
             headerOptions: $this.getDictOptions('business_nddw'),
@@ -230,7 +230,7 @@ export const getJyTableColumns = ($this) => {
         {
             label: '取样体积',
             prop: 'qytj',
-            width: 280,
+            width: 200,
             headerSelectKey: 'qytjdw',
             fillType: "preFill",
             headerOptions: $this.getDictOptions('business_tjdw'),
@@ -240,7 +240,7 @@ export const getJyTableColumns = ($this) => {
         {
             label: '标定体积',
             prop: 'bdtj',
-            width: 280,
+            width: 200,
             headerSelectKey: 'bdtjdw',
             fillType: "preFill",
             headerOptions: $this.getDictOptions('business_tjdw'),
@@ -250,7 +250,7 @@ export const getJyTableColumns = ($this) => {
         {
             label: '进样体积',
             prop: 'jytj',
-            width: 280,
+            width: 200,
             headerSelectKey: 'jytjdw',
             fillType: "preFill",
             headerOptions: $this.getDictOptions('business_tjdw'),
@@ -260,7 +260,7 @@ export const getJyTableColumns = ($this) => {
         {
             label: '稀释倍数',
             prop: 'xsbs',
-            width: 280,
+            width: 200,
             bodyType: 'inputNumber',
             bodyFillType: 'actFill',
             bodySubType: "inputNumber",
@@ -273,7 +273,7 @@ export const getJyTableColumns = ($this) => {
         {
             label: '终体积',
             prop: 'ztj',
-            width: 280,
+            width: 200,
             headerSelectKey: 'ztjdw',
             fillType: "preFill",
             headerOptions: $this.getDictOptions('business_tjdw'),
@@ -289,7 +289,7 @@ export const getJyTableColumns = ($this) => {
         {
             label: '实际进样浓度',
             prop: 'sjjynd',
-            width: 280,
+            width: 200,
             headerSelectKey: 'sjjynddw',
             fillType: "preFill",
             headerOptions: $this.getDictOptions('business_nddw'),