|
|
@@ -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,199 +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,
|
|
|
- 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: this.formData.id ? true : 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: 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 (
|
|
|
+ },
|
|
|
+ {
|
|
|
+ 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 .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>
|
pengyh