暂提

src/app/views/new-statistics/components/custom-change-date/custom-change-date.component.html

@@ -0,0 +1,33 @@
+<div class="customChangeDate">
+  <div class="searchDataItem">
+    <nz-radio-group [(ngModel)]="dateType" (ngModelChange)="changeDateType($event)">
+      <label *ngFor="let data of dateTypes" nz-radio-button [nzValue]="data.value">{{data.label}}</label>
+    </nz-radio-group>
+  </div>
+  <div class="searchDataItem">
+    <span class="label">建单时间</span>：
+    <nz-range-picker *ngIf="dateType=='day'" [(ngModel)]="dateRange" [nzAllowClear]='false'
+      [nzDisabledDate]="disabledDate" (ngModelChange)="changeDate($event)">
+    </nz-range-picker>
+    <nz-month-picker *ngIf="dateType=='month'" [(ngModel)]="monthRangeStart" [nzDisabledDate]="disabledMonthStart"
+      (ngModelChange)="changeMonthStart($event)" nzPlaceHolder="请选择开始月份">
+    </nz-month-picker>
+    <span *ngIf="dateType=='month'"> ~ </span>
+    <nz-month-picker *ngIf="dateType=='month'" [(ngModel)]="monthRangeEnd" [nzDisabledDate]="disabledMonthEnd"
+      (ngModelChange)="changeMonthEnd($event)" nzPlaceHolder="请选择截止月份">
+    </nz-month-picker>
+    <nz-year-picker *ngIf="dateType=='year'" [(ngModel)]="yearRangeStart" [nzDisabledDate]="disabledYearStart"
+      (ngModelChange)="changeYearStart($event)" nzPlaceHolder="请选择开始年份">
+    </nz-year-picker>
+    <span *ngIf="dateType=='year'"> ~ </span>
+    <nz-year-picker *ngIf="dateType=='year'" [(ngModel)]="yearRangeEnd" (ngModelChange)="changeYearEnd($event)"
+      [nzDisabledDate]="disabledYearEnd" nzPlaceHolder="请选择截止年份">
+    </nz-year-picker>
+  </div>
+  <div class="searchDataItem ml8">
+    <nz-select class="formItem" [ngStyle]="{width: '92px'}" [nzDropdownMatchSelectWidth]="false" [nzShowSearch]="false"
+      nzPlaceHolder="请选择时间" [(ngModel)]="defRange" (ngModelChange)="changeDateRange($event)">
+      <nz-option nzLabel="{{data.label}}" nzValue="{{data.id}}" *ngFor="let data of defRanges"></nz-option>
+    </nz-select>
+  </div>
+</div>

src/app/views/new-statistics/components/custom-change-date/custom-change-date.component.less

@@ -0,0 +1,15 @@
+.customChangeDate{
+  display: flex;
+  align-items: center;
+  margin-right: 24px;
+  .searchDataItem{
+    margin-left: 16px;
+    &:last-of-type{
+      margin-left: 0;
+    }
+    .label{
+      font-size: 16px;
+    }
+  }
+}
+

src/app/views/new-statistics/components/custom-change-date/custom-change-date.component.ts

@@ -0,0 +1,268 @@
+import { Component, OnInit, Output, Input } from '@angular/core';
+import { EventEmitter } from '@angular/core';
+import { differenceInCalendarDays, endOfMonth, endOfYear, startOfDay, format, endOfDay, startOfMonth, startOfYear } from "date-fns";
+import { DateService } from 'src/app/services/date.service';
+
+@Component({
+  selector: 'app-custom-change-date',
+  templateUrl: './custom-change-date.component.html',
+  styleUrls: ['./custom-change-date.component.less']
+})
+export class CustomChangeDateComponent implements OnInit {
+  @Output() customChangeDateEmit = new EventEmitter();
+  @Input() queryType: number;
+  constructor(
+    private dateService: DateService,
+  ) { }
+
+  dateType: string = "day"; //选中时间维度
+  dateTypes: any = [
+    {
+      label: "按天",
+      value: "day",
+    },
+    {
+      label: "按月",
+      value: "month",
+    },
+    {
+      label: "按年",
+      value: "year",
+    },
+  ]; //时间维度
+  defRange = "1"; //默认上周
+  defRanges = [
+    {
+      label: "上周",
+      id: 1,
+    },
+    {
+      label: "上月",
+      id: 2,
+    },
+    {
+      label: "上年",
+      id: 3,
+    },
+  ]; //时间默认区间
+
+  dateRange: any = []; //发起时间区间 天
+  monthRangeStart: any; //发起时间 月 起
+  monthRangeEnd: any; //发起时间 月 止
+  yearRangeStart: any; //发起时间 年 起
+  yearRangeEnd: any; //发起时间 年 止
+
+  ngOnInit() {}
+
+  // this.customChangeDateEmit.emit({queryType, hospital, duty, parent});
+
+  // 修改时间展示维度
+  changeDateType(res) {
+    console.log(res, this.dateType);
+    this.dateType = res;
+    switch (res) {
+      case "day":
+        this.defRanges = [
+          {
+            label: "上周",
+            id: 1,
+          },
+          {
+            label: "上月",
+            id: 2,
+          },
+          {
+            label: "上年",
+            id: 3,
+          },
+        ]; //时间默认区间
+        this.defRange = "1"; //默认上周
+        this.changeDateRange("1");
+        break;
+      case "month":
+        this.defRanges = [
+          {
+            label: "上月",
+            id: 2,
+          },
+          {
+            label: "上年",
+            id: 3,
+          },
+        ]; //时间默认区间
+        this.defRange = "2"; //上月
+        this.changeDateRange("2");
+        break;
+      case "year":
+        this.defRanges = [
+          {
+            label: "上年",
+            id: 3,
+          },
+        ]; //时间默认区间
+        this.defRange = "3"; //默认上周
+        this.changeDateRange("3");
+        break;
+    }
+  }
+
+  // 禁选日期
+  disabledDate = (current: Date): boolean => {
+    // Can not select days before today and today
+    return differenceInCalendarDays(current, this.today) > 0;
+  };
+
+  // 禁选月份开始
+  disabledMonthStart = (current: Date): boolean => {
+    // Can not select days before today and today
+    let cur = differenceInCalendarDays(current, endOfMonth(this.today)) > 0;
+    let staEnd = differenceInCalendarDays(current, this.monthRangeEnd) > 0;
+    return cur || staEnd;
+  };
+  // 禁选月份结束
+  disabledMonthEnd = (current: Date): boolean => {
+    // Can not select days before today and today
+    let cur = differenceInCalendarDays(current, endOfMonth(this.today)) > 0;
+    let staEnd = differenceInCalendarDays(this.monthRangeStart, current) > 0;
+    return cur || staEnd;
+  };
+
+  // 禁选年份开始
+  disabledYearStart = (current: Date): boolean => {
+    // Can not select days before today and today
+    let cur = differenceInCalendarDays(current, endOfYear(this.today)) > 0;
+    let staEnd = differenceInCalendarDays(current, this.yearRangeEnd) > 0;
+    return cur || staEnd;
+  };
+
+  // 禁选年份结束
+  disabledYearEnd = (current: Date): boolean => {
+    // Can not select days before today and today
+    let cur = differenceInCalendarDays(current, endOfYear(this.today)) > 0;
+    let staEnd = differenceInCalendarDays(this.yearRangeStart, current) > 0;
+    return cur || staEnd;
+  };
+
+  // 日期选择 日
+  startDate: string; //发起时间开始
+  endDate: string; //发起时间结束
+  changeDate(result?): void {
+    console.log(this.dateRange);
+    console.log(result);
+    this.dateRange = result;
+    if (!this.quick) {
+      // 不是快捷选择
+      this.defRange = null;
+    }
+    if (!result || !result.length) {
+      this.startDate = this.endDate = "";
+      return;
+    }
+    this.startDate =
+      result[0].getFullYear() +
+      "-" +
+      (result[0].getMonth() + 1) +
+      "-" +
+      result[0].getDate();
+    this.endDate =
+      result[1].getFullYear() +
+      "-" +
+      (result[1].getMonth() + 1) +
+      "-" +
+      result[1].getDate();
+  }
+
+  // 月份选择
+  changeMonthStart(result?) {
+    console.log(result);
+    this.monthRangeStart = result;
+    if (!this.quick) {
+      // 不是快捷选择
+      this.defRange = null;
+    }
+    if (!result) {
+      this.startDate = this.endDate = "";
+      return;
+    }
+    this.startDate = format(startOfMonth(result), 'yyyy-MM-dd');
+  }
+  changeMonthEnd(result?) {
+    console.log(result);
+    this.monthRangeEnd = result;
+    if (!this.quick) {
+      // 不是快捷选择
+      this.defRange = null;
+    }
+    if (!result) {
+      this.startDate = this.endDate = "";
+      return;
+    }
+    this.endDate = format(endOfMonth(result), 'yyyy-MM-dd');
+  }
+  // 年份选择
+  changeYearStart(result?) {
+    console.log(result);
+    this.yearRangeStart = result;
+    if (!this.quick) {
+      // 不是快捷选择
+      this.defRange = null;
+    }
+    if (!result) {
+      this.startDate = this.endDate = "";
+      return;
+    }
+    this.startDate = format(startOfYear(result), 'yyyy-MM-dd');
+    // this.endDate = result.getFullYear() + '-01-01';
+  }
+  changeYearEnd(result?) {
+    console.log(result);
+    this.yearRangeEnd = result;
+    if (!this.quick) {
+      // 不是快捷选择
+      this.defRange = null;
+    }
+    if (!result) {
+      this.startDate = this.endDate = "";
+      return;
+    }
+    this.endDate = format(endOfYear(result), 'yyyy-MM-dd');
+  }
+
+  // 日期选择 快速修改时间区间
+  today = new Date();
+  quick: boolean = false;
+  changeDateRange(res) {
+    console.log(res);
+    this.quick = true;
+    switch (res) {
+      case "1":
+        // 上周
+        let lastweekstartdate = this.dateService.date().lastWeekStartDate;
+        let lastweekenddate = this.dateService.date().lastWeekEndDate;
+        console.log(lastweekstartdate, lastweekenddate);
+        this.changeDate([lastweekstartdate, lastweekenddate]);
+        break;
+      case "2":
+        // 上月
+        let lastmonthstartdate = this.dateService.date().lastMonthStartDate;
+        let lastmonthenddate = this.dateService.date().lastMonthEndDate;
+        console.log(lastmonthstartdate, lastmonthenddate);
+        this.changeDate([lastmonthstartdate, lastmonthenddate]);
+        this.changeMonthStart(lastmonthstartdate);
+        this.changeMonthEnd(lastmonthenddate);
+        break;
+      case "3":
+        // 上年
+        let lastyearstartdate = this.dateService.date().lastYearStartDate;
+        let lastyearenddate = this.dateService.date().lastYearEndDate;
+        console.log(lastyearstartdate, lastyearenddate);
+        this.changeDate([lastyearstartdate, lastyearenddate]);
+        this.changeMonthStart(lastyearstartdate);
+        this.changeMonthEnd(lastyearenddate);
+        this.changeYearStart(lastyearstartdate);
+        this.changeYearEnd(lastyearenddate);
+        break;
+    }
+    this.quick = false;
+  }
+}

src/app/views/new-statistics/components/custom-change-date/custom-change-date.module.ts

@@ -0,0 +1,20 @@
+import { CustomChangeDateComponent } from './custom-change-date.component';
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { ShareModule } from 'src/app/share/share.module';
+
+
+@NgModule({
+  declarations: [
+    CustomChangeDateComponent,
+  ],
+  imports: [
+    CommonModule,
+    ShareModule,
+  ],
+  exports: [
+    CustomChangeDateComponent,
+  ]
+})
+export class CustomChangeDateModule { }

src/app/views/new-statistics/phone-statistics/date-phone-statistics/date-phone-statistics.component.html

@@ -1,10 +1,11 @@
 <div class="searchDataWrap">
   <div class="searchData">
-    <div class="searchDataItem">
+    <app-custom-change-date (customChangeDateEmit)="customChangeDateEmit($event)"></app-custom-change-date>
+    <!-- <div class="searchDataItem">
       <span class="label">建单时间</span>：
       <nz-range-picker [(ngModel)]="dateRange" [nzAllowClear]="false" (ngModelChange)="changeDate($event)" (nzOnCalendarChange)="onCalendarChangeDate($event)">
       </nz-range-picker>
-    </div>
+    </div> -->
     <div class="searchDataItem">
       <span class="label">统计分类</span>：
       <nz-select class="selectItem" [nzDropdownMatchSelectWidth]="false" nzAllowClear nzPlaceHolder="请选择统计分类" [(ngModel)]="statisticsTypeId" (nzOpenChange)="openChangeStatisticsType($event)">

src/app/views/new-statistics/phone-statistics/date-phone-statistics/date-phone-statistics.component.less

@@ -27,7 +27,7 @@
           font-size: 16px;
         }
         .selectItem{
-          width: 224px;
+          width: 160px;
         }
       }
     }

src/app/views/new-statistics/phone-statistics/date-phone-statistics/date-phone-statistics.component.ts

@@ -44,6 +44,8 @@ export class DatePhoneStatisticsComponent implements OnInit, AfterViewInit {
     }, 0)
   }
 
+  customChangeDateEmit(){}
+
   getQueryParams(){
     let queryParams = this.tabService.getQueryParams();
     this.tabService.clearQueryParams();

src/app/views/new-statistics/phone-statistics/date-phone-statistics/date-phone-statistics.module.ts

@@ -6,6 +6,7 @@ import { DatePhoneStatisticsRoutingModule } from './date-phone-statistics-routin
 import { ShareModule } from 'src/app/share/share.module';
 import { VirtualScrollerModule } from 'ngx-virtual-scroller';
 import { PhoneSearchMoreModule } from '../../components/phone-search-more/phone-search-more.module';
+import { CustomChangeDateModule } from '../../components/custom-change-date/custom-change-date.module';
 
 
 @NgModule({
@@ -18,6 +19,7 @@ import { PhoneSearchMoreModule } from '../../components/phone-search-more/phone-
     ShareModule,
     VirtualScrollerModule,
     PhoneSearchMoreModule,
+    CustomChangeDateModule,
   ]
 })
 export class DatePhoneStatisticsModule { }