日历
This commit is contained in:
parent
fc96cc37df
commit
080e805cfb
@ -484,7 +484,7 @@ class ProjectController extends AbstractController
|
||||
//
|
||||
$task = ProjectTask::userTask($task_id, ['taskUser', 'taskTag']);
|
||||
//
|
||||
$task->project_name = ProjectColumn::whereId($task->project_id)->value('name');
|
||||
$task->project_name = Project::whereId($task->project_id)->value('name');
|
||||
$task->column_name = ProjectColumn::whereId($task->column_id)->value('name');
|
||||
//
|
||||
return Base::retSuccess('success', $task);
|
||||
|
@ -1,20 +1,85 @@
|
||||
<template>
|
||||
<div class="page-calendar">
|
||||
<PageTitle>{{$L('日历')}}</PageTitle>
|
||||
<div class="nopage">
|
||||
<div class="nopage-icon"><Icon type="md-calendar" /></div>
|
||||
<div class="nopage-text">{{$L('日历')}}</div>
|
||||
<div class="calendar-head">
|
||||
<div class="calendar-titbox">
|
||||
<div class="calendar-title">
|
||||
<h1>{{$L('日历')}}</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="calendar-box">
|
||||
<ul>
|
||||
<li>MON</li>
|
||||
<li>TUE</li>
|
||||
<li>WED</li>
|
||||
<li>THU</li>
|
||||
<li>FRI</li>
|
||||
<li>SAT</li>
|
||||
<li>SUN</li>
|
||||
</ul>
|
||||
{{days}}
|
||||
<ul>
|
||||
<li v-for="n in 5"></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState} from "vuex";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
return {
|
||||
days: []
|
||||
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.days = this.generateMonthCalendar('2020-09-19');
|
||||
},
|
||||
computed: {
|
||||
...mapState(['userInfo']),
|
||||
},
|
||||
watch: {
|
||||
|
||||
},
|
||||
methods: {
|
||||
generateMonthCalendar(dates, line = 6) {
|
||||
var date = new Date(dates); // 初始时间格式
|
||||
var y = date.getFullYear();
|
||||
var m = date.getMonth();
|
||||
var days = new Date(y, m + 1, 0).getDate(); // 获取这个月共有多少天
|
||||
var firstDayWeek = new Date(y, m, 1).getDay(); // 月份第一天星期几
|
||||
var arr = []; // 存储日历格式的数组
|
||||
var n = []; // 日历格式中的一行
|
||||
var d = 1; // 日历格式中的天数
|
||||
// 先根据这个月第一天排星期几
|
||||
// 把上个月剩下几天留在这个月的'奸细'放在最前头
|
||||
for(let i = 0; i < firstDayWeek; i++) {
|
||||
// new Date(2020, 8, 0) --> 9月没有0号 === 8月3127 n.unshift(getDate(y, m, 0 - i).getDate());
|
||||
}
|
||||
// 开启循环
|
||||
// 一星期占一行,一行一个外循环
|
||||
// 这里我默认想要6行
|
||||
for (let j = 0; j < line; j++) {
|
||||
// 一天占一个格子,最多一星期7个格子
|
||||
// 这里我想要7个格子
|
||||
for (let i = 0; i < 7; i++) {
|
||||
if(d > days) {
|
||||
// 这个月都放完了,该放什么?
|
||||
// new Date(2020, 8, 31) --> 9月没有31 === 10月1 n.push(new Date(y, m, d++).getDate());
|
||||
} else {
|
||||
// 放置这个月的天数 n.push(d++);
|
||||
}51
|
||||
if (n.length == 7) break; // 放了7个格子该结束了
|
||||
}
|
||||
arr.push(n);
|
||||
n = []; // 这一行放完了,清空ba
|
||||
}
|
||||
return arr;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
11
resources/assets/js/store/state.js
vendored
11
resources/assets/js/store/state.js
vendored
@ -226,15 +226,20 @@ const state = { method };
|
||||
|
||||
// 变量缓存
|
||||
[
|
||||
'projectChatShow', // 项目聊天显示
|
||||
'projectTablePanel', // 项目面板显示类型
|
||||
'projectCompleteHide', // 项目面板显示已完成列表
|
||||
'taskMyShow', // 项目面板显示我的任务
|
||||
'taskUndoneShow', // 项目面板显示未完成任务
|
||||
'taskCompletedShow' // 项目面板显示已完成任务
|
||||
].forEach((key) => {
|
||||
state[key] = state.method.getStorageBoolean("boolean:" + key, true)
|
||||
})
|
||||
});
|
||||
|
||||
[
|
||||
'projectChatShow', // 项目聊天显示
|
||||
'projectCompleteHide' // 项目面板显示已完成列表
|
||||
].forEach((key) => {
|
||||
state[key] = state.method.getStorageBoolean("boolean:" + key, false)
|
||||
});
|
||||
|
||||
// ajax
|
||||
state.ajaxLoadNum = 0;
|
||||
|
37
resources/assets/sass/pages/page-calendar.scss
vendored
37
resources/assets/sass/pages/page-calendar.scss
vendored
@ -1,26 +1,29 @@
|
||||
.page-calendar {
|
||||
.nopage {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.calendar-head {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
margin: 32px 32px 16px;
|
||||
border-bottom: 1px solid #F4F4F5;
|
||||
.calendar-titbox {
|
||||
flex: 1;
|
||||
margin-bottom: 16px;
|
||||
.calendar-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.nopage-icon {
|
||||
background-color: #f4f5f7;
|
||||
padding: 20px;
|
||||
border-radius: 50%;
|
||||
.ivu-icon {
|
||||
color: #d1d8dd;
|
||||
font-size: 46px;
|
||||
> h1 {
|
||||
color: #333333;
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
.nopage-text {
|
||||
margin-top: 16px;
|
||||
color: #bec6cc;
|
||||
background-color: #f4f5f7;
|
||||
padding: 4px 15px;
|
||||
border-radius: 14px;
|
||||
}
|
||||
}
|
||||
.calendar-box {
|
||||
flex: 1;
|
||||
height: 0;
|
||||
display: flex;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user