603 lines
14 KiB
Vue
603 lines
14 KiB
Vue
<template>
|
|
<transition name="slide-up">
|
|
<div v-if="visible" class="approval-modal">
|
|
<div class="approval-content">
|
|
<div v-if="normalizedQuestions.length > 1" class="question-tabs">
|
|
<button
|
|
v-for="(questionItem, questionIndex) in normalizedQuestions"
|
|
:key="questionItem.questionId"
|
|
class="tab-item"
|
|
:class="{
|
|
active: questionIndex === activeQuestionIndex,
|
|
completed: isQuestionAnswered(questionItem)
|
|
}"
|
|
:disabled="isProcessing"
|
|
@click="setActiveQuestion(questionIndex)"
|
|
>
|
|
<span class="tab-index">{{ questionIndex + 1 }}</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div v-if="activeQuestion" class="question-block">
|
|
<div class="approval-header">
|
|
<h4>{{ activeQuestionIndex + 1 }}. {{ activeQuestion.question }}</h4>
|
|
</div>
|
|
|
|
<div v-if="activeQuestion.operation" class="approval-operation">
|
|
<span class="label">操作：</span>
|
|
<span class="operation-text">{{ activeQuestion.operation }}</span>
|
|
</div>
|
|
|
|
<div class="question-options">
|
|
<label
|
|
v-for="(optionItem, optionIndex) in activeQuestion.options"
|
|
:key="`${activeQuestion.questionId}-${optionItem.value}-${optionIndex}`"
|
|
class="option-item"
|
|
>
|
|
<input
|
|
v-if="activeQuestion.multiSelect"
|
|
type="checkbox"
|
|
:value="optionItem.value"
|
|
:checked="getSelected(activeQuestion.questionId).includes(optionItem.value)"
|
|
:disabled="isProcessing"
|
|
@change="toggleSelect(activeQuestion.questionId, optionItem.value)"
|
|
/>
|
|
<input
|
|
v-else
|
|
type="radio"
|
|
:name="`approval-option-${activeQuestion.questionId}`"
|
|
:value="optionItem.value"
|
|
:checked="getSelected(activeQuestion.questionId)[0] === optionItem.value"
|
|
:disabled="isProcessing"
|
|
@change="setSingle(activeQuestion.questionId, optionItem.value)"
|
|
/>
|
|
<span
|
|
:class="{
|
|
recommended:
|
|
optionIndex === 0 && String(optionItem.label).includes('(Recommended)')
|
|
}"
|
|
>
|
|
{{ optionItem.label }}
|
|
</span>
|
|
</label>
|
|
|
|
<div v-if="shouldShowOtherInput(activeQuestion)" class="other-input">
|
|
<input
|
|
v-model.trim="otherTexts[activeQuestion.questionId]"
|
|
type="text"
|
|
:disabled="isProcessing"
|
|
placeholder="其他：请输入自定义内容"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="approval-actions">
|
|
<button class="btn btn-reject" @click="handleCancel" :disabled="isProcessing">取消</button>
|
|
<button
|
|
class="btn btn-approve"
|
|
@click="handlePrimaryAction"
|
|
:disabled="isPrimaryButtonDisabled"
|
|
>
|
|
{{ primaryButtonText }}
|
|
</button>
|
|
</div>
|
|
|
|
<div v-if="isProcessing" class="approval-processing">
|
|
<span class="processing-spinner"></span>
|
|
处理中...
|
|
</div>
|
|
</div>
|
|
</transition>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed, ref, watch } from 'vue'
|
|
import {
|
|
isOtherOption,
|
|
normalizeQuestions,
|
|
DEFAULT_OTHER_OPTION_VALUE
|
|
} from '@/utils/questionUtils'
|
|
|
|
const props = defineProps({
|
|
visible: { type: Boolean, default: false },
|
|
questions: { type: Array, default: () => [] }
|
|
})
|
|
|
|
const emit = defineEmits(['submit', 'cancel'])
|
|
|
|
const isProcessing = ref(false)
|
|
const activeQuestionIndex = ref(0)
|
|
const selectedValues = ref({})
|
|
const otherTexts = ref({})
|
|
|
|
const normalizedQuestions = computed(() => {
|
|
const questions = normalizeQuestions(props.questions)
|
|
// 添加 otherOptionValue 字段
|
|
return questions.map((q) => {
|
|
const otherOption = q.options.find((opt) => isOtherOption(opt))
|
|
return {
|
|
...q,
|
|
otherOptionValue: otherOption?.value || DEFAULT_OTHER_OPTION_VALUE
|
|
}
|
|
})
|
|
})
|
|
|
|
const activeQuestion = computed(() => {
|
|
if (normalizedQuestions.value.length === 0) return null
|
|
const index = Math.min(activeQuestionIndex.value, normalizedQuestions.value.length - 1)
|
|
return normalizedQuestions.value[index]
|
|
})
|
|
|
|
const resetForm = () => {
|
|
isProcessing.value = false
|
|
activeQuestionIndex.value = 0
|
|
selectedValues.value = {}
|
|
otherTexts.value = {}
|
|
}
|
|
|
|
const setActiveQuestion = (index) => {
|
|
if (isProcessing.value) return
|
|
if (index < 0 || index >= normalizedQuestions.value.length) return
|
|
activeQuestionIndex.value = index
|
|
}
|
|
|
|
const syncAnswersWithQuestions = () => {
|
|
const nextSelectedValues = {}
|
|
const nextOtherTexts = {}
|
|
|
|
normalizedQuestions.value.forEach((questionItem) => {
|
|
const questionId = questionItem.questionId
|
|
|
|
const previousSelected = Array.isArray(selectedValues.value[questionId])
|
|
? selectedValues.value[questionId]
|
|
: []
|
|
const validSelected = previousSelected.filter((value) =>
|
|
questionItem.options.some((option) => option?.value === value)
|
|
)
|
|
|
|
if (questionItem.multiSelect) {
|
|
nextSelectedValues[questionId] = validSelected
|
|
} else {
|
|
const current = validSelected[0]
|
|
if (current) {
|
|
nextSelectedValues[questionId] = [current]
|
|
} else if (questionItem.options.length > 0) {
|
|
nextSelectedValues[questionId] = [questionItem.options[0].value]
|
|
} else {
|
|
nextSelectedValues[questionId] = []
|
|
}
|
|
}
|
|
|
|
const text = String(otherTexts.value[questionId] || '').trim()
|
|
if (text) {
|
|
nextOtherTexts[questionId] = text
|
|
}
|
|
})
|
|
|
|
selectedValues.value = nextSelectedValues
|
|
otherTexts.value = nextOtherTexts
|
|
}
|
|
|
|
const getSelected = (questionId) => {
|
|
const selected = selectedValues.value[questionId]
|
|
return Array.isArray(selected) ? selected : []
|
|
}
|
|
|
|
const isQuestionOtherSelected = (questionItem) => {
|
|
const selected = getSelected(questionItem.questionId)
|
|
return selected.includes(questionItem.otherOptionValue)
|
|
}
|
|
|
|
const shouldShowOtherInput = (questionItem) => {
|
|
if (!questionItem || !questionItem.allowOther) return false
|
|
return isQuestionOtherSelected(questionItem)
|
|
}
|
|
|
|
watch(
|
|
() => props.visible,
|
|
(newVal) => {
|
|
if (newVal) {
|
|
activeQuestionIndex.value = 0
|
|
return
|
|
}
|
|
|
|
if (!newVal) {
|
|
resetForm()
|
|
}
|
|
}
|
|
)
|
|
|
|
watch(
|
|
normalizedQuestions,
|
|
() => {
|
|
syncAnswersWithQuestions()
|
|
if (activeQuestionIndex.value >= normalizedQuestions.value.length) {
|
|
activeQuestionIndex.value = Math.max(0, normalizedQuestions.value.length - 1)
|
|
}
|
|
},
|
|
{ immediate: true, deep: true }
|
|
)
|
|
|
|
const toggleSelect = (questionId, value) => {
|
|
if (isProcessing.value) return
|
|
|
|
const current = getSelected(questionId)
|
|
if (current.includes(value)) {
|
|
selectedValues.value[questionId] = current.filter((item) => item !== value)
|
|
} else {
|
|
selectedValues.value[questionId] = [...current, value]
|
|
}
|
|
}
|
|
|
|
const setSingle = (questionId, value) => {
|
|
if (isProcessing.value) return
|
|
selectedValues.value[questionId] = [value]
|
|
}
|
|
|
|
const isQuestionAnswered = (questionItem) => {
|
|
const selected = getSelected(questionItem.questionId)
|
|
if (selected.length === 0) return false
|
|
|
|
const other = String(otherTexts.value[questionItem.questionId] || '').trim()
|
|
if (questionItem.allowOther && isQuestionOtherSelected(questionItem)) {
|
|
return Boolean(other)
|
|
}
|
|
|
|
return true
|
|
}
|
|
|
|
const isSubmitDisabled = computed(() => {
|
|
if (isProcessing.value) return true
|
|
if (normalizedQuestions.value.length === 0) return true
|
|
|
|
return normalizedQuestions.value.some((questionItem) => !isQuestionAnswered(questionItem))
|
|
})
|
|
|
|
const isLastQuestion = computed(() => {
|
|
if (normalizedQuestions.value.length === 0) return true
|
|
return activeQuestionIndex.value >= normalizedQuestions.value.length - 1
|
|
})
|
|
|
|
const isCurrentQuestionAnswered = computed(() => {
|
|
if (!activeQuestion.value) return false
|
|
return isQuestionAnswered(activeQuestion.value)
|
|
})
|
|
|
|
const primaryButtonText = computed(() => (isLastQuestion.value ? '提交' : '下一项'))
|
|
|
|
const isPrimaryButtonDisabled = computed(() => {
|
|
if (isProcessing.value) return true
|
|
if (!activeQuestion.value) return true
|
|
|
|
if (isLastQuestion.value) {
|
|
return isSubmitDisabled.value
|
|
}
|
|
|
|
return !isCurrentQuestionAnswered.value
|
|
})
|
|
|
|
const buildQuestionAnswer = (questionItem) => {
|
|
const selected = getSelected(questionItem.questionId)
|
|
const other = String(otherTexts.value[questionItem.questionId] || '').trim()
|
|
|
|
if (questionItem.allowOther && isQuestionOtherSelected(questionItem)) {
|
|
const selectedWithoutOther = selected.filter((value) => value !== questionItem.otherOptionValue)
|
|
return {
|
|
type: 'other',
|
|
text: other,
|
|
selected: selectedWithoutOther
|
|
}
|
|
}
|
|
|
|
if (questionItem.multiSelect) {
|
|
return selected
|
|
}
|
|
|
|
return selected[0]
|
|
}
|
|
|
|
const buildAnswer = () => {
|
|
const answer = {}
|
|
normalizedQuestions.value.forEach((questionItem) => {
|
|
answer[questionItem.questionId] = buildQuestionAnswer(questionItem)
|
|
})
|
|
return answer
|
|
}
|
|
|
|
const handleSubmit = () => {
|
|
if (isSubmitDisabled.value) return
|
|
isProcessing.value = true
|
|
emit('submit', buildAnswer())
|
|
}
|
|
|
|
const handlePrimaryAction = () => {
|
|
if (isPrimaryButtonDisabled.value) return
|
|
|
|
if (isLastQuestion.value) {
|
|
handleSubmit()
|
|
return
|
|
}
|
|
|
|
setActiveQuestion(activeQuestionIndex.value + 1)
|
|
}
|
|
|
|
const handleCancel = () => {
|
|
if (isProcessing.value) return
|
|
emit('cancel')
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.approval-modal {
|
|
background: var(--gray-0);
|
|
border-radius: 12px 12px;
|
|
box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
|
|
margin: 0 auto 8px;
|
|
max-width: 800px;
|
|
min-width: 360px;
|
|
width: fit-content;
|
|
border: 1px solid var(--gray-200);
|
|
}
|
|
|
|
.approval-content {
|
|
padding: 16px 20px;
|
|
}
|
|
|
|
.question-tabs {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
margin-bottom: 14px;
|
|
width: 100%;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
padding-bottom: 2px;
|
|
box-sizing: border-box;
|
|
overscroll-behavior-x: contain;
|
|
}
|
|
|
|
.tab-item {
|
|
flex: 0 0 auto;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 36px;
|
|
width: 36px;
|
|
height: 30px;
|
|
border: 1px solid var(--gray-200);
|
|
background: var(--gray-25);
|
|
color: var(--gray-700);
|
|
border-radius: 8px;
|
|
padding: 0;
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.tab-item:disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.tab-item.active {
|
|
border-color: var(--main-color);
|
|
background: var(--main-50);
|
|
color: var(--main-700);
|
|
}
|
|
|
|
.tab-item.completed .tab-index {
|
|
color: var(--green-700);
|
|
border-color: var(--green-200);
|
|
background: var(--green-50);
|
|
}
|
|
|
|
.tab-index {
|
|
width: 100%;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: var(--gray-600);
|
|
}
|
|
|
|
.approval-header {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.approval-header h4 {
|
|
margin: 0;
|
|
font-size: 15px;
|
|
font-weight: 500;
|
|
color: var(--gray-800);
|
|
text-align: left;
|
|
}
|
|
|
|
.approval-operation {
|
|
background: var(--gray-50);
|
|
padding: 10px 12px;
|
|
border-radius: 6px;
|
|
font-size: 13px;
|
|
line-height: 1.5;
|
|
display: flex;
|
|
gap: 6px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.approval-operation .label {
|
|
color: var(--gray-600);
|
|
font-weight: 500;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.approval-operation .operation-text {
|
|
color: var(--gray-800);
|
|
word-break: break-word;
|
|
}
|
|
|
|
.question-options {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.option-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
color: var(--gray-800);
|
|
font-size: 14px;
|
|
}
|
|
|
|
.option-item .recommended {
|
|
color: var(--main-color);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.other-input {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.other-input input {
|
|
width: 100%;
|
|
border: 1px solid var(--gray-300);
|
|
border-radius: 6px;
|
|
padding: 8px 10px;
|
|
font-size: 13px;
|
|
outline: none;
|
|
}
|
|
|
|
.other-input input:focus {
|
|
border-color: var(--main-color);
|
|
}
|
|
|
|
.approval-actions {
|
|
display: flex;
|
|
gap: 10px;
|
|
padding: 12px 20px 16px;
|
|
}
|
|
|
|
.btn {
|
|
flex: 1;
|
|
padding: 10px 20px;
|
|
border: none;
|
|
border-radius: 6px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.btn:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.btn-reject {
|
|
background: var(--gray-100);
|
|
color: var(--gray-700);
|
|
}
|
|
|
|
.btn-reject:hover:not(:disabled) {
|
|
background: var(--gray-200);
|
|
}
|
|
|
|
.btn-approve {
|
|
background: var(--main-color);
|
|
color: var(--gray-0);
|
|
}
|
|
|
|
.btn-approve:hover:not(:disabled) {
|
|
background: var(--main-700);
|
|
}
|
|
|
|
.approval-processing {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
padding: 10px;
|
|
color: var(--gray-600);
|
|
font-size: 13px;
|
|
background: var(--gray-25);
|
|
border-top: 1px solid var(--gray-100);
|
|
}
|
|
|
|
.processing-spinner {
|
|
width: 14px;
|
|
height: 14px;
|
|
border: 2px solid var(--gray-300);
|
|
border-top-color: var(--main-color);
|
|
border-radius: 50%;
|
|
animation: spin 0.8s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.slide-up-enter-active,
|
|
.slide-up-leave-active {
|
|
transition: all 0.25s ease;
|
|
}
|
|
|
|
.slide-up-enter-from {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
|
|
.slide-up-leave-to {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
|
|
@media (max-width: 520px) {
|
|
.approval-modal {
|
|
width: calc(100vw - 12px);
|
|
min-width: 0;
|
|
}
|
|
|
|
.approval-content {
|
|
padding: 12px 16px;
|
|
}
|
|
|
|
.tab-item {
|
|
min-width: 30px;
|
|
width: 30px;
|
|
height: 26px;
|
|
padding: 0;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.tab-index {
|
|
font-size: 10px;
|
|
}
|
|
|
|
.approval-header h4 {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.approval-operation {
|
|
font-size: 12px;
|
|
padding: 8px 10px;
|
|
}
|
|
|
|
.approval-actions {
|
|
padding: 10px 16px 12px;
|
|
gap: 8px;
|
|
}
|
|
|
|
.btn {
|
|
padding: 8px 16px;
|
|
font-size: 13px;
|
|
}
|
|
}
|
|
</style>
|