bbj-screen-widget 2.4.45 → 2.4.46

package/src/lib/date-picker/date-picker.component.html

@@ -0,0 +1,32 @@
+<ng-container *ngIf="!rangeMode">
+  <nz-date-picker
+    [nzDisabled]="disabled"
+    [nzMode]="selectMode"
+    [(ngModel)]="date"
+    [nzFormat]="dateFormat"
+    (ngModelChange)="onChange(date, true)"
+    class="demo-picker"
+    [nzPlaceHolder]="alert"
+    [ngStyle]="datePickerStyle"
+    [nzShowTime]="nzShowTime"
+    [nzDisabledDate]="nzDisabledDate"
+    [nzAllowClear]="allowClear !== false"
+  >
+  </nz-date-picker>
+</ng-container>
+<ng-container *ngIf="rangeMode">
+  <nz-range-picker
+    [nzDisabled]="disabled"
+    [nzMode]="selectMode"
+    [(ngModel)]="date"
+    [nzFormat]="dateFormat"
+    (ngModelChange)="onChange(date, true)"
+    class="demo-picker"
+    [nzPlaceHolder]="alert"
+    [ngStyle]="datePickerStyle"
+    [nzShowTime]="nzShowTime"
+    [nzDisabledDate]="nzDisabledDate"
+    [nzAllowClear]="allowClear !== false"
+  >
+  </nz-range-picker>
+</ng-container>

package/src/lib/date-picker/date-picker.component.less

@@ -0,0 +1,20 @@
+:host ::ng-deep {
+  .demo-picker {
+    background-color: unset;
+    height: 32px;
+    width: 100%;
+    color: inherit;
+  }
+  .ant-picker-input>input{
+    color: inherit;
+    font-size: inherit;
+    font-weight: inherit;
+  }
+  .ant-picker-suffix{
+    color: inherit;
+  }
+}
+
+.ant-picker-disabled::ng-deep .ant-picker-suffix{
+  display: none;
+}

package/src/lib/date-picker/date-picker.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { DatePickerComponent } from './date-picker.component';
+
+describe('DatePickerComponent', () => {
+  let component: DatePickerComponent;
+  let fixture: ComponentFixture<DatePickerComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DatePickerComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DatePickerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/date-picker/date-picker.component.ts

@@ -0,0 +1,389 @@
+import { Component, OnInit, OnChanges, SimpleChanges, EventEmitter } from '@angular/core';
+import { DataOutput, Event, Method, Property, Widget, Param, Data, CustomExport, DataInput } from 'bbj-widget-base';
+import {
+  compareAsc,
+  format,
+  addDays,
+  startOfMonth,
+  addMonths,
+  startOfYear,
+  addYears,
+  startOfWeek,
+  addWeeks,
+  startOfDay,
+  parse,
+} from 'date-fns';
+import { SFStringWidgetSchema } from '@delon/form';
+import { NzI18nService } from 'ng-zorro-antd/i18n';
+import { formatDate } from '@angular/common';
+import { DisabledDateFn, SupportTimeOptions } from 'ng-zorro-antd/date-picker';
+import { differenceInCalendarDays } from 'date-fns/fp';
+
+const defaultDateEnum = [
+  { label: '当前', value: 'now' },
+  { label: '今天', value: 'today' },
+  { label: '昨天', value: 'yesterday' },
+  { label: '明天', value: 'tomorrow' },
+  { label: '本月', value: 'thisMonth' },
+  { label: '上个月', value: 'lastMonth' },
+  { label: '下个月', value: 'nextMonth' },
+  { label: '本周', value: 'thisWeek' },
+  { label: '上周', value: 'lastWeek' },
+  { label: '下周', value: 'nextWeek' },
+  { label: '今年', value: 'thisYear' },
+  { label: '去年', value: 'lastYear' },
+  { label: '明年', value: 'nextYear' },
+];
+
+@Component({
+  selector: 'sc-date-picker',
+  templateUrl: './date-picker.component.html',
+  styleUrls: ['./date-picker.component.less'],
+})
+@Widget('日期选择器', {
+  group: 'component',
+  image: 'assets/img/screen/date-picker.png',
+  icon: 'riqi',
+  platform: 'pc',
+})
+export class DatePickerComponent implements OnInit, OnChanges, CustomExport {
+  @Property('边框', {
+    ui: {
+      widget: 'myColor',
+      example: ['#ffffff', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', null],
+    },
+  })
+  borderColor: string;
+  @Property('字体', { ui: { widget: 'myFont' } })
+  font: any = { family: '', weight: 'normal', size: 14, space: 0, lineHeight: '' };
+  @Property('填充', {
+    ui: {
+      widget: 'myColor',
+      example: ['#D0021B', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', null],
+    },
+  })
+  background: string;
+  @Property('背景图片', {
+    type: 'string',
+    ui: {
+      widget: 'myUpload',
+    },
+  })
+  backImage = null;
+  @Property('高度')
+  height: number = 30;
+  @Property('日期格式', {
+    dateFormat: {
+      type: 'string',
+      title: 'max',
+      ui: {} as SFStringWidgetSchema,
+    },
+    required: ['dateFormat'],
+  })
+  dateFormat = '';
+  @Property('开启区间模式')
+  rangeMode: boolean;
+  @Property('默认时间', {
+    type: 'string',
+    enum: defaultDateEnum,
+  })
+  defaultDate: string;
+  @Property('默认结束时间', {
+    type: 'string',
+    enum: defaultDateEnum,
+    ui: { widget: 'select', visibleIf: { rangeMode: [true] } },
+  })
+  defaultEndDate: string;
+  @Property('选择模式', {
+    type: 'string',
+    enum: [
+      { label: '默认', value: '' },
+      { label: '周', value: 'week' },
+      { label: '月份', value: 'month' },
+      { label: '年份', value: 'year' },
+    ],
+  })
+  selectMode: string = '';
+  @Property('显示时间', {
+    type: 'boolean',
+  })
+  showTime = false;
+  @Property('时间格式', {
+    enum: [
+      { label: '时分秒', value: 'HH:mm:ss' },
+      { label: '时分', value: 'HH:mm' },
+      { label: '时', value: 'HH' },
+    ],
+    ui: { widget: 'select', visibleIf: { showTime: [true] } },
+  })
+  timeFormat: string = 'HH:mm:ss';
+  @Property('小时间隔', { ui: { visibleIf: { showTime: [true] } } })
+  hourStep: number;
+  @Property('分钟间隔', { ui: { visibleIf: { timeFormat: ['HH:mm:ss', 'HH:mm'] } } })
+  minuteStep: number;
+  @Property('秒间隔', { ui: { visibleIf: { timeFormat: ['HH:mm:ss'] } } })
+  secondStep: number;
+  @Property('提示语')
+  alert = '请选择日期';
+  @Property('是否禁用')
+  disabled: boolean;
+  @Property('不可选日期', {
+    enum: [
+      { label: '今天之后', value: 'after' },
+      { label: '今天之前', value: 'before' },
+    ],
+  })
+  disabledDate: string;
+  @Property('清除按钮', { type: 'boolean', default: true })
+  allowClear = true;
+
+  @Data({ properties: { date: { title: '日期', type: 'string' }, endDate: { title: '结束日期', type: 'string' } } })
+  data = [];
+  @DataOutput('值')
+  @Event('值改变', { params: { title: '值' } })
+  dateChange = new EventEmitter<any>();
+  @DataOutput('结束')
+  @Event('结束值', { params: { title: '结束值' } })
+  endDateChange = new EventEmitter<any>();
+  @Event('输入', { params: { title: '值' } })
+  inputDate = new EventEmitter<any>();
+  @Event('输入结束时间', { params: { title: '结束值' } })
+  inputEndDate = new EventEmitter<any>();
+  @DataInput('值')
+  date: any;
+  dateRange = [];
+  datePickerStyle: any;
+  nzShowTime: SupportTimeOptions;
+  nzDisabledDate: DisabledDateFn;
+  // isEnglish = false;
+
+  constructor(private i18n: NzI18nService) {}
+
+  ngOnInit(): void {
+    // this.initDefaultDate();
+  }
+
+  /**
+   * {label: '当前', value: 'now'},
+   {label: '昨天', value: 'yesterday'},
+   {label: '明天', value: 'tomorrow'},
+   {label: '本月', value: 'thisMonth'},
+   {label: '上个月', value: 'lastMonth'},
+   {label: '下个月', value: 'nextMonth'},
+   {label: '本周', value: 'thisWeek'},
+   {label: '上个月', value: 'lastWeek'},
+   {label: '下个月', value: 'nextWeek'},
+   {label: '今年', value: 'thisYear'},
+   {label: '去年', value: 'lastYear'},
+   {label: '明年', value: 'nextYear'},
+   */
+  initDefaultDate() {
+    if (this.rangeMode) {
+      const start = this.getDefaultDate(this.defaultDate);
+      const end = this.getDefaultDate(this.defaultEndDate);
+      this.date = [start, end];
+      if (start || end) {
+        this.onChange(this.date);
+      }
+    } else {
+      this.date = this.getDefaultDate(this.defaultDate);
+      if (this.date) {
+        this.onChange(this.date);
+      }
+    }
+  }
+
+  getDefaultDate(defaultDate: string) {
+    if (defaultDate) {
+      const today = new Date();
+      switch (defaultDate) {
+        case 'now':
+          return today;
+        case 'today':
+          return startOfDay(today);
+        case 'yesterday':
+          return addDays(startOfDay(today), -1);
+        case 'tomorrow':
+          return addDays(startOfDay(today), 1);
+        case 'thisMonth':
+          return startOfMonth(today);
+        case 'lastMonth':
+          return addMonths(startOfMonth(today), -1);
+        case 'nextMonth':
+          return addMonths(startOfMonth(today), 1);
+        case 'thisYear':
+          return startOfYear(today);
+        case 'lastYear':
+          return addYears(startOfYear(today), -1);
+        case 'nextYear':
+          return addYears(startOfYear(today), 1);
+        case 'thisWeek':
+          return addDays(startOfWeek(addDays(today, -1)), 1);
+        case 'lastWeek':
+          return addWeeks(addDays(startOfWeek(addDays(today, -1)), 1), -1);
+        case 'nextWeek':
+          return addWeeks(addDays(startOfWeek(addDays(today, -1)), 1), 1);
+      }
+    }
+    return null;
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.dateFormat && !this.dateFormat) {
+      this.setDefaultFormat();
+    }
+    this.datePickerStyle = {
+      borderColor: this.borderColor,
+      backgroundColor: this.background,
+      fontSize: this.font.size + 'px',
+      fontFamily: this.font.family,
+      color: this.font.color,
+      fontWeight: this.font.weight,
+      letterSpacing: this.font.space + 'px',
+      height: this.height + 'px',
+      backgroundSize: '100% 100%',
+      lineHeight: this.font.lineHeight + 'px',
+    };
+    if (this.showTime) {
+      this.nzShowTime = {
+        nzFormat: this.timeFormat || 'HH:mm:ss',
+        nzHourStep: this.hourStep,
+        nzMinuteStep: this.minuteStep,
+        nzSecondStep: this.secondStep,
+      };
+    }
+    if (this.backImage) {
+      this.datePickerStyle.backgroundImage = 'url(' + this.backImage + ')';
+    }
+    if (changes.rangeMode || changes.defaultDate || changes.defaultEndDate) {
+      this.initDefaultDate();
+    }
+    if (changes.data) {
+      this.updateData();
+    }
+    if (changes.disabledDate) {
+      this.updateDisabledDate();
+    }
+    if (changes.value) {
+      if (!this.date) {
+        this.date = null;
+      } else if (typeof this.date === 'string') {
+        this.date = parse(this.date, this.dateFormat, new Date());
+      }
+    }
+  }
+
+  updateDisabledDate() {
+    switch (this.disabledDate) {
+      case 'after':
+        this.nzDisabledDate = (current) => differenceInCalendarDays(current, new Date()) < 0;
+        break;
+      case 'before':
+        this.nzDisabledDate = (current) => differenceInCalendarDays(current, new Date()) > 0;
+        break;
+      default:
+        this.nzDisabledDate = null;
+    }
+  }
+
+  updateData() {
+    if (this.data?.length) {
+      const { date, endDate } = this.data[0];
+      const start = this.getDate(date);
+      if (this.rangeMode) {
+        const end = this.getDate(endDate);
+        if (start || end) {
+          this.date = [start || this.date[0], end || this.date[1]];
+          this.onChange(this.date);
+        }
+      } else {
+        if (start) {
+          this.date = start;
+          this.onChange(this.date);
+        }
+      }
+    }
+  }
+
+  getDate(value: any) {
+    if (value) {
+      return new Date(value);
+    } else {
+      return null;
+    }
+  }
+
+  onChange(result: Date, input?: boolean): void {
+    if (!this.rangeMode) {
+      const date = this.format(this.date);
+      this.dateChange.emit(date);
+      if (input) {
+        this.inputDate.emit(date);
+      }
+    } else {
+      // date=format(this.date[0], this.dateFormat)+'-'+format(this.date[1], this.dateFormat);
+      const start = this.format(this.date[0]);
+      const end = this.format(this.date[1]);
+      this.dateChange.emit(start);
+      this.endDateChange.emit(end);
+      if (input) {
+        this.inputDate.emit(start);
+        this.inputEndDate.emit(end);
+      }
+    }
+  }
+
+  format(date: Date) {
+    if (date) {
+      return formatDate(date, this.dateFormat, this.i18n.getLocaleId());
+    } else {
+      return null;
+    }
+  }
+
+  setDefaultFormat() {
+    switch (this.selectMode) {
+      case 'week':
+        this.dateFormat = 'yyyy-ww';
+        break;
+      case 'month':
+        // console.log(today);
+        this.dateFormat = 'yyyy-MM';
+        break;
+      case 'year':
+        this.dateFormat = 'yyyy';
+        break;
+      default:
+        if (this.showTime) {
+          this.dateFormat = 'yyyy-MM-dd HH:mm:ss';
+          if (this.timeFormat) {
+            switch (this.timeFormat) {
+              case 'HH':
+                this.dateFormat = 'yyyy-MM-dd HH:00:00';
+                break;
+              case 'HH:mm':
+                this.dateFormat = 'yyyy-MM-dd HH:mm:00';
+                break;
+            }
+          }
+        } else {
+          this.dateFormat = 'yyyy-MM-dd';
+        }
+        break;
+    }
+  }
+  @Method('设置值')
+  setValue(@Param('值') value: Date) {
+    this.date = value;
+    this.onChange(value);
+  }
+
+  // changeLanguage(): void {
+  //   this.i18n.setLocale(this.isEnglish ? zh_CN : en_US);
+  //   this.isEnglish = !this.isEnglish;
+  // }
+
+  exportWord() {
+    return null;
+  }
+}

package/src/lib/date-picker/date-picker.module.ts

@@ -0,0 +1,18 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {DatePickerComponent} from './date-picker.component';
+import {WidgetBaseModule, WidgetService} from 'bbj-widget-base';
+import {NzDatePickerModule} from 'ng-zorro-antd/date-picker';
+import {FormsModule} from '@angular/forms';
+
+
+@NgModule({
+  declarations: [DatePickerComponent],
+  imports: [CommonModule, WidgetBaseModule, NzDatePickerModule, FormsModule],
+  exports: [DatePickerComponent]
+})
+export class DatePickerModule {
+  constructor(widgetService: WidgetService) {
+    widgetService.register(DatePickerComponent);
+  }
+}

package/src/lib/drop-down-detail-list/drop-down-detail-list.component.html

@@ -0,0 +1,25 @@
+<div class="dropDownDetailList">
+  <nz-list nzBordered="false" nzSplit="false">
+    <nz-list-item *ngFor="let item of data;let i=index" [ngStyle]="font" >
+      <div class="ListContent" [style.height]="height+'px'">
+        <div class="Content">
+          <div>{{item.titleName}}</div>
+          <div>{{item.list.length}}</div>
+        </div>
+        &nbsp;
+        &nbsp;
+        <i nz-icon nzType="{{item.icon}}" nzTheme="outline" (click)="openList(i)"></i>
+      </div>
+      <div *ngIf="item.icon=='caret-up'" [style.fontSize]="fontSize+'px'" class="ListDetaail">
+        <div *ngFor="let list of item.list" class="Detail">
+          {{list.detail}}
+          &nbsp;
+          &nbsp;
+        </div>
+      </div>
+    </nz-list-item>
+  </nz-list>
+</div>
+
+
+

package/src/lib/drop-down-detail-list/drop-down-detail-list.component.less

@@ -0,0 +1,35 @@
+.dropDownDetailList {
+  height: 100%;
+  overflow: auto;
+}
+.ant-list-item {
+  flex-wrap: wrap;
+}
+
+.ListContent {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.Content {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.ListDetaail{
+  width: 100%;
+  margin-right: 10px;
+}
+
+.Detail {
+  text-align: right;
+  //margin-right: 20px;
+}
+
+.anticon {
+  cursor: pointer;
+}

package/src/lib/drop-down-detail-list/drop-down-detail-list.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { DropDownDetailListComponent } from './drop-down-detail-list.component';
+
+describe('DropDownDetailListComponent', () => {
+  let component: DropDownDetailListComponent;
+  let fixture: ComponentFixture<DropDownDetailListComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DropDownDetailListComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DropDownDetailListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/drop-down-detail-list/drop-down-detail-list.component.ts

@@ -0,0 +1,117 @@
+import {Component, OnInit, SimpleChanges} from '@angular/core';
+import {Data, DataOutput, Drill, Property, Widget} from 'bbj-widget-base';
+
+@Component({
+  selector: 'sc-drop-down-detail-list',
+  templateUrl: './drop-down-detail-list.component.html',
+  styleUrls: ['./drop-down-detail-list.component.less']
+})
+@Widget('下拉详情列表',{group:'component',image: 'assets/img/screen/drop-down-detail-list.png'})
+export class DropDownDetailListComponent implements OnInit {
+  data=[];
+  @Property('字体', { ui: { widget: 'myFont' } })
+  font: any = {
+    family: '',
+    color: '#FFFFFF',
+    weight: 'normal',
+    size: 16,
+    space: 0,
+    lineHeight: 0,
+  };
+  @Property('高', { type: 'number'})
+  height=30;
+  @Property('详情字体', { type: 'number'})
+  fontSize=16;
+  @Data({
+    properties: {
+      titleName: { type: 'string', title: '名称' },
+      detail: { type: 'string', title: '详情' },
+    },
+  })
+  _data: any[] = [
+    {titleName:'a',detail:'aa'},
+    {titleName:'a',detail:'bb'},
+    {titleName:'b',detail:'bb'},
+    {titleName:'b',detail:'cc'},
+  ];
+  // @Drill()
+  // @DataOutput(['titleName', 'list'])
+  constructor() { }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes._data){
+      this.data=this.jsonMerge(this._data,['titleName']);
+      this.data.forEach(function(item){
+        item.icon='caret-down'
+      });
+    }
+  }
+
+  ngOnInit() {
+    this.font = {
+      fontSize: this.font.size + 'px',
+      fontFamily: this.font.family,
+      color: this.font.color,
+      fontWeight: this.font.weight,
+      letterSpacing: this.font.space + 'px',
+      lineHeight: 'normal'
+    }
+  }
+  openList(index){
+    if(this.data[index].icon=='caret-down'){
+      this.data[index].icon='caret-up'
+    }else if(this.data[index].icon=='caret-up'){
+      this.data[index].icon='caret-down'
+    }
+  }
+  jsonMerge(jsonArr,keyArr){
+    const newJson = [] // 合并好的数据都放在这个数组里
+    jsonArr.forEach((itemJson,indexJson)=>{
+      let mark = -1
+      const finded = newJson.find((itemFind, indexFind) => {
+        if (itemFind[keyArr[0]] === itemJson[keyArr[0]]) {
+          mark = indexFind
+          return itemFind[keyArr[0]] === itemJson[keyArr[0]]
+        }
+      })
+      if(!finded){
+        const value = {}
+        value[keyArr[0]] = itemJson[keyArr[0]]
+        value.list = []
+        const list = {}
+        for(const i in itemJson){
+          if(i!==keyArr[0]){
+            list[i] = itemJson[i]
+          }
+        }
+        value.list.push(list)
+        newJson.push(value)
+      }else{
+        const list = {}
+        for(const i in itemJson){
+          if(i!==keyArr[0]){
+            list[i] = itemJson[i]
+          }
+        }
+        newJson[mark].list.push(list)
+      }
+    })
+    // 递归的条件是不断的缩减keyArr的length，每次都去除第零个，直到为0
+    if(keyArr.length === 1){
+      return newJson
+    }else{
+      return newJson.map((itemInfo)=>{
+        const newKeyArr = []
+        keyArr.forEach((item,index)=>{
+          if(index>0){
+            newKeyArr.push(item)
+          }
+        })
+        return{
+          [keyArr[0]]:itemInfo[keyArr[0]],
+          list:this.jsonMerge(itemInfo.list,newKeyArr)
+        }
+      })
+    }
+  }
+}