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);

    }
相关推荐
用户51681661458411 天前
Vue Router 路由懒加载引发的生产页面白屏问题
vue.js·vue-router
前端缘梦1 天前
Vue Keep-Alive 组件详解:优化性能与保留组件状态的终极指南
前端·vue.js·面试
Simon_He1 天前
这次来点狠的:用 Vue 3 把 AI 的“碎片 Markdown”渲染得又快又稳(Monaco 实时更新 + Mermaid 渐进绘图)
前端·vue.js·markdown
王同学QaQ1 天前
Vue3对接UE,通过MQTT完成通讯
javascript·vue.js
华仔啊1 天前
基于 RuoYi-Vue 轻松实现单用户登录功能,亲测有效
java·vue.js·后端
艾小码1 天前
告别Vue混入的坑!Composition API让我效率翻倍的3个秘密
前端·javascript·vue.js
Gracemark2 天前
高德地图-地图选择经纬度问题【使用输入提示-使用Autocomplete进行联想输入】(复盘)
vue.js
天下无贼2 天前
【手写组件】 Vue3 + Uniapp 手写一个高颜值日历组件(含跨月补全+今日高亮+选中状态)
前端·vue.js
洋葱头_2 天前
vue3项目不支持低版本的android,如何做兼容
前端·vue.js
奔跑的蜗牛ing2 天前
Vue3 + Element Plus 输入框省略号插件:零侵入式全局解决方案
vue.js·typescript·前端工程化