il8n页面国际化

uat
wangxiaoshuang 2025-02-12 17:20:10 +08:00
parent 3e680d0033
commit a582daf686
4 changed files with 205 additions and 139 deletions

View File

@ -126,10 +126,12 @@
</el-table-column>
</el-table>
<div style="text-align: right; padding-top: 10px; padding-right: 10px">
<el-button size="mini" @click="drawer = false">取消 </el-button>
<el-button size="mini" type="primary" @click="handleSave"
>保存</el-button
>
<el-button size="mini" @click="drawer = false"
>{{ $t('common:button:cancel') }}
</el-button>
<el-button size="mini" type="primary" @click="handleSave">{{
$t('common:button:save')
}}</el-button>
</div>
</el-drawer>
<feedBack v-if="$route.matched.length > 0" />

View File

@ -8,7 +8,10 @@
size="small"
:rules="rules"
>
<el-form-item label="国际化类型" prop="InternationalizationType">
<el-form-item
:label="$t('system:l18n:search:InternationalizationType')"
prop="InternationalizationType"
>
<el-radio-group v-model="form.InternationalizationType">
<el-radio
v-for="item of $d.InternationalizationType"
@ -18,7 +21,7 @@
>
</el-radio-group>
</el-form-item>
<el-form-item label="状态" prop="State">
<el-form-item :label="$t('system:l18n:search:State')" prop="State">
<el-radio-group v-model="form.State">
<el-radio
v-for="item of $d.InternationalizationKeyState"
@ -28,7 +31,10 @@
>
</el-radio-group>
</el-form-item>
<el-form-item label="迭代" prop="PublishLogId">
<el-form-item
:label="$t('system:l18n:search:PublishVersion')"
prop="PublishLogId"
>
<el-select v-model="form.PublishLogId" clearable filterable>
<el-option
v-for="item in PublishVersionList"
@ -39,7 +45,7 @@
</el-select>
</el-form-item>
<el-table :data="form.AddList" style="width: 100%" height="300">
<el-table-column prop="" label="功能模块/服务名">
<el-table-column prop="" :label="$t('system:l18n:search:Module')">
<template slot-scope="scope">
<el-form-item
label=""
@ -61,7 +67,7 @@
</el-form-item>
</template>
</el-table-column>
<el-table-column prop="" label="标识">
<el-table-column prop="" :label="$t('system:l18n:search:Code')">
<template slot-scope="scope">
<el-form-item
label=""
@ -87,7 +93,7 @@
</el-form-item>
</template>
</el-table-column>
<el-table-column prop="" label="中文值">
<el-table-column prop="" :label="$t('system:l18n:search:ValueCN')">
<template slot-scope="scope">
<el-form-item
label=""
@ -113,7 +119,7 @@
</el-form-item>
</template>
</el-table-column>
<el-table-column prop="" label="英文值">
<el-table-column prop="" :label="$t('system:l18n:search:Value')">
<template slot-scope="scope">
<el-form-item
label=""
@ -139,7 +145,10 @@
</el-form-item>
</template>
</el-table-column>
<el-table-column prop="" label="说明">
<el-table-column
prop=""
:label="$t('system:l18n:search:Description')"
>
<template slot-scope="scope">
<el-form-item
label=""
@ -169,7 +178,7 @@
type="primary"
icon="el-icon-plus"
@click="handleAdd"
>{{ $t("common:button:new") }}</el-button
>{{ $t('common:button:new') }}</el-button
>
</template>
<template slot-scope="scope">
@ -179,7 +188,7 @@
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.$index)"
>{{ $t("common:button:delete") }}</el-button
>{{ $t('common:button:delete') }}</el-button
>
</template>
</el-table-column>
@ -187,28 +196,28 @@
</el-form>
</template>
<template slot="dialog-footer">
<el-button size="small" type="primary" @click="handleCancle"
>取消</el-button
>
<el-button size="small" type="primary" @click="handleSave"
>保存</el-button
>
<el-button size="small" type="primary" @click="handleCancle">{{
$t('common:button:cancel')
}}</el-button>
<el-button size="small" type="primary" @click="handleSave">{{
$t('common:button:save')
}}</el-button>
</template>
</base-model>
</template>
<script>
import { batchAddInternationalization } from "@/api/admin";
import BaseModel from "@/components/BaseModel";
import { batchAddInternationalization } from '@/api/admin'
import BaseModel from '@/components/BaseModel'
const formDataDefault = () => {
return {
State: 0,
InternationalizationType: 1,
PublishLogId: null,
AddList: [],
};
};
}
}
export default {
name: "BatcnAddForm",
name: 'BatcnAddForm',
components: { BaseModel },
data() {
return {
@ -217,59 +226,65 @@ export default {
model_cfg: {
visible: false,
showClose: true,
width: "800px",
title: "",
width: '800px',
title: '',
appendToBody: true,
},
rules: {
PublishLogId: [{ required: true, message: "请选择", trigger: "blur" }],
PublishLogId: [
{
required: true,
message: this.$t('system:l18n:rule:selectPublishLogId'),
trigger: 'blur',
},
],
},
PublishVersionList: [],
};
}
},
mounted() {},
methods: {
openDialog(title, data, options = []) {
this.PublishVersionList = options;
this.model_cfg.visible = true;
this.model_cfg.title = title;
this.form = formDataDefault();
this.PublishVersionList = options
this.model_cfg.visible = true
this.model_cfg.title = title
this.form = formDataDefault()
},
handleSave() {
this.$refs.batcnAddForm.validate((valid) => {
if (!valid) return;
this.loading = true;
if (!valid) return
this.loading = true
batchAddInternationalization(this.form)
.then((res) => {
this.loading = false;
this.$message.success(this.$t("common:message:savedSuccessfully"));
this.model_cfg.visible = false;
this.$emit("getList");
this.loading = false
this.$message.success(this.$t('common:message:savedSuccessfully'))
this.model_cfg.visible = false
this.$emit('getList')
})
.catch(() => {
this.loading = false;
});
});
this.loading = false
})
})
},
handleCancle() {
this.model_cfg.visible = false;
this.model_cfg.visible = false
},
handleAdd() {
this.form.AddList.push({
Description: "",
Code: "",
ValueCN: "",
Value: "",
});
Description: '',
Code: '',
ValueCN: '',
Value: '',
})
},
handleDelete(index) {
this.$confirm("是否确认删除?", {
type: "warning",
this.$confirm(this.$t('system:l18n:confirm:delete'), {
type: 'warning',
distinguishCancelAndClose: true,
}).then(() => {
this.form.AddList.splice(index, 1);
});
this.form.AddList.splice(index, 1)
})
},
},
};
}
</script>

View File

@ -10,7 +10,7 @@
size="small"
>
<el-form-item
label="国际化类型"
:label="$t('system:l18n:search:InternationalizationType')"
prop="InternationalizationType"
v-if="status !== 'batch'"
>
@ -24,7 +24,7 @@
</el-radio-group>
</el-form-item>
<el-form-item
label="功能模块/服务名"
:label="$t('system:l18n:search:Module')"
prop="Module"
v-if="status !== 'batch'"
>
@ -35,7 +35,11 @@
:autosize="{ minRows: 2, maxRows: 4 }"
/>
</el-form-item>
<el-form-item label="标识" prop="Code" v-if="status !== 'batch'">
<el-form-item
:label="$t('system:l18n:search:Code')"
prop="Code"
v-if="status !== 'batch'"
>
<el-input
v-model="form.Code"
type="textarea"
@ -43,7 +47,11 @@
:autosize="{ minRows: 2, maxRows: 4 }"
/>
</el-form-item>
<el-form-item label="中文值" prop="ValueCN" v-if="status !== 'batch'">
<el-form-item
:label="$t('system:l18n:search:ValueCN')"
prop="ValueCN"
v-if="status !== 'batch'"
>
<el-input
v-model="form.ValueCN"
type="textarea"
@ -51,7 +59,11 @@
:autosize="{ minRows: 2, maxRows: 4 }"
/>
</el-form-item>
<el-form-item label="英文值" prop="Value" v-if="status !== 'batch'">
<el-form-item
:label="$t('system:l18n:search:Value')"
prop="Value"
v-if="status !== 'batch'"
>
<el-input
v-model="form.Value"
type="textarea"
@ -59,7 +71,7 @@
:autosize="{ minRows: 2, maxRows: 4 }"
/>
</el-form-item>
<el-form-item label="状态" prop="State">
<el-form-item :label="$t('system:l18n:search:State')" prop="State">
<el-radio-group v-model="form.State">
<el-radio
v-for="item of $d.InternationalizationKeyState"
@ -69,7 +81,11 @@
>
</el-radio-group>
</el-form-item>
<el-form-item label="说明" prop="Description" v-if="status !== 'batch'">
<el-form-item
:label="$t('system:l18n:search:Description')"
prop="Description"
v-if="status !== 'batch'"
>
<el-input
v-model="form.Description"
type="textarea"
@ -77,7 +93,10 @@
:autosize="{ minRows: 2, maxRows: 4 }"
/>
</el-form-item>
<el-form-item label="迭代" prop="PublishLogId">
<el-form-item
:label="$t('system:l18n:search:PublishVersion')"
prop="PublishLogId"
>
<el-select v-model="form.PublishLogId" clearable filterable>
<el-option
v-for="item in PublishVersionList"
@ -90,18 +109,18 @@
</el-form>
</template>
<template slot="dialog-footer">
<el-button size="small" type="primary" @click="handleCancle"
>取消</el-button
>
<el-button size="small" type="primary" @click="handleSave"
>保存</el-button
>
<el-button size="small" type="primary" @click="handleCancle">{{
$t('common:button:cancel')
}}</el-button>
<el-button size="small" type="primary" @click="handleSave">{{
$t('common:button:save')
}}</el-button>
</template>
</base-model>
</template>
<script>
import { addOrUpdateInternationalization } from "@/api/admin";
import BaseModel from "@/components/BaseModel";
import { addOrUpdateInternationalization } from '@/api/admin'
import BaseModel from '@/components/BaseModel'
const formDataDefault = () => {
return {
Id: null,
@ -113,110 +132,138 @@ const formDataDefault = () => {
ValueCN: null,
InternationalizationType: 1,
PublishLogId: null,
};
};
}
}
export default {
name: "I18nForm",
name: 'I18nForm',
components: { BaseModel },
data() {
return {
status: "add", // add update batch
status: 'add', // add update batch
loading: false,
form: formDataDefault(),
rules: {
State: [{ required: true, message: "请选择", trigger: "blur" }],
State: [
{
required: true,
message: this.$t('system:l18n:rule:selectState'),
trigger: 'blur',
},
],
Module: [
{
max: 200,
message: `${this.$t("common:ruleMessage:maxLength")} 200`,
trigger: "blur",
message: `${this.$t('common:ruleMessage:maxLength')} 200`,
trigger: 'blur',
},
],
Description: [
{
max: 200,
message: `${this.$t("common:ruleMessage:maxLength")} 200`,
trigger: "blur",
message: `${this.$t('common:ruleMessage:maxLength')} 200`,
trigger: 'blur',
},
],
Code: [
{ required: true, message: "请注明", trigger: "blur" },
{
required: true,
message: this.$t('system:l18n:rule:inputCode'),
trigger: 'blur',
},
{
max: 200,
message: `${this.$t("common:ruleMessage:maxLength")} 200`,
message: `${this.$t('common:ruleMessage:maxLength')} 200`,
},
],
Value: [
{ required: true, message: "请注明", trigger: "blur" },
{
required: true,
message: this.$t('system:l18n:rule:inputValue'),
trigger: 'blur',
},
{
max: 1000,
message: `${this.$t("common:ruleMessage:maxLength")} 1000`,
message: `${this.$t('common:ruleMessage:maxLength')} 1000`,
},
],
ValueCN: [
{ required: true, message: "请注明", trigger: "blur" },
{
required: true,
message: this.$t('system:l18n:rule:inputValueCN'),
trigger: 'blur',
},
{
max: 1000,
message: `${this.$t("common:ruleMessage:maxLength")} 1000`,
message: `${this.$t('common:ruleMessage:maxLength')} 1000`,
},
],
InternationalizationType: [
{ required: true, message: "请选择", trigger: "blur" },
{
required: true,
message: this.$t('system:l18n:rule:selectInternationalizationType'),
trigger: 'blur',
},
],
PublishLogId: [
{
required: true,
message: this.$t('system:l18n:rule:selectPublishLogId'),
trigger: 'blur',
},
],
PublishLogId: [{ required: true, message: "请选择", trigger: "blur" }],
},
model_cfg: {
visible: false,
showClose: true,
width: "600px",
title: "",
width: '600px',
title: '',
appendToBody: true,
},
PublishVersionList: [],
};
}
},
mounted() {},
methods: {
openDialog(title, data, options = [], status) {
this.PublishVersionList = options;
this.PublishVersionList = options
this.loading = false
this.status = status;
this.model_cfg.visible = true;
this.model_cfg.title = title;
this.status = status
this.model_cfg.visible = true
this.model_cfg.title = title
if (Object.keys(data).length > 0) {
for (const k in this.form) {
if (data.hasOwnProperty(k)) {
this.form[k] = data[k];
this.form[k] = data[k]
}
}
} else {
this.form = formDataDefault();
this.form = formDataDefault()
}
},
handleSave() {
this.$refs.i18nForm.validate((valid) => {
if (!valid) return;
this.loading = true;
if (this.status === "batch") {
return this.$emit("batch", this.form);
if (!valid) return
this.loading = true
if (this.status === 'batch') {
return this.$emit('batch', this.form)
}
addOrUpdateInternationalization(this.form)
.then((res) => {
this.loading = false;
this.$message.success(this.$t("common:message:savedSuccessfully"));
this.model_cfg.visible = false;
this.$emit("getList");
this.loading = false
this.$message.success(this.$t('common:message:savedSuccessfully'))
this.model_cfg.visible = false
this.$emit('getList')
})
.catch(() => {
this.loading = false;
});
});
this.loading = false
})
})
},
handleCancle() {
this.model_cfg.visible = false;
this.model_cfg.visible = false
},
},
};
}
</script>
<style lang="scss" scoped>
::v-deep .el-select {

View File

@ -2,7 +2,9 @@
<div class="log">
<div ref="leftContainer" class="left">
<el-form :inline="true">
<el-form-item label="国际化类型">
<el-form-item
:label="$t('system:l18n:search:InternationalizationType')"
>
<el-select
v-model="searchData.InternationalizationType"
clearable
@ -17,7 +19,7 @@
/>
</el-select>
</el-form-item>
<el-form-item label="功能模块/服务名">
<el-form-item :label="$t('system:l18n:search:Module')">
<el-input
v-model="searchData.Module"
size="small"
@ -25,7 +27,7 @@
style="width: 130px"
/>
</el-form-item>
<el-form-item label="标识">
<el-form-item :label="$t('system:l18n:search:Code')">
<el-input
v-model="searchData.Code"
size="small"
@ -33,7 +35,7 @@
style="width: 130px"
/>
</el-form-item>
<el-form-item label="中文值">
<el-form-item :label="$t('system:l18n:search:ValueCN')">
<el-input
v-model="searchData.ValueCN"
size="small"
@ -41,7 +43,7 @@
style="width: 130px"
/>
</el-form-item>
<el-form-item label="英文值">
<el-form-item :label="$t('system:l18n:search:Value')">
<el-input
v-model="searchData.Value"
size="small"
@ -49,7 +51,7 @@
clearable
/>
</el-form-item>
<el-form-item label="状态">
<el-form-item :label="$t('system:l18n:search:State')">
<el-select
v-model="searchData.State"
clearable
@ -64,7 +66,7 @@
/>
</el-select>
</el-form-item>
<el-form-item label="说明">
<el-form-item :label="$t('system:l18n:search:Description')">
<el-input
v-model="searchData.Description"
size="small"
@ -72,7 +74,7 @@
style="width: 130px"
/>
</el-form-item>
<el-form-item label="迭代">
<el-form-item :label="$t('system:l18n:search:PublishVersion')">
<el-select
v-model="searchData.PublishLogId"
clearable
@ -118,7 +120,7 @@
size="mini"
@click="getList"
>
查询
{{ $t('common:button:search') }}
</el-button>
<!-- 重置 -->
<el-button
@ -135,7 +137,7 @@
size="mini"
@click="handleAdd"
>
新增
{{ $t('common:button:new') }}
</el-button>
<el-button
type="primary"
@ -143,7 +145,7 @@
size="mini"
@click="handleBatchAdd"
>
批量新增
{{ $t('system:l18n:button:batchAdd') }}
</el-button>
<el-button
type="primary"
@ -152,7 +154,7 @@
:disabled="selectTableList.length <= 0"
@click="handleBatchUpdate"
>
批量更新
{{ $t('system:l18n:button:batchUpdate') }}
</el-button>
<el-button
type="primary"
@ -161,7 +163,7 @@
:disabled="selectTableList.length <= 0"
@click="handleBatchUpdateToChange"
>
批量编辑
{{ $t('system:l18n:button:batchEdit') }}
</el-button>
<el-button
size="mini"
@ -184,7 +186,7 @@
><el-table-column type="selection" width="50" />
<el-table-column type="index" width="50" />
<el-table-column
label="国际化类型"
:label="$t('system:l18n:search:InternationalizationType')"
prop="InternationalizationType"
width="120"
show-overflow-tooltip
@ -224,35 +226,35 @@
</template>
</el-table-column>
<el-table-column
label="功能模块/服务名"
:label="$t('system:l18n:search:Module')"
prop="Module"
min-width="140"
show-overflow-tooltip
sortable="custom"
/>
<el-table-column
label="标识"
:label="$t('system:l18n:search:Code')"
prop="Code"
min-width="150"
show-overflow-tooltip
sortable="custom"
/>
<el-table-column
label="中文值"
:label="$t('system:l18n:search:ValueCN')"
prop="ValueCN"
min-width="150"
show-overflow-tooltip
sortable="custom"
/>
<el-table-column
label="英文值"
:label="$t('system:l18n:search:Value')"
prop="Value"
min-width="150"
show-overflow-tooltip
sortable="custom"
/>
<el-table-column
label="状态"
:label="$t('system:l18n:search:State')"
prop="State"
width="100"
show-overflow-tooltip
@ -271,35 +273,35 @@
</template>
</el-table-column>
<el-table-column
label="说明"
:label="$t('system:l18n:search:Description')"
prop="Description"
min-width="100"
show-overflow-tooltip
sortable="custom"
/>
<el-table-column
label="迭代"
:label="$t('system:l18n:search:PublishVersion')"
prop="Version"
min-width="100"
show-overflow-tooltip
sortable="custom"
/>
<el-table-column
label="更新时间"
:label="$t('system:l18n:form:uploadTime')"
prop="UpdateTime"
width="150"
show-overflow-tooltip
sortable="custom"
/>
<el-table-column
label="创建时间"
:label="$t('system:l18n:form:createTime')"
prop="CreateTime"
width="150"
show-overflow-tooltip
sortable="custom"
/>
<el-table-column
label="操作"
:label="$t('common:action:action')"
fixed="right"
prop=""
min-width="120"
@ -312,7 +314,7 @@
icon="el-icon-edit-outline"
@click="handleEdit(scope.row)"
>
编辑
{{ $t('common:button:edit') }}
</el-button>
<el-button
:disabled="scope.row.State === 1"
@ -321,7 +323,7 @@
icon="el-icon-delete"
@click="handleDelete(scope.row)"
>
删除
{{ $t('common:button:delete') }}
</el-button>
</template>
</el-table-column>
@ -421,7 +423,7 @@ export default {
handleBatchUpdate() {
this.$nextTick(() => {
this.$refs['i18nForm'].openDialog(
'批量更新',
this.$t('system:l18n:button:batchUpdate'),
{},
this.PublishVersionList,
'batch'
@ -455,7 +457,7 @@ export default {
handleAdd() {
this.$nextTick(() => {
this.$refs['i18nForm'].openDialog(
'新增',
this.$t("system:l18n:button:add"),
{},
this.PublishVersionList,
'add'
@ -465,7 +467,7 @@ export default {
handleBatchAdd() {
this.$nextTick(() => {
this.$refs['batcnAddForm'].openDialog(
'批量新增',
this.$t("system:l18n:button:batchAdd"),
{},
this.PublishVersionList
)
@ -474,7 +476,7 @@ export default {
handleEdit(row) {
this.$nextTick(() => {
this.$refs['i18nForm'].openDialog(
'编辑',
this.$t("system:l18n:button:edit"),
row,
this.PublishVersionList,
'update'
@ -490,7 +492,7 @@ export default {
},
//
handleDelete(row) {
this.$confirm('是否确认删除?', {
this.$confirm(this.$t("system:l18n:confirm:delete"), {
type: 'warning',
distinguishCancelAndClose: true,
}).then(() => {