Vue中自定义下拉搜索的实现

最新推荐文章于 2024-04-25 18:10:41 发布

Anhk丶

最新推荐文章于 2024-04-25 18:10:41 发布

阅读量737

点赞数 2

文章标签： vue.js html

本文链接：https://blog.csdn.net/qq_45829350/article/details/109161159

版权

<!DOCTYPE html>
<html>
<head>
    <title>财务渠道维护-映射</title>
    <!--引入公共header-->
    <#include "/header.html">
<!--    <link rel="stylesheet" type="text/css" href="${request.contextPath}/statics/css/bootstrap-select.min.css">-->
</head>
<style>
    .hintslist .hint {
        padding: 4px 2px;
    }

    .hintslist .hint:hover {
        /*background-color: #DDD8E5;*/
        background-color: #1E90FF;
        color: #FFF;
        cursor: pointer;
    }
</style>
<body>
<div id="rrapp" v-cloak>
    <!--列表DIV-->
    <div v-show="showList">
        <!-- 操作栏 -->
        <div class="grid-btn">
            <div class="form-group col-sm-2">
                <select class="selectpicker show-tick form-control" v-model="q.payType" data-live-search="true">
                    <option value="">收付方式</option>
                    <option v-for="payType in payTypes" :value="payType.code" >{{payType.name}}</option>
                </select>
            </div>
            <div class="form-group col-sm-2">
                <select class="selectpicker show-tick form-control" v-model="q.cardType" data-live-search="true">
                    <option value="">卡种</option>
                    <option v-for="cardType in cardTypes" :value="cardType.code" >{{cardType.name}}</option>
                </select>
            </div>
            <a class="btn btn-default" @click="query">查询</a>
            <!--freemarker标签，shiro权限校验-->
            <#if shiro.hasPermission("channel:emergPayChannel:save")>
                <a class="btn btn-primary" @click="save"><i class="fa fa-plus"></i>&nbsp;新增</a>
            </#if>
            <!--freemarker标签，shiro权限校验-->
            <#if shiro.hasPermission("channel:emergPayChannel:update")>
                <a class="btn btn-primary" @click="update"><i class="fa fa-pencil-square-o"></i>&nbsp;修改</a>
            </#if>
            <!--freemarker标签，shiro权限校验-->
            <#if shiro.hasPermission("channel:emergPayChannel:delete")>
                <a class="btn btn-primary" @click="del"><i class="fa fa-trash-o"></i>&nbsp;删除</a>
            </#if>
            <!--freemarker标签，shiro权限校验-->
            <#if shiro.hasPermission("channel:emergPayChannel:export")>
                <a class="btn btn-primary" style="float: right" @click="exportToExcel"><i class="glyphicon glyphicon-export"></i>&nbsp;导出</a>
            </#if>
        </div>
        <!--表格-->
        <table id="jqGrid"></table>
        <!--分页器-->
        <div id="jqGridPager"></div>
    </div>
<!--新增/修改DIV-->
<div v-show="!showList" class="panel panel-default">
    <div class="panel-heading">{{title}}</div>
    <form class="form-horizontal" style="width: 100%">
        <div class="form-group" style="width: 45%;display: inline-block;">
            <div class="col-sm-2 control-label">收付方式</div>
            <div class="col-sm-10">
                <select class="selectpicker show-tick form-control" style="width: 90%;display: inline" @change="getPayChannelInfos(emergPayChannel.payType)" v-model="emergPayChannel.payType" data-live-search="true">
                    <option v-for="payType in payTypes" :value="payType.code" >{{payType.name}}</option>
                </select>
                <!-- 必填红星 -->
                <label><span style="color: red; display: inline">*</span></label>
            </div>
        </div>
        <div class="form-group" style="width: 45%;display: inline-block;">
            <div class="col-sm-2 control-label">卡种</div>
            <div class="col-sm-10">
                <select class="selectpicker show-tick form-control" style="width: 90%;display: inline" v-model="emergPayChannel.cardType" data-live-search="true">
                    <option v-for="cardType in cardTypes" :value="cardType.code" >{{cardType.name}}</option>
                </select>
                <!-- 必填红星 -->
                <label><span style="color: red; display: inline">*</span></label>
            </div>
        </div>
        <div class="form-group">
            <table style="border-collapse: separate;border-spacing: 10px;text-align: right;">
                <tr v-for="(item, index) in emergPayChannels">
                    <td style="width: 5%">选择银行</td>
                    <td id="searchBank" style="width: 10%">
                        <!--<select class="selectpicker show-tick form-control" v-model="item.bankCode" data-live-search="true">
                            <option style="right: 50px" v-for="bankType in bankTypes" :value="bankType.type" >{{bankType.name}}</option>
                        </select>-->
                        <input type="text" v-model="item.bankName" readonly class="form-control" @click="getHintsList(index)"/>
                        <div style="position: absolute; margin-top: 5px;width: 28%" v-if="item.showHintsBox">
                            <input type="text" class="form-control" @click="getHintsList(index)" v-model="item.keyword" @blur="closeHintsBox(index)" @keyup="whenInput($event,index)" ref="keyword" placeholder="搜索" />
<!--                            <input type="text" class="form-control" v-model="item.keyword" @blur="closeHintsBox(index)" @keyup="whenInput($event)" ref="keyword" placeholder="搜索" />-->
                            <div style="background: white;border: 1px #808080 solid;-moz-box-shadow: 0 0 5px #606c84;-webkit-box-shadow: 0 0 5px #606c84;box-shadow: 0 0 5px #606c84">
                                <ul class="hintslist" style="list-style: none;max-height: 200px;overflow-y: auto">
                                    <li style="text-align: left" v-for="(bankType, i) in hints" ref="hint" class="hint" @mousedown="fillInput(index, i)" v-cloak>{{bankType.name}}</li>
                                </ul>
                            </div>
                        </div>
                    </td>
                    <td style="width: 5%">选择盘片</td>
                    <td style="width: 10%">
                        <select id="payChannelInfo" class="selectpicker show-tick form-control" v-model="item.paychannelId" data-live-search="true">
                            <option v-for="payChannelInfo in payChannelInfos" :value="payChannelInfo.paychannelId" >{{payChannelInfo.paychannelName}}</option>
                        </select>
                    </td>
                    <td style="width: 5%">单笔限额</td>
                    <td style="width: 10%">
                        <input class="form-control" type="text" v-model="item.singleLimit" placeholder="(元)"/>
                    </td>
                    <td id="trAdd" style="width: 2%"><a class="btn btn-primary" @click="trAdd()">&nbsp;新增</a></td>
                    <td id="trRemove" style="width: 2%"><a class="btn btn-danger" @click="trRemove(index)">&nbsp;删除</a></td>
                </tr>
            </table>
        </div>
        <div class="form-group">
            <div class="col-sm-2 control-label"></div>
            <input type="button" class="btn btn-primary" @click="saveOrUpdate" value="确定"/>
            &nbsp;&nbsp;<input type="button" class="btn btn-warning" @click="reload" value="返回"/>
        </div>
    </form>

    <!--<div class="hintsbox-mark">
        <input type="text" class="form-control" v-model="keyword" @keyup="whenInput($event)" ref="keyword" @blur="closeHintsBox()" />
        <div class="hintsbox" v-if="showHintsBox">
            <ul class="hintslist" style="list-style: none">
                <li v-for="(item,index) in hints" ref="hint" class="hint" @click="fillInput(index)" v-cloak>{{item}}</li>
            </ul>
        </div>
    </div>-->
</div>
</div>
<!--引入模块js-->
<script src="${request.contextPath}/statics/js/modules/channel/emergPayChannel.js?_${.now?long}"></script>
<!--<script src="${request.contextPath}/statics/libs/bootstrap-select.min.js?_${.now?long}"></script>-->
</body>
</html>

$(function () {
    //获取收付方式的信息
    vm.getPayTypes();
    //获取卡种的信息
    vm.getCardTypes();
    //获取银行信息
    vm.getBankTypes();
    //初始化数据表格
    $("#jqGrid").jqGrid({
        //获取数据的地址
        url: baseURL + 'channel/emergPayChannel/list',
        //从服务器端返回的数据类型，默认xml。可选类型：json等
        datatype: "json",
        colModel: [
            {label: 'ID', name: 'emergId', align: "center", sortable: false, hidden: true, width: 30, key: true},
            {label: '收付方式', name: 'payTypeName', sortable: false, align: "center", width: 25},
            {label: '卡种', name: 'cardTypeName', sortable: false, align: "center", width: 25},
            {label: '盘片名称', name: 'paychannelName', sortable: false, align: "center", width: 40},
            {label: '盘片编码', name: 'paychannelCode', sortable: false, align: "center", width: 25},
            {label: 'SubCode', name: 'subcode', sortable: false, align: "center", width: 25},
            {label: '银行名称', name: 'bankName', sortable: false, align: "center", width: 75},
            {label: '单笔限额（元）', name: 'singleLimit', sortable: false, align: "center", width: 25,
                formatter:'number',//声明类型
                formatoptions:{
                    thousandsSeparator:",",  //千分位分隔符
                    decimalPlaces: 3 //小数保留位数
                }
            }
        ],
        //是否要显示总记录数
        viewrecords: true,
        //表格高度，可以是数字，像素值或者百分比，默认150
        height: 385,
        //在grid上显示记录条数，这个参数会被传递到后台
        rowNum: 10,
        //一个数组用来调整表格显示的记录数，此参数值会替代rowNum参数值传给服务器端。
        rowList: [10, 30, 50],
        //显示行顺序号，从1开始递增，默认false
        rownumbers: true,
        //如果rownumbers为true，则可以设置column的宽度，默认25
        rownumWidth: 25,
        //如果为ture时，则当表格在首次被创建时会根据父元素比例重新调整表格宽度，默认值false
        autowidth: true,
        //定义是否可以多选，默认值false
        multiselect: true,
        multiboxonly: true,
        //定义翻页用的导航栏，必须是有效的html元素。
        pager: "#jqGridPager",
        //描述json 数据格式的数组
        jsonReader: {
            root: "page.list",
            page: "page.currPage",
            total: "page.totalPage",
            records: "page.totalCount"
        },
        //当参数为null时不会被发到服务器端
        prmNames: {
            page: "page",
            rows: "limit"
        },
        //向服务器端发起请求之前触发此事件
        //统一给表头加居中样式，jqGrid本身没有让表头居中的属性
        beforeRequest: function () {
            $("thead th").css("text-align", "center");//.css("font-weight", "bold");
        },
        //当表格所有数据都加载完成而且其他的处理也都完成时触发此事件，排序，翻页同样也会触发此事件
        gridComplete: function () {
            //隐藏grid底部滚动条
            $("#jqGrid").closest(".ui-jqgrid-bdiv").css({"overflow-x": "hidden"});
        }
    });
});

//定义vue实例
var vm = new Vue({
    //当前vue对象接管的区域
    el: '#rrapp',
    //属性
    data: {
        //列表查询属性(v-model:"q.xxxx")
        q: {
            payType: "",
            cardType: ""
        },
        //新增、修改窗口是否显示
        showList: true,
        //弹窗title
        title: null,
        //所有收付方式数据
        payTypes: [],
        cardTypes: [],
        bankTypes: [],
        payChannelInfos: [],
        //新增、修改渠道映射属性
        emergPayChannel: {},
        emergPayChannels: [{index: 0}],

        //keyword: "",
        timer: null,
        hints: [],
        // showHintsBox: false,
        activeNo: -1
    },
    //自定义方法
    methods: {
        //新增表格
        trAdd: function () {
            if (this.emergPayChannels[this.emergPayChannels.length - 1].bankCode == null || this.emergPayChannels[this.emergPayChannels.length - 1].paychannelId == null || this.emergPayChannels[this.emergPayChannels.length - 1].singleLimit == null) {
                alert("请逐行添加");
                return;
            }
            vm.emergPayChannels.push({
                index: this.emergPayChannels.length,
                keyword: "",
                showHintsBox: false
            });
        },
        //移除表格  参数为表格索引
        trRemove: function (index) {
            if (index === 0) {
                alert("第一行无法删除");
                return;
            }
            //从第 index 行删除，删除 1 行
            this.emergPayChannels.splice(index, 1);
            //删除之后，重组索引，不然会出错
            for (var i in this.emergPayChannels) {
                this.emergPayChannels[i].index = i;
            }
        },
        //查询
        query: function () {
            vm.reload();
        },
        //新增
        save: function () {
            $("#trAdd").removeClass("hide");
            $("#trRemove").removeClass("hide");
            vm.showList = false;
            vm.title = "新增";
            //设置新增盘片应急默认信息
            vm.emergPayChannel = {};
            vm.emergPayChannels = [{index: 0,keyword: "",showHintsBox: false}];
            vm.payChannelInfos = [];
        },
        //更新盘片应急信息
        update: function () {
            $("#trAdd").addClass("hide");
            $("#trRemove").addClass("hide");
            var emergId = getSelectedRow();
            if (emergId == null) {
                return;
            }
            vm.showList = false;
            vm.title = "修改";
            //获取盘片应急信息
            vm.getEmergPayChannel(emergId);
        },
        //保存或更新盘片应急信息
        saveOrUpdate: function () {
            //遍历
            for (var i = 0; i < vm.emergPayChannels.length; i++) {
                //判断单笔限额的类型
                if (!checkPositiveInteger(vm.emergPayChannels[i].singleLimit)) {
                    alert("单笔限额只能为正整数");
                    return false;
                }
                vm.emergPayChannels[i].cardType = vm.emergPayChannel.cardType;
                vm.emergPayChannels[i].payType = vm.emergPayChannel.payType;
            }
            //判断是新增还是更新
            var url = vm.emergPayChannel.emergId == null ? "channel/emergPayChannel/save" : "channel/emergPayChannel/update";
            var source = {};
            if (vm.emergPayChannel.emergId == null) {
                //新增
                source = JSON.stringify(vm.emergPayChannels);
            } else {
                //修改
                vm.emergPayChannel.paychannelId = vm.emergPayChannels[0].paychannelId;
                vm.emergPayChannel.bankCode = vm.emergPayChannels[0].bankCode;
                vm.emergPayChannel.singleLimit = vm.emergPayChannels[0].singleLimit;
                source = JSON.stringify(vm.emergPayChannel);
            }
            $.ajax({
                //规定请求的类型GET或POST
                type: "POST",
                //规定发送请求的 URL
                url: baseURL + url,
                //发送数据到服务器时所使用的内容类型，默认："application/x-www-form-urlencoded"。
                contentType: "application/json",
                //发送到服务器的数据
                data: source,
                //服务器返回的数据类型,如果不指定,jQuery 将自动根据HTTP包MIME信息来智能判断
                dataType: 'json',
                success: function (r) {
                    if (r.code === 200) {
                        alert('操作成功', function () {
                            vm.reload();
                        });
                    } else {
                        alert(r.msg);
                    }
                }
            });
        },
        //删除盘片应急信息
        del: function () {
            var emergIds = getSelectedRows();
            if (emergIds == null) {
                return;
            }
            confirm('确定要删除选中的记录？', function () {
                $.ajax({
                    type: "POST",
                    url: baseURL + "channel/emergPayChannel/delete",
                    contentType: "application/json",
                    data: JSON.stringify(emergIds),
                    success: function (r) {
                        if (r.code == 200) {
                            alert('操作成功', function () {
                                vm.reload();
                            });
                        } else {
                            alert(r.msg);
                        }
                    }
                });
            });
        },
        //根据ID获取盘片应急信息
        getEmergPayChannel: function (emergId) {
            $.ajax({
                //规定请求的类型GET或POST
                type: "POST",
                //规定发送请求的 URL
                url: baseURL + "channel/emergPayChannel/info/" + emergId,
                //发送数据到服务器时所使用的内容类型，默认："application/x-www-form-urlencoded"。
                contentType: "application/json",
                //设置同步
                async: false,
                //服务器返回的数据类型,如果不指定,jQuery 将自动根据HTTP包MIME信息来智能判断
                dataType: 'json',
                success: function (r) {
                    if (r.code == 200) {
                        //将查询到的通道信息赋值给vm.busiFinanceConfig
                        vm.emergPayChannels = [];
                        vm.emergPayChannels[0] = r.emergPayChannel;
                        vm.emergPayChannels[0].keyword = "";
                        vm.emergPayChannels[0].showHintsBox = false;
                        vm.emergPayChannel = r.emergPayChannel;
                        vm.getPayChannelInfos(r.emergPayChannel.payType);
                    } else {
                        alert(r.msg);
                    }
                },
                error: function () {
                    alert("请求出错");
                }
            });
        },
        //获取所有收付方式信息
        getPayTypes: function () {
            $.ajax({
                //规定请求的类型GET或POST
                type: "GET",
                //规定发送请求的 URL
                url: baseURL + "sys/dict/getTypes?type=PAY_TYPE",
                //发送数据到服务器时所使用的内容类型，默认："application/x-www-form-urlencoded"。
                contentType: "application/json",
                //设置同步
                async: false,
                //服务器返回的数据类型,如果不指定,jQuery 将自动根据HTTP包MIME信息来智能判断
                dataType: 'json',
                success: function (r) {
                    if (r.code == 200) {
                        vm.payTypes = r.types;
                    } else {
                        alert(r.msg);
                    }
                },
                error: function () {
                    alert("请求出错");
                }
            });
        },
        //获取所有卡种信息
        getCardTypes: function () {
            $.ajax({
                //规定请求的类型GET或POST
                type: "GET",
                //规定发送请求的 URL
                url: baseURL + "sys/dict/getTypes?type=CARD_TYPE",
                //发送数据到服务器时所使用的内容类型，默认："application/x-www-form-urlencoded"。
                contentType: "application/json",
                //设置同步
                async: false,
                //服务器返回的数据类型,如果不指定,jQuery 将自动根据HTTP包MIME信息来智能判断
                dataType: 'json',
                success: function (r) {
                    if (r.code == 200) {
                        vm.cardTypes = r.types;
                    } else {
                        alert(r.msg);
                    }
                },
                error: function () {
                    alert("请求出错");
                }
            });
        },
        //获取银行信息
        getBankTypes: function () {
            $.ajax({
                //规定请求的类型GET或POST
                type: "GET",
                //规定发送请求的 URL
                url: baseURL + "channel/product/getBankInfo",
                //发送数据到服务器时所使用的内容类型，默认："application/x-www-form-urlencoded"。
                contentType: "application/json",
                //设置同步
                async: false,
                //服务器返回的数据类型,如果不指定,jQuery 将自动根据HTTP包MIME信息来智能判断
                dataType: 'json',
                success: function (r) {
                    if (r.code == 200) {
                        vm.bankTypes = r.types;
                    } else {
                        alert(r.msg);
                    }
                },
                error: function () {
                    alert("请求出错");
                }
            });
        },
        //根据首付方式，获取盘片信息
        getPayChannelInfos: function (payType) {
            if (payType == "undefined" || payType == null) {
                return;
            }
            // this.activeType = payType;
            $.ajax({
                //规定请求的类型GET或POST
                type: "GET",
                //规定发送请求的 URL
                url: baseURL + "channel/paychannel/getByPayType?payType=" + payType,
                //发送数据到服务器时所使用的内容类型，默认："application/x-www-form-urlencoded"。
                contentType: "application/json",
                //设置同步
                async: false,
                //服务器返回的数据类型,如果不指定,jQuery 将自动根据HTTP包MIME信息来智能判断
                dataType: 'json',
                success: function (r) {
                    if (r.code == 200) {
                        vm.payChannelInfos = r.payChannelInfos;
                        /*$("#payChannelInfo").html(null);
                        $.each(r.payChannelInfos, function (index, item) {
                            var option = new Option(item.paychannelName, item.paychannelId);
                            $("#payChannelInfo").append(option);
                        });
                        $("#payChannelInfo").selectpicker('refresh');
                        $("#payChannelInfo").selectpicker('render');*/
                    } else {
                        alert(r.msg);
                    }
                },
                error: function () {
                    alert("请求出错");
                }
            });
        },
        //导出到Excel文件
        exportToExcel: function () {
            //获取表格的字段名和用户对象的属性名
            var colNames = $("#jqGrid").jqGrid('getGridParam', 'colNames');
            var colModel = $("#jqGrid").jqGrid('getGridParam', 'colModel');
            //表格头名称
            var headerName = "";
            //因为前面有个序号列和多选框列以及用户的id号，所以从第4列开始算
            for (var i = 3; i < colNames.length; i++) {
                headerName += colNames[i] + ",";
            }
            //用户属性名
            var headerFiled = "";
            for (var i = 3; i < colModel.length; i++) {
                headerFiled += colModel[i].name + ",";
            }
            var form = $("<form>");
            form.attr('style', 'display:none');
            form.attr('target', '');
            form.attr('method', 'post');
            form.attr('action', baseURL + "channel/emergPayChannel/exportToExcel");

            var input1 = $('<input>');
            input1.attr('type', 'hidden');
            input1.attr('name', 'payType');
            input1.attr('value', vm.q.payType);
            var input2 = $('<input>');
            input2.attr('type', 'hidden');
            input2.attr('name', 'cardType');
            input2.attr('value', vm.q.cardType);
            var input3 = $('<input>');
            input3.attr('type', 'hidden');
            input3.attr('name', 'headerName');
            input3.attr('value', headerName);
            var input4 = $('<input>');
            input4.attr('type', 'hidden');
            input4.attr('name', 'headerFiled');
            input4.attr('value', headerFiled);

            $('body').append(form);

            form.append(input1);
            form.append(input2);
            form.append(input3);
            form.append(input4);
            form.submit();
            form.remove();
        },
        //查询列表
        reload: function () {
            vm.showList = true;
            $("#jqGrid").jqGrid('setGridParam', {
                //array类型的查询参数，此数组内容直接赋值到url上
                postData: {
                    'payType': vm.q.payType,
                    'cardType': vm.q.cardType
                },
                //设置初始的页码
                page: 1
            }).trigger("reloadGrid");
        },


        //用户输入的时候
        whenInput: function ($event,index) {
            //console.log($event);
            var len = this.hints.length;
            //Down键事件
            if ($event.keyCode == 40) {
                //划到最后一项的时候
                if (this.activeNo >= len - 1) {
                    //console.log("到底了");
                    return;
                }

                this.activeNo++;
                return;
            }

            //Up键事件
            if ($event.keyCode == 38) {

                if (this.activeNo <= 0) {
                    //console.log("到顶了");
                    return;
                }

                this.activeNo--;
                return;
            }

            //按Enter键
            if ($event.keyCode == 13) {
                this.fillInput(index,this.activeNo);
            }

            /*if (!this.keyword) {
                this.closeHintsBox();
                return;
            }*/

            if ($event.keyCode !== 38 && $event.keyCode !== 40 && $event.keyCode !== 13) {
                this.getHintsList(index);
            }

            //当使用v-model绑定输入框的时候，不必要采用定时器的优化方法，因为只有当输入完成之后keyword才会有值
            //clearTimeout(this.timer);
            //
            //this.timer=setTimeout(function(){
            //
            //app.getHintsList();
            //
            //},250);
        },

        //获取候选列表
        getHintsList: function (index) {
            var arr = [];
            for (let i = 0; i < this.bankTypes.length; i++) {
                var item = this.bankTypes[i];
                //判断银行信息是否含有用户输入的银行名称
                if (item.name.indexOf(this.emergPayChannels[index].keyword) != -1) {
                    arr.push(item);
                }
            }
            this.hints = arr;
            this.emergPayChannels[index].showHintsBox = true;
            //设置自动聚焦
            this.$nextTick(function() {
                // console.log(this.$refs.keyword)
                this.$refs.keyword[0].focus();
            })
        },

        //依据hints数组下标值填充输入框
        fillInput: function (i, j) {
            this.emergPayChannels[i].keyword = this.hints[j].name;
            this.emergPayChannels[i].bankCode = this.hints[j].type;
            this.emergPayChannels[i].bankName = this.hints[j].name;
            this.closeHintsBox(i);
        },

        //关闭候选框
        closeHintsBox: function (i) {
            setTimeout(function () {
                vm.hints = [];
                vm.emergPayChannels[i].showHintsBox = false;
                vm.emergPayChannels[i].keyword = "";
                vm.activeNo = -1;
            }, 80)
        }

    },

    watch: {
        activeNo: function (val, oldVal) {
            //console.log(val);
            if (val != -1) {
                //这里可以替换成你想要执行的任意事件
                for (var i = 0; i < this.hints.length; i++) {
                    this.$refs.hint[i].style.backgroundColor = "#FFF";
                    this.$refs.hint[i].style.color = "#000";
                }
                this.$refs.hint[val].style.backgroundColor = "#1E90FF";
                this.$refs.hint[val].style.color = "#FFF";
            }
        }
    }
});

Anhk丶

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Vue中自定义下拉搜索的实现

<!DOCTYPE html><html><head> <title>财务渠道维护-映射</title>  <#include "/header.html"><!-- <link rel="stylesheet" type="text/css" href="${request.contextPath}/statics/css/bootstrap
复制链接

扫一扫