<template>
|
<div class="app-container">
|
<div class="form-content">
|
<el-form inline :model="form.questionList" label-width="80px" :rules="rules">
|
<div
|
class="border"
|
v-for="(item, index) in form.questionList"
|
:key="index"
|
>
|
<div class="close-icon">
|
<el-icon><Close /></el-icon>
|
</div>
|
<el-row>
|
<el-col :span="24">
|
<el-form-item label="试题内容" style="width: 100%" :prop="item.questionName">
|
<el-input
|
placeholder="请输入"
|
v-model="item.questionName"
|
type="textarea"
|
></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="12">
|
<el-form-item label="本题得分" :prop="item.questionScore">
|
<el-input
|
type="number"
|
placeholder="请输入"
|
v-model="item.questionScore"
|
style="width: 200px"
|
></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="题目类型" :prop="item.questionType">
|
<el-radio-group
|
placeholder="请输入"
|
v-model="item.questionType"
|
>
|
<el-radio value="1">选择</el-radio>
|
<el-radio value="2">打分</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row v-if="item.questionType === '1'">
|
<el-col :span="24">
|
<el-form-item label="本题选项" style="width: 100%;" :prop="item.answerList">
|
<div
|
v-for="(ele, childIndex) in item.answerList"
|
:key="index"
|
style="width: 100%;"
|
class="set-flex"
|
>
|
<div style="font-size: 14px;margin-right: 10px">{{ childIndex + 1 }}</div>
|
<el-input
|
v-model="ele.answerName"
|
placeholder="请输入"
|
style="width: 85%; margin-right: 10px"
|
></el-input>
|
<el-checkbox v-model="ele.isScore" @change="changeValue($event, index, childIndex)" :true-value="1" :false-value="0" :label="'是否计分'"/>
|
</div>
|
|
<!-- </el-radio-group> -->
|
|
<div class="mt10">
|
<el-button type="primary" plain @click="addOptions(index, item.questionName)">添加选项</el-button>
|
</div>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</div>
|
<div class="add-button" @click="addContent">添加执法项</div>
|
</el-form>
|
<div class="center mt20">
|
<el-button @click="save" type="primary" style="width: 100%;padding: 20px 0">保存内容</el-button>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
import { listEvaluate, saveEvaluate } from '@/api/system/company/company'
|
import { ElMessage} from 'element-plus'
|
const tableData = ref([])
|
const addNewRef = ref()
|
const form: any = ref({
|
questionList: []
|
})
|
const rules = ref({
|
questionName: [
|
{
|
required: true,
|
message: '请输入问题',
|
trigger: 'blur'
|
}
|
]
|
})
|
function getListEvaluate() {
|
listEvaluate().then((val) => {
|
tableData.value = val.data.questionList
|
})
|
}
|
function addContent() {
|
form.value.questionList.push({
|
questionStatus: 0,
|
questionType: '2',
|
answerList: []
|
})
|
}
|
function addOptions(index: number, name){
|
form.value.questionList[index].answerList.push({
|
questionName: name
|
})
|
}
|
function save() {
|
saveEvaluate({questionList: form.value.questionList}).then(val => {
|
ElMessage.success('保存成功')
|
})
|
}
|
function changeValue(event, index, childIndex) {
|
// form.value.questionList[index].isScore = event.target.
|
form.value.questionList[index].answerList.forEach((item: { isScore: number }) => {
|
item.isScore = 0
|
})
|
form.value.questionList[index].answerList[childIndex].isScore = 1
|
}
|
getListEvaluate()
|
</script>
|
|
<style scoped lang="scss">
|
.form-content {
|
width: 80%;
|
}
|
|
.border {
|
border: 1px solid #e2e2e2;
|
margin-bottom: 10px;
|
padding: 30px;
|
position: relative;
|
}
|
.close-icon {
|
position: absolute;
|
right: 10px;
|
top: 10px;
|
cursor: pointer;
|
}
|
|
.add-button {
|
text-align: center;
|
border: 1px dotted #979797;
|
line-height: 40px;
|
cursor: pointer;
|
border-radius: 5px;
|
}
|
.set-flex{
|
display: flex;
|
justify-content: flex-start;
|
margin-top: 10px
|
}
|
.center{
|
text-align: center;
|
}
|
</style>
|
