嗨森逛PC管理端
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.
 
 
 
 
high-web/src/app/admin/goods/list/list.component.ts

580 lines
19 KiB

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<string | ArrayBuffer | null> {
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: '否',
});
}
}