<script lang="ts" setup>
|
import type { FormInstance } from 'ant-design-vue';
|
|
import { computed, reactive, ref, toRefs } from 'vue';
|
|
import { useMessage } from '@jnpf/hooks';
|
import { BasicModal, useModalInner } from '@jnpf/ui/modal';
|
|
import { create, getInfo, update } from '#/api/system/baseLang';
|
import { $t } from '#/locales';
|
|
interface State {
|
dataForm: any;
|
formRules: any;
|
categoryList: any[];
|
}
|
|
const emit = defineEmits(['register', 'reload']);
|
const defaultForm = {
|
id: '',
|
type: 0,
|
enCode: '',
|
map: {},
|
};
|
const formElRef = ref<FormInstance>();
|
const state = reactive<State>({
|
dataForm: {
|
id: '',
|
type: 0,
|
enCode: '',
|
map: {},
|
},
|
formRules: {
|
enCode: [
|
{ required: true, message: '必填', trigger: 'change' },
|
{ pattern: /^[a-z][\w.-]*$/i, message: '只能输入字母、数字、点、横线和下划线，且以字母开头', trigger: 'change' },
|
],
|
},
|
categoryList: [],
|
});
|
const { dataForm, formRules, categoryList } = toRefs(state);
|
|
const [registerModal, { closeModal, changeLoading, changeOkLoading }] = useModalInner(init);
|
const { createMessage } = useMessage();
|
|
const getTitle = computed(() => (state.dataForm.id ? $t('common.editText') : $t('common.addText')));
|
|
function init(data) {
|
changeLoading(true);
|
changeOkLoading(false);
|
state.dataForm = { ...defaultForm };
|
formElRef.value?.resetFields();
|
state.dataForm.id = data.id;
|
state.categoryList = data.categoryList;
|
if (state.dataForm.id) {
|
getInfo(state.dataForm.id).then((res) => {
|
state.dataForm = res.data;
|
for (const [key, value] of Object.entries(res.data.map || {})) {
|
state.dataForm[key] = value;
|
}
|
changeLoading(false);
|
});
|
} else {
|
changeLoading(false);
|
}
|
}
|
async function handleSubmit() {
|
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] || '';
|
}
|
const formMethod = state.dataForm.id ? update : create;
|
formMethod(state.dataForm)
|
.then((res) => {
|
createMessage.success(res.msg);
|
changeOkLoading(false);
|
closeModal();
|
emit('reload');
|
})
|
.catch(() => {
|
changeOkLoading(false);
|
});
|
} catch {}
|
}
|
</script>
|
<template>
|
<BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit">
|
<a-form :colon="false" :label-col="{ style: { width: '80px' } }" :model="dataForm" :rules="formRules" ref="formElRef">
|
<a-form-item label="翻译分类" name="type">
|
<a-select v-model:value="dataForm.type" placeholder="请选择">
|
<a-select-option :value="0">客户端</a-select-option>
|
<a-select-option :value="1">服务端</a-select-option>
|
</a-select>
|
</a-form-item>
|
<a-form-item label="翻译标记" name="enCode">
|
<jnpf-input v-model:value="dataForm.enCode" placeholder="请输入" />
|
</a-form-item>
|
<a-form-item :label="item.fullName" :name="item.enCode" v-for="item in categoryList" :key="item.enCode">
|
<jnpf-input v-model:value="dataForm[item.enCode]" placeholder="请输入" />
|
</a-form-item>
|
</a-form>
|
</BasicModal>
|
</template>
|
