zfire-newmall-admin/src/views/mallManagement/setActivity/answer.vue

<template>
  <el-dialog title="新增活动内容" width="800px" :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>
    </zj-form-container>
    <div slot="footer" class="dialog-footer">
      <el-button size="mini" @click="formCancel">取 消</el-button>
      <el-button size="mini" @click="formConfirm">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import ImageUpload from '@/components/file-upload'
export default {
  props:{
    defaultData:{
      type: Object,
      default: ()=>({}),
    },
  },
  components: {
    ImageUpload
  },
  data() {
    return {
      showBool:true,
      formData: Object.assign({
        question: "",
        type: 1,
        isRequire: true,
        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' }]
        },
      },
      {
        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: this.formData.id ? true : 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: this.formData.id ? true : false },
        formItemAttributes: {
          label: '是否必填',
          prop: 'isRequire',
          rules: [{ required: true, message: '请选择', trigger: 'blur' }]
        }
      },
      ...(()=>{
        if(!!~[1, 2].indexOf(this.formData.type)){
          return [{
            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">
                          <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>
                        </div>
                        <div style="margin-top:5px">
                          <ImageUpload fileList={this.formData.answer[index].option_files} uid={`questionFiles_ImageUpload_${index}`} limit={1} isUpdate={false} />
                        </div>
                        <br />
                      </div>
                    )
                  })}
                </div>
              )
            }
          }]
        }else if(!!~[3].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)
    },
    formConfirm() {
      this.$refs.formRef.validate((valid, invalidFields, errLabels) => {
        if (valid) {
          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
  }
</style>