imatrix-ui 2.8.21-dw → 2.8.21

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

@@ -0,0 +1,312 @@
+<!-- 文件上传 -->
+<template>
+  <div v-loading="loading">
+    <div
+      v-if="
+        unifiedEnclosure &&
+          unifiedEnclosure.uuid &&
+          unifiedEnclosure.fileName &&
+          isShowData
+      "
+    >
+      <el-image
+        v-if="isImg"
+        :fit="fit"
+        :preview-src-list="[baseURL + '/common/fs-upload/download?serverPath=' + unifiedEnclosure.uuid + '&showName=' + unifiedEnclosure.fileName ]"
+        :src=" baseURL + '/common/fs-upload/download?serverPath=' + unifiedEnclosure.uuid + '&showName=' + unifiedEnclosure.fileName "
+        @click="bigPicture"
+      />
+      <el-link
+        v-else
+        :href=" baseURL + '/common/fs-upload/download?serverPath=' + unifiedEnclosure.uuid + '&showName=' + unifiedEnclosure.fileName "
+        type="primary"
+      >
+        {{ unifiedEnclosure.fileName }}
+      </el-link>
+      <el-tooltip :content="$t('fsUpload.download')" effect="light">
+        <el-link
+          v-if="isImg"
+          :href="
+            baseURL +
+              '/common/fs-upload/download?serverPath=' +
+              unifiedEnclosure.uuid +
+              '&showName=' +
+              unifiedEnclosure.fileName
+          "
+          type="primary"
+        >
+          <i
+            class="el-icon-download"
+            style="margin-left: 10px;font-size: 30px;"
+          />
+        </el-link>
+      </el-tooltip>
+      <el-tooltip :content="$t('fsUpload.delete')" effect="light">
+        <i
+          v-if="!disabled"
+          class="el-icon-delete"
+          style="color:red;margin-left: 10px;font-size: 30px;"
+          @click="deleteFile"
+        />
+      </el-tooltip>
+      <el-tooltip
+        :content="$t('fsUpload.preview')"
+        style="margin-left: 10px;font-size: 30px;"
+        effect="light"
+      >
+        <i v-if="!isImg" class="el-icon-view" @click="preview" />
+      </el-tooltip>
+    </div>
+    <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"
+    >
+    <see-big-picture
+      v-if="bigPictureVisible"
+      :show-index="showIndex"
+      :unified-enclosures="data"
+      @close="bigPictureVisible = false"
+    />
+  </div>
+</template>
+
+<script>
+import Vue from 'vue'
+import Cookies from 'js-cookie'
+import seeBigPicture from './see-big-picture.vue'
+import { isPlateSys, getSystemFrontendUrl } from '../../../src/utils/common-util.js'
+import { getToken } from '../../../src/utils/auth'
+export default {
+  name: 'FsUploadSingle',
+  components: {
+    seeBigPicture
+  },
+  props: {
+    /**
+     * 系统编码
+     */
+    systemCode: {
+      type: String,
+      default: null
+    },
+    /**
+     * 上传限制的类型
+     */
+    accept: {
+      type: String,
+      default: null
+    },
+    /**
+     * 是否是图片
+     */
+    isImg: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * 针对图片类型
+     */
+    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
+    }
+  },
+  data() {
+    return {
+      unifiedEnclosure: {
+        uuid: '',
+        fileName: ''
+      },
+      loading: '',
+      baseURL: '',
+      showIndex: 0,
+      accepts: '',
+      deleteUuid: '',
+      bigPictureVisible: false
+    }
+  },
+  created() {
+    this.baseURL = Vue.prototype.baseURL
+    if (this.data) {
+      this.unifiedEnclosure = this.data[0]
+    }
+    if (this.accept) {
+      this.accepts = this.accept
+    } else {
+      if (this.isImg) {
+        this.accepts = 'image/*'
+      }
+    }
+  },
+  methods: {
+    bigPicture() {
+      this.bigPictureVisible = true
+    },
+    deleteFile() {
+      this.deleteUuid = this.unifiedEnclosure.uuid
+      this.unifiedEnclosure = null
+      this.deleteSuccess()
+    },
+    deleteSuccess() {
+      if (this.unifiedEnclosure) {
+        const data = [this.unifiedEnclosure]
+        this.$emit('deleteSuccess', this.deleteUuid, data)
+      } else {
+        this.$emit('deleteSuccess', this.deleteUuid)
+      }
+    },
+    acceptService() {
+      if (this.isImg) {
+        return 'image/*'
+      } else {
+        return null
+      }
+    },
+    selectDataFile() {
+      this.$refs.uploadTemplate.click()
+    },
+    onSuccess() {
+      if (this.unifiedEnclosure) {
+        const data = [this.unifiedEnclosure]
+        this.$emit('onSuccess', data, this.deleteUuid)
+      } else {
+        this.$emit('onSuccess', null, this.deleteUuid)
+      }
+    },
+    preview() {
+      if (Vue.prototype.isOffice) {
+        const jwt = Cookies.get('JWT')
+        const map = {
+          fileName:
+            Vue.prototype.officeweb365Url +
+            '/common/fs-upload/download?serverPath=' +
+            this.unifiedEnclosure.uuid +
+            '&showName=' +
+            this.unifiedEnclosure.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 = this.unifiedEnclosure.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=' + this.unifiedEnclosure.uuid +
+            '&showName=' + encodeURI(this.unifiedEnclosure.fileName),
+          showName
+          )
+        } else {
+          let url = Vue.prototype.baseURL +
+            '/common/fs-upload/preview?serverPath=' +
+            this.unifiedEnclosure.uuid +
+            '&showName=' +
+            this.unifiedEnclosure.fileName
+          if (isPlateSys(Vue.prototype.systemCode)) {
+            url = Vue.prototype.baseAPI +
+              '/common/fs-upload/preview?serverPath=' +
+              this.unifiedEnclosure.uuid +
+              '&showName=' +
+              this.unifiedEnclosure.fileName + '&jwt=' + token
+          }
+          window.open(url,
+            showName
+          )
+        }
+      }
+    },
+    upload(params) {
+      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'"
+      if (this.unifiedEnclosure) {
+        this.deleteUuid = this.unifiedEnclosure.uuid
+      }
+      http
+        .post(
+          Vue.prototype.baseURL +
+            '/common/fs-upload/upload-template/' +
+            this.systemCode,
+          param,
+          { headers: { 'Content-Type': 'multipart/form-data' }}
+        )
+        .then(data => {
+          this.unifiedEnclosure = data
+          params.target.value = ''
+          console.log('data', data)
+          console.log(' this.unifiedEnclosure', this.unifiedEnclosure)
+          this.onSuccess()
+          this.loading = false
+          this.$message({
+            showClose: true,
+            type: 'success',
+            message: this.$t('fsUpload.uploadSucceeded')
+          })
+        })
+        .catch(() => {
+          params.target.value = ''
+          this.loading = false
+        })
+    }
+  }
+}
+</script>
+
+<style scoped></style>

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

@@ -0,0 +1,189 @@
+<!-- 文件上传 -->
+<template>
+  <div>
+    <fs-upload-multi
+      v-if="multiple"
+      :system-code="systemCode"
+      :accept="accept"
+      :is-img="isImg"
+      :is-show-list="isShowList"
+      :fit="fit"
+      :disabled="disabled"
+      :is-show-button="isShowButton"
+      :is-show-data="isShowData"
+      :data="data"
+      :img-size="imgSize"
+      :file-size="fileSize"
+      :table-height="tableHeight"
+      @onSuccess="onSuccess"
+      @deleteSuccess="deleteSuccess"
+    />
+    <fs-upload-single
+      v-if="!multiple"
+      :system-code="systemCode"
+      :accept="accept"
+      :is-img="isImg"
+      :fit="fit"
+      :disabled="disabled"
+      :is-show-button="isShowButton"
+      :is-show-data="isShowData"
+      :data="data"
+      @onSuccess="onSuccess"
+      @deleteSuccess="deleteSuccess"
+    />
+  </div>
+</template>
+
+<script>
+import fsUploadMulti from './fs-upload-multi.vue'
+import fsUploadSingle from './fs-upload-single.vue'
+import Vue from 'vue'
+export default {
+  name: 'FsUpload',
+  components: {
+    fsUploadMulti,
+    fsUploadSingle
+  },
+  props: {
+    /**
+     * 系统编码
+     */
+    systemCode: {
+      type: String,
+      default: null
+    },
+    /**
+     * 上传限制的类型
+     */
+    accept: {
+      type: String,
+      default: null
+    },
+    /**
+     * 是否是图片
+     */
+    isImg: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * 是否多选
+     */
+    multiple: {
+      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
+    },
+    isDelete: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      deleteUuids: []
+    }
+  },
+  created() {},
+  methods: {
+    onSuccess(data, deleteUuid) {
+      console.log('data', data)
+      console.log('deleteUuid', deleteUuid)
+
+      if (this.isDelete && deleteUuid) {
+        this.deleteFile(deleteUuid)
+        this.$emit('onSuccess', data)
+      } else {
+        if (deleteUuid) {
+          this.deleteUuids.push(deleteUuid)
+        }
+        this.$emit('onSuccess', data)
+      }
+    },
+    deleteSuccess(deleteUuid, data) {
+      console.log('deleteUuid', deleteUuid)
+      console.log('data', data)
+      if (this.isDelete) {
+        this.deleteFile(deleteUuid)
+        this.$emit('deleteSuccess', data)
+      } else {
+        if (deleteUuid) {
+          this.deleteUuids.push(deleteUuid)
+        }
+        this.$emit('deleteSuccess', data)
+      }
+    },
+    deleteFile(deleteUuid) {
+      const http = this.$http
+      const list = [deleteUuid]
+      http
+        .delete(Vue.prototype.baseURL + '/common/fs-upload', { data: list })
+        .then(data => {})
+    },
+    getdeleteUuIds() {
+      return this.deleteUuids
+    }
+  }
+}
+</script>
+
+<style scoped></style>

package/packages/fs-upload/src/see-big-picture.vue

@@ -0,0 +1,55 @@
+<template>
+  <el-dialog
+    :close-on-click-modal="false"
+    visible
+    append-to-body
+    @close="$emit('close')"
+  >
+    <el-carousel
+      style="width:100%;"
+      height="600px"
+      :autoplay="false"
+      indicator-position="outside"
+      :initial-index="displayIndex"
+    >
+      <el-carousel-item
+        v-for="(item,index) in unifiedEnclosures"
+        :key="index"
+        :label="item.fileName"
+      >
+        <div>
+          <el-image
+            style=" height: 580px;"
+            :preview-src-list="[baseURL+ '/common/fs-upload/download?serverPath=' + item.uuid + '&showName=' + item.fileName]"
+            :src="baseURL+ '/common/fs-upload/download?serverPath=' + item.uuid + '&showName=' + item.fileName"
+          />
+        </div>
+      </el-carousel-item>
+    </el-carousel>
+  </el-dialog>
+</template>
+<script>
+export default {
+  props: {
+    unifiedEnclosures: {
+      type: Array,
+      default: null
+    },
+    showIndex: {
+      type: Number,
+      default: 0
+    }
+  },
+
+  data() {
+    return {
+      displayIndex: 0
+    }
+  },
+  created() {
+    this.displayIndex = this.showIndex
+  },
+  methods: {
+  }
+}
+</script>

package/packages/fs-upload-list/index.js

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