no message

src/views/mallManagement/setActivity/answer.vue

@@ -1,8 +1,14 @@
 <template>
-  <el-dialog title="新增活动内容" width="800px" :modal="true" :visible.sync="showBool" :before-close="formCancel">
+  <el-dialog
+    title="新增活动内容"
+    width="800px"
+    :close-on-click-modal="false"
+    :modal="true"
+    :visible.sync="showBool"
+    :before-close="formCancel"
+  >
     <zj-form-container ref="formRef" :form-data="formData" :styleSwitch="false">
-      <zj-form-module title="" label-width="100px" :showHade="false" :form-data="formData"
-        :form-items="formItems">
+      <zj-form-module title="" label-width="100px" :showHade="false" :form-data="formData" :form-items="formItems">
       </zj-form-module>
     </zj-form-container>
     <div slot="footer" class="dialog-footer">
@@ -15,222 +21,281 @@
 <script>
 import ImageUpload from '@/components/file-upload'
 export default {
-  props:{
-    defaultData:{
+  props: {
+    defaultData: {
       type: Object,
-      default: ()=>({}),
-    },
+      default: () => ({})
+    }
   },
   components: {
     ImageUpload
   },
   data() {
     return {
-      showBool:true,
-      formData: Object.assign({
-        question: "",
-        type: 1,
-        isRequire: true,
-        answerType: '',
-        answer: [],
-      }, this.defaultData),
+      showBool: true,
+      formData: Object.assign(
+        {
+          question: '',
+          type: 1,
+          isRequire: true,
+          answerType: '',
+          answer: []
+        },
+        this.defaultData
+      )
     }
   },
   computed: {
     formItems() {
-      return [{
-        md: 24,
-        name: 'slot-component',
-        formItemAttributes: {
-          label: '',
-          prop: '',
-        },
-        render: (h, { props, onInput }) => {
-          return <div/>
-        }
-      },{
-        md: 24,
-        isShow: true,
-        name: 'el-input',
-        attributes: { placeholder: '请输入' },
-        formItemAttributes: {
-          label: '名称',
-          prop: 'question',
-          rules: [{ required: true, message: '请输入', trigger: 'blur' }]
+      return [
+        {
+          md: 24,
+          name: 'slot-component',
+          formItemAttributes: {
+            label: '',
+            prop: ''
+          },
+          render: (h, { props, onInput }) => {
+            return <div />
+          }
         },
-      },
-      {
-        md: 24,
-        isShow: true,
-        name: 'el-radio',
-        options: [{ label: "单选题", value: 1 }, { label: "多选题", value: 2 }, { label: "填写", value: 3 }, { label: "图片", value: 4 }, { label: "视频", value: 5 }],
-        attributes: { filterable: true, placeholder: '请选择', disabled: false },
-        formItemAttributes: {
-          label: '类型',
-          prop: 'type',
-          rules: [{ required: true, message: '请选择', trigger: 'blur' }]
+        {
+          md: 24,
+          isShow: true,
+          name: 'el-input',
+          attributes: { placeholder: '请输入' },
+          formItemAttributes: {
+            label: '名称',
+            prop: 'question',
+            rules: [{ required: true, message: '请输入', trigger: 'blur' }]
+          }
         },
-        events: {
-          change: (newVal) => {
-            if (!!~[1,2].indexOf(newVal)) {
-              this.formData.answer = []
-            } else {
-              setTimeout(() => {
-                this.formData.answer = [
-                  {
-                    option_name: "",
-                    option_value: "",
-                    option_files: [],
-                    option_limit: '',
-                  }
-                ]
-              }, 250);
+        {
+          md: 24,
+          isShow: true,
+          name: 'el-radio',
+          options: [
+            { label: '单选题', value: 1 },
+            { label: '多选题', value: 2 },
+            { label: '填写', value: 3 },
+            { label: '图片', value: 4 },
+            { label: '视频', value: 5 }
+          ],
+          attributes: { filterable: true, placeholder: '请选择', disabled: false },
+          formItemAttributes: {
+            label: '类型',
+            prop: 'type',
+            rules: [{ required: true, message: '请选择', trigger: 'blur' }]
+          },
+          events: {
+            change: newVal => {
+              if (!!~[1, 2].indexOf(newVal)) {
+                this.formData.answer = []
+              } else {
+                setTimeout(() => {
+                  this.formData.answer = [
+                    {
+                      option_name: '',
+                      option_value: '',
+                      option_files: [],
+                      option_limit: ''
+                    }
+                  ]
+                }, 250)
+              }
             }
           }
-        }
-      },
-      {
-        md: 24,
-        isShow: true,
-        name: 'el-radio',
-        options: [{ label: "是", value: true }, { label: "否", value: false }],
-        attributes: { filterable: true, placeholder: '请选择', disabled: false },
-        formItemAttributes: {
-          label: '是否必填',
-          prop: 'isRequire',
-          rules: [{ required: true, message: '请选择', trigger: 'blur' }]
-        }
-      },
-      ...(()=>{
-        if(!!~[1, 2].indexOf(this.formData.type)){
-          return [{
-            md: 24,
-            isShow: true,
-            name: 'el-radio',
-            options: [{ label: "图文结合", value: 1 }, { label: "纯文字", value: 2 }, { label: "纯图片", value: 3 }],
-            attributes: { filterable: true, placeholder: '请选择', disabled: false },
-            formItemAttributes: {
-              label: '选项类型',
-              prop: 'answerType',
-              rules: [{ required: true, message: '请选择', trigger: 'blur' }]
-            }
-          },{
-            md: 24,
-            name: 'slot-component',
-            attributes: { placeholder: '请输入' },
-            formItemAttributes: {
-              label: '试题选项',
-              prop: 'answer',
-              rules: [{ required: true, message: '请添加选项', trigger: 'blur' }]
-            },
-            render: (h, { props, onInput }) => {
-              var { value } = props
-              return (
-                <div>
-                  <div>
-                    <el-button size="mini" onClick={() => {
-                      this.formData.answer.push({
-                        option_name: "",
-                        option_value: "",
-                        option_files: [],
-                        option_limit: '',
-                      })
-                    }} type="primary">添加</el-button>
-                  </div>
-                  {this.formData.answer.map((item, index) => {
-                    item.option_name = `选项${index + 1}`
-                    return (
-                      <div>
-                        <div style="display: flex;justify-content: space-between;">
-                          <span style="font-weight: bold;">{this.formData.answer[index].option_name}</span>
-                          <span style="color: red;" onClick={() => {
-                            this.formData.answer.splice(index, 1)
-                          }}>删除</span>
-                        </div>
-                        <div class="redbordererr">
-                          {~[1,2].indexOf(this.formData.answerType)?<el-form-item
-                            label=""
-                            lebel-width="0px"
-                            prop={`answer.${index}.option_value`}
-                            rules={[{ required: true, message: '请填写', trigger: 'blur' }]}
-                          >
-                            <el-input type="textarea" rows={2} placeholder="请输入内容" value={this.formData.answer[index].option_value} onInput={(val) => { this.formData.answer[index].option_value = val }}></el-input>
-                          </el-form-item>:null}
-                          {~[1].indexOf(this.formData.answerType)?<div  style="margin-top:5px"></div>:null}
-                          {~[1,3].indexOf(this.formData.answerType)?<el-form-item
-                            label=""
-                            lebel-width="0px"
-                            prop={`answer.${index}.option_files`}
-                            rules={[{ required: true, message: '请填写', trigger: 'blur' }]}
-                          >
-                            <ImageUpload fileList={this.formData.answer[index].option_files} uid={`questionFiles_ImageUpload_${index}`} limit={1} isUpdate={false} />
-                          </el-form-item>:null}
-                        </div>
-                        <br />
-                      </div>
-                    )
-                  })}
-                </div>
-              )
-            }
-          }]
-        }else if(!!~[3, 4, 5].indexOf(this.formData.type)){
-          return [{
-            md: 24,
-            name: 'slot-component',
-            attributes: { placeholder: '请输入' },
-            formItemAttributes: {
-              label: '限制数量',
-              prop: 'answer',
-              rules: []
-            },
-            render: (h, { props, onInput }) => {
-              var { value } = props
-              return (
-                <div>
-                  {this.formData.answer.map((item, index) => {
-                    return (
+        },
+        {
+          md: 24,
+          isShow: true,
+          name: 'el-radio',
+          options: [
+            { label: '是', value: true },
+            { label: '否', value: false }
+          ],
+          attributes: { filterable: true, placeholder: '请选择', disabled: false },
+          formItemAttributes: {
+            label: '是否必填',
+            prop: 'isRequire',
+            rules: [{ required: true, message: '请选择', trigger: 'blur' }]
+          }
+        },
+        ...(() => {
+          if (!!~[1, 2].indexOf(this.formData.type)) {
+            return [
+              {
+                md: 24,
+                isShow: true,
+                name: 'el-radio',
+                options: [
+                  { label: '图文结合', value: 1 },
+                  { label: '纯文字', value: 2 },
+                  { label: '纯图片', value: 3 }
+                ],
+                attributes: { filterable: true, placeholder: '请选择', disabled: false },
+                formItemAttributes: {
+                  label: '选项类型',
+                  prop: 'answerType',
+                  rules: [{ required: true, message: '请选择', trigger: 'blur' }]
+                }
+              },
+              {
+                md: 24,
+                name: 'slot-component',
+                attributes: { placeholder: '请输入' },
+                formItemAttributes: {
+                  label: '试题选项',
+                  prop: 'answer',
+                  rules: [{ required: true, message: '请添加选项', trigger: 'blur' }]
+                },
+                render: (h, { props, onInput }) => {
+                  var { value } = props
+                  return (
+                    <div>
                       <div>
-                        <div>
-                          <el-input type='number' placeholder="请输入限制长度" value={this.formData.answer[index].option_limit} onInput={(val) => { this.formData.answer[index].option_limit = val }}></el-input>
-                        </div>
+                        <el-button
+                          size="mini"
+                          onClick={() => {
+                            this.formData.answer.push({
+                              option_name: '',
+                              option_value: '',
+                              option_files: [],
+                              option_limit: ''
+                            })
+                          }}
+                          type="primary"
+                        >
+                          添加
+                        </el-button>
                       </div>
-                    )
-                  })}
-                </div>
-              )
-            }
-          }]
-        }
-        return []
-      })()]
-    },
+                      {this.formData.answer.map((item, index) => {
+                        item.option_name = `选项${index + 1}`
+                        return (
+                          <div>
+                            <div style="display: flex;justify-content: space-between;">
+                              <span style="font-weight: bold;">{this.formData.answer[index].option_name}</span>
+                              <span
+                                style="color: red;"
+                                onClick={() => {
+                                  this.formData.answer.splice(index, 1)
+                                }}
+                              >
+                                删除
+                              </span>
+                            </div>
+                            <div class="redbordererr">
+                              {~[1, 2].indexOf(this.formData.answerType) ? (
+                                <el-form-item
+                                  label=""
+                                  lebel-width="0px"
+                                  prop={`answer.${index}.option_value`}
+                                  rules={[{ required: true, message: '请填写', trigger: 'blur' }]}
+                                >
+                                  <el-input
+                                    type="textarea"
+                                    rows={2}
+                                    placeholder="请输入内容"
+                                    value={this.formData.answer[index].option_value}
+                                    onInput={val => {
+                                      this.formData.answer[index].option_value = val
+                                    }}
+                                  ></el-input>
+                                </el-form-item>
+                              ) : null}
+                              {~[1].indexOf(this.formData.answerType) ? <div style="margin-top:5px"></div> : null}
+                              {~[1, 3].indexOf(this.formData.answerType) ? (
+                                <el-form-item
+                                  label=""
+                                  lebel-width="0px"
+                                  prop={`answer.${index}.option_files`}
+                                  rules={[{ required: true, message: '请填写', trigger: 'blur' }]}
+                                >
+                                  <ImageUpload
+                                    fileList={this.formData.answer[index].option_files}
+                                    uid={`questionFiles_ImageUpload_${index}`}
+                                    limit={1}
+                                    isUpdate={false}
+                                  />
+                                </el-form-item>
+                              ) : null}
+                            </div>
+                            <br />
+                          </div>
+                        )
+                      })}
+                    </div>
+                  )
+                }
+              }
+            ]
+          } else if (!!~[3, 4, 5].indexOf(this.formData.type)) {
+            return [
+              {
+                md: 24,
+                name: 'slot-component',
+                attributes: { placeholder: '请输入' },
+                formItemAttributes: {
+                  label: '限制数量',
+                  prop: 'answer',
+                  rules: []
+                },
+                render: (h, { props, onInput }) => {
+                  var { value } = props
+                  return (
+                    <div>
+                      {this.formData.answer.map((item, index) => {
+                        return (
+                          <div>
+                            <div>
+                              <el-input
+                                type="number"
+                                placeholder="请输入限制长度"
+                                value={this.formData.answer[index].option_limit}
+                                onInput={val => {
+                                  this.formData.answer[index].option_limit = val
+                                }}
+                              ></el-input>
+                            </div>
+                          </div>
+                        )
+                      })}
+                    </div>
+                  )
+                }
+              }
+            ]
+          }
+          return []
+        })()
+      ]
+    }
   },
   methods: {
     formCancel() {
-      this.$emit("close", this.formData)
+      this.$emit('close', this.formData)
     },
     formConfirm() {
       this.$refs.formRef.validate((valid, invalidFields, errLabels) => {
         if (valid) {
-          this.$emit("confirm", this.formData)
+          this.$emit('confirm', this.formData)
         }
       })
-    },
+    }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-  ::v-deep .el-dialog__body{
-    padding: 30px 20px 0 20px !important
-  }
-  ::v-deep .dialog-footer{
-    padding: 0 !important
-  }
-  ::v-deep .is-error{
-    .add{
-      border-color: red !important;
-    }
+::v-deep .el-dialog__body {
+  padding: 30px 20px 0 20px !important;
+}
+::v-deep .dialog-footer {
+  padding: 0 !important;
+}
+::v-deep .is-error {
+  .add {
+    border-color: red !important;
   }
+}
 </style>