|
@@ -1,5 +1,5 @@
|
|
<template>
|
|
<template>
|
|
- <div class="project-search">
|
|
|
|
|
|
+ <div class="project-search" v-if="type !== 'xls'">
|
|
<div style="width: 50%" v-if="dataList.length !== 0">
|
|
<div style="width: 50%" v-if="dataList.length !== 0">
|
|
<div v-for="item in dataList" :key="item.id" class="listClass">
|
|
<div v-for="item in dataList" :key="item.id" class="listClass">
|
|
<img
|
|
<img
|
|
@@ -23,14 +23,44 @@
|
|
暂无解析数据
|
|
暂无解析数据
|
|
</div>
|
|
</div>
|
|
<div style="width: 50%">
|
|
<div style="width: 50%">
|
|
- <iframe :src="documentUrl" width="100%" height="100%"></iframe>
|
|
|
|
|
|
+ <iframe :src="documentUrl" width="100%" height="822px"></iframe>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
+ <div v-else>
|
|
|
|
+ <!-- <div
|
|
|
|
+ id="luckysheet"
|
|
|
|
+ ref="luckysheet"
|
|
|
|
+ style="width: 100%; height: 500px"
|
|
|
|
+ ></div> -->
|
|
|
|
+ <div v-if="excelDataList.length > 0" class="excel-table">
|
|
|
|
+ <div v-for="(sheet, sheetIndex) in excelDataList" :key="sheetIndex">
|
|
|
|
+ <!-- <h3>{{ sheet.title || `Sheet ${sheetIndex + 1}` }}</h3> -->
|
|
|
|
+ <table>
|
|
|
|
+ <thead>
|
|
|
|
+ <tr>
|
|
|
|
+ <th v-for="(header, index) in sheet.data[0]" :key="index">
|
|
|
|
+ {{ header }}
|
|
|
|
+ </th>
|
|
|
|
+ </tr>
|
|
|
|
+ </thead>
|
|
|
|
+ <tbody>
|
|
|
|
+ <tr v-for="(row, rowIndex) in sheet.data.slice(1)" :key="rowIndex">
|
|
|
|
+ <td v-for="(cell, cellIndex) in row" :key="cellIndex">
|
|
|
|
+ {{ cell }}
|
|
|
|
+ </td>
|
|
|
|
+ </tr>
|
|
|
|
+ </tbody>
|
|
|
|
+ </table>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div v-else class="no-data">暂无数据</div>
|
|
|
|
+ </div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
import { mapGetters } from "vuex";
|
|
import { mapGetters } from "vuex";
|
|
import { searchTaskInfo } from "@/api/knowledge";
|
|
import { searchTaskInfo } from "@/api/knowledge";
|
|
|
|
+import LuckyExcel from "luckyexcel";
|
|
export default {
|
|
export default {
|
|
components: {},
|
|
components: {},
|
|
computed: {
|
|
computed: {
|
|
@@ -45,10 +75,13 @@ export default {
|
|
dataList: [],
|
|
dataList: [],
|
|
conten: "",
|
|
conten: "",
|
|
documentUrl: "",
|
|
documentUrl: "",
|
|
|
|
+ type: "",
|
|
|
|
+ excelDataList: [],
|
|
};
|
|
};
|
|
},
|
|
},
|
|
mounted() {
|
|
mounted() {
|
|
this.queryForm.document_id = this.$route.query.id;
|
|
this.queryForm.document_id = this.$route.query.id;
|
|
|
|
+ this.type = this.$route.query.type;
|
|
this.search();
|
|
this.search();
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
@@ -63,11 +96,61 @@ export default {
|
|
return true;
|
|
return true;
|
|
},
|
|
},
|
|
search() {
|
|
search() {
|
|
- searchTaskInfo(this.queryForm).then((res) => {
|
|
|
|
- console.log(res);
|
|
|
|
- this.dataList = res.data.tasks;
|
|
|
|
- this.documentUrl = res.data.documentUrl;
|
|
|
|
- });
|
|
|
|
|
|
+ searchTaskInfo(this.queryForm)
|
|
|
|
+ .then((res) => {
|
|
|
|
+ this.dataList = res.data.tasks;
|
|
|
|
+ this.documentUrl = res.data.documentUrl;
|
|
|
|
+
|
|
|
|
+ if (this.type === "xls" || this.type === "xlsx") {
|
|
|
|
+ this.excelDataList = this.parseExcelData(res.data.tasks);
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ .catch((error) => {
|
|
|
|
+ console.error("Error fetching data:", error);
|
|
|
|
+ this.excelDataList = [];
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ parseExcelData(tasks) {
|
|
|
|
+ return tasks
|
|
|
|
+ .filter((task) => task.content)
|
|
|
|
+ .map((task, index) => {
|
|
|
|
+ let content = task.content;
|
|
|
|
+ if (typeof content !== "string") return null;
|
|
|
|
+
|
|
|
|
+ // Remove the title row if it exists
|
|
|
|
+ const titleRowMatch = content.match(/^#.*?\n/);
|
|
|
|
+ if (titleRowMatch) {
|
|
|
|
+ content = content.slice(titleRowMatch[0].length);
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ // Split the content into rows and remove empty rows
|
|
|
|
+ const rows = content
|
|
|
|
+ .split("\n")
|
|
|
|
+ .map((row) => row.trim())
|
|
|
|
+ .filter((row) => row !== "")
|
|
|
|
+ .filter((row) => !row.match(/^\|[-:]+\|[-:]+\|$/)) // Remove separator row
|
|
|
|
+ .map((row) =>
|
|
|
|
+ row
|
|
|
|
+ .split("|")
|
|
|
|
+ .map((cell) => cell.trim())
|
|
|
|
+ .filter((cell) => cell !== "")
|
|
|
|
+ );
|
|
|
|
+
|
|
|
|
+ // Remove the header row if it contains "Unnamed" columns
|
|
|
|
+ if (
|
|
|
|
+ rows.length > 0 &&
|
|
|
|
+ rows[0].some((cell) => cell.startsWith("Unnamed:"))
|
|
|
|
+ ) {
|
|
|
|
+ rows.shift();
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ return {
|
|
|
|
+ title: task.title || `Sheet ${index + 1}`,
|
|
|
|
+ data: rows,
|
|
|
|
+ };
|
|
|
|
+ })
|
|
|
|
+ .filter((sheet) => sheet !== null && sheet.data.length > 0);
|
|
},
|
|
},
|
|
},
|
|
},
|
|
};
|
|
};
|
|
@@ -84,5 +167,41 @@ export default {
|
|
align-items: center;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
justify-content: space-between;
|
|
}
|
|
}
|
|
|
|
+.excel-table {
|
|
|
|
+ width: 100%;
|
|
|
|
+ overflow-y: auto;
|
|
|
|
+ table {
|
|
|
|
+ border-collapse: collapse;
|
|
|
|
+ width: 100%;
|
|
|
|
+ margin-bottom: 20px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ th,
|
|
|
|
+ td {
|
|
|
|
+ border: 1px solid #ddd;
|
|
|
|
+ padding: 8px;
|
|
|
|
+ text-align: left;
|
|
|
|
+ white-space: nowrap;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ th {
|
|
|
|
+ background-color: #f2f2f2;
|
|
|
|
+ font-weight: bold;
|
|
|
|
+ position: sticky;
|
|
|
|
+ top: 0;
|
|
|
|
+ z-index: 1;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ tr:nth-child(even) {
|
|
|
|
+ background-color: #f9f9f9;
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.no-data {
|
|
|
|
+ font-size: 18px;
|
|
|
|
+ color: #909399;
|
|
|
|
+ text-align: center;
|
|
|
|
+ margin-top: 50px;
|
|
|
|
+}
|
|
</style>
|
|
</style>
|
|
|
|
|