agilebuilder-ui 1.1.65-tmp7 → 1.1.65-tmp9

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

@@ -1,312 +0,0 @@
-<template>
-  <div style="width: 100%">
-    <el-upload
-      v-if="!disabled"
-      ref="buttonUploadRef"
-      class="upload-demo"
-      :accept="accept"
-      :show-file-list="false"
-      auto-upload
-      :headers="headers"
-      :disabled="!openFsUpload"
-      :action="defaultAction"
-      :multiple="multiple"
-      :before-upload="handleBeforeUpload"
-      :before-remove="beforeRemove"
-      :on-success="onSuccess"
-      :on-error="onError"
-      :on-progress="uploadOnProgress"
-    >
-      <el-button size="small" type="primary">{{ placeholder }}</el-button>
-      <template #tip>
-        <el-text>
-          {{ accept }}
-          {{ $t('imatrixUIMessage.uploadFileTip', { fileSize: limitFileSize }) }}</el-text
-        >
-      </template>
-    </el-upload>
-  </div>
-  <div v-if="uploading" style="display: flex; align-items: center">
-    <el-tag :style="tagStyle" size="large" class="fs-upload-tag">
-      上传中：
-      <span class="fs-upload-tag-text">{{ uoloadingFileName }}</span>
-      <span class="fs-upload-tag-percent">{{ uploadPercentage }}%</span>
-    </el-tag>
-  </div>
-  <template v-if="fileList && fileList.length > 0">
-    <fs-preview-new
-      :disabled="disabled"
-      :disabled-no-preview="disabledNoPreview"
-      :disabled-no-download="disabledNoDownload"
-      :file-list="fileList"
-      :system-code="systemCode"
-      :before-remove="beforeRemove"
-      :watermark="watermark"
-      :on-remove="onRemove"
-      :before-download="beforeDownload"
-      :downloadable="downloadable"
-    />
-  </template>
-</template>
-
-<script setup lang="ts">
-import { ref, computed } from 'vue'
-import { getRelativeBaseUrl, isPlateSys } from '../../../src/utils/common-util'
-import { getToken } from '../../../src/utils/auth'
-import type { UploadFile, UploadFiles, UploadProgressEvent } from 'element-plus'
-import fsPreviewNew from './fs-preview-new.vue'
-import { ElMessage } from 'element-plus'
-import { useI18n } from 'vue-i18n'
-
-const emits = defineEmits(['on-error'])
-const { t } = useI18n()
-const props = defineProps({
-  openFsUpload: {
-    type: Boolean,
-    default: true
-  },
-  systemCode: {
-    type: String,
-    default: ''
-  },
-  disabled: {
-    type: Boolean,
-    default: false
-  },
-  // 可下载
-  downloadable: {
-    type: Boolean,
-    default: true
-  },
-  accept: {
-    type: String,
-    default: ''
-  },
-  multiple: {
-    type: Boolean,
-    default: false
-  },
-  limitFileSize: {
-    type: Number,
-    default: 30
-  },
-  placeholder: {
-    type: String,
-    default: '点击上传'
-  },
-  action: {
-    type: String,
-    default: ''
-  },
-  headers: {
-    type: Object,
-    default: () => ({ Authorization: null })
-  },
-  fileList: {
-    type: Array<{ showName: string; serverPath: string }>,
-    default: () => []
-  },
-  onSuccess: {
-    type: Function,
-    default: () => {}
-  },
-  beforeRemove: {
-    type: Function,
-    default: () => {}
-  },
-  onRemove: {
-    type: Function,
-    default: () => {}
-  },
-  beforeDownload: {
-    type: Function,
-    default: () => {}
-  },
-  pageContext: {
-    type: Object,
-    default: () => ({})
-  },
-  configure: {
-    type: Object,
-    default: () => ({})
-  },
-  beforeUpload: {
-    type: Function,
-    default: () => {}
-  },
-  // 是否禁用时也可预览
-  disabledNoPreview: {
-    type: Boolean,
-    default: false
-  },
-  // 是否禁用时也可下载
-  disabledNoDownload: {
-    type: Boolean,
-    default: false
-  },
-  // limit
-  limit: {
-    type: Number,
-    default: 0
-  },
-  // 水印配置{isShowWatermark:true/false,content:'xxxxx'}
-  watermark: {
-    type: Object,
-    default: () => ({})
-  }
-})
-const baseURL = getRelativeBaseUrl(window.$vueApp.config.globalProperties.baseURL)
-const baseAPI = getRelativeBaseUrl(window.$vueApp.config.globalProperties.baseAPI)
-const defaultAction = ref<string>('')
-const buttonUploadRef = ref<any>()
-const uploading = ref(false)
-const uoloadingFileName = ref('')
-const uploadPercentage = ref(0)
-const innerLimitFileSize = ref(props.limitFileSize)
-
-const tagStyle = computed(() => {
-  const p = Math.max(0, Math.min(100, Number(uploadPercentage.value || 0)))
-  const primary = '#409EFF'
-  const rest = 'rgba(255,255,255,0.92)'
-  const bg = `linear-gradient(90deg, ${primary} ${p}%, ${rest} ${p}%)`
-  const color = p >= 50 ? '#fff' : '#303133'
-  return {
-    background: bg,
-    color,
-    transition: 'background 0.3s linear'
-  }
-})
-if (props.action) {
-  defaultAction.value = props.action
-} else {
-  let tempAction = baseURL + '/common/fs-upload'
-  if (isPlateSys(window.$vueApp.config.globalProperties.systemCode)) {
-    tempAction = baseAPI + '/component/super-form/uploads'
-  }
-  defaultAction.value = tempAction
-}
-if (!props.headers || !props.headers['Authorization']) {
-  // eslint-disable-next-line vue/no-mutating-props
-  props.headers.Authorization = getToken()
-}
-const handleBeforeUpload = (file: File) => {
-  if (props.fileList?.length !== 0 && props.limit > 0 && props.fileList.length >= props.limit) {
-    ElMessage({
-      type: 'warning',
-      message: t('fsUpload.theNumberOfUploadsExceedsTheLimitTheLimitIs') + ': ' + props.limit,
-      showClose: true
-    })
-    return false
-  }
-  if (!innerLimitFileSize.value) {
-    // 默认是30M
-    innerLimitFileSize.value = 30
-  }
-  if (file.size > innerLimitFileSize.value * 1024 * 1024) {
-    // 超过最大限制
-    ElMessage({
-      type: 'warning',
-      message: t('imatrixUIMessage.exceedFileSize', {
-        fileSize: innerLimitFileSize.value
-      }),
-      showClose: true
-    })
-    // 返回false停止上传
-    return false
-  }
-
-  const isMobile = false
-  return props.beforeUpload({
-    fileObj: file,
-    files: [file],
-    isMobile,
-    pageContext: props.pageContext,
-    configureObj: props.configure
-  })
-}
-const onSuccess = (response: any, uploadFile: UploadFile, uploadFiles: UploadFiles) => {
-  ElMessage({ message: t('fsUpload.uploadSucceeded'), type: 'success', placement: 'top' })
-  // eslint-disable-next-line vue/no-mutating-props
-  props.fileList.push({
-    showName: response.name,
-    serverPath: response.serverPath
-  })
-  props.onSuccess(response, uploadFile, uploadFiles)
-  uploading.value = false
-  uploadPercentage.value = 0
-}
-
-const onError = (err: any, file: any) => {
-  console.log('upload error:', err, file)
-  uploading.value = false
-  uploadPercentage.value = 0
-
-  let serverMsg = t('fsUpload.uploadFailed')
-  try {
-    const resp = file && file.xhr && (file.xhr.response || file.xhr.responseText)
-    if (resp) {
-      const data = typeof resp === 'string' ? JSON.parse(resp) : resp
-      serverMsg = data?.message || data?.msg || data?.error || serverMsg
-    }
-  } catch (e) {
-    // ignore parse errors
-  }
-
-  ElMessage({ type: 'error', message: serverMsg })
-  emits('on-error', err)
-}
-
-function uploadOnProgress(evt: UploadProgressEvent, uploadFile: UploadFile, uploadFiles: UploadFiles) {
-  try {
-    uoloadingFileName.value = uploadFile.name
-    const percent = evt && evt.percent ? Math.floor(evt.percent) : 0
-    uploading.value = true
-    if (percent === 100) {
-      uploadPercentage.value = 99
-    } else {
-      uploadPercentage.value = percent
-    }
-  } catch (e) {
-    uploading.value = false
-    uploadPercentage.value = 0
-  }
-}
-
-function abortUpload() {
-  try {
-    // Element Plus upload exposes abort method on component ref
-    if (buttonUploadRef.value && typeof buttonUploadRef.value.abort === 'function') {
-      // abort all uploads
-      buttonUploadRef.value.abort()
-    }
-  } catch (e) {
-    console.error('abortUpload error', e)
-  }
-  uploading.value = false
-  uploadPercentage.value = 0
-}
-</script>
-<style lang="scss" scoped>
-.el-button > span {
-  font-size: 12px;
-}
-.fs-upload-tag {
-  border: 1px solid #dcdfe6;
-  padding: 4px 8px;
-  background-clip: padding-box;
-  overflow: hidden;
-  display: inline-flex;
-  align-items: center;
-}
-.fs-upload-tag-text {
-  margin-right: 18px;
-  max-width: 160px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.fs-upload-tag-percent {
-  font-weight: 600;
-  margin-left: 4px;
-}
-</style>

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

@@ -1,307 +0,0 @@
-<template>
-  <el-upload
-    v-if="!disabled"
-    ref="buttonUploadRef"
-    class="upload-demo"
-    style="width: 100%"
-    :accept="accept"
-    :show-file-list="false"
-    drag
-    :headers="headers"
-    :action="defaultAction"
-    :multiple="multiple"
-    :before-upload="handleBeforeUpload"
-    :on-success="onUploadSuccess"
-    :before-remove="beforeRemove"
-    :on-error="onError"
-    :on-progress="uploadOnProgress"
-  >
-    <el-icon class="el-icon--upload"><upload-filled /></el-icon>
-    <div class="el-upload__text">{{ placeholder }}</div>
-    <template #tip>
-      <el-text>
-        {{ accept }}
-        {{ $t('imatrixUIMessage.uploadFileTip', { fileSize: limitFileSize }) }}
-      </el-text>
-    </template>
-  </el-upload>
-  <div v-if="uploading" style="display: flex; align-items: center">
-    <el-tag :style="tagStyle" size="large" class="fs-upload-tag">
-      上传中：
-      <span class="fs-upload-tag-text">{{ uoloadingFileName }}</span>
-      <span class="fs-upload-tag-percent">{{ uploadPercentage }}%</span>
-    </el-tag>
-  </div>
-  <template v-if="fileList && fileList.length > 0">
-    <fs-preview-new
-      :disabled="disabled"
-      :disabled-no-preview="disabledNoPreview"
-      :disabled-no-download="disabledNoDownload"
-      :file-list="fileList"
-      :system-code="systemCode"
-      :watermark="watermark"
-      :before-remove="beforeRemove"
-      :on-remove="onRemove"
-      :before-download="beforeDownload"
-    />
-  </template>
-</template>
-
-<script setup lang="ts">
-import { UploadFilled } from '@element-plus/icons-vue'
-import { ref, computed } from 'vue'
-import { getRelativeBaseUrl, isPlateSys } from '../../../src/utils/common-util'
-import { getToken } from '../../../src/utils/auth'
-import type { UploadFile, UploadFiles, UploadProgressEvent } from 'element-plus'
-import fsPreviewNew from './fs-preview-new.vue'
-import { ElMessage } from 'element-plus'
-import { useI18n } from 'vue-i18n'
-
-const emits = defineEmits(['on-error'])
-const { t } = useI18n()
-const props = defineProps({
-  openFsUpload: {
-    type: Boolean,
-    default: true
-  },
-  systemCode: {
-    type: String,
-    default: ''
-  },
-  disabled: {
-    type: Boolean,
-    default: false
-  },
-  // 可下载
-  downloadable: {
-    type: Boolean,
-    default: true
-  },
-  accept: {
-    type: String,
-    default: ''
-  },
-  multiple: {
-    type: Boolean,
-    default: false
-  },
-  limitFileSize: {
-    type: Number,
-    default: 30
-  },
-  placeholder: {
-    type: String,
-    default: '拖拽文件 或 点击上传'
-  },
-  action: {
-    type: String,
-    default: ''
-  },
-  headers: {
-    type: Object,
-    default: () => ({ Authorization: null })
-  },
-  fileList: {
-    type: Array<{ showName: string; serverPath: string }>,
-    default: () => []
-  },
-  onSuccess: {
-    type: Function,
-    default: () => {}
-  },
-  beforeRemove: {
-    type: Function,
-    default: () => {}
-  },
-  onRemove: {
-    type: Function,
-    default: () => {}
-  },
-  beforeDownload: {
-    type: Function,
-    default: () => {}
-  },
-  pageContext: {
-    type: Object,
-    default: () => ({})
-  },
-  configure: {
-    type: Object,
-    default: () => ({})
-  },
-  beforeUpload: {
-    type: Function,
-    default: () => {}
-  },
-  // 是否禁用时也可预览
-  disabledNoPreview: {
-    type: Boolean,
-    default: false
-  },
-  // 是否禁用时也可下载
-  disabledNoDownload: {
-    type: Boolean,
-    default: false
-  },
-  // limit
-  limit: {
-    type: Number,
-    default: 0
-  },
-  // 水印配置{isShowWatermark:true/false,content:'xxxxx'}
-  watermark: {
-    type: Object,
-    default: () => ({})
-  }
-})
-const baseURL = getRelativeBaseUrl(window.$vueApp.config.globalProperties.baseURL)
-const baseAPI = getRelativeBaseUrl(window.$vueApp.config.globalProperties.baseAPI)
-const defaultAction = ref<string>('')
-const innerLimitFileSize = ref(props.limitFileSize)
-const uploading = ref(false)
-const uoloadingFileName = ref('')
-const uploadPercentage = ref(0)
-const buttonUploadRef = ref<any>()
-const tagStyle = computed(() => {
-  const p = Math.max(0, Math.min(100, Number(uploadPercentage.value || 0)))
-  const primary = '#409EFF'
-  const rest = 'rgba(255,255,255,0.92)'
-  const bg = `linear-gradient(90deg, ${primary} ${p}%, ${rest} ${p}%)`
-  const color = p >= 50 ? '#fff' : '#303133'
-  return {
-    background: bg,
-    color,
-    transition: 'background 0.3s linear'
-  }
-})
-if (props.action) {
-  defaultAction.value = props.action
-} else {
-  let tempAction = baseURL + '/common/fs-upload'
-  if (isPlateSys(window.$vueApp.config.globalProperties.systemCode)) {
-    tempAction = baseAPI + '/component/super-form/uploads'
-  }
-  defaultAction.value = tempAction
-}
-if (!props.headers || !props.headers['Authorization']) {
-  // eslint-disable-next-line vue/no-mutating-props
-  props.headers.Authorization = getToken()
-}
-const handleBeforeUpload = (file: File) => {
-  if (props.fileList?.length !== 0 && props.limit > 0 && props.fileList.length >= props.limit) {
-    ElMessage({
-      type: 'warning',
-      message: t('fsUpload.theNumberOfUploadsExceedsTheLimitTheLimitIs') + ': ' + props.limit,
-      showClose: true
-    })
-    return false
-  }
-  if (!innerLimitFileSize.value) {
-    // 默认是30M
-    innerLimitFileSize.value = 30
-  }
-  if (file.size > innerLimitFileSize.value * 1024 * 1024) {
-    // 超过最大限制
-    ElMessage({
-      type: 'warning',
-      message: t('imatrixUIMessage.exceedFileSize', {
-        fileSize: innerLimitFileSize.value
-      }),
-      showClose: true
-    })
-    // 返回false停止上传
-    return false
-  }
-
-  const isMobile = false
-  return props.beforeUpload({
-    fileObj: file,
-    files: [file],
-    isMobile,
-    pageContext: props.pageContext,
-    configureObj: props.configure
-  })
-}
-const onUploadSuccess = (response: any, uploadFile: UploadFile, uploadFiles: UploadFiles) => {
-  ElMessage.success(t('fsUpload.uploadSucceeded'))
-  // eslint-disable-next-line vue/no-mutating-props
-  props.fileList.push({
-    showName: response.name,
-    serverPath: response.serverPath
-  })
-  props.onSuccess(response, uploadFile, uploadFiles)
-  uploading.value = false
-  uploadPercentage.value = 0
-}
-
-const onError = (err: any, file: any) => {
-  console.log('upload error:', err, file)
-  uploading.value = false
-  uploadPercentage.value = 0
-
-  let serverMsg = t('fsUpload.uploadFailed')
-  try {
-    const resp = file && file.xhr && (file.xhr.response || file.xhr.responseText)
-    if (resp) {
-      const data = typeof resp === 'string' ? JSON.parse(resp) : resp
-      serverMsg = data?.message || data?.msg || data?.error || serverMsg
-    }
-  } catch (e) {
-    // ignore parse errors
-  }
-
-  ElMessage({ type: 'error', message: serverMsg })
-  emits('on-error', err)
-}
-
-function uploadOnProgress(evt: UploadProgressEvent, uploadFile: UploadFile, uploadFiles: UploadFiles) {
-  try {
-    uoloadingFileName.value = uploadFile.name
-    const percent = evt && evt.percent ? Math.floor(evt.percent) : 0
-    uploading.value = true
-    if (percent === 100) {
-      uploadPercentage.value = 99
-    } else {
-      uploadPercentage.value = percent
-    }
-  } catch (e) {
-    uploading.value = false
-    uploadPercentage.value = 0
-  }
-}
-
-function abortUpload() {
-  try {
-    // Element Plus upload exposes abort method on component ref
-    if (buttonUploadRef.value && typeof buttonUploadRef.value.abort === 'function') {
-      // abort all uploads
-      buttonUploadRef.value.abort()
-    }
-  } catch (e) {
-    console.error('abortUpload error', e)
-  }
-  uploading.value = false
-  uploadPercentage.value = 0
-}
-</script>
-<style lang="scss" scoped>
-.fs-upload-tag {
-  border: 1px solid #dcdfe6;
-  padding: 4px 8px;
-  background-clip: padding-box;
-  overflow: hidden;
-  display: inline-flex;
-  align-items: center;
-}
-.fs-upload-tag-text {
-  margin-right: 18px;
-  max-width: 160px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.fs-upload-tag-percent {
-  font-weight: 600;
-  margin-left: 4px;
-}
-</style>