From b564059d15b9befae27cd17ab549b43e26d97dcf Mon Sep 17 00:00:00 2001
From: liaozetao <1107136310@qq.com>
Date: Mon, 18 Dec 2023 15:12:33 +0800
Subject: [PATCH] =?UTF-8?q?=E6=90=9C=E7=B4=A2=E5=BD=92=E5=9B=A0=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/batch/FlowDataBatchSearchView.vue | 548 ++++++++++++++++++++
 src/views/system/SysconfAdminView.vue       | 152 ++++--
 2 files changed, 645 insertions(+), 55 deletions(-)
 create mode 100644 src/views/batch/FlowDataBatchSearchView.vue

diff --git a/src/views/batch/FlowDataBatchSearchView.vue b/src/views/batch/FlowDataBatchSearchView.vue
new file mode 100644
index 0000000..a0c26e6
--- /dev/null
+++ b/src/views/batch/FlowDataBatchSearchView.vue
@@ -0,0 +1,548 @@
+<template>
+    <section class="content">
+        <div class="box box-primary">
+            <div class="box-body">
+                <!-- Content Header (Page header) -->
+                <section class="content-header">
+                    <div id="itemTitle"></div>
+                </section>
+                <!-- .content -->
+                <section>
+                    <div id="table"></div>
+                    <div id="toolbar">
+                        <div class="col-sm-12">
+                            <label for="erBanNoStr" class="col-sm-3 control-label">归因房间号:</label>
+                            <div class="col-sm-3">
+                                <input type="text" class="form-control" name="erBanNoStr" id="erBanNoStr">
+                            </div>
+                            <label for="batchId" class="col-sm-3 control-label">场次名称:</label>
+                            <div class="col-sm-3">
+                                <select name="batchId" id="batchId" data-btn-class="btn-warning" class="form-control">
+                                    <option value="0" selected="selected">全部</option>
+                                </select>
+                            </div>
+                        </div>
+                        <div class="col-sm-12">
+                            <button id="btnAdd" class="btn btn-default">
+                                <i class="glyphicon glyphicon-plus-sign"></i>新建
+                            </button>
+                            <button id="btnSearch" class="btn btn-default">
+                                <i class="glyphicon glyphicon-search"></i>查询
+                            </button>
+                        </div>
+                    </div>
+                </section>
+            </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" style="width: 190%; left: 50%; transform: translateX(-50%);">
+                <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">
+                        <input type="hidden" name="id" id="id" />
+                        <div class="form-group">
+                            <label for="name" class="col-sm-3 control-label">场次名称：</label>
+                            <div class="col-sm-9">
+                                <input type="text" class="form-control" id="name">
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label for="amount" class="col-sm-3 control-label">预算：</label>
+                            <div class="col-sm-9">
+                                <input type="text" class="form-control" id="amount">
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label for="searchKey" class="col-sm-3 control-label">归因房间号：</label>
+                            <div class="col-sm-9">
+                                <input type="text" class="form-control" id="searchKey">
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label for="startTime" class="col-sm-3 control-label">开始时间：</label>
+                            <div class="col-sm-9">
+                                <input type="text" class="form-control" id="startTime">
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label for="endTime" class="col-sm-3 control-label">结束时间：</label>
+                            <div class="col-sm-9">
+                                <input type="text" class="form-control" id="endTime">
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label for="person" class="col-sm-3 control-label">负责人：</label>
+                            <div class="col-sm-9">
+                                <input type="text" class="form-control" id="person">
+                            </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>
+
+    <div class="modal fade" id="growModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content" style="width: 190%; left: 50%; transform: translateX(-50%);">
+                <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="growModalLabel"></h4>
+                    <span id="batchInfo"></span>
+                </div>
+                <div class="modal-body">
+                    <form class="form-horizontal" id="searchForm" action="/admin/flowDataBatchSearch/growExport"
+                        method="get" target="_blank">
+                        <input type="hidden" id="growBatchId" name="batchId" />
+                        <div id="growTable"></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="btnExport">导出</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="modal fade" id="tipModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h4 class="modal-title">提示信息</h4>
+                </div>
+                <div class="modal-body" id="tipMsg"></div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import TableHelper from '@/utils/bootstrap-table-helper';
+import { getDate } from '@/utils/date';
+
+export default {
+    name: "FlowDataBatchSearchView",
+    setup() {
+        return {};
+    },
+    created() {
+        this.$nextTick(function () {
+            this.initData();
+        });
+    },
+    methods: {
+        initData() {
+            $(function () {
+                getBatch();
+                var picker1 = $("#startTime").datetimepicker({
+                    format: 'yyyy-mm-dd hh:ii:00',
+                    autoclose: true,
+                });
+
+                var picker2 = $("#endTime").datetimepicker({
+                    format: 'yyyy-mm-dd hh:ii:00',
+                    autoclose: true
+                });
+
+                picker1.on('changeDate', function () {
+                    var date = $('#startTime').datetimepicker('getDate');
+                    picker2.datetimepicker('setStartDate', date);
+                });
+
+                picker2.on('changeDate', function () {
+                    var date = $('#endTime').datetimepicker('getDate');
+                    picker1.datetimepicker('setEndDate', date);
+                });
+                $('#table').bootstrapTable('destroy');
+                $('#table').bootstrapTable({
+                    columns: [
+                        { field: 'id', title: '场次ID', align: 'center', width: '5%' },
+                        { field: 'person', title: '负责人', align: 'center', width: '5%' },
+                        { field: 'amount', title: '预算USD', align: 'center', width: '5%' },
+                        { field: 'name', title: '场次名称', align: 'center', width: '5%' },
+                        {
+                            field: 'createTime',
+                            title: '活动时间',
+                            align: 'center',
+                            width: '5%',
+                            formatter: function (val, row, index) {
+                                var value = '';
+                                if (row.startTime) {
+                                    value += row.startTime + '<br/>';
+                                }
+                                value += '-<br/>';
+                                if (row.endTime) {
+                                    value += row.endTime;
+                                }
+                                return value;
+                            }
+                        },
+                        { field: 'searchKey', title: '归因房间号', align: 'center', width: '5%' },
+                        { field: 'roomName', title: '归因房间名称', align: 'center', width: '5%' },
+                        { field: 'timeUv', title: '期间新增UV', align: 'center', width: '5%' },
+                        { field: 'costAmount', title: '新增成本', align: 'center', width: '5%' },
+                        { field: 'ascribeTimeUv', title: '归因新增UV', align: 'center', width: '5%' },
+                        { field: 'inRoomUv', title: '归因后进入归因房间UV', align: 'center', width: '5%' },
+                        { field: 'ascribeCostAmount', title: '归因新增成本', align: 'center', width: '5%' },
+                        { field: 'chatNum', title: '活动内私聊用户数', align: 'center', width: '5%' },
+                        { field: 'chatCostAmount', title: '私聊用户成本', align: 'center', width: '5%' },
+                        {
+                            field: 'handle',
+                            title: '操作',
+                            align: 'center',
+                            width: '5%',
+                            valign: 'middle',
+                            formatter: function (val, row, index) {
+                                var value = '';
+                                value += '<button class="btn btn-sm btn-default opt-grow" data-index="' + index + '">查看付费成长</button>' + '<button class="btn btn-sm btn-default opt-export" data-index="' + index + '">导出用户明细</button><br/>';
+                                value += '<button class="btn btn-sm btn-default opt-edit" data-index="' + index + '">编辑</button>' + '<button class="btn btn-sm btn-default opt-del" data-index="' + index + '">删除</button>';
+                                return value;
+                            }
+                        }
+                    ],
+                    cache: false,
+                    striped: true,
+                    showRefresh: false,
+                    pageSize: 10,
+                    pagination: true,
+                    pageList: [10, 20, 50, 100],
+                    search: false,
+                    sidePagination: "server", //表示服务端请求
+                    //设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder
+                    //设置为limit可以获取limit, offset, search, sort, order
+                    queryParamsType: "undefined",
+                    queryParams: function queryParams(params) {   //设置查询参数
+                        var param = {
+                            page: params.pageNumber,
+                            pageSize: params.pageSize,
+                            searchKey: $('#erBanNoStr').val(),
+                            batchId: $('#batchId').val()
+                        };
+                        return param;
+                    },
+                    toolbar: '#toolbar',
+                    url: '/admin/flowDataBatchSearch/page',
+                    onLoadSuccess: function () {  //加载成功时执行
+                        console.log("load success");
+                    },
+                    onLoadError: function () {  //加载失败时执行
+                        console.log("load fail");
+                    }
+                });
+
+                // 查询刷新
+                $('#btnSearch').on('click', function () {
+                    TableHelper.doRefresh('#table');
+                });
+
+                //编辑
+                $('#table').on('click', '.opt-edit', function () {
+                    const currentData = $('#table').bootstrapTable('getData')[$(this).data('index')];
+                    var id = currentData.id;
+                    var name = currentData.name;
+                    var amount = currentData.amount;
+                    var searchKey = currentData.searchKey;
+                    var startTime = currentData.startTime;
+                    var endTime = currentData.endTime;
+                    var person = currentData.person;
+                    $('#id').val(id);
+                    $('#name').val(name);
+                    $('#amount').val(amount);
+                    $('#searchKey').val(searchKey);
+                    $('#startTime').val(startTime);
+                    $('#endTime').val(endTime);
+                    $('#person').val(person);
+                    $("#editModal").modal('show');
+                });
+
+                //导出用户明细
+                $('#table').on('click', '.opt-export', function () {
+                    const currentData = $('#table').bootstrapTable('getData')[$(this).data('index')];
+                    const id = currentData.id;
+                    window.location.href = '/admin/flowDataBatchSearch/detailExport?batchId=' + id;
+                });
+
+                //导出付费成长
+                $("#btnExport").on('click', function () {
+                    $("#searchForm").submit();
+                    $("#growModal").modal('hide');
+                });
+
+                //查看付费成长
+                $('#table').on('click', '.opt-grow', function () {
+                    const currentData = $('#table').bootstrapTable('getData')[$(this).data('index')];
+                    const id = currentData.id;
+                    const name = currentData.name;
+                    const startTime = currentData.startTime;
+                    const endTime = currentData.endTime;
+                    const roomName = currentData.roomName;
+                    $('#growBatchId').val(id);
+                    $('#growModalLabel').html('【' + name + '】的付费成长数据');
+                    $('#batchInfo').html('场次名称：' + name + '&nbsp;房间：' + roomName + '&nbsp;时间：' + startTime + '-' + endTime);
+                    $('#growTable').bootstrapTable('destroy');
+                    $('#growTable').bootstrapTable({
+                        columns: [
+                            { field: 'countItem', title: '统计项', align: 'center', width: '5%' },
+                            {
+                                field: 'currCondition',
+                                title: '当日情况',
+                                align: 'center',
+                                width: '5%',
+                                formatter: function (val, row, index) {
+                                    var value = '';
+                                    if (row.isPercentage) {
+                                        value = (val * 100).toFixed(2) + '%';
+                                    } else {
+                                        value = val.toFixed(2);
+                                    }
+                                    return value;
+                                }
+                            },
+                            {
+                                field: 'nextCondition',
+                                title: '次日情况',
+                                align: 'center',
+                                width: '5%',
+                                formatter: function (val, row, index) {
+                                    var value = '';
+                                    if (row.isPercentage) {
+                                        value = (val * 100).toFixed(2) + '%';
+                                    } else {
+                                        value = val.toFixed(2);
+                                    }
+                                    return value;
+                                }
+                            },
+                            {
+                                field: 'threeCondition',
+                                title: '3日情况',
+                                align: 'center',
+                                width: '5%',
+                                formatter: function (val, row, index) {
+                                    var value = '';
+                                    if (row.isPercentage) {
+                                        value = (val * 100).toFixed(2) + '%';
+                                    } else {
+                                        value = val.toFixed(2);
+                                    }
+                                    return value;
+                                }
+                            },
+                            {
+                                field: 'sevenCondition',
+                                title: '7日情况',
+                                align: 'center',
+                                width: '5%',
+                                formatter: function (val, row, index) {
+                                    var value = '';
+                                    if (row.isPercentage) {
+                                        value = (val * 100).toFixed(2) + '%';
+                                    } else {
+                                        value = val.toFixed(2);
+                                    }
+                                    return value;
+                                }
+                            },
+                            {
+                                field: 'fifteenCondition',
+                                title: '15日情况',
+                                align: 'center',
+                                width: '5%',
+                                formatter: function (val, row, index) {
+                                    var value = '';
+                                    if (row.isPercentage) {
+                                        value = (val * 100).toFixed(2) + '%';
+                                    } else {
+                                        value = val.toFixed(2);
+                                    }
+                                    return value;
+                                }
+                            },
+                            {
+                                field: 'thirtyCondition',
+                                title: '30日情况',
+                                align: 'center',
+                                width: '5%',
+                                formatter: function (val, row, index) {
+                                    var value = '';
+                                    if (row.isPercentage) {
+                                        value = (val * 100).toFixed(2) + '%';
+                                    } else {
+                                        value = val.toFixed(2);
+                                    }
+                                    return value;
+                                }
+                            },
+                            {
+                                field: 'totalCondition',
+                                title: '累计到目前',
+                                align: 'center',
+                                width: '5%',
+                                formatter: function (val, row, index) {
+                                    var value = '';
+                                    if (row.isPercentage) {
+                                        value = (val * 100).toFixed(2) + '%';
+                                    } else {
+                                        value = val.toFixed(2);
+                                    }
+                                    return value;
+                                }
+                            },
+                        ],
+                        cache: false,
+                        striped: true,
+                        showRefresh: false,
+                        pageSize: 50,
+                        pagination: true,
+                        pageList: [20, 50, 100],
+                        search: false,
+                        sidePagination: "server", //表示服务端请求
+                        //设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder
+                        //设置为limit可以获取limit, offset, search, sort, order
+                        queryParamsType: "undefined",
+                        queryParams: function queryParams(params) {   //设置查询参数
+                            var param = {
+                                batchId: id,
+                            };
+                            return param;
+                        },
+                        url: '/admin/flowDataBatchSearch/growList',
+                        onLoadSuccess: function () {  //加载成功时执行
+                            console.log("load success");
+                        },
+                        onLoadError: function () {  //加载失败时执行
+                            console.log("load fail");
+                        }
+                    });
+                    $("#growModal").modal('show');
+                });
+
+                $("#save").click(function () {
+                    const msg = '确定要保存吗？';
+                    if (confirm(msg)) {
+                        let id = $('#id').val();
+                        let startTime = $('#startTime').val();
+                        let endTime = $('#endTime').val(); 
+                        if (getDate(endTime).getMonth() != getDate(startTime).getMonth()) {
+                            $("#tipMsg").text("归因场次不允许跨月.");
+                            $("#tipModal").modal('show'); 
+                            return;
+                        }
+                        if ((getDate(endTime).getTime() - getDate(startTime).getTime()) > (36 * 60 * 60 * 1000)) {
+                            $("#tipMsg").text("时间间隔不能超过36h.");
+                            $("#tipModal").modal('show');
+                            return;
+                        }
+                        const data = {
+                            name: $('#name').val(),
+                            amount: $('#amount').val(),
+                            searchKey: $('#searchKey').val(),
+                            startTime: startTime,
+                            endTime: endTime,
+                            person: $('#person').val(),
+                        }
+                        if (id) {
+                            data.id = id;
+                        }
+                        $.ajax({
+                            type: "post",
+                            url: "/admin/flowDataBatchSearch/save",
+                            data: data,
+                            dataType: "json",
+                            success: function (json) {
+                                if (json.success == 'true' || json.code == 200) {
+                                    $("#tipMsg").text("保存成功");
+                                    $("#tipModal").modal('show');
+                                    TableHelper.doRefresh("#table");
+                                    $("#editModal").modal('hide');
+                                } else {
+                                    $("#tipMsg").text("保存失败." + json.message);
+                                    $("#tipModal").modal('show');
+                                    $("#editModal").modal('hide');
+                                }
+                            }
+                        });
+                    }
+                });
+
+                //删除
+                $('#table').on('click', '.opt-del', function () {
+                    const currentData = $('#table').bootstrapTable('getData')[$(this).data('index')];
+                    var id = currentData.id;
+                    const msg = '确定要删除吗？';
+                    if (confirm(msg)) {
+                        $.ajax({
+                            type: "get",
+                            url: "/admin/flowDataBatchSearch/del?batchId=" + id,
+                            dataType: "json",
+                            success: function (json) {
+                                if (json.success == 'true' || json.code == 200) {
+                                    $("#tipMsg").text("删除成功");
+                                    $("#tipModal").modal('show');
+                                    TableHelper.doRefresh("#table");
+                                    $("#editModal").modal('hide');
+                                } else {
+                                    $("#tipMsg").text("删除失败." + json.message);
+                                    $("#tipModal").modal('show');
+                                    $("#editModal").modal('hide');
+                                }
+                            }
+                        });
+                    }
+                });
+
+                //新增
+                $('#btnAdd').on('click', function () {
+                    $("#id").val('');
+                    $("#name").val('');
+                    $("#amount").val('');
+                    $("#searchKey").val('');
+                    $("#startTime").val('');
+                    $("#endTime").val('');
+                    $("#person").val('');
+                    $("#editModal").modal('show');
+                });
+
+                function getBatch() {
+                    $.ajax({
+                        type: "get",
+                        url: "/admin/flowDataBatchSearch/list",
+                        dataType: "json",
+                        async: false,
+                        success: function (json) {
+                            if (json.success == 'true' || json.code == 200) {
+                                var array = json.data;
+                                var $select = $('#batchId');
+                                for (let i = 0; i < array.length; i++) {
+                                    var $option = $('<option value="' + array[i].id + '" />');
+                                    $option.html(array[i].name);
+                                    $select.append($option);
+                                }
+                            }
+                        }
+                    });
+                }
+
+            });
+        }
+    },
+
+};
+</script>
+
+<style scoped></style>
\ No newline at end of file
diff --git a/src/views/system/SysconfAdminView.vue b/src/views/system/SysconfAdminView.vue
index 15ed020..2f38ee8 100644
--- a/src/views/system/SysconfAdminView.vue
+++ b/src/views/system/SysconfAdminView.vue
@@ -17,9 +17,6 @@
                         <button id="sysConf-multiDel" class="btn btn-default">
                             <i class="glyphicon glyphicon-wrench"></i>批量删除
                         </button>
-                        <!--<button id="sysConf-load" class="btn btn-default">-->
-                        <!--<i class="glyphicon glyphicon-wrench"></i>加载-->
-                        <!--</button>-->
                     </div>
                 </section><!-- .content -->
             </div>
@@ -88,30 +85,72 @@
         </div>
     </div>
 </template>
+
 <script>
 import TableHelper from '@/utils/bootstrap-table-helper';
+import { getSysConfList } from '@/api/system/sysconf';
+
 export default {
     name: "SysconfAdminView",
-    setup() { },
+    setup() {
+        function showText(obj) {
+            let text = unescape($(obj).prop('title'));
+            $("#tipMsg").text(text);
+            $("#tipModal").modal('show');
+        }
+        window.showText = showText;
+        return {
+            showText
+        };
+    },
     created() {
         this.$nextTick(function () {
             this.initData();
+            this.getSysConf();
         });
     },
     methods: {
+        getSysConf() {
+            getSysConfList().then(res => {
+                $('#table').bootstrapTable('load', res.rows);
+            });
+        },
         initData() {
             $(function () {
                 $('#table').bootstrapTable('destroy');
-                // 清空分页组件的容器
-                $('.fixed-table-pagination').empty();
                 $('#table').bootstrapTable({
                     columns: [
-                        { field: 'tmp', title: 'ID', align: 'center', checkbox: true },
-                        { field: 'configId', title: 'id', align: 'center', width: '20%' },
-                        { field: 'configName', title: '名称', align: 'center', width: '25%' },
-                        { field: 'configValue', title: '值', align: 'center', width: '20%' },
+                        {field: 'tmp', title: 'ID', align: 'center', width: '5%', checkbox: true},
+                        { 
+                            field: 'configId', 
+                            title: 'id', 
+                            align: 'center',
+                            width: '5%',
+                        },
+                        { 
+                            field: 'configName', 
+                            title: '名称', 
+                            align: 'center',
+                            width: '5%',
+                            formatter: function (val, row, index) {
+                                return '<div style="text-align: center; width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" title="' + escape(val) + '" onclick="showText(this);">' + val + '</div>';
+                            }
+                        },
+                        { 
+                            field: 'configValue', 
+                            title: '值', 
+                            align: 'center', 
+                            width: '5%',
+                            formatter: function (val, row, index) {
+                                return '<div style="text-align: center; width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" title="' + escape(val) + '" onclick="showText(this);">' + val + '</div>';
+                            }
+                        },
                         {
-                            field: 'configStatus', title: '状态', align: 'center', width: '5%', formatter: function (val, row, index) {
+                            field: 'configStatus', 
+                            title: '状态', 
+                            align: 'center', 
+                            width: '5%',
+                            formatter: function (val, row, index) {
                                 if (val == 1) {
                                     return '有效';
                                 }
@@ -120,9 +159,21 @@ export default {
                                 }
                             }
                         },
-                        { field: 'nameSpace', title: '命名空间', align: 'center', width: '5%' },
+                        { 
+                            field: 'nameSpace', 
+                            title: '命名空间', 
+                            align: 'center', 
+                            width: '5%',
+                            formatter: function (val, row, index) {
+                                return '<div style="text-align: center; width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" title="' + escape(val) + '" onclick="showText(this);">' + val + '</div>';
+                            }
+                        },
                         {
-                            field: 'configId', title: '操作', align: 'center', width: '25%', formatter: function (val, row, index) {
+                            field: 'configId', 
+                            title: '操作', 
+                            align: 'center', 
+                            width: '5%',
+                            formatter: function (val, row, index) {
                                 return '<button class="btn btn-sm btn-success opt-edit" data-id=' + val + '>' +
                                     '<i class="glyphicon glyphicon-edit"></i>编辑</button>' +
                                     '&nbsp;&nbsp;<button class="btn btn-sm btn-danger opt-remove" data-id=' + val +
@@ -133,31 +184,15 @@ export default {
                     cache: false,
                     striped: true,
                     showRefresh: true,
-                    pagination: false,
-                    search: false,
-                    sidePagination: "server", //表示服务端请求
-                    //设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder
-                    //设置为limit可以获取limit, offset, search, sort, order
-                    queryParamsType: "undefined",
-                    queryParams: function queryParams(params) {   //设置查询参数
-                        var param = {
-                            pageNumber: params.pageNumber,
-                            pageSize: params.pageSize,
-                            searchText: params.searchText
-                        };
-                        return param;
-                    },
-                    toolbar: '#toolbar',
-                    url: '/admin/sysConf/getList.action',
-                    onLoadSuccess: function () {  //加载成功时执行
-                        console.log("load success");
-                        $("#table").addClass("table_line");
-                        $("td,th").addClass("td_center");
-                    },
-                    onLoadError: function () {  //加载失败时执行
-                        console.log("load fail");
-                    }
+                    pageNumber: 1,
+                    pageSize: 10,
+                    pagination: true,
+                    pageList: [10, 25, 50, 100],
+                    search: true,
+                    sidePagination: "client",
+                    toolbar: '#toolbar'
                 });
+
                 $("#table").on("click", '.opt-remove', function () {
                     var id = $(this).attr("data-id");
                     if (id == 'undefined') {
@@ -176,6 +211,9 @@ export default {
                                 if (json.success == 'true') {
                                     $("#tipMsg").text("删除成功");
                                     $("#tipModal").modal('show');
+                                    getSysConfList().then(res => {
+                                        $('#table').bootstrapTable('load', res.rows);
+                                    });
                                     TableHelper.doRefresh("#table");
                                 } else {
                                     $("#tipMsg").text("删除失败");
@@ -185,6 +223,7 @@ export default {
                         });
                     }
                 });
+
                 $("#sysConf-add").click(function () {
                     // 打开编辑弹窗
                     $("#sysConfModal").modal('show');
@@ -192,6 +231,7 @@ export default {
                     $("#configId").val('');
                     $("#configId").attr('readonly', false);
                 });
+
                 $("#sysConf-multiDel").click(function () {
                     var rows = $("#table").bootstrapTable("getSelections");
                     if (rows.length == 0) {
@@ -215,6 +255,9 @@ export default {
                                 if (json.success == 'true') {
                                     $("#tipMsg").text("删除成功");
                                     $("#tipModal").modal('show');
+                                    getSysConfList().then(res => {
+                                        $('#table').bootstrapTable('load', res.rows);
+                                    });
                                     TableHelper.doRefresh("#table");
                                 } else {
                                     $("#tipMsg").text("删除失败");
@@ -224,9 +267,11 @@ export default {
                         });
                     }
                 });
+
                 $("#cancel").click(function () {
                     TableHelper.unCheckAll("#table");
                 });
+
                 $("#table").on("click", '.opt-edit', function () {
                     $("#configId").attr('readonly', true);
                     var id = $(this).attr("data-id");
@@ -252,6 +297,7 @@ export default {
                         }
                     });
                 });
+
                 $("#save").click(function () {
                     if ($("#sysConfForm").validationEngine('validate')) {
                         $.ajax({
@@ -264,6 +310,9 @@ export default {
                                     $("#sysConfModal").modal('hide');
                                     $("#tipMsg").text("保存成功");
                                     $("#tipModal").modal('show');
+                                    getSysConfList().then(res => {
+                                        $('#table').bootstrapTable('load', res.rows);
+                                    });
                                     TableHelper.doRefresh("#table");
                                 } else {
                                     $("#tipMsg").text("保存失败");
@@ -274,25 +323,10 @@ export default {
                     }
                 });
             });
-            // $("#sysConf-load").click(function(){
-            //     $.ajax({
-            //         type: 'post',
-            //         url: "/admin/sysConf/loadList.action",
-            //         dataType: "json",
-            //         success: function (json) {
-            //             if(json.success == 'true')
-            //             {
-            //                 $("#tipMsg").text("删除成功");
-            //                 $("#tipModal").modal('show');
-            //                 TableHelper.doRefresh("#table");
-            //             } else {
-            //                 $("#tipMsg").text("删除失败");
-            //                 $("#tipModal").modal('show');
-            //             }
-            //         }
-            //     });
-            // });
         }
+    },
+    unmounted() {
+        $('#table').bootstrapTable('destroy');
     }
 };
 </script>
@@ -302,6 +336,14 @@ export default {
     word-break: break-all;
 }
 
+.td_center {
+    vertical-align: middle !important;
+}
+
+.table_line {
+    word-break: break-all;
+}
+
 .td_center {
     vertical-align: middle !important;
 }