【Translation】优化多语言管理

src/main/webapp/assets/modular/system/i18n/translation.js

@@ -1,144 +1,179 @@
-layui.use(['table', 'admin', 'HttpRequest', 'func'], function () {
+layui.use(['layer', 'form', 'table', 'util', 'admin', 'func', 'HttpRequest'], function () {
-    var $ = layui.$;
+    var $ = layui.jquery;
+    var layer = layui.layer;
+    var form = layui.form;
     var table = layui.table;
-    var HttpRequest = layui.HttpRequest;
     var admin = layui.admin;
+    var HttpRequest = layui.HttpRequest;
     var func = layui.func;
+    var dictTypeObj;  // 左表选中数据
 
-    /**
-     * 多语言表管理
-     */
     var Translation = {
         tableId: "translationTable"
     };
 
-    /**
+    var Dict = {
-     * 初始化表格的列
+        tableId: "dictTable"
-     */
-    Translation.initColumn = function () {
-        return [[
-            {type: 'checkbox'},
-            {field: 'tranId', hide: true, title: '主键id'},
-            {field: 'tranCode', sort: true, title: '编码'},
-            {field: 'tranName', sort: true, title: '名称'},
-            {
-                field: 'language', sort: true, title: '语种', templet: function (d) {
-                    if (d.language === 1) {
-                        return "中文";
-                    } else if (d.language === 2) {
-                        return "英文";
-                    }
-                }
-            },
-            {field: 'tranValue', sort: true, title: '翻译的值'},
-            {field: 'createTime', sort: true, title: '创建时间'},
-            {field: 'updateTime', sort: true, title: '更新时间'},
-            {align: 'center', toolbar: '#tableBar', title: '操作'}
-        ]];
     };
 
-    /**
+
-     * 点击查询按钮
+    /* 字典类型-渲染表格 */
-     */
+    var dictTable = table.render({
-    Translation.search = function () {
+        elem: '#' + Dict.tableId,
-        var queryData = {};
+        url: Feng.ctxPath + '/dict/getLanguagesPage',
-        queryData['tranName'] = $("#tranName").val();
+        height: 'full-100',
-        table.reload(Translation.tableId, {
+        toolbar: '#dictHtbBar',
-            where: queryData, page: {curr: 1}
+        defaultToolbar: [], //默认表格头部右侧工具栏
+        cols: [[
+            {type: 'numbers'},
+            {field: 'dictName', title: '类型'},
+            {field: 'dictCode', title: '编码'}
+        ]],
+        done: function (res, curr, count) {
+            //加载后自动选中第一行并出发click事件
+            $('#dictTable+.layui-table-view .layui-table-body tbody>tr:first').trigger('click');
+        },
+        parseData: Feng.parseData //解析成 table 组件所规定的数据格式
+    });
+
+    /* 字典-点击搜索 */
+    form.on('submit(dictSearchBtn)', function (data) {
+        dictTable.reload({where: data.field});
+        return false;
+    });
+
+    /* 字典-监听行单击事件 */
+    table.on('row(' + Dict.tableId + ')', function (obj) {
+        dictTypeObj = obj;
+        obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
+        translationTable.reload({
+            where: {tranLanguageCode: obj.data.dictCode},
+            page: {curr: 1},
+            url: Feng.ctxPath + '/i18n/page'
+        });
+    });
+
+    /* 字典-监听点击操作工具栏 */
+    table.on('toolbar(' + Dict.tableId + ')', function (obj) {
+        var data = dictTypeObj.data;
+        if (obj.event === 'add') { // 添加
+            Dict.openAddDlg();
+        } else if (obj.event === 'edit') { // 修改
+            Dict.openEditDlg(data);
+        } else if (obj.event === 'del') { // 删除
+            Dict.onDeleteItem(data);
+        }
+    });
+
+    /* 字典-点击新增对话框 */
+    Dict.openAddDlg = function (data) {
+        func.open({
+            title: '添加字典',
+            content: Feng.ctxPath + '/view/dict/addTranslationView',
+            tableId: Dict.tableId
         });
     };
 
-    /**
+    /* 字典-点击编辑对话框 */
-     * 弹出添加对话框
+    Dict.openEditDlg = function (data) {
-     */
+        func.open({
-    Translation.openAddDlg = function () {
+            title: '修改字典',
+            content: Feng.ctxPath + '/view/dict/editView?dictId=' + data.dictId,
+            tableId: Dict.tableId
+        });
+    };
+
+    /* 字典-点击删除 */
+    Dict.onDeleteItem = function (data) {
+        var operation = function () {
+            var httpRequest = new HttpRequest(Feng.ctxPath + "/dict/deleteDict", 'post', function (data) {
+                Feng.success("删除成功!");
+                table.reload(Dict.tableId);
+            }, function (data) {
+                Feng.error("删除失败!" + data.message + "!");
+            });
+            httpRequest.set(data);
+            httpRequest.start(true);
+        };
+        Feng.confirm("是否删除?", operation);
+    };
+
+
+    /* 翻译-渲染表格 */
+    var translationTable = table.render({
+        elem: '#' + Translation.tableId,
+        data: [],
+        height: 'full-100',
+        page: true,
+        cellMinWidth: 100,
+        cols: [[
+            {type: 'checkbox'},
+            {field: 'tranId', hide: true, title: '主键id'},
+            {field: 'tranName', sort: true, title: '名称'},
+            {field: 'tranCode', sort: true, title: '编码'},
+            {field: 'tranValue', sort: true, title: '翻译的值'},
+            {align: 'center', toolbar: '#translationTbBar', title: '操作'}
+        ]],
+        parseData: Feng.parseData,
+        request: Feng.pageRequest
+    });
+
+
+    /* 翻译-点击搜索按钮 */
+    form.on('submit(translationSearchBtn)', function (data) {
+        // 赋值左表参数
+        data.field.tranLanguageCode = dictTypeObj.data.dictCode;
+        translationTable.reload({where: data.field});
+        return false;
+    });
+
+    /* 翻译-点击添加按钮 */
+    $('#translationBtnAdd').click(function () {
+        Translation.openAddDlg(dictTypeObj.data);
+        return false;
+    });
+
+    /* 翻译-监听点击操作工具栏 */
+    table.on('tool(' + Translation.tableId + ')', function (obj) {
+        var data = obj.data;
+        if (obj.event === 'edit') { // 修改
+            Translation.openEditDlg(data);
+        } else if (obj.event === 'del') { // 删除
+            Translation.onDeleteItem(data);
+        }
+    });
+
+    /* 字典类型-点击新增对话框 */
+    Translation.openAddDlg = function (data) {
         func.open({
             title: '添加多语言表',
-            content: Feng.ctxPath + '/view/i18n/add',
+            content: Feng.ctxPath + '/view/i18n/add?tranLanguageCode=' + data.dictCode,
             tableId: Translation.tableId
         });
     };
 
-    /**
+    /* 字典类型-点击编辑对话框 */
-     * 点击编辑
-     *
-     * @param data 点击按钮时候的行数据
-     */
     Translation.openEditDlg = function (data) {
         func.open({
-            title: '修改多语言表',
+            height: 680,
+            title: '修改系统配置',
             content: Feng.ctxPath + '/view/i18n/edit?tranId=' + data.tranId,
             tableId: Translation.tableId
         });
     };
 
-    /**
+    /* 字典类型-点击删除 */
-     * 导出excel按钮
-     */
-    Translation.exportExcel = function () {
-        var checkRows = table.checkStatus(Translation.tableId);
-        if (checkRows.data.length === 0) {
-            Feng.error("请选择要导出的数据");
-        } else {
-            table.exportFile(tableResult.config.id, checkRows.data, 'xls');
-        }
-    };
-
-    /**
-     * 点击删除
-     *
-     * @param data 点击按钮时候的行数据
-     */
     Translation.onDeleteItem = function (data) {
         var operation = function () {
-            var request = new HttpRequest(Feng.ctxPath + "/i18n/delete", 'post', function (data) {
+            new HttpRequest(Feng.ctxPath + "/i18n/delete", 'post', function (data) {
                 Feng.success("删除成功!");
-                table.reload(Translation.tableId);
+                table.reload(Dict.tableId);
             }, function (data) {
-                Feng.error("删除失败!" + data.message + "!");
+                Feng.error(data.message + "!");
-            });
+            }).set(data).start(true);
-            request.set("tranId", data.tranId);
-            request.start(true);
         };
         Feng.confirm("是否删除?", operation);
     };
 
-    // 渲染表格
-    var tableResult = table.render({
-        elem: '#' + Translation.tableId,
-        url: Feng.ctxPath + '/i18n/page',
-        page: true,
-        height: "full-158",
-        cellMinWidth: 100,
-        cols: Translation.initColumn(),
-        request: {pageName: 'pageNo', limitName: 'pageSize'},
-        parseData: Feng.parseData
-    });
 
-    // 搜索按钮点击事件
-    $('#btnSearch').click(function () {
-        Translation.search();
-    });
-
-    // 添加按钮点击事件
-    $('#btnAdd').click(function () {
-        Translation.openAddDlg();
-    });
-
-    // 导出excel
-    $('#btnExp').click(function () {
-        Translation.exportExcel();
-    });
-
-    // 工具条点击事件
-    table.on('tool(' + Translation.tableId + ')', function (obj) {
-        var data = obj.data;
-        var layEvent = obj.event;
-
-        if (layEvent === 'edit') {
-            Translation.openEditDlg(data);
-        } else if (layEvent === 'delete') {
-            Translation.onDeleteItem(data);
-        }
-    });
 });

src/main/webapp/assets/modular/system/i18n/translation_add.js

@@ -1,25 +1,10 @@
-/**
- * 添加或者修改页面
- */
-var TranslationInfoDlg = {
-    data: {
-        tranCode: "",
-        tranName: "",
-        language: "",
-        tranValue: "",
-        createTime: "",
-        createUser: "",
-        updateTime: "",
-        updateUser: ""
-    }
-};
-
 layui.use(['form', 'admin', 'HttpRequest'], function () {
     var $ = layui.jquery;
     var HttpRequest = layui.HttpRequest;
     var form = layui.form;
     var admin = layui.admin;
 
+    $("#tranLanguageCode").val(Feng.getUrlParam("tranLanguageCode"));
     //让当前iframe弹层高度适应
     admin.iframeAuto();
 
@@ -27,13 +12,10 @@ layui.use(['form', 'admin', 'HttpRequest'], function () {
     form.on('submit(btnSubmit)', function (data) {
         var request = new HttpRequest(Feng.ctxPath + "/i18n/add", 'post', function (data) {
             Feng.success("添加成功！");
-
             //传给上个页面，刷新table用
             admin.putTempData('formOk', true);
-
             //关掉对话框
             admin.closeThisDialog();
-
         }, function (data) {
             Feng.error("添加失败！" + data.message)
         });

src/main/webapp/assets/modular/system/i18n/translation_edit.js

@@ -1,28 +1,9 @@
-/**
- * 详情对话框
- */
-var TranslationInfoDlg = {
-    data: {
-        tranCode: "",
-        tranName: "",
-        language: "",
-        tranValue: "",
-        createTime: "",
-        createUser: "",
-        updateTime: "",
-        updateUser: ""
-    }
-};
-
 layui.use(['form', 'admin', 'HttpRequest'], function () {
     var $ = layui.jquery;
     var HttpRequest = layui.HttpRequest;
     var form = layui.form;
     var admin = layui.admin;
 
-    //让当前iframe弹层高度适应
-    admin.iframeAuto();
-
     //获取详情信息，填充表单
     var request = new HttpRequest(Feng.ctxPath + "/i18n/detail?tranId=" + Feng.getUrlParam("tranId"), 'get');
     var result = request.start();
@@ -32,19 +13,15 @@ layui.use(['form', 'admin', 'HttpRequest'], function () {
     form.on('submit(btnSubmit)', function (data) {
         var editRequest = new HttpRequest(Feng.ctxPath + "/i18n/edit", 'post', function (data) {
             Feng.success("更新成功！");
-
             //传给上个页面，刷新table用
             admin.putTempData('formOk', true);
-
             //关掉对话框
             admin.closeThisDialog();
-
         }, function (data) {
             Feng.error("更新失败！" + data.message)
         });
         editRequest.set(data.field);
         editRequest.start(true);
-
         return false;
     });
 

src/main/webapp/pages/modular/system/i18n/translation.html

@@ -1,35 +1,99 @@
 @layout("/layout/_container.html",{js:["/assets/modular/system/i18n/translation.js"]}){
+<style>
+    #dictTable + .layui-table-view .layui-table-tool-temp {
+        padding-right: 0;
+    }
 
-<div class="layui-body-header">
+    #dictTable + .layui-table-view .layui-table-body tbody > tr td {
-    <span class="layui-body-header-title">多语言表管理</span>
+        cursor: pointer;
-</div>
+    }
 
-<div class="layui-fluid">
+    #dictTable + .layui-table-view .layui-table-body tbody > tr.layui-table-click {
+        background-color: #fff3e0;
+    }
+
+    #dictTable + .layui-table-view .layui-table-body tbody > tr.layui-table-click td:last-child > div:before {
+        position: absolute;
+        right: 6px;
+        content: "\e602";
+        font-size: 12px;
+        font-style: normal;
+        font-family: layui-icon !important;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+    }
+</style>
+<div class="layui-fluid" style="padding-bottom: 0;">
     <div class="layui-row layui-col-space15">
-        <div class="layui-col-sm12 layui-col-md12 layui-col-lg12">
+        <div class="layui-col-md3">
             <div class="layui-card">
-                <div class="layui-card-body">
+                <div class="layui-card-body" style="padding: 10px;">
-                    <div class="layui-form toolbar">
+                    <!-- 表格工具栏1 -->
+                    <form class="layui-form toolbar">
                         <div class="layui-form-item">
-                            <div class="layui-inline">
+                            <div class="layui-inline" style="max-width: 140px;">
-                                <input id="tranName" class="layui-input" type="text" placeholder="名称"/>
+                                <input name="dictName" class="layui-input" type="text" placeholder="类型" autocomplete="off"/>
                             </div>
+                            <!--
+                            <div class="layui-inline" style="max-width: 140px;">
+                                <input name="dictTypeCode" class="layui-input" type="text" placeholder="编码" autocomplete="off"/>
+                            </div>-->
                             <div class="layui-inline">
-                                <button id="btnSearch" class="layui-btn icon-btn"><i class="layui-icon">&#xe615;</i>搜索</button>
+                                <button class="layui-btn icon-btn" lay-filter="dictSearchBtn" lay-submit>
-                                <button id="btnAdd" class="layui-btn icon-btn"><i class="layui-icon">&#xe654;</i>添加</button>
+                                    <i class="layui-icon">&#xe615;</i>搜索
-                                <button id="btnExp" class="layui-btn icon-btn"><i class="layui-icon">&#xe67d;</i>导出</button>
+                                </button>
                             </div>
                         </div>
-                    </div>
+                    </form>
-                    <table class="layui-table" id="translationTable" lay-filter="translationTable"></table>
+                    <!-- 数据表格1 -->
+                    <table id="dictTable" lay-filter="dictTable"></table>
+                </div>
+            </div>
+        </div>
+        <div class="layui-col-md9">
+            <div class="layui-card">
+                <div class="layui-card-body" style="padding: 10px;">
+                    <!-- 表格工具栏2 -->
+                    <form class="layui-form toolbar">
+                        <div class="layui-form-item">
+                            <div class="layui-inline">
+                                <div class="layui-input-inline">
+                                    <input name="tranName" class="layui-input" placeholder="输入名称"/>
+                                </div>
+                            </div>
+                            <div class="layui-inline">
+                                <div class="layui-input-inline">
+                                    <input name="tranCode" class="layui-input" placeholder="输入编码"/>
+                                </div>
+                            </div>
+                            <div class="layui-inline">&emsp;
+                                <button class="layui-btn icon-btn" lay-filter="translationSearchBtn" lay-submit><i class="layui-icon">&#xe615;</i>搜索</button>
+                                <button id="translationBtnAdd" class="layui-btn icon-btn"><i class="layui-icon">&#xe654;</i>添加</button>
+                            </div>
+                        </div>
+                    </form>
+                    <!-- 数据表格2 -->
+                    <table id="translationTable" lay-filter="translationTable"></table>
                 </div>
             </div>
         </div>
     </div>
 </div>
 
-<script type="text/html" id="tableBar">
+<!-- 表格头部操作列 -->
-    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
+<script type="text/html" id="dictHtbBar">
-    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
+    <button lay-event="add" class="layui-btn layui-btn-sm icon-btn"><i class="layui-icon">&#xe654;</i>添加</button>
+    <!--<button lay-event="edit" class="layui-btn layui-btn-sm layui-btn-warm icon-btn"><i class="layui-icon">&#xe642;</i>修改</button>-->
+    <button lay-event="del" class="layui-btn layui-btn-sm layui-btn-danger icon-btn"><i class="layui-icon">&#xe640;</i>删除</button>
 </script>
+
+<!-- 表格操作列 -->
+<script type="text/html" id="translationTbBar">
+    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
+    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
+</script>
+<!-- 表格操作列结束 -->
+
+
+
 @}

src/main/webapp/pages/modular/system/i18n/translation_add.html

@@ -7,6 +7,8 @@
             <div class="layui-card-body">
                 <div class="layui-form-item layui-row">
                     <input name="tranId" type="hidden"/>
+                    <input name="tranLanguageCode" id="tranLanguageCode" type="hidden"/>
+
                     <div class="layui-inline layui-col-md12">
                         <label class="layui-form-label">名称<span style="color: red;">*</span></label>
                         <div class="layui-input-block">
@@ -19,15 +21,6 @@
                             <input id="tranCode" name="tranCode" placeholder="请输入编码" type="text" class="layui-input" lay-verify="required" required/>
                         </div>
                     </div>
-                    <div class="layui-inline layui-col-md12">
-                        <label class="layui-form-label">语种<span style="color: red;">*</span></label>
-                        <div class="layui-input-block">
-                            <select name="language" lay-search="">
-                                <option value="1">中文</option>
-                                <option value="2">英语</option>
-                            </select>
-                        </div>
-                    </div>
                     <div class="layui-inline layui-col-md12">
                         <label class="layui-form-label">翻译的值<span style="color: red;">*</span></label>
                         <div class="layui-input-block">

src/main/webapp/pages/modular/system/i18n/translation_edit.html

@@ -7,6 +7,8 @@
             <div class="layui-card-body">
                 <div class="layui-form-item layui-row">
                     <input name="tranId" type="hidden"/>
+                    <input name="tranLanguageCode" id="tranLanguageCode" type="hidden"/>
+
                     <div class="layui-inline layui-col-md12">
                         <label class="layui-form-label">名称<span style="color: red;">*</span></label>
                         <div class="layui-input-block">
@@ -19,15 +21,6 @@
                             <input id="tranCode" name="tranCode" placeholder="请输入编码" type="text" class="layui-input" lay-verify="required" required/>
                         </div>
                     </div>
-                    <div class="layui-inline layui-col-md12">
-                        <label class="layui-form-label">语种<span style="color: red;">*</span></label>
-                        <div class="layui-input-block">
-                            <select name="language" lay-search="">
-                                <option value="1">中文</option>
-                                <option value="2">英语</option>
-                            </select>
-                        </div>
-                    </div>
                     <div class="layui-inline layui-col-md12">
                         <label class="layui-form-label">翻译的值<span style="color: red;">*</span></label>
                         <div class="layui-input-block">