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

<template>
  <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>
    </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,
          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' }]
          }
        },
        {
          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 (
                          <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;
}
::v-deep .is-error {
  .add {
    border-color: red !important;
  }
}
</style>