<script setup lang="ts">
|
import { ref, watch } from 'vue';
|
|
const props = defineProps<{
|
open: boolean;
|
suggestCode?: (text: string) => Promise<string>;
|
title: string;
|
}>();
|
const emit = defineEmits<{
|
confirm: [code: string];
|
'update:open': [open: boolean];
|
}>();
|
|
const text = ref('');
|
const suggestion = ref('');
|
const error = ref('');
|
const loading = ref(false);
|
|
watch(
|
() => props.open,
|
(open) => {
|
if (!open) return;
|
text.value = '';
|
suggestion.value = '';
|
error.value = '';
|
},
|
);
|
watch(text, () => {
|
suggestion.value = '';
|
error.value = '';
|
});
|
|
function close(): void {
|
if (!loading.value) emit('update:open', false);
|
}
|
|
async function generateSuggestion(): Promise<void> {
|
const normalizedText = text.value.trim();
|
if (!normalizedText || loading.value) return;
|
if (!props.suggestCode) {
|
error.value = '编码生成服务不可用';
|
return;
|
}
|
loading.value = true;
|
error.value = '';
|
try {
|
suggestion.value = await props.suggestCode(normalizedText);
|
} catch (reason) {
|
error.value = reason instanceof Error ? reason.message : '编码生成失败';
|
} finally {
|
loading.value = false;
|
}
|
}
|
|
function confirmSuggestion(): void {
|
if (!suggestion.value || loading.value) return;
|
emit('confirm', suggestion.value);
|
emit('update:open', false);
|
}
|
|
function submitCurrentAction(): void {
|
if (suggestion.value) confirmSuggestion();
|
else void generateSuggestion();
|
}
|
</script>
|
|
<template>
|
<div v-if="open" data-test="code-assist-modal">
|
<a-modal
|
:closable="!loading"
|
:get-container="false"
|
:keyboard="!loading"
|
:mask-closable="false"
|
:open="open"
|
:title="title"
|
@cancel="close">
|
<a-form layout="vertical">
|
<a-form-item label="中文名称">
|
<a-input
|
v-model:value="text"
|
autofocus
|
data-test="code-assist-text"
|
:disabled="loading"
|
placeholder="请输入中文名称"
|
@press-enter="submitCurrentAction" />
|
</a-form-item>
|
<a-form-item v-if="suggestion" label="建议编码">
|
<a-input data-test="code-assist-suggestion" readonly :value="suggestion" />
|
</a-form-item>
|
<a-alert v-if="error" data-test="code-assist-error" :message="error" show-icon type="error" />
|
</a-form>
|
<template #footer>
|
<a-button :disabled="loading" @click="close">取消</a-button>
|
<a-button
|
v-if="!suggestion"
|
data-test="code-assist-generate"
|
:disabled="!text.trim()"
|
:loading="loading"
|
type="primary"
|
@click="generateSuggestion">
|
生成编码
|
</a-button>
|
<a-button v-else data-test="code-assist-confirm" type="primary" @click="confirmSuggestion">确认填入</a-button>
|
</template>
|
</a-modal>
|
</div>
|
</template>
|
