From d63f15638be9054682a41da7ae9fef9366d842e9 Mon Sep 17 00:00:00 2001
From: liaozetao <1107136310@qq.com>
Date: Thu, 6 Jun 2024 11:28:35 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=A4=9A=E8=AF=AD=E8=A8=80?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/system/i18nMessage.js             |  17 +++
 src/views/system/I18nMessageAdminView.vue | 175 ++++++++++++++++++++++
 2 files changed, 192 insertions(+)
 create mode 100644 src/api/system/i18nMessage.js
 create mode 100644 src/views/system/I18nMessageAdminView.vue

diff --git a/src/api/system/i18nMessage.js b/src/api/system/i18nMessage.js
new file mode 100644
index 0000000..c49ca46
--- /dev/null
+++ b/src/api/system/i18nMessage.js
@@ -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
+    });
+}
diff --git a/src/views/system/I18nMessageAdminView.vue b/src/views/system/I18nMessageAdminView.vue
new file mode 100644
index 0000000..908cab0
--- /dev/null
+++ b/src/views/system/I18nMessageAdminView.vue
@@ -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>
\ No newline at end of file