剩余时间

src/views/task/list/index.vue

@@ -120,6 +120,19 @@
           <el-table-column prop="taskAddrRoad" label="道路名" />
           <el-table-column prop="taskContent" label="任务内容" />
           <el-table-column prop="taskTime" label="来件时间" />
+           <el-table-column prop="taskTime" label="剩余时间" >
+              <template #default="scope"><div>
+                <div v-if="scope.row.taskReqCompleteTime!=null && scope.row.status<5" :class="moment(scope.row.taskReqCompleteTime).diff(moment(),'days')<2?'tip-e':(moment(scope.row.taskReqCompleteTime).diff(moment(),'days')<3?'tip-w':(moment(scope.row.taskReqCompleteTime).diff(moment(),'days')>5?'tip-i':''))">
+                   <el-icon style="vertical-align: middle;"><Clock /></el-icon> <span> {{ moment(scope.row.taskReqCompleteTime).diff(moment(),'days')}}天</span>
+
+                 </div>
+                 <div v-if="scope.row.taskReqCompleteTime==null">
+                  -
+                 </div>
+
+                </div>
+              </template>
+           </el-table-column>
           <el-table-column prop="address" label="操作">
             <template #default="scope">
               <el-button text size="small" @click.stop="edittask(scope.row)"
@@ -199,6 +212,7 @@ import {
 import { cloneDeep } from "lodash";
 import { isArray } from "@vue/shared";
 import { useRoute } from "vue-router";
+import moment from "moment";
 
 const formlocation = ref({ addr: "", locations: "" });
 
@@ -367,6 +381,15 @@ onMounted(() => {});
   .eltable {
     border: 1px solid #e5e9f2;
     border-radius: 5px;
+    .tip-e{
+      color:red;
+    }
+    .tip-w{
+      color:yellow;
+    }
+    .tip-i{
+      color:green;
+    }
   }
 }
 </style>