agilebuilder-ui 1.0.75 → 1.0.76

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agilebuilder-ui",
-  "version": "1.0.75",
+  "version": "1.0.76",
   "type": "module",
   "private": false,
   "main": "./lib/super-ui.js",
@@ -12,6 +12,7 @@
     "@tinymce/tinymce-vue": "4.0.4",
     "@zxing/library": "^0.20.0",
     "async-validator": "^4.2.5",
+    "compressorjs": "1.2.1",
     "font-awesome": "^4.7.0",
     "js-base64": "^3.7.7",
     "js-cookie": "^3.0.5",
@@ -19,12 +20,12 @@
     "path-to-regexp": "6.2.1",
     "sortablejs": "^1.15.0",
     "tinymce": "5.8.2",
-    "compressorjs": "1.2.1",
     "uuid": "^9.0.1"
   },
   "devDependencies": {
     "@element-plus/icons-vue": "^2.1.0",
     "@vitejs/plugin-vue": "^4.2.3",
+    "axios": "^1.5.1",
     "element-plus": "^2.4.1",
     "nprogress": "^0.2.0",
     "sass": "^1.69.4",
@@ -34,7 +35,6 @@
     "vue": "3.3.4",
     "vue-i18n": "^9.5.0",
     "vue-router": "^4.2.5",
-    "vuex": "^4.1.0",
-    "axios": "^1.5.1"
+    "vuex": "^4.1.0"
   }
 }

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

@@ -1,410 +1,250 @@
 <template>
   <div>
-    <q-uploader
-      :url="defaultAction"
-      label="Upload"
-      field-name="file"
-      :with-credentials="true"
+    <FileUploadComponent
+      ref="fileUploadRef"
+      :disabled="disabled"
+      :systemCode="systemCode"
+      :accept="accept"
       :multiple="multiple"
-    >
-      <template v-slot:header>
-        <div class="row no-wrap items-center q-pa-sm q-gutter-xs">
-          <q-btn
-            v-if="newFiles.length > 0"
-            icon="clear_all"
-            round
-            dense
-            flat
-          />
-          <q-btn
-            v-if="fileList.length > 0"
-            icon="done_all"
-            round
-            dense
-            flat
-          />
-          <q-spinner
-            v-if="isUploading && !disable"
-            class="q-uploader__spinner"
-          />
-          <q-btn
-            v-if="!disable"
-            type="a"
-            icon="add_box"
-            round
-            dense
-            flat
-            @click="pickFiles"
-          />
-          <q-btn
-            v-if="!disable"
-            icon="cloud_upload"
-            round
-            dense
-            flat
-            @click="uploadFiles"
-          />
-          <q-btn
-            v-if="showClose"
-            icon="close"
-            round
-            dense
-            flat
-            @click="$emit('close')"
-          >
-            <q-tooltip>Close</q-tooltip>
-          </q-btn>
-        </div>
-      </template>
-      <template v-slot:list>
-        <q-list separator>
-          <q-item
-            v-for="(tempFile,index) in newFiles"
-            :key="index"
-            active
-            active-class="bg-teal-1 text-grey-8"
-          >
-            <q-item-section>
-              <q-item-label class="full-width ellipsis">
-                {{ tempFile.name }}
-              </q-item-label>
-            </q-item-section>
-
-            <q-item-section
-              v-if="isImg(tempFile)"
-              thumbnail
-            >
-              <img :src="tempFile.base64Path">
-            </q-item-section>
-
-            <q-item-section
-              v-if="!disable"
-              side
-            >
-              <q-btn
-                size="12px"
-                color="red"
-                flat
-                dense
-                round
-                icon="delete"
-                @click.native="removeFile(index,true,tempFile.name)"
-              />
-            </q-item-section>
-          </q-item>
-        </q-list>
-        <q-list separator>
-          <q-item
-            v-for="(myFile,index) in fileList"
-            :key="myFile.serverPath"
-          >
-            <q-item-section>
-              <q-item-label class="full-width ellipsis">
-                {{ myFile.name }}
-              </q-item-label>
-            </q-item-section>
-
-            <q-item-section
-              v-if="isImg(myFile)"
-              thumbnail
-            >
-              <img :src="imgSrc+'&showName='+ encodeURI(myFile.name) + '&serverPath=' + myFile.serverPath">
-            </q-item-section>
-
-            <q-item-section
-              top
-              side
-            >
-              <div
-                class="q-col-gutter-xs row items-start"
-              >
-                <div class="col">
-                  <q-btn
-                    size="12px"
-                    flat
-                    dense
-                    round
-                    icon="download"
-                    @click.native="downloadFile(myFile)"
-                  />
-                </div>
-                <div
-                  v-if="!disable"
-                  class="col"
-                >
-                  <q-btn
-                    size="12px"
-                    color="red"
-                    flat
-                    dense
-                    round
-                    icon="delete"
-                    @click.native="removeFile(index,false,myFile.name)"
-                  />
-                </div>
-              </div>
-            </q-item-section>
-          </q-item>
-        </q-list>
-      </template>
-    </q-uploader>
+      :limitFileSize="limitFileSize"
+      :fileList="fileListResult"
+      :beforeRemove="beforeRemove"
+      :onRemove="onRemove"
+      :beforeDownload="beforeDownload"
+      :baseURL="baseURLVal"
+      @chooseFile="pickBrowserFiles"
+      @remove="removeFile"
+    />
   </div>
 </template>
-
-<script>
-import Vue from 'vue'
-import {
-  getToken
-} from '../../../src/utils/auth.js' // 获得token
-export default {
-  name: 'FileUploadApp',
-  props: {
-    systemCode: {
-      type: String,
-      default: null
-    },
-    multiple: {
-      type: Boolean,
-      default: false
-    },
-    // 已上传文件列表
-    fileResult: {
-      type: Array,
-      default: null
-    },
-    showClose: {
-      type: Boolean,
-      default: true
-    },
-    // 是否禁止编辑，为true只能下载，不能删除和上传
-    disable: {
-      type: Boolean,
-      default: false
-    },
-    // 文件大小限制，单位是M
-    limitFileSize: {
-      type: Number,
-      default: null
-    },
-    beforeUpload: {
-      type: Function,
-      default: null
-    },
-    beforeRemove: {
-      type: Function,
-      default: null
-    },
-    // 组件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
-    }
+<script lang="ts" setup>
+import { ref, defineEmits } from 'vue'
+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
   },
-  data () {
-    let fileList = []
-    if (this.fileResult) {
-      fileList = JSON.parse(JSON.stringify(this.fileResult))
+  entity: {
+    type: Object,
+    default: () => {
+      return null
     }
-    const defaultAction = Vue.prototype.baseAPI + '/component/super-form/uploads'
-    const token = getToken()
-    let baseURL
-    if (this.options) {
-      baseURL = this.options.backendUrl
-    }
-    if (!baseURL) {
-      baseURL = Vue.prototype.baseURL
-    }
-    const imgSrc = baseURL + '/common/super-form/downloads?jwt=' + token
-    return {
-      defaultAction,
-      fileList,
-      imgSrc,
-      newFiles: [],
-      isUploading: false, // 是否正在上传
-      baseURL
+  },
+  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'
     }
   },
-  watch: {
-    fileResult (val) {
-      this.fileList = JSON.parse(JSON.stringify(val))
+  // 组件名称，一般是字段label
+  componentName: {
+    type: String,
+    default: function () {
+      return 'file-upload'
     }
   },
-  methods: {
-    addFile (files) {
-      if (this.multiple) {
-        this.newFiles = this.newFiles.concat(files)
-      } else {
-        if (files && files.length > 0) {
-          this.newFiles = files
-        } else {
-          this.newFiles = []
-        }
-      }
-      this.$emit('pickup-file', this.newFiles)
-    },
-    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
-    },
-    removeFile (index, isTemp, fileName) {
-      if (!isTemp) {
-        // 表示是已经上传了的文件
-        const rmFile = JSON.parse(JSON.stringify(this.fileList[index]))
-        this.fileList.splice(index, 1)
-        this.$emit('remove', { rmFiles: [rmFile], serverFiles: this.fileList })
-      } else {
-        // 表示是新添加，还未上传的文件
-        const rmFile = JSON.parse(JSON.stringify(this.newFiles[index]))
-        this.newFiles.splice(index, 1)
-        this.$emit('remove', { rmFiles: [rmFile], serverFiles: this.fileList, newFiles: this.newFiles })
-        // console.log('---点击了删除文件按钮，发送postmessage给手机端---')
-        const message = {
-          type: 'removeFiles',
-          files: [fileName],
-          componentId: this.componentId,
-          componentName: this.componentName
-        }
-        window.parent.postMessage(JSON.stringify(message), '*')
-      }
-    },
-    downloadFile (file) {
-      this.$emit('download', file)
-    },
-    // 表示点击了选择文件按钮
-    pickFiles () {
-      // console.log('---点击了选择文件按钮---')
-      const message = {
-        type: 'pickFiles',
-        multiple: this.multiple,
-        componentId: this.componentId,
-        componentName: this.componentName,
-        systemCode: this.systemCode,
-        token: getToken(),
-        listCode: this.listCode
-      }
-      window.parent.postMessage(JSON.stringify(message), '*')
-    },
-    // 表示点击了上传按钮
-    uploadFiles () {
-      // console.log('---点击了上传按钮---this.newFiles=', this.newFiles)
-      if (this.newFiles && this.newFiles.length > 0) {
-        this.isUploading = true
-        // const message = {
-        //   type: 'uploadFiles',
-        //   systemCode: this.systemCode,
-        //   token: getToken(),
-        //   limitFileSize: this.limitFileSize,
-        //   componentId: this.componentId,
-        //   componentName: this.componentName
-        // }
-        let isCanUpload = true
-        if (this.beforeUpload && typeof (this.beforeUpload) === 'function') {
-          for (let i = 0; i < this.newFiles.length; i++) {
-            const file = this.newFiles[i]
-            const isMobile = true
-            // eslint-disable-next-line no-useless-call
-            isCanUpload = this.beforeUpload.call(this, file, isMobile)
-            if (isCanUpload !== undefined && isCanUpload === false) {
-              break
-            }
-          }
-        }
-        if (!isCanUpload) {
-        // 不能提交文件
-          return
-        }
-        // window.parent.postMessage(JSON.stringify(message), '*')
-        this.uploadFileSuccess(this.newFiles)
-      } else {
-        this.$emit('uploadend', this.fileList)
-      }
-    },
-    cleareQueuedFiles () {
-      // console.log('---cleareQueuedFiles---')
-      this.newFiles = []
-      // console.log('---点击了清空临时文件按钮，发送postmessage给手机端---')
-      const message = {
-        type: 'clearFiles',
-        componentId: this.componentId,
-        componentName: this.componentName
-      }
-      window.parent.postMessage(JSON.stringify(message), '*')
-    },
-    clearUploadedFiles () {
-      // console.log('---clearUploadedFiles---')
-      this.fileList = []
-    },
-    pickFileDone (data) {
-      this.appFileDone(data)
-    },
-    uploadFileDone (data) {
-      // 表示文件上传到服务器成功
-      this.appFileDone(data)
-    },
-    appFileDone (data) {
-      const files = data.files
-      let myFiles = files
-      if (files && typeof files === 'string') {
-        myFiles = JSON.parse(files)
-      }
-      if (myFiles && !Array.isArray(myFiles)) {
-        myFiles = [myFiles]
-      }
-      if (data.type === 'pickFileDone') {
-        // 选择文件完成
-        console.log('appFileDone11111----myFiles=', JSON.stringify(myFiles))
-        this.addFile(myFiles)
-      } else {
-        // 表示文件上传到服务器成功
-        console.log('appFileDone22222----myFiles=', JSON.stringify(myFiles))
-        this.uploadFileSuccess(myFiles)
-      }
-    },
-    uploadFileSuccess (files) {
-      this.isUploading = false
-      // 表示文件上传到服务器成功
-      if (files) {
-        // files:[{name:'',serverPath:''},{name:'',serverPath:''}]
-        if (this.multiple) {
-          this.$set(this, 'fileList', this.fileList.concat(files))
-        } else {
-          // 单选时将已选文件移除，然后再替换为新上传的文件
-          const rmFiles = JSON.parse(JSON.stringify(this.fileList))
-          this.fileResult[0] = files
-          this.$set(this, 'fileList', files)
-          this.$emit('remove', { rmFiles, serverFiles: this.fileList })
-        }
+  options: {
+    type: Object,
+    default: null
+  },
+  // 列表编码
+  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.options) {
+  baseURL = props.options.backendUrl
+}
+if (!baseURL) {
+  baseURL = window.$vueApp.config.globalProperties.baseURL
+}
+const baseURLVal = ref(baseURL)
+
+const baseAPI = window.$vueApp.config.globalProperties.baseAPI
+const fileUploadRef = ref(null)
+const emits = defineEmits(['remove', 'uploadend'])
+
+// 表示点击了选择文件按钮
+function pickBrowserFiles() {
+  // console.log('---点击了选择文件按钮---')
+  const message = {
+    type: 'pickFiles',
+    multiple: props.multiple,
+    componentId: props.componentId,
+    componentName: props.componentName,
+    systemCode: props.systemCode,
+    token: getToken(),
+    listCode: props.listCode
+  }
+  window.parent.postMessage(JSON.stringify(message), '*')
+}
+
+function pickFileDone(data) {
+  appFileDone(data)
+}
+function uploadFileDone(data) {
+  // 表示文件上传到服务器成功
+  appFileDone(data)
+}
+function appFileDone(data) {
+  const files = data.files
+  let myFiles = files
+  if (files && typeof files === 'string') {
+    myFiles = JSON.parse(files)
+  }
+  if (myFiles && !Array.isArray(myFiles)) {
+    myFiles = [myFiles]
+  }
+  uploadFileSuccess(myFiles)
+}
+function uploadFileSuccess(files) {
+  // this.isUploading = true
+  let isCanUpload = true
+  if (props.beforeUpload && typeof props.beforeUpload === 'function') {
+    for (let i = 0; i < files.length; i++) {
+      const file = files[i]
+      const isMobile = true
+      // eslint-disable-next-line no-useless-call
+      isCanUpload = props.beforeUpload({
+        fileObj: file,
+        files: files,
+        isMobile,
+        pageContext: props.pageContext,
+        configureObj: props.configure
+      })
+      if (isCanUpload !== undefined && isCanUpload === false) {
+        break
       }
-      console.log('uploadFileSuccess111111----this.fileList=', JSON.stringify(this.fileList))
-      this.$set(this, 'newFiles', [])
-      this.$set(this, 'isUploading', false)
-      this.$emit('uploadend', this.fileList)
     }
   }
+  if (isCanUpload !== undefined && !isCanUpload) {
+    // 不能提交文件
+    return
+  }
+  // this.isUploading = false
+  // 表示文件上传到服务器成功
+  if (files) {
+    // files:[{name:'',serverPath:''},{name:'',serverPath:''}]
+    if (props.multiple) {
+      files.forEach((file) => {
+        fileListResult.value.push(file)
+      })
+    } else {
+      // 单选时将已选文件移除，然后再替换为新上传的文件
+      const rmFiles = JSON.parse(JSON.stringify(fileListResult.value))
+      fileListResult.value = files
+      emits('remove', { rmFiles, serverFiles: fileListResult.value })
+    }
+  }
+  console.log('uploadFileSuccess111111----fileListResult.value=', JSON.stringify(fileListResult.value))
+  
+  fileUploadRef.value.changeFileList(fileListResult.value)
+  // this.isUploading = false
+  emits('uploadend', fileListResult.value)
 }
-</script>
 
-<style lang="scss" scoped>
+function removeFile(param) {
+  console.log('removeFile----param=', param)
+  const file = param.file
+  if (file) {
+    emits('remove', { rmFiles: [file], serverFiles: fileListResult.value, index: param.index })
+  }
+}
+defineExpose({pickFileDone,uploadFileDone})
+</script>
 
-</style>
+<style lang="scss" scoped></style>