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.
580 lines
19 KiB
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: '否',
|
|
});
|
|
}
|
|
|
|
}
|
|
|