3.定时消息发送列表增加字段重复策略，增加每周、每月、每天、每年重复

src/app/views/hushijiandan/hushijiandan.component.ts

@@ -27,11 +27,9 @@ import {
   format,
   getMinutes,
   setMinutes,
-  setSeconds,
   addDays,
   differenceInCalendarDays,
   getHours,
-  getDate,
 } from "date-fns";
 // 日期禁用
 function range(start: number, end: number): number[] {

src/app/views/timing-message-sending/timing-message-sending.component.html

@@ -12,10 +12,11 @@
             <th nzWidth="5%">序号</th>
             <th nzWidth="10%">标题</th>
             <th nzWidth="25%">发送内容</th>
+            <th nzWidth="10%">重复策略</th>
             <th nzWidth="15%">定时发送时间</th>
             <th nzWidth="10%">状态</th>
             <th nzWidth="10%">接收人</th>
-            <th nzWidth="25%">操作</th>
+            <th nzWidth="15%">操作</th>
           </tr>
         </thead>
         <tbody>
@@ -23,7 +24,18 @@
             <td>{{ i+1 }}</td>
             <td>{{ data.title }}</td>
             <td>{{ data.content }}</td>
-            <td>{{ data.executeTime|date:'HH:mm:ss' }}</td>
+            <td [ngSwitch]="data.timeStep">
+              <ng-container *ngSwitchCase="'day'">每日</ng-container>
+              <ng-container *ngSwitchCase="'week'">每周</ng-container>
+              <ng-container *ngSwitchCase="'month'">每月</ng-container>
+              <ng-container *ngSwitchCase="'year'">每年</ng-container>
+            </td>
+            <td [ngSwitch]="data.timeStep">
+              <ng-container *ngSwitchCase="'day'">{{ data.executeTime|date:'HH时mm分' }}</ng-container>
+              <ng-container *ngSwitchCase="'week'">{{data.weekName}} {{ data.executeTime|date:'HH时mm分' }}</ng-container>
+              <ng-container *ngSwitchCase="'month'">{{data.extra1}}日 {{ data.executeTime|date:'HH时mm分' }}</ng-container>
+              <ng-container *ngSwitchCase="'year'">{{ data.executeTime|date:'MM月dd日HH时mm分' }}</ng-container>
+            </td>
             <td>{{ data.active?'开启':'关闭' }}</td>
             <td>{{ data.usersName }}</td>
             <td>
@@ -60,20 +72,50 @@
             </nz-form-control>
           </nz-form-item>
           <nz-form-item>
-            <nz-form-label [nzSm]="24" [nzXs]="24" nzRequired nzFor="xxx">重复策略</nz-form-label>
+            <nz-form-label [nzSm]="24" [nzXs]="24" nzRequired nzFor="timeStep">重复策略</nz-form-label>
             <nz-form-control nzErrorTip="请选择重复策略!">
-              <nz-radio-group formControlName="xxx">
-                <label nz-radio [nzValue]="1">每天</label>
-                <label nz-radio [nzValue]="2">每周</label>
-                <label nz-radio [nzValue]="3">每月</label>
-                <label nz-radio [nzValue]="4">每年</label>
+              <nz-radio-group formControlName="timeStep" (ngModelChange)="timeStepChange($event)">
+                <label nz-radio nzValue="day">每天</label>
+                <label nz-radio nzValue="week">每周</label>
+                <label nz-radio nzValue="month">每月</label>
+                <label nz-radio nzValue="year">每年</label>
               </nz-radio-group>
             </nz-form-control>
           </nz-form-item>
+          <nz-form-item *ngIf="validateForm.value.timeStep == 'week'">
+            <nz-form-label [nzSm]="24" [nzXs]="24" nzRequired nzFor="doWeek">计划执行周（每周）</nz-form-label>
+            <nz-form-control nzErrorTip="请选择周!">
+              <nz-select formControlName="doWeek" nzPlaceHolder="请选择周">
+                <nz-option nzValue="1" nzLabel="周一"></nz-option>
+                <nz-option nzValue="2" nzLabel="周二"></nz-option>
+                <nz-option nzValue="3" nzLabel="周三"></nz-option>
+                <nz-option nzValue="4" nzLabel="周四"></nz-option>
+                <nz-option nzValue="5" nzLabel="周五"></nz-option>
+                <nz-option nzValue="6" nzLabel="周六"></nz-option>
+                <nz-option nzValue="7" nzLabel="周日"></nz-option>
+              </nz-select>
+            </nz-form-control>
+          </nz-form-item>
+          <nz-form-item *ngIf="validateForm.value.timeStep == 'month'">
+            <nz-form-label [nzSm]="24" [nzXs]="24" nzRequired nzFor="doMonth">计划执行（每月）</nz-form-label>
+            <nz-form-control nzErrorTip="请选择日!">
+              <nz-select formControlName="doMonth" nzPlaceHolder="请选择日">
+                <nz-option nzValue="{{item}}" nzLabel="{{item}}号" *ngFor="let item of months">
+                </nz-option>
+              </nz-select>
+            </nz-form-control>
+          </nz-form-item>
+          <nz-form-item *ngIf="validateForm.value.timeStep == 'year'">
+            <nz-form-label [nzSm]="24" [nzXs]="24" nzRequired nzFor="doYear">计划执行（每年）</nz-form-label>
+            <nz-form-control nzErrorTip="请选择月日!">
+              <nz-date-picker nzFormat="MM-dd" formControlName="doYear" nzPlaceHolder="请选择月日"></nz-date-picker>
+            </nz-form-control>
+          </nz-form-item>
           <nz-form-item>
             <nz-form-label [nzSm]="24" [nzXs]="24" nzRequired nzFor="executeTime">定时发送时间</nz-form-label>
             <nz-form-control nzErrorTip="请选择定时发送时间!">
-              <nz-time-picker class="executeTime" formControlName="executeTime" nzPlaceHolder="请选择定时发送时间">
+              <nz-time-picker nzFormat="HH:mm" class="executeTime" formControlName="executeTime"
+                nzPlaceHolder="请选择定时发送时间" [nzAllowEmpty]="false">
               </nz-time-picker>
             </nz-form-control>
           </nz-form-item>

src/app/views/timing-message-sending/timing-message-sending.component.less

@@ -6,6 +6,9 @@
   .ant-calendar-picker {
   width: 100% !important;
 }
+::ng-deep .ant-calendar-picker-input {
+  width: 410px !important;
+}
 
 .save {
   position: fixed;

src/app/views/timing-message-sending/timing-message-sending.component.ts

@@ -1,11 +1,17 @@
 import { Component, OnInit, ViewChild } from "@angular/core";
 import { ActivatedRoute } from "@angular/router";
-import { FormBuilder, Validators, FormGroup } from "@angular/forms";
+import {
+  FormBuilder,
+  Validators,
+  FormGroup,
+  FormControl,
+} from "@angular/forms";
 
 import { MainService } from "../../services/main.service";
 import { OverlayScrollbarsComponent } from "overlayscrollbars-ngx";
 import { ToolService } from "../../services/tool.service";
 import { NzMessageService } from "ng-zorro-antd";
+import { format } from "date-fns";
 @Component({
   selector: "app-timing-message-sending",
   templateUrl: "./timing-message-sending.component.html",
@@ -141,6 +147,18 @@ export class TimingMessageSendingComponent implements OnInit {
         if (data.status == 200) {
           this.listOfData = data.list;
           this.listOfData.forEach((item) => {
+            if (item.timeStep == "week") {
+              let weeks = [
+                "周一",
+                "周二",
+                "周三",
+                "周四",
+                "周五",
+                "周六",
+                "周日",
+              ];
+              item.weekName = weeks[item.extra1 - 1];
+            }
             item.usersName = item.users.map((value) => value.name).join();
           });
           this.listLength = data.totalNum;
@@ -156,12 +174,47 @@ export class TimingMessageSendingComponent implements OnInit {
   initForm() {
     this.validateForm = this.fb.group({
       title: [null, [Validators.required]], //标题
-      xxx: [1, [Validators.required]], //重复策略
+      timeStep: ["day", [Validators.required]], //重复策略
       executeTime: [null, [Validators.required]], //定时发送时间
       active: [false, [Validators.required]], //是否启用
       userIds: [null, [Validators.required]], //接收人
     });
   }
+  //修改重复策略
+  months = [...Array(32).keys()].slice(1);
+  timeStepChange(e) {
+    switch (e) {
+      case "day":
+        this.validateForm.removeControl("doWeek");
+        this.validateForm.removeControl("doMonth");
+        this.validateForm.removeControl("doYear");
+        break;
+      case "week":
+        this.validateForm.addControl(
+          "doWeek",
+          new FormControl(null, Validators.required)
+        );
+        this.validateForm.removeControl("doMonth");
+        this.validateForm.removeControl("doYear");
+        break;
+      case "month":
+        this.validateForm.addControl(
+          "doMonth",
+          new FormControl(null, Validators.required)
+        );
+        this.validateForm.removeControl("doWeek");
+        this.validateForm.removeControl("doYear");
+        break;
+      case "year":
+        this.validateForm.addControl(
+          "doYear",
+          new FormControl(null, Validators.required)
+        );
+        this.validateForm.removeControl("doWeek");
+        this.validateForm.removeControl("doMonth");
+        break;
+    }
+  }
 
   // 表单提交
   submitForm(): void {
@@ -174,7 +227,7 @@ export class TimingMessageSendingComponent implements OnInit {
       this.btnLoading = false;
       return;
     }
-    let postData = {
+    let postData: any = {
       title: this.validateForm.value.title,
       executeTime: new Date(this.validateForm.value.executeTime).getTime(),
       userIds: this.validateForm.value.userIds.join(),
@@ -182,7 +235,22 @@ export class TimingMessageSendingComponent implements OnInit {
       content: this.dataContent.content,
       key: this.dataContent.key,
       id: this.dataContent.id,
+      timeStep: this.validateForm.value.timeStep,
     };
+    if (this.validateForm.value.timeStep == "day") {
+      delete postData.extra1;
+    } else if (this.validateForm.value.timeStep == "week") {
+      postData.extra1 = this.validateForm.value.doWeek;
+    } else if (this.validateForm.value.timeStep == "month") {
+      postData.extra1 = this.validateForm.value.doMonth;
+    } else if (this.validateForm.value.timeStep == "year") {
+      delete postData.extra1;
+      postData.executeTime = new Date(
+        format(this.validateForm.value.doYear, "yyyy-MM-dd") +
+          " " +
+          format(new Date(this.validateForm.value.executeTime), "HH:mm:ss")
+      ).getTime();
+    }
     this.mainService
       .simplePost("updData", "messageJob", postData)
       .subscribe((data) => {
@@ -205,6 +273,17 @@ export class TimingMessageSendingComponent implements OnInit {
     this.validateForm.controls.executeTime.setValue(new Date(data.executeTime)); //定时发送时间
     this.validateForm.controls.title.setValue(data.title); //标题
     this.validateForm.controls.active.setValue(data.active); //是否启用
+    this.timeStepChange(data.timeStep);
+    this.validateForm.controls.timeStep.setValue(data.timeStep); //重复策略
+    if (data.timeStep == "year") {
+      this.validateForm.controls.doYear.setValue(
+        format(data.executeTime, "yyyy-MM-dd HH:mm:ss")
+      );
+    } else if (data.timeStep == "month") {
+      this.validateForm.controls.doMonth.setValue(data.extra1);
+    } else if (data.timeStep == "week") {
+      this.validateForm.controls.doWeek.setValue(data.extra1);
+    }
     // --------接收人---
     this.maskFlag = this.message.loading("正在加载中..", {
       nzDuration: 0,