feat(上传组件): 移动端添加本地文件上传事件处理

lib/vue-form-making-v3/src/components/VantGenerator/GenerateElementItem.vue

@@ -503,6 +503,7 @@
           @on-upload-error="handleOnUploadError"
           @on-upload-remove="handleOnUploadRemove"
           @on-upload-progress="handleOnUploadProgress"
+          @on-upload-local="handleOnUploadLocal"
           :on-select="handleOnUploadSelect"
         ></fm-vant-uploader>
       </template>
@@ -799,6 +800,9 @@ export default {
         return []
       }
     },
+    handleOnUploadLocal () {
+      this.$emit('on-upload-local', this.widget.model)
+    },
   }
 }
 </script>

lib/vue-form-making-v3/src/components/VantGenerator/GenerateForm.vue

@@ -184,6 +184,7 @@
           :blanks="blanks"
           :display="displayFields"
           @input-change="onInputChange"
+          @on-upload-local="handleOnUploadLocal"
           :edit="edit"
           :remote-option="remoteOption"
           :platform="platform"
@@ -310,6 +311,9 @@ export default {
         })
       })
     },
+    handleOnUploadLocal (model) {
+      this.$emit('on-upload-local', model)
+    },
     getData (isValidate = true) {
       return new Promise((resolve, reject) => {
         if (isValidate) {

lib/vue-form-making-v3/src/components/VantGenerator/GenerateFormItem.vue

@@ -31,6 +31,7 @@
       :is-group="isGroup"
       :group="group"
       :field-node="fieldNode ? fieldNode + '.' + widget.model : widget.model"
+      @on-upload-local="handleOnUploadLocal"
     >
       <template v-slot:[blank.name]="scope" v-for="blank in blanks">
         <slot :name="blank.name" :model="scope.model"></slot>
@@ -78,5 +79,10 @@ export default {
     GenerateElementItem
   },
   mixins: [generateFormItemMixin],
+  methods: {
+    handleOnUploadLocal (model) {
+      this.$emit('on-upload-local', model)
+    }
+  }
 }
 </script>

lib/vue-form-making-v3/src/components/VantGenerator/components/Uploader.vue

@@ -85,7 +85,7 @@ const props = defineProps({
 
 })
 
-const emit = defineEmits(['update:modelValue', 'on-upload-success', 'on-upload-error', 'on-upload-remove'])
+const emit = defineEmits(['update:modelValue', 'on-upload-success', 'on-upload-error', 'on-upload-remove', 'on-upload-local'])
 
 const formContext = inject('formContext', {})
 
@@ -298,6 +298,10 @@ function beforeDelete (file) {
   }
   return true
 }
+
+function uploadClick () {
+  emit('on-upload-local')
+}
 </script>
 
 <template>
@@ -324,7 +328,7 @@ function beforeDelete (file) {
   ></van-uploader>
 
   <div v-else class="fm-uploader-wrapper">
-    <van-uploader
+    <!-- <van-uploader
       :max-count="limit"
       :disabled="disabled"
       :multiple="multiple"
@@ -342,9 +346,12 @@ function beforeDelete (file) {
       v-if="!readonly"
     >
       <van-button icon="plus" type="primary">上传文件</van-button>
-    </van-uploader>
+    </van-uploader> -->
+    <span class="fm-uploader-wrapper-badge">{{fileList.length || 0}}</span>
+    <van-button v-if="!readonly" type="primary" @click="uploadClick">{{disabled ? '查看文件' : '上传文件'}}</van-button>
 
-    <div class="fm-uploader-file-list" v-if="!isImage" :class="{'is-readonly': readonly}">
+
+    <!-- <div class="fm-uploader-file-list" v-if="!isImage" :class="{'is-readonly': readonly}">
       <van-cell v-for="item in fileList" :key="item.key" class="fm-uploader-file-item">
         <template #title>
           <van-icon name="file" size="20" />
@@ -362,7 +369,7 @@ function beforeDelete (file) {
           />
         </template>
       </van-cell>
-    </div>
+    </div> -->
   </div>
 
 </template>
@@ -370,6 +377,21 @@ function beforeDelete (file) {
 <style lang="scss" scoped>
 .fm-uploader-wrapper{
   width: 100%;
+  position: relative;
+}
+.fm-uploader-wrapper-badge {
+  position: absolute;
+  left: 82px;
+  top: -6px;
+  background: red;
+  width: 22px;
+  height: 18px;
+  border-radius: 50%;
+  color: white;
+  text-align: center;
+  line-height: 18px;
+  z-index: 100;
+  font-size: 12px;
 }
 .fm-uploader-file-list{
   margin-top: 10px;