From e6c3fccc9e412e79964a6dc2dae4c3da0c80095c Mon Sep 17 00:00:00 2001
From: licp <lichunping@guanfang.com.cn>
Date: 星期二, 26 十一月 2024 15:22:28 +0800
Subject: [PATCH] 完成检验下单、检验任务、报告生成变更
---
src/components/tool/file-preview.vue | 154 +++++++++++++++++++++++++++++++++++++++++---------
1 files changed, 125 insertions(+), 29 deletions(-)
diff --git a/src/components/tool/file-preview.vue b/src/components/tool/file-preview.vue
index 8fa2f24..38ea63e 100644
--- a/src/components/tool/file-preview.vue
+++ b/src/components/tool/file-preview.vue
@@ -11,7 +11,7 @@
<div v-if="isDoc">
<p v-if="!isDocShow">鏂囨。鏃犳硶鐩存帴棰勮锛岃涓嬭浇鏌ョ湅銆�</p>
<a :href="fileUrl" v-if="!isDocShow">涓嬭浇鏂囦欢</a>
- <vue-office-docx
+ <vue-office-docx v-else
:src="fileUrl"
style="height: 100vh;"
@rendered="renderedHandler"
@@ -21,7 +21,7 @@
<div v-if="isXls">
<p v-if="!isDocShow">鏂囨。鏃犳硶鐩存帴棰勮锛岃涓嬭浇鏌ョ湅銆�</p>
<a :href="fileUrl" v-if="!isDocShow">涓嬭浇鏂囦欢</a>
- <vue-office-excel
+ <vue-office-excel v-else
:src="fileUrl"
:options="options"
style="height: 100vh;"
@@ -34,9 +34,25 @@
<a :href="fileUrl">涓嬭浇鏂囦欢</a>
</div>
<div v-if="isCsv">
- <p>CSV 鏂囦欢鏃犳硶鐩存帴棰勮锛岃涓嬭浇鏌ョ湅銆�</p>
- <a :href="fileUrl">涓嬭浇鏂囦欢</a>
- <div id="teacherPaperAnswer"></div>
+ <p v-if="csvList.length==0">CSV 鏂囦欢鏃犳硶鐩存帴棰勮锛岃涓嬭浇鏌ョ湅銆�</p>
+ <a :href="fileUrl" v-if="csvList.length==0">涓嬭浇鏂囦欢</a>
+ <el-tabs type="border-card" v-if="csvList.length>0" tab-position="bottom">
+ <el-tab-pane :label="item.sheetName" v-for="(item,index) in csvList" :key="index">
+ <el-table :data="item.tableData" height="75vh">
+ <el-table-column :label="m.label" :prop="m.prop" v-for="(m,i) in item.column" :key="i" min-width="120px" show-overflow-tooltip>
+ <template slot-scope="scope" slot="header">
+ <div>
+ <el-tooltip :content="m.label" placement="top">
+ <div class="oneLine">
+ <span>{{m.label}}</span>
+ </div>
+ </el-tooltip>
+ </div>
+ </template>
+ </el-table-column>
+ </el-table>
+ </el-tab-pane>
+ </el-tabs>
</div>
<div v-if="!isSupported">
<p>涓嶆敮鎸佺殑鏂囦欢鏍煎紡</p>
@@ -51,8 +67,7 @@
import VueOfficeExcel from '@vue-office/excel'
//寮曞叆鐩稿叧鏍峰紡
import '@vue-office/excel/lib/index.css'
-import Papa from 'papaparse';
-import jschardet from 'jschardet'
+import * as XLSX from "xlsx";
export default {
components: {
VueOfficeDocx,
@@ -80,6 +95,7 @@
beforeTransformData: (workbookData) => {return workbookData}, //搴曞眰閫氳繃exceljs鑾峰彇excel鏂囦欢鍐呭锛岄�氳繃璇ラ挬瀛愬嚱鏁帮紝鍙互瀵硅幏鍙栫殑excel鏂囦欢鍐呭杩涜淇敼锛屾瘮濡傛煇涓崟鍏冩牸鐨勬暟鎹樉绀轰笉姝ｇ‘锛屽彲浠ュ湪姝よ嚜琛屼慨鏀规瘡涓崟鍏冩牸鐨剉alue鍊笺��
transformData: (workbookData) => {return workbookData}, //灏嗚幏鍙栧埌鐨別xcel鏁版嵁杩涜澶勭悊涔嬪悗涓旀覆鏌撳埌椤甸潰涔嬪墠锛屽彲閫氳繃transformData瀵瑰嵆灏嗘覆鏌撶殑鏁版嵁鍙婃牱寮忚繘琛屼慨鏀癸紝姝ゆ椂姣忎釜鍗曞厓鏍肩殑text鍊煎氨鏄嵆灏嗘覆鏌撳埌椤甸潰涓婄殑鍐呭
},
+ csvList:[],//csv鏂囦欢鏁版嵁
}
},
computed: {
@@ -93,7 +109,15 @@
return /\.(doc|docx)$/i.test(this.fileUrl);
},
isXls(){
- return /\.(xls|xlsx)$/i.test(this.fileUrl);
+ let state = /\.(xls|xlsx)$/i.test(this.fileUrl)
+ if(state){
+ if(/\.(xlsx)$/i.test(this.fileUrl)){
+ this.options.xls = false
+ }else{
+ this.options.xls = true
+ }
+ }
+ return state;
},
isZipOrRar() {
return /\.(zip|rar)$/i.test(this.fileUrl);
@@ -114,6 +138,7 @@
renderedHandler() {
console.log("娓叉煋瀹屾垚")
this.isDocShow = true
+ this.resetStyle()
},
errorHandler() {
console.log("娓叉煋澶辫触")
@@ -123,34 +148,99 @@
this.$axios.post(this.$api.insOrderPlan.preview, {
id: this.currentFile.id,
}).then( res => {
- console.log(res.data)
+ let arr = res.data
+ arr = arr.map(m=>{
+ let obj = {
+ sheetName:m.sheetName,
+ tableData:[],
+ column:[]
+ }
+ obj.tableData = this.formatCSVToTable(m.content.replaceAll('null',' '))
+ for (let item in obj.tableData[0]) {
+ obj.column.push({
+ label: item,
+ prop: item,
+ })
+ }
+ return obj
+ })
+ this.csvList = arr
+ // console.log(333,this.csvList)
+ this.csvList.forEach(m=>{
+ console.log(this.calculateFormulas(m.column,m.tableData))
+ m.tableData = this.calculateFormulas(m.column,m.tableData)
+ })
}).catch( err => {
console.log(err)
})
},
- async main(){
- //娓叉煋琛ㄦ牸
- this.paintingTable(criteriaAnswer,"teacherPaperAnswer"); //鐢╥d瀹氫綅娓叉煋鐩爣
- },
- paintingTable(File, location) {
- $("#" + location + "").empty();
- let table = '<table class="table table-bordered" style="zoom:0.8";>';
- for (let j = 0; j < File.length; j++) {
- if (j == 0) {
- table += '<thead><tr style="white-space: nowrap;"><th scope="col">#</th>';
- for (let k in File[j]) {
- table += '<th scope="col">' + k + '</th>';
+ formatCSVToTable(str){
+ const result = [];
+ const jsonObj = str.split("\n");
+ let arrHeader = [];
+ for (const i in jsonObj) {
+ if (typeof jsonObj[i] === 'string' && jsonObj[i].length > 0) {
+ const row = `${jsonObj[i]}`;
+ if (row.trim().length > 0) {
+ const kv = jsonObj[i].split(',');
+ if (i == 0) {
+ // 鑾峰彇column琛ㄥご
+ arrHeader = kv;
+ } else {
+ const obj = {};
+ for (let index = 0; index < arrHeader.length; index++) {
+ // 缁勮琛ㄦ牸鏁版嵁
+ const name = String(arrHeader[index]);
+ if (!arrHeader[index]) continue
+ if (!obj[name]) {
+ try {
+ if (kv[index]) {
+ obj[name] = String(kv[index]);
+ } else {
+ obj[name] = '';
+ }
+ } catch (err) {
+ obj[name] = '';
+ }
}
- table += '</tr></thead><tbody style="white-space: pre;">';
+ }
+ result.push(obj);
}
- table += '<tr><th scope="row" style="vertical-align: middle;">' + Number(j + 1) + '</th>';
- for (let k in File[j]) {
- table += '<td style="vertical-align: middle; padding:0 20px; border: inset;background:#FFFFFF;"><div style="text-align:left;">' + File[j][k] + '</div></td>';
- }
- table += '</tr>';
+ }
}
- table += '</tbody>';
- $("#" + location + "").append(table);
+ }
+ return result
+ },
+ /**
+ * 璁＄畻琛ㄦ牸鍏紡
+ *
+ * @param tableHeaders 琛ㄥご鏁版嵁
+ * @param tableData 琛ㄦ牸鏁版嵁
+ */
+ calculateFormulas(tableHeaders,tableData){
+ // 鐢熸垚 Excel Sheet 鏍煎紡
+ const sheetData = [tableHeaders.map(m=>m.label), ...tableData.map((row) => Object.values(row))];
+ const worksheet = XLSX.utils.aoa_to_sheet(sheetData);
+ // 璁＄畻鍏紡
+ XLSX.utils.sheet_add_aoa(worksheet, [], { origin: -1 });
+ const newSheetData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
+ // 鏇存柊琛ㄥご鍜岃〃鏍兼暟鎹�
+ tableData = newSheetData.slice(1).map((row) =>
+ row.reduce((obj, value, index) => {
+ obj[newSheetData[0][index]] = value;
+ return obj;
+ }, {})
+ );
+ return tableData
+ },
+ resetStyle(){
+ const elements = document.querySelectorAll('[style*="pt"]');
+ for (const element of elements) {
+ const style = element.getAttribute('style');
+ if (!!style) {
+ element.setAttribute('style', style.replace(/pt/g, 'px'));
+ }
+ }
},
}
}
@@ -160,4 +250,10 @@
img {
max-width: 100%;
}
+
+.oneLine {
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+}
</style>
--
Gitblit v1.9.3