合同列表添加快到期颜色提醒

src/views/modules/plugins/rent/rentcontractinfo.vue

@@ -112,14 +112,13 @@
           <el-form-item label="承租人" label-width="100px">
               <el-input v-model="dataForm.lesseeName" placeholder='承租人' clearable @keyup.native="btKeyUpLesseeName"></el-input>
           </el-form-item>
-        <el-form-item label="承租人身份证" label-width="100px">
-          <el-input v-model="dataForm.lesseeIdCard" placeholder='承租人身份证' clearable @keyup.native="btKeyUpLesseeIdCard"></el-input>
-        </el-form-item>
-        <el-form-item label="承租人手机号" label-width="100px">
-          <el-input v-model="dataForm.lesseeMobile" placeholder='承租人手机号' clearable @keyup.native="btKeyUpLesseeMobile"></el-input>
-        </el-form-item>
-        <br/>
-
+          <el-form-item label="承租人身份证" label-width="100px">
+            <el-input v-model="dataForm.lesseeIdCard" placeholder='承租人身份证' clearable @keyup.native="btKeyUpLesseeIdCard"></el-input>
+          </el-form-item>
+          <el-form-item label="承租人手机号" label-width="100px">
+            <el-input v-model="dataForm.lesseeMobile" placeholder='承租人手机号' clearable @keyup.native="btKeyUpLesseeMobile"></el-input>
+          </el-form-item>
+          <br/>
           <el-form-item label="合同到期时间" prop="endDate" label-width="100px">
               <el-select v-model="dataForm.endDate" placeholder="合同到期时间" clearable>
                   <el-option v-for="item in endDateArr" :key="item.dictValue" :label="item.dictName" :value="item.dictValue">
@@ -155,7 +154,8 @@
       </el-form>
       </el-card>
       <el-card class="resi-card-table">
-      <el-table class="resi-table" v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" style="width: 100%">
+      <el-table class="resi-table" v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle"
+                style="width: 100%" :row-class-name="tableRowClassName">
         <el-table-column label="序号" header-align="center" align="center" width="50px">
           <template slot-scope="scope">
             {{scope.$index+1}}
@@ -167,9 +167,6 @@
             {{scope.row.villageName}}{{scope.row.buildName}}{{scope.row.unitName}}{{scope.row.homeName}}
           </template>
         </el-table-column>
-<!--        <el-table-column prop="buildName" label="楼号" header-align="center" align="center"></el-table-column>-->
-<!--        <el-table-column prop="unitName" label="单元" header-align="center" align="center"></el-table-column>-->
-<!--        <el-table-column prop="homeName" label="房屋" header-align="center" align="center"></el-table-column>-->
         <el-table-column prop="lessorName" label="出租人" header-align="center" align="center"></el-table-column>
         <el-table-column prop="lessorMobile" label="手机号" header-align="center" align="center"></el-table-column>
         <el-table-column prop="lesseeName" label="承租人" header-align="center" align="center"></el-table-column>
@@ -279,6 +276,21 @@ export default {
     }
   },
   methods: {
+      tableRowClassName({row, rowIndex}) {
+          var endDate = row.endDate
+          var days = this.divTime(new Date(),endDate)
+          if (days <= 30) {
+              return 'warning-row';
+          }
+          return '';
+      },
+      // 计算两时间相差天数
+      divTime(startTime,endTime){
+          startTime = Date.parse(new Date(startTime))
+          endTime = Date.parse(new Date(endTime))
+          return Math.abs(parseInt((endTime - startTime) / 1000 / 3600 / 24));
+
+      },
       // 新增 / 修改
       addOrUpdateHandle (id,flag) {
           this.addOrUpdateVisible = true
@@ -494,3 +506,9 @@ export default {
     white-space: nowrap;
   }
 </style>
+
+<style>
+  .el-table .warning-row {
+    background: #ffe168;
+  }
+</style>