agilebuilder-ui 1.0.621 → 1.0.962

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

@@ -1,32 +1,65 @@
 <template>
-  <div v-for="(file, index) in fileList" :key="index" style="width: 100%">
-    <el-tag>
-      <el-tooltip content="预览" placement="top">
-        <span style="cursor: pointer" @click="preview(file.showName, file.serverPath)">
-          <el-icon><Paperclip /></el-icon>
-          <span style="margin-left: 6.5px">{{ file.showName }}</span>
-        </span>
-      </el-tooltip>
-      <el-tooltip v-if="!disabled" content="下载" placement="top">
-        <el-icon  @click="handleDownload(file)">
-          <Download />
-        </el-icon>
-      </el-tooltip>
-      <el-tooltip v-if="!disabled" content="移除" placement="top">
-        <el-icon @click="handleOnRemove(file)"><Close /></el-icon>
-      </el-tooltip>
-    </el-tag>
-    <el-dialog v-model="dialogVisible" title="预览" width="500">
-      <el-image :preview-src-list="previewSrcList" :src="previewImageInfo.src" />
-    </el-dialog>
+<div>
+  <div v-if="!isMobile">
+    <div v-for="(file, index) in fileList" :key="index" style="width: 100%">
+        <el-tag>
+          <el-tooltip content="预览" placement="top">
+            <span style="cursor: pointer" @click="preview(file.showName, file.serverPath)">
+              <el-icon><Paperclip /></el-icon>
+              <span style="margin-left: 6.5px">{{ file.showName }}</span>
+            </span>
+          </el-tooltip>
+          <el-tooltip v-if="!disabled" content="下载" placement="top">
+            <el-icon  @click="handleDownload(file)">
+              <Download />
+            </el-icon>
+          </el-tooltip>
+          <el-tooltip v-if="!disabled" content="移除" placement="top">
+            <el-icon @click="handleOnRemove(file)"><Close /></el-icon>
+          </el-tooltip>
+        </el-tag>
+      </div>
   </div>
+  <span v-else class="el-upload-list__item-actions mobile-item-action">
+    <span
+      v-if="isPreview(file.showName ? file.showName: file.name)"
+      class="el-upload-list__item-preview"
+      @click="preview(file.showName ? file.showName: file.name, file.serverPath)"
+    >
+      <el-icon><zoom-in /></el-icon>
+    </span>
+    <span
+      v-if="!disabled"
+      class="el-upload-list__item-delete"
+      @click="handleDownload(file)"
+    >
+      <el-icon><Download /></el-icon>
+    </span>
+    <span
+      v-if="!disabled"
+      class="el-upload-list__item-delete"
+      @click="handleOnRemove(file)"
+    >
+      <el-icon><Delete /></el-icon>
+    </span>
+  </span>
+  <el-dialog v-model="dialogVisible" title="预览" width="500">
+    <el-image :preview-src-list="previewSrcList" :src="previewImageInfo.src" />
+  </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'
-import { getSystemFrontendUrl, isPlateSys } from '../../../src/utils/common-util'
+import { getSystemFrontendUrl, isPlateSys, isMobileBrowser, getReplaceUrlDomain } from '../../../src/utils/common-util'
 import { getToken } from '../../../src/utils/auth'
+import { isImage } from '../../../src/utils/util'
 const props = defineProps({
   systemCode: {
     type: String,
@@ -59,15 +92,24 @@ const props = defineProps({
   beforeDownload: {
     type: Function,
     default: () => {}
+  },
+  file: {
+    type: Object,
+    default: null
+  },
+  baseURL: {
+    type: String,
+    default: null
   }
 })
-const baseURL = window.$vueApp.config.globalProperties.baseURL
+const baseURL = props.baseURL ? props.baseURL: window.$vueApp.config.globalProperties.baseURL
 const baseAPI = window.$vueApp.config.globalProperties.baseAPI
 
 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) => {
@@ -87,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=' +
@@ -109,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)
 }
 
@@ -120,21 +172,23 @@ 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 isImage = false
-  if (showName && /\.(jpg|JPG|jpeg|JPEG|png|PNG|gif|GIF|bmp|BMP|psd|PSD|tif|TIF)$/.test(showName)) {
-    isImage = true
+  let isImg = false
+  if (showName && isImage(showName)) {
+    isImg = true
   }
-  if (isImage) {
+  if (isImg) {
     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
   } else {
+    // 移动端时不能预览文档
     previweDoc(showName, serverPath)
   }
 }
@@ -184,9 +238,10 @@ 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)
   return url + '&showName=' + encodeURI(showName) + '&serverPath=' + serverPath
 }
 
@@ -196,4 +251,16 @@ const formatName = (showName: string) => {
   }
   return showName
 }
+
+const isPreview = (fileName: string) => {
+  if(isMobile.value){
+    if (fileName && isImage(fileName)) {
+      // 移动端时，只能预览图片
+      return true
+    }
+  } else {
+    return true
+  }
+  return false
+}
 </script>

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

@@ -1,64 +1,122 @@
 <template>
   <FsUploadList
-    v-if="displayType === 'input'"
+    v-if="!isMobile && displayType === 'input'"
     :value="props.fileInfo.showName"
     :row="entity"
     :disabled="disabled"
     :fileInfo="fileInfo"
-				:openFsUpload="openFsUpload"
-    :fileSetObj="{ accept: accept, multiple: multiple, limitFileSize: limitFileSize }"
+		:openFsUpload="openFsUpload"
+    :fileSetObj="{ accept: accept, multiple: multiple, limitFileSize: limitFileSize, limit: limitNum }"
     @upload-success="onInputUploadSuccess"
     @delete-success="onInputDeleteSuccess"
   />
   <fs-button-upload
-    v-else-if="displayType === 'button'"
+    v-else-if="!isMobile && displayType === 'button'"
     :disabled="disabled"
     :fileInfo="fileInfo"
     :systemCode="systemCode"
     :accept="accept"
     :multiple="multiple"
-    :limit="limit"
+    :limit="limitNum"
     :limitFileSize="limitFileSize"
     :placeholder="placeholder"
     :action="action"
     :headers="headers"
     :file-list="fileList"
-    :handleBeforeUpload="handleBeforeUpload"
+    :beforeUpload="beforeUpload"
     :onSuccess="onSuccess"
     :beforeRemove="beforeRemove"
     :onRemove="onRemove"
     :beforeDownload="beforeDownload"
     :pageContext="pageContext"
     :configure="configure"
-				:openFsUpload="openFsUpload"
+		:openFsUpload="openFsUpload"
   />
   <fs-drag-upload
-    v-else-if="displayType === 'drag'"
+    v-else-if="!isMobile && displayType === 'drag'"
     :disabled="disabled"
     :fileInfo="fileInfo"
     :systemCode="systemCode"
     :accept="accept"
     :multiple="multiple"
-    :limit="limit"
+    :limit="limitNum"
     :limitFileSize="limitFileSize"
     :placeholder="placeholder"
     :action="action"
     :headers="headers"
     :file-list="fileList"
-    :handleBeforeUpload="handleBeforeUpload"
+    :beforeUpload="beforeUpload"
     :onSuccess="onSuccess"
     :beforeRemove="beforeRemove"
     :onRemove="onRemove"
     :beforeDownload="beforeDownload"
     :pageContext="pageContext"
     :configure="configure"
-				:openFsUpload="openFsUpload"
+		:openFsUpload="openFsUpload"
+  />
+  <FileUploadInputMobile
+    v-else-if="isMobile && displayType === 'input'"
+    ref="fileUploadRef"
+    :disabled="disabled"
+    :fileInfo="fileInfo"
+    :systemCode="systemCode"
+    :accept="accept"
+    :multiple="multiple"
+    :limit="limitNum"
+    :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"
+  />
+  <FileUploadMobile v-else-if="isMobile"
+    ref="fileUploadRef"
+    :disabled="disabled"
+    :fileInfo="fileInfo"
+    :systemCode="systemCode"
+    :accept="accept"
+    :multiple="multiple"
+    :limit="limitNum"
+    :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"
   />
 </template>
 <script setup lang="ts">
 import FsDragUpload from './fs-drag-upload.vue'
 import FsButtonUpload from './fs-button-upload.vue'
+import FileUploadMobile from './file-upload-mobile/file-upload.vue'
+import FileUploadInputMobile from './file-upload-mobile/file-upload-input.vue'
 import { ref, defineProps } from 'vue'
+import { getReplaceUrlDomain, isMobileBrowser, isPlateSys } from '../../../src/utils/common-util'
 const props = defineProps({
 		openFsUpload:{
 				type: Object,
@@ -96,7 +154,7 @@ const props = defineProps({
   },
   limit: {
     type: Number,
-    default: 1
+    default: null
   },
   limitFileSize: {
     type: Number,
@@ -118,7 +176,7 @@ const props = defineProps({
     type: Array<{ showName: string; serverPath: string }>,
     default: () => []
   },
-  handleBeforeUpload: {
+  beforeUpload: {
     type: Function,
     default: () => {}
   },
@@ -145,12 +203,47 @@ const props = defineProps({
   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'
   }
 })
+const isMobile = ref(isMobileBrowser())
+const pageType = ref(props.pageContext.pageType)
+console.log('附件上传控件---fs-upload-new---isMobile=', isMobile.value, 'pageType=', pageType.value , 'systemCode=', props.systemCode ,'configure=', props.configure, 'props.pageContext=', props.pageContext)
 const listFileLabel = ref<string>('')
 if (props.displayType === 'input') {
   listFileLabel.value = props.fileInfo.showName || ''
 }
+let limitNum = ref(null)
+if(props.limit){
+  limitNum.value = props.limit
+} else if(props.multiple){
+  limitNum.value = 9
+} else {
+  limitNum.value = 1
+}
 const onInputUploadSuccess = (res: any) => {
   if (listFileLabel.value) {
     listFileLabel.value = listFileLabel.value + ',' + res.showName
@@ -179,4 +272,58 @@ const onInputDeleteSuccess = (res: any) => {
   listFileLabel.value = props.fileList.map((item: any) => item.showName).join(',')
   props.onRemove()
 }
+
+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
+      })
+    }
+  })
+  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)
+    }
+  }
+  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>

package/packages/index.js

@@ -37,6 +37,9 @@ import DepartmentTreeMobile from './department-tree-mobile'
 import DepartmentUserTreeMobile from './department-user-tree-mobile'
 import SuperIcon from './super-icon'
 import FsUploadNew from './fs-upload-new'
+import ScanCodeInputBrowser from './scan-code-input-browser'
+import WorkgroupTreeMobile from './workgroup-tree-mobile'
+import RowForm from './row-form'
 import * as ElementPlusIconsVue from "@element-plus/icons-vue"
 // 将所有组件都存储起来,方便后续统一注册
 const components = [
@@ -73,7 +76,10 @@ const components = [
   DepartmentTreeMobile,
   DepartmentUserTreeMobile,
 	SuperIcon,
-	FsUploadNew
+	FsUploadNew,
+  ScanCodeInputBrowser,
+  WorkgroupTreeMobile,
+  RowForm
 ]
 
 // 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
@@ -131,7 +137,10 @@ export {
   DepartmentTreeMobile,
   DepartmentUserTreeMobile,
 	SuperIcon,
-	FsUploadNew
+	FsUploadNew,
+  ScanCodeInputBrowser,
+  WorkgroupTreeMobile,
+  RowForm
 }
 
 export default {