You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
hai-oil-web/src/app/pages/merchant/mer-add/mer-add.component.ts

152 lines
4.5 KiB

import { Component } from '@angular/core';
import {MerService} from "../../../servies/merchant/mer.service";
import {NzModalModule, NzModalService} from "ng-zorro-antd/modal";
import {FormGroup, FormsModule, NonNullableFormBuilder, ReactiveFormsModule, Validators} from "@angular/forms";
import {NgForOf, NgIf} from "@angular/common";
import {NzButtonComponent} from "ng-zorro-antd/button";
import {NzColDirective} from "ng-zorro-antd/grid";
import {NzFlexDirective} from "ng-zorro-antd/flex";
import {
NzFormControlComponent,
NzFormDirective,
NzFormItemComponent,
NzFormLabelComponent,
NzFormModule
} from "ng-zorro-antd/form";
import {NzInputDirective} from "ng-zorro-antd/input";
import {NzOptionComponent, NzSelectComponent} from "ng-zorro-antd/select";
import {NzUploadFile, NzUploadModule} from "ng-zorro-antd/upload";
import {NzIconDirective} from "ng-zorro-antd/icon";
import {Observable, Observer} from "rxjs";
import {NzMessageService} from "ng-zorro-antd/message";
import {RoleService} from "../../../servies/role/role.service";
import {environment} from "../../../../environments/environment";
@Component({
selector: 'app-mer-add',
standalone: true,
imports: [
FormsModule,
NgForOf,
NzButtonComponent,
NzColDirective,
NzFlexDirective,
NzFormControlComponent,
NzFormDirective,
ReactiveFormsModule,
NzFormItemComponent,
NzFormLabelComponent,
NzInputDirective,
NzSelectComponent,
NzOptionComponent,
NzModalModule,
NzFormModule,
NzUploadModule,
NzIconDirective,
NgIf
],
templateUrl: './mer-add.component.html',
styleUrl: './mer-add.component.less'
})
export class MerAddComponent {
BASE_URL = environment.baseUrl;
loading = false;
logoUrl?: string;
form: FormGroup;
// 角色数据
roleData: any = [];
constructor(private fb: NonNullableFormBuilder,
private merService: MerService,
private roleService: RoleService,
private message: NzMessageService,
private modal: NzModalService) {
// 初始化表单
this.form = this.fb.group({
loginName: ['', [Validators.required]],
roleId: ['', [Validators.required]],
merLogo: [''],
merName: [''],
directorName: [''],
directorTel: [''],
customerServiceTel: [''],
address: [''],
});
// 获取角色数据
this.roleService.queryAllRole((data: any) => {
this.roleData = data['return_data'];
});
}
submitForm() {
console.log(this.logoUrl);
if (this.form.valid) {
this.merService.create(this.form.value, (data: any) => {
if (data['return_code'] == '000000') {
this.message.create('success', '操作成功');
// 清空表单
this.form.reset();
this.logoUrl = '';
} else {
this.message.create('error', data['return_msg']);
}
});
} else {
Object.values(this.form.controls).forEach(control => {
if (control.invalid) {
control.markAsDirty();
control.updateValueAndValidity({ onlySelf: true });
}
});
}
}
private getBase64(img: File, callback: (img: string) => void): void {
const reader = new FileReader();
reader.addEventListener('load', () => callback(reader.result!.toString()));
reader.readAsDataURL(img);
}
handleChange(info: { file: NzUploadFile }): void {
switch (info.file.status) {
case 'uploading':
this.loading = true;
break;
case 'done':
// Get this url from response in real world.
this.getBase64(info.file!.originFileObj!, (img: string) => {
this.loading = false;
this.logoUrl = img;
});
this.form.patchValue({ merLogo: info.file.response['return_data'][0]});
break;
case 'error':
this.message.error('网络错误!');
this.loading = false;
break;
}
}
beforeUpload = (file: NzUploadFile, _fileList: NzUploadFile[]) => {
return new Observable((observer: Observer<boolean>) => {
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
if (!isJpgOrPng) {
this.message.error('只能上传JPG文件!');
observer.complete();
return;
}
const isLt2M = file.size! / 1024 / 1024 < 2;
if (!isLt2M) {
this.message.error('图片必须小于2MB!');
observer.complete();
return;
}
observer.next(isJpgOrPng && isLt2M);
observer.complete();
});
};
}