| | |
| | | <template> |
| | | <div class="app-container"> |
| | | <div class="form-content"> |
| | | <el-form inline :model="form.questionList" label-width="80px" :rules="rules"> |
| | | <el-form inline :model="form.questionList" label-width="75px" :rules="rules"> |
| | | <div |
| | | class="border" |
| | | v-for="(item, index) in form.questionList" |
| | | :key="index" |
| | | > |
| | | <!-- <div class="title-project"> |
| | | 评价项{{ index + 1 }} |
| | | </div> --> |
| | | <div class="close-icon" @click="removeList(index)"> |
| | | <el-icon><Close /></el-icon> |
| | | </div> |
| | | <el-row> |
| | | <el-col :span="24"> |
| | | <el-form-item label="试题内容" style="width: 100%" :prop="item.questionName"> |
| | | <el-col :span="12"> |
| | | <el-form-item :label="`评价项${index + 1}`" 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" |
| | | <el-col :span="6"> |
| | | <el-form-item label="得分" :prop="item.questionScore"> |
| | | <el-input-number |
| | | placeholder="请输入" |
| | | v-model="item.questionScore" |
| | | style="width: 200px" |
| | | ></el-input> |
| | | :min="1" |
| | | :max="10" |
| | | controls-position="right" |
| | | ></el-input-number> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="题目类型" :prop="item.questionType"> |
| | | <el-col :span="6"> |
| | | <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 :value="1">选择</el-radio> |
| | | </el-radio-group> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row v-if="item.questionType === 2"> |
| | | <el-form-item> |
| | | <el-rate disabled :max="item.questionScore" v-model="item.questionScore"></el-rate> |
| | | </el-form-item> |
| | | </el-row> |
| | | <el-row v-if="item.questionType === 1"> |
| | | <el-col :span="24"> |
| | | <el-form-item label="本题选项" style="width: 100%;" :prop="item.answerList"> |
| | | <el-form-item label="选项" style="width: 100%;" :prop="item.answerList"> |
| | | <div |
| | | v-for="(ele, childIndex) in item.answerList" |
| | | :key="index" |
| | |
| | | <el-input |
| | | v-model="ele.answerName" |
| | | placeholder="请输入" |
| | | style="width: 85%; margin-right: 10px" |
| | | style="width: 65%; margin-right: 10px" |
| | | ></el-input> |
| | | <el-checkbox v-model="ele.isScore" @change="changeValue($event, index, childIndex)" :true-value="1" :false-value="0" :label="'是否计分'"/> |
| | | <el-button type="danger" size="small" @click="removeArrlist(index, childIndex)" style="margin-left: 10px;">移除</el-button> |
| | | </div> |
| | | |
| | | <!-- </el-radio-group> --> |
| | |
| | | </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 class="center mt20 fixed"> |
| | | <el-button type="primary" @click="addContent">添加评价项</el-button> |
| | | <el-button @click="save" type="primary" >保存内容</el-button> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | import { ElMessage, ElMessageBox} from 'element-plus' |
| | | const tableData = ref([]) |
| | | const addNewRef = ref() |
| | | const { proxy } = getCurrentInstance() |
| | | const form: any = ref({ |
| | | questionList: [] |
| | | }) |
| | |
| | | function addContent() { |
| | | form.value.questionList.push({ |
| | | questionStatus: 0, |
| | | questionType: '2', |
| | | questionType: 2, |
| | | questionScore: 5, |
| | | answerList: [] |
| | | }) |
| | | } |
| | | function addOptions(index: number, name){ |
| | | if(!form.value.questionList[index].answerList) { |
| | | form.value.questionList[index].answerList = [] |
| | | } |
| | | form.value.questionList[index].answerList.push({ |
| | | questionName: name |
| | | }) |
| | |
| | | form.value.questionList[index].answerList[childIndex].isScore = 1 |
| | | } |
| | | function removeList(index) { |
| | | // ElMessageBox.confirm('确认移除该评价项?', 'Error', { |
| | | // confirmButtonText: 'OK', |
| | | // cancelButtonText: 'Cancel', |
| | | // type: 'erro', |
| | | // }) |
| | | ElMessageBox.confirm('确认移除该评价项?', '提示', { |
| | | confirmButtonText: '确认', |
| | | cancelButtonText: '取消', |
| | | type: 'danger', |
| | | }).then(val => { |
| | | form.value.questionList.splice(index, 1) |
| | | }) |
| | | |
| | | } |
| | | function removeArrlist(index: string | number, childIndex: any) { |
| | | form.value.questionList[index].answerList.splice(childIndex, 1) |
| | | } |
| | | getListEvaluate() |
| | | </script> |
| | |
| | | <style scoped lang="scss"> |
| | | .form-content { |
| | | width: 80%; |
| | | padding-bottom: 150px; |
| | | margin: 0 auto; |
| | | // border: 1px solid #e2e2e2; |
| | | } |
| | | |
| | | .border { |
| | | border: 1px solid #e2e2e2; |
| | | // border: 1px solid #e2e2e2; |
| | | margin-bottom: 10px; |
| | | padding: 30px; |
| | | padding: 20px 30px 0; |
| | | position: relative; |
| | | :deep() { |
| | | .el-form-item__label{ |
| | | font-weight: 500 |
| | | } |
| | | } |
| | | } |
| | | .close-icon { |
| | | position: absolute; |
| | |
| | | .center{ |
| | | text-align: center; |
| | | } |
| | | .fixed{ |
| | | background-color: white; |
| | | position: sticky; |
| | | bottom: 0; |
| | | } |
| | | .title-project{ |
| | | font-weight: 700; |
| | | color: #606266; |
| | | margin-bottom: 10px |
| | | } |
| | | </style> |