<script setup lang="ts">
|
import dayjs from 'dayjs';
|
import type { DraftField } from '../domain/draft';
|
import type { FillFieldValue } from '../domain/types';
|
|
defineProps<{ disabled: boolean; errors: Record<string, string>; fields: DraftField[] }>();
|
const emit = defineEmits<{ update: [tag: string, value: FillFieldValue] }>();
|
|
function updateDate(tag: string, value: string | null) {
|
emit('update', tag, value || '');
|
}
|
</script>
|
<template>
|
<div class="field-list">
|
<a-empty v-if="!fields.length" description="文档中没有已标注字段" />
|
<div v-for="field in fields" :key="field.tag" class="field-row">
|
<label>{{ field.alias || field.tag }}</label>
|
<a-input v-if="field.type === 'text'" :disabled="disabled" :value="field.draftValue" @update:value="emit('update', field.tag, $event)" />
|
<a-textarea v-else-if="field.type === 'multiline'" :disabled="disabled" :value="field.draftValue" @update:value="emit('update', field.tag, $event)" />
|
<a-select v-else-if="field.type === 'select'" :disabled="disabled" :options="field.options.map(item => ({ label: item.display, value: item.value }))" :value="field.draftValue" @update:value="emit('update', field.tag, $event)" />
|
<a-checkbox v-else-if="field.type === 'checkbox'" :checked="Boolean(field.draftValue)" :disabled="disabled" @update:checked="emit('update', field.tag, $event)" />
|
<a-date-picker v-else :disabled="disabled" :value="field.draftValue ? dayjs(String(field.draftValue)) : null" value-format="YYYY-MM-DD" @change="updateDate(field.tag, $event)" />
|
<div v-if="errors[field.tag]" class="field-error">{{ errors[field.tag] }}</div>
|
</div>
|
</div>
|
</template>
|
