<script setup lang="ts">
|
import type { ModalMethods } from '@jnpf/ui/modal';
|
|
import { computed, ref } from 'vue';
|
|
import { BasicModal, useModalInner } from '@jnpf/ui/modal';
|
|
const props = defineProps<{
|
suggestCode: (text: string) => Promise<string>;
|
}>();
|
const emit = defineEmits<{
|
confirm: [code: string];
|
register: [modal: ModalMethods, uuid: string];
|
}>();
|
|
const text = ref('');
|
const suggestion = ref('');
|
const error = ref('');
|
const loading = ref(false);
|
const okText = computed(() => suggestion.value ? '确认填入' : '生成编码');
|
const okButtonProps = computed(() => ({ disabled: loading.value || (!suggestion.value && !text.value.trim()) }));
|
const [registerModal, { changeOkLoading, closeModal }] = useModalInner(init);
|
|
function init() {
|
text.value = '';
|
suggestion.value = '';
|
error.value = '';
|
loading.value = false;
|
}
|
|
async function generateSuggestion() {
|
const normalizedText = text.value.trim();
|
if (!normalizedText || loading.value) return;
|
loading.value = true;
|
changeOkLoading(true);
|
error.value = '';
|
try {
|
suggestion.value = await props.suggestCode(normalizedText);
|
} catch (reason) {
|
error.value = reason instanceof Error ? reason.message : '编码生成失败';
|
} finally {
|
loading.value = false;
|
changeOkLoading(false);
|
}
|
}
|
|
function confirmSuggestion() {
|
if (!suggestion.value || loading.value) return;
|
emit('confirm', suggestion.value);
|
closeModal();
|
}
|
|
function handleOk() {
|
if (suggestion.value) confirmSuggestion();
|
else void generateSuggestion();
|
}
|
</script>
|
|
<template>
|
<BasicModal
|
v-bind="$attrs"
|
@register="registerModal"
|
:cancel-button-props="{ disabled: loading }"
|
:closable="!loading"
|
destroy-on-close
|
:keyboard="!loading"
|
:mask-closable="false"
|
:ok-button-props="okButtonProps"
|
:ok-text="okText"
|
title="生成选择组编码"
|
width="520px"
|
@ok="handleOk">
|
<a-form data-test="code-assist-modal" layout="vertical">
|
<a-form-item label="中文名称">
|
<a-input
|
v-model:value="text"
|
autofocus
|
data-test="code-assist-text"
|
:disabled="loading"
|
placeholder="请输入中文名称"
|
@press-enter="handleOk" />
|
</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>
|
</BasicModal>
|
</template>
|
