infoList.vue 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222
  1. <template>
  2. <div class="project-search" v-if="type !== 'xls'">
  3. <div style="width: 50%" v-if="dataList.length !== 0">
  4. <div v-for="item in dataList" :key="item.id" class="listClass">
  5. <img
  6. :src="item.url"
  7. alt=""
  8. style="width: 150px; height: 150px; padding: 10px 10px 10px 0"
  9. />
  10. <div v-html="item.content"></div>
  11. </div>
  12. </div>
  13. <div
  14. v-else
  15. style="
  16. width: 50%;
  17. font-size: 25px;
  18. margin: 300px auto;
  19. color: #909399;
  20. text-align: center;
  21. "
  22. >
  23. 暂无解析数据
  24. </div>
  25. <!-- <div style="width: 50%">
  26. <iframe :src="documentUrl" width="100%" height="822px"></iframe>
  27. </div> -->
  28. <div style="width: 50%">
  29. <!-- 文件预览组件 -->
  30. <file-preview :file-url="documentUrl" :file-type="type" />
  31. </div>
  32. </div>
  33. <div v-else>
  34. <!-- <div
  35. id="luckysheet"
  36. ref="luckysheet"
  37. style="width: 100%; height: 500px"
  38. ></div> -->
  39. <div v-if="excelDataList.length > 0" class="excel-table">
  40. <div v-for="(sheet, sheetIndex) in excelDataList" :key="sheetIndex">
  41. <!-- <h3>{{ sheet.title || `Sheet ${sheetIndex + 1}` }}</h3> -->
  42. <table>
  43. <thead>
  44. <tr>
  45. <th v-for="(header, index) in sheet.data[0]" :key="index">
  46. {{ header }}
  47. </th>
  48. </tr>
  49. </thead>
  50. <tbody>
  51. <tr v-for="(row, rowIndex) in sheet.data.slice(1)" :key="rowIndex">
  52. <td v-for="(cell, cellIndex) in row" :key="cellIndex">
  53. {{ cell }}
  54. </td>
  55. </tr>
  56. </tbody>
  57. </table>
  58. </div>
  59. </div>
  60. <div v-else class="no-data">暂无数据</div>
  61. </div>
  62. </template>
  63. <script>
  64. import { mapGetters } from "vuex";
  65. import { searchTaskInfo } from "@/api/knowledge";
  66. import LuckyExcel from "luckyexcel";
  67. import FilePreview from "@/components/FilePreview/index.vue"; // 新增文件预览组件
  68. export default {
  69. components: {
  70. FilePreview, // 注册文件预览组件
  71. },
  72. computed: {
  73. ...mapGetters(["roleInfo", "authList"]),
  74. },
  75. data() {
  76. return {
  77. queryForm: {
  78. document_id: "",
  79. },
  80. dataList: [],
  81. conten: "",
  82. documentUrl: "",
  83. type: "",
  84. excelDataList: [],
  85. isFileViewable: false,
  86. supportedFileTypes: ['pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt', 'jpg', 'jpeg', 'png', 'gif'],
  87. };
  88. },
  89. mounted() {
  90. this.queryForm.document_id = this.$route.query.id;
  91. this.type = this.$route.query.type;
  92. this.checkFileType();
  93. this.search();
  94. },
  95. methods: {
  96. checkAuth(path) {
  97. if (this.roleInfo.is_admin == 1) {
  98. return true;
  99. }
  100. /* let auth=this.authList.filter(o=>o.type==999 && o.path==path);
  101. if(auth.length>0){
  102. return true;
  103. } */
  104. return true;
  105. },
  106. checkFileType() {
  107. this.isFileViewable = this.supportedFileTypes.includes(this.type);
  108. },
  109. search() {
  110. searchTaskInfo(this.queryForm)
  111. .then((res) => {
  112. this.dataList = res.data.tasks;
  113. if (this.isFileViewable) {
  114. this.documentUrl = res.data.documentUrl;
  115. } else {
  116. console.log("文件类型不支持预览");
  117. // 可以在这里添加下载按钮的逻辑
  118. }
  119. })
  120. .catch((error) => {
  121. console.error("获取数据时出错:", error);
  122. });
  123. },
  124. parseExcelData(tasks) {
  125. return tasks
  126. .filter((task) => task.content)
  127. .map((task, index) => {
  128. let content = task.content;
  129. if (typeof content !== "string") return null;
  130. // Remove the title row if it exists
  131. const titleRowMatch = content.match(/^#.*?\n/);
  132. if (titleRowMatch) {
  133. content = content.slice(titleRowMatch[0].length);
  134. }
  135. // Split the content into rows and remove empty rows
  136. const rows = content
  137. .split("\n")
  138. .map((row) => row.trim())
  139. .filter((row) => row !== "")
  140. .filter((row) => !row.match(/^\|[-:]+\|[-:]+\|$/)) // Remove separator row
  141. .map((row) =>
  142. row
  143. .split("|")
  144. .map((cell) => cell.trim())
  145. .filter((cell) => cell !== "")
  146. );
  147. // Remove the header row if it contains "Unnamed" columns
  148. if (
  149. rows.length > 0 &&
  150. rows[0].some((cell) => cell.startsWith("Unnamed:"))
  151. ) {
  152. rows.shift();
  153. }
  154. return {
  155. title: task.title || `Sheet ${index + 1}`,
  156. data: rows,
  157. };
  158. })
  159. .filter((sheet) => sheet !== null && sheet.data.length > 0);
  160. },
  161. },
  162. };
  163. </script>
  164. <style lang="scss" scoped>
  165. .project-search {
  166. display: flex;
  167. padding: 10px;
  168. font-size: 12px;
  169. }
  170. .listClass {
  171. display: flex;
  172. align-items: center;
  173. justify-content: space-between;
  174. }
  175. .excel-table {
  176. width: 100%;
  177. overflow-y: auto;
  178. table {
  179. border-collapse: collapse;
  180. width: 100%;
  181. margin-bottom: 20px;
  182. }
  183. th,
  184. td {
  185. border: 1px solid #ddd;
  186. padding: 8px;
  187. text-align: left;
  188. white-space: nowrap;
  189. }
  190. th {
  191. background-color: #f2f2f2;
  192. font-weight: bold;
  193. position: sticky;
  194. top: 0;
  195. z-index: 1;
  196. }
  197. tr:nth-child(even) {
  198. background-color: #f9f9f9;
  199. }
  200. }
  201. .no-data {
  202. font-size: 18px;
  203. color: #909399;
  204. text-align: center;
  205. margin-top: 50px;
  206. }
  207. </style>