日历

app/Http/Controllers/Api/ProjectController.php

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

resources/assets/js/pages/manage/calendar.vue

@@ -1,20 +1,85 @@
 <template>
     <div class="page-calendar">
         <PageTitle>{{$L('日历')}}</PageTitle>
-        <div class="nopage">
+        <div class="calendar-head">
-            <div class="nopage-icon"><Icon type="md-calendar" /></div>
+            <div class="calendar-titbox">
-            <div class="nopage-text">{{$L('日历')}}</div>
+                <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>

resources/assets/js/store/state.js

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

resources/assets/sass/pages/page-calendar.scss

@@ -1,26 +1,29 @@
 .page-calendar {
-    .nopage {
+    display: flex;
-        width: 100%;
+    flex-direction: column;
-        height: 100%;
+    .calendar-head {
         display: flex;
-        flex-direction: column;
+        align-items: flex-start;
-        align-items: center;
+        margin: 32px 32px 16px;
-        justify-content: center;
+        border-bottom: 1px solid #F4F4F5;
-        .nopage-icon {
+        .calendar-titbox {
-            background-color: #f4f5f7;
+            flex: 1;
-            padding: 20px;
+            margin-bottom: 16px;
-            border-radius: 50%;
+            .calendar-title {
-            .ivu-icon {
+                display: flex;
-                color: #d1d8dd;
+                align-items: center;
-                font-size: 46px;
+                > h1 {
+                    color: #333333;
+                    font-size: 28px;
+                    font-weight: 600;
+                }
             }
         }
-        .nopage-text {
+    }
-            margin-top: 16px;
+    .calendar-box {
-            color: #bec6cc;
+        flex: 1;
-            background-color: #f4f5f7;
+        height: 0;
-            padding: 4px 15px;
+        display: flex;
-            border-radius: 14px;
+        margin-bottom: 16px;
-        }
     }
 }