<template>
|
<div class="app-container">
|
<div class="form-content">
|
<el-form inline :model="form.questionList" ref="formRef" 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-tooltip content="移除评价项">
|
<el-icon><Close color="red"/></el-icon>
|
</el-tooltip>
|
</div>
|
<el-row>
|
<el-col :span="12">
|
<el-form-item :label="`评价项${index + 1}`" style="width: 100%" :prop="item.questionName">
|
<el-input
|
placeholder="请输入"
|
v-model="item.questionName"
|
></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="得分" :prop="item.questionScore">
|
<el-input-number
|
placeholder="请输入"
|
v-model="item.questionScore"
|
:min="1"
|
:max="10"
|
controls-position="right"
|
></el-input-number>
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="评价类型" :prop="item.questionType">
|
<el-radio-group
|
placeholder="请输入"
|
v-model="item.questionType"
|
>
|
<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">
|
<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: 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> -->
|
|
<div class="mt10">
|
<el-button type="primary" plain @click="addOptions(index, item.questionName)">添加选项</el-button>
|
</div>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</div>
|
</el-form>
|
<div class="center mt20 fixed">
|
<el-button type="primary" @click="addContent">添加评价项</el-button>
|
<el-button @click="save()" type="primary" >保存内容</el-button>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
import { listEvaluate, saveEvaluate } from '@/api/system/company/company'
|
import { ElMessage, ElMessageBox} from 'element-plus'
|
const tableData = ref([])
|
const addNewRef = ref()
|
const formRef = ref()
|
const form: any = ref({
|
questionList: []
|
})
|
const rules = ref({
|
questionName: [
|
{
|
required: true,
|
message: '请输入问题',
|
trigger: 'blur'
|
}
|
]
|
})
|
function getListEvaluate() {
|
listEvaluate().then((val) => {
|
form.value.questionList = val.data.questionList
|
})
|
}
|
function addContent() {
|
form.value.questionList.push({
|
questionStatus: 0,
|
questionType: 2,
|
questionScore: 5,
|
answerList: []
|
})
|
}
|
function addOptions(index: number, name: any){
|
if(!form.value.questionList[index].answerList) {
|
form.value.questionList[index].answerList = []
|
}
|
form.value.questionList[index].answerList.push({
|
questionName: name
|
})
|
}
|
function save(item?: string) {
|
formRef.value.validate((valid) => {
|
console.log(valid)
|
if(valid) {
|
// saveEvaluate({questionList: form.value.questionList}).then(val => {
|
// ElMessage.success(item||'保存成功')
|
// })
|
}
|
})
|
|
}
|
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
|
}
|
function removeList(index) {
|
ElMessageBox.confirm('确认移除该评价项？', '提示', {
|
confirmButtonText: '确认',
|
cancelButtonText: '取消',
|
type: 'danger',
|
}).then(val => {
|
form.value.questionList.splice(index, 1)
|
save('删除成功')
|
})
|
|
}
|
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;
|
margin-bottom: 10px;
|
padding: 20px 30px 0;
|
position: relative;
|
:deep() {
|
.el-form-item__label{
|
font-weight: 500
|
}
|
}
|
}
|
.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;
|
}
|
.fixed{
|
background-color: white;
|
position: sticky;
|
bottom: 0;
|
}
|
.title-project{
|
font-weight: 700;
|
color: #606266;
|
margin-bottom: 10px
|
}
|
</style>
|
