agilebuilder-ui 1.0.621 → 1.0.962

package/packages/dynamic-source-select/src/events.js

@@ -20,7 +20,7 @@ const events = {
    * @param {*} tag 移除的tag值
    */
   removeTag: function (remote, tag) {
-    this.$emit( 'remove-tag', tag)
+    this.$emit('remove-tag', tag)
     if (Array.isArray(this.value)) {
       if (this.value.length === 1 && remote) {
         this.clearMarkValue()
@@ -33,38 +33,33 @@ const events = {
    */
   clear: function () {
     this.clearMarkValue()
-    this.$emit( 'clear')
+    this.$emit('clear')
   },
   /**
    * 当 input 失去焦点时触发
    * @param {*} event
    */
   blur: function (event) {
-    this.$emit( 'blur', event)
+    this.$emit('blur', event)
   },
   /**
    * 当 input 获得焦点时触发
    * @param {*} event
    */
   focus: function (event) {
-    this.$emit( 'focus', event)
+    this.$emit('focus', event)
   },
   input(newValue) {
-    this.$emit( 'update:value', newValue)
+    this.$emit('update:value', newValue)
   },
   getSelectedOptionItem(selectValue) {
-    if (
-      this.baseProps.multiple !== undefined &&
-      this.baseProps.multiple === true &&
-      Array.isArray(selectValue)
-    ) {
+    if (this.baseProps.multiple !== undefined && this.baseProps.multiple === true && Array.isArray(selectValue)) {
       const selected = []
       for (var i = 0; i < selectValue.length; i++) {
-        selected.push(
-          this.optionItems.find((item) => {
-            return item[this.valueAttribute] === selectValue[i]
-          })
-        )
+        const value = this.optionItems.find((item) => {
+          return item[this.valueAttribute] === selectValue[i]
+        })
+        selected.push(value)
       }
       return selected
     } else {
@@ -72,6 +67,6 @@ const events = {
         return item[this.valueAttribute] === selectValue
       })
     }
-  },
+  }
 }
 export default events

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

@@ -1,102 +1,126 @@
 <template>
-  <div>
+  <span>
     <template v-if="!disabled">
-      <el-input
-        ref="item"
-        :disabled="disabled"
-        :model-value="value"
-        :placeholder="$t('imatrixUIMessage.fileUpload')"
-        :readonly="true"
-      >
-        <template v-slot:append>
-          <el-button v-if="!disabled" :icon="ElIconUpload2" size="default" @click="openAnnexUpload" />
-          <el-button :icon="ElIconZoomIn" size="default" @click="preview" />
-        </template>
-      </el-input>
+      <template v-if="!isMobile">
+        <el-input
+          ref="item"
+          :disabled="disabled"
+          :model-value="value"
+          :placeholder="$t('imatrixUIMessage.fileUpload')"
+          :readonly="true"
+        >
+          <template v-slot:append>
+            <el-button v-if="!disabled" :icon="ElIconUpload2" size="default" @click="openAnnexUpload" />
+            <el-button :icon="ElIconZoomIn" size="default" @click="preview" />
+          </template>
+        </el-input>
 
-      <el-dialog
-        v-model="annexUploadFlag"
-        :append-to-body="true"
-        :show-close="true"
-        :title="$t('imatrixUIMessage.upload')"
-        width="30%"
-      >
-        <el-upload
-          v-if="annexUploadFlag"
-          :accept="fileSetObj.accept ? fileSetObj.accept : null"
-          :action="defaultAction"
-          :multiple="fileSetObj.multiple"
-          :before-upload="handleBeforeUpload"
-          :headers="headers"
-          :on-success="uploadOnSuccess"
-          :with-credentials="true"
-          name="file"
+        <el-dialog
+          v-model="annexUploadFlag"
+          :append-to-body="true"
+          :show-close="true"
+          :title="$t('imatrixUIMessage.upload')"
+          width="30%"
+        >
+          <el-upload
+            v-if="annexUploadFlag"
+            :accept="fileSetObj.accept ? fileSetObj.accept : null"
+            :action="defaultAction"
+            :multiple="fileSetObj.multiple"
+            :before-upload="handleBeforeUpload"
+            :headers="headers"
+            :on-success="uploadOnSuccess"
+            :with-credentials="true"
+            name="file"
+          >
+            <el-button>{{ $t('imatrixUIMessage.upload') }}</el-button>
+          </el-upload>
+        </el-dialog>
+        <el-dialog
+          v-model="showPreviewSingleImage"
+          :append-to-body="true"
+          :show-close="true"
+          :title="$t('imatrixUIPublicModel.previewImage')"
+          @close="$emit('close')"
+        >
+          <template v-slot:title>
+            <span
+              >{{ $t('imatrixUIPublicModel.previewImage') }}
+              <!-- <i v-if="downloadable" class="el-icon-download" style="padding-left:5px;cursor:pointer;color:#409EFF" @click="downloadFile()" /> -->
+              <!-- <i v-if="deleteable" class="el-icon-delete" style="padding-left:5px;cursor:pointer;color:#F56C6C" @click="deleteFile()" /> -->
+            </span>
+          </template>
+          <el-image
+            v-if="previewImageInfo && previewImageInfo.isImg"
+            :preview-src-list="[previewImageInfo.src]"
+            :src="previewImageInfo.src"
+          />
+        </el-dialog>
+        <el-dialog
+          v-model="showPreviewMulti"
+          :append-to-body="true"
+          :show-close="true"
+          :title="$t('imatrixUIPublicModel.preview')"
+          width="30%"
+          @close="$emit('close')"
         >
-          <el-button>{{ $t('imatrixUIMessage.upload') }}</el-button>
-        </el-upload>
-      </el-dialog>
-      <el-dialog
-        v-model="showPreviewSingleImage"
-        :append-to-body="true"
-        :show-close="true"
-        :title="$t('imatrixUIPublicModel.previewImage')"
-        @close="$emit('close')"
-      >
-        <template v-slot:title>
-          <span
-            >{{ $t('imatrixUIPublicModel.previewImage') }}
-            <!-- <i v-if="downloadable" class="el-icon-download" style="padding-left:5px;cursor:pointer;color:#409EFF" @click="downloadFile()" /> -->
-            <!-- <i v-if="deleteable" class="el-icon-delete" style="padding-left:5px;cursor:pointer;color:#F56C6C" @click="deleteFile()" /> -->
-          </span>
-        </template>
-        <el-image
-          v-if="previewImageInfo && previewImageInfo.isImg"
-          :preview-src-list="[previewImageInfo.src]"
-          :src="previewImageInfo.src"
-        />
-      </el-dialog>
-      <el-dialog
-        v-model="showPreviewMulti"
-        :append-to-body="true"
-        :show-close="true"
-        :title="$t('imatrixUIPublicModel.preview')"
-        width="30%"
-        @close="$emit('close')"
-      >
-        <template v-slot:title>
-          <span
-            >{{ $t('imatrixUIPublicModel.preview') }}
-            <!-- <i v-if="downloadable" class="el-icon-download" style="padding-left:5px;cursor:pointer;color:#409EFF" @click="downloadFile()" /> -->
-            <!-- <i v-if="deleteable" class="el-icon-delete" style="padding-left:5px;cursor:pointer;color:#F56C6C" @click="deleteFile()" /> -->
-          </span>
-        </template>
-        <el-table :data="showFileList" :show-header="false">
-          <el-table-column prop="showName" width="300" />
-          <el-table-column align="right">
-            <template v-slot="scope">
-              <el-tooltip :content="$t('imatrixUIPublicModel.preview')" class="item" effect="dark" placement="top">
-                <el-icon style="cursor: pointer" @click="previewSingle(scope.row)">
-                  <el-icon-view />
-                </el-icon>
-              </el-tooltip>
-            </template>
-          </el-table-column>
-          <el-table-column v-if="!disabled">
-            <template v-slot="scope">
-              <el-tooltip :content="$t('imatrixUIPublicModel.delete')" class="item" effect="dark" placement="top">
-                <el-icon style="cursor: pointer" @click="deleteRow(scope.$index)">
-                  <el-icon-delete />
-                </el-icon>
-              </el-tooltip>
-            </template>
-          </el-table-column>
-        </el-table>
-      </el-dialog>
+          <template v-slot:title>
+            <span
+              >{{ $t('imatrixUIPublicModel.preview') }}
+              <!-- <i v-if="downloadable" class="el-icon-download" style="padding-left:5px;cursor:pointer;color:#409EFF" @click="downloadFile()" /> -->
+              <!-- <i v-if="deleteable" class="el-icon-delete" style="padding-left:5px;cursor:pointer;color:#F56C6C" @click="deleteFile()" /> -->
+            </span>
+          </template>
+          <el-table :data="showFileList" :show-header="false">
+            <el-table-column prop="showName" width="300" />
+            <el-table-column align="right">
+              <template v-slot="scope">
+                <el-tooltip :content="$t('imatrixUIPublicModel.preview')" class="item" effect="dark" placement="top">
+                  <el-icon style="cursor: pointer" @click="previewSingle(scope.row)">
+                    <el-icon-view />
+                  </el-icon>
+                </el-tooltip>
+              </template>
+            </el-table-column>
+            <el-table-column v-if="!disabled">
+              <template v-slot="scope">
+                <el-tooltip :content="$t('imatrixUIPublicModel.delete')" class="item" effect="dark" placement="top">
+                  <el-icon style="cursor: pointer" @click="deleteRow(scope.$index)">
+                    <el-icon-delete />
+                  </el-icon>
+                </el-tooltip>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-dialog>
+      </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"
+      />
     </template>
     <template v-else>
       <fs-preview :entity="row" :file-set-obj="fileSetObj" :is-sql="isSql" :label="value" />
     </template>
-  </div>
+  </span>
 </template>
 
 <script>
@@ -110,36 +134,13 @@ import { $emit } from '../../utils/gogocodeTransfer'
 
 import { getToken } from '../../../src/utils/auth'
 import { isImage } from '../../../src/utils/util'
-import { getSystemFrontendUrl, isPlateSys } from '../../../src/utils/common-util'
+import { getSystemFrontendUrl, isPlateSys, isMobileBrowser } 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'
+
 
 export default {
-  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'
-    }
-    return {
-      deleteUuids: [],
-      headers,
-      defaultAction,
-      annexUploadFlag: false,
-      showPreviewSingleImage: false,
-      showPreviewMulti: false,
-      lastFileName: null,
-      previewImageInfo: {},
-      showFileList: this.fileList,
-      ElIconUpload2,
-      ElIconZoomIn
-    }
-  },
-  components: {
-    FsPreview,
-    ElIconView,
-    ElIconDelete
-  },
   name: 'FsUploadList',
   props: {
     value: {
@@ -195,10 +196,52 @@ export default {
       type: Boolean,
       default: false
     },
-				openFsUpload:{
-						type: Boolean,
-						default: true
-				}
+    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'
+    }
+    const isMobile = isMobileBrowser()
+    const systemCode = this.pageContext && this.pageContext.systemCode? this.pageContext.systemCode: null
+    return {
+      deleteUuids: [],
+      headers,
+      defaultAction,
+      annexUploadFlag: false,
+      showPreviewSingleImage: false,
+      showPreviewMulti: false,
+      lastFileName: null,
+      previewImageInfo: {},
+      showFileList: this.fileList,
+      ElIconUpload2,
+      ElIconZoomIn,
+      isMobile,
+      systemCode
+    }
+  },
+  components: {
+    FsPreview,
+    ElIconView,
+    ElIconDelete,
+    FileUploadInputMobile
   },
   created() {},
   mounted() {},
@@ -210,7 +253,8 @@ export default {
     },
     handleBeforeUpload(file) {
       let limitFileSize = this.fileSetObj.limitFileSize
-      if (limitFileSize === undefined) {
+      console.log('handleBeforeUpload-----limitFileSize=', limitFileSize)
+      if (!limitFileSize) {
         // 默认是30M
         limitFileSize = 30
       }
@@ -351,6 +395,23 @@ export default {
         })
         $emit(this, 'delete', this.showFileList, index)
       }
+    },
+    // 移动端上传成功
+    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)
     }
   },
   emits: ['close', 'upload-success', 'delete-success', 'delete', 'update:value', 'close', 'update:value']

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

@@ -0,0 +1,246 @@
+<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"
+      @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: () => {}
+  }
+})
+
+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'])
+
+// 表示点击了选择文件按钮
+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
+      }
+    }
+  }
+  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>