表格内日期比较计算

需求：在表格中新增数据，计算开始日期中最早的和结束日期中最晚的，回显到下方。

  <el-form
    ref="formRef"
     :model="ruleForm"
     :rules="rules"
     style="margin-top: 20px;"
     label-position="top"
   >
	<el-button style="margin:10px 0" :disabled="disabledEdit" @click="handleAddList">新增el-button>
	
	<el-table :data="ruleForm.tableData" border style="width: 100%">
	  <el-table-column label="">
	    <template slot="header">
	      <span class="required">*span>
	      开始日期
	    template>
	    <template slot-scope="scope">
	      <el-form-item :prop="'tableData.' + scope.$index + '.startDate'" :rules="[{required: true, row:scope.row, validator:validStartDate, trigger: 'change'}]" label="">
	        <el-date-picker
	          v-model="scope.row.startDate"
	          :disabled="disabledEdit"
	          type="date"
	          value-format="yyyy-MM-dd"
	          placeholder="选择日期"
	          @change="handleStartDate(scope.$index)"
	          style="width: 100%;">
	        el-date-picker>
	      el-form-item>
	    template>
	  el-table-column>
	  <el-table-column label="">
	    <template slot="header">
	      <span class="required">*span>
	      结束日期
	    template>
	    <template slot-scope="scope">
	      <el-form-item :prop="'tableData.' + scope.$index + '.endDate'" :rules="[{required: true, row:scope.row, validator:validEndDate, trigger: 'change'}]" label="">
	        <el-date-picker
	          v-model="scope.row.endDate"
	          :disabled="disabledEdit"
	          type="date"
	          value-format="yyyy-MM-dd"
	          placeholder="选择日期"
	          @change="handleEndDate(scope.$index)"
	          style="width: 100%;">
	        el-date-picker>
	      el-form-item>
	    template>
	  el-table-column>
	  
	  
	  <el-table-column label="操作" width="80">
	    <template slot-scope="scope">
	      <el-form-item label="">
	        <el-button
	          size="mini"
	          type="text"
	          :disabled="disabledEdit"
	          class="required"
	          @click.stop="handleDelTable(scope.$index)"
	        >删除
	        el-button>
	      el-form-item>
	    template>
	  el-table-column>
	el-table>
	
	<section>
	   <el-form-item label="开始时间">
	     {{ ruleForm.startDate?.substring?.(0,10) }}
	   el-form-item>
	   <el-form-item label="结束时间">
	     {{ ruleForm.endDate?.substring?.(0,10) }}
	   el-form-item>
	 section>
  el-form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

  data() {
    return {
      ruleForm: {
        tableData: [],
        startDate:"",
        endDate:"",
      },
      rules:[],
    }
  },
  methods: {
    //开始日期
    validStartDate(rule, value, callback) {
      let row = rule.row
      if(!row.startDate) {
        callback(new Error("开始日期不能为空"))
      } else if(row.endDate&&value&&new Date(value) > new Date(row.endDate)) {
        callback(new Error("开始日期不能大于结束日期"))
      }else{
        callback()
      }
    },
    //结束日期
    validEndDate(rule, value, callback) {
      let row = rule.row
      if(!row.endDate) {
        callback(new Error("结束日期不能为空"))
      } else if(row.startDate&&value&&new Date(row.startDate) > new Date(value)) {
        callback(new Error("结束日期不能小于开始日期"))
      }else{
        callback()
      }
    },
    // 日期大小比较
    compare(attr, rev) {
      rev = (rev || typeof rev === 'undefined') ? 1 : -1;
      return (a, b) => {
        a = a[attr];
        b = b[attr];
        if (a < b) { return rev * -1; }
        if (a > b) { return rev * 1; }
        return 0;
      };
    },
    handleStartDate(i) {
      if(!this.ruleForm.tableData.length) {
        this.ruleForm.startDate = ''
      } else {
        let arr = this.ruleForm.tableData.filter(item=>{
          return item.startDate !== null
        })
        const DESC = arr.sort(this.compare("startDate", true)); // 降序
        this.ruleForm.startDate = !arr.length ? '' : this.newDate(DESC[0].startDate)
        this.$refs.formRef.validateField('tableData.' + i + '.endDate');
      }
    },
    handleEndDate(i) {
      if(!this.ruleForm.tableData.length) {
        this.ruleForm.endDate = ''
      } else {
        let arr = this.ruleForm.tableData.filter(item=>{
          return item.endDate !== null
        })
        const DESC = arr.sort(this.compare("endDate", false)); // 降序
        this.ruleForm.endDate = !arr.length ? '' : this.newDate(DESC[0].endDate)
        this.$refs.formRef.validateField('tableData.' + i + '.startDate');
      }
    },
    // 中国标准时间转为年月日
    newDate(time) {
      var date = new Date(time)
      var y = date.getFullYear()
      var m = date.getMonth() + 1
      m = m < 10 ? '0' + m : m
      var d = date.getDate()
      d = d < 10 ? '0' + d : d
      return y + '-' + m + '-' + d
    },
    // 新增
    handleAddList() {
      this.ruleForm.tableData.push({
        id: this.$route.query.id * 1,
        content: '', 
        startDate: '', 
        endDate: '', 
        responsible: '',
      })
    },
    // 删除
    handleDelTable(index) {
      this.ruleForm.tableData.splice(index,1 )
      this.handleStartDate()
      this.handleEndDate()
    },    
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95