feat:[模板管理]导入、解析excel

package.json

@@ -54,7 +54,8 @@
     "vue-pdf": "^4.3.0",
     "vue-router": "3.4.9",
     "vuedraggable": "2.24.3",
-    "vuex": "3.6.0"
+    "vuex": "3.6.0",
+    "xlsx": "^0.18.5"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "4.4.6",

src/views/business/comps/template/comps/pcr/PCR002.vue

@@ -19,7 +19,8 @@
 							@onSureModifyRecord="onSureModifyRecord"
 							@resetRecord="resetRecord"
 							:formConfig="stepFormConfig" @blur="onHandleBlur" :formData="formData" />
-							<el-button type="primary">导入模板</el-button>
+							<el-button type="primary" @click="exportExcel(['a','b','c','d'])">下载模板</el-button>
+							<el-button type="primary" @click="showImportExcelDialog">导入模板</el-button>
 						<CustomTable
 							@blur="onHandleTableBlur"
 							:ref="`stepTableRef`"
@@ -52,6 +53,7 @@
 		<SelectReagentDialog @submit="onSelectReagentSubmit" ref="selectReagentDialogRef">
 		</SelectReagentDialog>
 		<!-- <button @click="onSave">保存</button> -->
+		 <ImportExcelDialog ref="ImportExcelDialog" @onLoadData="onLoadData"/>
 	</div>
 </template>
 
@@ -68,10 +70,10 @@ import SelectReagentDialog from '../../dialog/SelectReagentDialog.vue';
 import { getLadderColumnsConfig } from "../../formConfig/PCRTableConfig.js";
 import TableOpertaion from "@/components/Template/operation/TableOpertaion.vue"
 import { addTj,uniqeResource,uniqeResourceOne,addDecimals } from "@/utils/calUnitTools";
-
+import ImportExcelDialog from '../../dialog/ImportExcelDialog'
 export default {
 	name: "PCR002",
-	components: { BaseInfoFormPackage, LineLabel, TableList, Step, CustomTable, TableOpertaion, SelectReagentDialog },
+	components: { ImportExcelDialog, BaseInfoFormPackage, LineLabel, TableList, Step, CustomTable, TableOpertaion, SelectReagentDialog },
 	mixins: [templateMixin],
 	props: {
 		fillType: {
@@ -259,6 +261,13 @@ export default {
 
 	},
 	methods: {
+		showImportExcelDialog() {
+			this.$refs.ImportExcelDialog.show()
+		},
+		onLoadData(excelData) {
+			console.log('onLoadData')
+			console.log(excelData)
+		},
 		//更新记录
 		onSureModifyRecord(key) {
 			if (key === "subStartSolution") {//选择起始源溶液需要同步更新table的变更记录。

src/views/business/comps/template/dialog/ImportExcelDialog.vue

@@ -0,0 +1,97 @@
+<template>
+    <div>
+        <!-- 导入excel模板 -->
+        <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" :title="title" :visible.sync="open"
+            width="400px" @close="close" append-to-body>
+            <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :disabled="upload.isUploading" action=""
+                :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
+                <i class="el-icon-upload"></i>
+                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+                <div class="el-upload__tip text-center" slot="tip">
+                    <span>仅允许导入xls、xlsx格式文件</span>
+                </div>
+            </el-upload>
+            <div slot="footer" class="dialog-footer">
+                <el-button @click="cancel">{{ $t('form.cancel') }}</el-button>
+                <el-button type="primary" @click="save">{{ $t('form.confirm') }}</el-button>
+            </div>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+import * as XLSX from 'xlsx'
+export default {
+    name: "ImportEccelDialog",
+    components: {},
+    data() {
+        return {
+            title: this.$t('form.modify'),
+            open: false,
+            upload: {
+                // 是否禁用上传
+                isUploading: false,
+            },
+            excelData: null,
+        }
+    },
+    computed: {
+    },
+    created() {
+    },
+    methods: {
+        show() {
+            this.open = true
+        },
+        cancel() {
+            this.open = false
+        },
+        close() {
+            if (!this.isChecked) {
+                this.$emit('cancel')
+            }
+        },
+        // 文件上传中处理
+        handleFileUploadProgress(event, file, fileList) {
+            this.upload.isUploading = true
+            console.log('.....')
+        },
+        // 文件上传成功处理
+        handleFileSuccess(response, file, fileList) {
+            this.open = false
+            this.upload.isUploading = false
+            this.$refs.upload.clearFiles()
+        },
+        // 提交上传文件
+        save() {
+            const file = this.$refs.upload.uploadFiles
+            if (!file || file.length === 0 || !file[0].name.toLowerCase().endsWith('.xls') && !file[0].name.toLowerCase().endsWith('.xlsx')) {
+                this.$modal.msgError("请选择后缀为 “xls”或“xlsx”的文件。")
+                return
+            }
+
+            const reader = new FileReader()
+            reader.onload = (event) => {
+                try {
+                    const data = event.target.result
+                    // 解析 Excel
+                    const workbook = XLSX.read(data, { type: 'binary' })
+                    // 获取第一个工作表
+                    const firstSheetName = workbook.SheetNames[0]
+                    const worksheet = workbook.Sheets[firstSheetName]
+                    // 转为二维数组（header:1 表示保留原始行列）
+                    const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 })
+                    this.excelData = jsonData
+                    this.$emit('onLoadData', this.excelData)
+                } catch (error) {
+                    console.error('解析失败：', error)
+                    this.$modal.msgError('文件解析失败，请检查格式', error)
+                }
+            }
+
+            reader.readAsArrayBuffer(file[0].raw);
+        },
+
+    }
+}
+</script>

src/views/business/comps/template/mixins/templateMixin.js

@@ -29,7 +29,7 @@ export default {
 		'business_sp_xskkx', //色谱-编号-稀释可靠性
 		'business_sp_cbydb', //色谱-编号-储备液对比
 		'business_pcr_gzy', 	// PCR-编号-工作液
-		
+
 		'business_lba_jg' // LBA006-结果
 	],
 	props: {
@@ -359,7 +359,7 @@ export default {
 					subTargetStartSolution,
 					headerSelectFields
 				}
-				
+
 				arr.forEach((item, rowIndex) => {
 					this.updateTargetStartSolutionVolume(
 						item,
@@ -447,7 +447,7 @@ export default {
 			// 实际目标溶液浓度 = 实际源溶液浓度÷（实际终体积÷源溶液加入体积）；
 			const actNd = (
 				parseFloat(targetAcSolution) / (
-					parseFloat(actVol)/parseFloat(actStartSolutionVolume) 
+					parseFloat(actVol)/parseFloat(actStartSolutionVolume)
 				)
 			).toFixed(precision)
 			const nd = actNd === 'Infinity' ? 0 : Number(actNd)
@@ -487,19 +487,19 @@ export default {
 			const {subTargetStartSolution,headerSelectFields} = unitParams
 			const {targetSolutionConcentrationUnit,targetSolutionVolumeUnit,targetStartSolutionVolumeUnit,targetDiluentVolumeUnit} = headerSelectFields
 			const targetStartVolUnit = targetSolutionConcentrationUnit.split("/")[1];//先按照预设目标溶液浓度的单位标准
-			
+
 			if(
-				isValueEmpty(concentration) || 
+				isValueEmpty(concentration) ||
 				isValueEmpty(targetVolume)||
 				isValueEmpty(subTargetStartSolution)||
 				isValueEmpty(targetSolutionConcentrationUnit)||
 				isValueEmpty(targetSolutionVolumeUnit)||
-				isValueEmpty(targetStartSolutionVolumeUnit)||	
+				isValueEmpty(targetStartSolutionVolumeUnit)||
 				isValueEmpty(targetDiluentVolumeUnit)
 			){
 				return;
 			}
-			//将起始溶液浓度转换为和预设目标溶液浓度一样的单位再计算； 
+			//将起始溶液浓度转换为和预设目标溶液浓度一样的单位再计算；
 			const converStartCon = convertConcentration.convert(volume+subTargetStartSolution,targetSolutionConcentrationUnit)
 			//将预设目标溶液体积转换为和预设目标溶液浓度单位的分母一样的单位再计算；如：预设目标溶液浓度单位为mg/mL，预设目标溶液体积单位为uL，则将预设目标溶液体积转换为mL
 			const convertTargetVol = volumeConverter.convert(targetVolume+targetSolutionVolumeUnit,targetStartVolUnit)
@@ -521,6 +521,40 @@ export default {
 				item.targetDiluentVolume = volumeConverter.convert(result1+targetStartSolutionVolumeUnit,targetDiluentVolumeUnit)
 				// this.$refs.stepTableRef.updateDataSourceByRowIndex(rowIndex, { targetDiluentVolume: result1 });
 			}
-		}
+		},
+		// 导出excel模板
+		exportExcel(rows, title) {
+			let that = this
+			that.$modal.loading()
+			var tabelStr =
+				'<table border="1"  class="html-tabel">' +
+				'<tr style="background:#eee;">'
+
+			rows.forEach(item => {
+				tabelStr = tabelStr + '<th style="text-align: center;">' + item + '</th>'
+			})
+			tabelStr = tabelStr + ' </tr><table>'
+
+			// Worksheet名
+			var worksheet = title ? title : '导入模板'
+			var uri = 'data:application/vnd.ms-excel;base64,'
+			// 真正要导出（下载）的HTML模板
+			var exportTemplate = `<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel"
+						xmlns="http://www.w3.org/TR/REC-html40">
+						<head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>
+							<x:Name>${worksheet}</x:Name>
+								<x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>
+							</x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->
+						</head>
+						<body>
+							${tabelStr}
+						</body>
+						</html>`
+			var a = document.createElement('a')
+			a.download = worksheet + '.xls'
+			a.href = uri + window.btoa(unescape(encodeURIComponent(exportTemplate)))
+			a.click()
+			that.$modal.closeLoading()
+		},
 	}
 }