You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
232 lines
6.5 KiB
232 lines
6.5 KiB
1 year ago
|
<template>
|
||
|
|
<el-dialog :visible.sync="visible" width="60%" :show-close="false" class="survey-dialog-mobile">
|
||
|
|
<div class="survey-mobile-bg">
|
||
|
|
<div class="survey-mobile-card">
|
||
|
|
<div class="survey-header">
|
||
|
|
<div class="survey-title">{{ surveyData.title }}</div>
|
||
|
|
<div class="survey-description">{{ surveyData.description }}</div>
|
||
|
|
<div class="survey-meta">
|
||
|
|
<span class="meta-item"><i class="el-icon-date"></i> {{ surveyData.createTime }}</span>
|
||
|
|
<span class="meta-item"><i class="el-icon-time"></i> {{ surveyData.deadline }}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="survey-form">
|
||
|
|
<div v-for="(q, idx) in surveyData.questions" :key="q.id" class="question-item">
|
||
|
|
<div class="question-header">
|
||
|
|
<span class="question-number">{{ idx+1 }}</span>
|
||
|
|
<span class="question-title">{{ q.title }}</span>
|
||
|
|
<span v-if="q.required" class="required-mark">*</span>
|
||
|
|
</div>
|
||
|
|
<div class="question-content">
|
||
|
|
<template v-if="q.type==='single'">
|
||
|
|
<el-radio-group v-model="answers[q.id]" :disabled="previewOnly" class="mobile-radio-group">
|
||
|
|
<el-radio v-for="(opt, oidx) in q.options" :key="oidx" :label="opt" class="mobile-radio">{{ opt }}</el-radio>
|
||
|
|
</el-radio-group>
|
||
|
|
</template>
|
||
|
|
<template v-else-if="q.type==='multi'">
|
||
|
|
<el-checkbox-group v-model="answers[q.id]" :disabled="previewOnly" class="mobile-checkbox-group">
|
||
|
|
<el-checkbox v-for="(opt, oidx) in q.options" :key="oidx" :label="opt" class="mobile-checkbox">{{ opt }}</el-checkbox>
|
||
|
|
</el-checkbox-group>
|
||
|
|
</template>
|
||
|
|
<template v-else-if="q.type==='text'">
|
||
|
|
<el-input type="textarea" v-model="answers[q.id]" :disabled="previewOnly" :placeholder="q.placeholder||'请输入内容'" class="mobile-textarea" />
|
||
|
|
</template>
|
||
|
|
<template v-else-if="q.type==='rate'">
|
||
|
|
<el-rate v-model="answers[q.id]" :max="q.rateMax||5" :disabled="previewOnly" class="mobile-rate" />
|
||
|
|
</template>
|
||
|
|
<template v-else-if="q.type==='number'">
|
||
|
|
<el-input type="number" v-model="answers[q.id]" :min="q.min" :max="q.max" :disabled="previewOnly" class="mobile-input" />
|
||
|
|
</template>
|
||
|
|
<template v-else-if="q.type==='select'">
|
||
|
|
<el-select v-model="answers[q.id]" :disabled="previewOnly" class="mobile-select" placeholder="请选择">
|
||
|
|
<el-option v-for="(opt, oidx) in q.options" :key="oidx" :label="opt" :value="opt" />
|
||
|
|
</el-select>
|
||
|
|
</template>
|
||
|
|
<template v-else-if="q.type==='scale'">
|
||
|
|
<div class="scale-container">
|
||
|
|
<span class="scale-label">{{ q.minLabel }}</span>
|
||
|
|
<el-slider v-model="answers[q.id]" :min="q.min" :max="q.max" :disabled="previewOnly" class="mobile-slider" />
|
||
|
|
<span class="scale-label">{{ q.maxLabel }}</span>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div style="text-align:center;margin-top:32px;">
|
||
|
|
<el-button v-if="!previewOnly" type="primary" class="mobile-btn" @click="handleSubmit">提交</el-button>
|
||
|
|
<el-button class="mobile-btn" @click="$emit('close')">关闭</el-button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</el-dialog>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: 'SurveyFillDialog',
|
||
|
|
props: {
|
||
|
|
visible: Boolean,
|
||
|
|
surveyData: Object,
|
||
|
|
previewOnly: Boolean
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
answers: {}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
surveyData: {
|
||
|
|
handler(val) {
|
||
|
|
if (val && val.questions) {
|
||
|
|
this.answers = {};
|
||
|
|
val.questions.forEach(q => {
|
||
|
|
if (q.type==='multi') this.answers[q.id] = [];
|
||
|
|
else this.answers[q.id] = '';
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
immediate: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
handleSubmit() {
|
||
|
|
this.$emit('submit', this.answers);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<style scoped>
|
||
|
|
.survey-dialog-mobile >>> .el-dialog__body { padding:0; background: #f4f6fa; }
|
||
|
|
.survey-mobile-bg {
|
||
|
|
min-height: 100vh;
|
||
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
.survey-mobile-card {
|
||
|
|
width: 100vw;
|
||
|
|
max-width: 414px;
|
||
|
|
min-width: 320px;
|
||
|
|
background: #fff;
|
||
|
|
border-radius: 18px;
|
||
|
|
box-shadow: 0 4px 24px rgba(0,0,0,0.12);
|
||
|
|
margin: 24px 0;
|
||
|
|
padding: 0 0 24px 0;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
.survey-header {
|
||
|
|
padding: 32px 20px 16px 20px;
|
||
|
|
text-align: center;
|
||
|
|
background: #fff;
|
||
|
|
border-radius: 18px 18px 0 0;
|
||
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
|
||
|
|
}
|
||
|
|
.survey-title {
|
||
|
|
font-size: 22px;
|
||
|
|
font-weight: 700;
|
||
|
|
color: #2c3e50;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
}
|
||
|
|
.survey-description {
|
||
|
|
font-size: 15px;
|
||
|
|
color: #6c757d;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
}
|
||
|
|
.survey-meta {
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
gap: 16px;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
font-size: 12px;
|
||
|
|
color: #888;
|
||
|
|
}
|
||
|
|
.meta-item { display: flex; align-items: center; gap: 4px; }
|
||
|
|
.survey-form {
|
||
|
|
padding: 18px 16px 0 16px;
|
||
|
|
}
|
||
|
|
.question-item {
|
||
|
|
margin-bottom: 28px;
|
||
|
|
padding-bottom: 18px;
|
||
|
|
border-bottom: 1px solid #f0f0f0;
|
||
|
|
}
|
||
|
|
.question-header {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 8px;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
}
|
||
|
|
.question-number {
|
||
|
|
background: #3498db;
|
||
|
|
color: #fff;
|
||
|
|
width: 22px;
|
||
|
|
height: 22px;
|
||
|
|
border-radius: 50%;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
font-size: 13px;
|
||
|
|
font-weight: 600;
|
||
|
|
flex-shrink: 0;
|
||
|
|
}
|
||
|
|
.question-title {
|
||
|
|
font-size: 15px;
|
||
|
|
font-weight: 600;
|
||
|
|
color: #2c3e50;
|
||
|
|
flex: 1;
|
||
|
|
}
|
||
|
|
.required-mark {
|
||
|
|
color: #e74c3c;
|
||
|
|
margin-left: 4px;
|
||
|
|
font-size: 15px;
|
||
|
|
}
|
||
|
|
.question-content {
|
||
|
|
margin-left: 0;
|
||
|
|
margin-top: 2px;
|
||
|
|
}
|
||
|
|
.mobile-radio-group, .mobile-checkbox-group {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: 8px;
|
||
|
|
}
|
||
|
|
.mobile-radio, .mobile-checkbox {
|
||
|
|
font-size: 15px;
|
||
|
|
height: 32px;
|
||
|
|
line-height: 32px;
|
||
|
|
}
|
||
|
|
.mobile-textarea {
|
||
|
|
font-size: 15px;
|
||
|
|
border-radius: 10px;
|
||
|
|
}
|
||
|
|
.mobile-rate {
|
||
|
|
font-size: 22px;
|
||
|
|
}
|
||
|
|
.mobile-input, .mobile-select {
|
||
|
|
font-size: 15px;
|
||
|
|
border-radius: 10px;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
.scale-container {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 8px;
|
||
|
|
margin-top: 8px;
|
||
|
|
}
|
||
|
|
.scale-label {
|
||
|
|
font-size: 13px;
|
||
|
|
color: #888;
|
||
|
|
}
|
||
|
|
.mobile-slider {
|
||
|
|
flex: 1;
|
||
|
|
}
|
||
|
|
.mobile-btn {
|
||
|
|
width: 90%;
|
||
|
|
height: 44px;
|
||
|
|
font-size: 17px;
|
||
|
|
border-radius: 22px;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
}
|
||
|
|
@media (max-width: 500px) {
|
||
|
|
.survey-mobile-card { max-width: 100vw; min-width: 0; border-radius: 0; }
|
||
|
|
}
|
||
|
|
</style>
|