nomsg

package.json

@@ -38,7 +38,7 @@
         "echarts": "^5.1.1",
         "element-ui": "^2.15.2",
         "tinymce": "^5.8.1",
-        "tui-calendar-hi": "^1.13.0-3",
+        "tui-calendar-hi": "^1.13.0-5",
         "view-design-hi": "^4.6.1-1",
         "vue-clipboard2": "^0.3.1",
         "vue-emoji-picker": "^1.0.1",

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

@@ -22,7 +22,9 @@
             <Calendar
                 ref="cal"
                 :view="calendarView"
-                :calendars="calendarLists"
+                :theme="calendarTheme"
+                :template="calendarTemplate"
+                :calendars="calendarList"
                 :schedules="scheduleLists"
                 @beforeClickSchedule="onBeforeClickSchedule"
                 @beforeUpdateSchedule="onBeforeUpdateSchedule"/>
@@ -64,6 +66,9 @@ export default {
             rangeTime: [],
 
             calendarView: 'month',
+            calendarTheme: {},
+            calendarTemplate: {},
+            calendarList: [],
 
             scheduleLoad: 0,
             scheduleList: [],
@@ -74,21 +79,13 @@ export default {
         this.setRenderRange();
     },
 
+    activated() {
+        this.$refs.cal.resetRender();
+    },
+
     computed: {
         ...mapState(['projectList']),
 
-        calendarLists() {
-            const {projectList} = this;
-            return projectList.map((project) => {
-                return {
-                    id: project.id,
-                    name: project.name,
-                    bgColor: '#F2F3F5',
-                    borderColor: '#F2F3F5'
-                }
-            });
-        },
-
         scheduleLists() {
             return this.scheduleList.filter(({complete_at}) => !complete_at)
         }
@@ -97,10 +94,42 @@ export default {
     watch: {
         rangeTime(time) {
             this.getTask(time);
+        },
+
+        projectList(data) {
+            const list = data.map((project) => {
+                return {
+                    id: project.id,
+                    name: project.name,
+                }
+            });
+            if (JSON.stringify(list) != JSON.stringify(this.calendarList)) {
+                this.calendarList = list;
+            }
         }
     },
 
     methods: {
+        initLanguage() {
+            this.calendarTheme = {
+                'common.border': '1px solid #f4f5f5',
+                'month.dayname.fontSize': '14px',
+                'month.dayname.borderLeft': '1px solid #f4f5f5',
+                'month.dayname.height': '50px',
+            }
+            this.calendarTemplate = {
+                titlePlaceholder: () => {
+                    return this.$L("任务描述")
+                },
+                popupEdit: () => {
+                    return this.$L("详情");
+                },
+                popupDelete: () => {
+                    return this.$L("删除");
+                }
+            }
+        },
+
         getTask(time) {
             if (this.scheduleLoad > 0) {
                 setTimeout(() => {
@@ -134,6 +163,7 @@ export default {
                     if (task.overdue) {
                         schedule.color = "#f56c6c"
                         schedule.bgColor = "#fef0f0"
+                        schedule.priority+= '<span class="overdue">' + this.$L('超期未完成') + '</span>';
                     }
                     let index = this.scheduleList.findIndex(({id}) => id === task.id);
                     if (index > -1) {
@@ -195,13 +225,48 @@ export default {
         },
 
         onBeforeClickSchedule({type, schedule}) {
+            let data = this.scheduleList.find(({id}) => id === schedule.id);
+            if (!data) {
+                return;
+            }
             switch (type) {
                 case "check":
+                    this.$set(data, 'complete_at', $A.formatDate("Y-m-d H:i:s"))
+                    this.$store.dispatch("taskUpdate", {
+                        task_id: data.id,
+                        complete_at: $A.formatDate("Y-m-d H:i:s"),
+                    }).then(({msg}) => {
+                        $A.messageSuccess(msg);
+                    }).catch(({msg}) => {
+                        this.$set(data, 'complete_at', null)
+                        $A.modalError(msg);
+                    });
                     break;
+
                 case "edit":
                     this.$store.dispatch("openTask", schedule.id)
                     break;
+
                 case "delete":
+                    $A.modalConfirm({
+                        title: '删除任务',
+                        content: '你确定要删除任务【' + data.title + '】吗？',
+                        loading: true,
+                        onOk: () => {
+                            this.scheduleList = this.scheduleList.filter(({id}) => id !== data.id);
+                            this.$store.dispatch("taskArchivedOrRemove", {
+                                task_id: data.id,
+                                type: 'delete',
+                            }).then(({msg}) => {
+                                $A.messageSuccess(msg);
+                                this.$Modal.remove();
+                            }).catch(({msg}) => {
+                                $A.modalError(msg, 301);
+                                this.$Modal.remove();
+                                this.setRenderRange();
+                            });
+                        }
+                    });
                     break;
             }
         },

resources/assets/js/pages/manage/components/Calendar.vue

@@ -48,22 +48,13 @@ export default {
         theme: {
             type: Object,
             default() {
-                return {
+                return {};
-                    'common.border': '1px solid #f4f5f5',
-                    'month.dayname.fontSize': '14px',
-                    'month.dayname.borderLeft': '1px solid #f4f5f5',
-                    'month.dayname.height': '50px',
-                };
             }
         },
         template: {
             type: Object,
             default() {
-                return {
+                return {};
-                    titlePlaceholder: function () {
-                        return "Task Description"
-                    }
-                };
             }
         },
         week: {
@@ -209,6 +200,10 @@ export default {
         getInstance() {
             return this.calendarInstance;
         },
+        resetRender() {
+            this.calendarInstance.clear();
+            this.reflectSchedules();
+        },
         invoke(methodName, ...args) {
             let result;
 

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

@@ -57,6 +57,19 @@
                 z-index: 1;
             }
             .tui-full-calendar-popup-creation {
+                .tui-full-calendar-icon {
+                    &.tui-full-calendar-ic-title,
+                    &.tui-full-calendar-calendar-dot {
+                        display: none;
+                    }
+                    &.tui-full-calendar-ic-date {
+                        background-image: url("data:image/svg+xml;base64,PHN2ZyB0PSIxNjIzODU5NjcwNjA3IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjE2Mzg4IiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTk2MCAxMjhIODMzYzAtNTMtNDMtOTYtOTYtOTZoLTE2Yy01MyAwLTk2IDQzLTk2IDk2SDQwMGMwLTI2LjUtMTAuNy01MC41LTI4LjEtNjcuOUMzNTQuNSA0Mi43IDMzMC41IDMyIDMwNCAzMmgtMTZjLTUzIDAtOTYgNDMtOTYgOTZINjRjLTM1LjMgMC02NCAyOC42LTY0IDY0djczNmMwIDM1LjMgMjguNyA2NCA2NCA2NGg4OTZjMzUuMyAwIDY0LTI4LjcgNjQtNjRWMTkyYzAtMzUuNC0yOC43LTY0LTY0LTY0eiBtLTI3MSA4YzAtMjIuMSAxNy45LTQwIDQwLTQwczQwIDE3LjkgNDAgNDB2ODBjMCAyMi4xLTE3LjkgNDAtNDAgNDAtMTEgMC0yMS00LjUtMjguMy0xMS43QzY5My41IDIzNyA2ODkgMjI3IDY4OSAyMTZ2LTgweiBtLTQzMyAwYzAtMjIuMSAxNy45LTQwIDQwLTQwczQwIDE3LjkgNDAgNDB2ODBjMCAyMi4xLTE3LjkgNDAtNDAgNDAtMTEgMC0yMS00LjUtMjguMy0xMS43QzI2MC41IDIzNyAyNTYgMjI3IDI1NiAyMTZ2LTgweiBtNzA0IDc2MGMwIDE3LjctMTQuMyAzMi0zMiAzMkg5NmMtMTcuNyAwLTMyLTE0LjMtMzItMzJWNDQ4aDg5NnY0NDh6IiBwLWlkPSIxNjM4OSIgZmlsbD0iIzUxNTE1MSI+PC9wYXRoPjwvc3ZnPg==");
+                        background-size: contain;
+                    }
+                }
+                .tui-full-calendar-content {
+                    padding-left: 0;
+                }
                 .tui-full-calendar-popup-section {
                     display: flex;
                     justify-content: space-between;
@@ -68,6 +81,9 @@
                 .tui-full-calendar-section-start-date,
                 .tui-full-calendar-section-end-date {
                     width: 210px;
+                    .tui-full-calendar-content {
+                        padding-left: 8px;
+                    }
                 }
                 .tui-full-calendar-popup-location,
                 .tui-full-calendar-section-private,
@@ -79,13 +95,30 @@
             .tui-full-calendar-popup-task {
                 .priority {
                     color: #ffffff;
-                    padding: 2px 3px;
+                    padding: 2px 4px;
                     border-radius: 4px;
+                    margin-right: 6px;
+                }
+                .overdue {
+                    color: #f5222d;
+                    background: #fff1f0;
+                    border: 1px solid #ffa39e;
+                    padding: 1px 3px;
+                    border-radius: 4px;
+                    margin-right: 6px;
                 }
                 .tui-full-calendar-calendar-dot,
                 .tui-full-calendar-ic-priority {
                     opacity: 0;
                 }
+                .tui-full-calendar-ic-edit {
+                    top: -2px;
+                    background-image: url("data:image/svg+xml;base64,PHN2ZyB0PSIxNjIzODU5MzY4MTg5IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjExMTkiIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIj48cGF0aCBkPSJNODMzLjQyODU3MTY4IDYySDE5MC41NzE0MjgzMmExMjguNTcxNDI4MzIgMTI4LjU3MTQyODMyIDAgMCAwLTEyOC41NzE0MjgzMiAxMjguNTcxNDI4MzJ2NjQyLjg1NzE0MzM2YTEyOC41NzE0MjgzMiAxMjguNTcxNDI4MzIgMCAwIDAgMTI4LjU3MTQyODMyIDEyOC41NzE0MjgzMmg2NDIuODU3MTQzMzZhMTI4LjU3MTQyODMyIDEyOC41NzE0MjgzMiAwIDAgMCAxMjguNTcxNDI4MzItMTI4LjU3MTQyODMyVjE5MC41NzE0MjgzMmExMjguNTcxNDI4MzIgMTI4LjU3MTQyODMyIDAgMCAwLTEyOC41NzE0MjgzMi0xMjguNTcxNDI4MzJ6IG02NC4yODU3MTQxNiA3NzEuNDI4NTcxNjhhNjQuMjg1NzE0MTYgNjQuMjg1NzE0MTYgMCAwIDEtNjQuMjg1NzE0MTcgNjQuMjg1NzE0MTZIMTkwLjU3MTQyODMyYTY0LjI4NTcxNDE2IDY0LjI4NTcxNDE2IDAgMCAxLTY0LjI4NTcxNDE2LTY0LjI4NTcxNDE2VjE5MC41NzE0MjgzMmE2NC4yODU3MTQxNiA2NC4yODU3MTQxNiAwIDAgMSA2NC4yODU3MTQxNy02NC4yODU3MTQxNmg2NDIuODU3MTQzMzVhNjQuMjg1NzE0MTYgNjQuMjg1NzE0MTYgMCAwIDEgNjQuMjg1NzE0MTYgNjQuMjg1NzE0MTd6IiBwLWlkPSIxMTIwIiBmaWxsPSIjNTE1MTUxIj48L3BhdGg+PHBhdGggZD0iTTE5MC41NzE0MjgzMiAyNTQuODU3MTQyNDhoNjQuMjg1NzE0MTZ2NjQuMjg1NzE1MDRIMTkwLjU3MTQyODMyek0zMTkuMTQyODU3NTIgMjU0Ljg1NzE0MjQ4aDQ1MHY2NC4yODU3MTUwNEgzMTkuMTQyODU3NTJ6TTE5MC41NzE0MjgzMiA0NDcuNzE0Mjg1ODRoNjQuMjg1NzE0MTZ2NjQuMjg1NzE0MTZIMTkwLjU3MTQyODMyek0zMTkuMTQyODU3NTIgNDQ3LjcxNDI4NTg0aDQ1MHY2NC4yODU3MTQxNkgzMTkuMTQyODU3NTJ6TTE5MC41NzE0MjgzMiA2NDAuNTcxNDI4MzJoNjQuMjg1NzE0MTZ2NjQuMjg1NzE0MTZIMTkwLjU3MTQyODMyek0zMTkuMTQyODU3NTIgNjQwLjU3MTQyODMyaDMyMS40Mjg1NzA4djY0LjI4NTcxNDE2SDMxOS4xNDI4NTc1MnoiIHAtaWQ9IjExMjEiIGZpbGw9IiM1MTUxNTEiPjwvcGF0aD48L3N2Zz4=");
+                }
+                .tui-full-calendar-ic-delete {
+                    top: -2px;
+                    background-image: url("data:image/svg+xml;base64,PHN2ZyB0PSIxNjIzODU5MzMwMTc2IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9Ijc5MiIgd2lkdGg9IjIwMCIgaGVpZ2h0PSIyMDAiPjxwYXRoIGQ9Ik04OTIuMjg4IDI1NmgtMTkxLjE2OEEyMDIuMjQgMjAyLjI0IDAgMCAwIDUwOS42MzIgNjIuMDggMjAxLjIxNiAyMDEuMjE2IDAgMCAwIDMxOC44NDggMjU2SDEyOGMtMTguNjg4IDAtNjYuMDQ4LTQuMjI0LTY2LjA0OCAyNC43NjhDNjEuOTUyIDMyNy43NDQgMTA5LjM3NiAzMjAgMTI4IDMyMGg2NHY1MTJhMTQ2LjQ5NiAxNDYuNDk2IDAgMCAwIDEyNy40MjQgMTI4aDM4Mi4yNzJBMTUwLjAxNiAxNTAuMDE2IDAgMCAwIDgzMiA4MzJsLTMuMzkyLTUxMmg2NGMxOC4zNjggMCA2NS4wMjQgMS40NzIgNjUuMDI0LTM5Ljc0NEE3Mi4zODQgNzIuMzg0IDAgMCAwIDg5Mi4yODggMjU2ek01MDkuNjMyIDEyOC41MTJBMTM4LjE3NiAxMzguMTc2IDAgMCAxIDYzNy40NCAyNTZIMzgyLjU5MmExMzcuOTIgMTM3LjkyIDAgMCAxIDEyNy4wNC0xMjcuNDg4ek03NjggODMyYTk3Ljk4NCA5Ny45ODQgMCAwIDEtNjYuODggNjRIMzE4Ljg0OGE5My41NjggOTMuNTY4IDAgMCAxLTY0LTY0VjMyMEg3Njh2NTEyeiBtLTM4NS40MDgtNjRWNTEyYzAtMTguNDk2IDAuOTYtNjAuOTkyIDM2LjczNi02MC45OTIgMjcuMzI4IDAgMjYuNDk2IDQzLjAwOCAyNi45NDQgNjAuOTkydjI1NmMwIDE4LjQ5Ni02LjQgMjAuMDMyLTI0Ljk2IDIwLjAzMnMtMzguNzItMS41MzYtMzguNzItMjAuMDMyeiBtMTkxLjE2OCAwVjUxMmE2NCA2NCAwIDAgMSAyMy44MDgtNjAuOTkyYzQyLjQzMiAwIDM5LjM2IDQzLjAwOCAzOS44NzIgNjAuOTkydjI1NmMwIDE4LjQ5Ni0xOS41ODQgMjAuMDMyLTM3Ljk1MiAyMC4wMzJzLTI1Ljc5Mi0xLjUzNi0yNS43OTItMjAuMDMyeiIgcC1pZD0iNzkzIiBmaWxsPSIjNTE1MTUxIj48L3BhdGg+PC9zdmc+");
+                }
             }
             .tui-datepicker {
                 .tui-calendar {