同步罗湖部分代码，修改表单pdf预览方式

public/lib/pdfjs-dist/build/pdf.worker.js

@@ -18918,8 +18918,8 @@ class WidgetAnnotation extends Annotation {
     data.readOnly = this.hasFieldFlag(_util.AnnotationFieldFlag.READONLY);
 
     if (data.fieldType === "Sig") {
-      data.fieldValue = null;
-      this.setFlags(_util.AnnotationFlag.HIDDEN);
+      //data.fieldValue = null;
+      //this.setFlags(_util.AnnotationFlag.HIDDEN);
     }
   }
 
@@ -45926,4 +45926,4 @@ class PDFWorkerStreamRangeReader {
 /***/ })
 /******/ ]);
 });
-//# sourceMappingURL=pdf.worker.js.map
+//# sourceMappingURL=pdf.worker.js.map

public/lib/pdfjs-dist/web/viewer.html

@@ -210,18 +210,18 @@ See https://github.com/adobe-type-tools/cmap-resources
                   <span data-l10n-id="presentation_mode_label">Presentation Mode</span>
                 </button>
 
-                <button id="openFile" class="toolbarButton openFile hiddenLargeView" title="Open File" tabindex="32" data-l10n-id="open_file">
+                <button id="openFile" class="toolbarButton openFile hiddenLargeView" title="Open File" tabindex="32" data-l10n-id="open_file" style="display: none;">
                   <span data-l10n-id="open_file_label">Open</span>
                 </button>
 
-                <button id="print" class="toolbarButton print hiddenMediumView" title="Print" tabindex="33" data-l10n-id="print">
+                <button id="print" class="toolbarButton print hiddenMediumView" title="Print" tabindex="33" data-l10n-id="print" style="display: none;">
                   <span data-l10n-id="print_label">Print</span>
                 </button>
 
-                <button id="download" class="toolbarButton download hiddenMediumView" title="Download" tabindex="34" data-l10n-id="download">
+                <button id="download" class="toolbarButton download hiddenMediumView" title="Download" tabindex="34" data-l10n-id="download" style="display: none;">
                   <span data-l10n-id="download_label">Download</span>
                 </button>
-                <a href="#" id="viewBookmark" class="toolbarButton bookmark hiddenSmallView" title="Current view (copy or open in new window)" tabindex="35" data-l10n-id="bookmark">
+                <a href="#" id="viewBookmark" class="toolbarButton bookmark hiddenSmallView" title="Current view (copy or open in new window)" tabindex="35" data-l10n-id="bookmark" style="display: none;">
                   <span data-l10n-id="bookmark_label">Current View</span>
                 </a>
 

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

@@ -1,349 +1,366 @@
 <template>
-  <div class="ibps-attachment-selector">
-    <template v-if="uploadable">
-      <!--ibps 附件上传方式-->
-      <template v-if="uploadType==='attachment'">
-        <ul
-          :class="{disabled:disabled}"
-          class="selector-list"
-          @click="handleUpload"
-        >
-          <label>
-            <div class="plus">+</div>
-            <div class="selector-empty">{{ placeholder }}</div>
-          </label>
-        </ul>
-      </template>
-      <!--直接弹出选择文件框-->
-      <template v-else>
-        <el-upload
-          ref="upload"
-          :file-list="fileList"
-          :on-success="handleSuccess"
-          :on-error="handleError"
-          :before-upload="beforeUpload"
-          :http-request="httpRequest"
-          :multiple="multiple"
-          :accept="accept"
-          :show-file-list="false"
-          action="https://www.bpmhome.cn/post"
-          name="file"
-          drag
-          class="ibps-default-upload"
-        >
-          <ul
-            :class="{disabled:disabled}"
-            class="selector-list"
-          >
-            <label>
-              <div class="plus">+</div>
-              <div class="selector-empty">{{ placeholder }}</div>
-            </label>
-          </ul>
-        </el-upload>
-
-        <!--重选附件-->
-        <el-upload
-          ref="defaultReselectUpload"
-          style="display:none;"
-          action="https://www.bpmhome.cn/post"
-          :on-success="handleReselectSuccess"
-          :before-upload="beforeUpload"
-          :http-request="httpRequest"
-          :file-list="fileList"
-          :multiple="false"
-          :accept="accept"
-          name="file"
-          drag
-        />
-      </template>
-    </template>
-
-
-    <ul
-      v-if="$utils.isNotEmpty(items)"
-      :class="[
-        'el-upload-list',
-        'el-upload-list--' + listType,
-        { 'is-disabled': !editable }
-      ]"
-    >
-      <li
-        v-for="(file,index) in items"
-        :key="index"
-        :class="['el-upload-list__item', focusing ? 'focusing' : '']"
-        tabindex="0"
-        @focus="focusing = true"
-        @blur="focusing = false"
-        @click.stop="focusing = false"
-      >
-        <span :file="file" >
-          <a
-            class="el-upload-list__item-name"
-            :style="{
-              marginRight:toolsWidth
-            }"
-            :title="file"
-            @click.stop="handlePreview(index)"
-            >
-         <i class="el-icon-document" />{{ file | ellipsis }}
-          </a>
-          <label
-            class="tools"
-          >
-           <template v-if="operation_status!='none' && editable">
-              <el-tooltip effect="dark" content="编辑" placement="bottom-start">
-                <el-link type="primary" :underline="false" icon="el-icon-edit" @click.stop="handleEdit(index)">&nbsp;</el-link>
-              </el-tooltip>
-            </template>
-             <el-divider direction="vertical" />
-            <template v-if="editable">
-              <!--默认附件上传 -->
-              <el-tooltip effect="dark" content="重新选择" placement="bottom-start">
-                <el-link type="primary" :underline="false" icon="ibps-icon-undo" @click.stop="handleReselect(index)">&nbsp;</el-link>
-              </el-tooltip>
-              <el-divider direction="vertical" />
-              <el-tooltip effect="dark" content="删除" placement="bottom-start">
-                <el-link type="danger" :underline="false" icon="ibps-icon-delete" @click.stop="handleRemove(index)">&nbsp;</el-link>
-              </el-tooltip>
-              <el-divider v-if="download" direction="vertical" />
-            </template>
-            <template v-if="download">
-              <el-tooltip effect="dark" content="下载" placement="bottom-start">
-                <el-link type="primary" :underline="false" icon="ibps-icon-download" @click.stop="handleDownload(index)">&nbsp;</el-link>
-              </el-tooltip>
+    <div class="ibps-attachment-selector">
+        <template v-if="uploadable">
+            <!--ibps 附件上传方式-->
+            <template v-if="uploadType==='attachment'">
+                <ul
+                    :class="{disabled:disabled}"
+                    class="selector-list"
+                    @click="handleUpload"
+                >
+                    <label>
+                        <div class="plus">+</div>
+                        <div class="selector-empty">{{ placeholder }}</div>
+                    </label>
+                </ul>
             </template>
-          </label>
-        </span>
-
-
-      </li>
-    </ul>
+            <!--直接弹出选择文件框-->
+            <template v-else>
+                <el-upload
+                    ref="upload"
+                    :file-list="fileList"
+                    :on-success="handleSuccess"
+                    :on-error="handleError"
+                    :before-upload="beforeUpload"
+                    :http-request="httpRequest"
+                    :multiple="multiple"
+                    :accept="accept"
+                    :show-file-list="false"
+                    action="https://www.bpmhome.cn/post"
+                    name="file"
+                    drag
+                    class="ibps-default-upload"
+                >
+                    <ul
+                        :class="{disabled:disabled}"
+                        class="selector-list"
+                    >
+                        <label>
+                            <div class="plus">+</div>
+                            <div class="selector-empty">{{ placeholder }}</div>
+                        </label>
+                    </ul>
+                </el-upload>
 
+                <!--重选附件-->
+                <el-upload
+                    ref="defaultReselectUpload"
+                    style="display:none;"
+                    action="https://www.bpmhome.cn/post"
+                    :on-success="handleReselectSuccess"
+                    :before-upload="beforeUpload"
+                    :http-request="httpRequest"
+                    :file-list="fileList"
+                    :multiple="false"
+                    :accept="accept"
+                    name="file"
+                    drag
+                />
+            </template>
+        </template>
 
-  </div>
+        <ul
+            v-if="$utils.isNotEmpty(items)"
+            :class="['el-upload-list', 'el-upload-list--' + listType, { 'is-disabled': !editable }]"
+        >
+            <vue-draggable
+                v-model="sortList"
+                v-bind="draggableOptions"
+                class="list-group"
+                @start="isDragging = true"
+                @end="()=>{isDragging= false}"
+                @update="updateSort"
+            >
+                <li
+                    v-for="(file,index) in items"
+                    :key="index"
+                    :class="['el-upload-list__item', focusing ? 'focusing' : '']"
+                    tabindex="0"
+                    @focus="focusing = true"
+                    @blur="focusing = false"
+                    @click.stop="focusing = false"
+                >
+                    <span :file="file">
+                        <a
+                            class="el-upload-list__item-name"
+                            :style="{ marginRight:toolsWidth }"
+                            :title="file"
+                            @click.stop="handlePreview(index)"
+                        >
+                            <i class="el-icon-document" />{{ file | ellipsis }}
+                        </a>
+                        <label class="tools">
+                            <template v-if="operation_status!='none' && editable">
+                                <el-tooltip effect="dark" content="编辑" placement="bottom-start">
+                                    <el-link type="primary" :underline="false" icon="el-icon-edit" @click.stop="handleEdit(index)">&nbsp;</el-link>
+                                </el-tooltip>
+                            </template>
+                            <el-divider direction="vertical" />
+                            <template v-if="editable">
+                                <!--默认附件上传 -->
+                                <!-- <el-tooltip effect="dark" content="拖拽排序" placement="bottom-start">
+                                    <el-link type="info" :underline="false" icon="ibps-icon-arrows" class="draggable">&nbsp;</el-link>
+                                </el-tooltip>
+                                <el-divider direction="vertical" /> -->
+                                <el-tooltip effect="dark" content="重新选择" placement="bottom-start">
+                                    <el-link type="primary" :underline="false" icon="ibps-icon-undo" @click.stop="handleReselect(index)">&nbsp;</el-link>
+                                </el-tooltip>
+                                <el-divider direction="vertical" />
+                                <el-tooltip effect="dark" content="删除" placement="bottom-start">
+                                    <el-link type="danger" :underline="false" icon="ibps-icon-delete" @click.stop="handleRemove(index)">&nbsp;</el-link>
+                                </el-tooltip>
+                                <el-divider v-if="download" direction="vertical" />
+                            </template>
+                            <template v-if="download">
+                                <el-tooltip effect="dark" content="下载" placement="bottom-start">
+                                    <el-link type="primary" :underline="false" icon="ibps-icon-download" @click.stop="handleDownload(index)">&nbsp;</el-link>
+                                </el-tooltip>
+                            </template>
+                        </label>
+                    </span>
+                </li>
+            </vue-draggable>
+        </ul>
+    </div>
 </template>
 <script>
 
 import { fileTypes, allFileTypes, accept as acceptTypes } from '@/business/platform/file/constants/fileTypes'
 import { uploadFile } from '@/api/platform/file/attachment'
+import VueDraggable from 'vuedraggable'
 
 export default {
-  name: 'ibps-attachment-selector',
-  props: {
-    items: {
-      type: Array
-    },
-    operation_status: String, //编辑
-    value: {
-      type: [Array, Object]
-    },
-    mediaType: String,
-    media: String,
-    placeholder: {
-      type: String,
-      default: '请选择'
-    },
-    multiple: { // 是否多选
-      type: Boolean,
-      default: false
-    },
-    limit: { // 最大允许上传个数
-      type: Number
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    readonly: {
-      type: Boolean,
-      default: false
-    },
-    download: {
-      type: Boolean,
-      default: false
+    name: 'ibps-attachment-selector',
+    components: { VueDraggable },
+    filters: {
+        ellipsis (val) {
+            if (!val) return ''
+            if (val.length > 60) {
+                return val.slice(0, 60) + '...'
+            }
+            return val
+        }
     },
-    preview: {
-      type: Boolean,
-      default: true
+    props: {
+        items: {
+            type: Array
+        },
+        operation_status: String, // 编辑
+        value: {
+            type: [Array, Object]
+        },
+        mediaType: String,
+        media: String,
+        placeholder: {
+            type: String,
+            default: '请选择'
+        },
+        multiple: { // 是否多选
+            type: Boolean,
+            default: false
+        },
+        limit: { // 最大允许上传个数
+            type: Number
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        readonly: {
+            type: Boolean,
+            default: false
+        },
+        download: {
+            type: Boolean,
+            default: false
+        },
+        preview: {
+            type: Boolean,
+            default: true
+        },
+        uploadType: { // 上传方式 （ default:直接打开上传，attachment：ibps上传附件打开上传 ）
+            type: String,
+            default: 'attachment'
+        },
+        accept: String, // 允许上传类型
+        fileSize: Number, // 尺寸
+        fileExt: {
+            type: Array,
+            default: () => []
+        }
     },
-    uploadType: { // 上传方式 （ default:直接打开上传，attachment：ibps上传附件打开上传 ）
-      type: String,
-      default: 'attachment'
+    data () {
+        console.log(this.value)
+        return {
+            fileList: [],
+            targetExt: false,
+            fileTypes: fileTypes,
+            allFileTypes: allFileTypes,
+            acceptTypes: acceptTypes,
+            defaultSelectIndex: 0,
+            listType: 'text',
+            focusing: false,
+            defaultDisabled: true,
+            sortList: [],
+            isDragging: false,
+            draggableOptions: {
+                handle: '.draggable',
+                ghostClass: 'sortable-ghost',
+                distance: 1,
+                disabled: false,
+                animation: 200,
+                axis: 'y'
+            }
+        }
     },
-    accept: String, // 允许上传类型
-    fileSize: Number, // 尺寸
-    fileExt: {
-      type: Array,
-      default: () => []
-    }
-  },
-  filters:{
-    ellipsis(val){
-      if(!val) return ""
-      if(val.length>45){
-        return val.slice(0,45) +"...";
-      }
-      return val
-    }
-  },
-  data() {
-    return {
-      fileList: [],
-      targetExt: false,
-      fileTypes: fileTypes,
-      allFileTypes: allFileTypes,
-      acceptTypes: acceptTypes,
-      defaultSelectIndex: 0,
-      listType: 'text',
-      focusing: false,
-      defaultDisabled: true,
-    }
-  },
-  computed: {
+    computed: {
     // 是否允许上传
-    uploadable() {
-      if (this.readonly) return false
-      if (!this.multiple && this.items.length >= 1) return false
-      if (this.multiple && (this.limit && this.items.length >= this.limit)) return false
-      return true
-    },
-    editable() {
-      return !(this.readonly || this.disabled)
-    },
-    toolsWidth() {
-      const length = this.editable ? 3 : 1
-      return (30 * length) + 'px'
-    }
-  },
-  methods: {
-    init() {
-      this.fileList = []
-    },
-    handleUpload() {
-      if (!this.editable) return
-      this.$emit('action-event', 'select')
-    },
-    /* 在线编辑报表*/
-    handleEdit(index){
-       this.$emit('action-event', 'edit',index,this.value[index]||this.value,this.operation_status)
-    },
-    handleReselect(index) {
-      if (!this.editable) return
-      if (this.uploadType === 'attachment') {
-        this.$emit('action-event', 'reselect', index)
-      } else {
-        this.$refs.defaultReselectUpload.$refs['upload-inner'].handleClick()
-        this.defaultSelectIndex = index
-      }
-    },
-    handleRemove(index) {
-      if (!this.editable) return
-      this.$emit('action-event', 'remove', index)
-    },
-    handleDownload(index) {
-      this.$emit('action-event', 'download', index)
-    },
-    handlePreview(index) {
-      this.$emit('action-event', 'preview', index)
-    },
-    // 默认上传模块
-    httpRequest(options) {
-      return uploadFile(options.file, {})
-    },
-    handleSuccess(response, file, fileList) {
-      this.fileList = fileList
-      this.emitCallback(fileList, file)
-    },
-    emitCallback(list, file) {
-      let data = this.multiple ? [] : {}
-      if (this.multiple) {
-        data = this.getFileDataList(list)
-      } else {
-        data = file.response.data
-      }
-      this.$emit('action-event', 'confirm', data)
-    },
-    getFileDataList(fileList) {
-      if (this.$utils.isEmpty(fileList)) {
-        return []
-      }
-      return fileList.map((file) => {
-        return file.response.data
-      })
-    },
-    handleError() {
-      // TODO:
-    },
-    beforeUpload(file) {
-      if (this.limit && this.limit === 0) {
-        this.$message({
-          message: '上传文件个数不能为0，请重新设置',
-          type: 'warning'
-        })
-        return false
-      }
-      if (this.fileSize && file.size > this.fileSize) {
-        this.$message.closeAll()
-        this.$message({
-          message: `上传文件的尺寸大于${this.$utils.formatSize(this.fileSize, 2, ['B', 'K', 'M', 'G', 'TB'])}`,
-          type: 'warning'
-        })
-        return false
-      }
-      if (this.accept && !this.fileExtType(file)) {
-        this.$message.closeAll()
-        this.$message({
-          message: '不允许的文件类型',
-          type: 'warning'
-        })
-        return false
-      }
-    },
-    /**
-     * 文件类型的检测
-     */
-    fileExtType(file) {
-      const accept = this.accept
-      const acceptTypes = this.acceptTypes
-      const fileTypes = this.fileTypes
-      const arr = file.name.split('.')
-      const result = arr[arr.length - 1]
-      let type = ''
-      this.targetExt = false
-      for (const i in acceptTypes) {
-        if (acceptTypes[i] === accept) {
-          type = i
+        uploadable () {
+            if (this.readonly) return false
+            if (!this.multiple && this.items.length >= 1) return false
+            if (this.multiple && (this.limit && this.items.length >= this.limit)) return false
+            return true
+        },
+        editable () {
+            return !(this.readonly || this.disabled)
+        },
+        toolsWidth () {
+            const length = this.editable ? 3 : 1
+            return (30 * length) + 'px'
         }
-      }
-      if (type !== '' && this.accept !== '*') {
-        // 现存的附件类型
-        const targetFileTypes = fileTypes[type]
-        this.targetExt = targetFileTypes.includes(result)
-      } else {
-        if (this.accept === '*') {
-        // 不限制
-          this.targetExt = true
-        } else {
-        // 自定义
-          const targetFileTypes = this.accept.split(',')
-          this.targetExt = targetFileTypes.includes('.' + result)
-        }
-      }
-      return this.targetExt
     },
-
-    handleReselectSuccess(response, file, fileList) {
-      this.fileList = fileList
-      const targetFile = file.response.data
-      var data = this.value
-      if (this.multiple) {
-        data.splice(this.defaultSelectIndex, 1, targetFile)
-      } else {
-        data = targetFile
-      }
-      this.$emit('action-event', 'confirm', data)
+    methods: {
+        init () {
+            this.fileList = []
+        },
+        handleUpload () {
+            if (!this.editable) return
+            this.$emit('action-event', 'select')
+        },
+        // 在线编辑报表
+        handleEdit (index) {
+            this.$emit('action-event', 'edit', index, this.value[index] || this.value, this.operation_status)
+        },
+        handleReselect (index) {
+            if (!this.editable) return
+            if (this.uploadType === 'attachment') {
+                this.$emit('action-event', 'reselect', index)
+            } else {
+                this.$refs.defaultReselectUpload.$refs['upload-inner'].handleClick()
+                this.defaultSelectIndex = index
+            }
+        },
+        handleRemove (index) {
+            if (!this.editable) return
+            this.$emit('action-event', 'remove', index)
+        },
+        handleDownload (index) {
+            this.$emit('action-event', 'download', index)
+        },
+        handlePreview (index) {
+            this.$emit('action-event', 'preview', index)
+        },
+        // 默认上传模块
+        httpRequest (options) {
+            return uploadFile(options.file, {})
+        },
+        handleSuccess (response, file, fileList) {
+            this.fileList = fileList
+            this.emitCallback(fileList, file)
+        },
+        emitCallback (list, file) {
+            let data = this.multiple ? [] : {}
+            if (this.multiple) {
+                data = this.getFileDataList(list)
+            } else {
+                data = file.response.data
+            }
+            this.$emit('action-event', 'confirm', data)
+        },
+        getFileDataList (fileList) {
+            if (this.$utils.isEmpty(fileList)) {
+                return []
+            }
+            return fileList.map((file) => {
+                return file.response.data
+            })
+        },
+        handleError () {
+            // TODO:
+        },
+        beforeUpload (file) {
+            if (this.limit && this.limit === 0) {
+                this.$message({
+                    message: '上传文件个数不能为0，请重新设置',
+                    type: 'warning'
+                })
+                return false
+            }
+            if (this.fileSize && file.size > this.fileSize) {
+                this.$message.closeAll()
+                this.$message({
+                    message: `上传文件的尺寸大于${this.$utils.formatSize(this.fileSize, 2, ['B', 'K', 'M', 'G', 'TB'])}`,
+                    type: 'warning'
+                })
+                return false
+            }
+            if (this.accept && !this.fileExtType(file)) {
+                this.$message.closeAll()
+                this.$message({
+                    message: '不允许的文件类型',
+                    type: 'warning'
+                })
+                return false
+            }
+        },
+        /**
+         * 文件类型的检测
+         */
+        fileExtType (file) {
+            const accept = this.accept
+            const acceptTypes = this.acceptTypes
+            const fileTypes = this.fileTypes
+            const arr = file.name.split('.')
+            const result = arr[arr.length - 1]
+            let type = ''
+            this.targetExt = false
+            for (const i in acceptTypes) {
+                if (acceptTypes[i] === accept) {
+                    type = i
+                }
+            }
+            if (type !== '' && this.accept !== '*') {
+                // 现存的附件类型
+                const targetFileTypes = fileTypes[type]
+                this.targetExt = targetFileTypes.includes(result)
+            } else {
+                if (this.accept === '*') {
+                    // 不限制
+                    this.targetExt = true
+                } else {
+                    // 自定义
+                    const targetFileTypes = this.accept.split(',')
+                    this.targetExt = targetFileTypes.includes('.' + result)
+                }
+            }
+            return this.targetExt
+        },
+        handleReselectSuccess (response, file, fileList) {
+            this.fileList = fileList
+            const targetFile = file.response.data
+            var data = this.value
+            if (this.multiple) {
+                data.splice(this.defaultSelectIndex, 1, targetFile)
+            } else {
+                data = targetFile
+            }
+            this.$emit('action-event', 'confirm', data)
+        },
+        updateSort ({ to, from, item, clone, oldIndex, newlndex }) {
+            // console.log(to, from, item, clone, oldIndex, newlndex)
+            console.log(this.value)
+            console.log(this.sortList)
+        }
     }
-  }
 }
 </script>

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

@@ -57,7 +57,7 @@
     import { TRANSFER_DATA } from '@/constant'
     import fView from './editFile/fView.vue'
     import { SYSTEM_URL, BASE_API } from '@/api/baseUrl'
-
+    const specialField = ['报告文件', '报告文档', '已盖章报告']
     export default {
         components: {
             IbpsFileAttachmentSelector,
@@ -195,6 +195,14 @@
                     lineHeight: `${height}px`,
                     display: 'inline'
                 }
+            },
+            pdfPreviewType() {
+                // const t = specialField.some(i => this.elFormItem.label && this.elFormItem.label.includes(i))
+                // if (this.elFormItem.label && t) {
+                //     return 'PDFH5'
+                // }
+                // return 'ONLYOFFICE'
+                return 'PDFH5'
             }
         },
         watch: {
@@ -522,6 +530,7 @@
                 this.optionFileView.fileType = this.attachment.ext // 类型
                 this.optionFileView.data = this.attachment // 记录编制的位置，需要替换。
                 this.optionFileView.data.index = index
+                this.optionFileView.previewType = this.pdfPreviewType
                 this.filePreviewVisible = true
             },
             /**

src/business/platform/file/constants/fileTypes.js

@@ -6,7 +6,8 @@ const FILE_TYPES = {
   'videos': ['mkv', 'mp4', 'avi', 'swf', 'wmv', 'rmvb', 'mov', 'mpg'],
   'audios': ['mp3', 'flac', 'ape', 'wma', 'wav', 'aac', 'm4a', 'au', 'ram', 'mmf', 'aif'],
   'docs': ['doc', 'docx', 'pdf', 'rtf', 'txt', 'csv', 'xls', 'xlsx', 'ppt', 'pptx', 'htm', 'html', 'wps', 'hip'],
-  'compress': ['rar', 'zip', '7z', 'gz', 'arj', 'z']
+  'compress': ['rar', 'zip', '7z', 'gz', 'arj', 'z'],
+  'seal': ['pdf', 'docx']
 }
 /**
  * 参考http://www.w3school.com.cn/media/media_mimeref.asp
@@ -19,7 +20,8 @@ const ACCEPT = {
   'videos': '.mkv,.mp4,.avi,.swf,.wmv,.rmvb,.mov,.mpg',
   'audios': '.mp3,.flac,.ape,.wma,.wav,.aac,.m4a,.au,.ram,.mmf,.aif',
   'docs': '.doc,.docx,.pdf,.rtf,.txt,.csv,.xls,.xlsx,.ppt,.pptx,.htm,.html,.wps,.hip',
-  'compress': '.rar,.zip,.7z,.gz,.arj,.z'
+  'compress': '.rar,.zip,.7z,.gz,.arj,.z',
+  'seal': '.pdf,.docx'
 }
 const IMAGE_ACCEPT = {
   'bmp': 'image/bmp',

src/business/platform/file/image/index.vue

@@ -1,93 +1,94 @@
 <template>
-  <div class="ibps-image">
-    <!--展示-->
-    <ul class="ibps-p-0">
-      <li
-        v-for="(item, index) in fileList"
-        :key="index"
-        class="image-reader-item"
-        :style="{
-          'backgroundImage': 'url(' + getImageUrl(item.id) + ')' ,
-          'backgroundPosition': 'center center',
-          'backgroundRepeat': 'no-repeat',
-          'backgroundSize': 'cover',
-          'width':`${$utils.isEmpty(width)?100:width}px`,
-          'height':`${$utils.isEmpty(height)?100:height}px`
-        }"
-        @click="clickHandler(item, index)"
-        @mouseover="showTips(item, index)"
-        @mouseout="hideTips(item, index)"
-      >
-        <el-tag
-          v-if="!disabled"
-          class="image-reader-item-tag"
-          @click.stop="onDeleteImage(index)"
-        >
-          <i class="el-icon-delete" />
-        </el-tag>
-        <el-tag
-          v-if="!disabled"
-          class="image-reader-item-tag"
-          @click.stop="onDownloadImage(index)"
-        >
-          <i class="el-icon-download" />
-        </el-tag>
-        <div
-          :class="{'image-tip-visible':item.uid !== uid,'image-tip':item.uid === uid}"
-          v-text="tip"
+    <div class="ibps-image">
+        <!--展示-->
+        <ul class="ibps-p-0">
+            <vue-draggable
+                v-if="fileList && fileList.length"
+                v-model="fileList"
+                v-bind="draggableOptions"
+                class="list-group"
+                @start="isDragging = true"
+                @end="()=>{isDragging= false}"
+            >
+                <li
+                    v-for="(item, index) in fileList"
+                    :key="index"
+                    class="image-reader-item"
+                    :style="{
+                        'backgroundImage': 'url(' + getImageUrl(item.id) + ')',
+                        'backgroundPosition': 'center center',
+                        'backgroundRepeat': 'no-repeat',
+                        'backgroundSize': 'cover',
+                        'width': `${$utils.isEmpty(width) ? 100 : width}px`,
+                        'height': `${$utils.isEmpty(height) ? 100 : height}px`
+                    }"
+                    @click="clickHandler(item, index)"
+                    @mouseover="showTips(item, index)"
+                    @mouseout="hideTips(item, index)"
+                >
+                    <el-tag v-if="!disabled" class="image-reader-item-tag" @click.stop="onDeleteImage(index)">
+                        <i class="el-icon-delete" />
+                    </el-tag>
+                    <el-tag v-if="!disabled" class="image-reader-item-tag" @click.stop="onDownloadImage(index)">
+                        <i class="el-icon-download" />
+                    </el-tag>
+                    <el-tag v-if="!disabled" class="image-reader-item-tag draggable" @click.stop="onDownloadImage(index)">
+                        <i class="el-icon-rank" />
+                    </el-tag>
+                    <div :class="{ 'image-tip-visible': item.uid !== uid, 'image-tip': item.uid === uid }" v-text="tip" />
+                </li>
+            </vue-draggable>
+        </ul>
+        <template v-if="!disabled && (isBuilder || fileList.length < limit || !limit)">
+            <!--ibps 附件上传方式-->
+            <el-upload
+                v-if="uploadType === 'attachment'"
+                :style="uploadStyle"
+                :action="action"
+                :disabled="true"
+                :file-list="fileList"
+                list-type="picture-card"
+                @click.native="clickAttachmentUpload"
+            >
+                <i class="el-icon-plus" />
+            </el-upload>
+            <!--默认附件上传方式-->
+            <el-upload
+                v-else
+                :style="uploadStyle"
+                action="action"
+                list-type="picture-card"
+                :http-request="httpRequest"
+                :file-list="fileList"
+                :multiple="multiple"
+                :accept="fileAccept"
+                :limit="flieLimit"
+                :disabled="disabled"
+                :on-exceed="handlePicAmount"
+                :before-upload="beforeUpload"
+            >
+                <i class="el-icon-plus" />
+            </el-upload>
+        </template>
+        <!--图片预览-->
+        <ibps-image-viewer
+            v-if="showViewer"
+            :z-index="zIndex"
+            :initial-index="initialIndex"
+            :on-close="closeViewer"
+            :url-list="previewSrcList"
         />
-      </li>
-    </ul>
-    <template v-if="!disabled&&(isBuilder||fileList.length<limit||!limit)">
-      <!--ibps 附件上传方式-->
-      <el-upload
-        v-if="uploadType === 'attachment'"
-        :style="uploadStyle"
-        :action="action"
-        :disabled="true"
-        :file-list="fileList"
-        list-type="picture-card"
-        @click.native="clickAttachmentUpload"
-      >
-        <i class="el-icon-plus" />
-      </el-upload>
-      <!--默认附件上传方式-->
-      <el-upload
-        v-else
-        :style="uploadStyle"
-        action="action"
-        list-type="picture-card"
-        :http-request="httpRequest"
-        :file-list="fileList"
-        :multiple="multiple"
-        :accept="fileAccept"
-        :limit="flieLimit"
-        :disabled="disabled"
-        :on-exceed="handlePicAmount"
-        :before-upload="beforeUpload"
-      >
-        <i class="el-icon-plus" />
-      </el-upload>
-    </template>
-    <!--图片预览-->
-    <ibps-image-viewer
-      v-if="showViewer"
-      :z-index="zIndex"
-      :initial-index="initialIndex"
-      :on-close="closeViewer"
-      :url-list="previewSrcList"
-    />
 
-    <ibps-uploader-selector-dialog
-      :visible="uploaderSelectorVisible"
-      :value="selectorValue"
-      :multiple="multiple"
-      :accept="accept"
-      :file-size="size"
-      @close="visible => uploaderSelectorVisible = visible"
-      @action-event="handleUpload"
-    />
-  </div>
+        <ibps-uploader-selector-dialog
+            :visible="uploaderSelectorVisible"
+            :value="selectorValue"
+            :multiple="multiple"
+            :accept="accept"
+            :file-size="size"
+            @close="visible => uploaderSelectorVisible = visible"
+            @action-event="handleUpload"
+        />
+    </div>
 </template>
 
 <script>
@@ -101,457 +102,474 @@ import PopupManager from '@/utils/popup'
 import IbpsUploaderSelectorDialog from '@/business/platform/file/uploader'
 import IbpsImageViewer from '@/components/ibps-file-viewer/image'
 import { TRANSFER_DATA } from '@/constant'
+import VueDraggable from 'vuedraggable'
 
 export default {
-  name: 'ibps-image',
-  components: {
-    IbpsUploaderSelectorDialog,
-    IbpsImageViewer
-  },
-  mixins: [emitter],
-  props: {
-    value: {
-      type: [String, Number, Array, Object]
-    },
-    size: [Number, String], // 限制大小
-    accept: String, // 限制图片类型
-    tip: String, // 提示消息
-    limit: [Number, String], // 上传数量
-    // quality: Number, // 压缩质量
-    width: { // 宽
-      type: String,
-      default: '150'
-    },
-    height: { // 高
-      type: String,
-      default: '150'
-    },
-    disabled: { // 是否禁用
-      type: Boolean,
-      default: false
-    },
-    isBuilder: { // 是否表单设计
-      type: Boolean,
-      default: false
-    },
-    multiple: { // 是否支持选择多张
-      type: Boolean,
-      default: true
-    },
-    uploadType: { // 上传方式 （ default:直接打开上传，attachment：ibps上传附件打开上传 ）
-      type: String,
-      default: 'attachment'
-    },
-    store: {
-      type: String,
-      default: 'json',
-      validator: function(value) {
-        return ['id', 'json', 'array', 'arrayId', 'bind'].indexOf(value) !== -1
-      }
-    },
-    labelKey: { // 展示的值
-      type: String,
-      default: 'fileName'
-    },
-    valueKey: { // 存储唯一值
-      type: String,
-      default: 'id'
-    }
-  },
-  inject: {
-    elForm: {
-      default: ''
-    },
-    elFormItem: {
-      default: ''
-    }
-  },
-  data() {
-    return {
-      action: 'https://www.bpmhome.cn/post',
-      fileList: [],
-      realFileList: [],
-      selectorValue: this.multiple ? [] : {},
-      cacheData: {}, // 缓存数据
-      initialIndex: 0,
-      showViewer: false,
-      zIndex: 2000,
-      uploaderSelectorVisible: false,
-      isActive: false,
-      uid: ''
-    }
-  },
-  computed: {
-    flieLimit() {
-      return this.$utils.isNotEmpty(this.limit) ? parseInt(this.limit) : null
-    },
-    fileAccept() {
-      if (this.$utils.isEmpty(this.accept) || this.accept === '*') {
-        return 'image/*'
-      }
-      return this.converImageAccept(this.accept)
-    },
-    previewSrcList() {
-      const list = []
-      this.fileList.forEach(file => {
-        list.push(previewFile(file.id))
-      })
-      return list
-    },
-    uploadStyle() {
-      const { width, height } = this
-      return {
-        'width': `${this.$utils.isEmpty(width) ? 100 : width}px`,
-        'height': `${this.$utils.isEmpty(height) ? 100 : height}px`,
-        'lineHeight': `${this.$utils.isEmpty(height) ? 100 : height}px`,
-        'display': 'inline'
-      }
-    }
-  },
-  watch: {
-    value(val, oldVal) {
-      this.setValue()
-      if (!valueEquals(val, oldVal)) {
-        this.dispatch('ElFormItem', 'el.form.change', val)
-      }
-    },
-    fileList: {
-      handler(val, oldVal) {
-        this.$emit('input', this.getValue())
-      },
-      deep: true
-    }
-  },
-  mounted() {
-    this.setValue()
-  },
-  methods: {
-    /**
-     * zxh 修复zindex 不是最高的被遮住
-     */
-    fixZIndex() {
-      return PopupManager.getZIndex()
-    },
-    converImageAccept(accept) {
-      const accepts = accept.split(',')
-      const fileAccept = []
-      accepts.forEach((item) => {
-        let type = item
-        if (item.substr(0, 1) === '.') {
-          type = item.substr(1)
+    name: 'ibps-image',
+    components: {
+        IbpsUploaderSelectorDialog,
+        IbpsImageViewer,
+        VueDraggable
+    },
+    mixins: [emitter],
+    props: {
+        value: {
+            type: [String, Number, Array, Object]
+        },
+        size: [Number, String], // 限制大小
+        accept: String, // 限制图片类型
+        tip: String, // 提示消息
+        limit: [Number, String], // 上传数量
+        // quality: Number, // 压缩质量
+        width: { // 宽
+            type: String,
+            default: '150'
+        },
+        height: { // 高
+            type: String,
+            default: '150'
+        },
+        disabled: { // 是否禁用
+            type: Boolean,
+            default: false
+        },
+        isBuilder: { // 是否表单设计
+            type: Boolean,
+            default: false
+        },
+        multiple: { // 是否支持选择多张
+            type: Boolean,
+            default: true
+        },
+        uploadType: { // 上传方式 （ default:直接打开上传，attachment：ibps上传附件打开上传 ）
+            type: String,
+            default: 'attachment'
+        },
+        store: {
+            type: String,
+            default: 'json',
+            validator: function (value) {
+                return ['id', 'json', 'array', 'arrayId', 'bind'].indexOf(value) !== -1
+            }
+        },
+        labelKey: { // 展示的值
+            type: String,
+            default: 'fileName'
+        },
+        valueKey: { // 存储唯一值
+            type: String,
+            default: 'id'
         }
-        fileAccept.push('.' + type)
-      })
-      return fileAccept.join(',')
     },
-    converFileAccept(accept) {
-      const accepts = accept.split(',')
-      const fileAccept = []
-      accepts.forEach((item) => {
-        let type = item
-        if (item.substr(0, 1) === '.') {
-          type = item.substr(1)
+    inject: {
+        elForm: {
+            default: ''
+        },
+        elFormItem: {
+            default: ''
         }
-        fileAccept.push(imageAccept[type])
-      })
-      return fileAccept
     },
-    setValue() {
-      if (this.$utils.isEmpty(this.value)) {
-        this.fileList = []
-        return
-      }
-      // TODO: id展示问题
-      this.fileList = this.getArrayValue(this.value)
-      this.initRealFileList()
-    },
-    initRealFileList() {
-      this.realFileList = []
-      this.fileList.forEach(v => {
-        const id = v[this.valueKey]
-        if (this.cacheData[id]) {
-          this.setRealFileList(id)
-        } else {
-          this.getDataInfo(id)
+    data () {
+        return {
+            action: 'https://www.bpmhome.cn/post',
+            fileList: [],
+            realFileList: [],
+            selectorValue: this.multiple ? [] : {},
+            cacheData: {}, // 缓存数据
+            initialIndex: 0,
+            showViewer: false,
+            zIndex: 2000,
+            uploaderSelectorVisible: false,
+            isActive: false,
+            uid: '',
+            isDragging: false,
+            draggableOptions: {
+                handle: '.draggable',
+                ghostClass: 'sortable-ghost',
+                distance: 1,
+                disabled: false,
+                animation: 200,
+                axis: 'y'
+            }
         }
-      })
-    },
-    setCacheData(v) {
-      this.cacheData[v[this.valueKey]] = v
-    },
-    setRealFileList(v) {
-      this.realFileList.push(this.cacheData[v])
-    },
-    /**
-    * 通过ID获取数据
-     */
-    getDataInfo(id) {
-      if (TRANSFER_DATA === 'transfer') {
-        this.getTransferData(id)
-      } else {
-        this.getRemoteData(id)
-      }
-    },
-    getTransferData(id) {
-      remoteTransRequest('attachment', id).then(idset => {
-        const ids = Array.from(idset)
-        remoteRequest('attachmentIds', ids, () => {
-          return this.getRemoteTransFunc(ids)
-        }).then(response => {
-          const responseData = response.data
-          const data = responseData[id]
-          this.setRemoteData(data)
-        }).catch(() => {
-        })
-      })
-    },
-    getRemoteTransFunc(ids) {
-      return new Promise((resolve, reject) => {
-        transfer({
-          'ids': ids
-        }).then(response => {
-          resolve(response)
-        }).catch((error) => {
-          reject(error)
-        })
-      })
     },
-
-    getRemoteData(id) {
-      remoteRequest('attachment' + this.valueKey, id, () => {
-        return this.getRemoteByIdFunc(id)
-      }).then(response => {
-        const data = response.data
-        this.setRemoteData(data)
-      }).catch(() => {
-      })
-    },
-    getRemoteByIdFunc(id) {
-      return new Promise((resolve, reject) => {
-        get({
-          attachmentId: id
-        }).then(response => {
-          resolve(response)
-        }).catch(() => {
-        })
-      })
-    },
-    setRemoteData(data) {
-      if (this.$utils.isNotEmpty(data)) {
-        this.cacheData[data[this.valueKey]] = data
-        this.setSelectorValue(data[this.valueKey])
-      }
-    },
-    /**
-     * 获得数组数据
-     */
-    getArrayValue(value) {
-      if (this.$utils.isEmpty(value)) {
-        return []
-      }
-      if (this.store === 'json') { // json
-        try {
-          return this.$utils.parseData(value)
-        } catch (error) {
-          console.error(error)
-          return []
+    computed: {
+        flieLimit () {
+            return this.$utils.isNotEmpty(this.limit) ? parseInt(this.limit) : null
+        },
+        fileAccept () {
+            if (this.$utils.isEmpty(this.accept) || this.accept === '*') {
+                return 'image/*'
+            }
+            return this.converImageAccept(this.accept)
+        },
+        previewSrcList () {
+            const list = []
+            this.fileList.forEach(file => {
+                list.push(previewFile(file.id))
+            })
+            return list
+        },
+        uploadStyle () {
+            const { width, height } = this
+            return {
+                'width': `${this.$utils.isEmpty(width) ? 100 : width}px`,
+                'height': `${this.$utils.isEmpty(height) ? 100 : height}px`,
+                'lineHeight': `${this.$utils.isEmpty(height) ? 100 : height}px`,
+                'display': 'inline'
+            }
         }
-      } else if (this.store === 'id') { // id
-        return this.$utils.isString(value) ? value.split(this.storeSeparator) : []
-      } else { // array
-        return value.map((d) => {
-          return d[this.valueKey]
-        })
-      }
     },
-    getStoreValue(value) {
-      const res = []
-      if (this.store === 'json') { // json
-        if (this.$utils.isEmpty(value)) {
-          return ''
+    watch: {
+        value (val, oldVal) {
+            this.setValue()
+            if (!valueEquals(val, oldVal)) {
+                this.dispatch('ElFormItem', 'el.form.change', val)
+            }
+        },
+        fileList: {
+            handler (val, oldVal) {
+                console.log(val)
+                this.$emit('input', this.getValue())
+            },
+            deep: true
         }
-        value.forEach(v => {
-          const o = {}
-          o[this.valueKey] = v[this.valueKey]
-          o[this.labelKey] = v[this.labelKey]
-          res.push(o)
-        })
-        return JSON.stringify(res)
-      } else if (this.store === 'id') { // id
-        if (this.$utils.isEmpty(value)) {
-          return ''
-        }
-        value.forEach(v => {
-          res.push(v[this.valueKey])
-        })
-        return res.join(this.storeSeparator)
-      } else { // 数组 array
-        return value || []
-      }
-    },
-    getValue() {
-      return this.getStoreValue(this.fileList)
-    },
-    showTips(item, index) {
-      this.uid = item.uid
-      // item.isActive = true
-    },
-    hideTips(item, index) {
-      this.uid = ''
-    },
-    /**
-     * 文件上传
-     */
-    httpRequest(options) {
-      return uploadFile(options.file, {}).then((response) => {
-        const data = response.data
-        this.setCacheData(data)
-        this.fileList.push(data)
-      })
-    },
-    /**
-     * 上传方式为ibps附件上传时
-     */
-    clickAttachmentUpload() {
-      this.uploaderSelectorVisible = true
-    },
-    handleSuccess(response, file, fileList) {
-      if (!this.disabled) {
-        this.fileList = fileList.map(item => {
-          item.isActive = false
-          return item
-        })
-      }
-    },
-    // handleChange(file, fileList) {
-    //   this.fileList = fileList
-    // },
-    // handleRemove(file, fileList) {
-    //   this.fileList = fileList
-    // },
-    // 预览
-    clickHandler(file, index) {
-      this.zIndex = this.fixZIndex()
-      this.initialIndex = index
-      this.showViewer = true
-    },
-    closeViewer() {
-      this.showViewer = false
-    },
-    /**
-     *  删除图片
-     */
-    onDeleteImage(index) {
-      // if (this.uploadType === 'default') {
-      // TODD:删除同时删除数据库的
-      // } else {
-      this.fileList.splice(index, 1)
-      // }
     },
-    // 下载
-    onDownloadImage(index) {
-      this.setRealFileList(this.fileList[index][this.valueKey])
-      this.$nextTick(() => {
-        downloadFile(this.realFileList[index])
-      })
-    },
-    // 图片上传数量限制
-    handlePicAmount(files, fileList) {
-      if (this.multiple && this.limit) {
-        this.$message.closeAll()
-        this.$message({
-          message: `图片上传上限${this.limit}张`,
-          type: 'warning'
-        })
-      }
-    },
-    // 格式、大小限制
-    beforeUpload(file) {
-      let isType = true
-      if (this.$utils.isNotEmpty(this.accept) && this.accept !== '*') {
-        const acceptType = this.converFileAccept(this.accept)
-        isType = this.accept ? acceptType.includes(file.type) : true
-        if (!isType) {
-          this.$message.closeAll()
-          this.$message.error(`上传图片的格式必须为【${this.accept}】`)
-          return false
-        }
-      }
+    mounted () {
+        this.setValue()
+    },
+    methods: {
+        /**
+         * zxh 修复zindex 不是最高的被遮住
+         */
+        fixZIndex () {
+            return PopupManager.getZIndex()
+        },
+        converImageAccept (accept) {
+            const accepts = accept.split(',')
+            const fileAccept = []
+            accepts.forEach((item) => {
+                let type = item
+                if (item.substr(0, 1) === '.') {
+                    type = item.substr(1)
+                }
+                fileAccept.push('.' + type)
+            })
+            return fileAccept.join(',')
+        },
+        converFileAccept (accept) {
+            const accepts = accept.split(',')
+            const fileAccept = []
+            accepts.forEach((item) => {
+                let type = item
+                if (item.substr(0, 1) === '.') {
+                    type = item.substr(1)
+                }
+                fileAccept.push(imageAccept[type])
+            })
+            return fileAccept
+        },
+        setValue () {
+            if (this.$utils.isEmpty(this.value)) {
+                this.fileList = []
+                return
+            }
+            // TODO: id展示问题
+            this.fileList = this.getArrayValue(this.value)
+            this.initRealFileList()
+        },
+        initRealFileList () {
+            this.realFileList = []
+            this.fileList.forEach(v => {
+                const id = v[this.valueKey]
+                if (this.cacheData[id]) {
+                    this.setRealFileList(id)
+                } else {
+                    this.getDataInfo(id)
+                }
+            })
+        },
+        setCacheData (v) {
+            this.cacheData[v[this.valueKey]] = v
+        },
+        setRealFileList (v) {
+            this.realFileList.push(this.cacheData[v])
+        },
+        /**
+        * 通过ID获取数据
+        */
+        getDataInfo (id) {
+            if (TRANSFER_DATA === 'transfer') {
+                this.getTransferData(id)
+            } else {
+                this.getRemoteData(id)
+            }
+        },
+        getTransferData (id) {
+            remoteTransRequest('attachment', id).then(idset => {
+                const ids = Array.from(idset)
+                remoteRequest('attachmentIds', ids, () => {
+                    return this.getRemoteTransFunc(ids)
+                }).then(response => {
+                    const responseData = response.data
+                    const data = responseData[id]
+                    this.setRemoteData(data)
+                }).catch(() => {
+                })
+            })
+        },
+        getRemoteTransFunc (ids) {
+            return new Promise((resolve, reject) => {
+                transfer({
+                    'ids': ids
+                }).then(response => {
+                    resolve(response)
+                }).catch((error) => {
+                    reject(error)
+                })
+            })
+        },
 
-      const isLimitSize = this.size ? (file.size / 1024 / 1024 < this.size) : true
-      if (!isLimitSize) {
-        this.$message.closeAll()
-        this.$message.error(`上传图片的大小不能超过 ${this.size}M!`)
-        return false
-      }
-      return isLimitSize && isType
-    },
-    handleUpload(buttonKey, data) {
-      const limit = parseInt(this.limit)
-      if (this.$utils.isNotEmpty(this.limit) && data.length > limit) {
-        this.$message.closeAll()
-        this.$message.error(`图片上传上限${this.limit}张`)
-        return
-      }
-      if (this.$utils.isNotEmpty(this.fileList) && (this.fileList.length >= limit || this.fileList.length + data.length > limit)) {
-        this.$message.closeAll()
-        this.$message.error(`图片数量上限为${this.limit}张`)
-        return
-      }
-      data.forEach(d => {
-        this.setCacheData(d)
-        this.fileList.push(d)
-      })
-      this.uploaderSelectorVisible = false
-    },
-    getImageUrl(id) {
-      return previewFile(id)
+        getRemoteData (id) {
+            remoteRequest('attachment' + this.valueKey, id, () => {
+                return this.getRemoteByIdFunc(id)
+            }).then(response => {
+                const data = response.data
+                this.setRemoteData(data)
+            }).catch(() => {
+            })
+        },
+        getRemoteByIdFunc (id) {
+            return new Promise((resolve, reject) => {
+                get({
+                    attachmentId: id
+                }).then(response => {
+                    resolve(response)
+                }).catch(() => {
+                })
+            })
+        },
+        setRemoteData (data) {
+            if (this.$utils.isNotEmpty(data)) {
+                this.cacheData[data[this.valueKey]] = data
+                this.setSelectorValue(data[this.valueKey])
+            }
+        },
+        /**
+         * 获得数组数据
+         */
+        getArrayValue (value) {
+            if (this.$utils.isEmpty(value)) {
+                return []
+            }
+            if (this.store === 'json') { // json
+                try {
+                    return this.$utils.parseData(value)
+                } catch (error) {
+                    console.error(error)
+                    return []
+                }
+            } else if (this.store === 'id') { // id
+                return this.$utils.isString(value) ? value.split(this.storeSeparator) : []
+            } else { // array
+                return value.map((d) => {
+                    return d[this.valueKey]
+                })
+            }
+        },
+        getStoreValue (value) {
+            const res = []
+            if (this.store === 'json') { // json
+                if (this.$utils.isEmpty(value)) {
+                    return ''
+                }
+                value.forEach(v => {
+                    const o = {}
+                    o[this.valueKey] = v[this.valueKey]
+                    o[this.labelKey] = v[this.labelKey]
+                    res.push(o)
+                })
+                return JSON.stringify(res)
+            } else if (this.store === 'id') { // id
+                if (this.$utils.isEmpty(value)) {
+                    return ''
+                }
+                value.forEach(v => {
+                    res.push(v[this.valueKey])
+                })
+                return res.join(this.storeSeparator)
+            } else { // 数组 array
+                return value || []
+            }
+        },
+        getValue () {
+            return this.getStoreValue(this.fileList)
+        },
+        showTips (item, index) {
+            this.uid = item.uid
+            // item.isActive = true
+        },
+        hideTips (item, index) {
+            this.uid = ''
+        },
+        /**
+         * 文件上传
+         */
+        httpRequest (options) {
+            return uploadFile(options.file, {}).then((response) => {
+                const data = response.data
+                this.setCacheData(data)
+                this.fileList.push(data)
+            })
+        },
+        /**
+         * 上传方式为ibps附件上传时
+         */
+        clickAttachmentUpload () {
+            this.uploaderSelectorVisible = true
+        },
+        handleSuccess (response, file, fileList) {
+            if (!this.disabled) {
+                this.fileList = fileList.map(item => {
+                    item.isActive = false
+                    return item
+                })
+            }
+        },
+        // handleChange(file, fileList) {
+        //   this.fileList = fileList
+        // },
+        // handleRemove(file, fileList) {
+        //   this.fileList = fileList
+        // },
+        // 预览
+        clickHandler (file, index) {
+            this.zIndex = this.fixZIndex()
+            this.initialIndex = index
+            this.showViewer = true
+        },
+        closeViewer () {
+            this.showViewer = false
+        },
+        /**
+         *  删除图片
+         */
+        onDeleteImage (index) {
+            // if (this.uploadType === 'default') {
+            // TODD:删除同时删除数据库的
+            // } else {
+            this.fileList.splice(index, 1)
+            // }
+        },
+        // 下载
+        onDownloadImage (index) {
+            this.setRealFileList(this.fileList[index][this.valueKey])
+            this.$nextTick(() => {
+                downloadFile(this.realFileList[index])
+            })
+        },
+        // 图片上传数量限制
+        handlePicAmount (files, fileList) {
+            if (this.multiple && this.limit) {
+                this.$message.closeAll()
+                this.$message({
+                    message: `图片上传上限${this.limit}张`,
+                    type: 'warning'
+                })
+            }
+        },
+        // 格式、大小限制
+        beforeUpload (file) {
+            let isType = true
+            if (this.$utils.isNotEmpty(this.accept) && this.accept !== '*') {
+                const acceptType = this.converFileAccept(this.accept)
+                isType = this.accept ? acceptType.includes(file.type) : true
+                if (!isType) {
+                    this.$message.closeAll()
+                    this.$message.error(`上传图片的格式必须为【${this.accept}】`)
+                    return false
+                }
+            }
+
+            const isLimitSize = this.size ? (file.size / 1024 / 1024 < this.size) : true
+            if (!isLimitSize) {
+                this.$message.closeAll()
+                this.$message.error(`上传图片的大小不能超过 ${this.size}M!`)
+                return false
+            }
+            return isLimitSize && isType
+        },
+        handleUpload (buttonKey, data) {
+            const limit = parseInt(this.limit)
+            if (this.$utils.isNotEmpty(this.limit) && data.length > limit) {
+                this.$message.closeAll()
+                this.$message.error(`图片上传上限${this.limit}张`)
+                return
+            }
+            if (this.$utils.isNotEmpty(this.fileList) && (this.fileList.length >= limit || this.fileList.length + data.length > limit)) {
+                this.$message.closeAll()
+                this.$message.error(`图片数量上限为${this.limit}张`)
+                return
+            }
+            data.forEach(d => {
+                this.setCacheData(d)
+                this.fileList.push(d)
+            })
+            this.uploaderSelectorVisible = false
+        },
+        getImageUrl (id) {
+            return previewFile(id)
+        }
     }
-  }
 }
 </script>
 <style lang="scss">
-.ibps-image {
-  .el-upload-list--picture-card {
-    display: none;
-  }
-  .el-upload--picture-card{
-    width: inherit;
-    height: inherit;
-    line-height: inherit;
-  }
-  .image-reader-item {
-    position: relative;
-    float: left;
-    width: 23.5%;
-    margin-bottom: 2%;
-    margin-right: 2%;
-    background: #FFF;
-    box-shadow: 0 5px 20px rgba(197, 202, 213, .25);
-    box-sizing: border-box;
-    list-style: none;
-    border-radius: 4px;
-    background-size: cover;
-    overflow: hidden;
-    .image-reader-item-tag{
-      background: #111A34;
-      color: #fff;
-      float: right;
-      border-radius: 0;
-      padding: 0 10px;
-      border: 0;
-    }
-    .image-tip-visible {
-      display: none
-    }
-    .image-tip {
-      position: absolute;
-      bottom: 0;
-      color: #fff;
-      background: #111A34;
-      font-size: 12px;
-      width: 100%;
+    .ibps-image {
+        font-size: 28px;
+        .el-upload-list--picture-card {
+            display: none;
+        }
+        .el-upload--picture-card {
+            width: inherit;
+            height: inherit;
+            line-height: inherit;
+        }
+        .image-reader-item {
+            position: relative;
+            float: left;
+            width: 23.5%;
+            margin-bottom: 2%;
+            margin-right: 2%;
+            background: #FFF;
+            box-shadow: 0 5px 20px rgba(197, 202, 213, .25);
+            box-sizing: border-box;
+            list-style: none;
+            border-radius: 4px;
+            background-size: cover;
+            overflow: hidden;
+            .image-reader-item-tag {
+                background: #111A34;
+                color: #fff;
+                float: right;
+                border-radius: 0;
+                padding: 0 10px;
+                border: 0;
+                cursor: pointer;
+            }
+            .draggable {
+                cursor: move;
+            }
+            .image-tip-visible {
+                display: none
+            }
+            .image-tip {
+                position: absolute;
+                bottom: 0;
+                color: #fff;
+                background: #111A34;
+                font-size: 12px;
+                width: 100%;
+            }
+        }
     }
-  }
-}
 </style>

src/business/platform/file/uploader/index.vue

@@ -1,291 +1,275 @@
 <template>
-  <el-dialog
-    v-if="dialogVisible"
-    :visible.sync="dialogVisible"
-    :close-on-click-modal="false"
-    :close-on-press-escape="false"
-    :title="title"
-    :top="marginTop"
-    append-to-body
-    custom-class="ibps-uploader-dialog"
-    @close="closeDialog"
-  >
-    <el-tabs
-      v-model="activeName"
-      class="uploader-tab"
-      @tab-click="onTabClick"
+    <el-dialog
+        v-if="dialogVisible"
+        :visible.sync="dialogVisible"
+        :close-on-click-modal="false"
+        :close-on-press-escape="false"
+        :title="title"
+        :top="marginTop"
+        append-to-body
+        custom-class="ibps-uploader-dialog"
+        @close="closeDialog"
     >
-      <el-tab-pane label="当前上传附件" name="upload">
-        <upload
-          ref="upload"
-          :multiple="multiple"
-          :file-size="size"
-          :accept="acceptRule"
-          :height="height"
-          :init="dialogVisible"
-          :limit="limit"
-          @callback="uploadCallback"
-        />
-      </el-tab-pane>
-      <el-tab-pane label="选择历史上传附件" name="online">
-        <online
-          ref="online"
-          :multiple="multiple"
-          :file-size="size"
-          :height="height"
-          :accept="acceptRule"
-          :limit="limit"
-          :load="onlineLoad"
-          @format="onFormat"
-          @callback="onlineCallback"
-        />
-      </el-tab-pane>
-    </el-tabs>
-    <div slot="footer" class="el-dialog--center">
-      <ibps-toolbar
-        :actions="toolbars"
-        @action-event="handleActionEvent"
-      />
-    </div>
-  </el-dialog>
+        <el-tabs
+            v-model="activeName"
+            class="uploader-tab"
+            @tab-click="onTabClick"
+        >
+            <el-tab-pane label="当前上传附件" name="upload">
+                <upload
+                    ref="upload"
+                    :multiple="multiple"
+                    :file-size="size"
+                    :accept="acceptRule"
+                    :height="height"
+                    :init="dialogVisible"
+                    :limit="limit"
+                    @callback="uploadCallback"
+                />
+            </el-tab-pane>
+            <el-tab-pane label="选择历史上传附件" name="online">
+                <online
+                    ref="online"
+                    :multiple="multiple"
+                    :file-size="size"
+                    :height="height"
+                    :accept="acceptRule"
+                    :limit="limit"
+                    :load="onlineLoad"
+                    @format="onFormat"
+                    @callback="onlineCallback"
+                />
+            </el-tab-pane>
+        </el-tabs>
+        <div slot="footer" class="el-dialog--center">
+            <ibps-toolbar
+                :actions="toolbars"
+                @action-event="handleActionEvent"
+            />
+        </div>
+    </el-dialog>
 </template>
 
 <script>
-import { fileTypes, allFileTypes, accept as acceptTypes } from '@/business/platform/file/constants/fileTypes'
-import upload from './upload'
-import online from './online'
+    import { fileTypes, allFileTypes, accept as acceptTypes} from '@/business/platform/file/constants/fileTypes'
+    import upload from './upload'
+    import online from './online'
 
-export default {
-  components: {
-    upload,
-    online
-  },
-  props: {
-    value: {
-      type: [String, Number, Array, Object]
-    },
-    multiple: {
-      type: Boolean,
-      default: false
-    },
-    visible: {
-      type: Boolean,
-      default: false
-    },
-    title: {
-      type: String,
-      default: '文件上传'
-    },
-    marginTop: {
-      type: String,
-      default: '5vh'
-    },
-    height: {
-      type: String,
-      default: '400px'
-    },
-    fileSize: [Number, String],
-    limit: {
-      type: Number
-    },
-    accept: {
-      type: String,
-      default: ''
-    },
-    fileExt: {
-      type: Array,
-      default: () => []
-    }
-  },
-  data() {
-    return {
-      dialogVisible: this.visible,
-      activeName: 'upload',
-      buttonKey: 'confirm',
-      onlineLoad: false,
-      format: true,
-
-      fileTypes: fileTypes,
-      allFileTypes: allFileTypes,
-      acceptTypes: acceptTypes,
-      size: null,
-      targetExt: false,
-      acceptRule: '',
-      uploadFileList: [],
-      onlineFileList: [],
-      fileList: this.multiple ? [] : {},
-      toolbars: [
-        { key: 'confirm' ,type: 'primary', label:'文件上传'},
-        { key: 'cancel' }
-      ]
-    }
-  },
-  watch: {
-    visible: {
-      handler: function(val, oldVal) {
-        this.dialogVisible = this.visible
-        this.activeName = 'upload'
-        this.uploadFileList = []
-      },
-      immediate: true
-    },
-    accept: {
-      handler: function(val, oldVal) {
-        if (val === '*' && this.fileExt.length !== 0) {
-          const str = '.' + this.fileExt.join(',').replace(/,/g, ',.')
-          this.acceptRule = str
-        } else {
-          this.acceptRule = val
-        }
-      },
-      immediate: true
-    },
-    fileSize: {
-      handler: function(val, oldVal) {
-        if (this.$utils.isNotEmpty(val)) {
-          this.size = typeof val === 'number' ? val * 1024 * 1024 : parseFloat(val) * 1024 * 1024
-        }
-      },
-      immediate: true
-    }
-  },
-  methods: {
-    handleActionEvent({ key }) {
-      switch (key) {
-        case 'confirm':
-          this.handleConfirm()
-          break
-        case 'cancel':
-          this.closeDialog()
-          break
-        default:
-          break
-      }
-    },
-    uploadCallback(data) {
-      this.uploadFileList = data
-      if (this.multiple) {
-        this.fileList = this.$utils.isNotEmpty(this.value) ? [...this.value, ...this.uploadFileList] : this.uploadFileList
-      } else {
-        this.onlineFileList = []
-        this.fileList = this.uploadFileList
-      }
-    },
-    onlineCallback(data) {
-      this.onlineFileList = data
-      if (this.multiple) {
-        this.fileList = this.$utils.isNotEmpty(this.value) ? [...this.uploadFileList, ...data, ...this.value] : data
-      } else {
-        this.uploadFileList = []
-        this.fileList = data
-      }
-    },
-    // 关闭当前窗口
-    closeDialog() {
-      this.uploadFileList = []
-      this.onlineFileList = []
-      this.$emit('close', false)
-    },
-    onTabClick(tab) {
-      if (tab.name === 'online') {
-        this.onlineLoad = !this.onlineLoad
-      }
-    },
-    onFormat(format) {
-      this.format = format
-    },
-    /**
-     * 文件类型的限制
-     */
-    fileExtType() {
-      const accept = this.accept
-      const acceptTypes = this.acceptTypes
-      const fileTypes = this.fileTypes
-      let type = ''
-      let targetFileTypes = []
-      this.targetExt = false
-      for (const i in acceptTypes) {
-        if (acceptTypes[i] === accept) {
-          type = i
-          targetFileTypes = fileTypes[i]
-        } else {
-          if (accept === '*') {
-            // 不限制
-            targetFileTypes = '*'
-          } else {
-            // 自定义
-            targetFileTypes = accept.split(',')
-          }
-        }
-      }
-      const fileList = this.multiple ? this.fileList : [this.fileList]
-      if (targetFileTypes !== '*') {
-        this.targetExt = fileList.every(i => {
-          // console.log(targetFileTypes, `.${i.ext}`) // 控件类型集，过滤文件得后缀
-          if (type === 'compress') {
-            return targetFileTypes.includes(`${i.ext}`)
-          } else {
-            return targetFileTypes.includes(`.${i.ext}`)
-          }
-        })
-      } else {
-        this.targetExt = true
-      }
-      // console.log(fileList, this.targetExt, 'lll') // 已上传文件，过滤结果
-      return this.targetExt
-    },
-    handleConfirm() {
-      const arr = []
-      if (!this.multiple) {
-        if (this.$utils.isNotEmpty(this.uploadFileList)) {
-          arr.push(this.uploadFileList)
-          this.fileList = this.uploadFileList
-        }
-        if (this.$utils.isNotEmpty(this.onlineFileList)) {
-          arr.push(this.onlineFileList)
-          this.fileList = this.onlineFileList
-        }
-      }
-      // console.log(this.fileList, 'fileList')
-      if (this.$utils.isNotEmpty(arr) && arr.length > 1) {
-        this.$message.closeAll()
-        this.$message({
-          message: '附件上传设置为单选，选择文件数量只能为1个',
-          type: 'warning'
-        })
-        return
-      }
-      if (this.$utils.isNotEmpty(this.limit) && this.limit < this.fileList.length) {
-        this.$message.closeAll()
-        this.$message({
-          message: '超过设置最大上传数量限制' + this.limit,
-          type: 'warning'
-        })
-        return
-      }
-      if (!this.fileExtType()) {
-        this.$message.closeAll()
-        this.$message({
-          message: '选择的附件中存在不符合规定类型的文件，请重新选择！',
-          type: 'warning'
-        })
-        return
-      }
-      if (!this.format) {
-        this.$message.closeAll()
-        this.$message.error('选择文件格式不允许！')
-      } else {
-        if (this.$utils.isEmpty(this.fileList)) {
-          this.$message.closeAll()
-          this.$message({
-            message: '请上传或选择文件，或待文件上传成功后在继续操作！',
-            type: 'warning'
-          })
-          return
+    export default {
+        components: {
+            upload,
+            online
+        },
+        props: {
+            value: {
+                type: [String, Number, Array, Object]
+            },
+            multiple: {
+                type: Boolean,
+                default: false
+            },
+            visible: {
+                type: Boolean,
+                default: false
+            },
+            title: {
+                type: String,
+                default: '文件上传'
+            },
+            marginTop: {
+                type: String,
+                default: '5vh'
+            },
+            height: {
+                type: String,
+                default: '400px'
+            },
+            fileSize: [Number, String],
+            limit: {
+                type: Number
+            },
+            accept: {
+                type: String,
+                default: ''
+            },
+            fileExt: {
+                type: Array,
+                default: () => []
+            }
+        },
+        data() {
+            return {
+                dialogVisible: this.visible,
+                activeName: 'upload',
+                buttonKey: 'confirm',
+                onlineLoad: false,
+                format: true,
+                fileTypes: fileTypes,
+                allFileTypes: allFileTypes,
+                acceptTypes: acceptTypes,
+                size: null,
+                targetExt: false,
+                acceptRule: '',
+                uploadFileList: [],
+                onlineFileList: [],
+                fileList: this.multiple ? [] : {},
+                toolbars: [
+                    { key: 'confirm', type: 'primary', label: '文件上传' },
+                    { key: 'cancel' }
+                ]
+            }
+        },
+        watch: {
+            visible: {
+                handler: function (val, oldVal) {
+                    this.dialogVisible = this.visible
+                    this.activeName = 'upload'
+                    this.uploadFileList = []
+                },
+                immediate: true
+            },
+            accept: {
+                handler: function (val, oldVal) {
+                    if (val === '*' && this.fileExt.length !== 0) {
+                        const str = '.' + this.fileExt.join(',').replace(/,/g, ',.')
+                        this.acceptRule = str
+                    } else {
+                        this.acceptRule = val
+                    }
+                },
+                immediate: true
+            },
+            fileSize: {
+                handler: function (val, oldVal) {
+                    if (this.$utils.isNotEmpty(val)) {
+                        this.size = typeof val === 'number' ? val * 1024 * 1024 : parseFloat(val) * 1024 * 1024
+                    }
+                },
+                immediate: true
+            }
+        },
+        methods: {
+            handleActionEvent({ key }) {
+                switch (key) {
+                    case 'confirm':
+                        this.handleConfirm()
+                        break
+                    case 'cancel':
+                        this.closeDialog()
+                        break
+                    default:
+                        break
+                }
+            },
+            uploadCallback(data) {
+                this.uploadFileList = data
+                if (this.multiple) {
+                    this.fileList = this.$utils.isNotEmpty(this.value) ? [...this.value, ...this.uploadFileList] : this.uploadFileList
+                } else {
+                    this.onlineFileList = []
+                    this.fileList = this.uploadFileList
+                }
+            },
+            onlineCallback(data) {
+                this.onlineFileList = data
+                if (this.multiple) {
+                    this.fileList = this.$utils.isNotEmpty(this.value) ? [...this.uploadFileList, ...data, ...this.value] : data
+                } else {
+                    this.uploadFileList = []
+                    this.fileList = data
+                }
+            },
+            // 关闭当前窗口
+            closeDialog() {
+                this.uploadFileList = []
+                this.onlineFileList = []
+                this.$emit('close', false)
+            },
+            onTabClick(tab) {
+                if (tab.name === 'online') {
+                    this.onlineLoad = !this.onlineLoad
+                }
+            },
+            onFormat(format) {
+                this.format = format
+            },
+            /**
+             * 文件类型的限制
+             */
+            fileExtType() {
+                let targetFileTypes = []
+                this.targetExt = false
+                if (this.accept === '*') {
+                    // 不限制
+                    targetFileTypes = '*'
+                } else {
+                    // 自定义
+                    targetFileTypes = this.accept.split(',')
+                }
+                const fileList = this.multiple ? this.fileList : [this.fileList]
+                if (targetFileTypes !== '*') {
+                    this.targetExt = fileList.every(i => {
+                        // console.log(targetFileTypes, `.${i.ext}`)
+                        return targetFileTypes.includes(`.${i.ext}`)
+                    })
+                } else {
+                    this.targetExt = true
+                }
+                // console.log(fileList, this.targetExt)
+                return this.targetExt
+            },
+            handleConfirm() {
+                const arr = []
+                if (!this.multiple) {
+                    if (this.$utils.isNotEmpty(this.uploadFileList)) {
+                        arr.push(this.uploadFileList)
+                        this.fileList = this.uploadFileList
+                    }
+                    if (this.$utils.isNotEmpty(this.onlineFileList)) {
+                        arr.push(this.onlineFileList)
+                        this.fileList = this.onlineFileList
+                    }
+                }
+                // console.log(this.fileList, 'fileList')
+                if (this.$utils.isNotEmpty(arr) && arr.length > 1) {
+                    this.$message.closeAll()
+                    this.$message({
+                        message: '附件上传设置为单选，选择文件数量只能为1个',
+                        type: 'warning'
+                    })
+                    return
+                }
+                if (this.$utils.isNotEmpty(this.limit) && this.limit < this.fileList.length) {
+                    this.$message.closeAll()
+                    this.$message({
+                        message: '超过设置最大上传数量限制' + this.limit,
+                        type: 'warning'
+                    })
+                    return
+                }
+                if (!this.fileExtType()) {
+                    this.$message.closeAll()
+                    this.$message({
+                        message: '选择的附件中存在不符合规定类型的文件，请重新选择！',
+                        type: 'warning'
+                    })
+                    return
+                }
+                if (!this.format) {
+                    this.$message.closeAll()
+                    this.$message.error('选择文件格式不允许！')
+                } else {
+                    if (this.$utils.isEmpty(this.fileList)) {
+                        this.$message.closeAll()
+                        this.$message({
+                            message: '请上传或选择文件，或待文件上传成功后在继续操作！',
+                            type: 'warning'
+                        })
+                        return
+                    }
+                    this.$emit('action-event', this.buttonKey, this.fileList)
+                }
+            }
         }
-        this.$emit('action-event', this.buttonKey, this.fileList)
-      }
     }
-  }
-}
 </script>

src/business/platform/file/uploader/online.vue

@@ -1,319 +1,324 @@
 <template>
-  <div
-    :style="{
-      height:height
-    }"
-  >
-    <el-form :model="form" :inline="true" @keyup.enter.native="onSearch" @submit.native.prevent>
-      <el-form-item label="文件名" prop="name">
-        <el-input v-model="form.name" placeholder="文件名" @keyup.enter.native="onSearch" />
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" @click="onSearch">查询</el-button>
-      </el-form-item>
-    </el-form>
-    <el-table
-      ref="elTable"
-      :data="listData"
-      :row-key="getRowKey"
-      height="340"
-      border
-      @row-click="handleRowClick"
-      @selection-change="handleSelectionChange"
-    >
-      <!--选择列 多选-->
-      <el-table-column
-        v-if="(selectionRow || selectionRow === '') && selectionType === 'checkbox'"
-        v-bind="typeof selectionRow === 'Object'?selectionRow:null"
-        :label="handleAttribute(selectionRow.label, '')"
-        :reserve-selection="true"
-        type="selection"
-      />
-      <!--选择列 单选-->
-      <el-table-column
-        v-if="(selectionRow || selectionRow === '') && selectionType === 'radio'"
-        :label="selectionRow.label||''"
-        :width="selectionRow.width||55"
-      >
-        <template slot-scope="scope">
-          <div @click.stop>
-            <el-radio v-model="selectionRadio" :label="scope.row[pkKey]" @change="changeRowRadio(scope.row)"><span>&nbsp;</span></el-radio>
-          </div>
-        </template>
-      </el-table-column>
-      <el-table-column label="文件名" prop="fileName" />
-      <el-table-column label="扩展名" prop="ext" />
-    </el-table>
-    <el-pagination
-      :current-page="currentPage"
-      :page-size="pageSize"
-      :page-count="pagination[pageCountKey]"
-      :total="pagination[totalKey]"
-      @size-change="handlePaginationSizeChange"
-      @current-change="handlePaginationCurrentChange"
-      @prev-click="handlePaginationPrevClick"
-      @next-click="handlePaginationNextClick"
-    />
-  </div>
+    <div :style="{ height: height }">
+        <el-form :model="form" :inline="true" @keyup.enter.native="onSearch" @submit.native.prevent>
+            <el-form-item label="文件名" prop="name">
+                <el-input v-model="form.name" placeholder="请输入文件名" clearable @keyup.enter.native="onSearch" />
+            </el-form-item>
+            <el-form-item label="扩展名" prop="ext">
+                <el-input v-model="form.ext" placeholder="请输入扩展名" clearable @keyup.enter.native="onSearch" />
+            </el-form-item>
+            <el-form-item>
+                <el-button type="primary" @click="onSearch">查询</el-button>
+            </el-form-item>
+        </el-form>
+        <el-table
+            ref="elTable"
+            :data="listData"
+            :row-key="getRowKey"
+            height="340"
+            border
+            @row-click="handleRowClick"
+            @selection-change="handleSelectionChange"
+        >
+            <!--选择列 多选-->
+            <el-table-column
+                v-if="(selectionRow || selectionRow === '') && selectionType === 'checkbox'"
+                v-bind="typeof selectionRow === 'Object' ? selectionRow : null"
+                :label="handleAttribute(selectionRow.label, '')"
+                :reserve-selection="true"
+                type="selection"
+            />
+            <!--选择列 单选-->
+            <el-table-column
+                v-if="(selectionRow || selectionRow === '') && selectionType === 'radio'"
+                :label="selectionRow.label || ''"
+                :width="selectionRow.width || 55"
+            >
+                <template slot-scope="scope">
+                    <div @click.stop>
+                        <el-radio v-model="selectionRadio" :label="scope.row[pkKey]" @change="changeRowRadio(scope.row)">
+                            <span>&nbsp;</span>
+                        </el-radio>
+                    </div>
+                </template>
+            </el-table-column>
+            <el-table-column label="文件名" prop="fileName" />
+            <el-table-column label="扩展名" prop="ext" width="100px" />
+        </el-table>
+        <el-pagination
+            :current-page="currentPage"
+            :page-size="pageSize"
+            :page-count="pagination[pageCountKey]"
+            :total="pagination[totalKey]"
+            @size-change="handlePaginationSizeChange"
+            @current-change="handlePaginationCurrentChange"
+            @prev-click="handlePaginationPrevClick"
+            @next-click="handlePaginationNextClick"
+        />
+    </div>
 </template>
 <script>
-import { fileTypes, allFileTypes, accept as acceptTypes } from '@/business/platform/file/constants/fileTypes'
-import { queryPageList } from '@/api/platform/file/attachment'
-import ActionUtils from '@/utils/action'
-export default {
-  props: {
-    height: String,
-    load: Boolean,
-    multiple: Boolean,
-    fileSize: { // 上传尺寸
-      type: Number
-    },
-    value: [Object, Array],
-    limit: {
-      type: Number
-    },
-    accept: String
-  },
-  data() {
-    return {
-      listData: [],
-      pagination: {},
-      sorts: {},
-      selectionRadio: '',
-      pkKey: 'id',
-      currentPage: 0,
-      pageSizes: [10, 20, 50, 100],
-      pageSize: 20,
-      totalKey: 'totalCount',
-      pageKey: 'page',
-      pageCountKey: 'totalPages',
-      selectionRow: true,
-      format: true,
-      form: {
-        name: ''
-      },
-      fileList: [],
-      multipleSelection: [],
-      targetExt: false,
-      fileTypes: fileTypes,
-      allFileTypes: allFileTypes,
-      acceptTypes: acceptTypes
-    }
-  },
-  computed: {
-    selectionType() {
-      return this.multiple ? 'checkbox' : 'radio'
-    }
-  },
-  watch: {
-    load: {
-      handler() {
-        this.loadData()
-      },
-      immediate: true
-    },
-    selectionRadio(val, oldVal) {
-      if (this.$utils.isNotEmpty(val)) {
-        this.$emit('callback', this.listData.find((data) => {
-          if (data.id === val) {
-            return data
-          }
-        }))
-      }
-    }
-  },
-  methods: {
-    getRowKey(row) {
-      return row.id
-    },
-    handleSelectionChange(val) {
-      if (this.limit && this.limit === 0) {
-        this.$message({
-          message: '上传个数不能为0',
-          type: 'warning'
-        })
-        return
-      }
-      var pass = true
-      val.forEach(i => {
-        if (this.$utils.isNotEmpty(this.fileSize) && this.fileSize < i.totalBytes) {
-          this.$message({
-            message: '上传文件的大小大于' + this.$utils.formatSize(this.fileSize),
-            type: 'warning'
-          })
-          pass = false
-          this.$refs.elTable.toggleRowSelection(i, pass)
-        }
+    import { fileTypes, allFileTypes, accept as acceptTypes } from '@/business/platform/file/constants/fileTypes'
+    import { queryPageList } from '@/api/platform/file/attachment'
+    import ActionUtils from '@/utils/action'
+    export default {
+        props: {
+            height: String,
+            load: Boolean,
+            multiple: Boolean,
+            fileSize: {
+                // 上传尺寸
+                type: Number
+            },
+            value: [Object, Array],
+            limit: {
+                type: Number
+            },
+            accept: String
+        },
+        data() {
+            return {
+                listData: [],
+                pagination: {},
+                sorts: {},
+                selectionRadio: '',
+                pkKey: 'id',
+                currentPage: 0,
+                pageSizes: [10, 20, 50, 100],
+                pageSize: 10,
+                totalKey: 'totalCount',
+                pageKey: 'page',
+                pageCountKey: 'totalPages',
+                selectionRow: true,
+                format: true,
+                form: {
+                    name: '',
+                    ext: ''
+                },
+                fileList: [],
+                multipleSelection: [],
+                targetExt: false,
+                fileTypes: fileTypes,
+                allFileTypes: allFileTypes,
+                acceptTypes: acceptTypes
+            }
+        },
+        computed: {
+            selectionType() {
+                return this.multiple ? 'checkbox' : 'radio'
+            }
+        },
+        watch: {
+            load: {
+                handler() {
+                    this.loadData()
+                },
+                immediate: true
+            },
+            selectionRadio(val, oldVal) {
+                if (this.$utils.isNotEmpty(val)) {
+                    this.$emit('callback', this.listData.find(data => {
+                        if (data.id === val) {
+                            return data
+                        }
+                    }))
+                }
+            }
+        },
+        methods: {
+            getRowKey(row) {
+                return row.id
+            },
+            handleSelectionChange(val) {
+                if (this.limit && this.limit === 0) {
+                    this.$message({
+                        message: '上传个数不能为0',
+                        type: 'warning'
+                    })
+                    return
+                }
+                var pass = true
+                val.forEach(i => {
+                    if (this.$utils.isNotEmpty(this.fileSize) && this.fileSize < i.totalBytes) {
+                        this.$message({
+                            message: '上传文件的大小大于' + this.$utils.formatSize(this.fileSize),
+                            type: 'warning'
+                        })
+                        pass = false
+                        this.$refs.elTable.toggleRowSelection(i, pass)
+                    }
 
-        if (this.$utils.isNotEmpty(this.accept) && this.accept && !this.fileExtType({ name: `${i.fileName}.${i.ext}` })) {
-          this.$message.closeAll()
-          this.$message({
-            message: '不允许的文件类型',
-            type: 'warning'
-          })
-          pass = false
-          this.$refs.elTable.toggleRowSelection(i, pass)
-        }
-      })
-      if (!pass) {
-        return
-      }
-      this.multipleSelection = val
-      this.$emit('callback', val)
-    },
-    /**
-     * @description 行点击时触发的事件
-     */
-    handleRowClick(row, event, column) {
-      // 点击行，触发选中
-      if (this.$utils.isNotEmpty(this.fileSize) && this.fileSize < row.totalBytes) {
-        this.$message({
-          message: '上传文件的大小大于' + this.$utils.formatSize(this.fileSize),
-          type: 'warning'
-        })
-        return
-      }
-      if (this.$utils.isNotEmpty(this.accept) && this.accept && !this.fileExtType({ name: `${row.fileName}.${row.ext}` })) {
-        this.$message.closeAll()
-        this.$message({
-          message: '不允许的文件类型',
-          type: 'warning'
-        })
-        return false
-      }
-      if (this.selectionType === 'radio') {
-        this.selectionRadio = row[this.pkKey]
-      } else {
-        this.$refs.elTable.toggleRowSelection(row)
-      }
-      this.format = true
-      this.$emit('row-click', row, event, column)
-      this.$emit('format', this.format)
-    },
-    /**
-     * 文件类型的检测
-     */
-    fileExtType(file) {
-      const accept = this.accept
-      const acceptTypes = this.acceptTypes
-      const fileTypes = this.fileTypes
-      const arr = file.name.split('.')
-      const result = arr[arr.length - 1]
-      let type = ''
-      this.targetExt = false
-      for (const i in acceptTypes) {
-        if (acceptTypes[i] === accept) {
-          type = i
-        }
-      }
-      if (type !== '' && this.accept !== '*') {
-        // 现存的附件类型
-        const targetFileTypes = fileTypes[type]
-        this.targetExt = targetFileTypes.includes(result)
-      } else {
-        if (this.accept === '*') {
-        // 不限制
-          this.targetExt = true
-        } else {
-        // 自定义
-          const targetFileTypes = this.accept.split(',')
-          this.targetExt = targetFileTypes.includes('.' + result)
+                    if (this.$utils.isNotEmpty(this.accept) && this.accept && !this.fileExtType({ name: `${i.fileName}.${i.ext}` })) {
+                        this.$message.closeAll()
+                        this.$message({
+                            message: '不允许的文件类型',
+                            type: 'warning'
+                        })
+                        pass = false
+                        this.$refs.elTable.toggleRowSelection(i, pass)
+                    }
+                })
+                if (!pass) {
+                    return
+                }
+                this.multipleSelection = val
+                this.$emit('callback', val)
+            },
+            /**
+             * @description 行点击时触发的事件
+             */
+            handleRowClick(row, event, column) {
+                // 点击行，触发选中
+                if (this.$utils.isNotEmpty(this.fileSize) && this.fileSize < row.totalBytes) {
+                    this.$message({
+                        message: '上传文件的大小大于' + this.$utils.formatSize(this.fileSize),
+                        type: 'warning'
+                    })
+                    return
+                }
+
+                if (this.$utils.isNotEmpty(this.accept) && this.accept && !this.fileExtType({ name: `${row.fileName}.${row.ext}` })) {
+                    this.$message.closeAll()
+                    this.$message({
+                        message: '不允许的文件类型',
+                        type: 'warning'
+                    })
+                    return false
+                }
+                if (this.selectionType === 'radio') {
+                    this.selectionRadio = row[this.pkKey]
+                } else {
+                    this.$refs.elTable.toggleRowSelection(row)
+                }
+                this.format = true
+                this.$emit('row-click', row, event, column)
+                this.$emit('format', this.format)
+            },
+            /**
+             * 文件类型的检测
+             */
+            fileExtType(file) {
+                const accept = this.accept
+                const acceptTypes = this.acceptTypes
+                const fileTypes = this.fileTypes
+                const arr = file.name.split('.')
+                const result = arr[arr.length - 1]
+                let type = ''
+                this.targetExt = false
+                for (const i in acceptTypes) {
+                    if (acceptTypes[i] === accept) {
+                        type = i
+                    }
+                }
+                if (type !== '' && this.accept !== '*') {
+                    // 现存的附件类型
+                    const targetFileTypes = fileTypes[type]
+                    this.targetExt = targetFileTypes.includes(result)
+                } else {
+                    if (this.accept === '*') {
+                        // 不限制
+                        this.targetExt = true
+                    } else {
+                        // 自定义
+                        const targetFileTypes = this.accept.split(',')
+                        this.targetExt = targetFileTypes.includes('.' + result)
+                    }
+                }
+                return this.targetExt
+            },
+            /**
+             * @description 单选点击时触发的事件[阻止冒泡后单选值补充]
+             */
+            changeRowRadio(row) {
+                if (this.$utils.isNotEmpty(this.fileSize) && this.fileSize < row.totalBytes) {
+                    this.$message({
+                        message: '上传文件的大小大于' + this.$utils.formatSize(this.fileSize),
+                        type: 'warning'
+                    })
+                    return
+                }
+                if (this.$utils.isNotEmpty(this.accept) && this.accept && !this.fileExtType({ name: `${row.fileName}.${row.ext}` })) {
+                    this.$message.closeAll()
+                    this.$message({
+                        message: '不允许的文件类型',
+                        type: 'warning'
+                    })
+                    return
+                }
+                this.selectionRadio = row[this.pkKey]
+            },
+            toggleRowSelection(row, selected) {
+                if (this.selectionType === 'radio') {
+                    this.selectionRadio = row ? row[this.pkKey] : ''
+                } else {
+                    this.$refs.elTable.toggleRowSelection(row, selected)
+                }
+            },
+            loadData() {
+                this.loading = true
+                queryPageList(this.getSearcFormData()).then(response => {
+                    ActionUtils.handleListData(this, response.data)
+                    this.loading = false
+                }).catch(() => {
+                    this.loading = false
+                })
+            },
+            getSearcFormData() {
+                return ActionUtils.formatParams(
+                    {
+                        'Q^FILE_NAME_^SL': this.form.name,
+                        'Q^EXT_^SL': this.form.ext
+                    },
+                    this.pagination,
+                    this.sorts
+                )
+            },
+            onSearch() {
+                this.loadData()
+            },
+            /**
+             * @description 每页条数改变
+             */
+            handlePaginationSizeChange(pageSize) {
+                this.handlePaginationChange({ pageSize: pageSize })
+            },
+            /**
+             * @description 当前页码改变
+             */
+            handlePaginationCurrentChange(currentPage) {
+                this.handlePaginationChange({ currentPage: currentPage })
+            },
+            /**
+             * @description 上一页
+             */
+            handlePaginationPrevClick(currentPage) {
+                this.handlePaginationChange({ currentPage: currentPage })
+            },
+            /**
+             * @description 下一页
+             */
+            handlePaginationNextClick(currentPage) {
+                this.handlePaginationChange({ currentPage: currentPage })
+            },
+            /**
+             * 处理分页事件
+             */
+            handlePaginationChange({ pageSize, currentPage }) {
+                ActionUtils.setPagination(this.pagination, {
+                    limit: pageSize || this.pageSize,
+                    page: currentPage || this.currentPage
+                })
+                this.loadData()
+            },
+            /**
+             * @description 组件属性默认值
+             */
+            handleAttribute(attribute, defaultValue) {
+                if (attribute === false || attribute === 0 || attribute === '') {
+                    return attribute
+                }
+                return attribute || defaultValue
+            }
         }
-      }
-      return this.targetExt
-    },
-    /**
-     * @description 单选点击时触发的事件[阻止冒泡后单选值补充]
-     */
-    changeRowRadio(row) {
-      if (this.$utils.isNotEmpty(this.fileSize) && this.fileSize < row.totalBytes) {
-        this.$message({
-          message: '上传文件的大小大于' + this.$utils.formatSize(this.fileSize),
-          type: 'warning'
-        })
-        return
-      }
-      if (this.$utils.isNotEmpty(this.accept) && this.accept && !this.fileExtType({ name: `${row.fileName}.${row.ext}` })) {
-        this.$message.closeAll()
-        this.$message({
-          message: '不允许的文件类型',
-          type: 'warning'
-        })
-        return
-      }
-      this.selectionRadio = row[this.pkKey]
-    },
-    toggleRowSelection(row, selected) {
-      if (this.selectionType === 'radio') {
-        this.selectionRadio = row ? row[this.pkKey] : ''
-      } else {
-        this.$refs.elTable.toggleRowSelection(row, selected)
-      }
-    },
-    loadData() {
-      this.loading = true
-      queryPageList(this.getSearcFormData()).then(response => {
-        ActionUtils.handleListData(this, response.data)
-        this.loading = false
-      }).catch(() => {
-        this.loading = false
-      })
-    },
-    getSearcFormData() {
-      return ActionUtils.formatParams(
-        {
-          'Q^FILE_NAME_^SL': this.form.name
-        },
-        this.pagination,
-        this.sorts)
-    },
-    onSearch() {
-      this.loadData()
-    },
-    /**
-     * @description 每页条数改变
-     */
-    handlePaginationSizeChange(pageSize) {
-      this.handlePaginationChange({ pageSize: pageSize })
-    },
-    /**
-     * @description 当前页码改变
-     */
-    handlePaginationCurrentChange(currentPage) {
-      this.handlePaginationChange({ currentPage: currentPage })
-    },
-    /**
-     * @description 上一页
-     */
-    handlePaginationPrevClick(currentPage) {
-      this.handlePaginationChange({ currentPage: currentPage })
-    },
-    /**
-     * @description 下一页
-     */
-    handlePaginationNextClick(currentPage) {
-      this.handlePaginationChange({ currentPage: currentPage })
-    },
-    /**
-     * 处理分页事件
-     */
-    handlePaginationChange({ pageSize, currentPage }) {
-      ActionUtils.setPagination(this.pagination, {
-        limit: pageSize || this.pageSize,
-        page: currentPage || this.currentPage
-      })
-      this.loadData()
-    },
-    /**
-     * @description 组件属性默认值
-     */
-    handleAttribute(attribute, defaultValue) {
-      if (attribute === false || attribute === 0 || attribute === '') {
-        return attribute
-      }
-      return attribute || defaultValue
     }
-  }
-
-}
 </script>

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

@@ -6,7 +6,7 @@
             :url-list="[url]"
             :on-close="closeDialog"
         />
-        <!-- <template v-if="fileType !== 'image' && fileType">
+        <template v-if="fileType !== 'image' && fileType">
             <el-dialog
                 :visible.sync="dialogVisible"
                 :title="title"
@@ -25,7 +25,7 @@
                 />
                 <div v-else class="lc-fixed-navbar">不支持预览的类型</div>
             </el-dialog>
-        </template> -->
+        </template>
     </div>
 </template>
 <script>
@@ -43,18 +43,19 @@
     import ImageViewer from './image'
     // import AudioViewer from './audio' //xianyifan
     // import VideoViewer from './video' //xianyifan
-    // import TxtViewer from './txt'
+    import TxtViewer from './txt'
+    import pdfViewer from './pdf/index'
     import { officeType, pdfType, txtType, imageType, audioType, videoType } from './constants'
     import PopupManager from '@/utils/popup'
     import editor from '@/business/platform/file/attachment/editFile/editor.vue'
     export default {
         components: {
-            // 'pdf-viewer': () => import('./pdf/index.vue'),
             ImageViewer,
             // AudioViewer,
             // VideoViewer,
-            // TxtViewer,
-            editor
+            TxtViewer,
+            editor,
+            pdfViewer
         },
         props: {
             visible: {
@@ -74,6 +75,10 @@
             optionFile: {
                 type: Object,
                 default: () => {}
+            },
+            file:{
+                type: String,
+                require: ''
             }
         },
         data() {
@@ -99,7 +104,7 @@
             }
         },
         watch: {
-            visible: {
+            optionFile: {
                 handler: function (val, oldVal) {
                     this.dialogVisible = this.visible
                     this.loadViewer()
@@ -120,17 +125,29 @@
                 return PopupManager.getZIndex()
             },
             loadViewer() {
+                console.log(this.optionFile.previewType)
+                var flag = true
+                if (/Mobi|Android|iPhone|iPad/i.test(navigator.userAgent)) {
+                    flag = false
+                }
                 if (imageType.includes(this.fileExt)) {
                     this.dialogVisible = false
                     this.zIndex = this.fixZIndex()
                     this.fileUrl = this.url
                     this.fileType = 'image'
+                } else if(flag && pdfType.includes(this.fileExt) && this.optionFile.previewType === 'PDFH5'){
+                    // 仅特定字段的PDF文件用PDFh5预览，其余PDF文件使用onlyoffice预览
+                    this.fileType = 'pdf'
+                    this.$nextTick(() => {
+                        this.$refs.viewer.load(this.url)
+                    })
+
                 } else {
                     this.openDialog() // 先初始化调用参数
                     this.openWindow() // 打开外部预览页面
                     this.closeDialog() // 关闭当前
                     // this.fileType = 'FILE'
-                } 
+                }
                 // else if (
                 //     officeType.includes(this.fileExt) ||
                 //     pdfType.includes(this.fileExt)

src/utils/fecha.js

@@ -505,7 +505,7 @@ const dateDealFmt = {
       if (has != null) {
         const val = parseInt(dateStr.substring(has.index, has.index + has[0].length), 10)
         if (p === 'y') { date.setYear(val) }
-        if (p === 'M') { date.setMonth(val - 1) }
+        if (p === 'M') { date.setMonth(val - 1, 1) }
         if (p === 'd') { date.setDate(val) }
         if (p === 'H') { date.setHours(val) }
         if (p === 'm') { date.setMinutes(val) }

src/views/platform/file/attachment/detail.vue

@@ -59,6 +59,7 @@
     import { get } from '@/api/platform/file/attachment'
     import { downloadFile } from '@/business/platform/file/utils'
     import { SYSTEM_URL, BASE_API } from '@/api/baseUrl'
+    import { fileTypes } from '@/business/platform/file/constants/fileTypes'
 
     export default {
         props: {
@@ -157,6 +158,10 @@
             },
             filePreview () {
                 const { id, fileName, ext } = this.data
+                if (fileTypes.images.includes(ext)) {
+                    this.$message.warning('图片附件请直接在列表预览！')
+                    return
+                }
                 this.fileOption.user.id = this.$store.getters.userId
                 this.fileOption.user.name = this.$store.getters.name
                 this.fileOption.url = BASE_API() + SYSTEM_URL() + `/file/download?attachmentId=${id}`

src/views/platform/file/attachment/list.vue

@@ -62,6 +62,7 @@
     import FixHeight from '@/mixins/height'
     import IbpsUploader from '@/business/platform/file/uploader'
     import FilePreview from '@/business/platform/file/file-preview'
+    import { fileTypes } from '@/business/platform/file/constants/fileTypes'
     import Detail from './detail'
     import ModifyName from './modify-name'
     import { SYSTEM_URL, BASE_API } from '@/api/baseUrl'
@@ -263,7 +264,7 @@
                         break
                     case 'preview': // 预览
                         console.log('ext:', data.ext)
-                        if (['png', 'jpeg', 'jpg'].includes(data.ext)) {
+                        if (fileTypes.images.includes(data.ext)) {
                             this.file = data
                             this.filePreviewVisible2 = false
                             this.filePreviewVisible = true