agilebuilder-ui 1.1.65-tmp7 → 1.1.65-tmp9

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

@@ -1,436 +0,0 @@
-<template>
-  <span style="width: 100%">
-    <template v-if="!disabled">
-      <template v-if="!isMobile">
-        <fs-preview
-          :enable-delete="true"
-          :entity="row"
-          :disabled="disabled"
-          :fileInfo="fileInfo"
-          :file-set-obj="fileSetObj"
-          :is-sql="isSql"
-          :label="value"
-          :uploading="uploading"
-          :watermark="watermark"
-          @delete-file="deleteRow"
-        >
-          <template #prefix>
-            <div style="display: flex">
-              <el-upload
-                ref="uploadRef"
-                :accept="fileSetObj.accept ? fileSetObj.accept : null"
-                :action="defaultAction"
-                :multiple="fileSetObj.multiple"
-                :before-upload="handleBeforeUpload"
-                :on-progress="uploadOnProgress"
-                :show-file-list="false"
-                :headers="headers"
-                :on-success="uploadOnSuccess"
-                :on-error="onError"
-                :with-credentials="true"
-                name="file"
-              >
-                <el-button size="small" style="margin-right: 5px" bg>
-                  <el-icon><UploadFilled /></el-icon>
-                </el-button>
-              </el-upload>
-              <div v-if="uploading" style="display: flex; align-items: center">
-                <el-tag :style="tagStyle" size="large" class="fs-upload-tag">
-                  上传中：
-                  <span class="fs-upload-tag-text">{{ uoloadingFileName }}</span>
-                  <span class="fs-upload-tag-percent">{{ uploadPercentage }}%</span>
-                </el-tag>
-              </div>
-            </div>
-          </template>
-        </fs-preview>
-      </template>
-      <FileUploadInputMobile
-        v-else
-        ref="fileUploadRef"
-        :disabled="disabled"
-        :fileInfo="fileInfo"
-        :systemCode="systemCode"
-        :accept="fileSetObj.accept ? fileSetObj.accept : null"
-        :multiple="fileSetObj.multiple"
-        :limitFileSize="fileSetObj.limitFileSize"
-        :placeholder="$t('imatrixUIMessage.fileUpload')"
-        :file-list="fileList"
-        :beforeUpload="fileSetObj.beforeUpload"
-        :onSuccess="uploadOnSuccessMobile"
-        :beforeRemove="fileSetObj.beforeRemove"
-        :onRemove="onRemoveMobile"
-        :beforeDownload="fileSetObj.beforeDownload"
-        :pageContext="pageContext"
-        :openFsUpload="openFsUpload"
-        :componentId="componentId"
-        :listCode="listCode"
-        :openCameraOrChoosePhoto="fileSetObj.openCameraOrChoosePhoto"
-        :watermark="watermark"
-      />
-    </template>
-    <template v-else>
-      <fs-preview
-        :entity="row"
-        :disabled="disabled"
-        :fileInfo="fileInfo"
-        :file-set-obj="fileSetObj"
-        :is-sql="isSql"
-        :label="value"
-        :watermark="watermark"
-      />
-    </template>
-  </span>
-</template>
-
-<script>
-import { Delete as ElIconDelete, Upload, View as ElIconView, ZoomIn } from '@element-plus/icons-vue'
-import { $emit } from '../../utils/gogocodeTransfer'
-
-import { getToken } from '../../../src/utils/auth'
-import { isImage } from '../../../src/utils/util'
-import { isPlateSys, isMobileBrowser, getRelativeBaseUrl } from '../../../src/utils/common-util'
-import FsPreview from '../../fs-preview/src/fs-preview.vue'
-import { packageFile } from '../../super-grid/src/utils'
-import FileUploadInputMobile from '../../fs-upload-new/src/file-upload-mobile/file-upload-input.vue'
-import { Base64 } from 'js-base64'
-import { getFileIconByName } from '../../../src/utils/file-util'
-import { ElMessage } from 'element-plus'
-export default {
-  name: 'FsUploadList',
-  props: {
-    value: {
-      type: String,
-      default: null
-    },
-    // name  ','分隔的名称 和serverPath
-    fileInfo: {
-      type: Object,
-      default: () => {
-        return {
-          name: null,
-          serverPath: null
-        }
-      }
-    },
-    fileSetObj: {
-      type: Object,
-      default: () => {
-        return { limitFileSize: 30, multiple: false, accept: null }
-      }
-    },
-    customViewUrl: {
-      type: Boolean,
-      default: false
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    uploadAble: {
-      type: Boolean,
-      default: true
-    },
-    deletaAble: {
-      type: Boolean,
-      default: true
-    },
-    // 文件详细消息
-    fileList: {
-      type: Array,
-      default: () => {
-        return []
-      }
-    },
-    row: {
-      type: Object,
-      default: () => {
-        return {}
-      }
-    },
-    isSql: {
-      type: Boolean,
-      default: false
-    },
-    openFsUpload: {
-      type: Boolean,
-      default: true
-    },
-    pageContext: {
-      type: Object,
-      default: () => ({})
-    },
-    listCode: {
-      type: String,
-      default: null
-    },
-    componentId: {
-      type: String,
-      default: null
-    }
-  },
-  data() {
-    const headers = { Authorization: getToken() }
-    let defaultAction = window.$vueApp.config.globalProperties.baseURL + '/common/fs-upload'
-    if (isPlateSys(window.$vueApp.config.globalProperties.systemCode)) {
-      defaultAction = window.$vueApp.config.globalProperties.baseAPI + '/component/super-form/uploads'
-    }
-    defaultAction = getRelativeBaseUrl(defaultAction)
-    const isMobile = isMobileBrowser()
-    const systemCode = this.pageContext && this.pageContext.systemCode ? this.pageContext.systemCode : null
-    const watermark = this.fileSetObj.watermark
-    return {
-      deleteUuids: [],
-      headers,
-      defaultAction,
-      annexUploadFlag: false,
-      showPreviewSingleImage: false,
-      showPreviewMulti: false,
-      lastFileName: null,
-      previewImageInfo: {},
-      showFileList: this.fileList,
-      isMobile,
-      systemCode,
-      watermark,
-      uploading: false,
-      uploadPercentage: 0,
-      uoloadingFileName: ''
-    }
-  },
-  components: {
-    FsPreview,
-    ElIconView,
-    ElIconDelete,
-    FileUploadInputMobile
-  },
-  created() {
-    this.fileList.length = 0
-    this.fileList.push(...this.getFileList())
-  },
-  computed: {
-    tagStyle() {
-      const p = Math.max(0, Math.min(100, Number(this.uploadPercentage || 0)))
-      const primary = '#409EFF'
-      const rest = 'rgba(255,255,255,0.92)'
-      const bg = `linear-gradient(90deg, ${primary} ${p}%, ${rest} ${p}%)`
-      const color = p >= 50 ? '#fff' : '#303133'
-      return {
-        background: bg,
-        color,
-        transition: 'background 0.3s linear'
-      }
-    }
-  },
-  mounted() {},
-  methods: {
-    getFileList() {
-      const fileList = []
-      if (this.fileInfo?.serverPath) {
-        const uuids = this.fileInfo.serverPath.split(',')
-        const names = this.fileInfo.showName.split(',')
-        for (let i = 0; i < uuids.length; i++) {
-          if (uuids[i]) {
-            fileList.push({
-              serverPath: uuids[i],
-              showName: names[i]
-            })
-          }
-        }
-      }
-      return fileList
-    },
-    openAnnexUpload() {
-      if (this.openFsUpload) {
-        this.annexUploadFlag = true
-      }
-    },
-    handleBeforeUpload(file) {
-      let limitFileSize = this.fileSetObj.limitFileSize
-      console.log('handleBeforeUpload-----limitFileSize=', limitFileSize)
-      if (!limitFileSize) {
-        // 默认是30M
-        limitFileSize = 30
-      }
-      if (file.size > limitFileSize * 1024 * 1024) {
-        // 超过最大限制
-        this.$message({
-          type: 'warning',
-          message: this.$t('imatrixUIMessage.exceedFileSize', {
-            fileSize: limitFileSize
-          }),
-          showClose: true
-        })
-        // 返回false停止上传
-        return false
-      }
-      const beforeUpload = this.fileSetObj.beforeUpload
-      if (beforeUpload) {
-        const result = beforeUpload.call(this, {
-          pageContext: this.fileSetObj.pageContext,
-          configureObj: this.fileSetObj.configureObj,
-          file: file
-        })
-        if (result !== undefined && result !== null && result !== true) {
-          return false
-        }
-      }
-    },
-    // 上传成功
-    uploadOnSuccess(response, file) {
-      if (response) {
-        ElMessage({ type: 'success', message: this.$t('fsUpload.uploadSucceeded') })
-        $emit(this, 'upload-success', {
-          showName: response.name,
-          serverPath: response.serverPath
-        })
-        if (this.fileSetObj.multiple) {
-          if (this.fileInfo.showName) {
-            this.fileInfo.showName = this.fileInfo.showName + ',' + response.name
-            this.fileInfo.serverPath = this.fileInfo.serverPath + ',' + response.serverPath
-          } else {
-            this.fileInfo.showName = response.name
-            this.fileInfo.serverPath = response.serverPath
-          }
-        } else {
-          this.fileInfo.showName = response.name
-          this.fileInfo.serverPath = response.serverPath
-        }
-      }
-      this.annexUploadFlag = false
-      // reset upload progress
-      this.uploading = false
-      this.uploadPercentage = 0
-    },
-    deleteRow(deleteFile) {
-      // this.fileList.splice(index, 1)
-      const nameArr = []
-      const pathArr = []
-      let deleteFileIndex = -1
-      for (let i = 0; i < this.fileList.length; i++) {
-        if (this.fileList[i].serverPath !== deleteFile.serverPath) {
-          nameArr.push(this.fileList[i].showName)
-          pathArr.push(this.fileList[i].serverPath)
-        } else {
-          deleteFileIndex = i
-        }
-      }
-      if (nameArr.length === 0) {
-        this.fileInfo.showName = null
-        this.fileInfo.serverPath = null
-        this.fileList.length = 0
-        $emit(this, 'delete-success', { deleteFile: deleteFile, all: [] })
-        $emit(this, 'delete', [], deleteFileIndex)
-      } else {
-        this.fileInfo.showName = nameArr.join(',')
-        this.fileInfo.serverPath = pathArr.join(',')
-        $emit(this, 'delete-success', {
-          deleteFile: deleteFile,
-          all: this.fileList
-        })
-        $emit(this, 'delete', this.fileList, deleteFileIndex)
-      }
-    },
-    // 移动端上传成功
-    uploadOnSuccessMobile() {
-      console.log('uploadOnSuccessMobile-------this.fileList=', this.fileList)
-      $emit(this, 'upload-success', this.fileList)
-    },
-    // 移动端删除附件
-    onRemoveMobile() {
-      console.log('onRemoveMobile-------this.fileList=', this.fileList)
-      $emit(this, 'delete', this.fileList)
-    },
-    pickFileDone(data) {
-      console.log('fs-upload-list------pickFileDone-------data=', data)
-      this.$refs.fileUploadRef.pickFileDone(data)
-    },
-    uploadFileDone(data) {
-      this.$refs.fileUploadRef.uploadFileDone(data)
-    },
-    getFileIconByName(fileName) {
-      return getFileIconByName(fileName)
-    },
-    onError(err, file) {
-      console.log('upload error:', err, file)
-      this.uploading = false
-      this.uploadPercentage = 0
-
-      let serverMsg = this.$t('fsUpload.uploadFailed')
-      try {
-        const resp = file && file.xhr && (file.xhr.response || file.xhr.responseText)
-        if (resp) {
-          const data = typeof resp === 'string' ? JSON.parse(resp) : resp
-          serverMsg = data?.message || data?.msg || data?.error || serverMsg
-        }
-      } catch (e) {
-        // ignore parse errors
-      }
-
-      ElMessage({ type: 'error', message: serverMsg })
-      $emit(this, 'on-error', { err, file })
-    },
-    uploadOnProgress(evt, file, fileList) {
-      try {
-        this.uoloadingFileName = file.name
-        const percent = evt && evt.percent ? Math.floor(evt.percent) : 0
-        this.uploading = true
-        if (percent === 100) {
-          this.uploadPercentage = 99
-        } else {
-          this.uploadPercentage = percent
-        }
-      } catch (e) {
-        this.uploading = false
-        this.uploadPercentage = 0
-      }
-    },
-    abortUpload() {
-      try {
-        // Element Plus upload exposes abort method on component ref
-        if (this.$refs.uploadRef && typeof this.$refs.uploadRef.abort === 'function') {
-          // abort all uploads
-          this.$refs.uploadRef.abort()
-        }
-      } catch (e) {
-        console.error('abortUpload error', e)
-      }
-      this.uploading = false
-      this.uploadPercentage = 0
-    }
-  },
-  emits: ['close', 'upload-success', 'delete-success', 'delete', 'update:value', 'close', 'update:value', 'on-error']
-}
-</script>
-<style lang="scss" scoped>
-.amb-color-iconfont {
-  width: 30px;
-  height: 30px;
-}
-.amb-list-preivew-name {
-  margin-left: 10px;
-  cursor: pointer;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.fs-upload-tag {
-  border: 1px solid #dcdfe6;
-  padding: 4px 8px;
-  background-clip: padding-box;
-  overflow: hidden;
-  display: inline-flex;
-  align-items: center;
-}
-.fs-upload-tag-text {
-  margin-right: 8px;
-  max-width: 120px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.fs-upload-tag-percent {
-  font-weight: 600;
-  margin-left: 4px;
-}
-</style>

package/packages/fs-upload-new/index.ts

@@ -1,6 +0,0 @@
-import FsUploadNew from './src/fs-upload-new.vue'
-FsUploadNew.install = function (Vue) {
-  window.$vueApp.component(FsUploadNew.name, FsUploadNew)
-}
-
-export default FsUploadNew

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

@@ -1,276 +0,0 @@
-<template>
-  <div>
-    <FileUploadComponent
-      ref="fileUploadRef"
-      :disabled="disabled"
-      :systemCode="systemCode"
-      :accept="accept"
-      :multiple="multiple"
-      :limitFileSize="limitFileSize"
-      :fileList="fileListResult"
-      :beforeRemove="beforeRemove"
-      :onRemove="onRemove"
-      :beforeDownload="beforeDownload"
-      :baseURL="baseURLVal"
-      :watermark="watermark"
-      @chooseFile="pickBrowserFiles"
-      @remove="removeFile"
-    />
-  </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
-    }
-  },
-  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: () => {}
-  },
-  // 水印配置{isShowWatermark:true/false,content:'xxxxx'}
-  watermark:{
-    type: Object,
-    default: () => ({})
-  }
-})
-
-const fileListResult = ref(props.fileList)
-let baseURL = window.$vueApp.config.globalProperties.baseURL
-if (props.pageContext && props.pageContext.backendUrl) {
-  baseURL = props.pageContext.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'])
-const sourceType = ref(['album', 'camera'])
-if (props.openCameraOrChoosePhoto) {
-  if (props.openCameraOrChoosePhoto === 'openCamera') {
-    sourceType.value = ['camera']
-  } else if (props.openCameraOrChoosePhoto === 'openChoosePhoto') {
-    sourceType.value = ['album']
-  }
-}
-// 表示点击了选择文件按钮
-function pickBrowserFiles() {
-  // alert('pickBrowserFiles')
-  console.log('---点击了选择文件按钮---')
-  let message = {
-    type: 'pickFiles',
-    sourceType: sourceType.value,
-    multiple: props.multiple,
-    componentId: props.componentId,
-    componentName: props.componentName,
-    systemCode: props.systemCode,
-    token: getToken(),
-    listCode: props.listCode
-  }
-  // if(window.parent && window.parent.parent && window.parent.parent.parent ) {
-  // console.log('---点击了选择文件按钮111---')
-  // message.myCustom = 'window.parent.parent.parent'
-  //   // 加上uniapp中的iframe，一共是4层iframe嵌套时.最多支持4层iframe嵌套。
-  //   window.parent.parent.parent.postMessage(JSON.stringify(message), '*')
-  // } else
-  if (window.parent && window.parent.parent) {
-    console.log('---点击了选择文件按钮222---')
-    message.myCustom = 'window.parent.parent'
-    // 加上uniapp中的iframe，一共是3层iframe嵌套时
-    window.parent.parent.postMessage(JSON.stringify(message), '*')
-  } else {
-    console.log('---点击了选择文件按钮444---')
-    message.myCustom = 'window.parent'
-    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
-      }
-    }
-  }
-  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 })
-  }
-}
-defineExpose({ pickFileDone, uploadFileDone })
-</script>
-
-<style lang="scss" scoped></style>