agilebuilder-ui 1.0.71-tmp7 → 1.0.72

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

@@ -0,0 +1,220 @@
+<template>
+  <div>
+    <el-input
+        ref="item"
+        :disabled="disabled"
+        v-model="fileNames"
+        :placeholder="$t('imatrixUIMessage.fileUpload')"
+        :readonly="true"
+      >
+        <template v-slot:append>
+          <el-button v-if="!disabled" :icon="Upload" size="default" @click="openAnnexUpload" />
+        </template>
+      </el-input>
+      
+      <el-dialog
+        v-model="annexUploadFlag"
+        :append-to-body="true"
+        :show-close="true"
+        :title="$t('imatrixUIMessage.upload')"
+        width="80%"
+        @close="annexUploadFlag=false"
+      >
+        <FileUploadMobile
+          :disabled="disabled"
+          :fileInfo="fileInfo"
+          :systemCode="systemCode"
+          :accept="accept"
+          :multiple="multiple"
+          :limit="limit"
+          :limitFileSize="limitFileSize"
+          :placeholder="placeholder"
+          :action="action"
+          :headers="headers"
+          :file-list="fileList"
+          :beforeUpload="beforeUpload"
+          :onSuccess="onSuccess"
+          :beforeRemove="beforeRemove"
+          :onRemove="onRemove"
+          :beforeDownload="beforeDownload"
+          :pageContext="pageContext"
+          :configure="configure"
+          :openFsUpload="openFsUpload"
+          @uploadend="uploadendMobile"
+          @remove="removeMobileFile"
+        />
+      </el-dialog>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, defineEmits } from 'vue'
+import { ElMessage } from 'element-plus'
+import FileUploadMobile from './file-upload.vue'
+import {
+  Upload
+} from '@element-plus/icons-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'
+    }
+  },
+  options: {
+    type: Object,
+    default: null
+  },
+  // 列表编码
+  listCode: {
+    type: String,
+    default: null
+  },
+  // 打开相机和相册选项，默认是都可以打开
+  openCameraOrChoosePhoto: {
+    type: String,
+    default: 'openCameraAndChoosePhoto'
+  },
+  beforeUpload: {
+    type: Function,
+    default: () => {}
+  }
+})
+
+const emits = defineEmits(['remove', 'uploadend'])
+const annexUploadFlag = ref(false)
+const fileNames = ref(null)
+
+const openAnnexUpload = ()=>{
+  console.log('点击选择文件按钮---')
+  annexUploadFlag.value = true
+}
+
+function uploadendMobile(fileList) {
+  const fileServerPaths = Array.from(props.fileList,({serverPath})=>serverPath)
+  // console.log('uploadendMobile---props.fileList=', props.fileList,'fileServerPaths=',fileServerPaths, 'fileList=', fileList)
+  fileList.forEach(file=>{
+    // 如果已经存在就不要重复添加到fileList中了
+    if(fileServerPaths.indexOf(file.serverPath) < 0){
+      props.fileList.push({
+        showName: file.name,
+        serverPath: file.serverPath
+      })
+    }
+  })
+  fileNames.value =props.fileList.map((item: any) => item.showName).join(',')
+  props.onSuccess()
+}
+
+
+function removeMobileFile(param) {
+  // console.log('removeMobileFile---props.fileList=', props.fileList, 'param=', param)
+  const deleteFile = param.rmFiles && param.rmFiles.length > 0 ? param.rmFiles[0] : null
+  if(deleteFile){
+    let index = props.fileList.findIndex((item: any) => item.serverPath === deleteFile.serverPath)
+    if (index > -1) {
+      // eslint-disable-next-line vue/no-mutating-props
+      props.fileList.splice(index, 1)
+    }
+  }
+  fileNames.value =props.fileList.map((item: any) => item.showName).join(',')
+  props.onRemove()
+}
+
+</script>
+
+<style lang="scss" scoped></style>

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

@@ -0,0 +1,255 @@
+<template>
+  <div>
+    <file-upload-app
+      v-if="userAgent === 'app'"
+      ref="fileUploadRef"
+      :file-list="fileList"
+      :multiple="multiple"
+      :disabled="disabled"
+      :open-camera-or-choose-photo="openCameraOrChoosePhoto"
+      :options="options"
+      :fileInfo="fileInfo"
+      :systemCode="systemCode"
+      :accept="accept"
+      :limit="limit"
+      :limitFileSize="limitFileSize"
+      :placeholder="placeholder"
+      :action="action"
+      :headers="headers"
+      :beforeUpload="beforeUpload"
+      :onSuccess="onSuccess"
+      :beforeRemove="beforeRemove"
+      :onRemove="onRemove"
+      :beforeDownload="beforeDownload"
+      :pageContext="pageContext"
+      :configure="configure"
+      :openFsUpload="openFsUpload"
+      @uploadend="uploadedFile"
+      @remove="removeFile"
+    />
+    <file-upload-browser
+      v-else-if="userAgent === 'browser'"
+      ref="fileUploadRef"
+      :file-list="fileList"
+      :multiple="multiple"
+      :disabled="disabled"
+      :open-camera-or-choose-photo="openCameraOrChoosePhoto"
+      :options="options"
+      :fileInfo="fileInfo"
+      :systemCode="systemCode"
+      :accept="accept"
+      :limit="limit"
+      :limitFileSize="limitFileSize"
+      :placeholder="placeholder"
+      :action="action"
+      :headers="headers"
+      :beforeUpload="beforeUpload"
+      :onSuccess="onSuccess"
+      :beforeRemove="beforeRemove"
+      :onRemove="onRemove"
+      :beforeDownload="beforeDownload"
+      :pageContext="pageContext"
+      :configure="configure"
+      :openFsUpload="openFsUpload"
+      @uploadend="uploadedFile"
+      @remove="removeFile"
+    />
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref, defineEmits } from 'vue'
+import { ElMessage } from 'element-plus'
+import { useI18n } from 'vue-i18n'
+import FileUploadApp from './file-upload-app.vue'
+import FileUploadBrowser from './file-upload-browser.vue'
+import apis from './api.js'
+
+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'
+    }
+  },
+  options: {
+    type: Object,
+    default: null
+  },
+  // 列表编码
+  listCode: {
+    type: String,
+    default: null
+  },
+  // 打开相机和相册选项，默认是都可以打开
+  openCameraOrChoosePhoto: {
+    type: String,
+    default: 'openCameraAndChoosePhoto'
+  },
+  beforeUpload: {
+    type: Function,
+    default: () => {}
+  }
+})
+const baseAPI = window.$vueApp.config.globalProperties.baseAPI
+const deleteServerFileUrl = baseAPI + '/component/super-form/deleteFile'
+const emits = defineEmits(['uploadend', 'remove', 'pickup-file', 'close'])
+const { t } = useI18n()
+
+const userAgent = ref(null)
+const userAgentDetail = ref(null)
+const rmFileServerPaths = ref([])
+const fileUploadRef = ref(null)
+
+const userAgentOrg = navigator.userAgent
+userAgentDetail.value = userAgentOrg
+if (userAgentOrg.indexOf(' uni-app ') > 0) {
+  // 表示uni-app中访问的
+  userAgent.value = 'app'
+} else {
+  // 表示手机浏览器访问的
+  userAgent.value = 'browser'
+}
+
+// 点击确定（上传）按钮的回调方法
+function uploadedFile(fileList) {
+    emits('uploadend', fileList)
+}
+function deleteServerFiles() {
+  return window.$vueApp.config.globalProperties.$http.post(deleteServerFileUrl, rmFileServerPaths.value)
+}
+
+function removeFile({ rmFiles, serverFiles, newFiles }) {
+  if (rmFiles && rmFiles.length > 0) {
+    rmFiles.forEach((item) => {
+      if (item.serverPath && rmFileServerPaths.value && rmFileServerPaths.value.indexOf(item.serverPath) < 0) {
+        rmFileServerPaths.value.push(item.serverPath)
+      }
+    })
+    if (rmFileServerPaths.value && rmFileServerPaths.value.length > 0) {
+      // 删除minio等服务器上的附件
+      deleteServerFiles().then(() => {
+        // 更新字段的值
+        ElMessage({
+          showClose: true,
+          message: t('fileUpload.updateSuccess'),
+          type: 'success'
+        })
+      })
+    }
+    emits('remove', { rmFiles, serverFiles, newFiles })
+  }
+}
+// 移动端选择文件结束
+function pickFileDone(data) {
+  if (userAgent.value === 'app') {
+    fileUploadRef.value.pickFileDone(data)
+  }
+}
+// 移动端上传文件结束
+function uploadFileDone(data) {
+  if (userAgent.value === 'app') {
+    fileUploadRef.value.uploadFileDone(data)
+  }
+}
+function clearTempFile() {
+  if (fileUploadRef.value) {
+    fileUploadRef.value.clearQueenFile()
+  }
+}
+defineExpose({pickFileDone,uploadFileDone})
+</script>
+
+<style lang="scss" scoped></style>

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

@@ -112,7 +112,7 @@ if (props.action) {
   defaultAction.value = props.action
 } else {
   let tempAction = baseURL + '/common/fs-upload'
-  if (!isPlateSys(props.systemCode)) {
+  if (isPlateSys(props.systemCode)) {
     tempAction = baseAPI + '/component/super-form/uploads'
   }
   defaultAction.value = tempAction
@@ -122,7 +122,8 @@ if (!props.headers || !props.headers['Authorization']) {
   props.headers.Authorization = getToken()
 }
 const handleBeforeUpload = (file: File) => {
-  return props.beforeUpload(file)
+  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) => {
   // eslint-disable-next-line vue/no-mutating-props

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

@@ -78,10 +78,6 @@ const props = defineProps({
     type: Array<{ showName: string; serverPath: string }>,
     default: () => []
   },
-  handleBeforeUpload: {
-    type: Function,
-    default: () => {}
-  },
   onSuccess: {
     type: Function,
     default: () => {}
@@ -119,7 +115,7 @@ if (props.action) {
   defaultAction.value = props.action
 } else {
   let tempAction = baseURL + '/common/fs-upload'
-  if (!isPlateSys(props.systemCode)) {
+  if (isPlateSys(props.systemCode)) {
     tempAction = baseAPI + '/component/super-form/uploads'
   }
   defaultAction.value = tempAction
@@ -129,7 +125,7 @@ if (!props.headers || !props.headers['Authorization']) {
   props.headers.Authorization = getToken()
 }
 const handleBeforeUpload = (file: File) => {
-  return props.handleBeforeUpload(file)
+  return props.beforeUpload(file)
 }
 const onSuccess = (response: any, uploadFile: UploadFile, uploadFiles: UploadFiles) => {
   // eslint-disable-next-line vue/no-mutating-props

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

@@ -20,11 +20,11 @@
         </el-tag>
       </div>
   </div>
-  <span v-else class="el-upload-list__item-actions">
+  <span v-else class="el-upload-list__item-actions mobile-item-action">
     <span
-      v-if="isPreview(file.showName)"
+      v-if="isPreview(file.showName ? file.showName: file.name)"
       class="el-upload-list__item-preview"
-      @click="preview(file.showName, file.serverPath)"
+      @click="preview(file.showName ? file.showName: file.name, file.serverPath)"
     >
       <el-icon><zoom-in /></el-icon>
     </span>
@@ -38,7 +38,7 @@
     <span
       v-if="!disabled"
       class="el-upload-list__item-delete"
-      @click="handleRemove(file)"
+      @click="handleOnRemove(file)"
     >
       <el-icon><Delete /></el-icon>
     </span>
@@ -48,7 +48,12 @@
   </el-dialog>
 </div>
 </template>
-
+<style scoped>
+/* .el-upload-list--picture-card .el-upload-list__item-actions, */
+.mobile-item-action {
+  z-index: 2000;
+}
+</style>
 <script setup lang="ts">
 import { Close, Paperclip, Download } from '@element-plus/icons-vue'
 import { ref, defineProps } from 'vue'
@@ -104,6 +109,7 @@ const dialogVisible = ref<boolean>(false)
 const previewImageInfo = ref<any>({})
 const previewSrcList = ref<string[]>([])
 const isMobile = ref(isMobileBrowser())
+const emits = defineEmits(['remove'])
 const handleDownload = (file: any) => {
   if (isPromise(props.beforeDownload)) {
     props.beforeDownload(props.pageContext, props.configure, file).then((res: any) => {
@@ -123,7 +129,8 @@ const handleDownload = (file: any) => {
 }
 const download = (file: any) => {
   const token = getToken()
-  const showName = file.showName.replace('#', '~~').replace('?', '~$').replace('&', '$')
+  const fileName = file.showName ? file.showName: file.name
+  const showName = fileName.replace('#', '~~').replace('?', '~$').replace('&', '$')
   let url =
     baseURL +
     '/common/super-form/downloads?showName=' +
@@ -145,10 +152,19 @@ const download = (file: any) => {
   window.location.href = url
 }
 const handleOnRemove = (file: any) => {
-  props.beforeRemove(props.pageContext, props.configure, file)
-  const idnex = props.fileList.findIndex((item: any) => item.serverPath === file.uuid)
-  // eslint-disable-next-line vue/no-mutating-props
-  props.fileList.splice(idnex, 1)
+  let isCanRemove = true
+  if (props.beforeRemove && typeof props.beforeRemove === 'function') {
+    const isMobile = true
+    isCanRemove = props.beforeRemove(props.pageContext, props.configure, file, isMobile)
+  }
+  if (isCanRemove!==undefined && !isCanRemove) {
+    // 不能删除文件
+    return
+  }
+  const index = props.fileList.findIndex((item: any) => (item.serverPath === file.uuid || item.serverPath === file.serverPath))
+  console.log('handleOnRemove----props.fileList=', props.fileList, 'index=', index)
+  props.fileList.splice(index, 1)
+  emits('remove', {file, index: index})
   props.onRemove(file)
 }
 
@@ -156,7 +172,7 @@ const isPromise = (p: any) => {
   return p && Object.prototype.toString.call(p) === '[object Promise]'
 }
 const preview = (showName: string, serverPath: string) => {
-  console.log('preview')
+  console.log('preview----props.fileList=', props.fileList)
 
   let isImg = false
   if (showName && isImage(showName)) {
@@ -166,7 +182,8 @@ const preview = (showName: string, serverPath: string) => {
     previewImageInfo.value.src = getPreviewSrc(showName, serverPath)
     const srcList: string[] = []
     props.fileList.forEach((item: any) => {
-      srcList.push(getPreviewSrc(item.showName, item.serverPath))
+      const fileName = item.showName ? item.showName: item.name
+      srcList.push(getPreviewSrc(fileName, item.serverPath))
     })
     previewSrcList.value = srcList
     dialogVisible.value = true
@@ -221,7 +238,7 @@ 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)) {
+  if (isPlateSys(props.systemCode)) {
     url = baseAPI + '/component/super-form/downloads?jwt=' + token
   }
   url = getReplaceUrlDomain(url)