123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222 |
- <template>
- <div class="project-search" v-if="type !== 'xls'">
- <div style="width: 50%" v-if="dataList.length !== 0">
- <div v-for="item in dataList" :key="item.id" class="listClass">
- <img
- :src="item.url"
- alt=""
- style="width: 150px; height: 150px; padding: 10px 10px 10px 0"
- />
- <div v-html="item.content"></div>
- </div>
- </div>
- <div
- v-else
- style="
- width: 50%;
- font-size: 25px;
- margin: 300px auto;
- color: #909399;
- text-align: center;
- "
- >
- 暂无解析数据
- </div>
- <!-- <div style="width: 50%">
- <iframe :src="documentUrl" width="100%" height="822px"></iframe>
- </div> -->
- <div style="width: 50%">
- <!-- 文件预览组件 -->
- <file-preview :file-url="documentUrl" :file-type="type" />
- </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>
-
- <script>
- import { mapGetters } from "vuex";
- import { searchTaskInfo } from "@/api/knowledge";
- import LuckyExcel from "luckyexcel";
- import FilePreview from "@/components/FilePreview/index.vue"; // 新增文件预览组件
- export default {
- components: {
- FilePreview, // 注册文件预览组件
- },
- computed: {
- ...mapGetters(["roleInfo", "authList"]),
- },
- data() {
- return {
- queryForm: {
- document_id: "",
- },
- dataList: [],
- conten: "",
- documentUrl: "",
- type: "",
- excelDataList: [],
- isFileViewable: false,
- supportedFileTypes: ['pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt', 'jpg', 'jpeg', 'png', 'gif'],
- };
- },
- mounted() {
- this.queryForm.document_id = this.$route.query.id;
- this.type = this.$route.query.type;
- this.checkFileType();
- this.search();
- },
- methods: {
- checkAuth(path) {
- if (this.roleInfo.is_admin == 1) {
- return true;
- }
- /* let auth=this.authList.filter(o=>o.type==999 && o.path==path);
- if(auth.length>0){
- return true;
- } */
- return true;
- },
- checkFileType() {
- this.isFileViewable = this.supportedFileTypes.includes(this.type);
- },
- search() {
- searchTaskInfo(this.queryForm)
- .then((res) => {
- this.dataList = res.data.tasks;
- if (this.isFileViewable) {
- this.documentUrl = res.data.documentUrl;
- } else {
- console.log("文件类型不支持预览");
- // 可以在这里添加下载按钮的逻辑
- }
- })
- .catch((error) => {
- console.error("获取数据时出错:", error);
- });
- },
- 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);
- },
- },
- };
- </script>
-
- <style lang="scss" scoped>
- .project-search {
- display: flex;
- padding: 10px;
- font-size: 12px;
- }
- .listClass {
- display: flex;
- align-items: center;
- 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>
-
|