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

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

@@ -1,59 +1,69 @@
 <template>
- <ibps-file-viewer
-    :visible.sync="dialogVisible"
-    :title="title"
-    :url="url"
-    :optionFile="optionFile"
-    :file-ext="fileExt"
-    @close="$emit('close', false)"
-  />
+    <ibps-file-viewer
+        :visible.sync="dialogVisible"
+        :title="title"
+        :url="url"
+        :url-list="urlList"
+        :option-file="optionFile"
+        :file-ext="fileExt"
+        @close="$emit('close', false)"
+    />
 </template>
 <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
-  },
-  props: {
-    visible: {
-      type: Boolean,
-      default: false
+    components: {
+        IbpsFileViewer
     },
-    file: {
-      type: Object
+    props: {
+        visible: {
+            type: Boolean,
+            default: false
+        },
+        file: {
+            type: Object
+        },
+        optionFile: {
+            type: Object,
+            default: () => {
+                return {}
+            }
+        },
+        fileList: {
+            type: Array,
+            default: () => []
+        }
     },
-    optionFile: {
-      type: Object,
-      default: () => {
-        return {}
-      }
+    data () {
+        return {
+            dialogVisible: false,
+            title: '',
+            fileId: '',
+            fileExt: '',
+            fileType: '',
+            url: '',
+            urlList: []
+        }
     },
-  },
-  data() {
-    return {
-      dialogVisible: false,
-      title: '',
-      fileId: '',
-      fileExt: '',
-      fileType: '',
-      url: ''
-    }
-  },
-  watch: {
-    visible: {
-      handler: function(val, oldVal) {
-        this.dialogVisible = this.visible
-        if (this.dialogVisible) {
-          this.title = this.file.fileName
-          this.fileId = this.file.id
-          this.fileExt = this.file.ext
-          this.url = previewFile(this.file.id) || ''
+    watch: {
+        visible: {
+            handler: function (val, oldVal) {
+                this.dialogVisible = this.visible
+                if (this.dialogVisible) {
+                    this.title = this.file.fileName
+                    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
         }
-      },
-      immediate: true
     }
-  }
 
 }
 </script>

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) {