JavaWeb/web_toolset
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update:更新Layui版本

Browse Source 
add:新增日历功能
add:预埋日历提醒到QQ功能
This commit is contained in:
Yutousama
2022-09-04 12:47:26 +08:00
parent 4cb79b83cd
commit abb67eaf9c
14 changed files with 531 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

232
web/html/body/tools/calendar.html Normal file
View File

@@ -0,0 +1,232 @@
<!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>

1
web/html/header.html
View File

@@ -40,6 +40,7 @@
<dd><a href="http://bt.yutou233.cn" target="_blank">BT下载</a></dd>
<dd><a href="http://jellyfin.yutou233.cn:7800/" target="_blank">jellyfin</a></dd>
<dd><a href="/html/body/nas/music.html">NAS音乐播放器</a></dd>
<dd><a href="/html/body/tools/calendar.html">日历</a></dd>
</dl>
</li>
<li class="layui-nav-item" id='icon'>

2
web/layui/css/layui.css
View File

File diff suppressed because one or more lines are too long

2
web/layui/css/modules/code.css
View File

@@ -1 +1 @@
html #layuicss-skincodecss{display:none;position:absolute;width:1989px}.layui-code-h3,.layui-code-view{position:relative;font-size:12px}.layui-code-view{display:block;margin:10px 0;padding:0;border:1px solid #eee;border-left-width:6px;background-color:#FAFAFA;color:#333;font-family:Courier New}.layui-code-h3{padding:0 10px;height:40px;line-height:40px;border-bottom:1px solid #eee}.layui-code-h3 a{position:absolute;right:10px;top:0;color:#999}.layui-code-view .layui-code-ol{position:relative;overflow:auto}.layui-code-view .layui-code-ol li{position:relative;margin-left:45px;line-height:20px;padding:0 10px;border-left:1px solid #e2e2e2;list-style-type:decimal-leading-zero;*list-style-type:decimal;background-color:#fff}.layui-code-view .layui-code-ol li:first-child{padding-top:10px}.layui-code-view .layui-code-ol li:last-child{padding-bottom:10px}.layui-code-view pre{margin:0}.layui-code-notepad{border:1px solid #0C0C0C;border-left-color:#3F3F3F;background-color:#0C0C0C;color:#C2BE9E}.layui-code-notepad .layui-code-h3{border-bottom:none}.layui-code-notepad .layui-code-ol li{background-color:#3F3F3F;border-left:none}.layui-code-demo .layui-code{visibility:visible!important;margin:-15px;border-top:none;border-right:none;border-bottom:none}.layui-code-demo .layui-tab-content{padding:15px;border-top:none}
html #layuicss-skincodecss{display:none;position:absolute;width:1989px}.layui-code-view{display:block;position:relative;margin:10px 0;padding:0;border:1px solid #eee;border-left-width:6px;background-color:#fafafa;color:#333;font-family:Courier New;font-size:13px}.layui-code-title{position:relative;padding:0 10px;height:40px;line-height:40px;border-bottom:1px solid #eee;font-size:12px}.layui-code-title>.layui-code-about{position:absolute;right:10px;top:0;color:#b7b7b7}.layui-code-about>a{padding-left:10px}.layui-code-view>.layui-code-ol,.layui-code-view>.layui-code-ul{position:relative;overflow:auto}.layui-code-view>.layui-code-ol>li{position:relative;margin-left:45px;line-height:20px;padding:0 10px;border-left:1px solid #e2e2e2;list-style-type:decimal-leading-zero;*list-style-type:decimal;background-color:#fff}.layui-code-view>.layui-code-ol>li:first-child,.layui-code-view>.layui-code-ul>li:first-child{padding-top:10px}.layui-code-view>.layui-code-ol>li:last-child,.layui-code-view>.layui-code-ul>li:last-child{padding-bottom:10px}.layui-code-view>.layui-code-ul>li{position:relative;line-height:20px;padding:0 10px;list-style-type:none;*list-style-type:none;background-color:#fff}.layui-code-view pre{margin:0}.layui-code-dark{border:1px solid #0c0c0c;border-left-color:#3f3f3f;background-color:#0c0c0c;color:#c2be9e}.layui-code-dark>.layui-code-title{border-bottom:none}.layui-code-dark>.layui-code-ol>li,.layui-code-dark>.layui-code-ul>li{background-color:#3f3f3f;border-left:none}.layui-code-dark>.layui-code-ul>li{margin-left:6px}.layui-code-demo .layui-code{visibility:visible!important;margin:-15px;border-top:none;border-right:none;border-bottom:none}.layui-code-demo .layui-tab-content{padding:15px;border-top:none}

2
web/layui/css/modules/laydate/default/laydate.css
View File

File diff suppressed because one or more lines are too long

2
web/layui/css/modules/layer/default/layer.css
View File

File diff suppressed because one or more lines are too long

6
web/layui/layui.js
View File

File diff suppressed because one or more lines are too long