moliparty/peko-admin-web
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新增多语言管理

Browse Source
This commit is contained in:
liaozetao
2024-06-06 11:28:35 +08:00
parent 7b13dadd12
commit d63f15638b
2 changed files with 192 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/api/system/i18nMessage.js Normal file
View File

@@ -0,0 +1,17 @@
import request from "@/utils/request";
export function getI18nMessageList() {
return request({
url: '/admin/i18nMessage/list',
method: 'get'
});
}
export function saveI18nMessage(data) {
return request({
url: '/admin/i18nMessage/save',
headers:{"Content-Type": 'application/x-www-form-urlencoded'},
method: 'post',
data: data
});
}

175
src/views/system/I18nMessageAdminView.vue Normal file
View File

@@ -0,0 +1,175 @@
<template>
<section class="content">
<div class="box box-danger">
<div class="box-body">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1 id="itemTitle"></h1>
</section>
<!-- .content -->
<section class="content">
<div id="table"></div>
<div id="toolbar">
<div class="col-sm-12">
<button id="btnAdd" class="btn btn-default">
<i class="glyphicon glyphicon-plus"></i>增加
</button>
</div>
</div>
</section><!-- .content -->
</div>
</div>
</section>
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title" id="modalLabel">多语言信息</h4>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group">
<label for="key" class="col-sm-3 control-label">KEY:</label>
<div class="col-sm-8">
<input type="text" class="form-control validate[required]" name="key" id="key"
v-model="i18nMessage.key" />
</div>
</div>
<div class="form-group">
<label for="zh" class="col-sm-3 control-label">华语:</label>
<div class="col-sm-8">
<input type="text" class="form-control validate[required]" name="zh" id="zh"
v-model="i18nMessage.zh" />
</div>
</div>
<div class="form-group">
<label for="en" class="col-sm-3 control-label">英语:</label>
<div class="col-sm-8">
<input type="text" class="form-control validate[required]" name="en" id="en"
v-model="i18nMessage.en" />
</div>
</div>
<div class="form-group">
<label for="ar" class="col-sm-3 control-label">阿语:</label>
<div class="col-sm-8">
<input type="text" class="form-control validate[required]" name="ar" id="ar"
v-model="i18nMessage.ar" />
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" id="save">保存</button>
</div>
</div>
</div>
</div>
</template>
<script>
import TableHelper from '@/utils/bootstrap-table-helper';
import { getI18nMessageList, saveI18nMessage } from '@/api/system/i18nMessage';
export default {
name: 'I18nMessageAdminView',
data() {
return {
columns: [
{ field: 'key', title: 'KEY', align: 'center', width: '15%' },
{ field: 'zh', title: '华语', align: 'center', width: '15%' },
{ field: 'en', title: '英语', align: 'center', width: '15%' },
{ field: 'ar', title: '阿语', align: 'center', width: '15%' },
{
field: 'key',
title: '操作',
align: 'center',
width: '20%',
formatter: function (val, row, index) {
return '<button class="btn btn-sm btn-success opt-edit" data-id="' + val + '" data-index="' + index + '">编辑</button>';
}
}
],
i18nMessages: [],
i18nMessage: {
key: '',
zh: '',
en: '',
ar: '',
},
};
},
created() {
this.init();
},
methods: {
init() {
this.$nextTick(function () {
let $this = this;
$this.initTable();
$('#btnAdd').click(function () {
$this.add();
});
$('#save').click(function () {
$this.save();
});
$('#table').on('click', '.opt-edit', function () {
$this.edit(this);
});
});
},
initTable() {
let $this = this;
TableHelper.destroy('#table');
$('#table').bootstrapTable({
columns: $this.columns,
cache: false,
striped: true,
showRefresh: true,
search: true,
pageSize: 10,
pagination: true,
pageList: [1, 10, 20, 30, 50],
sidePagination: "client",
queryParamsType: "undefined",
toolbar: '#toolbar',
});
},
list() {
getI18nMessageList().then(res => {
this.i18nMessages = res.data;
TableHelper.load('#table', this.i18nMessages);
});
},
add() {
this.i18nMessage.key = '';
this.i18nMessage.zh = '';
this.i18nMessage.en = '';
this.i18nMessage.ar = '';
$('#editModal').modal('show');
},
edit(obj) {
const index = $(obj).data('index');
const record = TableHelper.getData('#table')[index];
this.i18nMessage.key = record.key;
this.i18nMessage.zh = record.zh;
this.i18nMessage.en = record.en;
this.i18nMessage.ar = record.ar;
$('#editModal').modal('show');
},
save() {
let $this = this;
saveI18nMessage($this.i18nMessage).then(res => {
$('#editModal').modal('hide');
$this.list();
});
},
},
}
</script>
<style scoped></style>