所有表单-创建中英双语对照

This commit is contained in:
2026-03-17 12:08:09 +08:00
parent c790f74905
commit 216d3ac8fe
23 changed files with 537 additions and 184 deletions

View File

@@ -1,43 +1,43 @@
<template>
<el-dialog
v-model="visible"
:title="dialogType === 'add' ? '新增摇色子配置' : '编辑摇色子配置'"
:title="dialogType === 'add' ? $t('page.form.dialogTitleAdd') : $t('page.form.dialogTitleEdit')"
width="600px"
align-center
:close-on-click-modal="false"
@close="handleClose"
>
<el-form ref="formRef" :model="formData" :rules="rules" label-width="120px">
<el-form-item label="分组" prop="group">
<el-form-item :label="$t('page.form.group')" prop="group">
<el-input
v-model="formData.group"
placeholder="请输入分组"
:placeholder="$t('page.form.placeholderGroup')"
:disabled="dialogType === 'edit'"
/>
</el-form-item>
<el-form-item label="标题" prop="title">
<el-input v-model="formData.title" placeholder="请输入标题(中文)" />
<el-form-item :label="$t('page.form.title')" prop="title">
<el-input v-model="formData.title" :placeholder="$t('page.form.placeholderTitleZh')" />
</el-form-item>
<el-form-item label="标题(英文)" prop="title_en">
<el-input v-model="formData.title_en" placeholder="请输入标题(英文)" />
<el-form-item :label="$t('page.form.titleEn')" prop="title_en">
<el-input v-model="formData.title_en" :placeholder="$t('page.form.placeholderTitleEn')" />
</el-form-item>
<el-form-item label="配置名称" prop="name">
<el-form-item :label="$t('page.form.configName')" prop="name">
<el-input
v-model="formData.name"
placeholder="请输入配置名称"
:placeholder="$t('page.form.placeholderConfigName')"
:disabled="dialogType === 'edit'"
/>
</el-form-item>
<el-form-item label="" prop="value">
<el-input v-model="formData.value" type="textarea" :rows="5" placeholder="请输入值(中文)" />
<el-form-item :label="$t('page.form.value')" prop="value">
<el-input v-model="formData.value" type="textarea" :rows="5" :placeholder="$t('page.form.placeholderValueZh')" />
</el-form-item>
<el-form-item label="值(英文)" prop="value_en">
<el-input v-model="formData.value_en" type="textarea" :rows="5" placeholder="请输入值(英文)" />
<el-form-item :label="$t('page.form.valueEn')" prop="value_en">
<el-input v-model="formData.value_en" type="textarea" :rows="5" :placeholder="$t('page.form.placeholderValueEn')" />
</el-form-item>
</el-form>
<template #footer>
<el-button @click="handleClose">取消</el-button>
<el-button type="primary" @click="handleSubmit">提交</el-button>
<el-button @click="handleClose">{{ $t('common.cancel') }}</el-button>
<el-button type="primary" @click="handleSubmit">{{ $t('table.form.submit') }}</el-button>
</template>
</el-dialog>
</template>
@@ -46,6 +46,9 @@
import api from '../../../api/config/index'
import { ElMessage } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
interface Props {
modelValue: boolean
@@ -79,13 +82,13 @@
/**
* 表单验证规则
*/
const rules = reactive<FormRules>({
group: [{ required: true, message: '分组必需填写', trigger: 'blur' }],
title: [{ required: true, message: '标题必需填写', trigger: 'blur' }],
title_en: [{ max: 255, message: '英文标题长度需小于 255 字符', trigger: 'blur' }],
name: [{ required: true, message: '配置名称必需填写', trigger: 'blur' }],
value: [{ required: true, message: '值必需填写', trigger: 'blur' }]
})
const rules = computed<FormRules>(() => ({
group: [{ required: true, message: t('page.form.ruleGroupRequired'), trigger: 'blur' }],
title: [{ required: true, message: t('page.form.ruleTitleRequired'), trigger: 'blur' }],
title_en: [{ max: 255, message: t('page.form.ruleTitleEnMax'), trigger: 'blur' }],
name: [{ required: true, message: t('page.form.ruleConfigNameRequired'), trigger: 'blur' }],
value: [{ required: true, message: t('page.form.ruleValueRequired'), trigger: 'blur' }]
}))
/**
* 初始数据
@@ -160,10 +163,10 @@
await formRef.value.validate()
if (props.dialogType === 'add') {
await api.save(formData)
ElMessage.success('新增成功')
ElMessage.success(t('page.form.saveSuccess'))
} else {
await api.update(formData)
ElMessage.success('修改成功')
ElMessage.success(t('page.form.updateSuccess'))
}
emit('success')
handleClose()