jufubao-forms 1.0.3 → 1.0.4-beta1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jufubao-forms",
-  "version": "1.0.3",
+  "version": "1.0.4-beta1",
   "private": false,
   "description": "聚福宝表单业务插件库",
   "main": "index.js",

package/src/components/JfbFormsDynamicForm/Api.js

@@ -63,4 +63,14 @@ module.exports = [
     isConsole: true,
     disabled: true,
   },
+  {
+    mapFnName: "getConOssSign",
+    title: "获取上传参数",
+    path: "/common-user/v1/h5-oss/sign",
+    isRule: false,
+    data: {
+    },
+    isConsole: true,
+    disabled: true,
+  },
 ];

package/src/components/JfbFormsDynamicForm/JfbFormsDynamicForm.vue

@@ -81,6 +81,34 @@
                   @change="e => handleDateTimePicker(e, item)">
                 </uni-datetime-picker>
               </template>
+              <template v-if="item.field_type === 'media'">
+                <view v-if="item.validate_type==='image'" class="img_list">
+                  <view class="img_box" v-for="(img, i) in form[item.field_value]" :key="i">
+                    <image :src="getServiceUrl(img)" class="img_item" mode="aspectFit" @click="handlePreview(i)"></image>
+                    <view class="close_box" @click.stop="removeMedia(item, i)">
+                      <view class="close_box-inner">
+                        <xd-font-icon icon="iconguanbi" color="#333333" size="28"></xd-font-icon>
+                      </view>
+                    </view>
+                  </view>
+                  <view v-if="form[item.field_value].length < item.media_count" class="img_box img_add" @click="doAddImage(item)">
+                    <view class="icon">+</view>
+                  </view>
+                </view>
+                <view v-else-if="item.validate_type==='video'" class="img_list">
+                  <view class="img_box" v-for="(videoSrc, i) in form[item.field_value]" :key="i">
+                    <video style="width: 100%;height: 100%;" :src="getServiceUrl(videoSrc)"></video>
+                    <view class="close_box" @click.stop="removeMedia(item, i)">
+                      <view class="close_box-inner">
+                        <xd-font-icon icon="iconguanbi" color="#333333" size="28"></xd-font-icon>
+                      </view>
+                    </view>
+                  </view>
+                  <view v-if="showUploadVideos.length < item.media_count" class="img_box img_add" @click="doAddVideo(item)">
+                    <view class="icon">+</view>
+                  </view>
+                </view>
+              </template>
               <!-- <xd-form-date v-if="item.field_type === 'calendar'"
                 v-model="form[item.field_value]"
                 :type="item.validate_type"
@@ -199,6 +227,8 @@
         loaded: false,
         isPreview: false,
         emptyImage: getServiceUrl('/common/empty/qa.png'),
+        uploadImgList: [],
+        uploadVideoList: [],
 
         //面板
         submitPagePath: "",
@@ -222,6 +252,12 @@
       },
       bucket(){
         return this.formBe == 1 ? 'default' : 'saas';
+      },
+      showUploadImages(){
+        return this.uploadImgList.map(item => getServiceUrl(item))
+      },
+      showUploadVideos(){
+        return this.uploadVideoList.map(item => getServiceUrl(item))
       }
     },
     watch: {
@@ -238,6 +274,7 @@
       //todo
     },
     methods: {
+      getServiceUrl,
       onJfbLoad(options) {
         if (!this.isPreview){
           if(!options.form_id) {
@@ -302,6 +339,8 @@
 
                 if(limit.showDefaultValue){
                   this.form[item.field_value] = item.default;
+                }else{
+                  this.form[item.field_value] = "";
                 }
               }catch(e){}
             }else if(item.default){
@@ -333,6 +372,12 @@
                 }
               }catch(e){}
             }
+            if(item.field_type === 'media'){
+              let mediaRule = JSON.parse(item.validate_rules);
+              item['media_size'] = mediaRule['media_size'];
+              item['media_count'] = mediaRule['media_count'];
+              this.$set(this.form, item.field_value, [])
+            }
             console.log(item, "item")
             return item;
           });
@@ -343,6 +388,16 @@
           this.$xdHideLoading();
         })
       },
+      /**
+       * @description 监听事件变化
+       * @param container {object} 业务组件对象自己
+       */
+      init(container) {
+        this.submitPagePath = getContainerPropsValue(container, 'content.submitPagePath', {value: ""}).value;
+        this.formBe = getContainerPropsValue(container, 'content.formBe', '1');
+        this.qaListPath = getContainerPropsValue(container, 'content.qaListPath', {value: ""}).value;
+        // this.description = getContainerPropsValue(container, 'content.description', "");
+      },
       setFieldItemTop(){
         const query = uni.createSelectorQuery().in(this);
         this.dynamicFormList = this.dynamicFormList.map(item => {
@@ -401,15 +456,104 @@
         let valid_token = this.$xdUniHelper.randomChar(20);
         this.valid_token = valid_token;
       },
-      /**
-       * @description 监听事件变化
-       * @param container {object} 业务组件对象自己
-       */
-      init(container) {
-        this.submitPagePath = getContainerPropsValue(container, 'content.submitPagePath', {value: ""}).value;
-        this.formBe = getContainerPropsValue(container, 'content.formBe', '1');
-        this.qaListPath = getContainerPropsValue(container, 'content.qaListPath', {value: ""}).value;
-        // this.description = getContainerPropsValue(container, 'content.description', "");
+      removeMedia(item, i){
+        this.form[item.field_value].splice(i, 1);
+      },
+      doAddImage(item){
+        uni.chooseImage({
+          count: 1,
+          sourceType: ['camera'],
+          success: async (res) => {
+            console.log('chooseImage',res);
+            // let filePath = res.tempFilePaths[0];
+            let file = res.tempFiles[0];
+            //文件file不能大于item.media_size(MB)
+            if(file.size > item.media_size * 1024 * 1024){
+              uni.showToast({
+                title: '图片大小不能超过' + item.media_size + 'MB',
+                duration: 2000,
+                icon: "none"
+              });
+              return;
+            }
+            this.$xdShowLoading({});
+            try{
+              let image = await this.uploadImage(file);
+              this.form[item.field_value].push(image);
+              this.handleClearError(item);
+              this.$xdHideLoading();
+            }catch(err){
+              this.$xdHideLoading();
+            }
+          }
+        })
+      },
+      doAddVideo(item){
+        uni.chooseVideo({
+          sourceType: ['album', 'camera'],
+          success: async (res) => {
+            console.log('chooseVideo',res);
+            let file = res.tempFile;
+            if(file.size > item.media_size * 1024 * 1024){
+              uni.showToast({
+                title: '视频大小不能超过' + item.media_size + 'MB',
+                duration: 2000,
+                icon: "none"
+              });
+              return;
+            }
+            this.$xdShowLoading({});
+            try{
+              let video = await this.uploadImage(file);
+              this.form[item.field_value].push(video);
+              this.handleClearError(item);
+              this.$xdHideLoading();
+            }catch(err){
+              this.$xdHideLoading();
+            }
+          }
+        })
+      },
+      uploadImage(file){
+        let fileName = file.name;
+        return new Promise((resolve, reject) => {
+          jfbRootExec("getConOssSign", {
+            vm: this,
+            data: { name: fileName }
+          }).then(res => {
+            let OSSAccessKeyId = res['id']
+            let cdnUrl = res['cdn_url']
+            delete res['id']
+            delete res['cdn_url']
+            uni.uploadFile({
+              url: res.action,
+              file: file,
+              name: 'file',
+              formData: {
+                ...res,
+                OSSAccessKeyId: OSSAccessKeyId,
+                name: fileName,
+                cdnUrl: cdnUrl,
+                success_action_status: 200
+              },
+              success: (r) => {
+                resolve(`/${res.key}`);
+              },
+              fail:(err)=>{
+                resolve('');
+                console.error(err)
+              }
+            });
+          }).catch(err => {
+            reject(err);
+          })
+        })
+      },
+      handlePreview(i){
+        uni.previewImage({
+          current: i,
+          urls: this.showUploadImages
+        })
       },
       handleClearError(item){
         this.$set(item, "error", "")
@@ -477,28 +621,23 @@
           item.error = "";
           let fieldValue = this.form[item.field_value];
           console.log(fieldValue, "fieldValue")
-
-          if(item.required && !fieldValue){
-            let errTip = "";
-            if(item.field_type === 'text' || item.field_type === 'textarea'){
-              errTip = "请填写" + item.field_name;
-            }else{
+          let errTip = "";
+          if(item.required){
+            if(fieldValue === undefined || fieldValue === null || fieldValue === ''){
+              if(item.field_type === 'text' || item.field_type === 'textarea'){
+                errTip = "请填写" + item.field_name;
+              }else{
+                errTip = "请选择" + item.field_name;
+              }
+            } else if(Array.isArray(fieldValue) && fieldValue.length === 0){
               errTip = "请选择" + item.field_name;
             }
+          } else if(item.field_type === 'text'){
+            errTip = this.validFromText(item, fieldValue);
+          }
+          if(errTip) {
             item.error = errTip;
             err_arr.push(item);
-          }else if(item.required && item.field_type === 'select'){
-            if(fieldValue === '' || fieldValue.length == 0){
-              let errTip = "请选择" + item.field_name;
-              item.error = errTip;
-              err_arr.push(item);
-            }
-          }else if(item.field_type === 'text'){
-            let errTip = this.validFromText(item, fieldValue);
-            if(errTip) {
-              item.error = errTip;
-              err_arr.push(item);
-            }
           }
         })
         console.log(this.dynamicForm);
@@ -732,7 +871,56 @@
           }
         }
       }
+      .img_list{
+        display: flex;
+        flex-wrap: wrap;
+        .img_box{
+          width: 200rpx;
+          height: 200rpx;
+          border-radius: 16rpx;
+          border: 1px solid #E0E0E0;
+          margin-right: 20rpx;
+          margin-bottom: 20rpx;
+          position: relative;
+          .close_box{
+            position: absolute;
+            top: 0;
+            right: 0;
+            padding: 10rpx;
+            .close_box-inner{
+              width: 40rpx;
+              height: 40rpx;
+              border-radius: 50%;
+              background-color: #FFFFFF;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+            }
+          }
+          .img_item{
+            width: 100%;
+            height: 100%;
+          }
 
+          &.img_add{
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background-color: #EEEEEE;
+            .icon{
+              // border: 1px solid #E0E0E0;
+              width: 36rpx;
+              height: 36rpx;
+              border-radius: 6rpx;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              color: #999999;
+              font-size: 48rpx;
+            }
+          }
+        }
+      }
       .align-center{
         display: flex;
         align-items: center;