适配 M002 V3 前端任务流与同卡复核
This commit is contained in:
andy
@@ -0,0 +1,352 @@
|
||||
<template>
|
||||
<section class="manual-resolution">
|
||||
<header>
|
||||
<div>
|
||||
<h2>{{ t('task.manualResolution.title') }}</h2>
|
||||
<p>{{ t('task.manualResolution.description') }}</p>
|
||||
</div>
|
||||
<span class="manual-resolution__status">
|
||||
{{ t('task.reviewStatus') }}: {{ reviewStatusLabel }}
|
||||
</span>
|
||||
</header>
|
||||
|
||||
<div
|
||||
v-if="isResolved"
|
||||
class="manual-resolution__resolved"
|
||||
>
|
||||
<strong>{{ t('task.manualResolution.resolvedTitle') }}</strong>
|
||||
<pre>{{ formatJson(reviewResolution) }}</pre>
|
||||
</div>
|
||||
|
||||
<template v-else>
|
||||
<div
|
||||
v-if="manualReview"
|
||||
class="manual-resolution__meta"
|
||||
>
|
||||
<dl>
|
||||
<div v-if="typeof manualReview.reason_code === 'string'">
|
||||
<dt>{{ t('task.manualResolution.reasonCode') }}</dt>
|
||||
<dd class="th-code">
|
||||
{{ manualReview.reason_code }}
|
||||
</dd>
|
||||
</div>
|
||||
<div v-if="typeof manualReview.review_instruction === 'string'">
|
||||
<dt>{{ t('task.manualResolution.reviewInstruction') }}</dt>
|
||||
<dd>{{ manualReview.review_instruction }}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<div class="manual-resolution__form">
|
||||
<label>
|
||||
<span>{{ t('task.manualResolution.confirmedOrderId') }}</span>
|
||||
<input
|
||||
v-model="confirmedOrderId"
|
||||
name="manual_resolution_confirmed_order_id"
|
||||
type="text"
|
||||
:disabled="busy"
|
||||
:placeholder="taskOrderId"
|
||||
>
|
||||
</label>
|
||||
|
||||
<div
|
||||
v-if="supportedMissingFields.length"
|
||||
class="manual-resolution__fields"
|
||||
>
|
||||
<label
|
||||
v-for="(item, index) in supportedMissingFields"
|
||||
:key="item.pointer"
|
||||
>
|
||||
<span>
|
||||
{{ item.label }}
|
||||
<small class="th-code">{{ item.pointer }}</small>
|
||||
</span>
|
||||
<input
|
||||
v-model="fieldOverrideInputs[item.pointer]"
|
||||
:name="`manual_resolution_field_override_${index}`"
|
||||
type="text"
|
||||
:disabled="busy"
|
||||
:placeholder="t('task.manualResolution.fieldValuePlaceholder')"
|
||||
>
|
||||
</label>
|
||||
</div>
|
||||
<p
|
||||
v-else
|
||||
class="manual-resolution__empty"
|
||||
>
|
||||
{{ t('task.manualResolution.noSupportedMissingFields') }}
|
||||
</p>
|
||||
|
||||
<label>
|
||||
<span>{{ t('task.manualResolution.reason') }}</span>
|
||||
<textarea
|
||||
v-model="reason"
|
||||
name="manual_resolution_reason"
|
||||
rows="3"
|
||||
:disabled="busy"
|
||||
:placeholder="t('task.manualResolution.reasonPlaceholder')"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="formErrorMessage"
|
||||
class="manual-resolution__error"
|
||||
>
|
||||
{{ formErrorMessage }}
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<button
|
||||
type="button"
|
||||
class="primary-button"
|
||||
:disabled="busy || !canSubmit"
|
||||
@click="submitResolution"
|
||||
>
|
||||
<i
|
||||
class="pi pi-check-circle"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
{{ t('task.manualResolution.submit') }}
|
||||
</button>
|
||||
</footer>
|
||||
</template>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
import type {
|
||||
ReservationManualReviewResolutionRequest,
|
||||
ReservationRecord,
|
||||
ReservationTaskFieldResult,
|
||||
} from '@/types/reservation'
|
||||
import { normalizeStableCode } from '@/utils/reservationDisplay'
|
||||
|
||||
const supportedFieldPointers = [
|
||||
'/extracted_fields/pms_room_type_code',
|
||||
'/extracted_fields/room_items/0/pms_room_type_code',
|
||||
] as const
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
taskOrderId: string
|
||||
reviewStatus?: string | null
|
||||
reviewResolution?: ReservationRecord | null
|
||||
manualReview?: ReservationRecord | null
|
||||
fields?: ReservationTaskFieldResult[]
|
||||
fieldValues?: ReservationRecord
|
||||
busy?: boolean
|
||||
}>(),
|
||||
{
|
||||
reviewStatus: null,
|
||||
reviewResolution: null,
|
||||
manualReview: null,
|
||||
fields: () => [],
|
||||
fieldValues: () => ({}),
|
||||
busy: false,
|
||||
},
|
||||
)
|
||||
|
||||
const emit = defineEmits<{
|
||||
submit: [request: ReservationManualReviewResolutionRequest]
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
const confirmedOrderId = ref(props.taskOrderId)
|
||||
const reason = ref('')
|
||||
const formErrorMessage = ref('')
|
||||
const fieldOverrideInputs = ref<Record<string, string>>({})
|
||||
const isResolved = computed(() => normalizeStableCode(props.reviewStatus) === 'RESOLVED')
|
||||
const reviewStatusLabel = computed(() => props.reviewStatus || t('task.manualResolution.pendingStatus'))
|
||||
const supportedMissingFields = computed(() =>
|
||||
extractMissingFields(props.manualReview)
|
||||
.filter((pointer) => supportedFieldPointers.includes(pointer as (typeof supportedFieldPointers)[number]))
|
||||
.map((pointer) => ({
|
||||
pointer,
|
||||
label: findFieldLabel(pointer),
|
||||
})),
|
||||
)
|
||||
const canSubmit = computed(() => {
|
||||
if (!supportedMissingFields.value.length || !confirmedOrderId.value.trim()) {
|
||||
return false
|
||||
}
|
||||
return supportedMissingFields.value.every((item) => String(fieldOverrideInputs.value[item.pointer] ?? '').trim())
|
||||
})
|
||||
|
||||
watch(
|
||||
() => props.taskOrderId,
|
||||
(nextOrderId) => {
|
||||
confirmedOrderId.value = nextOrderId
|
||||
},
|
||||
)
|
||||
|
||||
watch(
|
||||
supportedMissingFields,
|
||||
(items) => {
|
||||
const nextInputs: Record<string, string> = {}
|
||||
items.forEach((item) => {
|
||||
nextInputs[item.pointer] = fieldOverrideInputs.value[item.pointer] || readCurrentFieldValue(item.pointer)
|
||||
})
|
||||
fieldOverrideInputs.value = nextInputs
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
|
||||
function submitResolution(): void {
|
||||
formErrorMessage.value = ''
|
||||
if (!canSubmit.value) {
|
||||
formErrorMessage.value = t('task.manualResolution.fieldRequired')
|
||||
return
|
||||
}
|
||||
|
||||
emit('submit', {
|
||||
confirmed_order_id: confirmedOrderId.value.trim(),
|
||||
reason: reason.value.trim() || undefined,
|
||||
field_overrides: supportedMissingFields.value.map((item) => ({
|
||||
field_pointer: item.pointer,
|
||||
value: String(fieldOverrideInputs.value[item.pointer] ?? '').trim(),
|
||||
})),
|
||||
})
|
||||
}
|
||||
|
||||
function extractMissingFields(manualReview: ReservationRecord | null | undefined): string[] {
|
||||
const missingFields = manualReview?.missing_fields
|
||||
if (!Array.isArray(missingFields)) {
|
||||
return []
|
||||
}
|
||||
return missingFields.filter((item): item is string => typeof item === 'string' && item.startsWith('/'))
|
||||
}
|
||||
|
||||
function findFieldLabel(pointer: string): string {
|
||||
const fieldPath = fieldPointerToFieldPath(pointer)
|
||||
return props.fields.find((field) => field.field_path === fieldPath)?.display_name ?? fieldPath
|
||||
}
|
||||
|
||||
function readCurrentFieldValue(pointer: string): string {
|
||||
const fieldPath = fieldPointerToFieldPath(pointer)
|
||||
const value = props.fieldValues[fieldPath] ?? props.fields.find((field) => field.field_path === fieldPath)?.value
|
||||
return value === undefined || value === null ? '' : String(value)
|
||||
}
|
||||
|
||||
function fieldPointerToFieldPath(pointer: string): string {
|
||||
if (pointer === '/extracted_fields/room_items/0/pms_room_type_code') {
|
||||
return 'extracted_fields.pms_room_type_code'
|
||||
}
|
||||
return pointer.replace(/^\//, '').replace(/\//g, '.')
|
||||
}
|
||||
|
||||
function formatJson(value: unknown): string {
|
||||
return JSON.stringify(value ?? {}, null, 2)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.manual-resolution {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
border: 1px solid var(--th-color-warning);
|
||||
border-radius: var(--th-radius-lg);
|
||||
background: color-mix(in srgb, var(--th-color-warning) 8%, var(--th-color-white));
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.manual-resolution header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.manual-resolution h2,
|
||||
.manual-resolution p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.manual-resolution p {
|
||||
margin-top: 4px;
|
||||
color: var(--th-color-slate-500);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.manual-resolution__status {
|
||||
align-self: flex-start;
|
||||
border-radius: 999px;
|
||||
background: var(--th-color-white);
|
||||
color: var(--th-color-warning);
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
padding: 5px 10px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.manual-resolution__meta dl,
|
||||
.manual-resolution__form,
|
||||
.manual-resolution__fields {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.manual-resolution__meta dl {
|
||||
margin: 0;
|
||||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||
}
|
||||
|
||||
.manual-resolution__meta dt {
|
||||
color: var(--th-color-slate-500);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.manual-resolution__meta dd {
|
||||
margin: 3px 0 0;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.manual-resolution label {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
color: var(--th-color-slate-600);
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.manual-resolution label small {
|
||||
display: block;
|
||||
margin-top: 3px;
|
||||
color: var(--th-color-slate-400);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.manual-resolution input,
|
||||
.manual-resolution textarea {
|
||||
border: 1px solid var(--th-color-slate-200);
|
||||
border-radius: var(--th-radius-md);
|
||||
background: var(--th-color-white);
|
||||
color: var(--th-color-slate-900);
|
||||
font: inherit;
|
||||
padding: 10px 12px;
|
||||
}
|
||||
|
||||
.manual-resolution__error,
|
||||
.manual-resolution__empty {
|
||||
color: var(--th-color-danger);
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.manual-resolution footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.manual-resolution__resolved pre {
|
||||
margin: 8px 0 0;
|
||||
max-height: 180px;
|
||||
overflow: auto;
|
||||
border-radius: var(--th-radius-md);
|
||||
background: var(--th-color-slate-900);
|
||||
color: var(--th-color-white);
|
||||
padding: 12px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user