附件图片预览增加翻页功能

src/business/platform/file/attachment/selector.vue

@@ -37,6 +37,7 @@
                 :file="attachment"
                 :visible="filePreviewVisible"
                 :option-file="optionFileView"
+                :file-list="fileList"
                 @close="visible => filePreviewVisible = visible"
             />
         </div>
@@ -173,7 +174,8 @@ export default {
             showFile: false,
             file: '',
             optionFile: {},
-            optionFileView: {}
+            optionFileView: {},
+            fileList: []
         }
     },
     computed: {
@@ -551,6 +553,7 @@ export default {
             this.optionFileView.data = this.attachment // 记录编制的位置，需要替换。
             this.optionFileView.data.index = index
             this.filePreviewVisible = true
+            this.fileList = this.multiple ? this.selectorValue : [this.selectorValue]
         },
         /**
          *  确定

src/business/platform/file/file-preview/index.vue

@@ -3,6 +3,7 @@
         :visible.sync="dialogVisible"
         :title="title"
         :url="url"
+        :url-list="urlList"
         :option-file="optionFile"
         :file-ext="fileExt"
         @close="$emit('close', false)"
@@ -11,6 +12,8 @@
 <script>
 import IbpsFileViewer from '@/components/ibps-file-viewer'
 import { previewFile } from '@/api/platform/file/attachment'
+import { imageType } from '@/components/ibps-file-viewer/constants/index.js'
+
 export default {
     components: {
         IbpsFileViewer
@@ -28,6 +31,10 @@ export default {
             default: () => {
                 return {}
             }
+        },
+        fileList: {
+            type: Array,
+            default: () => []
         }
     },
     data () {
@@ -37,7 +44,8 @@ export default {
             fileId: '',
             fileExt: '',
             fileType: '',
-            url: ''
+            url: '',
+            urlList: []
         }
     },
     watch: {
@@ -49,6 +57,8 @@ export default {
                     this.fileId = this.file.id
                     this.fileExt = this.file.ext
                     this.url = previewFile(this.file.id) || ''
+                    // 过滤出图片url
+                    this.urlList = this.fileList.filter(i => imageType.includes(i.ext)).map(ii => previewFile(ii.id) || '') || []
                 }
             },
             immediate: true

src/components/ibps-file-viewer/index.vue

@@ -3,8 +3,9 @@
         <image-viewer
             v-if="fileType === 'image'"
             :z-index="zIndex"
-            :url-list="[url]"
+            :url-list="imgList"
             :on-close="closeDialog"
+            :initial-index="imgIndex"
         />
         <template v-if="fileType !== 'image' && fileType">
             <el-dialog
@@ -79,6 +80,10 @@ export default {
         file: {
             type: String,
             require: ''
+        },
+        urlList: {
+            type: Array,
+            default: () => []
         }
     },
     data () {
@@ -103,6 +108,14 @@ export default {
             }
         }
     },
+    computed: {
+        imgList () {
+            return this.urlList.length > 0 ? this.urlList : [this.url]
+        },
+        imgIndex () {
+            return this.urlList.length > 0 ? this.urlList.indexOf(this.url) : 0
+        }
+    },
     watch: {
         optionFile: {
             handler: function (val, oldVal) {