imatrix-ui 2.8.21-dw → 2.8.21

package/packages/fs-preview/src/fs-preview.vue

@@ -0,0 +1,226 @@
+<!-- 文件预览 -->
+<template>
+  <div v-if="label">
+    <div class="list-file" @click="previewMuti()" @dblclick="dblclickEvent">
+      <i class="el-icon-paperclip" />
+      {{ label }}
+      <i class="el-icon-view annex-cell" />
+    </div>
+
+    <el-dialog
+      :append-to-body="true"
+      :show-close="true"
+      :title="$t('imatrixUIPublicModel.previewImage')"
+      :visible.sync="showPreviewSingleImage"
+      @close="$emit('close')"
+    >
+      <span slot="title">{{ $t('imatrixUIPublicModel.previewImage') }}
+        <!-- <i v-if="downloadable" class="el-icon-download" style="padding-left:5px;cursor:pointer;color:#409EFF" @click="downloadFile()" /> -->
+        <!-- <i v-if="deleteable" class="el-icon-delete" style="padding-left:5px;cursor:pointer;color:#F56C6C" @click="deleteFile()" /> -->
+      </span>
+      <el-image v-if="previewImageInfo&&previewImageInfo.isImg" :preview-src-list="[previewImageInfo.src]" :src="previewImageInfo.src" />
+    </el-dialog>
+    <el-dialog
+      :append-to-body="true"
+      :show-close="true"
+      :title="$t('imatrixUIPublicModel.preview')"
+      :visible.sync="showPreviewMulti"
+      width="30%"
+      @close="$emit('close')"
+    >
+      <span slot="title">{{ $t('imatrixUIPublicModel.preview') }}
+        <!-- <i v-if="downloadable" class="el-icon-download" style="padding-left:5px;cursor:pointer;color:#409EFF" @click="downloadFile()" /> -->
+        <!-- <i v-if="deleteable" class="el-icon-delete" style="padding-left:5px;cursor:pointer;color:#F56C6C" @click="deleteFile()" /> -->
+      </span>
+      <el-table
+        :show-header="false"
+        :data="fileList"
+      >
+        <el-table-column
+          prop="showName"
+          width="200"
+        />
+        <el-table-column align="right">
+          <template slot-scope="scope">
+            <el-tooltip :content="$t('imatrixUIPublicModel.preview')" class="item" effect="dark" placement="top">
+              <i class="el-icon-view" style="cursor:pointer;" @click="previewSingle(scope.row)" />
+            </el-tooltip>
+          </template>
+        </el-table-column>
+        <el-table-column>
+          <template slot-scope="scope">
+            <el-tooltip :content="$t('imatrixUIPublicModel.download')" class="item" effect="dark" placement="top">
+              <i class="el-icon-download" style="cursor:pointer;" @click="donwloadFile(scope.$index, fileList)" />
+            </el-tooltip>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import Vue from 'vue'
+import { isPlateSys, getSystemFrontendUrl } from '../../../src/utils/common-util'
+import { isImage, getEntityFieldValue } from '../../../src/utils/util'
+import { packageFile } from '../../super-grid/src/utils'
+import { getToken } from '../../../src/utils/auth'
+export default {
+  name: 'FsPreview',
+  components: {
+  },
+  props: {
+    label: {
+      type: String,
+      default: null
+    },
+    fileSetObj: {
+      type: Object,
+      default: null
+    },
+    isSql: {
+      type: Boolean,
+      default: false
+    },
+    entity: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+      showPreviewSingleImage: false,
+      showPreviewMulti: false,
+      previewImageInfo: {},
+      fileList: []
+    }
+  },
+  created() {
+    // let fileList = []
+    // if (this.column.fileSet && this.column.fileSet !== '' && (this.column.componentType === 'annex' || this.column.componentType === 'multipartUpload')) {
+    //   const fileSetObj = JSON.parse(this.column.fileSet)
+    //   const keyValueParam = this.analysisFileSetObj(fileSetObj, this.isSql)
+    //   if (fileSetObj && fileSetObj.multiple) {
+    //     if (fileSetObj.childAnnexDataTableCode) {
+    //     // const lowerStr = fileSetObj.childAnnexDataTableCode.toLowerCase()
+    //       const fileArr = this.entity[this.column.prop]
+    //       // 子表
+    //       fileList = otherFilesToStandard(fileSetObj, keyValueParam, fileArr, null)
+    //     } else {
+    //       const filesStringData = {
+    //         'showName': getEntityFieldValue(this.entity, keyValueParam.showName),
+    //         'serverPath': getEntityFieldValue(this.entity, keyValueParam.serverPath)
+    //       }
+    //       fileList = otherFilesToStandard(fileSetObj, keyValueParam, null, filesStringData)
+    //     }
+    //   } else {
+    //     const showName = getEntityFieldValue(this.entity, keyValueParam.showName)
+    //     const serverPath = getEntityFieldValue(this.entity, keyValueParam.serverPath)
+    //     fileList.push(packageFile(showName, serverPath))
+    //   }
+    // }
+  },
+  methods: {
+    dblclickEvent() {
+      clearTimeout(this.time)
+    },
+    previewSingle(fileInfo) {
+      fileInfo = packageFile(fileInfo.showName, fileInfo.serverPath)
+      if (isImage(fileInfo.showName)) {
+        this.previewImageInfo = fileInfo
+        this.showPreviewSingleImage = true
+      } else {
+        this.previewDoc(fileInfo)
+      }
+    },
+    previewMuti() {
+      const keyValueParam = this.analysisFileSetObj(this.fileSetObj, this.isSql)
+      const serverPath = getEntityFieldValue(this.entity, keyValueParam.serverPath)
+      if (serverPath) {
+        const uuids = serverPath.split(',')
+        this.$http.post(Vue.prototype.baseURL + '/common/fs-upload/search-file-names', uuids).then(result => {
+          this.fileList = []
+          uuids.forEach(uuid => {
+            this.fileList.push({ showName: result[uuid], serverPath: uuid })
+          })
+          this.showPreviewMulti = true
+        })
+      }
+
+      // var that = this
+      // clearTimeout(that.time)
+      // that.time = setTimeout(() => {
+      // }, 200)
+    },
+    previewDoc(fileInfo) {
+      const token = getToken()
+      let previewUrl = Vue.prototype.baseURL + '/common/fs-upload/preview?jwt=' + token
+      if (isPlateSys(Vue.prototype.systemCode)) {
+        previewUrl = Vue.prototype.baseAPI + '/component/fs-upload/preview?jwt=' + token
+      }
+      const showName = fileInfo.showName
+      if (Vue.prototype.customPreviewUrl) {
+        window.open(getSystemFrontendUrl(Vue.prototype.portalUrl) + '/#/file-service/preview?serverPath=' + fileInfo.serverPath +
+          '&showName=' + encodeURI(showName),
+        fileInfo.showName
+        )
+      } else {
+        window.open(previewUrl + '&showName=' + encodeURI(showName) + '&serverPath=' + fileInfo.serverPath)
+      }
+    },
+    donwloadFile(index, fileList) {
+      const token = getToken()
+      const showName = this.formatFileName(this.fileList[index].showName)
+      if (!this.fileList[index].src) {
+        let url = Vue.prototype.baseURL + '/common/super-form/downloads?jwt=' + token
+        if (isPlateSys(Vue.prototype.systemCode)) {
+          url = Vue.prototype.baseAPI + '/component/super-form/downloads?jwt=' + token
+        }
+        const src = url + '&showName=' + encodeURI(showName) + '&serverPath=' + this.fileList[index].serverPath
+        window.open(src)
+      } else {
+        window.open(this.fileList[index].src)
+      }
+    },
+    analysisFileSetObj(fileSetObj, isSql) {
+      let showName = ''
+      let serverPath = ''
+      if (fileSetObj) {
+        if (fileSetObj.showNameData) {
+          if (isSql) {
+            if (fileSetObj.showNameData.dbName) {
+              showName = fileSetObj.showNameData.dbName
+            }
+          } else {
+            if (fileSetObj.showNameData.name) {
+              showName = fileSetObj.showNameData.name
+            }
+          }
+        }
+        if (fileSetObj.serverNameData) {
+          if (isSql) {
+            if (fileSetObj.serverNameData.dbName) {
+              serverPath = fileSetObj.serverNameData.dbName
+            }
+          } else {
+            if (fileSetObj.serverNameData.name) {
+              serverPath = fileSetObj.serverNameData.name
+            }
+          }
+        }
+      }
+      return {
+        'showName': showName,
+        'serverPath': serverPath
+      }
+    },
+    formatFileName(fileName) {
+      return fileName.replace('#', '~~').replace('?', '~$').replace('&', '$')
+    }
+  }
+}
+</script>
+
+<style scoped></style>

package/packages/fs-upload/index.js

@@ -0,0 +1,6 @@
+import FsUpload from './src/fs-upload.vue'
+FsUpload.install = function (Vue) {
+  Vue.component(FsUpload.name, FsUpload)
+}
+
+export default FsUpload

package/packages/fs-upload/src/fs-upload-multi.vue

@@ -0,0 +1,420 @@
+<!-- 文件上传 -->
+<template>
+  <div v-loading="loading">
+    <el-button
+      v-if="isShowButton && !disabled"
+      size="small"
+      type="primary"
+      icon="el-icon-upload2"
+      @click="selectDataFile"
+    >
+      {{ $t('fsUpload.upload') }}
+    </el-button>
+    <input
+      ref="uploadTemplate"
+      type="file"
+      name="uploadTemplate"
+      style="display:none"
+      :accept="accepts"
+      @change="upload"
+    >
+    <div v-if="unifiedEnclosures && unifiedEnclosures.length > 0 && isShowData">
+      <div v-if="isImg">
+        <el-table
+          :data="unifiedEnclosures"
+          :height="tableHeight"
+          style="width: 100%"
+        >
+          <el-table-column :label="$t('fsUpload.name')" width="240">
+            <template slot-scope="scope">
+              <el-link
+                :href="
+                  baseURL +
+                    '/common/fs-upload/download?serverPath=' +
+                    scope.row.uuid +
+                    '&showName=' +
+                    scope.row.fileName
+                "
+                type="primary"
+              >
+                {{ scope.row.fileName }}
+              </el-link>
+            </template>
+          </el-table-column>
+          <el-table-column :label="$t('fsUpload.picture')" width="240">
+            <template slot-scope="scope">
+              <el-image
+                :src="
+                  baseURL +
+                    '/common/fs-upload/download?serverPath=' +
+                    scope.row.uuid +
+                    '&showName=' +
+                    scope.row.fileName
+                "
+                :preview-src-list="[ baseURL +
+                  '/common/fs-upload/download?serverPath=' +
+                  scope.row.uuid +
+                  '&showName=' +
+                  scope.row.fileName]"
+                @click="bigPicture(scope.$index)"
+              />
+            </template>
+          </el-table-column>
+          <el-table-column
+            v-if="!disabled"
+            :label="$t('fsUpload.operating')"
+            width="120"
+          >
+            <template slot-scope="scope">
+              <el-button
+                size="mini"
+                type="danger"
+                @click="deleteFile(scope.$index)"
+              >
+                {{ $t('fsUpload.delete') }}
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-else-if="isShowList">
+        <el-table
+          :data="unifiedEnclosures"
+          :height="tableHeight"
+          style="width: 100%"
+        >
+          <el-table-column :label="$t('fsUpload.name')" width="240">
+            <template slot-scope="scope">
+              <el-link
+                :href="
+                  baseURL +
+                    '/common/fs-upload/download?serverPath=' +
+                    scope.row.uuid +
+                    '&showName=' +
+                    scope.row.fileName
+                "
+                type="primary"
+              >
+                {{ scope.row.fileName }}
+              </el-link>
+            </template>
+          </el-table-column>
+          <el-table-column width="200" :label="$t('fsUpload.operating')">
+            <template slot-scope="scope">
+              <el-button
+                v-if="!disabled"
+                size="mini"
+                type="danger"
+                @click="deleteFile(scope.$index)"
+              >
+                {{ $t('fsUpload.delete') }}
+              </el-button>
+              <el-button size="mini" @click="preview(scope.row)">
+                {{ $t('fsUpload.preview') }}
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-else>
+        <div v-for="(item, index) in unifiedEnclosures" :key="index">
+          <el-link
+            :href="
+              baseURL +
+                '/common/fs-upload/download?serverPath=' +
+                item.uuid +
+                '&showName=' +
+                item.fileName
+            "
+            type="primary"
+          >
+            {{ item.fileName }}
+          </el-link>
+          <el-tooltip :content="$t('fsUpload.delete')" effect="light">
+            <i
+              v-if="!disabled"
+              class="el-icon-delete"
+              style="color:red;margin-left: 10px"
+              @click="deleteFile(index)"
+            />
+          </el-tooltip>
+          <el-tooltip
+            :content="$t('fsUpload.preview')"
+            style="margin-left: 10px"
+            effect="light"
+          >
+            <i class="el-icon-view" @click="preview(item)" />
+          </el-tooltip>
+        </div>
+      </div>
+    </div>
+    <see-big-picture
+      v-if="bigPictureVisible"
+      :show-index="showIndex"
+      :unified-enclosures="unifiedEnclosures"
+      @close="bigPictureVisible = false"
+    />
+  </div>
+</template>
+
+<script>
+import Vue from 'vue'
+import seeBigPicture from './see-big-picture.vue'
+import { getToken } from '../../../src/utils/auth'
+import { isPlateSys, getSystemFrontendUrl } from '../../../src//utils//common-util.js'
+export default {
+  name: 'FsUploadMulti',
+  components: {
+    seeBigPicture
+  },
+  props: {
+    /**
+     * 系统编码
+     */
+    systemCode: {
+      type: String,
+      default: null
+    },
+    /**
+     * 上传限制的类型
+     */
+    accept: {
+      type: String,
+      default: null
+    },
+    /**
+     * 是否是图片
+     */
+    isImg: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * 针对多选情况
+     * 是否显示拼接字符串
+     * 如果未选择，直接显示表单
+     */
+    isShowList: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * 针对图片类型
+     * 具体参考element-ui中的图片参数fit属性
+     */
+    fit: {
+      type: String,
+      default: null
+    },
+    /**
+     * 禁止编辑
+     */
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * 是否显示按钮
+     */
+    isShowButton: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * 是否显示数据
+     */
+    isShowData: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * 回传数据
+     */
+    data: {
+      type: Array,
+      default: null
+    },
+    /** 图片显示数量 */
+    imgSize: {
+      type: Number,
+      default: 0
+    },
+    /** 设置附件的上传数量 */
+    fileSize: {
+      type: Number,
+      default: 0
+    },
+    /** 设置table高度 */
+    tableHeight: {
+      type: String,
+      default: null
+    }
+  },
+  data() {
+    return {
+      unifiedEnclosures: [],
+      bigPictureVisible: false,
+      baseURL: '',
+      accepts: '',
+      showIndex: 0,
+      loading: ''
+    }
+  },
+  created() {
+    this.baseURL = Vue.prototype.baseURL
+    if (this.data) {
+      this.unifiedEnclosures = this.data
+    }
+    this.judgeImg()
+  },
+  methods: {
+    // 预览图片
+    bigPicture(index) {
+      this.showIndex = index
+      this.bigPictureVisible = true
+    },
+    // 成功后返回数据
+    onSuccess() {
+      const data = this.unifiedEnclosures
+      this.$emit('onSuccess', data)
+    },
+    // 判断是否是图片格式，如果是限制只能上传图片
+    judgeImg() {
+      if (this.isImg) {
+        this.accepts = 'image/*'
+      } else {
+        if (this.accept) {
+          this.accepts = this.accept
+        }
+      }
+    },
+    selectDataFile() {
+      this.$refs.uploadTemplate.click()
+    },
+    deleteFile(index) {
+      this.deleteUuid = this.unifiedEnclosures[index].uuid
+      this.unifiedEnclosures.splice(index, 1)
+      this.deleteSuccess()
+    },
+    deleteSuccess() {
+      const data = this.unifiedEnclosures
+      this.$emit('deleteSuccess', this.deleteUuid, data)
+    },
+    // 预览
+    preview(row) {
+      if (Vue.prototype.isOffice) {
+        const jwt = getToken()
+        const map = {
+          fileName:
+            Vue.prototype.officeweb365Url +
+            '/common/fs-upload/download?serverPath=' +
+            row.uuid +
+            '&showName=' +
+            row.fileName +
+            '&jwt=' +
+            jwt
+        }
+        const http = this.$http
+        http
+          .post(Vue.prototype.baseURL + '/common/fs-upload/des-encrypt', map)
+          .then(data => {
+            window.open(Vue.prototype.isOffice + data)
+          })
+      } else {
+        let showName
+        const split = row.fileName.split('.')
+        if (
+          split[split.length - 1].toLowerCase() === 'xls' ||
+          split[split.length - 1].toLowerCase() === 'xlsx' ||
+          split[split.length - 1].toLowerCase() === 'csv'
+        ) {
+          showName = split[0] + '.html'
+        } else {
+          showName = split[0] + '.pdf'
+        }
+        const token = getToken()
+        if (Vue.prototype.customPreviewUrl) {
+          window.open(getSystemFrontendUrl(Vue.prototype.portalUrl) + '/#/file-service/preview?serverPath=' + row.uuid +
+            '&showName=' + encodeURI(row.fileName),
+          showName
+          )
+        } else {
+          let url = Vue.prototype.baseURL +
+            '/common/fs-upload/preview?serverPath=' +
+            row.uuid +
+            '&showName=' +
+            row.fileName + '&jwt=' + token
+          if (isPlateSys(Vue.prototype.systemCode)) {
+            url = Vue.prototype.baseAPI +
+              '/common/fs-upload/preview?serverPath=' +
+              row.uuid +
+              '&showName=' +
+              row.fileName + '&jwt=' + token
+          }
+          window.open(url,
+            showName
+          )
+        }
+      }
+    },
+    // 上传
+    upload(params) {
+      let message
+      if (this.fileSize) {
+        if (
+          this.fileSize !== 0 &&
+          this.unifiedEnclosures.length >= this.fileSize
+        ) {
+          message =
+            this.$t('fsUpload.theNumberOfUploadsExceedsTheLimitTheLimitIs') +
+            '：' +
+            this.fileSize
+        }
+      }
+
+      if (!message) {
+        this.loading = true
+        const param = new FormData()
+        param.append('file', this.$refs.uploadTemplate.files[0])
+        const http = this.$http
+        http.headers = "'Content-Type': 'multipart/form-data'"
+        http
+          .post(
+            Vue.prototype.baseURL +
+              '/common/fs-upload/upload-template/' +
+              this.systemCode,
+            param,
+            { headers: { 'Content-Type': 'multipart/form-data' }}
+          )
+          .then(data => {
+            this.unifiedEnclosures.push(data)
+            params.target.value = ''
+            console.log('data', data)
+            this.judgeImg()
+            console.log(' this.unifiedEnclosures', this.unifiedEnclosures)
+            this.onSuccess()
+            this.$message({
+              showClose: true,
+              type: 'success',
+              message: this.$t('fsUpload.uploadSucceeded')
+            })
+            this.loading = false
+          })
+          .catch(() => {
+            params.target.value = ''
+            this.loading = false
+          })
+      } else {
+        params.target.value = ''
+        this.$message({
+          showClose: true,
+          type: 'warning',
+          message: message
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style scoped></style>