bbj-screen-widget 2.4.60 → 2.4.62

package/src/lib/button/button.component.ts

@@ -0,0 +1,137 @@
+import { Component, EventEmitter, OnInit } from '@angular/core';
+import { Data, DataOutput, GlobalVarService, Property, TemplateUtil, Widget } from 'bbj-widget-base';
+import { SFOptionalHelp, SFRadioWidgetSchema } from '@delon/form';
+import { of } from 'rxjs';
+import { HttpClient } from '@angular/common/http';
+import { HttpService } from '../shared/service/http.service';
+
+@Component({
+  selector: 'sc-button',
+  templateUrl: './button.component.html',
+  styleUrls: ['./button.component.less'],
+})
+@Widget('按钮', { group: 'component', image: 'assets/img/screen/myButton.png', icon: 'iconmokuai' })
+export class ButtonComponent implements OnInit {
+  textStyle: any = {};
+  edit: any;
+  @Property('按钮样式', {
+    ui: {
+      widget: 'myButton',
+      spanLabel: 24,
+      spanControl: 24,
+      name: 'button',
+      reset: ['background', 'borderColor'],
+      background: [
+        { background: '#FFB700', borderColor: '#FFB700' },
+        { background: '#00E371', borderColor: '#00E371' },
+        { background: '#3285FF', borderColor: '#3285FF' },
+        { background: '#B232FF', borderColor: '#B232FF' },
+        { background: '#FF3286', borderColor: '#FF3286' },
+        { background: '#FF3832', borderColor: '#FF3832' },
+        { background: 'linear-gradient(-180deg, #FAD961 0%, #F76B1C 100%)', borderColor: '#F76B1C' },
+        { background: 'linear-gradient(-180deg, #B4EC51 0%, #429321 100%)', borderColor: '#429321' },
+        { background: 'linear-gradient(-180deg, #20C8FF 0%, #0059DD 100%)', borderColor: '#0059DD' },
+        { background: 'linear-gradient(-90deg, #3023AE 0%, #C86DD7 87%)', borderColor: '#C86DD7' },
+      ],
+    },
+  })
+  colorExample: any;
+  @Property('内容')
+  title = 'button';
+  @Property('填充', {
+    ui: {
+      widget: 'myColor',
+      example: ['#D0021B', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', null],
+    },
+  })
+  background = 'linear-gradient(-180deg, #20C8FF 0%, #0059DD 100%)';
+  @Property('边框', {
+    ui: {
+      widget: 'myColor',
+      example: ['#FFFFFF', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', null],
+    },
+  })
+  borderColor = '#0059DD';
+  @Property('字体', { ui: { widget: 'myFont' } })
+  font: any = { family: '', color: '#ffffff', weight: 'normal', size: 12, space: 0, lineHeight: '' };
+  @Property('透明度', { ui: { widget: 'myRange', min: 0, max: 1, step: 0.1 } })
+  opacity = 1;
+  @Property('圆角', { ui: { widget: 'myRange', min: 0, max: 100, step: 1 } })
+  radius = 4;
+  @Property('阴影', { ui: { widget: 'myShadow' } })
+  shadow: any = { color: '', X: 0, Y: 0, Z: 0 };
+  @Property('超链接')
+  href = '';
+  @Property('另起窗口', {
+    type: 'boolean',
+    ui: {
+      checkedChildren: '是',
+      unCheckedChildren: '否',
+    },
+  })
+  openModel = true;
+  @Property('执行脚本', {
+    ui: {
+      widget: 'textarea',
+      autosize: { minRows: 6, maxRows: 10 },
+      optionalHelp: {
+        text: `内置变量：
+1、http:用于发起http请求
+2、global:全局变量
+例:http.post("http://www.xxx.com/xxx",{a:global.a});// POST,body传参
+   http.post("http://www.xxx.com/xxx",null,{params:{a:global.a}});// POST,url传参
+   http.get("http://www.xxx.com/xxx",{params:{a:global.a}});// GET,url传参
+`,
+        overlayStyle: {
+          whiteSpace: 'pre-line',
+        },
+      },
+    },
+  })
+  script: string;
+  @Data({
+    properties: {
+      value: { type: 'string', title: '值' },
+    },
+  })
+  data: any[] = [];
+  @DataOutput('值')
+  valueOutput = new EventEmitter<string>();
+  constructor(private http: HttpService, private gloabl: GlobalVarService) {}
+
+  ngOnInit() {
+    this.textStyle = {
+      background: this.background,
+      borderColor: this.borderColor,
+      fontSize: this.font.size + 'px',
+      fontFamily: this.font.family,
+      color: this.font.color,
+      fontWeight: this.font.weight,
+      letterSpacing: this.font.space + 'px',
+      lineHeight: this.font.lineHeight + 'px',
+      opacity: this.opacity,
+      borderRadius: this.radius + '%',
+      boxShadow: this.shadow.color + ' ' + this.shadow.X + 'px ' + this.shadow.Y + 'px ' + this.shadow.Z + 'px',
+    };
+  }
+  openPage(event) {
+    if (!this.edit) {
+      if (this.href) {
+        if (this.openModel) {
+          window.open(this.href, '_blank');
+        } else {
+          window.location.href = this.href;
+        }
+      }
+      if (this.script) {
+        const fn = new Function('http', 'global', this.script);
+        fn(this.http, this.gloabl.data);
+      }
+    }
+    if (this.data?.length) {
+      this.valueOutput.emit(this.data[0].value);
+    }else{
+      this.valueOutput.emit(null);
+    }
+  }
+}

package/src/lib/button/button.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ButtonComponent } from './button.component';
+import { WidgetBaseModule, WidgetService } from 'bbj-widget-base';
+import { HttpService } from '../shared/service/http.service';
+
+@NgModule({
+  declarations: [ButtonComponent],
+  imports: [CommonModule, WidgetBaseModule],
+  providers: [HttpService],
+})
+export class ButtonModule {
+  constructor(widgetService: WidgetService) {
+    widgetService.register(ButtonComponent);
+  }
+}

package/src/lib/calendar/background-events/background-events.component.spec.ts

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

package/src/lib/calendar/background-events/background-events.component.ts

@@ -0,0 +1,51 @@
+import { Component, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
+import { Data, Property, Widget } from 'bbj-widget-base';
+import { CalendarComponent } from '../calendar.component';
+import { CalendarEventsChild } from '../calendar-events-child';
+import { EventSourceInput } from '@fullcalendar/common';
+import { addDays, format, isMatch, parse } from 'date-fns';
+import { updateEndTime } from '../calendar.util';
+
+@Component({
+  selector: 'sc-calendar-background-events',
+  templateUrl: './background-events.component.html',
+  styleUrls: ['./background-events.component.less'],
+})
+@Widget('背景颜色', { hidden: true })
+export class BackgroundEventsComponent extends CalendarEventsChild {
+  @Property('颜色', {
+    ui: {
+      widget: 'myColor',
+    },
+  })
+  color: string;
+  @Data({
+    properties: {
+      id: { type: 'string', title: 'id' },
+      start: { type: 'string', title: '开始日期' },
+      end: { type: 'string', title: '结束日期' },
+      title: { type: 'string', title: '标题' },
+      color: { type: 'string', title: '背景颜色' },
+    },
+  })
+  data: any[] = [
+    { end: '2020-07-21 00:00:00', start: '2020-07-19 00:00:00', title: 'event 3' },
+    { end: '2020-07-19 00:00:00', start: '2020-07-18 00:00:00', title: 'event 4' },
+    { end: '2020-07-22', start: '2020-07-20', title: 'event 5' },
+  ];
+
+  constructor(public parent: CalendarComponent) {
+    super(parent);
+  }
+
+  getEvents(data: any[]): EventSourceInput[] {
+    return data.map((item) => {
+      const event = { ...item, display: 'background' };
+      if (!event.color && this.color) {
+        event.color = this.color;
+      }
+      updateEndTime(event);
+      return event;
+    });
+  }
+}

package/src/lib/calendar/calendar-events-child.ts

@@ -0,0 +1,27 @@
+import { Directive, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
+import { CalendarComponent } from './calendar.component';
+import { EventApi, EventSourceInput } from '@fullcalendar/angular';
+
+@Directive()
+export abstract class CalendarEventsChild implements OnChanges, OnDestroy {
+  data: any[];
+  id: string;
+  constructor(public parent: CalendarComponent) {}
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.data) {
+      if (this.data) {
+        let events = this.getEvents(this.data);
+        this.parent.setEvents(this.id, events);
+      } else {
+        this.parent.removeEvents(this.id);
+      }
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.parent.removeEvents(this.id);
+  }
+
+  abstract getEvents(data: any[]): EventSourceInput[];
+}

package/src/lib/calendar/calendar.component.html

@@ -0,0 +1,2 @@
+<full-calendar *ngIf="calendarOptions" [options]="calendarOptions"></full-calendar>
+<ng-template *ngFor="let child of children" widget-host [widget]="child"></ng-template>

package/src/lib/calendar/calendar.component.less

@@ -0,0 +1,14 @@
+:host ::ng-deep {
+  .fc-direction-ltr {
+    height: 100%;
+  }
+  .fc .fc-view-harness {
+    padding-bottom: 0 !important;
+  }
+  .fc-license-message {
+    display: none;
+  }
+  .fc-daygrid-event {
+    white-space: normal;
+  }
+}

package/src/lib/calendar/calendar.component.spec.ts

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

package/src/lib/calendar/calendar.component.ts

@@ -0,0 +1,151 @@
+import { Component, OnInit, ViewChild, OnChanges, SimpleChanges, EventEmitter, ChangeDetectorRef } from '@angular/core';
+import { Widget, Property, Data, DataOutput } from 'bbj-widget-base';
+import { CalendarOptions, FullCalendarComponent } from '@fullcalendar/angular';
+import { deepCopy } from '@delon/util';
+import { Router } from '@angular/router';
+import { addDays, format, isMatch, parse } from 'date-fns';
+import { updateEndTime } from './calendar.util';
+import { properties } from 'ng-zorro-antd/core/util';
+
+@Component({
+  selector: 'sc-calendar',
+  templateUrl: './calendar.component.html',
+  styleUrls: ['./calendar.component.less'],
+})
+@Widget('日历', {
+  group: 'component',
+  image: 'assets/img/screen/rili.png',
+  icon: 'iconmokuai',
+  childTypes: ['sc-calendar-events', 'sc-calendar-background-events'],
+})
+export class CalendarComponent implements OnInit, OnChanges {
+  @Property('是否自定义初始日期', { ui: { format: 'date', widget: 'checkbox', spanLabel: 0, spanControl: 24 } })
+  isInitialDate = true;
+  @Property('', { ui: { type: 'date', format: 'date', spanLabel: 0, spanControl: 24 } })
+  initialDate = '2020-07-18';
+  @Data({
+    properties: {
+      id: { type: 'string', title: 'id' },
+      start: { type: 'string', title: '开始日期' },
+      end: { type: 'string', title: '结束日期' },
+      title: { type: 'string', title: '内容' },
+    },
+  })
+  data: any[] = [
+    { end: '2020-07-21 00:00:00', start: '2020-07-19 00:00:00', title: 'event 3' },
+    { end: '2020-07-19 00:00:00', start: '2020-07-18 00:00:00', title: 'event 4' },
+    { end: '2020-07-22', start: '2020-07-20', title: 'event 5' },
+  ];
+  @DataOutput(['id', 'title'])
+  dataClick = new EventEmitter<any>();
+  @DataOutput(
+    {
+      properties: {
+        type: { type: 'string', title: '视图类型' },
+        start: { type: 'string', title: '开始时间' },
+        end: { type: 'string', title: '结束时间' },
+      },
+    },
+    { triggerLink: false },
+  )
+  datesSetChange = new EventEmitter<{ type: string; start: string; end: string }>();
+  children: any[];
+  id: string;
+  eventMap = new Map<any, any[]>();
+  constructor(private router: Router, private cd: ChangeDetectorRef) {}
+  calendarOptions: CalendarOptions;
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.data) {
+      if (this.data?.length) {
+        const events = this.data.map((item) => {
+          const event = {
+            ...item,
+            extendedProps: {
+              eventClick: this.eventClick,
+            },
+          };
+          updateEndTime(event);
+          return event;
+        });
+        this.setEvents(this.id, events);
+      } else {
+        this.removeEvents(this.id);
+      }
+      if (!this.calendarOptions) {
+        this.update();
+      }
+      // const events = this.data.map((item) => ({
+      //   id: item.id,
+      //   start: item.start.indexOf(' 00:00:00') > -1 ? item.start.split(' ')[0] : item.start,
+      //   end: item.end.indexOf(' 00:00:00') > -1 ? item.end.split(' ')[0] : item.end,
+      //   title: item.title,
+      // }));
+    }
+  }
+  ngOnInit(): void {}
+
+  setEvents(key: any, events: any[]) {
+    this.eventMap.set(key, events);
+    this.update();
+  }
+
+  removeEvents(key: any) {
+    if (this.eventMap.has(key)) {
+      this.eventMap.delete(key);
+      this.update();
+    }
+  }
+
+  update() {
+    const events = [];
+    for (const event of this.eventMap.values()) {
+      if (event) {
+        events.push(...event);
+      }
+    }
+    this.calendarOptions = {
+      headerToolbar: {
+        left: 'prev,next today',
+        center: 'title',
+        right: 'timeGridDay,timeGridWeek,dayGridMonth',
+      },
+      buttonText: {
+        dayGridMonth: '月',
+        timeGridWeek: '周',
+        timeGridDay: '日',
+        today: '今日',
+      },
+      timeZone: 'local',
+      initialDate: this.isInitialDate ? this.initialDate : null,
+      events: events,
+      locale: 'zh',
+      eventTimeFormat: {
+        hour: 'numeric',
+        minute: '2-digit',
+        hour12: false,
+      },
+      slotLabelFormat: { hour: 'numeric', minute: '2-digit', hour12: false },
+      eventClick: (info) => {
+        info.jsEvent.preventDefault();
+        if (info.event.extendedProps?.eventClick) {
+          info.event.extendedProps.eventClick(info.event);
+        }
+        // this.dataClick.emit({ id: info.event.id, title: info.event.title });
+      },
+      datesSet: (arg) => {
+        console.log(arg);
+        let type = arg.view.type;
+        type = type.substring(type.indexOf('Grid') + 4).toLowerCase();
+        const start = format(arg.start, 'yyyy-MM-dd');
+        const end = format(arg.end, 'yyyy-MM-dd');
+
+        this.datesSetChange.emit({ type, start, end });
+      },
+    };
+    this.cd.markForCheck();
+  }
+  eventClick = (event) => {
+    this.dataClick.emit({ id: event.id, title: event.title });
+  };
+}

package/src/lib/calendar/calendar.module.ts

@@ -0,0 +1,27 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { WidgetBaseModule, WidgetService } from 'bbj-widget-base';
+import { CalendarComponent } from './calendar.component';
+import { FullCalendarModule } from '@fullcalendar/angular';
+import dayGridPlugin from '@fullcalendar/daygrid'; // a plugin
+import timeGridPlugin from '@fullcalendar/timegrid'; // a plugin
+import interactionPlugin from '@fullcalendar/interaction';
+import { BackgroundEventsComponent } from './background-events/background-events.component';
+import { EventsComponent } from './events/events.component'; // a plugin
+
+@NgModule({
+  declarations: [CalendarComponent, BackgroundEventsComponent, EventsComponent],
+  imports: [CommonModule, WidgetBaseModule, FullCalendarModule],
+})
+export class CalendarModule {
+  constructor(widgetService: WidgetService) {
+    FullCalendarModule.registerPlugins([
+      dayGridPlugin,
+      timeGridPlugin,
+      interactionPlugin,
+    ]);
+    widgetService.register(CalendarComponent);
+    widgetService.register(EventsComponent);
+    widgetService.register(BackgroundEventsComponent);
+  }
+}

package/src/lib/calendar/calendar.util.ts

@@ -0,0 +1,14 @@
+import { EventInput } from '@fullcalendar/angular';
+import { addDays, format, isMatch, parse } from 'date-fns';
+
+const dayFormat = 'yyyy-MM-dd';
+
+/**
+ * 如果结束时间是仅日期的格式，加上一天
+ * @param event
+ */
+export function updateEndTime(event: EventInput) {
+  if (typeof event.end === 'string' && isMatch(event.end, dayFormat)) {
+    event.end = format(addDays(parse(event.end, dayFormat, new Date()), 1), dayFormat);
+  }
+}

package/src/lib/calendar/events/events.component.spec.ts

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

package/src/lib/calendar/events/events.component.ts

@@ -0,0 +1,61 @@
+import { Component, EventEmitter, OnInit } from '@angular/core';
+import { Data, DataOutput, Property, Widget } from 'bbj-widget-base';
+import { CalendarEventsChild } from '../calendar-events-child';
+import { CalendarComponent } from '../calendar.component';
+import { EventApi, EventSourceInput } from '@fullcalendar/common';
+import { addDays, format, isMatch, parse } from 'date-fns';
+import { updateEndTime } from '../calendar.util';
+
+@Component({
+  selector: 'sc-calendar-events',
+  templateUrl: './events.component.html',
+  styleUrls: ['./events.component.less'],
+})
+@Widget('事件', { hidden: true })
+export class EventsComponent extends CalendarEventsChild {
+  @Property('颜色', {
+    ui: {
+      widget: 'myColor',
+    },
+  })
+  color: string;
+  @Data({
+    properties: {
+      id: { type: 'string', title: 'id' },
+      start: { type: 'string', title: '开始日期' },
+      end: { type: 'string', title: '结束日期' },
+      title: { type: 'string', title: '标题' },
+      color: { type: 'string', title: '颜色' },
+    },
+  })
+  data: any[] = [
+    { end: '2020-07-21 00:00:00', start: '2020-07-19 00:00:00', title: 'event 3' },
+    { end: '2020-07-19 00:00:00', start: '2020-07-18 00:00:00', title: 'event 4' },
+    { end: '2020-07-22', start: '2020-07-20', title: 'event 5' },
+  ];
+  @DataOutput(['id', 'title'])
+  dataClick = new EventEmitter<any>();
+  constructor(public parent: CalendarComponent) {
+    super(parent);
+  }
+
+  getEvents(data: any[]): EventSourceInput[] {
+    return data.map((item) => {
+      const event = {
+        ...item,
+        extendedProps: {
+          eventClick: this.eventClick,
+        },
+      };
+      if (!event.color && this.color) {
+        event.color = this.color;
+      }
+      updateEndTime(event);
+      return event;
+    });
+  }
+
+  eventClick = (event: EventApi) => {
+    this.dataClick.emit(event);
+  };
+}

package/src/lib/checkbox/checkbox.component.html

@@ -0,0 +1,61 @@
+<ng-container *ngIf="!isCustom">
+  <div class="checkboxDefault" [class.label-vertical]="lableLayout === 'vertical'">
+    <label
+      *ngIf="showCheckAll"
+      nz-checkbox
+      [ngStyle]="textStyle"
+      [style.padding]="lablePadd"
+      [style.width]="labelWidth"
+      [(ngModel)]="allChecked"
+      (ngModelChange)="updateAllChecked()"
+      [nzIndeterminate]="indeterminate"
+    >
+      <ng-container *ngIf="!hiddenLabel">全选</ng-container>
+    </label>
+    <nz-checkbox-wrapper [ngStyle]="textStyle" (nzOnChange)="change($event)">
+      <label
+        *ngFor="let option of checkOptions"
+        nz-checkbox
+        [nzDisabled]="disabled"
+        [style.padding]="lablePadd"
+        [style.width]="labelWidth"
+        [nzValue]="option.value"
+        [(ngModel)]="option.checked"
+        [style.color]="option.color"
+      >
+        <ng-container *ngIf="!hiddenLabel">{{ option.label }}</ng-container>
+      </label>
+    </nz-checkbox-wrapper>
+  </div>
+</ng-container>
+<ng-container *ngIf="isCustom">
+  <div
+    class="content"
+    [class.layout-vertical]="layout === 'vertical'"
+    [class.label-vertical]="lableLayout === 'vertical'"
+    [ngStyle]="textStyle"
+  >
+    <label
+      *ngIf="showCheckAll"
+      class="customRadio"
+      [class.checked]="allChecked && !indeterminate"
+      (click)="allChecked = !allChecked; updateAllChecked()"
+      [style.padding]="lablePadd"
+      [style.width]="labelWidth"
+    >
+      <i class="input-checkbox"></i>
+      <span *ngIf="!hiddenLabel">全选</span></label
+    >
+    <label
+      class="customRadio"
+      [style.padding]="lablePadd"
+      [style.width]="labelWidth"
+      *ngFor="let option of checkOptions; let i = index"
+      [class.checked]="option.checked"
+      (click)="option.checked = !option.checked; change(option)"
+    >
+      <i class="input-checkbox"></i>
+      <span *ngIf="!hiddenLabel" [style.color]="option.color">{{ option.label }}</span></label
+    >
+  </div>
+</ng-container>