import {Component, OnInit} from '@angular/core'; import {FormBuilder, FormGroup, Validators} from '@angular/forms'; import {GoodsService} from '../../../services/goods/goods.service'; import {environment} from '../../../../environments/environment'; import {NzModalService, NzNotificationService, NzUploadFile} from 'ng-zorro-antd'; import {CommonsService} from '../../../services/commons.service'; import {AgentService} from '../../../services/agent.service'; import {CouponService} from '../../../services/coupon.service'; import {PresentType} from '../../../enum/present-type.enum'; @Component({ selector: 'app-list', templateUrl: './list.component.html', styleUrls: ['./list.component.scss'] }) export class ListComponent implements OnInit { // 搜索框 searchForm: FormGroup; // 商品表单 validateForm: FormGroup; // 商品sku表单 validateFormSku: FormGroup; url = environment; // 列表数据 requestData = []; // 总数 total: number; // 页码 pageNum = 1; // 条码 pageSize = 10; // 等待 loading = false; // 是否修改 editFlag = false; // 编辑等待 isSpinningEdit = false; // 弹出框编辑商品 isVisibleEdit = false; // 弹出框编辑sku isVisibleSku = false; // 商品标题 title: string; // 商品ID goodsId: number; // 商品类型数据 goodsTypeData; // 展示大图图片 previewImage: string | undefined = ''; previewVisible = false; // 列表图片 listImg = []; // 轮播图 bannerImg = []; // 详情图 detailImg = []; // sku展示小图 showImg = []; // sku轮播图 bannerSkuImg = []; // sku弹出框 isVisibleSkuList = false; // SKU列表等待 loadingSku = false; // SKU数据 skuData = []; skuId = null; isVisiblePresent = false; // 优惠券数据 discountList = []; // 卡券列表 listOfOption = []; // 赠送内容 listOfControl = [{ isEdit: true, agentId: null, num: null, sourceId: null, agentName: null, goodsId: null, sourceName: null, type: null, }]; // 代理商列表 agentData = []; presentType = PresentType; isVisiblePresentList = false; presentData = []; constructor( private form: FormBuilder, private notification: NzNotificationService, private commonsService: CommonsService, private modalService: NzModalService, private agent: AgentService, private coupon: CouponService, private goods: GoodsService ) { } // 输入框内容 formatterPercent = (value: number): string => `${value == null ? 0 : value} ¥`; parserPercent = (value: string): string => value.replace(' ¥', ''); ngOnInit(): void { // 初始化搜索表单 this.searchForm = this.form.group({ name: [null], status: [null], goodsLabel: [null], }); // 初始化商品表单 this.validateForm = this.form.group({ name: [null, [Validators.required]], goodsType: [null, [Validators.required]], goodsLabel: [null], listDescribe: [null], }); // 初始化商品表单 this.validateFormSku = this.form.group({ name: [null, [Validators.required]], price: [null, [Validators.required]], originalPrice: [null, [Validators.required]], stock: [null, [Validators.required]], }); // 获取商品分类树 this.goods.getGoodsTypeTree(3, data => { if (data['return_code'] === '000000') { this.goodsTypeData = data['return_data']; } }); this.getRequest(true, this.searchForm.value); this.agent.getListAgent({ pageNum: 1 , pageSize: 800 , type: 1 }, data => { if (data['return_code'] === '000000') { this.agentData = data['return_data'].list; } }); this.coupon.getCouponListByAll({} , data => { if (data['return_code'] === '000000') { this.listOfOption = data['return_data']; } }); } // 查询列表 public getRequest(reset: boolean = false, whereObject: object) { this.loading = true; if (reset) { this.pageNum = 1; } whereObject['pageNum'] = this.pageNum; whereObject['pageSize'] = this.pageSize; this.goods.getListGoodsDetail(whereObject, data => { this.loading = false; if (data['return_code'] === '000000') { this.requestData = data['return_data'].list; this.total = data['return_data'].total; } else { this.notification.error('失败', data['return_msg']); } }); } public getDiscount(id: number): void { const whereObject = {}; whereObject['pageNum'] = 1; whereObject['pageSize'] = 10000; whereObject['agentId'] = id; this.agent.getDiscountAgentList(whereObject, data => { if (data['return_code'] === '000000') { this.discountList = data['return_data'].list; } }); } getSourceNameName(id: number , i , presentType: any ) { console.log(i); if (presentType === this.presentType.discountName) { this.listOfControl[i].sourceName = this.discountList.find(item => { return item.id === id; })['highDiscount'].discountName; } if (presentType === this.presentType.couponName) { this.listOfControl[i].sourceName = this.listOfOption.find(item => { return item.id === id; }).couponName; } if (presentType === this.presentType.agentName) { this.getDiscount(id); this.listOfControl[i].agentName = this.agentData.find(item => { return item.id === id; })['agentName']; } } // 编辑产品 public getEdit(id?: number): void { this.isVisibleEdit = true; this.resetForm(); this.goodsId = id; if (id != null) { this.editFlag = true; this.findGoodsDetailById(id); } } // 查询商品详情 public findGoodsDetailById(id: number): void { this.goods.findGoodsDetailById(id , data => { if (data['return_code'] === '000000') { if (!this.commonsService.whetherStringIsNull(data['return_data']['listImg'])) { this.listImg = this.commonsService.stitchImg(data['return_data']['listImg']); } if (!this.commonsService.whetherStringIsNull(data['return_data']['bannerImg'])) { this.bannerImg = this.commonsService.stitchImg(data['return_data']['bannerImg']); } if (!this.commonsService.whetherStringIsNull(data['return_data']['detailImg'])) { this.detailImg = this.commonsService.stitchImg(data['return_data']['detailImg']); } this.validateForm.patchValue(data['return_data']); } }); } // 确认提交 public handleOkEdit() { for (const i in this.validateForm.controls) { this.validateForm.controls[i].markAsDirty(); this.validateForm.controls[i].updateValueAndValidity(); if (this.validateForm.controls[i].errors != null) { return; } } if (this.listImg.length === 0 || this.bannerImg.length === 0 || this.detailImg.length === 0) { this.notification.error('错误', '相关图片未上传!'); } this.validateForm.value.listImg = this.commonsService.postImg(this.listImg); this.validateForm.value.bannerImg = this.commonsService.postImg(this.bannerImg); this.validateForm.value.detailImg = this.commonsService.postImg(this.detailImg); if (this.editFlag) { this.validateForm.value.id = this.goodsId; this.isSpinningEdit = true; this.goods.updateGoods(this.validateForm.value, data => { this.isSpinningEdit = false; if (data['return_code'] === '000000') { this.notification.success('成功', '修改成功!'); this.isVisibleEdit = false; this.getRequest(false, this.searchForm.value); } else { this.notification.error('失败', data['return_msg']); } }); } else { this.goods.insertGoods(this.validateForm.value, data => { this.isSpinningEdit = false; if (data['return_code'] === '000000') { this.notification.success('成功', '添加成功!'); this.isVisibleEdit = false; this.getRequest(false, this.searchForm.value); } else { this.notification.error('失败', data['return_msg']); } }); } } // 清空上传表单 private resetForm() { this.editFlag = false; this.validateForm.reset(); this.listImg = []; this.bannerImg = []; this.detailImg = []; } // 图片查看 handlePreview = async (file: NzUploadFile) => { if (!file.url && !file.preview) { file.preview = await this.getBase64(file.originFileObj!); } this.previewImage = file.url || file.preview; this.previewVisible = true; } // 图片转换成base64 getBase64(file: File): Promise { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.readAsDataURL(file); reader.onload = () => resolve(reader.result); reader.onerror = error => reject(error); }); } public configSku(id: number , skuId?: number) { this.isVisibleSku = true; this.goodsId = id; this.skuId = skuId; if (skuId != null) { this.findGoodsSkuById(skuId); } } // sku编辑 public handleOkSku() { for (const i in this.validateFormSku.controls) { this.validateFormSku.controls[i].markAsDirty(); this.validateFormSku.controls[i].updateValueAndValidity(); if (this.validateFormSku.controls[i].errors != null) { return; } } if (this.showImg.length === 0 || this.bannerSkuImg.length === 0) { this.notification.error('错误', '相关图片未上传!'); } if (this.showImg[0]['response'] != null) { this.validateFormSku.value.showImg = this.showImg[0]['response']['return_data'][0]; } else { this.validateFormSku.value.showImg = this.showImg[0].name; } if (this.bannerSkuImg[0]['response'] != null) { this.validateFormSku.value.bannerImg = this.bannerSkuImg[0]['response']['return_data'][0]; } else { this.validateFormSku.value.bannerImg = this.bannerSkuImg[0].name; } this.validateFormSku.value.goodsId = this.goodsId; if (this.skuId != null) { this.validateFormSku.value.id = this.skuId; this.isSpinningEdit = true; this.goods.updateGoodsSku(this.validateFormSku.value, data => { this.isSpinningEdit = false; if (data['return_code'] === '000000') { this.notification.success('成功', '修改成功!'); this.isVisibleSku = false; this.skuId = null; this.getListGoodsSku({goodsId : this.goodsId}); } else { this.notification.error('失败', data['return_msg']); } }); } else { this.goods.insertGoodsSku(this.validateFormSku.value, data => { this.isSpinningEdit = false; if (data['return_code'] === '000000') { this.notification.success('成功', '添加成功!'); this.isVisibleSku = false; this.getListGoodsSku({goodsId : this.goodsId}); } else { this.notification.error('失败', data['return_msg']); } }); } } // 展示sku列表 public getSku(id: number): void { this.goodsId = id; this.isVisibleSkuList = true; this.getListGoodsSku({goodsId : id}); } // 展示配置规则 public configPresent(id: number): void { this.goodsId = id; this.listOfControl = [{ isEdit: true, agentId: null, goodsId: id, num: null, sourceId: null, agentName: null, sourceName: null, type: null, }]; this.isVisiblePresent = true; } // 查询sku列表 public getListGoodsSku( whereObject: object): void { this.loadingSku = true; this.goods.getListGoodsSku(whereObject , data => { this.loadingSku = false; if (data['return_code'] === '000000') { this.skuData = data['return_data']; } }); } // 查询sku详情 public findGoodsSkuById(id: number): void { this.goods.findGoodsSkuById(id , data => { if (data['return_code'] === '000000') { if (!this.commonsService.whetherStringIsNull(data['return_data']['showImg'])) { this.showImg = this.commonsService.stitchImg(data['return_data']['showImg']); } if (!this.commonsService.whetherStringIsNull(data['return_data']['bannerImg'])) { this.bannerSkuImg = this.commonsService.stitchImg(data['return_data']['bannerImg']); } this.validateFormSku.patchValue(data['return_data']); } }); } // 删除sku public deleteSku(id): void { this.modalService.confirm({ nzTitle: '确定删除', nzOkText: '是', nzOnOk: () => { this.goods.deleteSku(id, data => { if (data['return_code'] === '000000') { this.notification.success('成功', `删除成功!`); this.getListGoodsSku({goodsId : this.goodsId}); } else { this.notification.error('失败', data['return_msg']); } }); }, nzCancelText: '否', }); } // 商品的上下架 public goodsUpDown(id: number , status: number): void { this.modalService.confirm({ nzTitle: status === 2 ? '是否申请上线' : '是否禁用', nzOkText: '是', nzOnOk: () => { this.goods.goodsUpDown(id, data => { if (data['return_code'] === '000000') { this.notification.success('成功', `操作成功!`); this.getRequest(false, this.searchForm.value); } else { this.notification.error('失败', data['return_msg']); } }); }, nzCancelText: '否', }); } // 删除商品 public deleteGoods(id): void { this.modalService.confirm({ nzTitle: '确定删除', nzOkText: '是', nzOnOk: () => { this.goods.deleteGoods(id, data => { if (data['return_code'] === '000000') { this.notification.success('成功', `删除成功!`); this.getRequest(false, this.searchForm.value); } else { this.notification.error('失败', data['return_msg']); } }); }, nzCancelText: '否', }); } // 删除 removeField(i, e: MouseEvent): void { e.preventDefault(); if (this.listOfControl.length > 1) { this.listOfControl.splice(i, 1); this.listOfControl[i - 1].isEdit = true; } } // 新增 addField(i): void { if ( this.listOfControl[i].type == null || this.listOfControl[i].sourceId == null || this.listOfControl[i].num == null ) { this.notification.error('失败' , '请填写必填项!'); return; } if ( this.listOfControl[i].type === 2 && this.listOfControl[i].agentId == null ) { this.notification.error('失败' , '请选择代理商!'); return; } this.listOfControl[i].isEdit = false; const control = { isEdit: true, agentId: null, goodsId: this.goodsId , num: null, sourceId: null, agentName: null, sourceName: null, type: null, }; this.listOfControl.push(control); } handleOk(): void { for (const item of this.listOfControl) { if (item.sourceId != null) { this.goods.insertPresent(item , data => { if (data['return_code'] !== '000000') { this.notification.error('失败', data['return_msg']); return; } }); } } this.isVisiblePresent = false; this.notification.success('成功', `新增成功!`); } public getListPresent( whereObject: object): void { this.loadingSku = true; this.goods.getListPresent(whereObject , data => { this.loadingSku = false; if (data['return_code'] === '000000') { this.presentData = data['return_data']; } }); } public getPresent(id: number): void { this.goodsId = id; this.isVisiblePresentList = true; this.getListPresent({goodsId : id}); } public deletePresent(id): void { this.modalService.confirm({ nzTitle: '确定删除', nzOkText: '是', nzOnOk: () => { this.goods.deletePresent(id, data => { if (data['return_code'] === '000000') { this.notification.success('成功', `删除成功!`); this.getListPresent({goodsId : this.goodsId}); } else { this.notification.error('失败', data['return_msg']); } }); }, nzCancelText: '否', }); } }