update 动态消息详情

src/components/FileEcho.vue

@@ -0,0 +1,159 @@
+<template>
+  <div>
+    <template v-if="fileList && fileList.length > 0">
+      <div class="file" v-for="file in fileList" :key="file.id">
+        <div class="file-info">
+          <a-icon type="link" />
+          <div class="file-name" @click="handlePreview(file)">{{ file.fileName }}</div>
+        </div>
+        <div class="file-operate">
+          <!--                下载-->
+          <a-button type="link" icon="download" @click="handleDownload(file)">{{ $t('download') }}</a-button>
+        </div>
+      </div>
+    </template>
+
+    <div id="images">
+      <div class="image" v-viewer="{movable: false}">
+        <img v-show="image" :src="imageUrl" alt="">
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getFileInfo } from '../api/api.js'
+import Vue from 'vue'
+import { ACCESS_TOKEN } from '../store/mutation-types.js'
+import { downloadFile, getFileAccessHttpUrl } from '../api/manage.js'
+import { previewPdf } from '../utils/previewPdf.js'
+import { Base64 } from 'js-base64'
+
+const FILE_TYPE_IMGS = ['jpg', 'jpeg', 'png', 'raw']
+const FILE_TYPE_PDF = 'pdf'
+
+export default {
+  name: 'FileEcho',
+  props: {
+    // 文件id
+    fileIds: {
+      type: String,
+      required: false,
+      default: null
+    }
+  },
+  watch: {
+    fileIds (value) {
+      if (value) {
+        this.getFileList()
+      }
+    }
+  },
+  data () {
+    return {
+      fileList: [],
+      image: false,
+      imageUrl: null
+    }
+  },
+  methods: {
+    getFileList () {
+      const fileIdsList = this.fileIds.split(',')
+      for (let i = 0; i < fileIdsList.length; i++) {
+        const id = fileIdsList[i]
+        getFileInfo({ id }).then(res => {
+          if (res.success) {
+            this.fileList.push(res.result)
+          }
+        })
+      }
+    },
+    handlePreview (file) {
+      if (!file || !file.url) {
+        return
+      }
+      // 截取文件后缀名
+      const fileSuffix = file.fileName ? file.fileName.split('.')[file.fileName.split('.').length - 1] : ''
+      const canPreview = FILE_TYPE_IMGS.some(tt => fileSuffix.toLowerCase() === tt) || fileSuffix.toLowerCase() === FILE_TYPE_PDF
+      // 判断是否为可预览格式的文件
+      if (!canPreview) {
+        this.$message.loading('该文件类型不支持预览，正在为您准备下载...').then(() => {
+          this.handleDownload(file)
+        })
+        return
+      }
+      const fileFullUrl = `${window._CONFIG.domianWebSocketURL}/sys/common/download/${file.id}?token=${Vue.ls.get(ACCESS_TOKEN)}&fullfilename=${file.fileName}`
+      // 图片预览，使用自己添加的组件
+      if (canPreview && FILE_TYPE_IMGS.includes(fileSuffix.toLowerCase())) {
+        this.imageUrl = getFileAccessHttpUrl(file.id)
+        // 获取viewer实例
+        const viewer = this.$el.querySelector('.image').$viewer
+        // 调用show方法进行显示预览图
+        viewer.show()
+        // this.$refs.imagePreviewModal.open(file)
+        return
+      }
+      // pdf预览
+      if (canPreview && FILE_TYPE_PDF.includes(fileSuffix)) {
+        const url = previewPdf(file.id)
+        window.open(url)
+        return
+      }
+      // 其余可预览文件仍使用KKFile进行预览
+      const url = `${window._CONFIG.onlinePreviewDomainURL}?url=${encodeURIComponent(Base64.encode(fileFullUrl))}`
+      window.open(url)
+    },
+    /**
+     * 单个文件的下载功能
+     * @param file
+     */
+    handleDownload (file) {
+      // 下载文件
+      downloadFile(`/sys/common/download/${file.id}`, file.fileName)
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.file {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.file:last-child {
+  margin-bottom: 0;
+}
+
+.file-info {
+  display: flex;
+  align-items: center;
+  color: @primary-color;
+  cursor: pointer;
+  flex: 1;
+  width: 0;
+}
+
+.file-info > .anticon {
+  margin-right: 8px;
+}
+
+.file-name {
+  white-space: nowrap;
+  overflow: hidden;
+  flex: 1;
+  width: 0;
+  text-overflow: ellipsis;
+}
+
+.file-operate {
+  .ant-btn > .anticon + span, .ant-btn > .iconfont + span {
+    margin-left: 10px;
+  }
+
+  .ant-btn:first-child {
+    margin-left: 15px;
+  }
+}
+</style>

src/components/jero/JUpload.vue

@@ -66,8 +66,8 @@ const Base64 = require('js-base64').Base64
 
 // 支持预览的文件类型
 const CAN_PREVIEW_FILE_TYPE = ['pdf', 'image']
-// 不支持预览的文件后缀
+// 支持预览的文件后缀
-const CAN_PREVIEW_FILE_SUFFIX = ['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt', 'mp3', 'mp4', 'flv']
+const CAN_PREVIEW_FILE_SUFFIX = ['jpg', 'jpeg', 'png', 'raw', 'pdf']
 const uidGenerator = () => {
   return '-' + parseInt(Math.random() * 10000 + 1, 10)
 }
@@ -401,7 +401,7 @@ export default {
       }
       const fileType = file.type
       // 截取文件后缀名
-      const fileSuffix = file.name ? file.name.split('.')[file.name.split('.').length - 1] : ''
+      const fileSuffix = file.name ? file.name.split('.')[file.name.split('.').length - 1].toLowerCase() : ''
       const canPreview = fileType ? CAN_PREVIEW_FILE_TYPE.some(tt => fileType.indexOf(tt) !== -1) : CAN_PREVIEW_FILE_SUFFIX.some(tt => fileSuffix === tt)
       // 判断是否为可预览格式的文件
       if (!canPreview) {

src/views/standardRegulationLibrary/commonPage/StandardDetailPage.vue

@@ -370,7 +370,7 @@ export default {
       }
       // pdf预览
       if (canPreview && FILE_TYPE_PDF.includes(fileSuffix)) {
-        const url = previewPdf(file.response.result.id)
+        const url = previewPdf(file.id)
         window.open(url)
         return
       }

src/views/standardRegulationLibrary/dynamicMessage/DynamicMessageDetail.vue

@@ -7,6 +7,28 @@
       <div class="detail-title">
         【{{ $t('standardRegulationLibrary.dynamicMessage.dynamicDetails') }}】{{ detailData.dynamicHeading }}
       </div>
+      <div class="decoration">
+        <!--浏览量-->
+        <div class="page-view decoration-item">
+          <a-icon type="eye" />
+          {{ detailData.readCount }}
+        </div>
+        <!--编辑人-->
+        <div class="writer decoration-item">
+          <label>{{ $t('docTool.split.editor') }}</label>
+          <span>{{ detailData.writer_dictText }}</span>
+        </div>
+        <!--发布时间-->
+        <div class="writer decoration-item">
+          <label>{{ $t('standardRegulationLibrary.dynamicMessage.releaseTime') }}</label>
+          <span>{{ detailData.releaseTime }}</span>
+        </div>
+      </div>
+      <div class="container">
+        <div class="container-title">{{ $t('standardRegulationLibrary.dynamicMessage.dynamicDetails') }}</div>
+        <div v-html="detailData.dynamicDetails"></div>
+        <file-echo :file-ids="detailData.dataText" class="file-box"/>
+      </div>
     </div>
 
   </internal-detail-page>
@@ -15,14 +37,16 @@
 <script>
 import InternalDetailPage from '../../../components/InternalDetailPage.vue'
 import { getDynamicMessageById } from '../../../api/standardRegulationLibraryApi.js'
+import FileEcho from '../../../components/FileEcho.vue'
 
 export default {
   name: 'DynamicMessageDetail',
-  components: { InternalDetailPage },
+  components: { InternalDetailPage, FileEcho },
   data () {
     return {
       loading: false,
-      detailData: {}
+      detailData: {},
+      fileList: []
     }
   },
   created () {
@@ -63,4 +87,46 @@ export default {
   color: #1D2129;
   text-align: center;
 }
+
+.decoration {
+  padding: 8px 0;
+  border-bottom: 1px solid #E5E6EB;
+  text-align: right;
+
+  &-item {
+    display: inline-block;
+    margin-left: 20px;
+  }
+}
+
+.writer {
+  font-size: 14px;
+  font-family: PingFang SC-Regular, PingFang SC, sans-serif;
+  font-weight: 400;
+
+  label {
+    color: #4E5969;
+    margin-right: 8px;
+  }
+
+  span {
+    color: #86909C;
+  }
+}
+
+.container {
+  margin-top: 24px;
+
+  &-title {
+    font-size: 16px;
+    font-family: PingFang SC-Medium, PingFang SC, sans-serif;
+    font-weight: 550;
+    color: #1D2129;
+    margin-bottom: 8px;
+  }
+}
+
+.file-box {
+  margin-top: 10px;
+}
 </style>

src/views/standardRegulationLibrary/dynamicMessage/DynamicMessageFormPage.vue

@@ -41,7 +41,7 @@
       <a-form-item :labelCol="lineLabelCol"
                    :wrapperCol="lineWrapperCol"
                    :label="$t('standardRegulationLibrary.dynamicMessage.dataText')">
-        <j-upload v-decorator="['dataText', validatorRules.dataText]" :number="fileNum" :file-type="fileType" />
+        <j-upload v-decorator="['dataText', validatorRules.dataText]" return-id :number="fileNum" :file-type="fileType" />
       </a-form-item>
     </a-form>