imatrix-ui 0.2.6-up → 0.2.7-up

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

@@ -1,372 +1,372 @@
-<template>
-  <div>
-    <template v-if="!disabled">
-      <el-input
-        ref="item"
-        :readonly="true"
-        :disabled="disabled"
-        :model-value="value"
-        :placeholder="$t('imatrixUIMessage.fileUpload')"
-      >
-        <template v-slot:append>
-          <el-button
-            v-if="!disabled"
-            size="mini"
-            :icon="ElIconUpload2"
-            @click="openAnnexUpload"
-          />
-	        <el-button size="mini" :icon="ElIconZoomIn" @click="preview" />
-        </template>
-      </el-input>
-
-      <el-dialog
-        :title="$t('imatrixUIMessage.tips')"
-        v-model="annexUploadFlag"
-        :append-to-body="true"
-        :show-close="true"
-        width="30%"
-      >
-        <el-upload
-          v-if="annexUploadFlag"
-          :action="defaultAction"
-          :accept="fileSetObj.accept ? fileSetObj.accept : null"
-          :on-success="uploadOnSuccess"
-          :headers="headers"
-          :before-upload="handleBeforeUpload"
-          :with-credentials="true"
-          name="file"
-        >
-          <el-button>{{ $t('imatrixUIMessage.upload') }}</el-button>
-        </el-upload>
-      </el-dialog>
-      <el-dialog
-        :append-to-body="true"
-        :show-close="true"
-        :title="$t('imatrixUIPublicModel.previewImage')"
-        v-model="showPreviewSingleImage"
-        @close="$emit('close')"
-      >
-        <template v-slot:title>
-          <span
-            >{{ $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>
-        </template>
-        <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')"
-        v-model="showPreviewMulti"
-        width="30%"
-        @close="$emit('close')"
-      >
-        <template v-slot:title>
-          <span
-            >{{ $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>
-        </template>
-        <el-table :show-header="false" :data="showFileList">
-          <el-table-column width="300" prop="showName" />
-          <el-table-column align="right">
-            <template v-slot="scope">
-              <el-tooltip
-                :content="$t('imatrixUIPublicModel.preview')"
-                class="item"
-                effect="dark"
-                placement="top"
-              >
-                <el-icon style="cursor: pointer" @click="previewSingle(scope.row)"><el-icon-view /></el-icon>
-              </el-tooltip>
-            </template>
-          </el-table-column>
-          <el-table-column v-if="!disabled">
-            <template v-slot="scope">
-              <el-tooltip
-                :content="$t('imatrixUIPublicModel.delete')"
-                class="item"
-                effect="dark"
-                placement="top"
-              >
-                <el-icon style="cursor: pointer" @click="deleteRow(scope.$index)"><el-icon-delete /></el-icon>
-              </el-tooltip>
-            </template>
-          </el-table-column>
-        </el-table>
-      </el-dialog>
-    </template>
-    <template v-else>
-      <fs-preview
-        :label="value"
-        :entity="row"
-        :is-sql="isSql"
-        :file-set-obj="fileSetObj"
-      />
-    </template>
-  </div>
-</template>
-
-<script>
-import {
-  View as ElIconView,
-  Delete as ElIconDelete,
-	Upload as ElIconUpload2,
-	ZoomIn as ElIconZoomIn,
-} from '@element-plus/icons-vue'
-import { $on, $off, $once, $emit } from '../../utils/gogocodeTransfer'
-
-import { getToken } from '../../../src/utils/auth'
-import { isImage } from '../../../src/utils/util'
-import {
-  isPlateSys,
-  getSystemFrontendUrl,
-} from '../../../src/utils/common-util'
-import * as Vue from 'vue'
-import FsPreview from '../../fs-preview/src/fs-preview.vue'
-import { packageFile } from '../../super-grid/src/utils'
-export default {
-  data() {
-    const headers = { Authorization: getToken() }
-    let defaultAction =
-      window.$vueApp.config.globalProperties.baseURL + '/common/fs-upload'
-    if (isPlateSys(window.$vueApp.config.globalProperties.systemCode)) {
-      defaultAction =
-        window.$vueApp.config.globalProperties.baseAPI +
-        '/component/super-form/uploads'
-    }
-    return {
-      deleteUuids: [],
-      headers,
-      defaultAction,
-      annexUploadFlag: false,
-      showPreviewSingleImage: false,
-      showPreviewMulti: false,
-      lastFileName: null,
-      previewImageInfo: {},
-      showFileList: this.fileList,
-      ElIconUpload2,
-      ElIconZoomIn,
-    }
-  },
-  components: {
-    FsPreview,
-    ElIconView,
-    ElIconDelete,
-  },
-  name: 'FsUploadList',
-  props: {
-    value: {
-      type: String,
-      default: null,
-    },
-    // name  ','分隔的名称 和serverPath
-    fileInfo: {
-      type: Object,
-      default: () => {
-        return {
-          name: null,
-          serverPath: null,
-        }
-      },
-    },
-    fileSetObj: {
-      type: Object,
-      default: () => {
-        return { limitFileSize: 30, multiple: false, accept: null }
-      },
-    },
-    customViewUrl: {
-      type: Boolean,
-      default: false,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    uploadAble: {
-      type: Boolean,
-      default: true,
-    },
-    deletaAble: {
-      type: Boolean,
-      default: true,
-    },
-    // 文件详细消息
-    fileList: {
-      type: Array,
-      default: () => {
-        return []
-      },
-    },
-    row: {
-      type: Object,
-      default: () => {
-        return {}
-      },
-    },
-    isSql: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  created() {},
-  mounted() {},
-  methods: {
-    openAnnexUpload() {
-      this.annexUploadFlag = true
-    },
-    handleBeforeUpload(file) {
-      let limitFileSize = this.fileSetObj.limitFileSize
-      if (limitFileSize === undefined) {
-        // 默认是30M
-        limitFileSize = 30
-      }
-      if (file.size > limitFileSize * 1024 * 1024) {
-        // 超过最大限制
-        this.$message({
-          type: 'warning',
-          message: this.$t('imatrixUIMessage.exceedFileSize', {
-            fileSize: limitFileSize,
-          }),
-          showClose: true,
-        })
-        // 返回false停止上传
-        return false
-      }
-    },
-    // 上传成功
-    uploadOnSuccess(response, file) {
-      if (response) {
-        $emit(this, 'upload-success', {
-          showName: response.name,
-          serverPath: response.serverPath,
-        })
-        if (this.fileSetObj.multiple) {
-          if (this.fileInfo.showName) {
-            this.fileInfo.showName =
-              this.fileInfo.showName + ',' + response.name
-            this.fileInfo.serverPath =
-              this.fileInfo.serverPath + ',' + response.serverPath
-          } else {
-            this.fileInfo.showName = response.name
-            this.fileInfo.serverPath = response.serverPath
-          }
-        } else {
-          this.fileInfo.showName = response.name
-          this.fileInfo.serverPath = response.serverPath
-        }
-      }
-      this.annexUploadFlag = false
-    },
-    preview() {
-      this.fileList.length = 0
-      const uuids = this.fileInfo.serverPath.split(',')
-      this.$http
-        .post(
-          window.$vueApp.config.globalProperties.baseURL +
-            '/common/fs-upload/search-file-names',
-          uuids
-        )
-        .then((result) => {
-          uuids.forEach((uuid) => {
-            this.fileList.push({ showName: result[uuid], serverPath: uuid })
-          })
-          this.showFileList = this.fileList
-          this.showPreviewMulti = true
-        })
-    },
-    previewSingle(fileInfo) {
-      fileInfo = packageFile(fileInfo.showName, fileInfo.serverPath)
-      if (isImage(fileInfo.showName)) {
-        this.previewImageInfo = fileInfo
-        this.showPreviewSingleImage = true
-      } else {
-        this.previewDoc(fileInfo)
-      }
-    },
-    previewDoc(file) {
-      const showName = file.showName
-        .replace('#', '~~')
-        .replace('?', '~$')
-        .replace('&', '$')
-      const token = getToken()
-      let previewUrl =
-        window.$vueApp.config.globalProperties.baseURL +
-        '/common/fs-upload/preview?jwt=' +
-        token
-      if (isPlateSys(window.$vueApp.config.globalProperties.systemCode)) {
-        previewUrl =
-          window.$vueApp.config.globalProperties.baseAPI +
-          '/component/fs-upload/preview?jwt=' +
-          token
-      }
-      if (window.$vueApp.config.globalProperties.customPreviewUrl) {
-        window.open(
-          getSystemFrontendUrl(
-            window.$vueApp.config.globalProperties.portalUrl
-          ) +
-            '/#/file-service/preview?serverPath=' +
-            file.serverPath +
-            '&showName=' +
-            encodeURI(showName),
-          file.showName
-        )
-      } else {
-        window.open(
-          previewUrl +
-            '&showName=' +
-            encodeURI(showName) +
-            '&serverPath=' +
-            file.serverPath
-        )
-      }
-    },
-    deleteRow(index) {
-      const deleteFile = this.showFileList[index]
-      // this.fileList.splice(index, 1)
-      const nameArr = []
-      const pathArr = []
-      for (let i = 0; i < this.showFileList.length; i++) {
-        if (i !== index) {
-          nameArr.push(this.showFileList[i].showName)
-          pathArr.push(this.showFileList[i].serverPath)
-        }
-      }
-      if (nameArr.length === 0) {
-        this.fileInfo.showName = null
-        this.fileInfo.serverPath = null
-        this.showFileList = []
-        $emit(this, 'delete-success', { deleteFile: deleteFile, all: [] })
-        $emit(this, 'delete', [], index)
-      } else {
-        this.fileInfo.showName = nameArr.join(',')
-        this.fileInfo.serverPath = pathArr.join(',')
-        $emit(this, 'delete-success', {
-          deleteFile: deleteFile,
-          all: this.showFileList,
-        })
-        $emit(this, 'delete', this.showFileList, index)
-      }
-    },
-  },
-  emits: [
-    'close',
-    'upload-success',
-    'delete-success',
-    'delete',
-    'update:value',
-    ,
-    'close',
-    ,
-    'update:value',
-  ],
-}
-</script>
+<template>
+  <div>
+    <template v-if="!disabled">
+      <el-input
+        ref="item"
+        :readonly="true"
+        :disabled="disabled"
+        :model-value="value"
+        :placeholder="$t('imatrixUIMessage.fileUpload')"
+      >
+        <template v-slot:append>
+          <el-button
+            v-if="!disabled"
+            size="mini"
+            :icon="ElIconUpload2"
+            @click="openAnnexUpload"
+          />
+	        <el-button size="mini" :icon="ElIconZoomIn" @click="preview" />
+        </template>
+      </el-input>
+
+      <el-dialog
+        :title="$t('imatrixUIMessage.tips')"
+        v-model="annexUploadFlag"
+        :append-to-body="true"
+        :show-close="true"
+        width="30%"
+      >
+        <el-upload
+          v-if="annexUploadFlag"
+          :action="defaultAction"
+          :accept="fileSetObj.accept ? fileSetObj.accept : null"
+          :on-success="uploadOnSuccess"
+          :headers="headers"
+          :before-upload="handleBeforeUpload"
+          :with-credentials="true"
+          name="file"
+        >
+          <el-button>{{ $t('imatrixUIMessage.upload') }}</el-button>
+        </el-upload>
+      </el-dialog>
+      <el-dialog
+        :append-to-body="true"
+        :show-close="true"
+        :title="$t('imatrixUIPublicModel.previewImage')"
+        v-model="showPreviewSingleImage"
+        @close="$emit('close')"
+      >
+        <template v-slot:title>
+          <span
+            >{{ $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>
+        </template>
+        <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')"
+        v-model="showPreviewMulti"
+        width="30%"
+        @close="$emit('close')"
+      >
+        <template v-slot:title>
+          <span
+            >{{ $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>
+        </template>
+        <el-table :show-header="false" :data="showFileList">
+          <el-table-column width="300" prop="showName" />
+          <el-table-column align="right">
+            <template v-slot="scope">
+              <el-tooltip
+                :content="$t('imatrixUIPublicModel.preview')"
+                class="item"
+                effect="dark"
+                placement="top"
+              >
+                <el-icon style="cursor: pointer" @click="previewSingle(scope.row)"><el-icon-view /></el-icon>
+              </el-tooltip>
+            </template>
+          </el-table-column>
+          <el-table-column v-if="!disabled">
+            <template v-slot="scope">
+              <el-tooltip
+                :content="$t('imatrixUIPublicModel.delete')"
+                class="item"
+                effect="dark"
+                placement="top"
+              >
+                <el-icon style="cursor: pointer" @click="deleteRow(scope.$index)"><el-icon-delete /></el-icon>
+              </el-tooltip>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-dialog>
+    </template>
+    <template v-else>
+      <fs-preview
+        :label="value"
+        :entity="row"
+        :is-sql="isSql"
+        :file-set-obj="fileSetObj"
+      />
+    </template>
+  </div>
+</template>
+
+<script>
+import {
+  View as ElIconView,
+  Delete as ElIconDelete,
+	Upload as ElIconUpload2,
+	ZoomIn as ElIconZoomIn,
+} from '@element-plus/icons-vue'
+import { $on, $off, $once, $emit } from '../../utils/gogocodeTransfer'
+
+import { getToken } from '../../../src/utils/auth'
+import { isImage } from '../../../src/utils/util'
+import {
+  isPlateSys,
+  getSystemFrontendUrl,
+} from '../../../src/utils/common-util'
+import * as Vue from 'vue'
+import FsPreview from '../../fs-preview/src/fs-preview.vue'
+import { packageFile } from '../../super-grid/src/utils'
+export default {
+  data() {
+    const headers = { Authorization: getToken() }
+    let defaultAction =
+      window.$vueApp.config.globalProperties.baseURL + '/common/fs-upload'
+    if (isPlateSys(window.$vueApp.config.globalProperties.systemCode)) {
+      defaultAction =
+        window.$vueApp.config.globalProperties.baseAPI +
+        '/component/super-form/uploads'
+    }
+    return {
+      deleteUuids: [],
+      headers,
+      defaultAction,
+      annexUploadFlag: false,
+      showPreviewSingleImage: false,
+      showPreviewMulti: false,
+      lastFileName: null,
+      previewImageInfo: {},
+      showFileList: this.fileList,
+      ElIconUpload2,
+      ElIconZoomIn,
+    }
+  },
+  components: {
+    FsPreview,
+    ElIconView,
+    ElIconDelete,
+  },
+  name: 'FsUploadList',
+  props: {
+    value: {
+      type: String,
+      default: null,
+    },
+    // name  ','分隔的名称 和serverPath
+    fileInfo: {
+      type: Object,
+      default: () => {
+        return {
+          name: null,
+          serverPath: null,
+        }
+      },
+    },
+    fileSetObj: {
+      type: Object,
+      default: () => {
+        return { limitFileSize: 30, multiple: false, accept: null }
+      },
+    },
+    customViewUrl: {
+      type: Boolean,
+      default: false,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    uploadAble: {
+      type: Boolean,
+      default: true,
+    },
+    deletaAble: {
+      type: Boolean,
+      default: true,
+    },
+    // 文件详细消息
+    fileList: {
+      type: Array,
+      default: () => {
+        return []
+      },
+    },
+    row: {
+      type: Object,
+      default: () => {
+        return {}
+      },
+    },
+    isSql: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  created() {},
+  mounted() {},
+  methods: {
+    openAnnexUpload() {
+      this.annexUploadFlag = true
+    },
+    handleBeforeUpload(file) {
+      let limitFileSize = this.fileSetObj.limitFileSize
+      if (limitFileSize === undefined) {
+        // 默认是30M
+        limitFileSize = 30
+      }
+      if (file.size > limitFileSize * 1024 * 1024) {
+        // 超过最大限制
+        this.$message({
+          type: 'warning',
+          message: this.$t('imatrixUIMessage.exceedFileSize', {
+            fileSize: limitFileSize,
+          }),
+          showClose: true,
+        })
+        // 返回false停止上传
+        return false
+      }
+    },
+    // 上传成功
+    uploadOnSuccess(response, file) {
+      if (response) {
+        $emit(this, 'upload-success', {
+          showName: response.name,
+          serverPath: response.serverPath,
+        })
+        if (this.fileSetObj.multiple) {
+          if (this.fileInfo.showName) {
+            this.fileInfo.showName =
+              this.fileInfo.showName + ',' + response.name
+            this.fileInfo.serverPath =
+              this.fileInfo.serverPath + ',' + response.serverPath
+          } else {
+            this.fileInfo.showName = response.name
+            this.fileInfo.serverPath = response.serverPath
+          }
+        } else {
+          this.fileInfo.showName = response.name
+          this.fileInfo.serverPath = response.serverPath
+        }
+      }
+      this.annexUploadFlag = false
+    },
+    preview() {
+      this.fileList.length = 0
+      const uuids = this.fileInfo.serverPath.split(',')
+      this.$http
+        .post(
+          window.$vueApp.config.globalProperties.baseURL +
+            '/common/fs-upload/search-file-names',
+          uuids
+        )
+        .then((result) => {
+          uuids.forEach((uuid) => {
+            this.fileList.push({ showName: result[uuid], serverPath: uuid })
+          })
+          this.showFileList = this.fileList
+          this.showPreviewMulti = true
+        })
+    },
+    previewSingle(fileInfo) {
+      fileInfo = packageFile(fileInfo.showName, fileInfo.serverPath)
+      if (isImage(fileInfo.showName)) {
+        this.previewImageInfo = fileInfo
+        this.showPreviewSingleImage = true
+      } else {
+        this.previewDoc(fileInfo)
+      }
+    },
+    previewDoc(file) {
+      const showName = file.showName
+        .replace('#', '~~')
+        .replace('?', '~$')
+        .replace('&', '$')
+      const token = getToken()
+      let previewUrl =
+        window.$vueApp.config.globalProperties.baseURL +
+        '/common/fs-upload/preview?jwt=' +
+        token
+      if (isPlateSys(window.$vueApp.config.globalProperties.systemCode)) {
+        previewUrl =
+          window.$vueApp.config.globalProperties.baseAPI +
+          '/component/fs-upload/preview?jwt=' +
+          token
+      }
+      if (window.$vueApp.config.globalProperties.customPreviewUrl) {
+        window.open(
+          getSystemFrontendUrl(
+            window.$vueApp.config.globalProperties.portalUrl
+          ) +
+            '/#/file-service/preview?serverPath=' +
+            file.serverPath +
+            '&showName=' +
+            encodeURI(showName),
+          file.showName
+        )
+      } else {
+        window.open(
+          previewUrl +
+            '&showName=' +
+            encodeURI(showName) +
+            '&serverPath=' +
+            file.serverPath
+        )
+      }
+    },
+    deleteRow(index) {
+      const deleteFile = this.showFileList[index]
+      // this.fileList.splice(index, 1)
+      const nameArr = []
+      const pathArr = []
+      for (let i = 0; i < this.showFileList.length; i++) {
+        if (i !== index) {
+          nameArr.push(this.showFileList[i].showName)
+          pathArr.push(this.showFileList[i].serverPath)
+        }
+      }
+      if (nameArr.length === 0) {
+        this.fileInfo.showName = null
+        this.fileInfo.serverPath = null
+        this.showFileList = []
+        $emit(this, 'delete-success', { deleteFile: deleteFile, all: [] })
+        $emit(this, 'delete', [], index)
+      } else {
+        this.fileInfo.showName = nameArr.join(',')
+        this.fileInfo.serverPath = pathArr.join(',')
+        $emit(this, 'delete-success', {
+          deleteFile: deleteFile,
+          all: this.showFileList,
+        })
+        $emit(this, 'delete', this.showFileList, index)
+      }
+    },
+  },
+  emits: [
+    'close',
+    'upload-success',
+    'delete-success',
+    'delete',
+    'update:value',
+    ,
+    'close',
+    ,
+    'update:value',
+  ],
+}
+</script>