zfire-newmall-admin/src/mixin/question_mixin.js

import ImageUpload from '@/components/file-upload'
export default {
  components: {
    ImageUpload
  },
  data() {
    return {
      formData: {
        name: "",
        type: "SINGLE",
        options: [],
      },
      formDialog: false,
      formUpBool: true,
    }
  },
  watch: {
    "formData.type"(newVal, oldVal) {
      if (!this.formUpBool) {
        return
      }
      if (!!~["PICK"].indexOf(this.formData.type)) {
        this.formData.options = [
          {
            option_name: "A",
            option_value: "正确",
            option_files: []
          },
          {
            option_name: "B",
            option_value: "错误",
            option_files: []
          }
        ]
      } else if (oldVal === "PICK") {
        this.formData.options = []
      }
    },
  },
  computed: {
    formItems() {
      return [{
        md: 24,
        isShow: true,
        name: 'el-input',
        attributes: { placeholder: '请输入' },
        formItemAttributes: {
          label: '名称',
          prop: 'name',
          rules: []
        },
      },
      {
        md: 24,
        isShow: true,
        name: 'el-radio',
        options: [{ label: "单选题", value: "SINGLE" }, { label: "多选题", value: "MULTI" }, { label: "判断题", value: "PICK" }],
        attributes: { filterable: true, placeholder: '请选择', disabled: this.formData.id ? true : false },
        formItemAttributes: {
          label: '类型',
          prop: 'type',
          rules: [{ required: true, message: '请选择', trigger: 'blur' }]
        }
      },
      {
        md: 24,
        isShow: true,
        name: 'el-radio',
        options: [{ label: "是", value: "1" }, { label: "否", value: "0" }],
        attributes: { filterable: true, placeholder: '请选择', disabled: this.formData.id ? true : false },
        formItemAttributes: {
          label: '是否必填',
          prop: 'type',
          rules: [{ required: true, message: '请选择', trigger: 'blur' }]
        }
      },
      ...(() => {
        if (!!~["SINGLE", "MULTI"].indexOf(this.formData.type)) {
          // 单选，多选
          return [{
            md: 24,
            isShow: true,
            name: 'slot-component',
            attributes: { placeholder: '请输入' },
            formItemAttributes: {
              label: '试题选项',
              prop: 'options',
              rules: [{ required: true, message: '请添加选项', trigger: 'blur' }]
            },
            render: (h, { props, onInput }) => {
              var { value } = props
              return (
                <div>
                  <div>
                    <el-button size="mini" onClick={() => {
                      this.formData.options.push({
                        option_name: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "N", "M", "O", "P", "Q"][this.formData.options.length],
                        option_value: "",
                        option_files: []
                      })
                    }} type="primary">添加</el-button>
                  </div>
                  {this.formData.options.map((item, index) => {
                    return (
                      <div>
                        <div style="display: flex;justify-content: space-between;">
                          <span style="font-weight: bold;">选项：{this.formData.options[index].option_name}</span>
                          <span style="color: red;" onClick={() => {
                            this.formData.options.splice(index, 1)
                          }}>删除</span>
                        </div>
                        <div>
                          <el-input type="textarea" rows={2} placeholder="请输入内容" value={this.formData.options[index].option_value} onInput={(val) => { this.formData.options[index].option_value = val }}></el-input>
                        </div>
                        <br />
                        <div>
                          <ImageUpload fileList={this.formData.options[index].option_files} uid={`questionFiles_ImageUpload_${index}`} limit={3} isUpdate={false} />
                        </div>
                        <br />
                      </div>
                    )
                  })}
                </div>
              )
            }
          }]
        }else if(!!~["PICK"].indexOf(this.formData.type)){
          // 填写
          return [{
            md: 24,
            isShow: true,
            name: 'slot-component',
            attributes: { placeholder: '请输入' },
            formItemAttributes: {
              label: '试题选项',
              prop: 'options',
              rules: [{ required: true, message: '请添加选项', trigger: 'blur' }]
            },
            render: (h, { props, onInput }) => {
              var { value } = props
              return (
                <div>
                  {this.formData.options.map((item, index) => {
                    return (
                      <div>
                        <div style="display: flex;justify-content: space-between;">
                          <span style="font-weight: bold;">选项：{this.formData.options[index].option_name}</span>
                        </div>
                        <div>
                          <el-input type="textarea" rows={2} placeholder="请输入内容" value={this.formData.options[index].option_value} onInput={(val) => { this.formData.options[index].option_value = val }}></el-input>
                        </div>
                      </div>
                    )
                  })}
                </div>
              )
            }
          }]
        }
        return []
      })(),
      ]
    },
  },
  methods: {
    // 打开弹窗
    openSubjectDialog() {
      this.formDialog = true
      this.$nextTick(() => {
        this.formUpBool = true
      })
    },
    formCancel() {
      this.$refs?.formRef?.$refs.inlineForm.clearValidate()
      this.$data.formData = this.$options.data().formData
      this.formDialog = false
    },
    formConfirm() {
      this.$refs.formRef.validate((valid, invalidFields, errLabels) => {
        if (valid) {
          var data = {
            ...this.formData,
            options: JSON.stringify(this.formData.options),
          };
          // questionSave(data).then(res => {
          //   this.$message({
          //     type: 'success',
          //     message: '保存成功!'
          //   })
          //   this.formCancel()
          //   this.$refs.pageRef.refreshList()
          //   this.$emit("fujipagelist")
          // })
        }
      })
    },
    fanzhuanjiexi(row, cb) {
      // questionDetail({ id: row.id }).then(res => {
      //   Object.assign(this.formData, res.data, {
      //     options: JSON.parse(res.data.options),
      //   })
      //   cb && cb()
      // })
    },
  }
}