agilebuilder-ui 1.0.621 → 1.0.962

package/packages/fs-upload-new/src/file-upload-mobile/file-upload-browser.vue

@@ -0,0 +1,480 @@
+<template>
+  <div>
+    <FileUploadComponent
+      ref="fileUploadRef"
+      :disabled="disabled"
+      :systemCode="systemCode"
+      :accept="accept"
+      :multiple="multiple"
+      :limitFileSize="limitFileSize"
+      :fileList="fileListResult"
+      :beforeRemove="beforeRemove"
+      :onRemove="onRemove"
+      :beforeDownload="beforeDownload"
+      :baseURL="baseURLVal"
+      @chooseFile="pickBrowserFiles"
+      @remove="removeFile"
+    />
+    <template v-if="openCameraOrChoosePhoto && openCameraOrChoosePhoto === 'openCamera'">
+      <!-- 由于直接打开capture相机属性的设置为空或者不是user/environment其中的任意一项时会打开的本地捕获音频 麦克风-->
+      <!-- 所有使用 template 可查看 https://w3c.github.io/html-media-capture/#introduction -->
+      <input
+        v-if="multiple && !disabled"
+        ref="fileRef"
+        type="file"
+        multiple="multiple"
+        :capture="'environment'"
+        name="file"
+        :accept="myAccept"
+        style="display: none"
+        @change="uploadFiles"
+      />
+      <input
+        v-else-if="!disabled"
+        ref="fileRef"
+        type="file"
+        :capture="'environment'"
+        name="file"
+        style="display: none"
+        :accept="myAccept"
+        @change="uploadFiles"
+      />
+    </template>
+    <template v-else>
+      <input
+        v-if="multiple && !disabled"
+        ref="fileRef"
+        type="file"
+        multiple="multiple"
+        name="file"
+        :accept="myAccept"
+        style="display: none"
+        @change="uploadFiles"
+      />
+      <input
+        v-else-if="!disabled"
+        ref="fileRef"
+        type="file"
+        name="file"
+        style="display: none"
+        :accept="myAccept"
+        @change="uploadFiles"
+      />
+    </template>
+    <el-drawer v-model="fileTypeFlag" direction="btt" @close="fileTypeFlag = false">
+    <div><el-button
+        link
+        @click="confirmFileType('image')"
+      >
+        {{ $t('fsUpload.image') }}
+      </el-button></div>
+      <div>
+      <el-button
+        link
+        @click="confirmFileType('video')"
+      >
+        {{ $t('fsUpload.video') }}
+      </el-button></div>
+    </el-drawer>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, defineEmits } from 'vue'
+import { getSystemFrontendUrl, getReplaceUrlDomain, formatFileName } from '../../../../src/utils/common-util'
+import { getToken, getCookieCache } from '../../../../src/utils/auth.js' // 获得token
+import Compressor from 'compressorjs'
+import { ElMessage } from 'element-plus'
+import { useI18n } from 'vue-i18n'
+import FileUploadComponent from './file-upload-component.vue'
+
+const props = defineProps({
+  openFsUpload: {
+    type: Object,
+    default: true
+  },
+  entity: {
+    type: Object,
+    default: () => {
+      return null
+    }
+  },
+  fileInfo: {
+    type: Object,
+    default: () => ({})
+  },
+  systemCode: {
+    type: String,
+    default: ''
+  },
+  displayType: {
+    type: String,
+    default: 'input'
+  },
+  // 是否禁止编辑，为true只能下载，不能删除和上传
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  accept: {
+    type: String,
+    default: ''
+  },
+  multiple: {
+    type: Boolean,
+    default: false
+  },
+  limit: {
+    type: Number,
+    default: 1
+  },
+  // 文件大小限制，单位是M，默认是30M
+  limitFileSize: {
+    type: Number,
+    default: 30
+  },
+  placeholder: {
+    type: String,
+    default: '拖拽文件 或 点击上传'
+  },
+  action: {
+    type: String,
+    default: ''
+  },
+  headers: {
+    type: Object,
+    default: () => ({ Authorization: null })
+  },
+  // 已上传文件列表
+  fileList: {
+    type: Array,
+    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: () => ({})
+  },
+  // 组件id，在表单或列表中应该唯一，一般传字段名即可
+  componentId: {
+    type: String,
+    default: function () {
+      return 'file-upload'
+    }
+  },
+  // 组件名称，一般是字段label
+  componentName: {
+    type: String,
+    default: function () {
+      return 'file-upload'
+    }
+  },
+  // 列表编码
+  listCode: {
+    type: String,
+    default: null
+  },
+  // 打开相机和相册选项，默认是都可以打开
+  openCameraOrChoosePhoto: {
+    type: String,
+    default: 'openCameraAndChoosePhoto'
+  },
+  beforeUpload: {
+    type: Function,
+    default: () => {}
+  }
+})
+
+const fileListResult = ref(props.fileList)
+
+let baseURL = window.$vueApp.config.globalProperties.baseURL
+if (props.pageContext && props.pageContext.backendUrl) {
+  baseURL = props.pageContext.backendUrl
+}
+if (!baseURL) {
+  baseURL = window.$vueApp.config.globalProperties.baseURL
+}
+const baseURLVal = ref(baseURL)
+
+const baseAPI = window.$vueApp.config.globalProperties.baseAPI
+const defaultAction = ref<string>('')
+
+if (props.action) {
+  defaultAction.value = props.action
+} else {
+  let tempAction = baseAPI + '/component/super-form/uploads'
+  if (props.multiple) {
+    tempAction = baseAPI + '/component/super-form/batch-uploads'
+  }
+  defaultAction.value = tempAction
+}
+
+defaultAction.value = getReplaceUrlDomain(defaultAction.value)
+
+let myAccept = ref(props.accept ? props.accept : '')
+let tempFileList = ref([])
+let isUploading = ref(false)
+let isFile = ref(false)
+const fileRef = ref(null)
+const fileTypeFlag = ref(false)
+const emits = defineEmits(['remove', 'uploadend'])
+const { t } = useI18n()
+const fileUploadRef = ref(null)
+
+function isImg(file) {
+  const fileName = file.name
+  if (fileName) {
+    return (
+      fileName.indexOf('jpg') !== -1 ||
+      fileName.indexOf('JPG') !== -1 ||
+      fileName.indexOf('png') !== -1 ||
+      fileName.indexOf('PNG') !== -1
+    )
+  }
+  return false
+}
+
+function removeFile(param) {
+  console.log('removeFile----param=', param)
+  const file = param.file
+  if(file){
+    emits('remove', { rmFiles: [file], serverFiles: fileListResult.value, index: param.index })
+  }
+}
+function pickBrowserFiles() {
+  if (props.openCameraOrChoosePhoto && props.openCameraOrChoosePhoto === 'openCamera') {
+    // 只打开相机
+    myAccept.value = 'image/*'
+    setTimeout(() => {
+      fileRef.value.click()
+    })
+  } else {
+    // 相机和文件都可以选
+    myAccept.value = '*'
+    fileTypeFlag.value = true
+  }
+}
+
+function confirmFileType(fileType: string) {
+  myAccept.value = ''
+  if (fileType && fileType === 'image') {
+    myAccept.value = 'image/*'
+  } else if (fileType && fileType === 'video') {
+    myAccept.value = 'video/*'
+  }
+  setTimeout(() => {
+    fileTypeFlag.value = false
+    fileRef.value.click()
+  })
+
+  console.log('Action chosen:', fileType)
+}
+
+async function uploadBrowserFile() {
+  const param = new FormData()
+  const fileNames = []
+  const selectFiles = []
+  let limitFileSize = props.limitFileSize
+  if (limitFileSize === undefined) {
+    // 默认是30M
+    limitFileSize = 30
+  }
+  let isCanUpload = false
+    const files = fileRef.value.files
+  for (let i = 0; i < files.length; i++) {
+    const newFile = files[i]
+    isCanUpload = validateCanUploadFile(newFile, limitFileSize)
+    if (isCanUpload) {
+      fileNames.push(newFile.name)
+    } else {
+      break
+    }
+  }
+    console.error('isCanUpload=', isCanUpload)
+  if (isCanUpload) {
+    for (let i = 0; i < files.length; i++) {
+      const fileObj = files[i]
+    console.error('fileObj.name=', fileObj.name, 'fileNames=', fileNames)
+      if (fileNames.indexOf(fileObj.name) >= 0) {
+        selectFiles.push(fileObj)
+      }
+      if (props.beforeUpload && typeof props.beforeUpload === 'function') {
+        const isMobile = true
+        // eslint-disable-next-line no-useless-call
+        isCanUpload = props.beforeUpload({fileObj, files:selectFiles, isMobile, pageContext: props.pageContext, configureObj: props.configure})
+      }
+    }
+  }
+  if (isCanUpload !== undefined && !isCanUpload) {
+    // 不能提交文件
+    return
+  }
+  if (!selectFiles || selectFiles.length === 0) {
+    console.error('未选择任何文件')
+    return
+  }
+  let uploadFiles = []
+  try {
+    uploadFiles = await compressionImg(selectFiles)
+  } catch (error) {
+    console.error('压缩图片失败', error)
+    uploadFiles = selectFiles
+  }
+  if (props.multiple) {
+    for (let i = 0; i < uploadFiles.length; i++) {
+      // param.append('files['+i+']', uploadFiles[i])
+      param.append('files', uploadFiles[i])
+      // param.append('files[]', uploadFiles[i])
+    }
+    // param.append('files', uploadFiles)
+    // 批量上传接口有这个参数，单文件上传没有该参数
+    param.append('limitFileSize', limitFileSize)
+  } else {
+    param.append('file', uploadFiles[0])
+  }
+  param.append('systemCode', props.systemCode)
+
+  console.log('上传文件111-----defaultAction.value=',defaultAction.value, 'param=', param, 'uploadFiles=', uploadFiles)
+  window.$vueApp.config.globalProperties.$http
+    .post(defaultAction.value, param, { headers: { 'Content-Type': 'multipart/form-data', Authorization: getToken() } })
+    .then((result) => {
+      // result：批量上传时返回的是集合，单选上传时返回的是对象
+      console.log('上传后返回值==result=', result)
+      if (result) {
+        if (props.multiple) {
+          if (result.length > 0) {
+            // this.tempFileList.push(...result)
+            uploadComplete(result)
+          } else {
+            console.error('多选时上传后返回值异常')
+          }
+        } else {
+          // this.tempFileList.push(result)
+          uploadComplete(result)
+        }
+      } else {
+        console.error('上传后返回值异常')
+      }
+    })
+    .catch(() => {
+      isUploading.value = false
+    })
+}
+function validateCanUploadFile(file, limitFileSize) {
+  let isCanUpload = true
+  console.log('上传文件--验证文件大小--file.size=', file.size, '文件线状大小,单位是M，limitFileSize=', limitFileSize)
+  if (file.size > limitFileSize * 1024 * 1024) {
+    // 超过最大限制
+    ElMessage({
+        showClose: true,
+        type: 'warning',
+        message: t('fileUpload.exceedFileSize', { fileName: file.name, fileSize: limitFileSize })
+      })
+    // 返回false停止上传
+    isCanUpload = false
+  }
+  return isCanUpload
+}
+// 所有文件上传完毕后
+function uploadComplete(result) {
+  console.log('uploadComplete=开始')
+  if(!fileListResult.value){
+    fileListResult.value = []
+  }
+  if (props.multiple) {
+    console.log(
+      'uploadComplete====fileListResult.value111=',
+      JSON.stringify(fileListResult.value),
+      'result=',
+      result
+    )
+    fileListResult.value = fileListResult.value.concat(result)
+    console.log('uploadComplete====fileListResult.value222=', fileListResult.value)
+  } else {
+    // 单选时将已选文件移除，然后再替换为新上传的文件
+    console.log('uploadComplete====fileListResult.value333=', JSON.stringify(fileListResult.value))
+    const rmFiles = JSON.parse(JSON.stringify(fileListResult.value))
+    fileListResult.value.push(result)
+    emits('remove', { rmFiles, serverFiles: fileListResult.value, index: 0 })
+    console.log('uploadComplete====fileListResult.value444=', fileListResult.value)
+  }
+  console.log('uploadComplete====fileListResult.value555=', fileListResult.value)
+
+  fileRef.value.value = null
+  isUploading.value = false
+  fileUploadRef.value.changeFileList(fileListResult.value)
+  // 表示上传完成
+  emits('uploadend', fileListResult.value)
+  console.log('uploadComplete====上传完成=')
+}
+function uploadFiles() {
+  uploadBrowserFiles()
+}
+function uploadBrowserFiles() {
+  console.log('uploadBrowserFiles=====上传开始=')
+  const files = fileRef.value.files
+  if (files && files.length > 0) {
+    isUploading.value = true
+    uploadBrowserFile()
+  } else {
+    uploadNoNewFiles()
+  }
+}
+
+// 文件上传时，无需要走后台上传时的处理
+function uploadNoNewFiles() {
+  fileRef.value.value = null
+
+  // 表示上传完成
+  emits('uploadend', fileListResult.value)
+}
+
+function compressionImg(selectFiles) {
+  const uploadFilesPromises = []
+  for (let i = 0; i < selectFiles.length; i++) {
+    uploadFilesPromises.push(
+      new Promise((resolve, reject) => {
+        console.log(`压缩前 size ${selectFiles[i].size / 1024 / 1024} MB`)
+        // eslint-disable-next-line no-new
+        new Compressor(selectFiles[i], {
+          quality: 0.7,
+          success(result) {
+            console.log(`压缩后 size ${result.size / 1024 / 1024} MB`)
+            resolve(
+              new File([result], selectFiles[i].name, {
+                type: result.type,
+                lastModified: Date.now()
+              })
+            )
+          },
+          error(err) {
+            reject(err)
+          }
+        })
+      })
+    )
+  }
+  return Promise.all(uploadFilesPromises)
+}
+</script>
+
+<style lang="scss" scoped></style>

package/packages/fs-upload-new/src/file-upload-mobile/file-upload-component.vue

@@ -0,0 +1,127 @@
+<template>
+  <el-upload action="#" list-type="picture-card" :file-list="fileListResult" :auto-upload="false" :disabled="true">
+  <template  v-if="!disabled" #tip>
+    <el-text size="small" style="padding: 10px;font-weight: 600"> {{ accept }} {{limitFileSize?$t('imatrixUIMessage.uploadFileTip',{fileSize: limitFileSize}): ''}}</el-text>
+  </template>
+  <template v-if="!disabled" #trigger>
+    <el-icon @click="chooseFile"><Plus /></el-icon>
+ </template>
+
+    <template #file="{ file }">
+      <div  style="width: 100%;" >
+        <div v-if="!isImg(file)" class="el-upload-list__item-thumbnail" >
+        <div  class="file-name-container" >
+            {{file.name}}
+        </div></div>
+        <img v-else class="el-upload-list__item-thumbnail" :src="getPreviewSrc(file.name, file.serverPath)" alt="" />
+        <fs-preview-new :disabled="disabled" :file-list="fileListResult" :file="file" :system-code="systemCode" :before-remove="beforeRemove" :on-remove="onRemove" :before-download="beforeDownload" @remove="removeFile"/>
+
+      </div>
+    </template>
+  </el-upload>
+</template>
+
+<script lang="ts" setup>
+import { ref,defineEmits } from 'vue'
+import { Plus } from '@element-plus/icons-vue'
+import fsPreviewNew from '../fs-preview-new.vue'
+
+import { isImage } from '../../../../src/utils/util'
+import { getToken } from '../../../../src/utils/auth'
+import { getReplaceUrlDomain, isPlateSys } from '../../../../src/utils/common-util'
+
+const props = defineProps({
+  systemCode: {
+    type: String,
+    default: ''
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  fileList: {
+    type: Array<{ showName: string; serverPath: string }>,
+    default: () => []
+  },
+  beforeRemove: {
+    type: Function,
+    default: () => {}
+  },
+  onRemove: {
+    type: Function,
+    default: () => {}
+  },
+  beforeDownload: {
+    type: Function,
+    default: () => {}
+  },
+  accept: {
+    type: String,
+    default: ''
+  },
+  limitFileSize: {
+    type: Number,
+    default: 30
+  },
+  baseURL: {
+    type: String,
+    default: ''
+  }
+})
+
+ //拖动定义的方法
+const emits = defineEmits(['chooseFile', 'remove']);
+
+const dialogImageUrl = ref('')
+const dialogVisible = ref(false)
+const disabled = ref(false)
+
+let baseURL = props.baseURL
+
+const baseAPI = window.$vueApp.config.globalProperties.baseAPI
+
+const fileListResult = ref(props.fileList)
+console.log('file-upload-component---fileListResult=', fileListResult.value)
+function changeFileList(fileList: any) {
+  fileListResult.value = fileList
+}
+const chooseFile = ()=>{
+  console.log('点击选择文件按钮---')
+  emits('chooseFile')
+}
+const isImg = (file: Object) =>{
+    return isImage(file.name)
+}
+
+function getPreviewSrc(showName: string, serverPath: string) {
+  showName = formatName(showName)
+  const token = getToken()
+  let url = baseURL + '/common/super-form/downloads?jwt=' + token
+  if (isPlateSys(props.systemCode)) {
+    url = baseAPI + '/component/super-form/downloads?jwt=' + token
+  }
+  url = getReplaceUrlDomain(url)
+  return url + '&showName=' + encodeURI(showName) + '&serverPath=' + serverPath
+}
+const formatName = (showName: string) => {
+  if (showName) {
+    showName = showName.replace('#', '~~').replace('?', '~$').replace('&', '$')
+  }
+  return showName
+}
+
+function removeFile(param){
+  emits('remove', param)
+}
+
+defineExpose({changeFileList})
+
+</script>
+<style scoped>
+.file-name-container {
+  display: flex;
+  align-items: center; /* 垂直居中 */
+  justify-content: center; /* 水平居中，如需要 */
+  height: 100px; /* 容器高度 */
+}
+</style>