peko-admin-web/src/views/activity/PageActivityView.vue

<template>
    <section class="content">
        <div class="box box-primary">
            <section class="content-header">
                <h1 id="itemTitle"></h1>
            </section>
            <section class="content">
                <div id="table"></div>
                <div id="toolbar">
                    <button id="addBtn" class="btn btn-default">
                        <i class="glyphicon glyphicon-plus"></i>增加
                    </button>
                </div>
            </section>
        </div>
    </section>
    <div class="modal fade" id="actModal" 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">x</span></button>
                    <h4 class="modal-title" id="addModalLabel">页面静态活动配置</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" id="actForm">
                        <input type="hidden" name="id" id="actId" value="0">
                        <input type="hidden" name="status" id="actStatus">
                        <div class="form-group">
                            <label for="actTitle" class="col-sm-3 control-label">活动代码:</label>
                            <div class="col-sm-8">
                                <input type="text" id="actCode" name="code"
                                    class="form-control validate[required]">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="actTitle" class="col-sm-3 control-label">活动标题:</label>
                            <div class="col-sm-8">
                                <input type="text" id="actTitle" name="title"
                                    class="form-control validate[required]">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="actDesc" class="col-sm-3 control-label">活动叙述:</label>
                            <div class="col-sm-8 control-label">
                                <input type="text" id="actDesc" name="secondTitle"
                                    class="form-control validate[required]">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">活动图:</label>
                            <div class="col-sm-8">
                                <img src="" id="imgUrl" style="width:200px;height:500px;" alt="">
                                <input type="file" id="uploadFile" name="uploadFile"
                                    accept="image/gif,image/jpeg,image/jpg,image/png,image/svg">
                                <button class="btn btn-success" type="button" id="uploadBtn">上传</button>
                                <span class="attention">注意:选择图片后请点击上传按钮</span>
                                <input type="hidden" id="actImage" name="imgUrl" class="form-control validate[required]" />
                            </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 id="imgMask"><img src="" alt=""></div>
</template>

<script>
import TableHelper from '@/utils/bootstrap-table-helper';

export default {
    name: "PageActivityView",
    setup() {
        return {};
    },
    created() {
        this.$nextTick(function () {
            this.initData();
        });
    },
    methods: {
        initData() {
            $(function () {
                $('#table').bootstrapTable('destroy');
                $('#table').bootstrapTable({
                    columns: [
                        { field: 'id', title: 'id', align: 'center', valign: 'middle', width: '10%' },
                        { field: 'code', title: 'code', align: 'center', valign: 'middle', width: '10%' },
                        { field: 'title', title: '活动名称', align: 'center', valign: 'middle', width: '20%' },
                        { field: 'secondTitle', title: '活动详情', align: 'center', valign: 'middle', width: '30%' },
                        {
                            field: 'imgUrl',
                            title: '活动图',
                            align: 'center',
                            width: '50%',
                            formatter: function (val, row, index) {
                                return "<img src='" + val + "' width='40' height='80'>";
                            }
                        },
                        {
                            field: 'tmp',
                            title: '操作',
                            align: 'center',
                            width: '10%',
                            valign: 'middle',
                            formatter: function (val, row, index) {
                                const key = row.id;
                                return "<button class='btn btn-sm btn-danger opt-del' data-id=" + key + ">删除</button>";

                            }
                        }
                    ],
                    cache: false,
                    striped: true,
                    showRefresh: false,
                    pageSize: 10,
                    pagination: true,
                    pageList: [10, 20, 30, 50],
                    sidePagination: "server", //表示服务端请求
                    //设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder
                    //设置为limit可以获取limit, offset, search, sort, order
                    queryParamsType: "undefined",
                    queryParams: function queryParams(params) {   //设置查询参数
                        var param = {
                            pageSize: params.pageSize,
                            pageNumber: params.pageNumber,
                        };
                        //                console.log(param);
                        return param;
                    },
                    uniqueId: 'id',
                    toolbar: '#toolbar',
                    url: '/admin/act/static/list',
                    onLoadSuccess: function () {  //加载成功时执行
                        console.log("load success");
                    },
                    onLoadError: function () {  //加载失败时执行
                        console.log("load fail");
                    }
                })

                $('#addBtn').on('click', function () {
                    cleanModal();
                    $('#actModal').modal('show');
                });
                $('#table').on('click', '.opt-edit', function () {
                    var id = parseInt($(this).data('id'));
                    cleanModal();
                    var data = $('#table').bootstrapTable('getRowByUniqueId', id);

                    $('#actId').val(data.id);
                    $('#actTitle').val(data.actTitle);
                    $('#actDesc').val(data.actDesc);
                    $('#imgUrl').attr('src', data.actImage);
                    $('#actImage').val(data.actImage);
                    $('#actStatus').val(data.status);
                    $('#actModal').modal('show');
                });
                $('#save').on('click', function () {
                    if ($('#actForm').validationEngine('validate')) {
                        $.ajax({
                            type: "post",
                            url: "/admin/act/static/save",
                            data: $('#actForm').serialize(),
                            dataType: 'json',
                            success: function (json) {
                                if (json.code == 200) {
                                    $("#actModal").modal('hide');
                                    $("#tipMsg").text("保存成功");
                                    $("#tipModal").modal('show');
                                    TableHelper.doRefresh("#table");
                                } else {
                                    $("#tipMsg").text("保存失败，错误码：" + json.message);
                                    $("#tipModal").modal('show');
                                }
                            }
                        })
                    }
                });
                $('#table').on('click', '.opt-del', function () {
                    if (confirm("确定删除吗?") === false) {
                        return;
                    }

                    var key = parseInt($(this).attr('data-id'));
                    $.ajax({
                        type: 'post',
                        url: '/admin/act/static/delete',
                        data: { 'id': key },
                        dataType: 'json',
                        success: function (res) {
                            if (res.code == 200) {
                                $("#tipMsg").text("删除成功");
                                $("#tipModal").modal('show');
                                TableHelper.doRefresh("#table");
                            } else {
                                $("#tipMsg").text("删除失败，错误码：" + res.message);
                                $("#tipModal").modal('show');
                            }
                        }
                    })
                });
                $('#uploadBtn').on('click', function () {
                    var options = {
                        type: 'post',
                        url: '/admin/upload/img',
                        dataType: 'json',
                        success: function (json) {
                            if (json.path) {
                                $('#actImage').val(json.path);
                                $('#imgUrl').attr("src", json.path);
                                console.log(json.path);
                            } else {
                                $("#tipMsg").text(json.msg);
                                $("#tipModal").modal('show');
                            }
                        }
                    }
                    $("#actForm").ajaxSubmit(options);
                })

                $('#table').on('mouseenter', 'img', function (e) {
                    console.log($(this), e.clientX);
                    var src = $(this).attr('src');
                    $('#imgMask img').attr('src', src);
                    $('#imgMask').show();
                    $('#imgMask').css({
                        top: e.clientY + 20,
                        left: e.clientX + 20
                    })
                })
                $('#table').on('mouseleave', 'img', function (e) {
                    console.log('移出');
                    $('#imgMask').hide();
                })

                function cleanModal() {
                    $('#actForm').find('input[type=text],input[type=hidden],input[type=file]').each(function () {
                        $(this).val('');
                    })
                    $('#actForm').find('img').attr('src', '');
                }

            })
        }
    },

};
</script>

<style scoped>
#imgMask {
    position: absolute;
    top: 0;
    left: 0;
    width: 250px;
    height: 600px;
    padding: 4px;
    background: #fff;
    z-index: 999;
    display: none;
}

#imgMask img {
    width: 100%;
    height: 100%;
    vertical-align: top;
}
</style>