vue jQuery 混用实现点击日历展示list

html 复制代码

 <div class="ibox-content " style="margin-left:720px;width:410px;height: 1030px;margin-top: -1030px" id="app">
            <div>
                <div class="ibox-content center-block">
                    <div id="date"></div>
                </div>
                <div class="ibox-content center-block">
                    <div id="remark" style="border-width: 0px 0;height:20px;"></div>
                </div>
            </div>
            <div>
                <template v-if="sd>0">
                    <div>{{time}} <span style="margin-left: 230px"><a style="color: #1684fc" onclick="showTimeMore()"> 查看更多>></a></span>
                    </div>
                </template>
                <template v-if="sd==0">
                    <div align="center" style="font-size: larger;font-weight: bold">该警员暂无日程</div>
                </template>
                <div class="well toolong" v-for="(item, index) in list" v-if="index<8" style="margin-top: 10px;width: 350px" :title="item.columns.title+'   '+20+item.columns.time_start+'   '+20+item.columns.time_end">
                    <i class="fa fa-flag" aria-hidden="true" style="color: #e99d42"></i>
                    {{item.columns.title}}
                    <span
                        style="margin-left: 10px">20{{item.columns.time_start|dateFmt('YYYY-MM-DD')}}</span><span
                        style="margin-left: 10px">20{{item.columns.time_end|dateFmt('YYYY-MM-DD')}}</span>
                </div>
            </div>
        </div>

javascript 复制代码

<!--日历日程-->
<script th:inline="javascript">
    var vue = new Vue({
        el: '#app',
        data: {
            key: "aa",
            list: '',
            time: new Date().format("yyyy-MM-dd"),
            sd: 0
        }

    })
    $('<div style="width:100 %;"></div>').datetimepicker({
        language: 'zh-cn',  //设置语言类型为中文，默认英文。需导入对应css
        format: 'yyyy-MM-dd',
        fontAwesome: true,
        minView: 2,
        viewSelect: 2,
        initialDate: new Date().format("yyyy-MM-dd"), // 设置日期
    }).prependTo("#date");

    function reload() {
        $.get(ctx + "qjep/personalHomepage/scheduleList/" + vue.time, function (response) {
            vue.list = response.data
            if (response.data.length > 0) {
                vue.sd += 1
            } else {
                vue.sd = 0
            }
        })
    }

    function showTimeMore() {
        var url = prefix + "/showtimemore/" + vue.time;
        $.modal.openCancel("日程", url);
    }

    reload()

    $("#date").on('changeDate', function (ev) {
        vue.time = ev.date.format("yyyy-MM-dd")
        reload()
    })

</script>

java 复制代码

   @RequestMapping("/scheduleList/{time}")
    @ResponseBody
    public AjaxResult scheduleList(@PathVariable("time") String time) {
        System.out.println(time);
        List<Record> scheduleList = qjepPersonalHomepageService.scheduleList(getSysUser().getUserId(), time);
        return AjaxResult.success(scheduleList);

    }

vue jQuery 混用实现 点击日历展示list

vue jQuery 混用实现点击日历展示list