agilebuilder-ui 1.0.621 → 1.0.962

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

@@ -0,0 +1,246 @@
+<template>
+  <div>
+    <el-input
+        ref="item"
+        :disabled="disabled"
+        v-model="fileNames"
+        :placeholder="$t('imatrixUIMessage.fileUpload')"
+        :readonly="true"
+      >
+        <template v-slot:append>
+          <el-button :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
+           ref="fileUploadRef"
+          :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"
+          :componentId="componentId"
+          :componentName="componentName"
+          :listCode="listCode"
+          :openCameraOrChoosePhoto="openCameraOrChoosePhoto"
+          @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'
+    }
+  },
+  // 列表编码
+  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=', JSON.stringify(props.fileList),'fileServerPaths=',fileServerPaths, 'fileList=', JSON.stringify(fileList))
+  fileList.forEach(file=>{
+    // 如果已经存在就不要重复添加到fileList中了
+    if(fileServerPaths.indexOf(file.serverPath) < 0){
+      props.fileList.push({
+        showName: file.name,
+        serverPath: file.serverPath
+      })
+    }
+  })
+  console.log('uploadendMobile2222---props.fileList=', JSON.stringify(props.fileList),'fileServerPaths=',fileServerPaths, 'fileList=', JSON.stringify(fileList))
+  fileNames.value =props.fileList.map((item: any) => item.showName).join(',')
+  console.log('uploadendMobile3333---fileNames.value=', fileNames.value)
+  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()
+}
+
+const userAgent = ref(null)
+const fileUploadRef = ref(null)
+const userAgentOrg = navigator.userAgent
+if (userAgentOrg.indexOf(' uni-app ') > 0) {
+  // 表示uni-app中访问的
+  userAgent.value = 'app'
+} else {
+  // 表示手机浏览器访问的
+  userAgent.value = 'browser'
+}
+// 移动端选择文件结束
+function pickFileDone(data) {
+  if (userAgent.value === 'app') {
+    fileUploadRef.value.pickFileDone(data)
+  }
+}
+// 移动端上传文件结束
+function uploadFileDone(data) {
+  if (userAgent.value === 'app') {
+    fileUploadRef.value.uploadFileDone(data)
+  }
+}
+defineExpose({pickFileDone,uploadFileDone})
+</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"
+      :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"
+      :componentId="componentId"
+      :componentName="componentName"
+      :listCode="listCode"
+      :openCameraOrChoosePhoto="openCameraOrChoosePhoto"
+      @uploadend="uploadedFile"
+      @remove="removeFile"
+    />
+    <file-upload-browser
+      v-else-if="userAgent === 'browser'"
+      ref="fileUploadRef"
+      :file-list="fileList"
+      :multiple="multiple"
+      :disabled="disabled"
+      :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"
+      :componentId="componentId"
+      :componentName="componentName"
+      :listCode="listCode"
+      :openCameraOrChoosePhoto="openCameraOrChoosePhoto"
+      @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'
+    }
+  },
+  // 列表编码
+  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

@@ -7,7 +7,7 @@
     :show-file-list="false"
     auto-upload
     :headers="headers"
-				:disabled="!openFsUpload"
+    :disabled="!openFsUpload"
     :action="defaultAction"
     :multiple="multiple"
     :before-upload="handleBeforeUpload"
@@ -16,11 +16,11 @@
   >
     <el-button size="small" type="primary">{{ placeholder }}</el-button>
     <template #tip>
-      <el-text size="small"> {{ accept }} 上传的文件不超过{{ limitFileSize }}M</el-text>
+      <el-text size="small"> {{ accept }} {{$t('imatrixUIMessage.uploadFileTip',{fileSzie: limitFileSize})}}</el-text>
     </template>
   </el-upload>
   <template v-if="fileList && fileList.length > 0">
-    <fs-preview-new :disabled="disabled" :file-list="fileList" :system-code="systemCode" />
+    <fs-preview-new :disabled="disabled" :file-list="fileList" :system-code="systemCode" :before-remove="beforeRemove" :on-remove="onRemove" :before-download="beforeDownload"/>
   </template>
 </template>
 
@@ -31,10 +31,10 @@ import { getToken } from '../../../src/utils/auth'
 import type { UploadFile, UploadFiles } from 'element-plus'
 import fsPreviewNew from './fs-preview-new.vue'
 const props = defineProps({
-		openFsUpload:{
-				type: Boolean,
-				default: true
-		},
+  openFsUpload: {
+    type: Boolean,
+    default: true
+  },
   systemCode: {
     type: String,
     default: ''
@@ -75,10 +75,6 @@ const props = defineProps({
     type: Array<{ showName: string; serverPath: string }>,
     default: () => []
   },
-  handleBeforeUpload: {
-    type: Function,
-    default: () => {}
-  },
   onSuccess: {
     type: Function,
     default: () => {}
@@ -116,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
@@ -126,7 +122,8 @@ if (!props.headers || !props.headers['Authorization']) {
   props.headers.Authorization = getToken()
 }
 const handleBeforeUpload = (file: File) => {
-  return props.handleBeforeUpload(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

@@ -18,11 +18,11 @@
     <el-icon class="el-icon--upload"><upload-filled /></el-icon>
     <div class="el-upload__text">{{ placeholder }}</div>
     <template #tip>
-      <el-text size="small"> {{ accept }} 上传的文件不超过{{ limitFileSize }}M</el-text>
+      <el-text size="small"> {{ accept }} {{$t('imatrixUIMessage.uploadFileTip',{fileSzie: limitFileSize})}}</el-text>
     </template>
   </el-upload>
   <template v-if="fileList && fileList.length > 0">
-    <fs-preview-new :disabled="disabled" :file-list="fileList" :system-code="systemCode" />
+    <fs-preview-new :disabled="disabled" :file-list="fileList" :system-code="systemCode"  :before-remove="beforeRemove" :on-remove="onRemove" :before-download="beforeDownload" />
   </template>
 </template>
 
@@ -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