232 lines
8.8 KiB
HTML
232 lines
8.8 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="zh">
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>Calendar</title>
|
||
|
|
<link rel="stylesheet" href="/layui/css/layui.css" media="all">
|
||
|
|
<meta charset="utf-8"/>
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<div class="layui-layout layui-layout-admin myDiy">
|
||
|
|
<div id="header"></div>
|
||
|
|
<div class="layui-body" style="left: 200px;overflow:auto;">
|
||
|
|
<div id="side"></div>
|
||
|
|
|
||
|
|
<blockquote class="layui-elem-quote">日历管理
|
||
|
|
</blockquote>
|
||
|
|
|
||
|
|
<br/><br/><br/>
|
||
|
|
|
||
|
|
<div class="layui-bg-gray layui-row layui-col-space15" id="card">
|
||
|
|
<div class="layui-form-item">
|
||
|
|
<table id="demo" lay-filter="test"></table>
|
||
|
|
</div>
|
||
|
|
<form class="layui-form" lay-filter="calendarForm">
|
||
|
|
|
||
|
|
<div class="layui-form-item">
|
||
|
|
<label class="layui-form-label">日历</label>
|
||
|
|
<div class="layui-input-block">
|
||
|
|
<div id="calendarShow" name="calendar" style="width: 45%"/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<br/>
|
||
|
|
<br/>
|
||
|
|
<br/>
|
||
|
|
<div class="layui-form-item">
|
||
|
|
<div class="layui-form-item">
|
||
|
|
<label class="layui-form-label">新增任务</label>
|
||
|
|
<div class="layui-input-block">
|
||
|
|
<input type="text" class="layui-input" id="calendar">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="layui-form-item">
|
||
|
|
<label class="layui-form-label">标题</label>
|
||
|
|
<div class="layui-input-block">
|
||
|
|
<input type="text" name="title" required lay-verify="required" placeholder="请输入标题"
|
||
|
|
autocomplete="off" class="layui-input">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="layui-form-item">
|
||
|
|
<label class="layui-form-label">内容</label>
|
||
|
|
<div class="layui-input-block">
|
||
|
|
<input type="text" name="content" required lay-verify="required" placeholder="请输入内容"
|
||
|
|
autocomplete="off" class="layui-input">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="layui-form-item">
|
||
|
|
<label class="layui-form-label">类型</label>
|
||
|
|
<div class="layui-input-block">
|
||
|
|
<input type="radio" name="model" value="0" title="单次提醒" checked>
|
||
|
|
<input type="radio" name="model" value="1" title="循环提醒">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="layui-form-item">
|
||
|
|
<label class="layui-form-label">模式</label>
|
||
|
|
<div class="layui-input-block">
|
||
|
|
<input type="radio" name="type" value="5" title="日" checked>
|
||
|
|
<input type="radio" name="type" value="4" title="周">
|
||
|
|
<input type="radio" name="type" value="2" title="月">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="layui-form-item">
|
||
|
|
<label class="layui-form-label">间隔日期</label>
|
||
|
|
<div class="layui-input-block">
|
||
|
|
<input type="text" name="day" required lay-verify="required" placeholder="天数"
|
||
|
|
autocomplete="off" class="layui-input">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="layui-form-item">
|
||
|
|
<label class="layui-form-label">QQ通知</label>
|
||
|
|
<div class="layui-input-block">
|
||
|
|
<input type="checkbox" name="qqbot" title="发送到QQ">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<blockquote class="layui-elem-quote"><span id="dateText">日期选择</span>
|
||
|
|
</blockquote>
|
||
|
|
|
||
|
|
<div class="layui-form-item">
|
||
|
|
<div class="layui-input-block">
|
||
|
|
<a class="layui-btn" id="setCalendar">新增规则</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="footer"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
<script src="/layui/layui.js"></script>
|
||
|
|
<script src="/js/jquery-3.2.1.js"></script>
|
||
|
|
<script type="text/html" id="calendarToolBar">
|
||
|
|
<button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
|
||
|
|
</script>
|
||
|
|
<script>
|
||
|
|
|
||
|
|
layui.use(['laydate', 'form', 'table'], function () {
|
||
|
|
let dayDateObj
|
||
|
|
let marks = {}
|
||
|
|
let holiday = []
|
||
|
|
let laydate = layui.laydate;
|
||
|
|
let form = layui.form;
|
||
|
|
let table = layui.table;
|
||
|
|
|
||
|
|
$.get("/calendar/all.do", function (json) {
|
||
|
|
//执行一个laydate实例
|
||
|
|
marks = json.data.date;
|
||
|
|
holiday = json.data.holiday;
|
||
|
|
showData()
|
||
|
|
})
|
||
|
|
table.render({
|
||
|
|
elem: '#demo'
|
||
|
|
, toolbar: '#toolbar'
|
||
|
|
, url: '/calendar/list.do' //数据接口
|
||
|
|
, page: true //开启分页
|
||
|
|
, cols: [[ //表头
|
||
|
|
{field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left'}
|
||
|
|
, {field: 'title', title: '标题', width: 100}
|
||
|
|
, {field: 'content', title: '内容', width: 200, sort: true}
|
||
|
|
, {field: 'startTime', title: '开始时间', width: 180}
|
||
|
|
, {field: 'endTime', title: '结束时间', width: 180}
|
||
|
|
, {field: 'time', title: '间隔', width: 80, sort: true}
|
||
|
|
, {field: 'type', title: '类型', width: 80, sort: true}
|
||
|
|
, {field: 'model', title: '模式', width: 80}
|
||
|
|
, {field: 'words', title: '', toolbar: '#calendarToolBar'}
|
||
|
|
]]
|
||
|
|
});
|
||
|
|
table.on('tool(test)', function (obj) {
|
||
|
|
console.log(obj)
|
||
|
|
if (obj.event === 'delete') {
|
||
|
|
$.post('/calendar/del.do', {id: obj.data.id}, function (json) {
|
||
|
|
layer.msg(json.msg)
|
||
|
|
})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
function showData() {
|
||
|
|
laydate.render({
|
||
|
|
elem: '#calendar' //指定元素
|
||
|
|
, type: 'datetime'
|
||
|
|
, show: true
|
||
|
|
, range: true
|
||
|
|
, holidays: holiday
|
||
|
|
, done: function (value, date, endDate) {
|
||
|
|
console.log(date)
|
||
|
|
console.log(endDate)
|
||
|
|
dayDateObj = date;
|
||
|
|
dayDateObj.time = value
|
||
|
|
$('#dateText')[0].innerHTML = "从" + date.date + "号开始计算"
|
||
|
|
}, change: function (value, date, endDate) {
|
||
|
|
|
||
|
|
}
|
||
|
|
});
|
||
|
|
laydate.render({
|
||
|
|
elem: '#calendarShow' //指定元素
|
||
|
|
, position: 'static'
|
||
|
|
, holidays: holiday
|
||
|
|
, theme: 'molv'
|
||
|
|
, done: function (value, date, endDate) {
|
||
|
|
|
||
|
|
}, change: function (value, date, endDate) {
|
||
|
|
console.log(marks[value] + " > " + value)
|
||
|
|
if (marks[value] !== undefined) {
|
||
|
|
// datatmp.hint(marks[value])
|
||
|
|
layer.tips(marks[value], '#calendarShow')
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
$('#setCalendar').click(function () {
|
||
|
|
form.submit('calendarForm', function (obj) {
|
||
|
|
console.log(obj)
|
||
|
|
let field = obj.field;
|
||
|
|
layer.open({
|
||
|
|
title: '确认'
|
||
|
|
, content: '确认从' + dayDateObj.date + '号开始，开始提醒？'
|
||
|
|
, yes: function (index, layero) {
|
||
|
|
$.post("/calendar/set.do", {
|
||
|
|
startDate: dayDateObj.time
|
||
|
|
, title: field.title
|
||
|
|
, content: field.content
|
||
|
|
, type: field.type
|
||
|
|
, model: field.model
|
||
|
|
, day: field.day
|
||
|
|
, qqbot: field.qqbot
|
||
|
|
}, function (json) {
|
||
|
|
layer.msg(json.msg)
|
||
|
|
})
|
||
|
|
}
|
||
|
|
});
|
||
|
|
})
|
||
|
|
|
||
|
|
|
||
|
|
})
|
||
|
|
});
|
||
|
|
$('#header').load("/html/header.html");
|
||
|
|
$('#footer').load("/html/footer.html");
|
||
|
|
</script>
|
||
|
|
<style>
|
||
|
|
.myDiy {
|
||
|
|
/*width: 80%;*/
|
||
|
|
margin-top: 10%;
|
||
|
|
margin-left: 15%;
|
||
|
|
margin-right: 15%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.button {
|
||
|
|
width: 100px;
|
||
|
|
height: 100px;
|
||
|
|
font-size: 1em;
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|
||
|
|
|
||
|
|
</html>
|