bbq/src/app/routes/sys-setting/components/system-config/system-config.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { SFComponent, SFSchema, SFUploadWidgetSchema } from '@delon/form';
import { Observable, Observer } from 'rxjs';
import { SystemService } from '../../services/system.service';

@Component({
  selector: 'app-system-config',
  templateUrl: './system-config.component.html',
  styleUrls: ['./system-config.component.less']
})
export class SystemConfigComponent implements OnInit {
  @ViewChild('sf', { static: false }) sf!: SFComponent;
  formDate: any = {
    isAudit: false,
    isEveryDay: false,
    isEveryWeek: false
  };
  tabs = [
    {
      name: '货主端配置'
    },
    {
      name: '司机端配置'
    }
  ];
  selectedTab = 0;

  checkOptionsOne = [
    { label: '周一', value: '周一', checked: true },
    { label: '周二', value: '周二' },
    { label: '周三', value: '周三' },
    { label: '周四', value: '周四' },
    { label: '周五', value: '周五' },
    { label: '周六', value: '周六' },
    { label: '周日', value: '周日' }
  ];

  i: any;
  schema!: SFSchema;
  schema2!: SFSchema;

  imageConfig = {
    widget: 'upload',
    action: `/scm/cms/cms/upload/multipartFile/fileModel`,
    limit: 1,
    limitFileCount: 1,
    resReName: 'url',
    urlReName: 'url',
    data: {
      appId: this.service.envSrv.getEnvironment().appId
    },
    multiple: false,
    listType: 'picture-card',
    showRequired: true
  };
  constructor(private service: SystemService) {}

  ngOnInit() {
    this.initSF();
  }

  changeType(type: number): void {
    this.selectedTab = type;
  }

  initSF() {
    this.schema = {
      properties: {
        sysMinLogo: {
          type: 'string',
          title: '系统LOGO（大）',
          // enum: [],
          ui: {
            ...this.imageConfig,
            descriptionI18n: '大尺寸logo，支持JPG、PNG格式，文件小于2M（建议尺寸300*170px）。',
            change: args => {
              if (args.type === 'success') {
                const avatar = this.getImageModel(args, 'sysMinLogo');
                this.sf?.setValue('/sysMinLogo', avatar);
                this.i.sysMinLogo = avatar;
              }
            },
            beforeUpload: this.uploadBefore
          } as SFUploadWidgetSchema
        },
        sysMaxLogo: {
          type: 'string',
          title: '用户默认头像',
          ui: {
            ...this.imageConfig,
            descriptionI18n: '支持JPG、PNG格式，文件小于2M（建议尺寸60*60px）。',
            change: args => {
              if (args.type === 'success') {
                const avatar = this.getImageModel(args, -1);
                this.sf?.setValue('/sysMaxLogo', avatar);
                this.i.sysMaxLogo = avatar;
              }
            },
            beforeUpload: this.uploadBefore
          } as SFUploadWidgetSchema
        },
        sysMaxLogo1: {
          type: 'string',
          title: '用户默认头像',
          ui: {
            ...this.imageConfig,
            descriptionI18n: '支持JPG、PNG格式，文件小于5M（建议尺寸375*773px）。',
            change: args => {
              if (args.type === 'success') {
                const avatar = this.getImageModel(args, -1);
                this.sf?.setValue('/sysMaxLogo1', avatar);
                this.i.sysMaxLogo1 = avatar;
              }
            },
            beforeUpload: this.uploadBefore
          } as SFUploadWidgetSchema
        },
      },
      required: ['sysMinLogo', 'sysMaxLogo', 'sysMaxLogo1']
    };
    this.schema2 = {
      properties: {
        sysMinLogo: {
          type: 'string',
          title: '系统LOGO(小)',
          // enum: [],
          ui: {
            ...this.imageConfig,
            descriptionI18n: '小尺寸logo，支持JPG、PNG格式，文件小于2M（建议尺寸32*32px）。',
            change: args => {
              if (args.type === 'success') {
                const avatar = this.getImageModel(args, 'sysMinLogo');
                this.sf?.setValue('/sysMinLogo', avatar);
                this.i.sysMinLogo = avatar;
              }
            },
            beforeUpload: this.uploadBefore
          } as SFUploadWidgetSchema
        },
        sysMaxLogo: {
          type: 'string',
          title: '系统LOGO(大)',
          ui: {
            ...this.imageConfig,
            descriptionI18n: '小尺寸logo，支持JPG、PNG格式，文件小于2M（建议尺寸32*32px）。',
            change: args => {
              if (args.type === 'success') {
                const avatar = this.getImageModel(args, -1);
                this.sf?.setValue('/sysMaxLogo', avatar);
                this.i.sysMaxLogo = avatar;
              }
            },
            beforeUpload: this.uploadBefore
          } as SFUploadWidgetSchema
        },
        sysMaxLogo1: {
          type: 'string',
          title: '用户默认头像',
          ui: {
            ...this.imageConfig,
            descriptionI18n: '支持JPG、PNG格式，文件小于2M（建议尺寸60*60px）。',
            change: args => {
              if (args.type === 'success') {
                const avatar = this.getImageModel(args, -1);
                this.sf?.setValue('/sysMaxLogo1', avatar);
                this.i.sysMaxLogo1 = avatar;
              }
            },
            beforeUpload: this.uploadBefore
          } as SFUploadWidgetSchema
        },
        sysMaxLogo2: {
          type: 'string',
          title: '企业默认头像',
          ui: {
            ...this.imageConfig,
            descriptionI18n: '支持JPG、PNG格式，文件小于2M（建议尺寸60*60px）。',
            change: args => {
              if (args.type === 'success') {
                const avatar = this.getImageModel(args, -1);
                this.sf?.setValue('/sysMaxLogo2', avatar);
                this.i.sysMaxLogo2 = avatar;
              }
            },
            beforeUpload: this.uploadBefore
          } as SFUploadWidgetSchema
        },
        sysMaxLogo3: {
          type: 'string',
          title: '货主PC端登陆页海报',
          ui: {
            ...this.imageConfig,
            descriptionI18n: '支持JPG、PNG格式，文件小于5M（建议尺寸1920*630px）。',
            change: args => {
              if (args.type === 'success') {
                const avatar = this.getImageModel(args, -1);
                this.sf?.setValue('/sysMaxLogo3', avatar);
                this.i.sysMaxLogo3 = avatar;
              }
            },
            beforeUpload: this.uploadBefore
          } as SFUploadWidgetSchema
        },
        sysMaxLogo4: {
          type: 'string',
          title: 'APP开屏海报',
          ui: {
            ...this.imageConfig,
            descriptionI18n: '支持JPG、PNG格式，文件小于5M（建议尺寸375*773px）。',
            change: args => {
              if (args.type === 'success') {
                const avatar = this.getImageModel(args, -1);
                this.sf?.setValue('/sysMaxLogo4', avatar);
                this.i.sysMaxLogo4 = avatar;
              }
            },
            beforeUpload: this.uploadBefore
          } as SFUploadWidgetSchema
        },
      },
      required: ['sysMinLogo', 'sysMaxLogo', 'sysMaxLogo1', 'sysMaxLogo2', 'sysMaxLogo3', 'sysMaxLogo4']
    };
  }

  private uploadBefore = (file: any, fileList: any) => {
    return new Observable((observer: Observer<boolean>) => {
      const isLt1M = file.size / 1024 / 1024 < 2;
      const fileType = 'image/png,image/jpeg';
      if (fileType.indexOf(file.type) === -1) {
        this.service.msgSrv.warning('图片格式不正确！');
        observer.complete();
        return;
      }
      if (!isLt1M) {
        // this.service.msgSrv.warning('图片需小于1M');
        this.service.msgSrv.warning('图片大小超过2M!');
        observer.complete();
        return;
      }
      observer.next(isLt1M);
      observer.complete();
    });
  };

  private getImageModel(args: any, key: any) {
    return [
      {
        uid: key,
        name: 'LOGO',
        status: 'done',
        url: args.fileList[0].response.url,
        response: {
          url: args.fileList[0].response.url
        }
      }
    ];
  }
}