Merge branch 'master' of http://119.23.210.103:3000/wy/mj_firm_former

src/api/platform/file/attachment.js

@@ -28,6 +28,18 @@ export function remove(params) {
     params: params
   })
 }
+/**
+ * 删除文件
+ * @param {*} params
+ */
+ export function deleteFile(params) {
+    return request({
+      url: SYSTEM_URL() + '/file/delete',
+      method: 'post',
+      isLoading: true,
+      params: params
+    })
+  }
 /**
  * 保存数据
  * @param {*} params

src/business/platform/file/attachment/editFile/editor.vue

@@ -1,137 +1,156 @@
 <!--onlyoffice 编辑器-->
 <template>
-  <div>
-      <div
-      id="editorDiv"
-      class="nav"
-      ref = "editor"/>
-  </div>
+    <div>
+        <div id="editorDiv" class="nav" ref="editor" />
+    </div>
 </template>
 
 <script>
-import { handleDocType } from './editor/editor.js'
-import { showView } from '@/api/platform/file/attachment'
-import { getToken } from '@/utils/auth'
-export default {
-  name: 'editor',
-  props: {
-    option: {
-      type: Object,
-      default: () => {
-        return {}
-      }
-    }
-  },
-  data() {
-    return {
-      doctype: '',
-      newId:'',
-      timer:'',
-      configKey:''
-    }
-  },
-  mounted() {
-    /* 调用初始化方法 ，渲染wps*/
-    if (this.option.url) {
-      this.setEditor(this.option)
-    }
-    if(this.option.mode == 'edit'){
-      /* 编辑模式下，开启定时任务，每0.5秒轮询 */
-      this.timer = setInterval(() => {
-         if(this.configKey){
-           showView({key:this.configKey}).then(response => {
-           if(response.variables.data!='0' && this.newId != response.variables.data){//则返回替换文件id
-                 this.newId = response.variables.data //记录当前id 且返回变动的文件id，证明有做修改。 提示并替换
-                 this.$message({
-                            message: '文件编辑保存成功，稍后请提交表单！',
-                            type: 'success'
-                          });
-                  this.$emit('updateFile', this.newId)
+    import { handleDocType } from './editor/editor.js'
+    import { showView } from '@/api/platform/file/attachment'
+    import { getToken } from '@/utils/auth'
+    export default {
+        name: 'editor',
+        props: {
+            option: {
+                type: Object,
+                default: () => {
+                    return {}
                 }
-            })
-         }
-        /* 进行后端接口轮询，查到id则进行与当前id比较，相等则不做操作，不相等则返回id，更新页面数据。同时继续查询*/
-          }, 1000);
-      }
-
-  },
-   beforeDestroy() {
-      // 页面关闭钱，清空定时任务
-      this.clearTimer();
-    },
-  methods: {
-    /* 定时任务关闭*/
-      clearTimer() {
-          if(this.timer) {
-            clearInterval(this.timer);
-            this.timer = null;
-          }
+            }
         },
-
-    setEditor(option) {
-      this.doctype = handleDocType(option.fileType)
-      let config = {
-        document: {
-          fileType: option.fileType,
-          key: option.key,
-          title: option.title,
-          permissions: {
-            comment: true,
-            download: true,
-            modifyContentControl: true,
-            modifyFilter: true,
-            print: true,
-            edit: true,
-            fillForms: true,
-            review: true
-          },
-          url: option.url
+        data() {
+            return {
+                doctype: '',
+                newId: '',
+                timer: '',
+                configKey: ''
+            }
+        },
+        mounted() {
+            // 调用初始化方法 ，渲染wps
+            if (this.option.url) {
+                this.setEditor(this.option)
+            }
+            if(this.option.mode == 'edit'){
+                // 编辑模式下轮询获取文件id
+                this.timer = setInterval(() => {
+                    if (this.configKey) {
+                        showView({ key: this.configKey }).then((response) => {
+                            if (response.variables.data !== '0' && this.newId !== response.variables.data) {
+                                // 记录当前id，与返回的文件id比对，有变化证明有做修改，提示并替换
+                                this.newId = response.variables.data 
+                                this.$message.success('文件编辑保存成功，稍后请提交表单！')
+                                this.$emit('updateFile', this.newId)
+                            }
+                        })
+                    }
+                }, 2000)
+            }
         },
-        documentType: this.doctype,
-        editorConfig: {
-          callbackUrl: option.editUrl + '&access_token=' + getToken(),
-          lang: 'zh',
-          canHistoryRestore:true,
-          canUseHistory:true,
-          customization: {
-            commentAuthorOnly: false,
-            comments: true,
-            compactHeader:false,
-            compactToolbar:true,
-            feedback:false,
-            plugins:true,
-        "feedback": {
-          "visible": true // 隐藏反馈按钮
-               },
-			"forcesave": true, // true 表示强制文件保存请求添加到回调处理程序
-			"atuosave":false,//取消强制保存，进行手动保存
-          },
-          user:{
-            id:option.user.id,
-            name:option.user.name
-          },
-          mode:option.mode,
+        beforeDestroy() {
+            // 页面关闭清除定时任务
+            this.clearTimer()
         },
-        width: '100%',
-        token:getToken(),
-        height:  document.body.clientHeight+'px'
-      }
-      let docEditor = new DocsAPI.DocEditor('editorDiv', config)
-      this.configKey = config.document.key
-    },
-  },
-  watch: {
-    option: {
-      handler: function (n, o) {
-        this.setEditor(n)
-        this.doctype = handleDocType(n.fileType)
-      },
-      deep: true,
+        methods: {
+            // 清除定时任务
+            clearTimer() {
+                if (this.timer) {
+                    clearInterval(this.timer)
+                    this.timer = null
+                }
+            },
+            setEditor(option) {
+                this.doctype = handleDocType(option.fileType)
+                let config = {
+                    document: {
+                        fileType: option.fileType,
+                        key: option.key,
+                        title: option.title,
+                        permissions: {
+                            comment: true,
+                            download: true,
+                            modifyContentControl: true,
+                            modifyFilter: true,
+                            print: true,
+                            edit: true,
+                            fillForms: true,
+                            review: true
+                        },
+                        url: option.url
+                    },
+                    documentType: this.doctype,
+                    editorConfig: {
+                        callbackUrl: option.editUrl + '&access_token=' + getToken(),
+                        lang: 'zh',
+                        canHistoryRestore: true,
+                        canUseHistory: true,
+                        customization: {
+                            commentAuthorOnly: false,
+                            comments: true,
+                            compactHeader: false,
+                            compactToolbar: false,
+                            plugins: true,
+                            feedback: {
+                                visible: false // 隐藏反馈按钮
+                            },
+                            forcesave: true, // true 表示强制文件保存请求添加到回调处理程序
+                            atuosave: false // 取消强制保存，进行手动保存
+                        },
+                        user: {
+                            id: option.user.id,
+                            name: option.user.name
+                        },
+                        mode: option.mode
+                    },
+                    events: {
+                        onRequestSaveAs: () => {
+                            console.log('另存为')
+                        },
+                        // 监听文件修改开启轮询，有几率同时触发N个，导致页面卡死
+                        // onDocumentStateChange: e => {
+                        //     if (!e.data) {
+                        //         console.log('文件修改', e)
+                        //         this.handlerFileSave()
+                        //     }
+                        // },
+                        onDocumentReady: () => {
+                            console.log('文件加载完成~')
+                        }
+                    },
+                    width: '100%',
+                    token: getToken(),
+                    height: document.body.clientHeight + 'px'
+                }
+                let docEditor = new DocsAPI.DocEditor('editorDiv', config)
+                this.configKey = config.document.key
+            },
+            handlerFileSave() {
+                this.clearTimer()
+                // 进行后端接口轮询，查到id则进行与当前id比较，相等则不做操作，不相等则返回id，更新页面数据。
+                this.timer = setInterval(() => {
+                    if (this.configKey) {
+                        showView({ key: this.configKey }).then((response) => {
+                            if (response.variables.data !== '0' && this.newId !== response.variables.data) {
+                                // 记录当前id，与返回的文件id比对，有变化证明有做修改，提示并替换
+                                this.newId = response.variables.data 
+                                this.$message.success('文件编辑保存成功，稍后请提交表单！')
+                                this.$emit('updateFile', this.newId)
+                                this.clearTimer()
+                            }
+                        })
+                    }
+                }, 2000)
+            }
+        },
+        watch: {
+            option: {
+                handler: function (n, o) {
+                    this.setEditor(n)
+                    this.doctype = handleDocType(n.fileType)
+                },
+                deep: true
+            }
+        }
     }
-  }
-}
-</script>
-
-<style scoped>
-
-</style>
+</script>

src/business/platform/file/attachment/editFile/editor/editor.js

@@ -1,22 +1,19 @@
 export function handleDocType(fileType) {
-  let docType = '';
-  let fileTypesDoc = [
-    'doc', 'docm', 'docx', 'dot', 'dotm', 'dotx', 'epub', 'fodt', 'htm', 'html', 'mht', 'odt', 'ott', 'pdf', 'rtf', 'txt', 'djvu', 'xps'
-  ];
-  let fileTypesCsv = [
-    'csv', 'fods', 'ods', 'ots', 'xls', 'xlsm', 'xlsx', 'xlt', 'xltm', 'xltx'
-  ];
-  let fileTypesPPt = [
-    'fodp', 'odp', 'otp', 'pot', 'potm', 'potx', 'pps', 'ppsm', 'ppsx', 'ppt', 'pptm', 'pptx'
-  ];
-  if (fileTypesDoc.includes(fileType)) {
-    docType = 'text'
-  }
-  if (fileTypesCsv.includes(fileType)) {
-    docType = 'spreadsheet'
-  }
-  if (fileTypesPPt.includes(fileType)) {
-    docType = 'presentation'
-  }
-  return docType;
-}
+    let docType = ''
+    let fileTypesDoc = [ 'doc', 'docm', 'docx', 'dot', 'dotm', 'dotx', 'epub', 'fodt', 'htm', 'html', 'mht', 'odt', 'ott', 'pdf', 'rtf', 'txt', 'djvu', 'xps']
+    let fileTypesCsv = [ 'csv', 'fods', 'ods', 'ots', 'xls', 'xlsm', 'xlsx', 'xlt', 'xltm', 'xltx' ]
+    let fileTypesPPt = [ 'fodp', 'odp', 'otp', 'pot', 'potm', 'potx', 'pps', 'ppsm', 'ppsx', 'ppt', 'pptm', 'pptx' ]
+    if (fileTypesDoc.includes(fileType)) {
+        // docType = 'text'
+        docType = 'word'
+    }
+    if (fileTypesCsv.includes(fileType)) {
+        // docType = 'spreadsheet'
+        docType = 'cell'
+    }
+    if (fileTypesPPt.includes(fileType)) {
+        // docType = 'presentation'
+        docType = 'slide'
+    }
+    return docType
+}

src/business/platform/file/attachment/editFile/fView.vue

@@ -1,58 +1,55 @@
 <template>
-	<div>
-		<editor
-    :option="option"
-    @updateFile = "updateFile"
-    />
-	</div>
+    <div>
+        <editor :option="option" @updateFile="updateFile" />
+    </div>
 </template>
 
 <script>
-import editor from './editor'
-export default {
-  name: 'fView',
-  components: { editor },
- props: {
-   optionFile: {
-     type: Object,
-     default: () => {
-       return {}
-     }
-   }
- },
-  data() {
-    return {
-      option: {
-        url: '',
-        isEdit: true,
-        fileType: '',
-        title: '',
-        user: {
-          id: '',
-          name: ''
+    import editor from './editor'
+    export default {
+        name: 'fView',
+        components: { editor },
+        props: {
+            optionFile: {
+                type: Object,
+                default: () => {
+                    return {}
+                }
+            }
         },
-        mode: 'edit',
-        editUrl: '',
-        key: ''
-      },
-    }
-  },
-  /* 创时，同时创建定时任务，开始查询是否有对应key*/
-  created() {
-    this.option.user.id =this.$store.getters.userId
-    this.option.user.name = this.$store.getters.name
-    this.getFile()
-  },
-  methods: {
-    updateFile(data){
-         this.$emit('updateFile',data)
-      },
-    getFile() {
-				this.option.url =  this.optionFile.url //下载地址
-				this.option.editUrl = this.optionFile.editUrl //回调接口url
-				this.option.title =this.optionFile.title // 文件名称
-				this.option.fileType =this.optionFile.fileType //类型
+        data() {
+            return {
+                option: {
+                    url: '',
+                    isEdit: true,
+                    fileType: '',
+                    title: '',
+                    user: {
+                        id: '',
+                        name: ''
+                    },
+                    mode: 'edit',
+                    editUrl: '',
+                    key: ''
+                }
+            }
+        },
+        // 创建定时任务，开始查询是否有对应key
+        created() {
+            this.option.user.id = this.$store.getters.userId
+            this.option.user.name = this.$store.getters.name
+            this.getFile()
+        },
+        methods: {
+            updateFile(data) {
+                this.$emit('updateFile', data)
+            },
+            getFile() {
+                this.option.url = this.optionFile.url // 下载地址
+                this.option.editUrl = this.optionFile.editUrl // 回调接口url
+                this.option.title = this.optionFile.title // 文件名称
+                this.option.fileType = this.optionFile.fileType // 类型
+            }
+        }
     }
-  },
-}
 </script>

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

@@ -1,603 +1,610 @@
 <template>
-  <div>
-    <ibps-file-attachment-selector
-      ref="attachmentSelector"
-      :items="items"
-      :value="selectorValue"
-      :media-type="mediaType"
-      :media="media"
-      :placeholder="placeholder"
-      :multiple="multiple"
-      :limit="limit"
-      :disabled="disabled"
-      :readonly="readonly"
-      :download="download"
-      :operation_status = "operation_status"
-      :preview="preview"
-      :upload-type="uploadType"
-      :file-size="fileSize"
-      :accept="acceptType"
-      :file-ext="fileExt"
-      @action-event="handleActionEvent"
-    />
-    <!-- 选择器 -->
-    <ibps-uploader-selector-dialog
-      :visible="selectorVisible"
-      :value="selectorValue"
-      :multiple="selectorMultiple"
-      :file-size="fileSize"
-      :accept="acceptType"
-      :file-ext="fileExt"
-      :limit="limit"
-      @close="visible => selectorVisible = visible"
-      @action-event="handleSelectorActionEvent"
-    />
-    <div  v-if="filePreviewVisible">
-      <file-preview
-          :file="attachment"
-          :visible="filePreviewVisible"
-           :optionFile = "optionFileView"
-          @close="visible => filePreviewVisible = visible"
+    <div>
+        <ibps-file-attachment-selector
+            ref="attachmentSelector"
+            :items="items"
+            :value="selectorValue"
+            :media-type="mediaType"
+            :media="media"
+            :placeholder="placeholder"
+            :multiple="multiple"
+            :limit="limit"
+            :disabled="disabled"
+            :readonly="readonly"
+            :download="download"
+            :operation_status="operation_status"
+            :preview="preview"
+            :upload-type="uploadType"
+            :file-size="fileSize"
+            :accept="acceptType"
+            :file-ext="fileExt"
+            @action-event="handleActionEvent"
         />
-     </div>
+        <!-- 选择器 -->
+        <ibps-uploader-selector-dialog
+            :visible="selectorVisible"
+            :value="selectorValue"
+            :multiple="selectorMultiple"
+            :file-size="fileSize"
+            :accept="acceptType"
+            :file-ext="fileExt"
+            :limit="limit"
+            @close="visible => selectorVisible = visible"
+            @action-event="handleSelectorActionEvent"
+        />
+        <div v-if="filePreviewVisible">
+            <file-preview
+                :file="attachment"
+                :visible="filePreviewVisible"
+                :optionFile="optionFileView"
+                @close="visible => filePreviewVisible = visible"
+            />
+        </div>
 
-    <div class="divShow" v-if="showFile">
-      <fView
-       :optionFile = "optionFile"
-       @updateFile="updateFile"
-      />
+        <div class="divShow" v-if="showFile">
+            <fView :optionFile="optionFile" @updateFile="updateFile" />
+        </div>
     </div>
-  </div>
 </template>
 <script>
-import { get, transfer, uploadFile } from '@/api/platform/file/attachment'
-import { downloadFile } from '@/business/platform/file/utils'
-import { remoteRequest, remoteTransRequest } from '@/utils/remote'
-import IbpsFileAttachmentSelector from './index'
-import IbpsUploaderSelectorDialog from '@/business/platform/file/uploader'
-import FilePreview from '@/business/platform/file/file-preview'
-import { supportFileTypes } from '@/components/ibps-file-viewer/constants'
-import { TRANSFER_DATA } from '@/constant'
-import fView from './editFile/fView.vue'
-import {SYSTEM_URL,BASE_API} from '@/api/baseUrl'
-
-export default {
-  components: {
-    IbpsFileAttachmentSelector,
-    IbpsUploaderSelectorDialog,
-    FilePreview,
-    fView
-  },
-  inject: {
-    elForm: {
-      default: ''
-    },
-    elFormItem: {
-      default: ''
-    }
-  },
-  props: {
-    value: {
-      type: [String, Number, Array, Object]
-    },
-    mediaType: String,
-    media: String,
-    store: { // / 存储类型 ，json： json字符串,id:只存储id， array：存储数组数据 ，arrayId: 字符串类型。
-      type: String,
-      default: 'id',
-      validator: function(value) {
-        return ['json', 'id', 'array', 'arrayId', 'bind'].indexOf(value) !== -1
-      }
-    },
-    storeSeparator: { // 存储值分割符,对应[多选]有效，对于设置字符串类型的分隔符
-      type: String,
-      default: ','
-    },
-    placeholder: { // 输入框占位文本
-      type: String,
-      default: '请选择附件'
-    },
-    multiple: { // 是否多选
-      type: Boolean,
-      default: false
-    },
-    limit: { // 最大允许上传个数
-      type: Number
-    },
-    accept: String, // 类型,
-    fileExt: {
-      type: Array,
-      default: () => []
-    },
-    disabled: { // 禁用
-      type: Boolean,
-      default: false
-    },
-    readonly: { // 只读
-      type: Boolean,
-      default: false
-    },
-    operation_status:{ //编辑
-      type: String,
-      default: 'none'
-    },
-    download: { // 允许下载
-      type: Boolean,
-      default: true
-    },
-    preview: { // 允许预览
-      type: Boolean,
-      default: true
-    },
-    fileSize: { // 上传尺寸
-      type: Number
-    },
-    labelKey: {
-      type: String,
-      default: 'fileName'
-    },
-    valueKey: {
-      type: String,
-      default: 'id'
-    },
-    uploadType: { // 上传方式 （ default:直接打开上传，attachment：ibps上传附件打开上传 ）
-      type: String,
-      default: 'attachment'
-    },
-    showExtName: {
-      type: Boolean,
-      default: true
-    }
-  },
-  data() {
-    return {
-      selectorVisible: false,
-      selectorValue: this.multiple ? [] : {},
-      reselect: false, // 重新选择
-      selectorMultiple: this.multiple,
-      index: -1,
-      cacheData: {},
-      attachment: {},
-      filePreviewVisible: false,
-      acceptType: '',
-      showFile:false,
-      file:'',
-      optionFile:{},
-      optionFileView:{},
-    }
-  },
-  computed: {
-    items() {
-      if (this.$utils.isEmpty(this.selectorValue)) return []
-      if (this.multiple) {
-        return this.selectorValue.map(data => {
-          return data[this.labelKey] + this.getExtName(data)
-        })
-      } else {
-        return [this.selectorValue[this.labelKey] + this.getExtName(this.selectorValue)]
-      }
-    },
-    uploadStyle() {
-      const { width, height } = this
-      return {
-        'width': `${width}px`,
-        'height': `${height}px`,
-        'lineHeight': `${height}px`,
-        'display': 'inline'
-      }
-    }
-  },
-  watch: {
-    value(val) {
-      if (this.$utils.isEmpty(this.value)) {
-        this.selectorValue = []
-      } else if(val){
-        this.initData()
-      }
-    },
-    mediaType: {
-      handler: function(val, oldVal) {
-        if (val === 'custom') {
-          var arr = this.media.split(',')
-          const accept = '.' + arr.join(',').replace(/,/g, ',.')
-          this.acceptType = accept
-        } else {
-          this.acceptType = this.accept
-        }
-      },
-      immediate: true
-    }
-  },
-  mounted() {
-    this.initData()
-  },
-  methods: {
-   //替换对应的文件 id  this.optionFile.data.index  为点击编辑时记录的下表号
-    updateFile(data){
-      this.selectorValue[this.optionFile.data.index ].id =  data
-       this.handleInput()
-      },
-    /**
-     * 初始化数据
-     */
-    initData() {
-      const data = this.getArrayValue(this.value)
-      this.selectorValue = this.multiple ? [] : {}
-      if (this.$utils.isEmpty(data)) {
-        return
-      }
-      data.forEach(v => {
-        if (this.cacheData[v]) {
-          this.setSelectorValue(v)
-        } else {
-          this.getDataInfo(v)
-        }
-      })
-    },
-    setCacheData() {
-      if (this.$utils.isEmpty(this.selectorValue)) return
-      const data = this.multiple ? this.selectorValue : [this.selectorValue]
-      data.forEach(v => {
-        this.cacheData[v[this.valueKey]] = v
-      })
-    },
-    setSelectorValue(v) {
-      if (this.multiple) {
-        this.selectorValue.push(this.cacheData[v])
-      } else {
-        this.selectorValue = JSON.parse(JSON.stringify(this.cacheData[v]))
-      }
-    },
-    /**
-     * 获得数组数据
-     */
-    getArrayValue(value, bindId) {
-      if (this.$utils.isEmpty(value)) {
-        return []
-      }
-      if (this.store === 'json') { // json
-        return this.parseJsonData(value)
-      } else if (this.store === 'id') { // id
-        // 可能是json数据[之前存储的josn格式]
-        if (this.$utils.isJSON(value)) {
-          return this.parseJsonData(value)
-        } else {
-          return this.$utils.isString(value) ? value.split(this.storeSeparator) : []
-        }
-      } else if (this.store === 'bind') { // 绑定id
-        if (this.$utils.isEmpty(bindId)) {
-          return []
-        }
-        return bindId.split(this.storeSeparator)
-      } else { // array
-        return value.map((d) => {
-          return d[this.valueKey]
-        })
-      }
-    },
-    parseJsonData(value) {
-      try {
-        const data = this.$utils.parseData(value)
-        const result = []
-        if (Array.isArray(data)) {
-          data.forEach(d => {
-            const node = d[this.valueKey]
-            if (node) result.push(node)
-          })
-        } else {
-          if (this.$utils.isPlainObject(data)) {
-            result.push(data[this.valueKey])
-          } else {
-            const realData = this.$utils.isString(value) ? value.split(this.storeSeparator) : []
-            realData.forEach(v => {
-              result.push(v)
-            })
-          }
-        }
-        return result
-      } catch (error) {
-        console.warn(error)
-        return []
-      }
-    },
-    getStoreValue(value) {
-      const res = []
-      if (this.store === 'json') { // json
-        if (this.$utils.isEmpty(value)) {
-          return ''
-        }
-        if (this.multiple) {
-          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 {
-          const o = {}
-          o[this.valueKey] = value[this.valueKey]
-          o[this.labelKey] = value[this.labelKey]
-          return JSON.stringify(o)
-        }
-      } else if (this.store === 'id') { // id
-        if (this.$utils.isEmpty(value)) {
-          return ''
-        }
-        if (this.multiple) {
-          value.forEach(v => {
-            res.push(v[this.valueKey])
-          })
-        } else {
-          res.push(value[this.valueKey])
-        }
-        return res.join(this.storeSeparator)
-      } else if (this.store === 'bind') { // 绑定id
-        const res = []
-        const bindIdValue = []
-        value.forEach(v => {
-          bindIdValue.push(v[this.valueKey])
-          res.push(v[this.labelKey])
-        })
-        this.bindIdValue = bindIdValue.join(this.storeSeparator)
-
-        return res.join(this.storeSeparator)
-      } else { // 数组 array
-        return value || []
-      }
-    },
-    /**
-    * 通过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])
-      }
-    },
-
-    getExtName(data) {
-      if (!data) { return '' }
-      if (this.showExtName && data['ext']) {
-        return '.' + data['ext']
-      }
-      return ''
-    },
-    // ===================事件处理=========
+    import { get, transfer, uploadFile } from '@/api/platform/file/attachment'
+    import { downloadFile } from '@/business/platform/file/utils'
+    import { remoteRequest, remoteTransRequest } from '@/utils/remote'
+    import IbpsFileAttachmentSelector from './index'
+    import IbpsUploaderSelectorDialog from '@/business/platform/file/uploader'
+    import FilePreview from '@/business/platform/file/file-preview'
+    import { supportFileTypes } from '@/components/ibps-file-viewer/constants'
+    import { TRANSFER_DATA } from '@/constant'
+    import fView from './editFile/fView.vue'
+    import { SYSTEM_URL, BASE_API } from '@/api/baseUrl'
 
-    handleActionEvent(action, index,data,type) {
-      this.index = index
-      switch (action) {
-        case 'select': // 选择
-          this.selectorVisible = true
-          this.selectorMultiple = this.multiple
-          this.reselect = false
-          this.showFile = false
-          break
-        case 'reselect':// 重新选择
-          this.selectorVisible = true
-          this.selectorMultiple = false
-          this.reselect = true
-          this.showFile = false
-          break
-        case 'remove' :// 删除
-          this.handleRemove(index)
-          this.$refs['attachmentSelector'].init()
-          break
-        case 'download' :// 下载
-          this.handleDownload(index)
-          break
-        case 'preview' : // 预览
-          this.handlePreview(index)
-          break
-        case 'confirm' : // 默认上传选择文件
-          this.handleSelectorActionEvent(action, index)
-          break
-        case 'edit' : //编辑
-          this.handleEdit(index,data,type)
-          break
-
-      }
-    },
-    /* 处理编辑文件*/
-    handleEdit(index,data,type){
-     //1、获取文件数据 及下载流接口
-      this.optionFile.url = BASE_API() + SYSTEM_URL() + '/file/download?attachmentId=' + data.id
-      this.optionFile.editUrl =  BASE_API()+SYSTEM_URL() + '/file/editCallback?fileName=' + data.fileName+'&fileType='+data.ext+'&type='+type+'&id='+ data.id
-      this.optionFile.title =data.fileName // 文件名称
-      this.optionFile.fileType = data.ext //类型
-      this.optionFile.data = data //记录编制的位置， 需要替换。
-      this.optionFile.data.index = index
-      //2、显示编辑位置，提交后进行保存
-      if(this.showFile){ //重复打开，进行刷新子组件
-          this.showFile = false
-        }else{
-           this.showFile = true
-         /*  this.timer = setInterval((num)=>{
-           this. test = true
-           },10000) */
-        }
-    },
-    /**
-     * 处理删除
-     */
-    handleRemove(index) {
-      if (this.multiple) {
-        this.selectorValue.splice(index, 1)
-      } else {
-        this.selectorValue = {} //当前为清空
-      }
-      this.handleInput()
-    },
-    /**
-     * 处理下载
-     */
-    handleDownload(index) {
-      downloadFile(this.multiple ? this.selectorValue[index] : this.selectorValue)
-    },
-    /**
-     * 处理预览
-     */
-   handlePreview(index) {
-      this.attachment = this.multiple ? this.selectorValue[index] : this.selectorValue
-      if (supportFileTypes.includes(this.attachment.ext)) {
-        this.getPreview(index)
-      } else {
-        this.$message.closeAll()
-        this.$message({
-          message: `暂不支持该文件类型预览`,
-          type: 'warning'
-        })
-      }
-    },
-    /**
-     * 处理预览
-     */
-    getPreview(index) {
-           //1、获取文件数据 及下载流接口
-            this.optionFileView.url =  BASE_API() + SYSTEM_URL()  + '/file/download?attachmentId=' + this.attachment.id //下载地址
-            this.optionFileView.editUrl =BASE_API() +SYSTEM_URL()+ '/file/editCallback?fileName=' + this.attachment.fileName+'&fileType=' + this.attachment.ext //回调接口url
-            this.optionFileView.title =this.attachment.fileName// 文件名称
-            this.optionFileView.fileType = this.attachment.ext //类型
-            this.optionFileView.data = this.attachment //记录编制的位置， 需要替换。
-            this.optionFileView.data.index = index
-            this.filePreviewVisible = true
-       },
-    /**
-     *  确定
-     */
-    handleSelectorActionEvent(buttonKey, data) {
-      if (this.uploadType === 'default' && this.$utils.isNotEmpty(this.limit) && this.multiple && this.limit < data.length) {
-        this.$message({
-          type: 'warning'
-        })
-        this.$refs['attachmentSelector'].init()
-        return
-      }
-      switch (buttonKey) {
-        case 'confirm':// 确定
-          this.selectorVisible = false
-          if (this.reselect) {
-            if (this.multiple) {
-              this.selectorValue.splice(this.index, 1, data)
-            } else {
-              this.selectorValue = data
+    export default {
+        components: {
+            IbpsFileAttachmentSelector,
+            IbpsUploaderSelectorDialog,
+            FilePreview,
+            fView
+        },
+        inject: {
+            elForm: {
+                default: ''
+            },
+            elFormItem: {
+                default: ''
             }
-          } else {
-            this.selectorValue = data
-          }
-          this.setCacheData()
-          this.handleInput()
-          break
-      }
-    },
-
-    handleInput() {
-      this.$emit('input', this.getStoreValue(this.selectorValue))
-      // 提供一个返回实体，提供调用
-      this.$emit('callback', this.selectorValue)
-    },
+        },
+        props: {
+            value: {
+                type: [String, Number, Array, Object]
+            },
+            mediaType: String,
+            media: String,
+            store: {
+                // 存储类型，json: json字符串，id: 只存储id，array: 存储数组数据，arrayId: 字符串类型。
+                type: String,
+                default: 'id',
+                validator: function (value) {
+                    return (['json', 'id', 'array', 'arrayId', 'bind'].indexOf(value) !== -1)
+                }
+            },
+            storeSeparator: {
+                // 存储值分割符,对应[多选]有效，对于设置字符串类型的分隔符
+                type: String,
+                default: ','
+            },
+            placeholder: {
+                // 输入框占位文本
+                type: String,
+                default: '请选择附件'
+            },
+            multiple: {
+                // 是否多选
+                type: Boolean,
+                default: false
+            },
+            limit: {
+                // 最大允许上传个数
+                type: Number
+            },
+            // 类型,
+            accept: String,
+            fileExt: {
+                type: Array,
+                default: () => []
+            },
+            disabled: {
+                // 禁用
+                type: Boolean,
+                default: false
+            },
+            readonly: {
+                // 只读
+                type: Boolean,
+                default: false
+            },
+            operation_status: {
+                //编辑
+                type: String,
+                default: 'none'
+            },
+            download: {
+                // 允许下载
+                type: Boolean,
+                default: true
+            },
+            preview: {
+                // 允许预览
+                type: Boolean,
+                default: true
+            },
+            fileSize: {
+                // 上传尺寸
+                type: Number
+            },
+            labelKey: {
+                type: String,
+                default: 'fileName'
+            },
+            valueKey: {
+                type: String,
+                default: 'id'
+            },
+            uploadType: {
+                // 上传方式 （ default:直接打开上传，attachment：ibps上传附件打开上传 ）
+                type: String,
+                default: 'attachment'
+            },
+            showExtName: {
+                type: Boolean,
+                default: true
+            }
+        },
+        data() {
+            return {
+                selectorVisible: false,
+                selectorValue: this.multiple ? [] : {},
+                reselect: false, // 重新选择
+                selectorMultiple: this.multiple,
+                index: -1,
+                cacheData: {},
+                attachment: {},
+                filePreviewVisible: false,
+                acceptType: '',
+                showFile: false,
+                file: '',
+                optionFile: {},
+                optionFileView: {}
+            }
+        },
+        computed: {
+            items() {
+                if (this.$utils.isEmpty(this.selectorValue)) return []
+                if (this.multiple) {
+                    return this.selectorValue.map(data => {
+                        return data[this.labelKey] + this.getExtName(data)
+                    })
+                } else {
+                    return [ this.selectorValue[this.labelKey] + this.getExtName(this.selectorValue) ]
+                }
+            },
+            uploadStyle() {
+                const { width, height } = this
+                return {
+                    width: `${width}px`,
+                    height: `${height}px`,
+                    lineHeight: `${height}px`,
+                    display: 'inline'
+                }
+            }
+        },
+        watch: {
+            value(val) {
+                if (this.$utils.isEmpty(this.value)) {
+                    this.selectorValue = []
+                } else if (val) {
+                    this.initData()
+                }
+            },
+            mediaType: {
+                handler: function (val, oldVal) {
+                    if (val === 'custom') {
+                        var arr = this.media.split(',')
+                        const accept = '.' + arr.join(',').replace(/,/g, ',.')
+                        this.acceptType = accept
+                    } else {
+                        this.acceptType = this.accept
+                    }
+                },
+                immediate: true
+            }
+        },
+        mounted() {
+            this.initData()
+        },
+        methods: {
+            // 替换对应的文件 id  this.optionFile.data.index  为点击编辑时记录的下表号
+            updateFile(data) {
+                if (this.multiple) {
+                    this.selectorValue[this.optionFile.data.index].id = data
+                } else {
+                    this.selectorValue.id = data
+                }
+                this.handleInput()
+            },
+            /**
+             * 初始化数据
+             */
+            initData() {
+                const data = this.getArrayValue(this.value)
+                this.selectorValue = this.multiple ? [] : {}
+                if (this.$utils.isEmpty(data)) {
+                    return
+                }
+                data.forEach(v => {
+                    if (this.cacheData[v]) {
+                        this.setSelectorValue(v)
+                    } else {
+                        this.getDataInfo(v)
+                    }
+                })
+            },
+            setCacheData() {
+                if (this.$utils.isEmpty(this.selectorValue)) return
+                const data = this.multiple ? this.selectorValue : [this.selectorValue]
+                data.forEach(v => {
+                    this.cacheData[v[this.valueKey]] = v
+                })
+            },
+            setSelectorValue(v) {
+                if (this.multiple) {
+                    this.selectorValue.push(this.cacheData[v])
+                } else {
+                    this.selectorValue = JSON.parse(JSON.stringify(this.cacheData[v]))
+                }
+            },
+            /**
+             * 获得数组数据
+             */
+            getArrayValue(value, bindId) {
+                if (this.$utils.isEmpty(value)) {
+                    return []
+                }
+                if (this.store === 'json') {
+                    // json
+                    return this.parseJsonData(value)
+                } else if (this.store === 'id') {
+                    // id
+                    // 可能是json数据[之前存储的josn格式]
+                    if (this.$utils.isJSON(value)) {
+                        return this.parseJsonData(value)
+                    } else {
+                        return this.$utils.isString(value) ? value.split(this.storeSeparator) : []
+                    }
+                } else if (this.store === 'bind') {
+                    // 绑定id
+                    if (this.$utils.isEmpty(bindId)) {
+                        return []
+                    }
+                    return bindId.split(this.storeSeparator)
+                } else {
+                    // array
+                    return value.map(d => {
+                        return d[this.valueKey]
+                    })
+                }
+            },
+            parseJsonData(value) {
+                try {
+                    const data = this.$utils.parseData(value)
+                    const result = []
+                    if (Array.isArray(data)) {
+                        data.forEach(d => {
+                            const node = d[this.valueKey]
+                            if (node) result.push(node)
+                        })
+                    } else {
+                        if (this.$utils.isPlainObject(data)) {
+                            result.push(data[this.valueKey])
+                        } else {
+                            const realData = this.$utils.isString(value) ? value.split(this.storeSeparator) : []
+                            realData.forEach(v => { result.push(v) })
+                        }
+                    }
+                    return result
+                } catch (error) {
+                    console.warn(error)
+                    return []
+                }
+            },
+            getStoreValue(value) {
+                const res = []
+                if (this.store === 'json') {
+                    // json
+                    if (this.$utils.isEmpty(value)) {
+                        return ''
+                    }
+                    if (this.multiple) {
+                        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 {
+                        const o = {}
+                        o[this.valueKey] = value[this.valueKey]
+                        o[this.labelKey] = value[this.labelKey]
+                        return JSON.stringify(o)
+                    }
+                } else if (this.store === 'id') {
+                    if (this.$utils.isEmpty(value)) {
+                        return ''
+                    }
+                    if (this.multiple) {
+                        value.forEach(v => {
+                            res.push(v[this.valueKey])
+                        })
+                    } else {
+                        res.push(value[this.valueKey])
+                    }
+                    return res.join(this.storeSeparator)
+                } else if (this.store === 'bind') {
+                    // 绑定id
+                    const res = []
+                    const bindIdValue = []
+                    value.forEach(v => {
+                        bindIdValue.push(v[this.valueKey])
+                        res.push(v[this.labelKey])
+                    })
+                    this.bindIdValue = bindIdValue.join(this.storeSeparator)
 
-    /**
-     * 文件上传
-     */
-    httpRequest(options) {
-      return uploadFile(options.file, {})
-    },
-    handleDelete(file, selectorValue) {
-      this.selectorValue = selectorValue
-    },
-    handleSuccess(response, file, selectorValue) {
-      this.selectorValue = selectorValue.map(item => {
-        item.isActive = false
-        return item
-      })
-    },
-    handleChange(file, selectorValue) {
-      this.selectorValue = selectorValue
-    },
-    // 图片上传数量限制
-    handlePicAmount(files, selectorValue) {
-      if (this.multiple && this.limit) {
-        this.$message.closeAll()
-        this.$message({
-          message: `图片上传上限${this.limit}张`,
-          type: 'warning'
-        })
-      }
-    },
-    // 格式、大小限制
-    beforeUpload(file) {
-      const isType = this.accept ? file.type.includes(this.accept) : true
-      if (!isType) {
-        this.$message.closeAll()
-        this.$message.error(`上传图片的格式为${this.accept}`)
-      }
-      const isLimitSize = this.size ? (file.size / 1024 / 1024 < this.size) : true
-      if (!isLimitSize) {
-        this.$message.closeAll()
-        this.$message.error(`上传图片的大小不能超过 ${this.size}M!`)
-      }
-      return isLimitSize && isType
+                    return res.join(this.storeSeparator)
+                } else {
+                    // 数组 array
+                    return value || []
+                }
+            },
+            /**
+             * 通过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])
+                }
+            },
+            getExtName(data) {
+                if (!data) {
+                    return ''
+                }
+                if (this.showExtName && data['ext']) {
+                    return '.' + data['ext']
+                }
+                return ''
+            },
+            // 事件处理
+            handleActionEvent(action, index, data, type) {
+                this.index = index
+                switch (action) {
+                    case 'select': // 选择
+                        this.selectorVisible = true
+                        this.selectorMultiple = this.multiple
+                        this.reselect = false
+                        this.showFile = false
+                        break
+                    case 'reselect': // 重新选择
+                        this.selectorVisible = true
+                        this.selectorMultiple = false
+                        this.reselect = true
+                        this.showFile = false
+                        break
+                    case 'remove': // 删除
+                        this.handleRemove(index)
+                        this.$refs['attachmentSelector'].init()
+                        break
+                    case 'download': // 下载
+                        this.handleDownload(index)
+                        break
+                    case 'preview': // 预览
+                        this.handlePreview(index)
+                        break
+                    case 'confirm': // 默认上传选择文件
+                        this.handleSelectorActionEvent(action, index)
+                        break
+                    case 'edit': // 编辑
+                        this.handleEdit(index, data, type)
+                        break
+                }
+            },
+            // 处理编辑文件
+            handleEdit(index, data, type) {
+                //1、获取文件数据 及下载流接口
+                this.optionFile.url = BASE_API() + SYSTEM_URL() + '/file/download?attachmentId=' + data.id
+                this.optionFile.editUrl = BASE_API() + SYSTEM_URL() + '/file/editCallback?fileName=' + data.fileName + '&fileType=' + data.ext + '&type=' + type + '&id=' + data.id
+                this.optionFile.title = data.fileName // 文件名称
+                this.optionFile.fileType = data.ext // 类型
+                this.optionFile.data = data //记录编制的位置，需要替换。
+                this.optionFile.data.index = index
+                //2、显示编辑位置，提交后进行保存
+                if (this.showFile) {
+                    //重复打开，进行刷新子组件
+                    this.showFile = false
+                } else {
+                    this.showFile = true
+                    // this.timer = setInterval((num)=>{
+                    //     this. test = true
+                    // },10000)
+                }
+            },
+            /**
+             * 处理删除
+             */
+            handleRemove(index) {
+                if (this.multiple) {
+                    this.selectorValue.splice(index, 1)
+                } else {
+                    this.selectorValue = {} //当前为清空
+                }
+                this.handleInput()
+            },
+            /**
+             * 处理下载
+             */
+            handleDownload(index) {
+                downloadFile(this.multiple ? this.selectorValue[index] : this.selectorValue)
+            },
+            /**
+             * 处理预览
+             */
+            handlePreview(index) {
+                this.attachment = this.multiple ? this.selectorValue[index] : this.selectorValue
+                if (supportFileTypes.includes(this.attachment.ext)) {
+                    this.getPreview(index)
+                } else {
+                    this.$message.closeAll()
+                    this.$message.warning('暂不支持该文件类型预览')
+                }
+            },
+            /**
+             * 处理预览
+             */
+            getPreview(index) {
+                //1、获取文件数据 及下载流接口
+                //下载地址
+                this.optionFileView.url = BASE_API() + SYSTEM_URL() + '/file/download?attachmentId=' + this.attachment.id
+                // 回调接口url
+                this.optionFileView.editUrl = BASE_API() + SYSTEM_URL() + '/file/editCallback?fileName=' + this.attachment.fileName + '&fileType=' + this.attachment.ext
+                this.optionFileView.title = this.attachment.fileName // 文件名称
+                this.optionFileView.fileType = this.attachment.ext // 类型
+                this.optionFileView.data = this.attachment // 记录编制的位置，需要替换。
+                this.optionFileView.data.index = index
+                this.filePreviewVisible = true
+            },
+            /**
+             *  确定
+             */
+            handleSelectorActionEvent(buttonKey, data) {
+                if (this.uploadType === 'default' && this.$utils.isNotEmpty(this.limit) && this.multiple && this.limit < data.length) {
+                    this.$message({
+                        type: 'warning'
+                    })
+                    this.$refs['attachmentSelector'].init()
+                    return
+                }
+                switch (buttonKey) {
+                    case 'confirm': // 确定
+                        this.selectorVisible = false
+                        if (this.reselect) {
+                            if (this.multiple) {
+                                this.selectorValue.splice(this.index, 1, data)
+                            } else {
+                                this.selectorValue = data
+                            }
+                        } else {
+                            this.selectorValue = data
+                        }
+                        this.setCacheData()
+                        this.handleInput()
+                        break
+                }
+            },
+            handleInput() {
+                this.$emit('input', this.getStoreValue(this.selectorValue))
+                // 提供一个返回实体，提供调用
+                this.$emit('callback', this.selectorValue)
+            },
+            /**
+             * 文件上传
+             */
+            httpRequest(options) {
+                return uploadFile(options.file, {})
+            },
+            handleDelete(file, selectorValue) {
+                this.selectorValue = selectorValue
+            },
+            handleSuccess(response, file, selectorValue) {
+                this.selectorValue = selectorValue.map(item => {
+                    item.isActive = false
+                    return item
+                })
+            },
+            handleChange(file, selectorValue) {
+                this.selectorValue = selectorValue
+            },
+            // 图片上传数量限制
+            handlePicAmount(files, selectorValue) {
+                if (this.multiple && this.limit) {
+                    this.$message.closeAll()
+                    this.$message({
+                        message: `图片上传上限${this.limit}张`,
+                        type: 'warning'
+                    })
+                }
+            },
+            // 格式、大小限制
+            beforeUpload(file) {
+                const isType = this.accept ? file.type.includes(this.accept) : true
+                if (!isType) {
+                    this.$message.closeAll()
+                    this.$message.error(`上传图片的格式为${this.accept}`)
+                }
+                const isLimitSize = this.size ? (file.size / 1024 / 1024 < this.size) : true
+                if (!isLimitSize) {
+                    this.$message.closeAll()
+                    this.$message.error(`上传图片的大小不能超过 ${this.size}M!`)
+                }
+                return isLimitSize && isType
+            }
+        }
     }
-  }
-}
 </script>
 <style scoped>
-  .divShow{
-    width: 100%;
-    height: calc(100vh);
-  }
-
+    .divShow {
+        width: 100%;
+        height: calc(100vh);
+    }
 </style>

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

@@ -1,337 +1,339 @@
 <template>
-  <div
-    :style="{
-      height:height
-    }"
-    class="ibps-uplpad"
-  >
-    <div class="header">
-      <div class="btns">
-        <el-upload
-          :file-list="fileList"
-          :on-remove="handleRemove"
-          :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"
-          list-type="picture"
-          name="file"
-        >
-          <el-button slot="trigger" icon="el-icon-upload" type="primary" size="mini">选择要上传的文件</el-button>
-          <el-button
-            type="danger"
-            icon="ibps-icon-remove"
-            class="ibps-ml-5"
-            @click="clearFiles"
-            size="mini"
-          >清空文件</el-button>
-        </el-upload>
-      </div>
-    </div>
-    <div class="uploader">
-      <el-upload
-        ref="upload"
-        :file-list="fileList"
-        :on-remove="handleRemove"
-        :on-success="handleSuccess"
-        :on-error="handleError"
-        :before-upload="beforeUpload"
-        :http-request="httpRequest"
-        :multiple="multiple"
-        :accept="accept"
-        action="https://www.bpmhome.cn/post"
-        name="file"
-        drag
-        list-type="picture-card"
-      >
-        <i class="el-icon-upload" />
-        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
-      </el-upload>
+    <div :style="{height: height}" class="ibps-uplpad">
+        <div class="header">
+            <div class="btns">
+                <el-upload
+                    :file-list="fileList"
+                    :on-remove="handleRemove"
+                    :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"
+                    list-type="picture"
+                    name="file"
+                >
+                    <el-button
+                        slot="trigger"
+                        icon="el-icon-upload"
+                        type="primary"
+                        size="mini"
+                        >选择要上传的文件</el-button
+                    >
+                    <el-button
+                        type="danger"
+                        icon="ibps-icon-remove"
+                        class="ibps-ml-5"
+                        @click="clearFiles"
+                        size="mini"
+                        >清空文件</el-button
+                    >
+                </el-upload>
+            </div>
+        </div>
+        <div class="uploader">
+            <el-upload
+                ref="upload"
+                :file-list="fileList"
+                :on-remove="handleRemove"
+                :on-success="handleSuccess"
+                :on-error="handleError"
+                :before-upload="beforeUpload"
+                :http-request="httpRequest"
+                :multiple="multiple"
+                :accept="accept"
+                action="https://www.bpmhome.cn/post"
+                name="file"
+                drag
+                list-type="picture-card"
+            >
+                <i class="el-icon-upload" />
+                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+            </el-upload>
 
-      <el-dialog :visible.sync="dialogVisible" append-to-body>
-        <img :src="dialogImageUrl" width="100%" alt="">
-      </el-dialog>
+            <el-dialog :visible.sync="dialogVisible" append-to-body>
+                <img :src="dialogImageUrl" width="100%" alt="" />
+            </el-dialog>
+        </div>
     </div>
-  </div>
 </template>
 <script>
-import { uploadFile, remove } from '@/api/platform/file/attachment'
-import { fileTypes, allFileTypes, accept as acceptTypes } from '@/business/platform/file/constants/fileTypes'
-export default {
-  props: {
-    height: String,
-    init: Boolean,
-    limit: Number, // 个数
-    multiple: Boolean,
-    fileSize: Number, // 尺寸
-    accept: String// 类型
-  },
-  data() {
-    return {
-      uploadData: {}, // 可以添加分类、文件等信息
-      fileList: [],
-      dialogVisible: false,
-      targetExt: false,
-      dialogImageUrl: '',
-      fileTypes: fileTypes,
-      allFileTypes: allFileTypes,
-      acceptTypes: acceptTypes
-    }
-  },
-  watch: {
-    init: {
-      handler() {
-        if (this.init) {
-          this.fileList = []
+    import { uploadFile, remove, deleteFile } from '@/api/platform/file/attachment'
+    import { fileTypes, allFileTypes, accept as acceptTypes } from '@/business/platform/file/constants/fileTypes'
+    export default {
+        props: {
+            height: String,
+            init: Boolean,
+            limit: Number, // 个数
+            multiple: Boolean,
+            fileSize: Number, // 尺寸
+            accept: String // 类型
+        },
+        data() {
+            return {
+                uploadData: {}, // 可以添加分类、文件等信息
+                fileList: [],
+                dialogVisible: false,
+                targetExt: false,
+                dialogImageUrl: '',
+                fileTypes: fileTypes,
+                allFileTypes: allFileTypes,
+                acceptTypes: acceptTypes
+            }
+        },
+        watch: {
+            init: {
+                handler() {
+                    if (this.init) {
+                        this.fileList = []
+                    }
+                },
+                immediate: true
+            }
+        },
+        methods: {
+            /**
+             * 文件上传
+             */
+            httpRequest(options) {
+                return uploadFile(options.file, {})
+            },
+            // 做文件校验
+            beforeUpload(file) {
+                if (this.$utils.isNotEmpty(this.limit) && this.limit === 0) {
+                    this.$message({
+                        message: '上传文件个数不能为0，请重新设置',
+                        type: 'warning'
+                    })
+                    return false
+                }
+                if (this.$utils.isNotEmpty(this.fileSize) && file.size > this.fileSize) {
+                    this.$message.closeAll()
+                    this.$message({
+                        message: '上传文件的大小大于' + this.$utils.formatSize(this.fileSize),
+                        type: 'warning'
+                    })
+                    return false
+                }
+                // if (this.$utils.isNotEmpty(this.accept) && this.handleAccpt(file) || this.fileExtType(file)) {
+                if (this.$utils.isNotEmpty(this.accept) && this.accept && !this.fileExtType(file)) {
+                    this.$message.closeAll()
+                    this.$message({
+                        message: '不允许的文件类型',
+                        type: 'warning'
+                    })
+                    return false
+                }
+                // console.log(this.fileList, 'beforeUpload')
+                if (!this.multiple && this.$utils.isNotEmpty(this.fileList)) {
+                    this.$message.closeAll()
+                    this.$message({
+                        message: '附件上传设置为单选，文件上传只能为1个',
+                        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
+            },
+            /**
+             * 文件类型的限制
+             */
+            // handleAccpt (file) {
+            //     const rExt = /\.\w+$/
+            //     let accept = ''
+            //     const arr = []
+            //     const extensions = this.accept.split(',')
+            //     const acceptTypes = this.acceptTypes
+            //     const acceptArr = []
+            //     for (var i in acceptTypes) {
+            //         acceptArr.push(acceptTypes[i])
+            //     }
+            //     const inAcceptTypes = acceptArr.includes(this.accept)
+
+            //     for (let i = 0, len = extensions.length; i < len; i++) {
+            //         const item = extensions[i]
+            //         if (item) {
+            //             if (item.indexOf('/')) {
+            //                 const v = item.split('/')
+            //                 let k = item
+            //                 if (v.length > 0) {
+            //                     k = v[v.length - 1]
+            //                 }
+            //                 arr.push(k)
+            //             } else {
+            //                 arr.push(item)
+            //             }
+            //         }
+            //     }
+            //     if (arr.length) {
+            //         accept = '\\.' + arr.join(',').replace(/,/g, '$|\\.').replace(/\*/g, '.*') + '$'
+            //     }
+            //     accept = new RegExp(accept, 'i')
+            //     // 如果名字中有后缀，才做后缀白名单处理。
+            //     return !file || !file.size || this.accept && rExt.exec(file.name) && !accept.test(file.name) && inAcceptTypes
+            // },
+            handleSuccess(response, file, fileList) {
+                let ext = this.getExtName(file.name)
+                let url = ''
+                if (this.$utils.isEmpty(ext)) {
+                    ext = 'file'
+                }
+                if (['jpg', 'jpeg', 'bmp', 'png'].includes(ext)) {
+                    url = file.url
+                } else {
+                    url = `${this.$baseUrl}images/file/${ext}.png`
+                }
+                file.url = url
+                this.fileList = fileList
+                this.emitCallback(fileList)
+            },
+            // 获取扩展名
+            getExtName(name) {
+                return name ? name.substring(name.lastIndexOf('.') + 1, name.length) : ''
+            },
+            handleError(err, file, fileList) {
+                this.fileList = fileList
+                if (!(err instanceof Error)) {
+                    const data = this.$utils.parseJSON(err.message)
+                    this.$message.closeAll()
+                    this.$message({
+                        message: this.$utils.isNotEmpty(data.message) ? data.message : data.cause,
+                        type: 'error'
+                    })
+                }
+            },
+            handleRemove(file, fileList) {
+                this.fileList = fileList
+                if (file && file.response) {
+                    this.handleRemoteRemove(file.response.data.id, () => {
+                        this.emitCallback(fileList)
+                    })
+                }
+            },
+            emitCallback(fileList) {
+                this.$emit('callback', this.convertFileDataList(fileList, this.multiple))
+            },
+            convertFileDataList(fileList, multiple) {
+                if (this.$utils.isEmpty(fileList)) {
+                    return multiple ? [] : {}
+                }
+                const rtn = []
+                fileList.forEach((file) => {
+                    if (this.$utils.isNotEmpty(file.response)) {
+                        rtn.push(file.response.data)
+                    }
+                })
+                return multiple ? rtn : rtn[rtn.length - 1]
+            },
+            /**
+             * 清空
+             */
+            clearFiles() {
+                const ids = this.$refs.upload.uploadFiles.map((file) => {
+                    // console.log(file.response.data.id)
+                    return file.response.data.id
+                }).join(',')
+
+                if (this.$utils.isEmpty(ids)) {
+                    this.$message.warning('请先上传文件！')
+                    return
+                }
+                this.handleRemoteRemove(ids, () => {
+                    this.$refs.upload.clearFiles()
+                    this.$emit('callback', this.multiple ? [] : {})
+                })
+            },
+            handleRemoteRemove(ids, callback) {
+                // 删除附件文件
+                deleteFile({ attachmentIds: ids }).then(() => {
+                    // 删除附件记录
+                    remove({ attachmentIds: ids }).then(() => {
+                        const _this = this
+                        // this.fileList = []
+                        callback(_this)
+                    }).catch(() => {})
+                })
+            },
+            handlePreview(file) {
+                this.dialogVisible = true
+                //  this.dialogImageUrl = file.url
+            }
         }
-      },
-      immediate: true
     }
-  },
-  methods: {
-    /**
-     * 文件上传
-     */
-    httpRequest(options) {
-      return uploadFile(options.file, {})
-    },
-    // 做文件校验
-    beforeUpload(file) {
-      if (this.$utils.isNotEmpty(this.limit) && this.limit === 0) {
-        this.$message({
-          message: '上传文件个数不能为0，请重新设置',
-          type: 'warning'
-        })
-        return false
-      }
-      if (this.$utils.isNotEmpty(this.fileSize) && file.size > this.fileSize) {
-        this.$message.closeAll()
-        this.$message({
-          message: '上传文件的大小大于' + this.$utils.formatSize(this.fileSize),
-          type: 'warning'
-        })
-        return false
-      }
-      // if (this.$utils.isNotEmpty(this.accept) && this.handleAccpt(file) || this.fileExtType(file)) {
-      if (this.$utils.isNotEmpty(this.accept) && this.accept && !this.fileExtType(file)) {
-        this.$message.closeAll()
-        this.$message({
-          message: '不允许的文件类型',
-          type: 'warning'
-        })
-        return false
-      }
-      // console.log(this.fileList, 'beforeUpload')
-      if (!this.multiple && this.$utils.isNotEmpty(this.fileList)) {
-        this.$message.closeAll()
-        this.$message({
-          message: '附件上传设置为单选，文件上传只能为1个',
-          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
+</script>
+<style lang="scss">
+    .ibps-uplpad {
+        overflow-y: auto;
+        padding: 5px;
+        .header {
+            height: 45px;
+            border-bottom: 1px solid #dadada;
+            margin: 0;
+            padding: 0;
+            line-height: 45px;
+            vertical-align: middle;
+            position: relative;
         }
-      }
-      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)
+        .btns {
+            position: absolute;
+            top: 7px;
+            right: 0;
+            line-height: 30px;
         }
-      }
-      return this.targetExt
-    },
-    /**
-     * 文件类型的限制
-     */
-    // handleAccpt(file) {
-    //   const rExt = /\.\w+$/
-    //   let accept = ''
-    //   const arr = []
-    //   const extensions = this.accept.split(',')
-
-    //   const acceptTypes = this.acceptTypes
-    //   const acceptArr = []
-    //   for (var i in acceptTypes) {
-    //     acceptArr.push(acceptTypes[i])
-    //   }
-    //   const inAcceptTypes = acceptArr.includes(this.accept)
-
-    //   for (let i = 0, len = extensions.length; i < len; i++) {
-    //     const item = extensions[i]
-    //     if (item) {
-    //       if (item.indexOf('/')) {
-    //         const v = item.split('/')
-    //         let k = item
-    //         if (v.length > 0) {
-    //           k = v[v.length - 1]
-    //         }
-    //         arr.push(k)
-    //       } else {
-    //         arr.push(item)
-    //       }
-    //     }
-    //   }
-    //   if (arr.length) {
-    //     accept = '\\.' + arr.join(',')
-    //       .replace(/,/g, '$|\\.')
-    //       .replace(/\*/g, '.*') + '$'
-    //   }
-    //   accept = new RegExp(accept, 'i')
-    //   return !file || !file.size || this.accept &&
-    //   // 如果名字中有后缀，才做后缀白名单处理。
-    //      rExt.exec(file.name) && !accept.test(file.name) && inAcceptTypes
-    // },
-    handleSuccess(response, file, fileList) {
-      let ext = this.getExtName(file.name)
-      let url = ''
-      if (this.$utils.isEmpty(ext)) {
-        ext = 'file'
-      }
-      if (['jpg', 'jpeg', 'bmp', 'png'].includes(ext)) {
-        url = file.url
-      } else {
-        url = `${this.$baseUrl}images/file/${ext}.png`
-      }
-      file.url = url
-      this.fileList = fileList
-      this.emitCallback(fileList)
-    },
-    // 获取扩展名
-    getExtName(name) {
-      return name ? name.substring(name.lastIndexOf('.') + 1, name.length) : ''
-    },
-    handleError(err, file, fileList) {
-      this.fileList = fileList
-      if (!(err instanceof Error)) {
-        const data = this.$utils.parseJSON(err.message)
-        this.$message.closeAll()
-        this.$message({
-          message: this.$utils.isNotEmpty(data.message) ? data.message : data.cause,
-          type: 'error'
-        })
-      }
-    },
-    handleRemove(file, fileList) {
-      this.fileList = fileList
-      if (file && file.response) {
-        this.handleRemoteRemove(file.response.data.id, () => {
-          this.emitCallback(fileList)
-        })
-      }
-    },
-    emitCallback(fileList) {
-      this.$emit('callback', this.convertFileDataList(fileList, this.multiple))
-    },
-    convertFileDataList(fileList, multiple) {
-      if (this.$utils.isEmpty(fileList)) {
-        return multiple ? [] : {}
-      }
-      const rtn = []
-      fileList.forEach((file) => {
-        if (this.$utils.isNotEmpty(file.response)) {
-          rtn.push(file.response.data)
+        .uploader {
+            list-style: none;
+            margin: 0;
+            padding-top: 5px;
+        }
+        .el-upload--picture-card {
+            border: 0;
+        }
+        .el-upload-dragger {
+            width: 148px;
+            height: 148px;
+        }
+        .el-upload-list--picture-card .el-upload-list__item-name {
+            display: block;
+            position: absolute;
+            top: 0px;
+            background: rgba(0, 0, 0, 0.6);
+            color: white;
+            margin: 0;
+            width: 100%;
         }
-      })
-      return multiple ? rtn : rtn[rtn.length - 1]
-    },
-    /**
-     * 清空
-     */
-    clearFiles() {
-      const ids = this.$refs.upload.uploadFiles.map((file) => {
-        // console.log(file.response.data.id)
-        return file.response.data.id
-      }).join(',')
-
-      if (this.$utils.isEmpty(ids)) {
-        this.$message.warning('请先上传文件！')
-        return
-      }
-      this.handleRemoteRemove(ids, () => {
-        this.$refs.upload.clearFiles()
-        this.$emit('callback', this.multiple ? [] : {})
-      })
-    },
-    handleRemoteRemove(ids, callback) {
-      remove({ attachmentIds: ids }).then(response => {
-        const _this = this
-        this.fileList = []
-        callback(_this)
-      }).catch(() => {})
-    },
-    handlePreview(file) {
-      this.dialogVisible = true
-    //  this.dialogImageUrl = file.url
     }
-  }
-}
-</script>
-<style lang="scss" >
-.ibps-uplpad{
-  overflow-y: auto;
-  padding: 5px;
-  .header{
-     height: 45px;
-    border-bottom: 1px solid #dadada;
-    margin: 0;
-    padding: 0;
-    line-height: 45px;
-    vertical-align: middle;
-    position: relative;
-  }
-  .btns{
-    position: absolute;
-    top: 7px;
-    right: 0;
-    line-height: 30px;
-  }
-  .uploader{
-    list-style: none;
-    margin: 0;
-    padding-top: 5px;
-  }
-  .el-upload--picture-card{
-    border: 0;
-  }
-  .el-upload-dragger{
-    width: 148px;
-    height: 148px;
-  }
-  .el-upload-list--picture-card .el-upload-list__item-name {
-    display: block;
-    position: absolute;
-    top: 0px;
-    background: rgba(0, 0, 0, 0.6);
-    color: white;
-    margin: 0;
-    width: 100%;
-  }
-}
-</style>
+</style>

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

@@ -1,202 +1,198 @@
 <template>
-  <div>
-    <image-viewer
-      v-if="fileType==='image'"
-      :z-index="zIndex"
-      :url-list="[url]"
-      :on-close="closeDialog"
-    />
-    <!--  <template v-if="fileType!=='image' && fileType">
-    <el-dialog
-        :visible.sync="dialogVisible"
-        :title="title"
-        fullscreen
-        append-to-body
-        custom-class="ibps-file-preview-dialog"
-        @close="closeDialog">
-      <editor :option="option"  v-if="dialogVisible"/> -->
-      <!--  <pdf-viewer
-          v-if="fileType==='pdf'"
-          ref="viewer"
+    <div>
+        <image-viewer
+            v-if="fileType === 'image'"
+            :z-index="zIndex"
+            :url-list="[url]"
+            :on-close="closeDialog"
         />
+        <!-- <template v-if="fileType !== 'image' && fileType">
+            <el-dialog
+                :visible.sync="dialogVisible"
+                :title="title"
+                fullscreen
+                append-to-body
+                custom-class="ibps-file-preview-dialog"
+                @close="closeDialog"
+            >
+                <editor :option="option" v-if="dialogVisible" />
+                <pdf-viewer v-if="fileType === 'pdf'" ref="viewer" />
 
-        <txt-viewer
-          v-else-if="fileType==='txt'"
-          class="file-type-txt"
-          :src="url"
-        />
-        <div v-else class="lc-fixed-navbar">不支持预览的类型</div>
-      </el-dialog>
-    </template>-->
-  </div>
+                <txt-viewer
+                    v-else-if="fileType === 'txt'"
+                    class="file-type-txt"
+                    :src="url"
+                />
+                <div v-else class="lc-fixed-navbar">不支持预览的类型</div>
+            </el-dialog>
+        </template> -->
+    </div>
 </template>
 <script>
-
-/**
-      * 文件预览
-      * 1、'doc', 'docx', 'ppt', 'pptx', 'xls', 'xlsx'  类型支持
-      * 2、图片支持缩放
-      * 3、音频，语音支持
-      * ==================
-      * 下一版本支持
-      * 1、pdf支持缩放
-      * 2、音频，语音多格式支持
-      * 3、压缩包支持
-      *
-      */
-import ImageViewer from './image'
-// import AudioViewer from './audio' //xianyifan
-// import VideoViewer from './video' //xianyifan
-/* import TxtViewer from './txt' */
-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
-  },
-  props: {
-    visible: {
-      type: Boolean,
-      default: false
-    },
-    title: {
-      type: String
-
-    },
-    fileExt: {
-      type: String
-    },
-    url: {
-      type: String,
-      require: true
-    },
-    optionFile: {
-      type: Object,
-      default: () => {
-        return {}
-      }
-    },
-  },
-  data() {
-    return {
-      dialogVisible: false,
-      fileType: '',
-      zIndex: 2000,
-      /* openedLoaded: false, */
-      fileUrl: '',
-      option: {
-        url: '',
-        isEdit: true,
-        fileType: '',
-        title: '',
-        user: {
-          id: '',
-          name: ''
-        },
-        mode: 'view',
-        editUrl: '',
-        key: ''
-      },
-    }
-  },
- watch: {
-    visible: {
-      handler: function(val, oldVal) {
-        this.dialogVisible = this.visible
-        this.loadViewer()
-      },
-      immediate: true
-    }
-  },
-  beforeDestroy() {
-    this.fileType = ''
-    /* this.openedLoaded = false */
-    this.option = {}
-  },
-  methods: {
     /**
-      * zxh 修复zindex 不是最高的被遮住
-      */
-    fixZIndex() {
-      return PopupManager.getZIndex()
-    },
-   loadViewer() {
-      if (imageType.includes(this.fileExt)) {
-        this.dialogVisible = false
-        this.zIndex = this.fixZIndex()
-        this.fileUrl = this.url
-        this.fileType = 'image'
-      } else {
-        this.openDialog() //先初始化调用参数
-        this.openWindow()//打开外部预览页面
-        this.closeDialog()//关闭当前
-        /* this.fileType = 'FILE' */
-      } /* else if (officeType.includes(this.fileExt) || pdfType.includes(this.fileExt)) {
-        this.fileType = 'pdf'
-      } else if (audioType.includes(this.fileExt)) {
-        this.fileType = 'audio'
-      } else if (videoType.includes(this.fileExt)) {
-        this.fileType = 'video'
-      } else if (txtType.includes(this.fileExt)) {
-        this.fileType = 'txt'
-
-      } */
-    },
-    openWindow(data){
-     let routeData = this.$router.resolve({
-           path: "/fileView",
-           query: this.option
-                });
-        window.open(routeData.href);
-    },
-    openDialog() {
-      this.option.user.id =this.$store.getters.userId
-      this.option.user.name = this.$store.getters.name
-      this.getFile()
-    },
-    getFile() {
-    		this.option.url =  this.optionFile.url //下载地址
-    		this.option.editUrl = this.optionFile.editUrl //回调接口url
-    		this.option.title =this.optionFile.title // 文件名称
-    		this.option.fileType =this.optionFile.fileType //类型
-    },
-/*    openDialog() {
-      if (this.fileType === 'pdf') {
-        this.$nextTick(() => {
-          const timer = setInterval(() => {
-            if (this.openedLoaded) {
-              clearInterval(timer)
-            } else {
-              if (this.$refs.viewer) {
-                this.$refs.viewer.load(this.url)
-                this.openedLoaded = true
-              }
+     * 文件预览
+     * 1、'doc', 'docx', 'ppt', 'pptx', 'xls', 'xlsx'  类型支持
+     * 2、图片支持缩放
+     * 3、音频，语音支持
+     * ==================
+     * 下一版本支持
+     * 1、pdf支持缩放
+     * 2、音频，语音多格式支持
+     * 3、压缩包支持
+     */
+    import ImageViewer from './image'
+    // import AudioViewer from './audio' //xianyifan
+    // import VideoViewer from './video' //xianyifan
+    // import TxtViewer from './txt'
+    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
+        },
+        props: {
+            visible: {
+                type: Boolean,
+                default: false
+            },
+            title: {
+                type: String
+            },
+            fileExt: {
+                type: String
+            },
+            url: {
+                type: String,
+                require: true
+            },
+            optionFile: {
+                type: Object,
+                default: () => {}
             }
-          }, 50)
-        })
-      }
-    }, */
-    closeDialog() {
-      this.fileType = ''
-    /*  this.openedLoaded = false */
-      this.$emit('close', false)
+        },
+        data() {
+            return {
+                dialogVisible: false,
+                fileType: '',
+                zIndex: 2000,
+                // openedLoaded: false,
+                fileUrl: '',
+                option: {
+                    url: '',
+                    isEdit: true,
+                    fileType: '',
+                    title: '',
+                    user: {
+                        id: '',
+                        name: ''
+                    },
+                    mode: 'view',
+                    editUrl: '',
+                    key: ''
+                }
+            }
+        },
+        watch: {
+            visible: {
+                handler: function (val, oldVal) {
+                    this.dialogVisible = this.visible
+                    this.loadViewer()
+                },
+                immediate: true
+            }
+        },
+        beforeDestroy() {
+            this.fileType = ''
+            // this.openedLoaded = false
+            this.option = {}
+        },
+        methods: {
+            /**
+             * zxh 修复zindex 不是最高的被遮住
+             */
+            fixZIndex() {
+                return PopupManager.getZIndex()
+            },
+            loadViewer() {
+                if (imageType.includes(this.fileExt)) {
+                    this.dialogVisible = false
+                    this.zIndex = this.fixZIndex()
+                    this.fileUrl = this.url
+                    this.fileType = 'image'
+                } else {
+                    this.openDialog() // 先初始化调用参数
+                    this.openWindow() // 打开外部预览页面
+                    this.closeDialog() // 关闭当前
+                    // this.fileType = 'FILE'
+                } 
+                // else if (
+                //     officeType.includes(this.fileExt) ||
+                //     pdfType.includes(this.fileExt)
+                // ) {
+                //     this.fileType = 'pdf'
+                // } else if (audioType.includes(this.fileExt)) {
+                //     this.fileType = 'audio'
+                // } else if (videoType.includes(this.fileExt)) {
+                //     this.fileType = 'video'
+                // } else if (txtType.includes(this.fileExt)) {
+                //     this.fileType = 'txt'
+                // }
+            },
+            openWindow(data) {
+                let routeData = this.$router.resolve({
+                    path: '/fileView',
+                    query: this.option
+                })
+                window.open(routeData.href)
+            },
+            openDialog() {
+                this.option.user.id = this.$store.getters.userId
+                this.option.user.name = this.$store.getters.name
+                this.getFile()
+            },
+            getFile() {
+                this.option.url = this.optionFile.url // 下载地址
+                this.option.editUrl = this.optionFile.editUrl // 回调接口url
+                this.option.title = this.optionFile.title // 文件名称
+                this.option.fileType = this.optionFile.fileType // 类型
+            },
+            // openDialog() {
+            //     if (this.fileType === 'pdf') {
+            //         this.$nextTick(() => {
+            //             const timer = setInterval(() => {
+            //                 if (this.openedLoaded) {
+            //                     clearInterval(timer)
+            //                 } else {
+            //                     if (this.$refs.viewer) {
+            //                         this.$refs.viewer.load(this.url)
+            //                         this.openedLoaded = true
+            //                     }
+            //                 }
+            //             }, 50)
+            //         })
+            //     }
+            // },
+            closeDialog() {
+                this.fileType = ''
+                // this.openedLoaded = false
+                this.$emit('close', false)
+            }
+        }
     }
-  }
-}
 </script>
 <style lang="scss">
-  .ibps-file-preview-dialog{
-  .el-dialog__body{
-  padding:0;
-  }
-  .file-type-txt{
-  height:  calc(88vh)!important;
-  }
-  }
+    .ibps-file-preview-dialog {
+        .el-dialog__body {
+            padding: 0;
+        }
+        .file-type-txt {
+            height: calc(88vh) !important;
+        }
+    }
 </style>

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

@@ -1,295 +1,339 @@
 <template>
-  <div class="main-container">
-    <ibps-crud
-      ref="crud"
-      :height="height"
-      :data="listData"
-      :toolbars="listConfig.toolbars"
-      :search-form="listConfig.searchForm"
-      :pk-key="pkKey"
-      :columns="listConfig.columns"
-      :row-handle="listConfig.rowHandle"
-      :pagination="pagination"
-      :loading="loading"
-      @action-event="handleAction"
-      @sort-change="handleSortChange"
-      @pagination-change="handlePaginationChange"
-    />
-    <ibps-uploader
-      :visible="dialogFormVisible"
-      :multiple="true"
-      margin-top="7vh"
-      accept="*"
-      class="attachment-uploader-dialog"
-      @action-event="uploaderAction"
-      @close="visible => dialogFormVisible = visible"
-    />
-    <modify-name
-      :id="editId"
-      :file="file"
-      :visible="modifyNameVisible"
-      @callback="search"
-      @close="visible => modifyNameVisible = visible"
-    />
-    <detail
-      :id="editId"
-      :visible="detailVisible"
-      :data="detailData"
-      @callback="search"
-      @close="visible => detailVisible = visible"
-    />
-     <div  v-if="filePreviewVisible">
-       <file-preview
-          :file="file"
-          :visible="filePreviewVisible"
-          @close="visible => filePreviewVisible = visible"
+    <div class="main-container">
+        <ibps-crud
+            ref="crud"
+            :height="height"
+            :data="listData"
+            :toolbars="listConfig.toolbars"
+            :search-form="listConfig.searchForm"
+            :pk-key="pkKey"
+            :columns="listConfig.columns"
+            :row-handle="listConfig.rowHandle"
+            :pagination="pagination"
+            :loading="loading"
+            @action-event="handleAction"
+            @sort-change="handleSortChange"
+            @pagination-change="handlePaginationChange"
         />
-    </div>
-    <div  v-if="filePreviewVisible2">
-       <file-preview
-          :optionFile="file"
-          :visible="filePreviewVisible"
-          @close="visible => filePreviewVisible = visible"
+        <ibps-uploader
+            :visible="dialogFormVisible"
+            :multiple="true"
+            margin-top="7vh"
+            accept="*"
+            class="attachment-uploader-dialog"
+            @action-event="uploaderAction"
+            @close="visible => dialogFormVisible = visible"
+        />
+        <modify-name
+            :id="editId"
+            :file="file"
+            :visible="modifyNameVisible"
+            @callback="search"
+            @close="visible => modifyNameVisible = visible"
+        />
+        <detail
+            :id="editId"
+            :visible="detailVisible"
+            :data="detailData"
+            @callback="search"
+            @close="visible => detailVisible = visible"
         />
+        <div v-if="filePreviewVisible">
+            <file-preview
+                :file="file"
+                :visible="filePreviewVisible"
+                @close="visible => filePreviewVisible = visible"
+            />
+        </div>
+        <div v-if="filePreviewVisible2">
+            <file-preview
+                :optionFile="file"
+                :visible="filePreviewVisible"
+                @close="visible => filePreviewVisible = visible"
+            />
+        </div>
     </div>
-  </div>
 </template>
 
 <script>
-import { queryPageList, remove } from '@/api/platform/file/attachment'
-import { downloadFile } from '@/business/platform/file/utils'
-import ActionUtils from '@/utils/action'
-import FixHeight from '@/mixins/height'
-import IbpsUploader from '@/business/platform/file/uploader'
-import FilePreview from '@/business/platform/file/file-preview'
-import Detail from './detail'
-import ModifyName from './modify-name'
-import {SYSTEM_URL,BASE_API} from '@/api/baseUrl'
+    import { queryPageList, remove, deleteFile } from '@/api/platform/file/attachment'
+    import { downloadFile } from '@/business/platform/file/utils'
+    import ActionUtils from '@/utils/action'
+    import FixHeight from '@/mixins/height'
+    import IbpsUploader from '@/business/platform/file/uploader'
+    import FilePreview from '@/business/platform/file/file-preview'
+    import Detail from './detail'
+    import ModifyName from './modify-name'
+    import { SYSTEM_URL, BASE_API } from '@/api/baseUrl'
 
-export default {
-  components: {
-    IbpsUploader,
-    FilePreview,
-    Detail,
-    ModifyName
-  },
-  mixins: [FixHeight],
-  data() {
-    const extType = ['txt', 'pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'wps', 'jpg', 'jpeg', 'png', 'gif', 'mp3', 'mp4']
-    return {
-      dialogFormVisible: false, // 弹窗
-      modifyNameVisible: false,
-      detailVisible: false,
-      filePreviewVisible: false,
-      filePreviewVisible2: false,
-      editId: '', // 编辑dialog需要使用
-      pkKey: 'id', // 主键  如果主键不是pk需要传主键
-      detailData: '',
-      file: {fileName:'',url:'',editUrl:'',title:'',fileType:'' },
-      loading: true,
-      height: document.clientHeight,
+    export default {
+        components: {
+            IbpsUploader,
+            FilePreview,
+            Detail,
+            ModifyName
+        },
+        mixins: [FixHeight],
+        data() {
+            const extType = [
+                'txt',
+                'pdf',
+                'doc',
+                'docx',
+                'xls',
+                'xlsx',
+                'ppt',
+                'pptx',
+                'wps',
+                'jpg',
+                'jpeg',
+                'png',
+                'gif',
+                'mp3',
+                'mp4'
+            ]
+            return {
+                dialogFormVisible: false, // 弹窗
+                modifyNameVisible: false,
+                detailVisible: false,
+                filePreviewVisible: false,
+                filePreviewVisible2: false,
+                editId: '', // 编辑dialog需要使用
+                pkKey: 'id', // 主键  如果主键不是pk需要传主键
+                detailData: '',
+                file: {
+                    fileName: '',
+                    url: '',
+                    editUrl: '',
+                    title: '',
+                    fileType: ''
+                },
+                loading: true,
+                height: document.clientHeight,
 
-      listData: [],
-      pagination: {},
-      sorts: {},
-      listConfig: {
-        toolbars: [
-          {
-            key: 'search'
-          },
-          {
-            key: 'upLoad',
-            label: '上传',
-            icon: 'ibps-icon-upload'
-          },
-          {
-            key: 'remove'
-          }
-        ],
-        searchForm: {
-          forms: [
-            { prop: 'Q^file_name_^SL', label: '文件名' },
-            { prop: 'Q^creator_name_^SL', label: '上传者' },
-            { prop: 'Q^ext_^SL', label: '扩展名' },
-            { prop: ['Q^create_time_^DL', 'Q^create_time_^DG'], label: '创建时间', fieldType: 'daterange' }
-          ]
+                listData: [],
+                pagination: {},
+                sorts: {},
+                listConfig: {
+                    toolbars: [
+                        {
+                            key: 'search'
+                        },
+                        {
+                            key: 'upLoad',
+                            label: '上传',
+                            icon: 'ibps-icon-upload'
+                        },
+                        {
+                            key: 'remove'
+                        }
+                    ],
+                    searchForm: {
+                        forms: [
+                            { prop: 'Q^file_name_^SL', label: '文件名' },
+                            { prop: 'Q^creator_name_^SL', label: '上传者' },
+                            { prop: 'Q^ext_^SL', label: '扩展名' },
+                            {
+                                prop: [
+                                    'Q^create_time_^DL',
+                                    'Q^create_time_^DG'
+                                ],
+                                label: '创建时间',
+                                fieldType: 'daterange'
+                            }
+                        ]
+                    },
+                    // 表格字段配置
+                    columns: [
+                        { prop: 'fileName', label: '文件名' },
+                        {
+                            prop: 'createTime',
+                            label: '创建时间',
+                            dateFormat: 'yyyy-MM-dd HH:mm:ss'
+                        },
+                        { prop: 'ext', label: '扩展名' },
+                        {
+                            prop: 'totalBytes',
+                            label: '总字节数',
+                            filter: 'numberFormatter'
+                        },
+                        { prop: 'creatorName', label: '上传者' }
+                    ],
+                    rowHandle: {
+                        actions: [
+                            {
+                                key: 'preview',
+                                label: '预览',
+                                icon: 'ibps-icon-eye',
+                                hidden: (row, index) => {
+                                    if (extType.includes(row.ext)) return false
+                                    return true
+                                }
+                            },
+                            {
+                                key: 'modifyName',
+                                label: '修改文件名',
+                                icon: 'ibps-icon-eraser'
+                            },
+                            {
+                                key: 'detail',
+                                icon: 'ibps-icon-detail'
+                            },
+                            {
+                                key: 'download',
+                                label: '下载',
+                                icon: 'ibps-icon-download'
+                            },
+                            {
+                                key: 'remove'
+                            }
+                        ]
+                    }
+                }
+            }
         },
-        // 表格字段配置
-        columns: [
-          { prop: 'fileName', label: '文件名' },
-          { prop: 'createTime', label: '创建时间', dateFormat: 'yyyy-MM-dd HH:mm:ss' },
-          { prop: 'ext', label: '扩展名' },
-          { prop: 'totalBytes', label: '总字节数', filter: 'numberFormatter' },
-          { prop: 'creatorName', label: '上传者' }
-        ],
-        rowHandle: {
-          actions: [
-            {
-              key: 'preview',
-              label: '预览',
-              icon: 'ibps-icon-eye',
-              hidden: (row, index) => {
-                if (extType.includes(row.ext)) return false
-                return true
-              }
-            }, {
-              key: 'modifyName',
-              label: '修改文件名',
-              icon: 'ibps-icon-eraser'
-            }, {
-              key: 'detail',
-              icon: 'ibps-icon-detail'
-            }, {
-              key: 'download',
-              label: '下载',
-              icon: 'ibps-icon-download'
-            }, {
-              key: 'remove'
+        created() {
+            this.loadData()
+        },
+        methods: {
+            // 加载数据
+            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(
+                    this.$refs['crud'] ? this.$refs['crud'].getSearcFormData() : {},
+                    this.pagination,
+                    this.sorts
+                )
+            },
+            /**
+             * 处理分页事件
+             */
+            handlePaginationChange(page) {
+                ActionUtils.setPagination(this.pagination, page)
+                this.loadData()
+            },
+            /**
+             * 处理排序
+             */
+            handleSortChange(sort) {
+                ActionUtils.setSorts(this.sorts, sort)
+                this.loadData()
+            },
+            /**
+             * 查询
+             */
+            search() {
+                this.loadData()
+            },
+            /**
+             * 处理按钮事件
+             */
+            handleAction(command, position, selection, data) {
+                switch (command) {
+                    case 'search': // 查询
+                        ActionUtils.setFirstPagination(this.pagination)
+                        this.search()
+                        break
+                    case 'upLoad': // 添加
+                        this.handleUpload()
+                        break
+                    case 'modifyName': // 修改文件名
+                        ActionUtils.selectedRecord(selection).then((id) => {
+                            this.handleModify(id)
+                            this.file.fileName = data.fileName
+                            // console.log(this.file.fileName)
+                        })
+                        break
+                    case 'detail': // 明细
+                        ActionUtils.selectedRecord(selection).then((id) => {
+                            this.handleDetail(id)
+                            this.detailData = data
+                        })
+                        break
+                    case 'preview': // 预览
+                        console.log('ext:', data.ext)
+                        if (['png', 'jpeg', 'jpg'].includes(data.ext)) {
+                            this.file = data
+                            this.filePreviewVisible2 = false
+                            this.filePreviewVisible = true
+                            break
+                        }
+                        this.file.url = BASE_API() + SYSTEM_URL() + `/file/download?attachmentId=${data.id}`
+                        this.file.editUrl = BASE_API() + SYSTEM_URL() + `/file/editCallback?fileName=${data.fileName}&fileType=${data.ext}&id=${data.id}`
+                        this.file.title = data.fileName // 文件名称
+                        this.file.fileType = data.ext //类型
+                        this.filePreviewVisible = false
+                        this.filePreviewVisible2 = true
+                        break
+                    case 'download': //  下载
+                        this.handleDownload(data)
+                        break
+                    case 'remove': // 删除
+                        ActionUtils.removeRecord(selection).then((ids) => {
+                            this.handleRemove(ids)
+                        }).catch(() => {})
+                        break
+                    default:
+                        break
+                }
+            },
+            /**
+             * 上传
+             */
+            handleUpload(id = '') {
+                this.editId = id
+                this.dialogFormVisible = true
+            },
+            uploaderAction(data) {
+                this.dialogFormVisible = false
+                this.search()
+            },
+            /**
+             * 修改文件名
+             */
+            handleModify(id = '') {
+                this.editId = id
+                this.modifyNameVisible = true
+            },
+            /**
+             * 处理明细
+             */
+            handleDetail(id = '') {
+                this.editId = id
+                this.detailVisible = true
+            },
+            /**
+             * 处理删除
+             */
+            handleRemove(ids) {
+                deleteFile({ attachmentIds: ids }).then(() => {
+                    remove({ attachmentIds: ids }).then(() => {
+                        ActionUtils.removeSuccessMessage()
+                        this.search()
+                    }).catch(() => {})
+                })
+            },
+            handleDownload(data) {
+                downloadFile(data)
             }
-          ]
         }
-      }
-    }
-  },
-  created() {
-    this.loadData()
-  },
-  methods: {
-    // 加载数据
-    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(
-        this.$refs['crud'] ? this.$refs['crud'].getSearcFormData() : {},
-        this.pagination,
-        this.sorts)
-    },
-    /**
-     * 处理分页事件
-     */
-    handlePaginationChange(page) {
-      ActionUtils.setPagination(this.pagination, page)
-      this.loadData()
-    },
-    /**
-     * 处理排序
-     */
-    handleSortChange(sort) {
-      ActionUtils.setSorts(this.sorts, sort)
-      this.loadData()
-    },
-    /**
-     * 查询
-     */
-    search() {
-      this.loadData()
-    },
-    /**
-     * 处理按钮事件
-     */
-    handleAction(command, position, selection, data) {
-      switch (command) {
-        case 'search':// 查询
-          ActionUtils.setFirstPagination(this.pagination)
-          this.search()
-          break
-        case 'upLoad':// 添加
-          this.handleUpload()
-          break
-        case 'modifyName':// 修改文件名
-          ActionUtils.selectedRecord(selection).then((id) => {
-            this.handleModify(id)
-            this.file.fileName = data.fileName
-            // console.log(this.file.fileName)
-          })
-          break
-        case 'detail':// 明细
-          ActionUtils.selectedRecord(selection).then((id) => {
-            this.handleDetail(id)
-            this.detailData = data
-          })
-          break
-        case 'preview':// 预览
-          console.log("ext:",data.ext)
-          if("png"==data.ext||"jpeg"==data.ext||"jpg"==data.ext){
-            this.file = data
-            this.filePreviewVisible2 = false
-            this.filePreviewVisible = true
-            break
-          }
-          this.file.url = BASE_API() + SYSTEM_URL() + '/file/download?attachmentId=' + data.id
-          this.file.editUrl =  BASE_API()+SYSTEM_URL() + '/file/editCallback?fileName='+data.fileName+'&fileType='+data.ext+'&id='+ data.id
-          this.file.title =data.fileName // 文件名称
-          this.file.fileType = data.ext //类型
-          this.filePreviewVisible = false
-          this.filePreviewVisible2 = true
-          break
-        case 'download'://  下载
-          this.handleDownload(data)
-          break
-        case 'remove':// 删除
-          ActionUtils.removeRecord(selection).then((ids) => {
-            this.handleRemove(ids)
-          }).catch(() => { })
-          break
-        default:
-          break
-      }
-    },
-    /**
-     * 上传
-     */
-    handleUpload(id = '') {
-      this.editId = id
-      this.dialogFormVisible = true
-    },
-    uploaderAction(data) {
-      this.dialogFormVisible = false
-      this.search()
-    },
-    /**
-     * 修改文件名
-     */
-    handleModify(id = '') {
-      this.editId = id
-      this.modifyNameVisible = true
-    },
-    /**
-     * 处理明细
-     */
-    handleDetail(id = '') {
-      this.editId = id
-      this.detailVisible = true
-    },
-    /**
-     * 处理删除
-     */
-    handleRemove(ids) {
-      remove({ attachmentIds: ids }).then(response => {
-        ActionUtils.removeSuccessMessage()
-        this.search()
-      }).catch(() => {})
-    },
-    handleDownload(data) {
-      downloadFile(data)
     }
-  }
-}
 </script>
 <style lang="scss">
-.attachment-uploader-dialog{
-  .el-dialog__body{
-    height:  calc(57vh - 100px) !important;
-  }
-}
+    .attachment-uploader-dialog {
+        .el-dialog__body {
+            height: calc(57vh - 100px) !important;
+        }
+    }
 </style>