解决任务超期显示红色背景

fhKeeper/formulahousekeeper/timesheet/src/views/project/projectInside.vue

@@ -72,6 +72,7 @@
                             <i class="el-icon-arrow-left" ref="box"></i>
                         </div>
                     </div>
+                    <!-- 增加侧边栏的点击效果 -->
                     
                     <el-main style="background:#f7f7f7;padding:0px;">
                         <el-row style="color:#999;margin-top:10px;padding: 0px 10px;">
@@ -138,10 +139,10 @@
                                                 <span v-if="element.executorName != null" :style="'background:'+element.executorColor" class="user_name_icon">{{element.executorName.length>2?element.executorName.substring(element.executorName.length-2, element.executorName.length):element.executorName}}</span>
                                                 <el-button v-if="element.executorName == null" type="primary" @click.stop.native="addAsMyTask(element)" size="mini" style="float:right;width:38px;padding:5px;">认领</el-button>
                                             </div>
-                                            <div style="margin: 10px 0px;color:#666;">
-                                                <i v-if="element.endDate != null" class="el-icon-date">&nbsp;&nbsp;{{element.endDate}}</i>
+                                            <div style="margin: 10px 0px;color:#666;" @click="timess(element.endDate)">
+                                                <span v-if="element.endDate > times || element.taskStatus == 1"><i v-if="element.endDate != null" class="el-icon-date">&nbsp;&nbsp;{{element.endDate}}</i></span>
+                                                <span v-else class="element_span"><em v-if="element.endDate != null" style="display: inline-block;padding:3px 5px"><i v-if="element.endDate != null" class="el-icon-date">&nbsp;&nbsp;{{element.endDate}}  截止</i></em></span>
                                                 <i :class="taskTypeIcon[element.taskType]" :style="'float:right;color:'+taskTypeColor[element.taskType]+';margin-right:8px;'" ></i>
-                                                
                                             </div>
                                             <!--子任务 -->
                                             <div v-if="element.subTaskList.length > 0">
@@ -600,6 +601,7 @@ toolbar: 'bold italic underline strikethrough | fontsizeselect | forecolor backc
                     theme: 'snow',
                 },
                 textContent: true, // 控制提交 
+                times: null,
             };
         },
         methods: {
@@ -975,15 +977,12 @@ toolbar: 'bold italic underline strikethrough | fontsizeselect | forecolor backc
             },  
             // 获取评论列表
             gain (task) {
-                console.log(this.stageList, '卡片视图的数据');
                 this.taskId = task.id
                 this.http.post('/task-comment/getList', {taskId: task.id},
                 res => {
                     if (res.code == "ok") {
                         this.commentList = res.data
                         this.sppk(this.commentList) // 获取参与人的方法
-                        // this.cppl()
-                        // this.commentList.reverse()
                     } else {
                         this.$message({
                         message: res.msg,
@@ -1043,7 +1042,6 @@ toolbar: 'bold italic underline strikethrough | fontsizeselect | forecolor backc
                 this.http.post('/task/getTask',{id: id},
                 res => {
                     if (res.code == "ok") {
-                        console.log(res, '点击卡片视图的数据');
                         this.addForm = res.data;
                         this.addForm.createDate = null;
                         this.addForm.indate = null;
@@ -1103,7 +1101,8 @@ toolbar: 'bold italic underline strikethrough | fontsizeselect | forecolor backc
                 res => {
                     if (res.code == "ok") {
                         this.stageList = res.data;
-                        // console.log(this.stageList[0].taskList, '嘀嘀嘀');
+                        console.log(this.stageList, '加载项目内的任务列表');
+                        this.timess() // 处理时间的方法
                     } else {
                         this.$message({
                         message: res.msg,
@@ -1118,6 +1117,14 @@ toolbar: 'bold italic underline strikethrough | fontsizeselect | forecolor backc
                     });
                 });
             },
+            timess(){
+                var date = new Date()
+                let Y = date.getFullYear()
+                let M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1)
+                let D = date.getDate() < 10 ? ('0' + date.getDate()) : date.getDate()
+                this.times = `${Y}-${M}-${D}`
+                console.log(this.times);
+            },
             addStagePost() {
                 let param = JSON.parse(JSON.stringify(this.stageForm));
                 param.taskList = [];
@@ -1396,7 +1403,6 @@ toolbar: 'bold italic underline strikethrough | fontsizeselect | forecolor backc
                 res => {
                     if (res.code == "ok") {
                         this.projectList = res.data;
-                        console.log(this.projectList);
                     } else {
                         this.$message({
                         message: res.msg,
@@ -1890,6 +1896,13 @@ toolbar: 'bold italic underline strikethrough | fontsizeselect | forecolor backc
 .sub-details li {
     list-style:none
 } 
+/* 红色背景显示日期 */
+.element_span {
+    display: inline-block;
+    background: #e62412;
+    color: #fff;
+    border-radius: 5px;
+}
 
 </style>
 <style lang="scss" scoped>