阅行客电子档案
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

312 lines
10 KiB

2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
  1. <template>
  2. <el-dialog class="detail-dialog" title="详情" :close-on-click-modal="false" :modal-append-to-body="false" append-to-body :visible.sync="archivesInfoVisible" :before-close="handleClose">
  3. <!-- <span class="dialog-right-top" />
  4. <span class="dialog-left-bottom" /> -->
  5. <div class="setting-dialog">
  6. <div class="detail-tab tab-content">
  7. <!-- tab -->
  8. <ul class="tab-nav">
  9. <li :class="{'active-tab-nav': archivesTabIndex == 0}" @click="changeActiveTab(0)">基本信息</li>
  10. <li :class="{'active-tab-nav': archivesTabIndex == 1}" @click="changeActiveTab(1)">电子原件</li>
  11. <li :class="{'active-tab-nav': archivesTabIndex == 2}" @click="changeActiveTab(2)">元数据</li>
  12. </ul>
  13. <!-- 基本信息 -->
  14. <div v-if="archivesTabIndex===0" class="base-info item-content">
  15. <el-row>
  16. <el-col v-for="(item,index) in archivesDetailsData" :key="index" :span="item.isLine ? 24 : 12" class="base-info-item">
  17. <span>{{ item.fieldCnName }}</span>
  18. <p :style="{ width: ( item.editLength ? item.editLength+'px' : '' ), flex: ( !item.editLength ? 1 : '' )}">{{ item.context }}</p>
  19. </el-col>
  20. </el-row>
  21. </div>
  22. <!-- 电子原件 -->
  23. <div v-if="archivesTabIndex===1" class="item-content">
  24. <el-table
  25. ref="table"
  26. :data="tableData"
  27. style="min-width: 100%"
  28. height="calc(100vh - 382px)"
  29. @row-click="clickRowHandler"
  30. @selection-change="selectionChangeHandler"
  31. >
  32. <el-table-column prop="file_name" label="文件名称" show-overflow-tooltip min-width="140" align="center" />
  33. <el-table-column prop="file_type" label="格式" min-width="60" align="center" />
  34. <el-table-column prop="file_size" label="大小" min-width="85" align="center">
  35. <template slot-scope="scope">
  36. {{ getFileSize(scope.row.file_size) }}
  37. </template>
  38. </el-table-column>
  39. <!-- <el-table-column prop="file_dpi" label="分辨率" min-width="85" align="center">
  40. <template slot-scope="scope">
  41. <div v-if="!scope.row.file_dpi || scope.row.file_dpi === 'null'"> - </div>
  42. <div v-else> {{ scope.row.file_dpi }} </div>
  43. </template>
  44. </el-table-column> -->
  45. <el-table-column prop="file_thumbnail" label="缩略图" min-width="60" align="center">
  46. <template slot-scope="scope">
  47. <div v-if="scope.row.file_type === 'jpg' || scope.row.file_type === 'jpeg' || scope.row.file_type === 'png' || scope.row.file_type === 'bmp'|| scope.row.file_type === 'gif'">
  48. <i class="fileIcon icon-image" />
  49. </div>
  50. <div v-else-if="scope.row.file_type === 'xlsx' || scope.row.file_type === 'xls'">
  51. <i class="fileIcon icon-excel" />
  52. </div>
  53. <div v-else-if="scope.row.file_type === 'docx' || scope.row.file_type === 'doc'">
  54. <i class="fileIcon icon-word" />
  55. </div>
  56. <div v-else-if="scope.row.file_type === 'pdf'">
  57. <i class="fileIcon icon-pdf" />
  58. </div>
  59. <div v-else-if="scope.row.file_type === 'ppt' || scope.row.file_type === 'pptx'">
  60. <i class="fileIcon icon-ppt" />
  61. </div>
  62. <div v-else-if="scope.row.file_type === 'zip' || scope.row.file_type === 'rar'">
  63. <i class="fileIcon icon-zip" />
  64. </div>
  65. <div v-else-if="scope.row.file_type === 'txt'">
  66. <i class="fileIcon icon-txt" />
  67. </div>
  68. <div v-else>
  69. <i class="fileIcon icon-other" />
  70. </div>
  71. </template>
  72. </el-table-column>
  73. </el-table>
  74. </div>
  75. <!-- 元数据 -->
  76. <div v-if="archivesTabIndex==2" class="metadata-cont item-content">
  77. <pre v-highlightjs="xml_show">
  78. <code class="highlight_s">
  79. {[xml_show]}
  80. </code>
  81. </pre>
  82. </div>
  83. <!-- 点击缩略图看大图 -->
  84. <el-dialog class="preview-dialog" :append-to-body="true" :close-on-click-modal="false" :before-close="handleClose" :visible="showCoverVisible" title="查看大图">
  85. <span class="dialog-right-top" />
  86. <span class="dialog-left-bottom" />
  87. <div class="setting-dialog" style="max-height:calc(100vh - 230px); overflow:auto;">
  88. <img style="max-width:100%; object-fit: contain;" :src="previewSrc" :onerror="defaultImg">
  89. </div>
  90. </el-dialog>
  91. </div>
  92. </div>
  93. </el-dialog>
  94. </template>
  95. <script>
  96. import { form } from '@crud/crud'
  97. import { FetchArchivesDetails, FetchFileListByDocumentId, FetchArchivesMetadata } from '@/api/prearchiveLibrary/prearchiveLibrary'
  98. import { mapGetters } from 'vuex'
  99. export default {
  100. name: 'PrearchiveLibraryDetail',
  101. components: { },
  102. mixins: [
  103. form({})
  104. ],
  105. props: {
  106. selectedDocument: {
  107. type: Object,
  108. default: function() {
  109. return {}
  110. }
  111. }
  112. },
  113. data() {
  114. return {
  115. defaultImg: 'this.src="' + require('@/assets/images/cover-bg.png') + '"',
  116. archivesInfoVisible: false,
  117. archivesTabIndex: 0,
  118. archivesDetailsData: [],
  119. archivesDetailsMetadata: [],
  120. xml_show: null,
  121. selections: [],
  122. tableData: [],
  123. showCoverVisible: false,
  124. previewSrc: '' // 查看大图src
  125. }
  126. },
  127. computed: {
  128. ...mapGetters([
  129. 'baseApi'
  130. ])
  131. },
  132. created() {
  133. },
  134. mounted() {
  135. },
  136. methods: {
  137. getFileSize(fileSize) {
  138. const fileSizeInKB = (fileSize / 1024).toFixed(2) + 'kB'
  139. const fileSizeInB = fileSize + 'B'
  140. return (fileSize / 1024) <= 0.01 ? fileSizeInB : fileSizeInKB
  141. },
  142. getDetial(rowId) {
  143. const params = {
  144. documentId: this.selectedDocument.id,
  145. archivesId: rowId
  146. }
  147. FetchArchivesDetails(params).then(data => {
  148. this.archivesDetailsData = data
  149. })
  150. FetchFileListByDocumentId(params).then(data => {
  151. this.tableData = data.returnlist
  152. })
  153. FetchArchivesMetadata(params).then(data => {
  154. this.archivesDetailsMetadata = data
  155. })
  156. },
  157. changeActiveTab(index) {
  158. this.archivesTabIndex = index
  159. if (this.archivesTabIndex === 2) {
  160. this.setXml()
  161. }
  162. },
  163. // table
  164. clickRowHandler(row) {
  165. this.$refs.table.toggleRowSelection(row)
  166. },
  167. // table
  168. selectionChangeHandler(val) {
  169. this.selections = val
  170. },
  171. // dialog - close
  172. handleClose(done) {
  173. this.showCoverVisible = false
  174. done()
  175. },
  176. // 查看大图
  177. showCoverPreview(row) {
  178. this.showCoverVisible = true
  179. this.previewSrc = this.baseApi + '/downloadFile' + row.file_path
  180. },
  181. setXml() {
  182. const xmlstr = this.archivesDetailsMetadata
  183. this.xml_show = this.showXml(xmlstr)
  184. },
  185. // xml格式化
  186. showXml(str) {
  187. var that = this
  188. var text = str
  189. // 去掉多余的空格
  190. text =
  191. '\n' +
  192. text
  193. .replace(/(<\w+)(\s.*?>)/g, function($0, name, props) {
  194. return name + ' ' + props.replace(/\s+(\w+=)/g, ' $1')
  195. })
  196. .replace(/>\s*?</g, '>\n<')
  197. // 把注释编码
  198. text = text
  199. .replace(/\n/g, '\r')
  200. .replace(/<!--(.+?)-->/g, function($0, text) {
  201. var ret = '<!--' + escape(text) + '-->'
  202. return ret
  203. })
  204. .replace(/\r/g, '\n')
  205. // 调整格式
  206. var rgx = /\n(<(([^\?]).+?)(?:\s|\s*?>|\s*?(\/)>)(?:.*?(?:(?:(\/)>)|(?:<(\/)\2>)))?)/gm
  207. var nodeStack = []
  208. var output = text.replace(rgx, function(
  209. $0,
  210. all,
  211. name,
  212. isBegin,
  213. isCloseFull1,
  214. isCloseFull2,
  215. isFull1,
  216. isFull2
  217. ) {
  218. var isClosed =
  219. isCloseFull1 === '/' ||
  220. isCloseFull2 === '/' ||
  221. isFull1 === '/' ||
  222. isFull2 === '/'
  223. var prefix = ''
  224. if (isBegin === '!') {
  225. prefix = that.getPrefix(nodeStack.length)
  226. } else {
  227. if (isBegin !== '/') {
  228. prefix = that.getPrefix(nodeStack.length)
  229. if (!isClosed) {
  230. nodeStack.push(name)
  231. }
  232. } else {
  233. nodeStack.pop()
  234. prefix = that.getPrefix(nodeStack.length)
  235. }
  236. }
  237. var ret = '\n' + prefix + all
  238. return ret
  239. })
  240. var outputText = output.substring(1)
  241. // 把注释还原并解码,调格式
  242. outputText = outputText
  243. .replace(/\n/g, '\r')
  244. .replace(/(\s*)<!--(.+?)-->/g, function($0, prefix, text) {
  245. if (prefix.charAt(0) === '\r') prefix = prefix.substring(1)
  246. text = unescape(text).replace(/\r/g, '\n')
  247. var ret =
  248. '\n' + prefix + '<!--' + text.replace(/^\s*/gm, prefix) + '-->'
  249. return ret
  250. })
  251. outputText = outputText.replace(/\s+$/g, '').replace(/\r/g, '\r\n')
  252. return outputText
  253. },
  254. getPrefix(prefixIndex) {
  255. var span = ' '
  256. var output = []
  257. for (var i = 0; i < prefixIndex; ++i) {
  258. output.push(span)
  259. }
  260. return output.join('')
  261. }
  262. }
  263. }
  264. </script>
  265. <style lang="scss" scoped>
  266. .base-info,
  267. .metadata-cont{
  268. background-color: #F6F8FC;
  269. }
  270. // 档案详情
  271. .base-info{
  272. padding: 20px 0;
  273. overflow: hidden;
  274. overflow-y: scroll;
  275. .base-info-item{
  276. display: flex;
  277. flex-direction: row;
  278. margin-bottom: 20px;
  279. color: #545B65;
  280. span{
  281. display: block;
  282. width: 160px;
  283. font-weight: bold;
  284. margin-right: 5px;
  285. text-align: right;
  286. color: #0C0E1E;
  287. }
  288. }
  289. }
  290. code.hljs {
  291. font-size: 12px;
  292. color: #0C0E1E !important;
  293. height: 530px !important;
  294. }
  295. ::v-deep .hljs-name{
  296. color: #0C0E1E !important;
  297. }
  298. .base-info .base-info-item span.el-tag{
  299. width: auto;
  300. color: #fff;
  301. }
  302. .svg-style{
  303. width: 60px;
  304. height: 32px;
  305. }
  306. </style>