imatrix-ui 0.2.5-up → 0.2.7-up

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

@@ -1,443 +1,443 @@
-<template>
-  <div v-loading="loading">
-    <el-button
-      v-if="isShowButton && !disabled"
-      size="small"
-      type="primary"
-      :icon="ElIconUpload2"
-      @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 v-slot="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 v-slot="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 v-slot="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 v-slot="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 v-slot="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">
-            <el-icon v-if="!disabled" @click="deleteFile(index)" style="color: red; margin-left: 10px"
-              ><el-icon-delete
-            /></el-icon>
-          </el-tooltip>
-          <el-tooltip
-            :content="$t('fsUpload.preview')"
-            style="margin-left: 10px"
-            effect="light"
-          >
-            <el-icon @click="preview(item)"><el-icon-view /></el-icon>
-          </el-tooltip>
-        </div>
-      </div>
-    </div>
-    <see-big-picture
-      v-if="bigPictureVisible"
-      :show-index="showIndex"
-      :unified-enclosures="unifiedEnclosures"
-      @close="bigPictureVisible = false"
-    />
-  </div>
-</template>
-
-<script>
-import {
-  Delete as ElIconDelete,
-  View as ElIconView,
-	Upload as ElIconUpload2,
-} from '@element-plus/icons-vue'
-import { $on, $off, $once, $emit } from '../../utils/gogocodeTransfer'
-import * as 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 {
-  data() {
-    return {
-      unifiedEnclosures: [],
-      bigPictureVisible: false,
-      baseURL: '',
-      accepts: '',
-      showIndex: 0,
-      loading: '',
-      ElIconUpload2,
-    }
-  },
-  components: {
-    seeBigPicture,
-    ElIconDelete,
-    ElIconView,
-  },
-  name: 'FsUploadMulti',
-  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,
-    },
-  },
-  created() {
-    this.baseURL = window.$vueApp.config.globalProperties.baseURL
-    if (this.data) {
-      this.unifiedEnclosures = this.data
-    }
-    this.judgeImg()
-  },
-  methods: {
-    // 预览图片
-    bigPicture(index) {
-      this.showIndex = index
-      this.bigPictureVisible = true
-    },
-    // 成功后返回数据
-    onSuccess() {
-      const data = this.unifiedEnclosures
-      $emit(this, '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
-      $emit(this, 'deleteSuccess', this.deleteUuid, data)
-    },
-    // 预览
-    preview(row) {
-      if (window.$vueApp.config.globalProperties.isOffice) {
-        const jwt = getToken()
-        const map = {
-          fileName:
-            window.$vueApp.config.globalProperties.officeweb365Url +
-            '/common/fs-upload/download?serverPath=' +
-            row.uuid +
-            '&showName=' +
-            row.fileName +
-            '&jwt=' +
-            jwt,
-        }
-        const http = this.$http
-        http
-          .post(
-            window.$vueApp.config.globalProperties.baseURL +
-              '/common/fs-upload/des-encrypt',
-            map
-          )
-          .then((data) => {
-            window.open(window.$vueApp.config.globalProperties.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 (window.$vueApp.config.globalProperties.customPreviewUrl) {
-          window.open(
-            getSystemFrontendUrl(
-              window.$vueApp.config.globalProperties.portalUrl
-            ) +
-              '/#/file-service/preview?serverPath=' +
-              row.uuid +
-              '&showName=' +
-              encodeURI(row.fileName),
-            showName
-          )
-        } else {
-          let url =
-            window.$vueApp.config.globalProperties.baseURL +
-            '/common/fs-upload/preview?serverPath=' +
-            row.uuid +
-            '&showName=' +
-            row.fileName +
-            '&jwt=' +
-            token
-          if (isPlateSys(window.$vueApp.config.globalProperties.systemCode)) {
-            url =
-              window.$vueApp.config.globalProperties.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(
-            window.$vueApp.config.globalProperties.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,
-        })
-      }
-    },
-  },
-  emits: ['onSuccess', 'deleteSuccess'],
-}
-</script>
+<template>
+  <div v-loading="loading">
+    <el-button
+      v-if="isShowButton && !disabled"
+      size="small"
+      type="primary"
+      :icon="ElIconUpload2"
+      @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 v-slot="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 v-slot="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 v-slot="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 v-slot="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 v-slot="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">
+            <el-icon v-if="!disabled" @click="deleteFile(index)" style="color: red; margin-left: 10px"
+              ><el-icon-delete
+            /></el-icon>
+          </el-tooltip>
+          <el-tooltip
+            :content="$t('fsUpload.preview')"
+            style="margin-left: 10px"
+            effect="light"
+          >
+            <el-icon @click="preview(item)"><el-icon-view /></el-icon>
+          </el-tooltip>
+        </div>
+      </div>
+    </div>
+    <see-big-picture
+      v-if="bigPictureVisible"
+      :show-index="showIndex"
+      :unified-enclosures="unifiedEnclosures"
+      @close="bigPictureVisible = false"
+    />
+  </div>
+</template>
+
+<script>
+import {
+  Delete as ElIconDelete,
+  View as ElIconView,
+	Upload as ElIconUpload2,
+} from '@element-plus/icons-vue'
+import { $on, $off, $once, $emit } from '../../utils/gogocodeTransfer'
+import * as 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 {
+  data() {
+    return {
+      unifiedEnclosures: [],
+      bigPictureVisible: false,
+      baseURL: '',
+      accepts: '',
+      showIndex: 0,
+      loading: '',
+      ElIconUpload2,
+    }
+  },
+  components: {
+    seeBigPicture,
+    ElIconDelete,
+    ElIconView,
+  },
+  name: 'FsUploadMulti',
+  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,
+    },
+  },
+  created() {
+    this.baseURL = window.$vueApp.config.globalProperties.baseURL
+    if (this.data) {
+      this.unifiedEnclosures = this.data
+    }
+    this.judgeImg()
+  },
+  methods: {
+    // 预览图片
+    bigPicture(index) {
+      this.showIndex = index
+      this.bigPictureVisible = true
+    },
+    // 成功后返回数据
+    onSuccess() {
+      const data = this.unifiedEnclosures
+      $emit(this, '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
+      $emit(this, 'deleteSuccess', this.deleteUuid, data)
+    },
+    // 预览
+    preview(row) {
+      if (window.$vueApp.config.globalProperties.isOffice) {
+        const jwt = getToken()
+        const map = {
+          fileName:
+            window.$vueApp.config.globalProperties.officeweb365Url +
+            '/common/fs-upload/download?serverPath=' +
+            row.uuid +
+            '&showName=' +
+            row.fileName +
+            '&jwt=' +
+            jwt,
+        }
+        const http = this.$http
+        http
+          .post(
+            window.$vueApp.config.globalProperties.baseURL +
+              '/common/fs-upload/des-encrypt',
+            map
+          )
+          .then((data) => {
+            window.open(window.$vueApp.config.globalProperties.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 (window.$vueApp.config.globalProperties.customPreviewUrl) {
+          window.open(
+            getSystemFrontendUrl(
+              window.$vueApp.config.globalProperties.portalUrl
+            ) +
+              '/#/file-service/preview?serverPath=' +
+              row.uuid +
+              '&showName=' +
+              encodeURI(row.fileName),
+            showName
+          )
+        } else {
+          let url =
+            window.$vueApp.config.globalProperties.baseURL +
+            '/common/fs-upload/preview?serverPath=' +
+            row.uuid +
+            '&showName=' +
+            row.fileName +
+            '&jwt=' +
+            token
+          if (isPlateSys(window.$vueApp.config.globalProperties.systemCode)) {
+            url =
+              window.$vueApp.config.globalProperties.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(
+            window.$vueApp.config.globalProperties.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,
+        })
+      }
+    },
+  },
+  emits: ['onSuccess', 'deleteSuccess'],
+}
+</script>