peko-admin-web/src/views/system/I18nMessageAdminView.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">&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>
                        <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="tr" id="tr"
                                    v-model="i18nMessage.tr" />
                            </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: 'tr', 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();
        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: 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 = '';
            this.i18nMessage.tr = '';
            $('#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;
            $('#editModal').modal('show');
        },
        save() {
            let $this = this;
            saveI18nMessage($this.i18nMessage).then(res => {
                $('#editModal').modal('hide');
                $this.list();
            });
        },
    },
}
</script>
  
<style scoped></style>