国际化页面及功能修改
continuous-integration/drone/push Build is running Details

main
wangxiaoshuang 2025-09-04 14:24:39 +08:00
parent b626079b7d
commit 9fab7eade2
6 changed files with 683 additions and 519 deletions

View File

@ -1,11 +1,7 @@
<template>
<div id="app" style="position: relative">
<router-view />
<div
v-show="show"
v-adaptive
@click="openI18n"
style="
<div v-show="show" v-adaptive @click="openI18n" style="
position: fixed;
bottom: 50px;
left: 50px;
@ -18,68 +14,65 @@
color: #fff;
border-radius: 50%;
cursor: pointer;
"
>
">
i18n
</div>
<el-drawer title="国际化" :visible.sync="drawer" direction="rtl" size="80%">
<div style="width: 320px">
<el-form label-width="100px" size="small">
<el-form-item label="关键字">
<el-drawer :title="$t('il8n:title')" :visible.sync="drawer" :wrapperClosable="false" direction="rtl" size="80%">
<div style="width: 800px">
<el-form label-width="100px" @submit.native.prevent size="small" :inline="true" class="demo-form-inline">
<el-form-item :label="$t('il8n:search:keyword')">
<el-input v-model="key" @input="keyChange" />
<el-input v-model="key" @input="keyChange" style="display: none" />
</el-form-item>
<el-form-item :label="$t('il8n:search:state')">
<el-select v-model="State" clearable filterable @change="handleStateChange">
<el-option v-for="item of $d.InternationalizationKeyState"
:key="'InternationalizationKeyState' + item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
</el-form>
</div>
<el-table
:data="tableData"
v-adaptive="{ bottomOffset: 50 }"
height="100"
style="width: 100%"
>
<el-table-column prop="Code" label="标签" width="300">
</el-table-column>
<!-- <el-table-column-->
<!-- prop="Description"-->
<!-- label="路由"-->
<!-- show-overflow-tooltip-->
<!-- width="180">-->
<!-- <template slot-scope="scope">-->
<!-- {{scope.row.Description}}-->
<!-- </template>-->
<!-- </el-table-column>-->
<el-table-column prop="Value" label="英文">
<el-table :data="tableData" v-adaptive="{ bottomOffset: 50 }" height="100" style="width: 100%"
@sort-change="handleSortByColumn">
<el-table-column prop="Code" :label="$t('il8n:table:label')" width="300" sortable="custom">
<template slot-scope="scope">
<el-input
v-model="scope.row.Value"
@input="
(e) => {
$set(scope.row, 'Value', e)
}
"
size="mini"
></el-input>
<span @click="$copyText(scope.row.Code)">{{ scope.row.Code }}</span>
</template>
</el-table-column>
<el-table-column prop="ValueCN" label="中文">
<el-table-column prop="Value" :label="$t('il8n:table:en')" sortable="custom">
<template slot-scope="scope">
<el-input
v-model="scope.row.ValueCN"
@input="
(e) => {
$set(scope.row, 'ValueCN', e)
}
"
size="mini"
></el-input>
<el-input v-model.trim="scope.row.Value" @input="
(e) => {
$set(scope.row, 'Value', e.trim())
}
" size="mini"></el-input>
</template>
</el-table-column>
<el-table-column prop="ValueCN" :label="$t('il8n:table:cn')" sortable="custom">
<template slot-scope="scope">
<el-input v-model.trim="scope.row.ValueCN" @input="
(e) => {
$set(scope.row, 'ValueCN', e.trim())
}
" size="mini"></el-input>
</template>
</el-table-column>
<el-table-column prop="ValueCN" :label="$t('il8n:table:state')" sortable="custom">
<template slot-scope="scope">
<el-select v-model="scope.row.State" clearable filterable size="mini">
<el-option v-for="item of $d.InternationalizationKeyState"
:key="'InternationalizationKeyState' + item.value" :label="item.label" :value="item.value" />
</el-select>
</template>
</el-table-column>
<el-table-column prop="Version" :label="$t('il8n:table:Version')" sortable="custom">
</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>
</div>
@ -101,6 +94,8 @@ export default {
show: false,
key: null,
arr: [],
il8nExternal: false,
State: null,
}
},
mounted() {
@ -108,6 +103,23 @@ export default {
// this.show = false;
},
methods: {
//
handleSortByColumn(column) {
if (column.order === 'ascending') {
this.tableData.sort((a, b) =>
(a[column.prop] || '').localeCompare(b[column.prop])
)
} else {
this.tableData.sort((a, b) =>
(b[column.prop] || '').localeCompare(a[column.prop])
)
}
},
handleStateChange() {
this.tableData.forEach((item) => {
item.State = this.State
})
},
changeValue(target, attr, e) {
this.$set(target, attr, e)
},
@ -117,9 +129,12 @@ export default {
[],
this.arr.filter(
(v) =>
~v.Code.indexOf(this.key) ||
~v.Value.indexOf(this.key) ||
~v.ValueCN.indexOf(this.key)
(v.Code &&
~v.Code.toLowerCase().indexOf(this.key.toLowerCase())) ||
(v.Value &&
~v.Value.toLowerCase().indexOf(this.key.toLowerCase())) ||
(v.ValueCN &&
~v.ValueCN.toLowerCase().indexOf(this.key.toLowerCase()))
)
)
} else {
@ -127,39 +142,75 @@ export default {
}
},
handleSave() {
this.$confirm('确定修改当前页面国际化内容?').then(() => {
batchAddOrUpdateFrontInternationalization(this.tableData).then(
async (res) => {
var zhMessages = {},
enMessages = {}
var Internationalization = await getFrontInternationalizationList()
Vue.prototype.$tl = Internationalization.Result
this.tableData.forEach((v) => {
// zhMessages[v.Description + '_' + v.Code] = v.ValueCN
// enMessages[v.Description + '_' + v.Code] = v.Value
zhMessages[v.Code] = v.ValueCN
enMessages[v.Code] = v.Value
})
i18n.mergeLocaleMessage('zh', zhMessages)
i18n.mergeLocaleMessage('en', enMessages)
this.drawer = false
this.$message.success('国际化修改成功')
}
)
})
this.$confirm(this.$t("i18n:confirm:updatei18n"))
.then(() => {
batchAddOrUpdateFrontInternationalization(this.tableData).then(
async (res) => {
var zhMessages = {},
enMessages = {}
var Internationalization =
await getFrontInternationalizationList()
Vue.prototype.$tl = Internationalization.Result
this.tableData.forEach((v) => {
// zhMessages[v.Description + '_' + v.Code] = v.ValueCN
// enMessages[v.Description + '_' + v.Code] = v.Value
zhMessages[v.Code] = v.ValueCN
enMessages[v.Code] = v.Value
})
i18n.mergeLocaleMessage('zh', zhMessages)
i18n.mergeLocaleMessage('en', enMessages)
this.drawer = false
this.$message.success(this.$t("i18n:message:updatei18nSuccessfully"))
if (this.il8nExternal) {
this.$EventBus.$emit('il8nUpdate')
}
}
)
})
.catch((err) => {
console.log(err)
})
},
openI18n() {
openI18n(ARRAY) {
this.tableData = []
this.il8nExternal = false
this.State = null
this.key = null
this.drawer = true
let arr = []
let tableData = this.$tl.map((v) => {
let a = { ...v }
// if (!a.Description) {
// a.Description = this.$route.path
// }
return a
})
let tableData = []
if (ARRAY && Array.isArray(ARRAY)) {
this.il8nExternal = true
let data = ARRAY.map((v) => {
let a = { ...v }
return a
})
tableData = data.map((item) => {
return {
Code: item.Code,
Description: item.Description,
FrontType: item.FrontType,
Module: item.Module,
Value: item.Value,
ValueCN: item.ValueCN,
State: item.State,
Version: item.Version,
InternationalizationType: item.InternationalizationType,
}
})
this.tableData = Object.assign([], tableData)
this.arr = Object.assign([], tableData)
return false
} else {
tableData = this.$tl.map((v) => {
let a = { ...v }
// if (!a.Description) {
// a.Description = this.$route.path
// }
return a
})
}
tableData = tableData.filter((v) => {
// return ~this.$path.indexOf(v.Description + '_' + v.Code)
return ~this.$path.indexOf(v.Code)
@ -176,6 +227,9 @@ export default {
Description: null,
Value: null,
ValueCN: null,
State: 0,
Version: this.$version.Version,
InternationalizationType: 0,
})
}
})
@ -193,10 +247,8 @@ export default {
} else {
this.tableData = Object.assign([], this.arr)
}
// console.log(JSON.stringify(this.$path));
// console.log(JSON.stringify(this.tableData));
},
},
}
}
</script>
@ -204,10 +256,12 @@ export default {
.el-tooltip__popper {
max-width: 400px;
}
.my_multiple {
.el-input--medium .el-input__inner {
height: 36px !important;
}
.el-select__tags {
flex-wrap: nowrap;
overflow: hidden;
@ -216,6 +270,7 @@ export default {
display: block;
}
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none !important;
@ -228,6 +283,7 @@ input[type='number'] {
.viewer-fixed.viewer-container {
z-index: 10000;
}
textarea {
white-space: break-spaces;
word-break: normal;
@ -236,9 +292,11 @@ textarea {
* {
word-break: normal !important;
}
.box-body .el-button.is-circle:not(.is-disabled) i:before {
color: #428bca;
}
.box-body .el-button.is-circle i.el-icon-question:before {
color: #fff;
}

View File

@ -51,3 +51,10 @@ export function batchAddOrUpdateFrontInternationalization(params) {
data: params
})
}
// 获取当前版本
export function getCurrentPublishInfo() {
return request({
url: `/PublishLog/getCurrentPublishInfo`,
method: 'get'
})
}

View File

@ -3,7 +3,7 @@ import Vue from 'vue'
import 'normalize.css/normalize.css' // A modern alternative to CSS resets
import ElementUI from 'element-ui'
import { getBasicDataAllSelect, getFrontInternationalizationList } from '@/api/dictionary/dictionary'
import { getBasicDataAllSelect, getFrontInternationalizationList,getCurrentPublishInfo } from '@/api/dictionary/dictionary'
import './assets/css/theme-blue/index.css' // 浅绿色主题
import './assets/css/iconfont/index.css' // 阿里巴巴图标库
import i18n from './lang'
@ -185,6 +185,9 @@ async function VueInit() {
zhMessages[v.Code] = v.ValueCN
enMessages[v.Code] = v.Value
})
// 获取版本信息
let PublishInfo = await getCurrentPublishInfo();
Vue.prototype.$version = PublishInfo.Result;
i18n.mergeLocaleMessage('zh', zhMessages)
i18n.mergeLocaleMessage('en', enMessages)
let d = function (code) {

View File

@ -1,153 +1,127 @@
<template>
<base-model :config="model_cfg">
<template slot="dialog-body">
<el-form
ref="batcnAddForm"
v-loading="loading"
:model="form"
size="small"
>
<el-form-item label="国际化类型" prop="InternationalizationType">
<el-form ref="batcnAddForm" v-loading="loading" :model="form" size="small" :rules="rules">
<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"
:key="'InternationalizationType'+item.value"
:label="item.value"
>{{ item.label }}</el-radio>
<el-radio v-for="item of $d.InternationalizationType" :key="'InternationalizationType' + item.value"
:label="item.value">{{ item.label }}</el-radio>
</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"
:key="'InternationalizationKeyState'+item.value"
:label="item.value"
>{{ item.label }}</el-radio>
<el-radio v-for="item of $d.InternationalizationKeyState" :key="'InternationalizationKeyState' + item.value"
:label="item.value">{{ item.label }}</el-radio>
</el-radio-group>
</el-form-item>
<el-table
:data="form.AddList"
style="width: 100%"
height="300"
>
<el-table-column
prop=""
label="功能模块/服务名"
>
<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" :key="item.Id" :label="item.Version" :value="item.Id" />
</el-select>
</el-form-item>
<el-table :data="form.AddList" style="width: 100%" height="300">
<el-table-column prop="" :label="$t('system:l18n:search:Module')">
<template slot-scope="scope">
<el-form-item
label=""
:prop="`AddList.${scope.$index}.Description`"
:rules="[
{ required: true,message: $t('common:ruleMessage:specify'), trigger: ['change','blur']},
{ max: 200, message: `${$t('common:ruleMessage:maxLength')} 200` }
]"
>
<el-input
v-model="scope.row.Description"
type="textarea"
maxlength="200"
:autosize="{ minRows: 2, maxRows: 4}"
/>
<el-form-item label="" :prop="`AddList.${scope.$index}.Module`" :rules="[
{
max: 200,
message: `${$t('common:ruleMessage:maxLength')} 200`,
trigger: ['change', 'blur'],
},
]">
<el-input v-model="scope.row.Module" type="textarea" maxlength="200"
:autosize="{ minRows: 2, maxRows: 4 }" />
</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=""
:prop="`AddList.${scope.$index}.Code`"
:rules="[
{ required: true,message: $t('common:ruleMessage:specify'), trigger: ['change','blur']},
{ max: 200, message: `${$t('common:ruleMessage:maxLength')} 200` }
]"
>
<el-input
v-model="scope.row.Code"
type="textarea"
maxlength="200"
:autosize="{ minRows: 2, maxRows: 4}"
/>
<el-form-item label="" :prop="`AddList.${scope.$index}.Code`" :rules="[
{
required: true,
message: $t('common:ruleMessage:specify'),
trigger: ['change', 'blur'],
},
{
max: 200,
message: `${$t('common:ruleMessage:maxLength')} 200`,
},
]">
<el-input v-model="scope.row.Code" type="textarea" maxlength="200"
:autosize="{ minRows: 2, maxRows: 4 }" />
</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=""
:prop="`AddList.${scope.$index}.ValueCN`"
:rules="[
{ required: true,message: $t('common:ruleMessage:specify'), trigger: ['change','blur']},
{ max: 1000, message: `${$t('common:ruleMessage:maxLength')} 1000` }
]"
>
<el-input
v-model="scope.row.ValueCN"
type="textarea"
maxlength="1000"
:autosize="{ minRows: 2, maxRows: 4}"
/>
<el-form-item label="" :prop="`AddList.${scope.$index}.ValueCN`" :rules="[
{
required: true,
message: $t('common:ruleMessage:specify'),
trigger: ['change', 'blur'],
},
{
max: 1000,
message: `${$t('common:ruleMessage:maxLength')} 1000`,
},
]">
<el-input v-model="scope.row.ValueCN" type="textarea" maxlength="1000"
:autosize="{ minRows: 2, maxRows: 4 }" />
</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=""
:prop="`AddList.${scope.$index}.Value`"
:rules="[
{ required: true,message: $t('common:ruleMessage:specify'), trigger: ['change','blur']},
{ max: 1000, message: `${$t('common:ruleMessage:maxLength')} 1000` }
]"
>
<el-input
v-model="scope.row.Value"
type="textarea"
maxlength="1000"
:autosize="{ minRows: 2, maxRows: 4}"
/>
<el-form-item label="" :prop="`AddList.${scope.$index}.Value`" :rules="[
{
required: true,
message: $t('common:ruleMessage:specify'),
trigger: ['change', 'blur'],
},
{
max: 1000,
message: `${$t('common:ruleMessage:maxLength')} 1000`,
},
]">
<el-input v-model="scope.row.Value" type="textarea" maxlength="1000"
:autosize="{ minRows: 2, maxRows: 4 }" />
</el-form-item>
</template>
</el-table-column>
<el-table-column
align="right"
width="100"
>
<el-table-column prop="" :label="$t('system:l18n:search:Description')">
<template slot-scope="scope">
<el-form-item label="" :prop="`AddList.${scope.$index}.Description`" :rules="[
{
max: 200,
message: `${$t('common:ruleMessage:maxLength')} 200`,
trigger: ['change', 'blur'],
},
]">
<el-input v-model="scope.row.Description" type="textarea" maxlength="200"
:autosize="{ minRows: 2, maxRows: 4 }" />
</el-form-item>
</template>
</el-table-column>
<el-table-column align="right" width="100">
<template slot="header">
<!-- 新增 -->
<el-button
size="small"
type="primary"
icon="el-icon-plus"
@click="handleAdd"
>{{ $t('common:button:new') }}</el-button>
<el-button size="small" type="primary" @click="handleAdd">{{ $t('common:button:new') }}</el-button>
</template>
<template slot-scope="scope">
<!-- 删除 -->
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.$index)"
>{{ $t('common:button:delete') }}</el-button>
<el-button type="text" @click="handleDelete(scope.$index)">{{ $t('common:button:delete') }}</el-button>
</template>
</el-table-column>
</el-table>
</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>
@ -158,7 +132,8 @@ const formDataDefault = () => {
return {
State: 0,
InternationalizationType: 1,
AddList: []
PublishLogId: null,
AddList: [],
}
}
export default {
@ -168,30 +143,47 @@ export default {
return {
loading: false,
form: formDataDefault(),
model_cfg: { visible: false, showClose: true, width: '800px', title: '', appendToBody: true }
model_cfg: {
visible: false,
showClose: true,
width: '800px',
title: '',
appendToBody: true,
},
rules: {
PublishLogId: [
{
required: true,
message: this.$t('system:l18n:rule:selectPublishLogId'),
trigger: 'blur',
},
],
},
PublishVersionList: [],
}
},
mounted() {
},
mounted() { },
methods: {
openDialog(title, data) {
openDialog(title, data, options = []) {
this.PublishVersionList = options
this.model_cfg.visible = true
this.model_cfg.title = title
this.form = formDataDefault()
},
handleSave() {
this.$refs.batcnAddForm.validate(valid => {
this.$refs.batcnAddForm.validate((valid) => {
if (!valid) return
this.loading = true
batchAddInternationalization(this.form).then(res => {
this.loading = false
this.$message.success('保存成功!')
this.model_cfg.visible = false
this.$emit('getList')
}).catch(() => {
this.loading = false
})
batchAddInternationalization(this.form)
.then((res) => {
this.loading = false
this.$message.success(this.$t('common:message:savedSuccessfully'))
this.model_cfg.visible = false
this.$emit('getList')
})
.catch(() => {
this.loading = false
})
})
},
handleCancle() {
@ -202,17 +194,17 @@ export default {
Description: '',
Code: '',
ValueCN: '',
Value: ''
Value: '',
})
},
handleDelete(index) {
this.$confirm('是否确认删除?', {
this.$confirm(this.$t('system:l18n:confirm:delete'), {
type: 'warning',
distinguishCancelAndClose: true
distinguishCancelAndClose: true,
}).then(() => {
this.form.AddList.splice(index, 1)
})
}
}
},
},
}
</script>

View File

@ -1,70 +1,49 @@
<template>
<base-model :config="model_cfg">
<template slot="dialog-body">
<el-form
ref="i18nForm"
v-loading="loading"
:model="form"
:rules="rules"
label-width="130px"
size="small"
>
<el-form-item label="国际化类型" prop="InternationalizationType">
<el-form ref="i18nForm" v-loading="loading" :model="form" :rules="rules" label-width="130px" size="small">
<el-form-item :label="$t('system:l18n:search:InternationalizationType')" prop="InternationalizationType"
v-if="status !== 'batch'">
<el-radio-group v-model="form.InternationalizationType">
<el-radio
v-for="item of $d.InternationalizationType"
:key="'InternationalizationType'+item.value"
:label="item.value"
>{{ item.label }}</el-radio>
<el-radio v-for="item of $d.InternationalizationType" :key="'InternationalizationType' + item.value"
:label="item.value">{{ item.label }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="功能模块/服务名" prop="Description">
<el-input
v-model="form.Description"
type="textarea"
maxlength="200"
:autosize="{ minRows: 2, maxRows: 4}"
/>
<el-form-item :label="$t('system:l18n:search:Module')" prop="Module" v-if="status !== 'batch'">
<el-input v-model="form.Module" type="textarea" maxlength="200" :autosize="{ minRows: 2, maxRows: 4 }" />
</el-form-item>
<el-form-item label="标识" prop="Code">
<el-input
v-model="form.Code"
type="textarea"
maxlength="200"
:autosize="{ minRows: 2, maxRows: 4}"
/>
<el-form-item :label="$t('system:l18n:search:Code')" prop="Code" v-if="status !== 'batch'">
<el-input v-model="form.Code" type="textarea" maxlength="200" :autosize="{ minRows: 2, maxRows: 4 }" />
</el-form-item>
<el-form-item label="中文值" prop="ValueCN">
<el-input
v-model="form.ValueCN"
type="textarea"
maxlength="1000"
:autosize="{ minRows: 2, maxRows: 4}"
/>
<el-form-item :label="$t('system:l18n:search:ValueCN')" prop="ValueCN" v-if="status !== 'batch'">
<el-input v-model="form.ValueCN" type="textarea" maxlength="1000" :autosize="{ minRows: 2, maxRows: 4 }" />
</el-form-item>
<el-form-item label="英文值" prop="Value">
<el-input
v-model="form.Value"
type="textarea"
maxlength="1000"
:autosize="{ minRows: 2, maxRows: 4}"
/>
<el-form-item :label="$t('system:l18n:search:Value')" prop="Value" v-if="status !== 'batch'">
<el-input v-model="form.Value" type="textarea" maxlength="1000" :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"
:key="'InternationalizationKeyState'+item.value"
:label="item.value"
>{{ item.label }}</el-radio>
<el-radio v-for="item of $d.InternationalizationKeyState" :key="'InternationalizationKeyState' + item.value"
:label="item.value">{{ item.label }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item :label="$t('system:l18n:search:Description')" prop="Description" v-if="status !== 'batch'">
<el-input v-model="form.Description" type="textarea" maxlength="200" :autosize="{ minRows: 2, maxRows: 4 }" />
</el-form-item>
<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" :key="item.Id" :label="item.Version" :value="item.Id" />
</el-select>
</el-form-item>
</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>
@ -76,10 +55,12 @@ const formDataDefault = () => {
Id: null,
State: 0,
Description: null,
Module: null,
Code: null,
Value: null,
ValueCN: null,
InternationalizationType: 1
InternationalizationType: 1,
PublishLogId: null,
}
}
export default {
@ -87,40 +68,95 @@ export default {
components: { BaseModel },
data() {
return {
status: 'add', // add update batch
loading: false,
form: formDataDefault(),
rules: {
State: [
{ required: true, message: '请选择', trigger: 'blur' }
{
required: true,
message: this.$t('system:l18n:rule:selectState'),
trigger: 'blur',
},
],
Module: [
{
max: 200,
message: `${this.$t('common:ruleMessage:maxLength')} 200`,
trigger: 'blur',
},
],
Description: [
{ required: true, message: '请注明', trigger: 'blur' },
{ max: 200, message: `${this.$t('common:ruleMessage:maxLength')} 200` }
{
max: 200,
message: `${this.$t('common:ruleMessage:maxLength')} 200`,
trigger: 'blur',
},
],
Code: [
{ required: true, message: '请注明', trigger: 'blur' },
{ max: 200, message: `${this.$t('common:ruleMessage:maxLength')} 200` }
{
required: true,
message: this.$t('system:l18n:rule:inputCode'),
trigger: 'blur',
},
{
max: 200,
message: `${this.$t('common:ruleMessage:maxLength')} 200`,
},
],
Value: [
{ required: true, message: '请注明', trigger: 'blur' },
{ max: 1000, message: `${this.$t('common:ruleMessage:maxLength')} 1000` }
{
required: true,
message: this.$t('system:l18n:rule:inputValue'),
trigger: 'blur',
},
{
max: 1000,
message: `${this.$t('common:ruleMessage:maxLength')} 1000`,
},
],
ValueCN: [
{ required: true, message: '请注明', trigger: 'blur' },
{ max: 1000, message: `${this.$t('common:ruleMessage:maxLength')} 1000` }
{
required: true,
message: this.$t('system:l18n:rule:inputValueCN'),
trigger: 'blur',
},
{
max: 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',
},
],
},
model_cfg: { visible: false, showClose: true, width: '600px', title: '', appendToBody: true }
model_cfg: {
visible: false,
showClose: true,
width: '600px',
title: '',
appendToBody: true,
},
PublishVersionList: [],
}
},
mounted() {
},
mounted() { },
methods: {
openDialog(title, data) {
openDialog(title, data, options = [], status) {
this.PublishVersionList = options
this.loading = false
this.status = status
this.model_cfg.visible = true
this.model_cfg.title = title
if (Object.keys(data).length > 0) {
@ -134,22 +170,32 @@ export default {
}
},
handleSave() {
this.$refs.i18nForm.validate(valid => {
this.$refs.i18nForm.validate((valid) => {
if (!valid) return
this.loading = true
addOrUpdateInternationalization(this.form).then(res => {
this.loading = false
this.$message.success('保存成功!')
this.model_cfg.visible = false
this.$emit('getList')
}).catch(() => {
this.loading = false
})
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')
})
.catch(() => {
this.loading = false
})
})
},
handleCancle() {
this.model_cfg.visible = false
}
}
},
},
}
</script>
<style lang="scss" scoped>
::v-deep .el-select {
width: 100%;
}
</style>

View File

@ -2,156 +2,118 @@
<div class="log">
<div ref="leftContainer" class="left">
<el-form :inline="true">
<el-form-item label="国际化类型">
<el-select
v-model="searchData.InternationalizationType"
clearable
filterable
style="width:130px;"
>
<el-option
v-for="item of $d.InternationalizationType"
:key="'InternationalizationType'+item.value"
:label="item.label"
:value="item.value"
/>
<el-form-item :label="$t('system:l18n:search:InternationalizationType')">
<el-select v-model="searchData.InternationalizationType" clearable filterable style="width: 130px">
<el-option v-for="item of $d.InternationalizationType" :key="'InternationalizationType' + item.value"
:label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="功能模块/服务名">
<el-input
v-model="searchData.Description"
size="small"
clearable
style="width:130px;"
/>
<el-form-item :label="$t('system:l18n:search:Module')">
<el-input v-model="searchData.Module" clearable style="width: 130px" />
</el-form-item>
<el-form-item label="标识">
<el-input
v-model="searchData.Code"
size="small"
clearable
style="width:130px;"
/>
<el-form-item :label="$t('system:l18n:search:Code')">
<el-input v-model="searchData.Code" clearable style="width: 130px" />
</el-form-item>
<el-form-item label="中文值">
<el-input
v-model="searchData.ValueCN"
size="small"
clearable
style="width:130px;"
/>
<el-form-item :label="$t('system:l18n:search:ValueCN')">
<el-input v-model="searchData.ValueCN" clearable style="width: 130px" />
</el-form-item>
<el-form-item label="英文值">
<el-input
v-model="searchData.Value"
size="small"
style="width:130px;"
clearable
/>
<el-form-item :label="$t('system:l18n:search:Value')">
<el-input v-model="searchData.Value" style="width: 130px" clearable />
</el-form-item>
<el-form-item label="状态">
<el-select v-model="searchData.State" clearable filterable style="width:130px;">
<el-option
v-for="item of $d.InternationalizationKeyState"
:key="'InternationalizationKeyState'+item.value"
:label="item.label"
:value="item.value"
/>
<el-form-item :label="$t('system:l18n:search:State')">
<el-select v-model="searchData.State" clearable filterable style="width: 130px">
<el-option v-for="item of $d.InternationalizationKeyState"
:key="'InternationalizationKeyState' + item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item :label="$t('system:l18n:search:Description')">
<el-input v-model="searchData.Description" clearable style="width: 130px" />
</el-form-item>
<el-form-item :label="$t('system:l18n:search:PublishVersion')">
<el-select v-model="searchData.PublishLogId" clearable filterable style="width: 130px">
<el-option v-for="item in PublishVersionList" :key="item.Id" :label="item.Version" :value="item.Id" />
</el-select>
</el-form-item>
<el-form-item :label="$t('system:l18n:form:createTime')">
<el-date-picker v-model="datetimerange_createTime" type="datetimerange"
:default-time="['00:00:00', '23:59:59']" :start-placeholder="$t('system:l18n:search:beginTime')"
:end-placeholder="$t('system:l18n:search:endTime')" value-format="yyyy-MM-dd HH:mm:ss"
@change="(val) => handleDatetimeChange(val, 'createTime')" style="width: 250px" />
</el-form-item>
<el-form-item :label="$t('system:l18n:form:uploadTime')">
<el-date-picker v-model="datetimerange_updateTime" type="datetimerange"
:default-time="['00:00:00', '23:59:59']" :start-placeholder="$t('system:l18n:search:beginTime')"
:end-placeholder="$t('system:l18n:search:endTime')" value-format="yyyy-MM-dd HH:mm:ss"
@change="(val) => handleDatetimeChange(val, 'updateTime')" style="width: 250px" />
</el-form-item>
<el-form-item>
<el-button
type="primary"
icon="el-icon-search"
size="mini"
@click="getList"
>
查询
<el-button type="primary" icon="el-icon-search" @click="getList">
{{ $t('common:button:search') }}
</el-button>
<el-button
type="primary"
icon="el-icon-plus"
size="mini"
@click="handleAdd"
>
新增
<!-- 重置 -->
<el-button type="primary" icon="el-icon-refresh-left" @click="handleReset">
{{ $t('common:button:reset') }}
</el-button>
<el-button
type="primary"
icon="el-icon-plus"
size="mini"
@click="handleBatchAdd"
>
批量新增
<el-button type="primary" @click="handleAdd">
{{ $t('common:button:new') }}
</el-button>
<el-button type="primary" @click="handleBatchAdd">
{{ $t('system:l18n:button:batchAdd') }}
</el-button>
<el-button type="primary" :disabled="selectTableList.length <= 0" @click="handleBatchUpdate">
{{ $t('system:l18n:button:batchUpdate') }}
</el-button>
<el-button type="primary" :disabled="selectTableList.length <= 0" @click="handleBatchUpdateToChange">
{{ $t('system:l18n:button:batchEdit') }}
</el-button>
<el-button type="primary" @click="exportTable">
{{ $t('common:button:export') }}
</el-button>
</el-form-item>
</el-form>
<el-table
v-loading="loading"
v-adaptive="{bottomOffset:45}"
height="100"
:data="list"
class="table"
@sort-change="handleSortByColumn"
>
<el-table-column
type="index"
width="50"
/>
<el-table-column
label="国际化类型"
prop="InternationalizationType"
width="120"
show-overflow-tooltip
sortable="custom"
>
<el-table v-loading="loading" v-adaptive="{ bottomOffset: 45 }" height="100" :data="list" class="table"
@sort-change="handleSortByColumn" @selection-change="handleSelectionChange"><el-table-column type="selection"
width="50" />
<el-table-column type="index" width="50" />
<el-table-column :label="$t('system:l18n:search:InternationalizationType')" prop="InternationalizationType"
width="120" show-overflow-tooltip sortable="custom">
<template slot-scope="scope">
<el-tag v-if="scope.row.InternationalizationType === 0" type="primary">
{{ $fd('InternationalizationType', scope.row.InternationalizationType) }}
{{
$fd(
'InternationalizationType',
scope.row.InternationalizationType
)
}}
</el-tag>
<el-tag v-else-if="scope.row.InternationalizationType === 1" type="warning">
{{ $fd('InternationalizationType', scope.row.InternationalizationType) }}
{{
$fd(
'InternationalizationType',
scope.row.InternationalizationType
)
}}
</el-tag>
<el-tag v-else>
{{ $fd('InternationalizationType', scope.row.InternationalizationType) }}
{{
$fd(
'InternationalizationType',
scope.row.InternationalizationType
)
}}
</el-tag>
</template>
</el-table-column>
<el-table-column
label="功能模块/服务名"
prop="Description"
min-width="100"
show-overflow-tooltip
sortable="custom"
/>
<el-table-column
label="标识"
prop="Code"
min-width="150"
show-overflow-tooltip
sortable="custom"
/>
<el-table-column
label="中文值"
prop="ValueCN"
min-width="150"
show-overflow-tooltip
sortable="custom"
/>
<el-table-column
label="英文值"
prop="Value"
min-width="150"
show-overflow-tooltip
sortable="custom"
/>
<el-table-column
label="状态"
prop="State"
width="100"
show-overflow-tooltip
sortable="custom"
>
<el-table-column :label="$t('system:l18n:search:Module')" prop="Module" min-width="140" show-overflow-tooltip
sortable="custom" />
<el-table-column :label="$t('system:l18n:search:Code')" prop="Code" min-width="150" show-overflow-tooltip
sortable="custom" />
<el-table-column :label="$t('system:l18n:search:ValueCN')" prop="ValueCN" min-width="150" show-overflow-tooltip
sortable="custom" />
<el-table-column :label="$t('system:l18n:search:Value')" prop="Value" min-width="150" show-overflow-tooltip
sortable="custom" />
<el-table-column :label="$t('system:l18n:search:State')" prop="State" width="100" show-overflow-tooltip
sortable="custom">
<template slot-scope="scope">
<el-tag v-if="scope.row.State === 0" type="danger">
{{ $fd('InternationalizationKeyState', scope.row.State) }}
@ -164,61 +126,43 @@
</el-tag>
</template>
</el-table-column>
<el-table-column
label="更新时间"
prop="UpdateTime"
width="150"
show-overflow-tooltip
sortable="custom"
/>
<el-table-column
label="操作"
fixed="right"
prop=""
min-width="120"
show-overflow-tooltip
>
<el-table-column :label="$t('system:l18n:search:Description')" prop="Description" min-width="110"
show-overflow-tooltip sortable="custom" />
<el-table-column :label="$t('system:l18n:search:PublishVersion')" prop="Version" min-width="100"
show-overflow-tooltip sortable="custom" />
<el-table-column :label="$t('system:l18n:form:uploadTime')" prop="UpdateTime" width="150" show-overflow-tooltip
sortable="custom" />
<el-table-column :label="$t('system:l18n:form:createTime')" prop="CreateTime" width="150" show-overflow-tooltip
sortable="custom" />
<el-table-column :label="$t('common:action:action')" fixed="right" prop="" min-width="120"
show-overflow-tooltip>
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit-outline"
@click="handleEdit(scope.row)"
>
编辑
<el-button type="text" @click="handleEdit(scope.row)">
{{ $t('common:button:edit') }}
</el-button>
<el-button
:disabled="scope.row.State === 1"
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
>
删除
<el-button :disabled="scope.row.State === 1" type="text" @click="handleDelete(scope.row)">
{{ $t('common:button:delete') }}
</el-button>
</template>
</el-table-column>
</el-table>
<div class="pagination" style="text-align: right;margin-top:5px;">
<pagination
:total="total"
:page.sync="searchData.PageIndex"
:limit.sync="searchData.PageSize"
@pagination="getList"
/>
<div class="pagination" style="text-align: right; margin-top: 5px">
<pagination :total="total" :page.sync="searchData.PageIndex" :limit.sync="searchData.PageSize"
@pagination="getList" />
</div>
<i18n-form
ref="i18nForm"
@getList="getList"
/>
<i18n-form ref="i18nForm" @getList="getList" @batch="batch" />
<BatchAddForm ref="batcnAddForm" @getList="getList" />
</div>
</div>
</template>
<script>
import { getInternationalizationList, deleteInternationalization } from '@/api/admin'
import {
getInternationalizationList,
deleteInternationalization,
getPublishVersionSelect,
batchUpdateInternationalInfo,
} from '@/api/admin'
import { GetInternationalizationList_Export } from '@/api/export'
import Pagination from '@/components/Pagination'
import I18nForm from './components/I18nForm.vue'
import BatchAddForm from './components/BatchAddForm.vue'
@ -230,10 +174,16 @@ const searchDataDefault = () => {
ValueCN: null,
InternationalizationType: null,
State: null,
Module: null,
PublishLogId: null,
Asc: true,
SortField: '',
PageIndex: 1,
PageSize: 20
PageSize: 20,
BeginCreateTime: null,
EndCreatTime: null,
BeginUpdateTime: null,
EndUpdateTime: null,
}
}
export default {
@ -245,60 +195,136 @@ export default {
searchData: searchDataDefault(),
list: [],
total: 0,
loading: false
loading: false,
PublishVersionList: [],
selectTableList: [],
datetimerange_createTime: [],
datetimerange_updateTime: [],
}
},
mounted() {
this.getList()
this.getPublishVersionSelect()
this.$EventBus.$on('il8nUpdate', (data) => {
this.getList()
})
},
methods: {
//
async getPublishVersionSelect() {
try {
let res = await getPublishVersionSelect()
if (res.IsSuccess) {
this.PublishVersionList = res.Result
}
} catch (err) {
console.log(err)
}
},
getList() {
this.loading = true
getInternationalizationList(this.searchData).then((res) => {
this.loading = false
this.list = res.Result.CurrentPageData
this.total = res.Result.TotalCount
}).catch(() => {
this.loading = false
getInternationalizationList(this.searchData)
.then((res) => {
this.loading = false
this.list = res.Result.CurrentPageData
this.total = res.Result.TotalCount
})
.catch(() => {
this.loading = false
})
},
//
handleBatchUpdate() {
this.$nextTick(() => {
this.$refs['i18nForm'].openDialog(
this.$t('system:l18n:button:batchUpdate'),
{},
this.PublishVersionList,
'batch'
)
})
},
//
handleBatchUpdateToChange() {
this.$openI18n(this.selectTableList)
},
async batch(row) {
let { PublishLogId, State } = row
let data = {
PublishLogId,
State,
IdList: this.selectTableList.map((item) => item.Id),
}
try {
let res = await batchUpdateInternationalInfo(data)
if (res.IsSuccess) {
this.$message.success(this.$t('common:message:updatedSuccessfully'))
this.getList()
this.$nextTick(() => {
this.$refs['i18nForm'].handleCancle()
})
}
} catch (err) {
console.log(err)
}
},
handleAdd() {
this.$nextTick(() => {
this.$refs['i18nForm'].openDialog('新增', {})
this.$refs['i18nForm'].openDialog(
this.$t("system:l18n:button:add"),
{},
this.PublishVersionList,
'add'
)
})
},
handleBatchAdd() {
this.$nextTick(() => {
this.$refs['batcnAddForm'].openDialog('批量新增', {})
this.$refs['batcnAddForm'].openDialog(
this.$t("system:l18n:button:batchAdd"),
{},
this.PublishVersionList
)
})
},
handleEdit(row) {
this.$nextTick(() => {
this.$refs['i18nForm'].openDialog('编辑', row)
this.$refs['i18nForm'].openDialog(
this.$t("system:l18n:button:edit"),
row,
this.PublishVersionList,
'update'
)
})
},
//
handleReset() {
this.searchData = searchDataDefault()
this.datetimerange_createTime = []
this.datetimerange_updateTime = []
this.getList()
},
//
handleDelete(row) {
this.$confirm('是否确认删除?', {
this.$confirm(this.$t("system:l18n:confirm:delete"), {
type: 'warning',
distinguishCancelAndClose: true
distinguishCancelAndClose: true,
}).then(() => {
this.loading = true
deleteInternationalization(row.Id)
.then((res) => {
this.loading = false
if (res.IsSuccess) {
this.getList()
this.$message.success(
this.$t('common:message:deletedSuccessfully')
)
}
})
.catch(() => {
this.loading = false
})
})
.then(() => {
this.loading = true
deleteInternationalization(row.Id)
.then(res => {
this.loading = false
if (res.IsSuccess) {
this.getList()
this.$message.success(this.$t('common:message:deletedSuccessfully'))
}
}).catch(() => { this.loading = false })
})
},
//
handleSortByColumn(column) {
@ -310,35 +336,67 @@ export default {
this.searchData.SortField = column.prop
this.searchData.PageIndex = 1
this.getList()
}
}
},
//
handleSelectionChange(val) {
this.selectTableList = val
},
handleDatetimeChange(val, key) {
if (val) {
if (key === 'createTime') {
this.searchData.BeginCreateTime = val[0]
this.searchData.EndCreatTime = val[1]
}
if (key === 'updateTime') {
this.searchData.BeginUpdateTime = val[0]
this.searchData.EndUpdateTime = val[1]
}
} else {
if (key === 'createTime') {
this.searchData.BeginCreateTime = ''
this.searchData.EndCreatTime = ''
}
if (key === 'updateTime') {
this.searchData.BeginUpdateTime = ''
this.searchData.EndUpdateTime = ''
}
}
},
exportTable() {
return GetInternationalizationList_Export(this.searchData)
},
},
}
</script>
<style lang="scss">
.log {
height: 100%;
box-sizing: border-box;
.log {
height: 100%;
box-sizing: border-box;
display: flex;
padding: 10px;
border-radius: 5px;
.left {
display: flex;
padding: 10px;
border-radius: 5px;
.left {
flex-direction: column;
width: 0;
flex-grow: 4;
// border-right: 1px solid #ccc;
.filter-container {
display: flex;
flex-direction: column;
width: 0;
flex-grow: 4;
// border-right: 1px solid #ccc;
.filter-container {
display: flex;
align-items: center;
margin: 5px;
}
.data-table {
flex: 1;
padding: 5px 0px;
}
.pagination-container {
text-align: right;
}
align-items: center;
margin: 5px;
}
.data-table {
flex: 1;
padding: 5px 0px;
}
.pagination-container {
text-align: right;
}
}
}
</style>