logo

proxy.conf.json

@@ -1,6 +1,6 @@
 {
   "/service": {
-    "target": "http://192.168.4.240",
+    "target": "http://192.168.3.108",
     "logLevel": "debug",
     "changeOrigin": true,
     "pathRewrite": {

src/app/services/main.service.ts

@@ -694,4 +694,8 @@ export class MainService {
       }
     );
   }
+  // 获取logo和title
+  getSysNameAndLogo(): any {
+    return this.http.get(host.host + "/auth/getSysNameAndLogo", {});
+  }
 }

src/app/services/tool.service.ts

@@ -5,9 +5,21 @@ import { MainService } from "./main.service";
   providedIn: "root",
 })
 export class ToolService {
-  constructor(private mainService: MainService) {}
-  logoUrl = '/assets/images/login_logo.png';
-  logoTitle = '大势医院输送保障管理平台';
+  logoUrl = '';
+  logoTitle = '';
+
+  constructor(private mainService: MainService) {
+    this.getSysNameAndLogo();
+  }
+
+  // 获取logoUrl和logoTitle
+  getSysNameAndLogo(){
+    this.mainService.getSysNameAndLogo().subscribe(result => {
+      console.log(result);
+      this.logoTitle = result.sysName || '大势医院输送保障管理平台';
+      this.logoUrl = result.logo || '/assets/images/login_logo.png';
+    })
+  }
 
   // 获取权限中的院区
   getHospitalList() {

src/app/share/share.module.ts

@@ -1,6 +1,7 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { NgZorroAntdModule } from 'ng-zorro-antd';
+import { NzIconModule } from 'ng-zorro-antd/icon';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { NgxEchartsModule } from 'ngx-echarts';
 import { OverlayscrollbarsModule } from 'overlayscrollbars-ngx';
@@ -84,7 +85,8 @@ import { BloodHistoryPromptModalComponent } from './blood-history-prompt-modal/b
     ReactiveFormsModule,
     NgxEchartsModule,
     OverlayscrollbarsModule,
-    SortablejsModule
+    SortablejsModule,
+    NzIconModule,
   ],
   exports: [
     DetailSampleComponent,

src/app/views/sys-config/sys-config.component.html

@@ -5,6 +5,39 @@
       <div class="form">
         <h3>基本配置</h3>
         <nz-form-item class="formItem">
+          <nz-form-label [nzSpan]="24" nzFor="systemName" nzRequired class="label">系统名称</nz-form-label>
+          <nz-form-control [nzSpan]="24" nzErrorTip="请输入系统名称!">
+            <input nz-input formControlName="systemName" id="systemName" placeholder="请输入系统名称">
+          </nz-form-control>
+        </nz-form-item>
+        <nz-form-item class="formItem">
+          <nz-form-label [nzSpan]="24" nzFor="largeScreenName" nzRequired class="label">名称</nz-form-label>
+          <nz-form-control [nzSpan]="24" nzErrorTip="请输入名称!">
+            <input nz-input formControlName="largeScreenName" id="largeScreenName" placeholder="请输入名称">
+          </nz-form-control>
+        </nz-form-item>
+        <nz-form-item class="formItem">
+          <nz-form-label [nzSpan]="24" class="label" nzFor="logo" nzRequired>系统logo</nz-form-label>
+          <nz-form-control [nzSpan]="24" nzErrorTip="请选择系统logo!">
+            <nz-upload nzFor="logo"
+              class="avatar-uploader"
+              nzAction="/service/common/common/uploadAttachment/sysLogo/777/777" 
+              [nzCustomRequest]="customReq"
+              nzName="file"
+              nzListType="picture-card"
+              [nzShowUploadList]="false"
+              [nzBeforeUpload]="beforeUpload"
+              (nzChange)="handleChange($event)"
+            >
+              <ng-container *ngIf="!avatarUrl">
+                <i class="upload-icon" nz-icon [nzType]="avatarLoading ? 'avatarLoading' : 'plus'"></i>
+                <div class="ant-upload-text">点击上传</div>
+              </ng-container>
+              <img *ngIf="avatarUrl" [src]="avatarUrl" class="avatar" />
+            </nz-upload>
+          </nz-form-control>
+        </nz-form-item>
+        <nz-form-item class="formItem">
           <nz-form-label [nzSpan]="24" nzFor="defaultPwd" nzRequired class="label">用户默认密码</nz-form-label>
           <nz-form-control [nzSpan]="24" nzErrorTip="请输入用户默认密码!">
             <input nz-input formControlName="defaultPwd" id="defaultPwd" placeholder="请输入用户默认密码">

src/app/views/sys-config/sys-config.component.less

@@ -3,6 +3,18 @@
   display: flex;
   flex-direction: column;
   justify-content: space-between;
+  .avatar {
+    width: 128px;
+    height: 128px;
+  }
+  .upload-icon {
+    font-size: 32px;
+    color: #999;
+  }
+  .ant-upload-text {
+    margin-top: 8px;
+    color: #666;
+  }
   .main {
     height: calc(100vh - 161px);
     h2 {

src/app/views/sys-config/sys-config.component.ts

@@ -4,6 +4,9 @@ import { ActivatedRoute } from "@angular/router";
 import { MainService } from "../../services/main.service";
 import { ToolService } from "src/app/services/tool.service";
 import { OverlayScrollbarsComponent } from 'overlayscrollbars-ngx';
+import { Observable, Observer } from 'rxjs';
+import { NzMessageService, UploadFile, UploadXHRArgs } from 'ng-zorro-antd';
+import { HttpRequest, HttpEventType, HttpEvent, HttpResponse, HttpClient } from '@angular/common/http';
 
 @Component({
   selector: "app-sys-config",
@@ -28,7 +31,9 @@ export class SysConfigComponent implements OnInit {
     private mainService: MainService,
     private fb: FormBuilder,
     private route: ActivatedRoute,
-    private tool: ToolService
+    private tool: ToolService,
+    private msg: NzMessageService,
+    private http: HttpClient
   ) {}
   @ViewChild("osComponentRef1", {
     read: OverlayScrollbarsComponent,
@@ -47,6 +52,9 @@ export class SysConfigComponent implements OnInit {
       workOrderSettings: [5, [Validators.required]],
       nurseDeptSwitchTip: [0, [Validators.required]],
       updateTipsForNurses: [""],
+      systemName: ["", [Validators.required]],
+      largeScreenName: ["", [Validators.required]],
+      logo: ["", [Validators.required]],
       defaultRoleOfNurse: [null, [Validators.required]],
       formUrl: [{ value: null, disabled: true }, [Validators.required]],
       serviceUrl: [{ value: null, disabled: true }, [Validators.required]],
@@ -57,7 +65,10 @@ export class SysConfigComponent implements OnInit {
     this.getDeptType();
     this.coopBtns = this.tool.initCoopBtns(this.route);
     this.getRoleList();
+    this.avatarUrl = this.tool.logoUrl;
+    this.validateForm.controls.logo.setValue(this.tool.logoUrl);
   }
+
   // 角色列表
   roleList = [];
   getRoleList() {
@@ -98,6 +109,9 @@ export class SysConfigComponent implements OnInit {
       this.validateForm.controls[i].markAsDirty();
       this.validateForm.controls[i].updateValueAndValidity();
     }
+    if (this.validateForm.invalid) {
+      return;
+    }
     let filterData = this.initConfig.filter(
       (item) =>
         item.keyconfig === "pwd" ||
@@ -110,6 +124,8 @@ export class SysConfigComponent implements OnInit {
         item.keyconfig === "workOrderSettings" ||
         item.keyconfig === "nurseDeptSwitchTip" ||
         item.keyconfig === "updateTipsForNurses" ||
+        item.keyconfig === "systemName" ||
+        item.keyconfig === "largeScreenName" ||
         item.keyconfig === "defaultRoleOfNurse" ||
         item.keyconfig === "busiViewDeptId"
     );
@@ -136,6 +152,10 @@ export class SysConfigComponent implements OnInit {
         item.valueconfig = this.validateForm.controls.nurseDeptSwitchTip.value;
       } else if (item.keyconfig === "updateTipsForNurses") {
         item.valueconfig = this.validateForm.controls.updateTipsForNurses.value;
+      } else if (item.keyconfig === "systemName") {
+        item.valueconfig = this.validateForm.controls.systemName.value;
+      } else if (item.keyconfig === "largeScreenName") {
+        item.valueconfig = this.validateForm.controls.largeScreenName.value;
       } else if (item.keyconfig === "defaultRoleOfNurse") {
         item.valueconfig = this.validateForm.controls.defaultRoleOfNurse.value;
       } else if (item.keyconfig === "busiViewDeptId") {
@@ -220,6 +240,12 @@ export class SysConfigComponent implements OnInit {
                 case "updateTipsForNurses":
                   this.validateForm.controls.updateTipsForNurses.setValue(c[1]);
                   break;
+                case "systemName":
+                  this.validateForm.controls.systemName.setValue(c[1]);
+                  break;
+                case "largeScreenName":
+                  this.validateForm.controls.largeScreenName.setValue(c[1]);
+                  break;
                 case "defaultRoleOfNurse":
                   this.validateForm.controls.defaultRoleOfNurse.setValue(
                     c[1] - 0
@@ -260,4 +286,94 @@ export class SysConfigComponent implements OnInit {
     }, 100);
     this.getDeptType();
   }
+
+  avatarLoading = false;
+  avatarUrl: string;
+  beforeUpload = (file: File) => {
+    return new Observable((observer: Observer<boolean>) => {
+      const isPic = (file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg');
+      if (!isPic) {
+        this.msg.error('只能上传jpg|jpeg|png图片!');
+        observer.complete();
+        return;
+      }
+      const isLt2M = file.size / 1024 / 1024 < 2;
+      if (!isLt2M) {
+        this.msg.error('图片大小不能大于2MB!');
+        observer.complete();
+        return;
+      }
+      observer.next(isPic && isLt2M);
+      observer.complete();
+    });
+  };
+
+  private getBase64(img: File, callback: (img: string) => void): void {
+    const reader = new FileReader();
+    reader.addEventListener('load', () => callback(reader.result!.toString()));
+    reader.readAsDataURL(img);
+  }
+
+  private checkImageDimension(file: File): Promise<boolean> {
+    return new Promise(resolve => {
+      const img = new Image(); // create image
+      img.src = window.URL.createObjectURL(file);
+      img.onload = () => {
+        const width = img.naturalWidth;
+        const height = img.naturalHeight;
+        window.URL.revokeObjectURL(img.src!);
+        resolve(width === height && width >= 300);
+      };
+    });
+  }
+
+  handleChange(info: { file: UploadFile }): void {
+    switch (info.file.status) {
+      case 'uploading':
+        this.avatarLoading = true;
+        break;
+      case 'done':
+        // Get this url from response in real world.
+        this.getBase64(info.file!.originFileObj!, (img: string) => {
+          this.avatarLoading = false;
+          this.avatarUrl = img;
+        });
+        break;
+      case 'error':
+        this.msg.error('Network error');
+        this.avatarLoading = false;
+        break;
+    }
+  }
+
+  customReq = (item: UploadXHRArgs) => {
+    console.log(item);
+    // Create a FormData here to store files and other parameters.
+    const formData = new FormData();
+    // tslint:disable-next-line:no-any
+    formData.append('file', item.file as any);
+    formData.append('filename', item.file.name);
+    const req = new HttpRequest('POST', item.action!, formData, {
+      reportProgress: true,
+      withCredentials: true
+    });
+    // Always returns a `Subscription` object. nz-upload would automatically unsubscribe it at correct time.
+    return this.http.request(req).subscribe(
+      // tslint:disable-next-line no-any
+      (event: HttpEvent<any>) => {
+        if (event.type === HttpEventType.UploadProgress) {
+          if (event.total! > 0) {
+            // tslint:disable-next-line:no-any
+            (event as any).percent = (event.loaded / event.total!) * 100;
+          }
+          item.onProgress!(event, item.file!);
+        } else if (event instanceof HttpResponse) {
+          item.onSuccess!(event.body, item.file!, event);
+        }
+      },
+      err => {
+        item.onError!(err, item.file!);
+      }
+    );
+  };
 }