307 lines
9.7 KiB
Vue
307 lines
9.7 KiB
Vue
<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">×</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-2 control-label">KEY</label>
|
|
<div class="col-sm-9">
|
|
<input type="text"
|
|
class="form-control validate[required]"
|
|
name="key"
|
|
id="key"
|
|
v-model="i18nMessage.key" />
|
|
</div>
|
|
</div>
|
|
|
|
<hr />
|
|
|
|
<div class="form-group">
|
|
<label for="zh"
|
|
class="col-sm-2 control-label">华语</label>
|
|
<div class="col-sm-9">
|
|
<textarea class="form-control validate[required]"
|
|
name="zh"
|
|
id="zh"
|
|
rows="3"
|
|
v-model="i18nMessage.zh" />
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="en"
|
|
class="col-sm-2 control-label">英语</label>
|
|
<div class="col-sm-9">
|
|
<textarea class="form-control validate[required]"
|
|
name="en"
|
|
id="en"
|
|
rows="3"
|
|
v-model="i18nMessage.en" />
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="ar"
|
|
class="col-sm-2 control-label">阿语</label>
|
|
<div class="col-sm-9">
|
|
<textarea class="form-control validate[required]"
|
|
name="ar"
|
|
id="ar"
|
|
rows="3"
|
|
v-model="i18nMessage.ar" />
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="tr"
|
|
class="col-sm-2 control-label">土耳其</label>
|
|
<div class="col-sm-9">
|
|
<textarea class="form-control validate[required]"
|
|
name="tr"
|
|
id="tr"
|
|
rows="3"
|
|
v-model="i18nMessage.tr" />
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="pt"
|
|
class="col-sm-2 control-label">葡萄牙语</label>
|
|
<div class="col-sm-9">
|
|
<textarea class="form-control validate[required]"
|
|
name="pt"
|
|
id="pt"
|
|
rows="3"
|
|
v-model="i18nMessage.pt" />
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="ru"
|
|
class="col-sm-2 control-label">俄语</label>
|
|
<div class="col-sm-9">
|
|
<textarea class="form-control validate[required]"
|
|
name="ru"
|
|
id="ru"
|
|
rows="3"
|
|
v-model="i18nMessage.ru" />
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="es"
|
|
class="col-sm-2 control-label">西班牙语</label>
|
|
<div class="col-sm-9">
|
|
<textarea class="form-control validate[required]"
|
|
name="es"
|
|
id="es"
|
|
rows="3"
|
|
v-model="i18nMessage.es" />
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="uz"
|
|
class="col-sm-2 control-label">乌兹别克语</label>
|
|
<div class="col-sm-9">
|
|
<textarea class="form-control validate[required]"
|
|
name="uz"
|
|
id="uz"
|
|
rows="3"
|
|
v-model="i18nMessage.uz" />
|
|
</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: '17%' },
|
|
{ field: 'zh', title: '华语', align: 'center', width: '17%' },
|
|
{ field: 'en', title: '英语', align: 'center', width: '17%' },
|
|
{ field: 'ar', title: '阿语', align: 'center', width: '17%' },
|
|
{ field: 'tr', title: '土耳其', align: 'center', width: '17%' },
|
|
{ field: 'pt', title: '葡萄牙语', align: 'center', width: '17%' },
|
|
{ field: 'ru', title: '俄语', align: 'center', width: '17%' },
|
|
{ field: 'es', title: '西班牙语', align: 'center', width: '17%' },
|
|
{ field: 'uz', title: '乌兹别克语', align: 'center', width: '17%' },
|
|
{
|
|
field: 'key',
|
|
title: '操作',
|
|
align: 'center',
|
|
width: '10%',
|
|
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: '',
|
|
pt: '',
|
|
ru: '',
|
|
es: '',
|
|
uz: '',
|
|
},
|
|
};
|
|
},
|
|
created () {
|
|
this.init();
|
|
this.list();
|
|
},
|
|
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: 20,
|
|
pagination: true,
|
|
pageList: [20, 50, 100],
|
|
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 = '';
|
|
this.i18nMessage.tr = '';
|
|
this.i18nMessage.pt = '';
|
|
this.i18nMessage.ru = '';
|
|
this.i18nMessage.es = '';
|
|
this.i18nMessage.uz = '';
|
|
$('#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;
|
|
this.i18nMessage.tr = record.tr;
|
|
this.i18nMessage.pt = record.pt;
|
|
this.i18nMessage.ru = record.ru;
|
|
this.i18nMessage.es = record.es;
|
|
this.i18nMessage.uz = record.uz;
|
|
$('#editModal').modal('show');
|
|
},
|
|
save () {
|
|
let $this = this;
|
|
const form = $this.i18nMessage;
|
|
const params = {
|
|
key: $this.trimText(form.key),
|
|
zh: $this.trimTextArea(form.zh),
|
|
en: $this.trimTextArea(form.en),
|
|
ar: $this.trimTextArea(form.ar),
|
|
tr: $this.trimTextArea(form.tr),
|
|
pt: $this.trimTextArea(form.pt),
|
|
ru: $this.trimTextArea(form.ru),
|
|
es: $this.trimTextArea(form.es),
|
|
uz: $this.trimTextArea(form.uz),
|
|
};
|
|
|
|
saveI18nMessage(params).then(res => {
|
|
$('#editModal').modal('hide');
|
|
$this.list();
|
|
});
|
|
},
|
|
trimText (str) {
|
|
return str.trim();
|
|
},
|
|
trimTextArea (str) {
|
|
// 确保 str 是字符串类型，避免 split 报错
|
|
if (!str || typeof str !== 'string') {
|
|
return '';
|
|
}
|
|
return str.split('\n').map((line) => line.trim())
|
|
.filter(str => str && '' != str).join('\n');
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped></style> |