epx-frame 3.5.0-shpgy.1

package/src/frame/packages/form-item/File.vue

@@ -0,0 +1,712 @@
+<template>
+  <div class="file">
+    <template v-if="$isMobile">
+        <van-field
+          readonly
+          :label="attriLabel"
+        >
+          <template slot="input">
+            <div class="uploader" v-if="editable">
+              <van-uploader :accept="acceptFile" v-model="fileList" :multiple="dataType==='multiblob'" :before-read="uploadFile" />
+              <el-progress class="uploader-progress" v-if="showUploaderProgress" :width="40" type="circle" :percentage="uploaderProgress"></el-progress>
+            </div>
+             <div v-else>
+              <template v-for="file in fileList">
+                <p v-if="file" :key="file.ID">
+                  <a class="file" href="#" @click.prevent="preview(file, 'mobile')">
+                  {{ file.NAME }}
+                  </a>
+                </p>
+              </template>
+            </div>
+          </template>
+        </van-field>
+    </template>
+    <template v-else>
+      <div v-if="state==='ADD' || state==='EDIT'">
+        <ul class="upload-list">
+          <template v-for="file in fileList">
+            <li class="upload-item" v-if="file" :key="file.ID" >
+              <span>{{ file.NAME }}</span>
+              <i class="el-icon-view view" @click="preview(file)"></i>
+              <i class="el-icon-refresh reupload" @click="reupload(file.ID,file.uid)"></i>
+              <i class="el-icon-delete delete" @click="deleteFile(file)"></i>
+            </li>
+          </template>
+        </ul>
+        <el-upload ref="upload" class="upload" action="#" :accept="acceptFile" :show-file-list="false" :http-request="uploadFile" :multiple="dataType==='multiblob'" :on-change="onChange">
+          <el-button
+            size="small"
+            plain
+            :style="{ display: isMultblob ? '' : 'none' }"
+            ref="uploadBtn"
+          >{{this.$t('Click on the upload')}}</el-button>
+          <el-progress class="uploader-progress_pc" @click.native.stop v-if="showUploaderProgress" :width="40" type="circle" :percentage="uploaderProgress"></el-progress>
+        </el-upload>
+      </div>
+      <div class="file-detail" v-else>
+        <template v-for="file in fileList">
+          <p v-if="file" :key="file.ID">
+            <a class="file" :style="{color: fieldConfigs.color}" :title="file.NAME" href="#" @click.prevent="preview(file)">
+              {{ file.NAME }}
+            </a>
+          </p>
+        </template>
+      </div>
+    </template>
+    <el-dialog
+      v-dialogDrag
+      v-if="isPreview"
+      custom-class="file-preview-dialog"
+      :visible.sync="dialogVisible"
+      :fullscreen="fullscreen"
+      :show-close="false"
+      :append-to-body="true"
+      width="60%"
+    >
+      <div class="dialog-title" slot="title" >
+        <p class="fl">{{previewFile.NAME}}</p>
+        <p class="fr">
+          <i v-if="!isPreviewVideo" class="el-icon-refresh-right" @click="rotate+=90"></i>
+          <i v-if="!isPreviewVideo" class="el-icon-download" @click="download"></i>
+          <i v-if="!isPreviewVideo" class="el-icon-printer" @click="print(file)"></i>
+          <i class="el-icon-full-screen" @click="fullscreen=!fullscreen"></i>
+          <i class="el-icon-close" @click="dialogVisible=false"></i>
+        </p>
+      </div>
+      <video v-if="isPreviewVideo" width="100%" :src="videoUrl" controls></video>
+      <el-card ref="pdf" v-else  class="file-card" v-loading="loading" shadow="never" :body-style="{ padding: '0px' }" >
+        <canvas class="file-canavas" v-for="page in numPages" :ref="'canvas' + page" :key="page"></canvas>
+        <i class="pdf-loading" v-loading="loading"/>
+      </el-card>
+      <!-- <img v-else class="preview-img" :style="{transform: `rotate(${rotate}deg)`}" :src="previewFile.url" /> -->
+    </el-dialog>
+    <el-image-viewer v-else-if="dialogVisible" :url-list="[previewFile.url]" :on-close="()=> dialogVisible=false"></el-image-viewer>
+  </div>
+</template>
+
+<script>
+
+import component from '@/utils/mixins/component'
+export default {
+  name: 'epx-file',
+  mixins: [component],
+  components: {
+    'el-image-viewer': () => import('element-ui/packages/image/src/image-viewer')
+  },
+  model: {
+    prop: 'value',
+    event: 'change'
+  },
+  data () {
+    return {
+      fileList: [],
+      loadFile: false,
+      reuploadId: '',
+      reuploadUid: '',
+      previewFile: '',
+      dialogVisible: false,
+      fullscreen: false,
+      rotate: 0,
+      pdfDoc: null,
+      numPages: 0,
+      loading: true,
+      showUploaderProgress: false,
+      uploaderProgress: 100,
+      officeType: ['application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'application/vnd.ms-excel application/x-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'application/vnd.ms-powerpoint', 'application/vnd.openxmlformats-officedocument.presentationml.presentation']
+    }
+  },
+  inject: {
+    model: {
+      type: Object,
+      default () {
+        return {}
+      }
+    }
+  },
+  props: {
+    fieldConfigs: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    values: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    value: String,
+    valueLabel: String
+  },
+  computed: {
+    data () {
+      return this.model.data || this.values
+    },
+    dataValue () {
+      return this.data[this.attriName]
+    },
+    change () {
+      return this.model.change
+    },
+    dataType () {
+      const { dataType } = this.fieldConfigs
+      return dataType
+    },
+    attriName () {
+      const { attriName } = this.fieldConfigs
+      return attriName
+    },
+    attriLabel () {
+      const { attriLabel } = this.fieldConfigs
+      return attriLabel
+    },
+    state () {
+      const { state = 'DETAIL' } = this.fieldConfigs
+      return state
+    },
+    editable () {
+      const { state = 'DETAIL' } = this.fieldConfigs
+      return state === 'ADD' || state === 'EDIT' || state === 'SEARCH'
+    },
+    isPreview () {
+      let flag = false
+      const pdfSuffix = ['pdf']
+      const wordSuffix = ['doc', 'docx', 'xls', 'xlsx']
+      const videoSuffix = ['mp4', 'webm', 'ogg']
+      const { TYPE = '', NAME = '' } = this.previewFile || {}
+      const splitName = NAME.split('.')
+      const suffix = splitName[splitName.length - 1]
+      if (TYPE.includes('application/pdf') || pdfSuffix.includes(suffix) || this.officeType.includes(TYPE) || wordSuffix.includes(suffix) || videoSuffix.includes(suffix)) {
+        flag = true
+      }
+      return flag
+    },
+    previewFileUrl () {
+      const { ID } = this.previewFile || {}
+      return this.$util.getFileUrl(ID)
+    },
+    isMultblob () {
+      let flag = true
+      const fileLength = this.fieldConfigs.attribute.fileNum * 1 || 1
+      if (fileLength !== 0 && this.fileList.length === fileLength) {
+        flag = false
+      }
+      if (this.fieldConfigs.attribute.fileNum === 0 || this.fieldConfigs.attribute.fileNum === '0') {
+        return true
+      }
+      // const fileLength = this.fieldConfigs.fileNum || 1
+      // if (fileLength !== 0 && this.fileList.length === fileLength) {
+      //   flag = false
+      // }
+      // if (this.fieldConfigs.fileNum === 0) {
+      //   return true
+      // }
+      return flag
+    },
+    acceptFile () {
+      const fileFormat = this.fieldConfigs.attribute.fileFormat
+      if (fileFormat) {
+        return fileFormat.replace(/\|/g, ',')
+      }
+      return '*'
+    }
+  },
+  watch: {
+    dataValue: {
+      handler (v) {
+        this.setFileList(v, this.data[this.attriName + '#'], true)
+      },
+      immediate: true
+    },
+    value: {
+      handler (v) {
+        this.setFileList(this.value, this.valueLabel)
+      },
+      immediate: true
+    },
+    fileList (v) {
+      this.$set(this.data, this.attriName, v.map(item => item.ID).join(','))
+      this.$set(this.data, this.attriName + '#', v.map(item => item.NAME).join(','))
+      this.$emit('change', v.map(item => ({ id: item.ID, name: item.NAME })))
+    }
+  },
+  methods: {
+    setFileList (value = '', label = '', refesh) {
+      if (refesh || (this.fileList.length === 0 && !this.loadFile && (this.state === 'EDIT' || this.state === 'DETAIL' || this.state === 'READONLY'))) {
+        if (!value) {
+          this.fileList = []
+          return
+        }
+        const fileIdArr = value.split(',')
+        const fileNameArr = label.split(',')
+        const fileList = []
+        fileIdArr.forEach((item, index) => {
+          fileList.push({
+            ID: item,
+            NAME: fileNameArr[index] || item,
+            file: { name: fileNameArr[index] || item },
+            url: this.$util.getFileUrl(item)
+          })
+        })
+        this.fileList = fileList
+      }
+    },
+    getFileList (fileIds) {
+      // 获取文件列表
+      if (!fileIds) return
+      this.loadFile = true
+      const fileIdArr = fileIds.split(',')
+      fileIdArr.forEach((fileId, index) => {
+        const file = this.fileList.find(item => item.ID === fileId)
+        if (!file) {
+          this.getFileInfo(fileId)
+            .then(data => {
+              this.$set(this.fileList, index, {
+                url: this.$util.getFileUrl(data.ID),
+                file: { name: data.NAME },
+                ...data,
+                isImage: data.TYPE.includes('image')
+              })
+              this.loadFile = false
+            })
+        }
+      })
+    },
+    getFileInfo (id) {
+      return new Promise((resolve) => {
+        if (!id) {
+          resolve({})
+        } else {
+          this.$http.get({
+            entityId: 'FM_FILE',
+            id,
+            columnFieldNames: 'ID#,NAME#,TYPE#'
+          })
+            .then(data => {
+              if (data && data.data) {
+                resolve(data.data)
+              }
+            })
+            .catch(() => resolve({}))
+        }
+      })
+    },
+    onChange (file) {
+      this.excuteEvent('onChange', file)
+      // if (file) {
+      //   this.$set(this.data, this.attriName, file.raw)
+      //   this.$set(this.data, this.attriName + '#', file.name)
+      //   this.fileUrl = URL.createObjectURL(file.raw)
+      //   this.fileType = file.raw.type
+      // }
+    },
+    uploadFile (props) {
+      const that = this
+      const file = props.file || props
+      const fileFormat = this.fieldConfigs.attribute.fileFormat
+      const fileSize = this.fieldConfigs.attribute.fileSize * 1024 * 1024
+      if (fileSize && fileSize < file.size) {
+        this.$message.error(this.$t('The file you sent is out of scope') + `${this.fieldConfigs.attribute.fileSize}M`)
+        return
+      }
+      if (fileFormat) {
+        const arr = file.name.split('.')
+        const type = arr[arr.length - 1]
+        if (!fileFormat.includes(type.toLowerCase())) {
+          this.$message.error(this.$t('file upload requirements') + `${fileFormat.replaceAll('|', ',')}` + this.$t('type'))
+          return
+        }
+      }
+
+      const { name, type } = file
+      // 传attributeId参数的，就用uploadOfEntity  不需要的，就用upload
+      that.showUploaderProgress = true
+      this.$http.$post({
+        action: 'uploadOfEntity',
+        file,
+        attributeId: this.fieldConfigs.attribute.id
+      }, {
+        requestType: 'formData',
+        onUploadProgress: function (progressEvent) { // 原生获取上传进度的事件
+          if (progressEvent.lengthComputable) {
+            that.uploaderProgress = parseInt(progressEvent.loaded / progressEvent.total * 100)
+            // 属性lengthComputable主要表明总共需要完成的工作量和已经完成的工作是否可以被测量
+            // 如果lengthComputable为false，就获取不到progressEvent.total和progressEvent.loaded
+          }
+        }
+      })
+        .then(data => {
+          if (data.bean) {
+            // this.$set(this.data, this.attriName, data.bean)
+            const fileInfo = {
+              url: this.$util.getFileUrl(data.bean),
+              file: { name },
+              ID: data.bean,
+              NAME: name,
+              TYPE: type,
+              isImage: type.includes('image')
+            }
+            if (this.reuploadId) {
+              // 找到对应的id
+              const index = this.fileList.findIndex(item => item.ID === this.reuploadId)
+              if (index !== -1) {
+                this.$set(this.fileList, index, fileInfo)
+                this.reuploadId = ''
+              }
+            } else {
+              this.fileList.push(fileInfo)
+            }
+            that.showUploaderProgress = false
+          } else {
+            this.$message.error(data.fileCheck.checkResult)
+          }
+          // 设置文件
+        })
+        .catch(() => {
+          that.showUploaderProgress = false
+        })
+    },
+    print () {
+      const pdf = this.$refs.pdf.$el
+      var iframe = document.getElementById('print-iframe')
+      if (!iframe) {
+        iframe = document.createElement('IFRAME')
+        var doc = null
+        iframe.setAttribute('id', 'print-iframe')
+        iframe.setAttribute('style', 'position:absolute;width:0px;height:0px;left:-500px;top:-500px;')
+        document.body.appendChild(iframe)
+      }
+      doc = iframe.contentWindow.document
+      doc.body.innerHTML = ''
+      pdf.getElementsByTagName('canvas').forEach(canvas => {
+        const url = canvas.toDataURL('image/png')
+        const image = document.createElement('img', 1)
+        image.src = url
+        doc.body.appendChild(image)
+      })
+      iframe.contentWindow.focus()
+      iframe.contentWindow.print()
+    },
+    async preview (file, type) {
+      if (file.ID.startsWith('http') || file.ID.startsWith('//')) {
+        window.open(file.ID)
+        return
+      }
+      this.isPreviewVideo = false
+
+      const pdfSuffix = ['pdf']
+      const wordSuffix = ['doc', 'docx', 'xls', 'xlsx']
+      // const that = this
+      if (file.ID) {
+        let { ID, TYPE, NAME } = file
+        if (!file.TYPE) {
+          const fileInfo = await this.getFileInfo(file.ID)
+          const fileIndex = this.fileList.findIndex(item => item.ID === file.ID)
+          file = {
+            url: this.$util.getFileUrl(fileInfo.ID),
+            file: { name: fileInfo.NAME },
+            ...file,
+            ...fileInfo,
+            isImage: fileInfo.TYPE.includes('image')
+          }
+          this.previewFile = file
+          this.fileList.splice(fileIndex, 1, file)
+        }
+        if (!TYPE) TYPE = file.TYPE || file.file.name
+        if (!NAME) NAME = file.NAME || file.file.name
+        const splitName = NAME.split('.')
+        const suffix = splitName[splitName.length - 1]
+        let fileUrl = this.$util.getFileUrl(ID)
+        if (this.officeType.includes(TYPE) || wordSuffix.includes(suffix)) {
+          fileUrl = this.$util.getOfficeFileUrl(ID)
+        }
+        let isPreviewPdf = false
+        // 后缀
+        if (TYPE.includes('application/pdf') || this.officeType.includes(TYPE) || pdfSuffix.includes(suffix) || wordSuffix.includes(suffix)) {
+          isPreviewPdf = true
+        }
+        this.previewRender(TYPE, fileUrl, type, isPreviewPdf, file, suffix)
+      } else {
+        const { TYPE, NAME = '' } = file
+        const fileUrl = file.url
+        let isPreviewPdf = false
+        const splitName = NAME.split('.')
+        const suffix = splitName[splitName.length - 1]
+        if (TYPE.includes('application/pdf') || this.officeType.includes(TYPE) || pdfSuffix.includes(suffix) || wordSuffix.includes(suffix)) {
+          isPreviewPdf = true
+        }
+        this.previewRender(TYPE, fileUrl, type, isPreviewPdf, file)
+      }
+    },
+    previewRender (TYPE, fileUrl, type, isPreviewPdf, file, suffix) {
+      console.log('--render--')
+      const videoSuffix = ['mp4', 'webm', 'ogg']
+      const that = this
+      if (TYPE.includes('image')) {
+        this.previewFile = file
+        if (type === 'mobile') {
+          that.$imagePreview([fileUrl])
+        } else {
+          this.dialogVisible = true
+        }
+      } else if (videoSuffix.includes(suffix)) {
+        this.isPreviewVideo = true
+        this.$http.get({
+          action: 'getVideoUrl',
+          entityId: 'FM_FILE',
+          videoId: file.ID
+        })
+          .then(data => {
+            this.dialogVisible = true
+            this.videoUrl = data.url
+          })
+          .catch(() => {
+            window.open(fileUrl)
+          })
+        console.log('---')
+      } else if (isPreviewPdf) {
+        this.dialogVisible = true
+        this.previewFile = file
+        this.type = 'pdf'
+        import(/* webpackChunkName:"pdfjs" */'pdfjs-dist')
+          .then(pdf => {
+            pdf.disableWorker = true
+            pdf.GlobalWorkerOptions.workerSrc = '/js/pdf.worker.js'
+            this.pdfjs = pdf
+            this.pdfjs.getDocument({
+              url: fileUrl,
+              cMapUrl: '/cmaps/',
+              cMapPacked: true
+            }).promise.then((pdf) => {
+              this.pdfDoc = pdf
+              this.numPages = this.pdfDoc.numPages
+              that.$nextTick(() => {
+                that.loading = false
+                that.renderPage(1)
+              })
+            })
+          })
+      } else {
+        window.open(fileUrl)
+      }
+    },
+    renderPage (num) {
+      this.pdfDoc.getPage(num)
+        .then((page) => {
+          const canvas = this.$refs['canvas' + num][0]
+          // const canvas = document.getElementById('canvas' + num)
+          const ctx = canvas.getContext('2d')
+          var viewport = page.getViewport({ scale: 2 })
+          const viewportElem = document.querySelector('meta[name=viewport]')
+          viewportElem.setAttribute('content', 'width=device-width')
+          canvas.width = viewport.width // 画布大小,默认值是width:300px,height:150px
+          canvas.height = viewport.height
+          canvas.style.width = '100%' // 画布的框架大小
+          const renderContext = {
+            canvasContext: ctx,
+            viewport: viewport
+          }
+          page.render(renderContext)
+          if (this.numPages > num) {
+            this.renderPage(num + 1)
+          }
+        })
+    },
+    reupload (id, uid) {
+      this.reuploadId = id
+      this.reuploadUid = uid
+      this.$refs.uploadBtn.$el.click()
+    },
+    deleteFile (file = {}) {
+      if (file.ID) {
+        const index = this.fileList.findIndex(item => item.ID === file.ID)
+        if (index !== -1) {
+          this.$delete(this.fileList, index)
+          if (this.data[this.attriName + '&multiDeleteFile']) {
+            const fileIds = this.data[this.attriName + '&multiDeleteFile'] + ',' + file.ID
+            this.$set(this.data, this.attriName + '&multiDeleteFile', fileIds)
+          } else {
+            this.$set(this.data, this.attriName + '&multiDeleteFile', file.ID)
+          }
+        }
+      }
+      if (file.uid) {
+        const index = this.fileList.findIndex(item => item.uid === file.uid)
+        if (index !== -1) {
+          this.$delete(this.fileList, index)
+          this.$delete(this.data, this.attriName + '&multiFile' + index)
+        }
+      }
+    },
+    download () {
+      const { ID } = this.previewFile || {}
+      if (ID) window.location.href = this.$util.getFileUrl(ID)
+    },
+    excuteEvent (key, ...args) {
+      const { events = [] } = this.fieldConfigs
+      const { [key]: keyEvents = [] } = events
+      keyEvents.map(event => this.executeCustomJs(event, ...args))
+    }
+  },
+  created () {
+    console.log('----')
+  }
+}
+
+</script>
+
+<style lang="scss" scoped>
+.file {
+  @include font_color_primary;
+}
+.upload-item {
+  font-size: 14px;
+  color: #333;
+  span {
+    margin-right: 16px;
+  }
+  i {
+    @include font_color_primary;
+    padding: 0 8px;
+    border-right: 1px solid #e3e3e3;
+    cursor: pointer;
+  }
+  .delete {
+    color: #ef1f2e;
+    border: none;
+  }
+}
+.upload {
+  display: flex;
+  &::v-deep {
+    .el-upload__tip {
+      margin-left: 12px;
+      margin-top: 0;
+    }
+    .el-button{
+      @include font_color_primary;
+      @include border_color_primary;
+    }
+  }
+}
+.opera {
+  font-size: 14px;
+  color: #333;
+  span {
+    margin-right: 16px;
+  }
+  i {
+    @include font_color_primary;
+    padding: 0 8px;
+    border-right: 1px solid #e3e3e3;
+    cursor: pointer;
+  }
+  .delete {
+    color: #ef1f2e;
+    border: none
+  }
+}
+
+.dialog-title {
+  padding: 0 24px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 54px;
+  border-bottom: 1px solid #e3e3e3;
+  font-size: 16px;
+  p:last-child {
+    color: #666;
+  }
+  i {
+    font-size: 18px;
+    margin-left: 12px;
+    cursor: pointer;
+  }
+}
+.preview-img {
+  transition: all .5s;
+  transform: rotate(0);
+  display: block;
+  margin: 0 auto;
+  max-width: 100%;
+}
+.uploader {
+  position: relative;
+  &::v-deep {
+    .van-uploader__wrapper--disabled {
+      opacity: 1;
+    }
+  }
+}
+.file-card{
+  border: none;
+  width:100%;
+  height: 100%;
+  overflow:auto;
+}
+.file-canavas {
+  // border-bottom: 20px solid #eee;
+}
+.pdf-loading {
+  position: relative;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.uploader-img {
+  position: relative;
+}
+.uploader-progress {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.uploader-progress_pc {
+  position: absolute;
+  bottom: 0;
+  margin-left: 10px;
+}
+.file {
+  width: 100%;
+}
+.file-detail {
+  width: 100%;
+  overflow: hidden;
+  > p {
+    width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+</style>
+<style lang="scss">
+.dialog {
+  height: 70%;
+  .el-dialog__header {
+    padding: 0 ;
+  }
+  .el-dialog__body {
+    height: calc(100% - 50px);
+    box-sizing: border-box;
+    overflow: auto;
+  }
+}
+</style>
+<style lang="scss">
+.el-image-viewer__wrapper {
+  z-index: 3000!important;
+}
+.file-preview-dialog {
+  .el-dialog__body {
+    background: #eee;
+    .el-card {
+      background: none;
+    }
+  }
+}
+</style>