<template>
<div class="userInfo-edit">
<div class="add-tab">资料编辑</div>
<el-form
ref="form"
:model="form"
:rules="rules"
size="medium"
label-width="100px"
>
<el-form-item label-width="100">
<el-button type="primary" size="medium" @click="addSubjectBtn">
添加题目
</el-button>
</el-form-item>
<div class="list-item" v-for="(item, index) in form.list" :key="index">
<el-button
class="item-del"
type="danger"
icon="el-icon-delete"
circle
:disabled="form.list.length == 1"
@click="deleteSubjectBtn(index)"
></el-button>
<el-form-item
label="题目标题"
:prop="`list[${
index}].title`"
maxleng="100"
:rules="[
{ required: true, message: '请输入题目标题', trigger: 'blur' }
]"
>
<el-input
v-model="item.title"
placeholder="请输入题目标题"
clearable
:style="{ width: '100%' }"
></el-input>
</el-form-item>
<el-form-item
label="题目类型"
:prop="`list[${
index}].type`"
:rules="[
{ required: true, message: '题目类型不能为空', trigger: 'change' }
]"
>
<el-radio-group v-model="item.type" size="medium">
<el-radio :label="0">单选题</el-radio>
<el-radio :label="1">多选题</el-radio>
<el-radio :label="2">填空题</el-radio>
</el-radio-group>
</el-form-item>
<div class="options-wrap" v-show="item.type !== 2">
<el-button
class="options-btn"
type="primary"
@click="addOptionsBtn(item)"
>添加选项</el-button
>
<div
class="options-item"
v-for="(subItem, subIndex) in item.options"
:key="subIndex"
>
<el-button
class="item-del"
type="danger"
icon="el-icon-delete"
circle
@click="deleteOptionsBtn(item, subIndex)"
></el-button>
<el-form-item
label="选项内容"
:prop="`list[${
index}].options[${
subIndex}].name`"
maxleng="100"
:rules="[
{ required: true, message: '请输入选项内容', trigger: 'blur' }
]"
>
<el-input
v-model="subItem.name"
placeholder="请输入选项内容"
clearable
:style="{ width: '100%' }"
></el-input>
</el-form-item>
<el-form-item
label="嵌套类型"
:prop="`list[${
index}].options[${
subIndex}].type`"
:rules="[
{
required: true,
message: '题目类型不能为空',
trigger: 'change'
}
]"
>
<el-radio-group v-model="subItem.type" size="medium">
<el-radio :label="0">单选题</el-radio>
<el-radio :label="1">多选题</el-radio>
<el-radio :label="2">填空题</el-radio>
</el-radio-group>
</el-form-item>
<!-- 第三层选项,最多三层 -->
<div class="last-options-wrap" v-show="subItem.type !== 2">
<el-button class="options-btn" @click="addLastOptionsBtn(subItem)"
>添加选项</el-button
>
<div
class="options-item"
v-for="(lastItem, lastIndex) in subItem.optionsDtoList"
:key="lastIndex"
>
<el-button
class="item-del"
type="danger"
icon="el-icon-delete"
circle
@click="deleteLastOptionsBtn(subItem, lastIndex)"
></el-button>
<el-form-item
label="选项内容"
:prop="
`list[${
index}].options[${
subIndex}].optionsDtoList[${
lastIndex}].name`
"
maxleng="100"
:rules="[
{
required: true,
message: '请输入选项内容',
trigger: 'blur'
}
]"
>
<el-input
v-model="lastItem.name"
placeholder="请输入选项内容"
clearable
:style="{ width: '100%' }"
></el-input>
</el-form-item>
</div>
</div>
</div>
</div>
</div>
<el-form-item size="small">
<el-button type="primary" @click="submitForm">提交</el-button>
<el-button @click="refResFun">取消</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import LogoVue from "../../components/layout/components/Sidebar/Logo.vue";
import OptionsItem from "./OptionsItem";
const rules = {
title: [
{
required: true,
message: "请输入题目标题",
trigger: "blur"
}
],
type: [
{
required: true,
message: "题目类型不能为空",
trigger: "change"
}
]
};
export default {
components: {
OptionsItem
},
data() {
return {
rules,
form: {
list: [
{
title: "",
type: 0,
options: [
{
title: "",
type: 0,
optionsDtoList: []
}
]
}
]
}
};
},
methods: {
// 添加题目
addSubjectBtn() {
let addParams = {
title: "",
type: 0,
options: []
};
this.form.list.push(addParams);
},
// 删除题目
deleteSubjectBtn(index) {
this.form.list.splice(index, 1);
},
// 添加选项
addOptionsBtn(item) {
let addParams = {
name: "",
type: undefined
};
item.options.push(addParams);
},
// 添加最后一层选项
addLastOptionsBtn(item) {
let addParams = {
name: "",
type: undefined
};
item.optionsDtoList.push(addParams);
},
// 删除选项
deleteOptionsBtn(item, subIndex) {
item.options.splice(subIndex, 1);
},
// 删除最后一项的选项
deleteLastOptionsBtn(lastItem, lastIndex) {
lastItem.optionsDtoList.splice(lastIndex, 1);
},
submitForm() {
this.$refs.form.validate(valid => {
if (!valid) return;
console.log(this.form,33333);
});
},
refResFun() {
this.$refs.form.resetFields();
}
}
};
</script>
<style lang="scss" scoped>
.userInfo-edit {
padding: 30px;
.add-tab {
font-weight: bold;
margin-bottom: 30px;
}
.list-item {
position: relative;
width: 1200px;
margin-bottom: 30px;
padding: 20px 70px 20px 0;
border: 1px solid
border-radius: 4px;
.item-del {
position: absolute;
right: -50px;
top: 0;
}
}
.options-wrap {
padding-left: 30px;
.options-btn {
margin-left: 20px;
}
.options-item {
position: relative;
margin-top: 15px;
padding-top: 15px;
padding-right: 15px;
border: 1px solid
border-radius: 4px;
}
}
.last-options-wrap {
margin-bottom: 16px;
.options-item {
margin-left: 16px;
}
.item-del{
top: 18px;
}
}
}
</style>