import { Component } from '@angular/core'; import {DatePipe, NgForOf, NgIf, NgStyle} from "@angular/common"; import {NzButtonComponent} from "ng-zorro-antd/button"; import {NzColDirective, NzRowDirective} from "ng-zorro-antd/grid"; import {NzFormControlComponent, NzFormDirective, NzFormItemComponent, NzFormLabelComponent} from "ng-zorro-antd/form"; import {NzInputDirective} from "ng-zorro-antd/input"; import {NzOptionComponent, NzSelectComponent} from "ng-zorro-antd/select"; import {FormGroup, FormsModule, NonNullableFormBuilder, ReactiveFormsModule, Validators} from "@angular/forms"; import {NzUploadComponent, NzUploadFile} from "ng-zorro-antd/upload"; import {environment} from "../../../../environments/environment"; import {NzMessageService} from "ng-zorro-antd/message"; import {CommonService} from "../../../services/common/common.service"; import {GoodsService} from "../../../services/goods/goods.service"; import { fallbackImg } from '../../../data/goods/goods.namespace'; import {GoodsTypeData} from "../../../model/goods.interface"; import {NzDividerComponent} from "ng-zorro-antd/divider"; import {NzIconDirective} from "ng-zorro-antd/icon"; import {NzImageDirective, NzImageModule} from "ng-zorro-antd/image"; import {NzModalModule} from "ng-zorro-antd/modal"; import {NzPopconfirmDirective} from "ng-zorro-antd/popconfirm"; import { NzTableComponent, NzTableModule, NzTdAddOnComponent, } from "ng-zorro-antd/table"; import {NzTreeSelectComponent} from "ng-zorro-antd/tree-select"; import {DictionaryPipe} from "../../../pipes/common/dictionary.pipe"; import {GoodsStatusPipe} from "../../../pipes/goods/goods-status.pipe"; import {NzConfigService} from "ng-zorro-antd/core/config"; const getBase64 = (file: File): Promise => new Promise((resolve, reject) => { const reader = new FileReader(); reader.readAsDataURL(file); reader.onload = () => resolve(reader.result); reader.onerror = error => reject(error); }); @Component({ selector: 'app-goods-list', standalone: true, imports: [ FormsModule, NzButtonComponent, NzColDirective, NzFormControlComponent, NzFormDirective, NzFormItemComponent, NzFormLabelComponent, NzInputDirective, NzRowDirective, ReactiveFormsModule, NgForOf, NzOptionComponent, NzSelectComponent, NzModalModule, NgIf, NzUploadComponent, NzIconDirective, NzImageModule, NgStyle, NzTableComponent, NzTdAddOnComponent, NzTableModule, DictionaryPipe, DatePipe, NzImageDirective, NzTreeSelectComponent, NzDividerComponent, NzPopconfirmDirective, GoodsStatusPipe ], templateUrl: './goods-list.component.html', styleUrl: './goods-list.component.less' }) export class GoodsListComponent { // 表单页数 tablePageNum = 1; // 表单数据 tableData: any = { total: 0, loading: false, list: [], }; // 搜索表单 searchForm: FormGroup; // 图片 listImg: NzUploadFile[] = [] bannerImg: NzUploadFile[] = [] detailImg: NzUploadFile[] = [] baseUrl = environment.baseUrl; imageUrl = environment.imageUrl; // 展示图片 previewImage: string | undefined = ''; // 上传是否展示 previewVisible = false; // 编辑产品类型表单 editForm: FormGroup; // 编辑弹出框 isVisibleEdit = false; // 商品类型数据 nodes = []; nodesBrand = []; protected readonly fallbackImg = fallbackImg; constructor(private fb: NonNullableFormBuilder, private msg: NzMessageService, private commonService: CommonService, private goodsService: GoodsService) { // 初始化搜索框 this.searchForm = this.fb.group({ title: [''], goodsType: [''], goodsBrand: [''], type: [''], status: [''], }); // 初始化 this.editForm = this.fb.group({ title: ['' , [Validators.required]], goodsType: ['' , [Validators.required]], type: ['' , [Validators.required]], goodsBrand: ['' , [Validators.required]], id: [null], goodsLabel: [''], goodsExplain: [''], }); this.getRequest(); this.getGoodsTypeNode(); this.getGoodsBrandNode(); } // 查询列表 public getRequest(reset: boolean = false) { this.tableData.loading = true; if (reset) { this.tablePageNum = 1; } this.searchForm.value.pageNum = this.tablePageNum; this.searchForm.value.pageSize = 10; this.searchForm.value.time = new Date().getTime(); this.goodsService.getListGoods(this.searchForm.value , (data: any) => { if (data['return_code'] == '000000') { this.tableData = data['return_data']; } else { this.msg.error(data['return_msg']); } this.tableData.loading = false; }); } // 唤醒编辑表单 showEdit(item?: any) { if (item != null) { item.businessType = String(item.businessType); this.editForm.patchValue(item); if (!this.commonService.whetherStringIsNull(item.listImg)) { this.listImg = this.commonService.stitchImg(item.listImg); } if (!this.commonService.whetherStringIsNull(item.bannerImg)) { this.bannerImg = this.commonService.stitchImg(item.bannerImg); } if (!this.commonService.whetherStringIsNull(item.detailImg)) { this.detailImg = this.commonService.stitchImg(item.detailImg); } } this.isVisibleEdit = true; } // 编辑表单提交 handleEdit(): void { if (this.editForm.valid) { if (this.listImg.length !== 0) { this.editForm.value.listImg = this.commonService.imgList(this.listImg); } else { this.msg.error("请上传列表图片") } if (this.bannerImg.length !== 0) { this.editForm.value.bannerImg = this.commonService.imgList(this.bannerImg); } else { this.msg.error("请上传轮播图片") } if (this.detailImg.length !== 0) { this.editForm.value.detailImg = this.commonService.imgList(this.detailImg); } else { this.msg.error("请上传详情图片") } this.goodsService.editGoodsMsg(this.editForm.value , (data: any) => { if (data['return_code'] === '000000') { this.msg.success("成功!"); this.isVisibleEdit = false; this.getRequest(); } else { this.msg.error(data['return_msg']); } }); } else { Object.values(this.editForm.controls).forEach(control => { if (control.invalid) { control.markAsDirty(); control.updateValueAndValidity({ onlySelf: true }); } }); } } // 上传操作 handlePreview = async (file: NzUploadFile): Promise => { if (!file.url && !file['preview']) { file['preview'] = await getBase64(file.originFileObj!); } this.previewImage = file.url || file['preview']; this.previewVisible = true; }; // 删除 delete(id: number): void { this.goodsService.deleteBran(id , (data: any) => { if (data['return_code'] === '000000') { this.msg.success("成功!"); this.getRequest(); } else { this.msg.error(data['return_msg']); } }); } // 获取商品分类 getGoodsTypeNode() { this.goodsService.getList({time: new Date().getTime()}, (data: any) => { if (data['return_code'] === '000000') { this.getNode(data['return_data']); } }); } // 配置数据 getNode(array: any): any { array.forEach((item: any) => { if (item.children) { this.getNode(item.children); }else { item["isLeaf"] = true; } item["key"] = item.id; }); this.nodes = array; } // 获取商品品牌 getGoodsBrandNode() { this.goodsService.getListBrandAll( (data: any) => { if (data['return_code'] == '000000') { this.nodesBrand = data['return_data']; } }); } }