<script lang="ts" setup>
|
import type { FormInstance } from 'ant-design-vue';
|
|
import { reactive, ref, toRefs } from 'vue';
|
|
import { useMessage } from '@jnpf/hooks';
|
import { ModalClose } from '@jnpf/ui/modal';
|
|
import { $t } from '@vben/locales';
|
|
import { globalShareState } from '@vben-core/shared/global-state';
|
|
import { Modal as AModal, Form, FormItem } from 'ant-design-vue';
|
|
interface State {
|
categoryList: any[];
|
dataForm: any;
|
formRules: any;
|
type: Number;
|
}
|
|
defineOptions({ inheritAttrs: false, name: 'I18nFormModal' });
|
const emit = defineEmits(['register', 'reload']);
|
const { createBaseLang } = globalShareState.getApi();
|
const { useBaseStore } = globalShareState.getStores();
|
|
defineExpose({ openModal });
|
|
const defaultForm = {
|
enCode: '',
|
id: '',
|
map: {},
|
type: 0,
|
};
|
const baseStore = useBaseStore();
|
const formElRef = ref<FormInstance>();
|
const visible = ref(false);
|
const loading = ref(false);
|
const { createMessage } = useMessage();
|
const state = reactive<State>({
|
categoryList: [],
|
dataForm: {
|
enCode: '',
|
id: '',
|
map: {},
|
type: 0,
|
},
|
formRules: {
|
enCode: [
|
{ message: '必填', required: true, trigger: 'change' },
|
{ message: '只能输入字母、数字、点、横线和下划线，且以字母开头', pattern: /^[a-z][\w.-]*$/i, trigger: 'change' },
|
],
|
},
|
type: 0,
|
});
|
const { categoryList, dataForm, formRules } = toRefs(state);
|
|
async function openModal() {
|
visible.value = true;
|
loading.value = false;
|
state.dataForm = { ...defaultForm };
|
formElRef.value?.resetFields();
|
state.categoryList = categoryList.value = (await baseStore.getDictionaryData('Language')) as any[];
|
}
|
function handleCancel() {
|
visible.value = false;
|
emit('reload');
|
}
|
async function handleSubmit() {
|
loading.value = true;
|
try {
|
const values = await formElRef.value?.validate();
|
if (!values) return;
|
if (!state.dataForm.map) state.dataForm.map = {};
|
for (let i = 0; i < state.categoryList.length; i++) {
|
state.dataForm.map[state.categoryList[i].enCode] = state.dataForm[state.categoryList[i].enCode] || '';
|
}
|
createBaseLang(state.dataForm)
|
.then((res) => {
|
createMessage.success(res.msg);
|
loading.value = false;
|
visible.value = false;
|
emit('reload', true);
|
})
|
.catch(() => {
|
loading.value = false;
|
});
|
} catch {
|
loading.value = false;
|
}
|
}
|
</script>
|
<template>
|
<div class="common-container">
|
<AModal v-model:open="visible" :title="$t('common.addText')" :width="600" class="common-container-modal i18n-form-modal" centered :mask-closable="false">
|
<template #closeIcon>
|
<ModalClose :can-fullscreen="false" @cancel="handleCancel" />
|
</template>
|
<template #footer>
|
<a-button @click="handleCancel()">{{ $t('common.cancelText') }}</a-button>
|
<a-button type="primary" v-loading="loading" @click="handleSubmit()">{{ $t('common.okText') }}</a-button>
|
</template>
|
<Form :colon="false" :label-col="{ style: { width: '80px' } }" :model="dataForm" :rules="formRules" ref="formElRef">
|
<FormItem label="翻译标记" name="enCode">
|
<a-input v-model:value="dataForm.enCode" placeholder="请输入" />
|
</FormItem>
|
<FormItem :label="item.fullName" :name="item.enCode" v-for="item in categoryList" :key="item.enCode">
|
<a-input v-model:value="dataForm[item.enCode]" placeholder="请输入" />
|
</FormItem>
|
</Form>
|
</AModal>
|
</div>
|
</template>
|
<style lang="scss">
|
.i18n-form-modal {
|
.ant-modal-body {
|
height: auto !important;
|
padding: 30px 30px 10px !important;
|
}
|
}
|
</style>
|
