agilebuilder-ui 1.0.73 → 1.0.74-tmp2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agilebuilder-ui",
-  "version": "1.0.73",
+  "version": "1.0.74-tmp2",
   "type": "module",
   "private": false,
   "main": "./lib/super-ui.js",
@@ -12,7 +12,6 @@
     "@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",
@@ -20,6 +19,7 @@
     "path-to-regexp": "6.2.1",
     "sortablejs": "^1.15.0",
     "tinymce": "5.8.2",
+    "compressorjs": "1.2.1",
     "uuid": "^9.0.1"
   },
   "devDependencies": {

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

@@ -1,249 +1,410 @@
 <template>
   <div>
-    <FileUploadComponent
-      ref="fileUploadRef"
-      :disabled="disabled"
-      :systemCode="systemCode"
-      :accept="accept"
+    <q-uploader
+      :url="defaultAction"
+      label="Upload"
+      field-name="file"
+      :with-credentials="true"
       :multiple="multiple"
-      :limitFileSize="limitFileSize"
-      :fileList="fileListResult"
-      :beforeRemove="beforeRemove"
-      :onRemove="onRemove"
-      :beforeDownload="beforeDownload"
-      :baseURL="baseURLVal"
-      @chooseFile="pickBrowserFiles"
-      @remove="removeFile"
-    />
+    >
+      <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>
   </div>
 </template>
-<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
-  },
-  entity: {
-    type: Object,
-    default: () => {
-      return null
+
+<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
     }
   },
-  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'
+  data () {
+    let fileList = []
+    if (this.fileResult) {
+      fileList = JSON.parse(JSON.stringify(this.fileResult))
     }
-  },
-  // 组件名称，一般是字段label
-  componentName: {
-    type: String,
-    default: function () {
-      return 'file-upload'
+    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
     }
   },
-  options: {
-    type: Object,
-    default: null
-  },
-  // 列表编码
-  listCode: {
-    type: String,
-    default: null
-  },
-  // 打开相机和相册选项，默认是都可以打开
-  openCameraOrChoosePhoto: {
-    type: String,
-    default: 'openCameraAndChoosePhoto'
+  watch: {
+    fileResult (val) {
+      this.fileList = JSON.parse(JSON.stringify(val))
+    }
   },
-  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
+  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 })
+        }
+      }
+      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)
-}
-
-function removeFile(param) {
-  console.log('removeFile----param=', param)
-  const file = param.file
-  if (file) {
-    emits('remove', { rmFiles: [file], serverFiles: fileListResult.value, index: param.index })
-  }
 }
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+
+</style>