jufubao-admin-library 1.1.176 → 1.1.177

package/library/viewModules/viewsDynamicForm/viewsDynamicForm/components/dialogField.vue

@@ -95,6 +95,14 @@ export default {
           this.initForm(this.listValue)
         }
       }
+    },
+    'listValue.media_type': {
+      handler(n, o){
+        if(n !== o){
+          if(this.firstIndex++ === 0) return;
+          this.initForm({...this.listValue, media_count: '', media_size: ''})
+        }
+      }
     }
   },
   computed: {
@@ -108,6 +116,7 @@ export default {
       renderFormKey: "renderFormKey",
       dataInfo: null,
       interval: null,
+      firstIndex: 0,
     }
   },
   created(){
@@ -151,6 +160,11 @@ export default {
         // other['date_type'] = validate_type;
         // other['date_range'] = rule ? rule.date_range : "";
       }
+      if(field_type === 'media'){
+        other['media_type'] = validate_type;
+        other['media_count'] = rule['media_count'];
+        other['media_size'] = rule['media_size'];
+      }
       if(this.baseType === 'answer'){
         if(field_type === 'radio'){
           other['answer'] = answer[0];
@@ -172,7 +186,7 @@ export default {
           ele: "xd-select-list",
           valueKey: "field_type",
           value: params.field_type || "",
-          className: "input40",
+          className: "input60",
           list: this.fieldList,
           disabled: !!this.fieldData,
           rules: [
@@ -185,7 +199,7 @@ export default {
           valueKey: "field_name",
           value: params.field_name || "",
           placeholder: "请输入标题",
-          className: "input40",
+          className: "input60",
           rules: [
             { required: true, message: "请输入标题", trigger: "blur" },
           ]
@@ -206,7 +220,7 @@ export default {
           valueKey: "explain",
           value: params.explain || "",
           placeholder: "请输入标题说明",
-          className: "input40",
+          className: "input60",
           extendClass: params.is_show_explain === 'Y' ? "" : "jfb-hidden"
         },
         showPlaceholder && {
@@ -215,7 +229,7 @@ export default {
           valueKey: "placeholder",
           value: params.placeholder || "",
           placeholder: "请填写提示语",
-          className: "input40",
+          className: "input60",
         },
         {
           label: "必填项:",
@@ -282,7 +296,7 @@ export default {
             { label: "单选", value: "N" },
             { label: "多选", value: "Y" },
           ],
-          className: "input40",
+          className: "input60",
         },
         params.field_type === 'date' && {
           label: "日期",
@@ -293,6 +307,63 @@ export default {
             { required: true, message: "请选择是否必填", trigger: "blur" },
           ]
         },
+        params.field_type === 'media' && [
+          {
+            label: "上传类型:",
+            ele: "xd-radio",
+            valueKey: "media_type",
+            value: params.media_type || "image",
+            list: [
+              { label: "图片", value: "image" },
+              { label: "视频", value: "video" },
+            ],
+            rules: [
+              { required: true, message: "请选择上传类型", trigger: "blur" },
+            ]
+          },
+          params.media_type !== 'video' &&{
+            label: "上传数量:",
+            ele: "el-input",
+            type: "number",
+            valueKey: "media_count",
+            value: params.media_count,
+            placeholder: "请填写可上传张数（最多可上传9张）",
+            className: "input60",
+            rules: [
+              { required: true, message: "请输入上传数量", trigger: "blur" },
+              { validator: (rule, value, callback) => {
+                if(value.toString().indexOf('.') > -1){
+                  callback(new Error('请输入正确的上传数量'));
+                }else if(value > 9){
+                  callback(new Error('最多可上传9张'));
+                } else if(value < 1){
+                  callback(new Error('最少上传一张'));
+                }else{
+                  callback()
+                }
+              } },
+            ]
+          },
+          {
+            label: "上传大小:",
+            ele: "el-input",
+            type: "number",
+            valueKey: "media_size",
+            value: params.media_size,
+            placeholder: "上传单个文件大小（单位：MB）",
+            className: "input60",
+            rules: [
+              { required: true, message: "请输入上传大小", trigger: "blur" },
+              { validator: (rule, value, callback) => {
+                if(value <= 0 || value > 1024){
+                  callback(new Error('请输入正确的上传文件大小'));
+                }else{
+                  callback()
+                }
+              } },
+            ]
+          }
+        ],
         this.baseType === 'answer' && {
           label: "是否校验答案:",
           ele: "xd-radio",
@@ -313,7 +384,7 @@ export default {
           value: params.answer || [],
           list: params.options,
           multiple: params.field_type === 'checkbox' ? true : false,
-          className: "input40",
+          className: "input60",
           rules: [
             { required: true, message: "请选择正确选项", trigger: "blur" },
           ]

package/library/viewModules/viewsDynamicForm/viewsDynamicForm/config.vue

@@ -74,6 +74,7 @@ export default {
         { label: "多选", value: "checkbox", placeholder: false },
         { label: "下拉框", value: "select", placeholder: true },
         { label: "日期", value: "date", placeholder: false },
+        { label: "视频图片文件", value: "media", placeholder: false },
         // { label: "年月日", value: "datepicker", placeholder: false}
       ],
       dialogVisible: false,
@@ -154,7 +155,7 @@ export default {
     },
     handleCreateField(data){
       console.log("handleCreateField", data);
-      const { rule, options, multiple, date_rule, answer, ...postData } = data;
+      const { rule, options, multiple, date_rule, answer, media_type, media_count, media_size, ...postData } = data;
       let form_id = this.form_id;
       //input\textarea 规则
       if(rule && rule.limit){
@@ -178,6 +179,15 @@ export default {
         postData['validate_type'] = date_type; //日期选择方式
         postData['validate_rules'] = JSON.stringify(dateOther);
       }
+      //图、视频文件
+      if(data.field_type === 'media'){
+        postData['validate_type'] = media_type;
+        postData['validate_rules'] = JSON.stringify({
+          media_count: media_type === 'image' ?  media_count : 1,
+          media_size: media_size
+        });
+      }
+
       if(typeof answer === 'string'){
         postData['answer'] = [answer];
       }else{

package/library/viewModules/viewsDynamicForm/viewsDynamicForm/result_detail.vue

@@ -40,6 +40,25 @@
           <el-radio-group v-if="item.field_type === 'radio'" :value="item.default">
             <el-radio v-for="opt in item.options" :key="opt.value" :label="opt.value">{{opt.label}}</el-radio>
           </el-radio-group>
+          <div v-if="item.field_type === 'media'">
+            <div v-if="!item.default.length" style="width: 300px;">
+              <xd-no-data :height="100" />
+            </div>
+            <template v-else>
+              <div v-if="item.validate_type === 'image'" class="media_wrap">
+                <div v-for="img in item.default" class="media_inner" style="width: 100px;height: 100px;">
+                  <el-image :src="img" style="width: 100px;height: 100px;background-color: #EEE;" fit="contain" :preview-src-list="item.default"></el-image>
+                  <!-- <img :src="img" alt="" style="width: 100px;height: 100px;"> -->
+                </div>
+              </div>
+              <div v-if="item.validate_type === 'video'" class="media_wrap">
+                <div v-for="videoSrc in item.default" class="media_inner">
+                  <video :src="videoSrc" width="320" height="180" controls>
+                  </video>
+                </div>
+              </div>
+            </template>
+          </div>
         </el-form-item>
       </el-form>
     </div>
@@ -47,7 +66,11 @@
 </template>
 <script>
 import { mapActions } from 'vuex';
+import XdNoData from "@/components/XdNoData"
 export default {
+  components: {
+    XdNoData
+  },
   data(){
     return {
       formList: [],
@@ -69,8 +92,9 @@ export default {
         if(item.is_show_explain !== 'Y'){
           item.explain = "";
         }
+        var myValue = "";
         try{
-          let myValue = JSON.parse(item.default);
+          myValue = JSON.parse(item.default);
           if(item.field_type === 'radio'){
             item.default = Array.isArray(myValue) ? myValue[0] : myValue+'';
           }
@@ -78,13 +102,16 @@ export default {
             item.default = Array.isArray(myValue) ? myValue : myValue.split(",");
           }
         }catch(e){
-          let myValue = item.default
+          myValue = item.default || "";
           if(item.field_type === 'radio'){
             item.default = myValue;
           }
           if(item.field_type === 'checkbox'){
             item.default = myValue.split(",");
           }
+          if(item.field_type === 'media'){
+            item.default = myValue && myValue.split(",").map(item => this.getImageFullPath(item));
+          }
         }
         return item;
       });
@@ -112,5 +139,13 @@ export default {
       margin-top: -18px;
       margin-left: 10px;
     }
+    .media_wrap{
+      display: flex;
+      flex-wrap: wrap;
+      width: 360px;
+      .media_inner{
+        margin: 0 10px 10px 0;
+      }
+    }
   }
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jufubao-admin-library",
-  "version": "1.1.176",
+  "version": "1.1.177",
   "description": "聚福宝福利后台管理系统公共模块",
   "author": "goashiyong <gaoshiyong1272@vip.163.com>",
   "scripts": {