From 23da51c67ec9b46a16335ffa76a5bae9868f6066 Mon Sep 17 00:00:00 2001 From: yuanye <418471657@qq.com> Date: Sat, 11 May 2024 10:42:31 +0800 Subject: [PATCH] 1 --- .../sys-account/sys-account.component.html | 16 +- .../account/sys-role/sys-role.component.html | 6 +- .../pages/account/user/user.component.html | 6 +- src/app/pages/body/index/index.component.ts | 4 + .../goods-brand/goods-brand.component.html | 4 +- .../goods-brand/goods-brand.component.ts | 3 +- .../goods-list/goods-list.component.html | 237 +++++++++++++++ .../goods-list/goods-list.component.less | 12 + .../goods/goods-list/goods-list.component.ts | 270 ++++++++++++++++++ .../goods-type/goods-type.component.html | 4 +- src/app/pages/goods/goods.routes.ts | 2 + .../merchant/mer-add/mer-add.component.html | 14 +- .../merchant/mer-list/mer-list.component.html | 22 +- src/app/pages/system/menu/menu.component.html | 2 +- src/app/pipes/goods/goods-status.pipe.ts | 24 ++ src/app/pipes/goods/goods-type.pipe.ts | 13 - src/app/services/goods/goods.service.ts | 34 ++- 17 files changed, 619 insertions(+), 54 deletions(-) create mode 100644 src/app/pages/goods/goods-list/goods-list.component.html create mode 100644 src/app/pages/goods/goods-list/goods-list.component.less create mode 100644 src/app/pages/goods/goods-list/goods-list.component.ts create mode 100644 src/app/pipes/goods/goods-status.pipe.ts delete mode 100644 src/app/pipes/goods/goods-type.pipe.ts diff --git a/src/app/pages/account/sys-account/sys-account.component.html b/src/app/pages/account/sys-account/sys-account.component.html index 549fdb8..d2d21e6 100644 --- a/src/app/pages/account/sys-account/sys-account.component.html +++ b/src/app/pages/account/sys-account/sys-account.component.html @@ -4,7 +4,7 @@ 用户名 - + @@ -12,7 +12,7 @@ 登录账户 - + @@ -20,7 +20,7 @@ 联系方式 - + @@ -28,7 +28,7 @@ 账户状态 - + @@ -100,28 +100,28 @@ 用户名 - + 登录账户 - + 联系方式 - + 角色权限 - + diff --git a/src/app/pages/account/sys-role/sys-role.component.html b/src/app/pages/account/sys-role/sys-role.component.html index 0bedbc3..e0e3b58 100644 --- a/src/app/pages/account/sys-role/sys-role.component.html +++ b/src/app/pages/account/sys-role/sys-role.component.html @@ -4,7 +4,7 @@ 角色名称 - + @@ -59,14 +59,14 @@ 角色名称 - + 角色描述 - + diff --git a/src/app/pages/account/user/user.component.html b/src/app/pages/account/user/user.component.html index c61ca0e..a5ca496 100644 --- a/src/app/pages/account/user/user.component.html +++ b/src/app/pages/account/user/user.component.html @@ -4,7 +4,7 @@ 用户名 - + @@ -13,7 +13,7 @@ 手机号 - + @@ -22,7 +22,7 @@ 状态 - + diff --git a/src/app/pages/body/index/index.component.ts b/src/app/pages/body/index/index.component.ts index b6a30c3..a113dd1 100644 --- a/src/app/pages/body/index/index.component.ts +++ b/src/app/pages/body/index/index.component.ts @@ -21,6 +21,7 @@ import {NzMessageService} from "ng-zorro-antd/message"; import {dictionaryData} from "../../../data/common/dictionary.namespace"; import {CommonService} from "../../../services/common/common.service"; import {LoginService} from "../../../services/login/login.service"; +import {NzConfigService} from "ng-zorro-antd/core/config"; @Component({ selector: 'app-index', @@ -70,10 +71,13 @@ export class IndexComponent { constructor( private commonService: CommonService, private storage: BrowserStorageService, + private nzConfigService: NzConfigService, private message: NzMessageService, private router: Router, // 路由 private login: LoginService ) { + this.nzConfigService.set('button', { nzSize: 'large' }) + this.nzConfigService.set('treeSelect', { nzSize: 'large' }) // 缓存数据字典 this.commonService.queryDictionary('','',(data: any) => { for (let item of data['return_data']) { diff --git a/src/app/pages/goods/goods-brand/goods-brand.component.html b/src/app/pages/goods/goods-brand/goods-brand.component.html index dbbcd1d..6c04244 100644 --- a/src/app/pages/goods/goods-brand/goods-brand.component.html +++ b/src/app/pages/goods/goods-brand/goods-brand.component.html @@ -4,7 +4,7 @@ 品牌名称 - + @@ -60,7 +60,7 @@ 标题 - + diff --git a/src/app/pages/goods/goods-brand/goods-brand.component.ts b/src/app/pages/goods/goods-brand/goods-brand.component.ts index 6e7bdd0..0c08a99 100644 --- a/src/app/pages/goods/goods-brand/goods-brand.component.ts +++ b/src/app/pages/goods/goods-brand/goods-brand.component.ts @@ -100,6 +100,8 @@ export class GoodsBrandComponent { // 编辑弹出框 isVisibleEdit = false; + protected readonly fallbackImg = fallbackImg; + constructor(private fb: NonNullableFormBuilder, private msg: NzMessageService, private commonService: CommonService, @@ -199,5 +201,4 @@ export class GoodsBrandComponent { }); } - protected readonly fallbackImg = fallbackImg; } diff --git a/src/app/pages/goods/goods-list/goods-list.component.html b/src/app/pages/goods/goods-list/goods-list.component.html new file mode 100644 index 0000000..483f14e --- /dev/null +++ b/src/app/pages/goods/goods-list/goods-list.component.html @@ -0,0 +1,237 @@ +
+
+
+ + 商品名称 + + + + +
+
+ + 商品分类 + + + + +
+
+ + 商品品牌 + + + + + + +
+
+ + 商品类型 + + + + + + + +
+
+ + 商品状态 + + + + + + + + +
+ +
+ + + +
+
+
+ + + + + 商品名称 + 商品图片 + 商品类型 + 商品分类 + 商品品牌 + 创建时间 + 更新时间 + 状态 + 操作 + + + + + {{data.title}} + + + + {{data.type == 1 ? '实物商品' : '虚拟商品'}} + {{data.goodsTypeName}} + {{data.goodsBrandName}} + {{ data.createTime | date: 'yyyy-MM-dd HH:mm'}} + {{ data.updateTime | date: 'yyyy-MM-dd HH:mm'}} + {{data.status | goodsStatus}} + + 修改 + + 删除 + + + + 总计 {{ total }} 条 + + + + + +
+ + 标题 + + + + + + 商品分类 + + + + + + 商品类型 + + + + + + + + + 商品品牌 + + + + + + + + 列表图片 + + +
+ +
上传图片
+
+ + + + + + + + + + + 轮播图片 + + +
+ +
上传图片
+
+ + + + + + + + + + + 详情图片 + + +
+ +
上传图片
+
+ + + + + + + + + +
+ + diff --git a/src/app/pages/goods/goods-list/goods-list.component.less b/src/app/pages/goods/goods-list/goods-list.component.less new file mode 100644 index 0000000..6d5c351 --- /dev/null +++ b/src/app/pages/goods/goods-list/goods-list.component.less @@ -0,0 +1,12 @@ +[nz-form-label] { + overflow: visible; +} +button { + margin-left: 8px; +} +.submit-btn { + width: 150px; +} +.search-area { + margin-top: 30px; +} diff --git a/src/app/pages/goods/goods-list/goods-list.component.ts b/src/app/pages/goods/goods-list/goods-list.component.ts new file mode 100644 index 0000000..07a30cf --- /dev/null +++ b/src/app/pages/goods/goods-list/goods-list.component.ts @@ -0,0 +1,270 @@ +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']; + } + }); + } + +} diff --git a/src/app/pages/goods/goods-type/goods-type.component.html b/src/app/pages/goods/goods-type/goods-type.component.html index c2a79c0..6766bc9 100644 --- a/src/app/pages/goods/goods-type/goods-type.component.html +++ b/src/app/pages/goods/goods-type/goods-type.component.html @@ -55,13 +55,13 @@ 标题 - + 业务类型 - + diff --git a/src/app/pages/goods/goods.routes.ts b/src/app/pages/goods/goods.routes.ts index a6aacef..5fe8d36 100644 --- a/src/app/pages/goods/goods.routes.ts +++ b/src/app/pages/goods/goods.routes.ts @@ -1,10 +1,12 @@ import { Routes } from '@angular/router'; import {GoodsTypeComponent} from "./goods-type/goods-type.component"; import {GoodsBrandComponent} from "./goods-brand/goods-brand.component"; +import {GoodsListComponent} from "./goods-list/goods-list.component"; export const GOODS_ROUTES: Routes = [ { path: 'goods_type', component: GoodsTypeComponent}, { path: 'goods_brand', component: GoodsBrandComponent}, + { path: 'goods-list', component: GoodsListComponent}, ]; diff --git a/src/app/pages/merchant/mer-add/mer-add.component.html b/src/app/pages/merchant/mer-add/mer-add.component.html index f76a706..571f73d 100644 --- a/src/app/pages/merchant/mer-add/mer-add.component.html +++ b/src/app/pages/merchant/mer-add/mer-add.component.html @@ -24,14 +24,14 @@ 登录账户 - + 角色权限 - + @@ -40,35 +40,35 @@ 商户名称 - + 商户地址 - + 负责人 - + 联系电话 - + 客服电话 - + diff --git a/src/app/pages/merchant/mer-list/mer-list.component.html b/src/app/pages/merchant/mer-list/mer-list.component.html index 352c02a..31b0214 100644 --- a/src/app/pages/merchant/mer-list/mer-list.component.html +++ b/src/app/pages/merchant/mer-list/mer-list.component.html @@ -4,7 +4,7 @@ 商户号 - + @@ -12,7 +12,7 @@ 商户名称 - + @@ -20,7 +20,7 @@ 创建人 - + @@ -28,7 +28,7 @@ 商户状态 - + @@ -139,14 +139,14 @@ 登录账户 - + 角色权限 - + @@ -155,35 +155,35 @@ 商户名称 - + 负责人 - + 联系电话 - + 商户地址 - + 客服电话 - + diff --git a/src/app/pages/system/menu/menu.component.html b/src/app/pages/system/menu/menu.component.html index 1718677..e97f270 100644 --- a/src/app/pages/system/menu/menu.component.html +++ b/src/app/pages/system/menu/menu.component.html @@ -18,7 +18,7 @@ {{menuDetail?.parentMenu?menuDetail.parentMenu.menuName:'无'}} diff --git a/src/app/pipes/goods/goods-status.pipe.ts b/src/app/pipes/goods/goods-status.pipe.ts new file mode 100644 index 0000000..52f3586 --- /dev/null +++ b/src/app/pipes/goods/goods-status.pipe.ts @@ -0,0 +1,24 @@ +import { Pipe, PipeTransform } from '@angular/core'; + +@Pipe({ + name: 'goodsStatus', + standalone: true +}) +export class GoodsStatusPipe implements PipeTransform { + + transform(value: number): any { + switch (value) { + case 1: + return '上线中'; + case 2: + return '编辑中'; + case 3: + return '审核中'; + default: + return '未知状态' + } + } + + + +} diff --git a/src/app/pipes/goods/goods-type.pipe.ts b/src/app/pipes/goods/goods-type.pipe.ts deleted file mode 100644 index 3d783d5..0000000 --- a/src/app/pipes/goods/goods-type.pipe.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { Pipe, PipeTransform } from '@angular/core'; - -@Pipe({ - name: 'goodsType', - standalone: true -}) -export class GoodsTypePipe implements PipeTransform { - - transform(value: unknown, ...args: unknown[]): unknown { - return null; - } - -} diff --git a/src/app/services/goods/goods.service.ts b/src/app/services/goods/goods.service.ts index 38faae0..15b2ff1 100644 --- a/src/app/services/goods/goods.service.ts +++ b/src/app/services/goods/goods.service.ts @@ -45,7 +45,7 @@ export class GoodsService { } /** - * 编辑商品类型 + * 编辑商品品牌 * @param params * @param callBack */ @@ -56,7 +56,7 @@ export class GoodsService { } /** - * 查询列表 + * 查询品牌列表 * @param params * @param callBack */ @@ -66,8 +66,14 @@ export class GoodsService { }); } + public getListBrandAll(callBack:any) { + this.http.get(environment.baseUrl + 'goodsBrand/getListBrandAll').subscribe(data => { + callBack(data); + }); + } + /** - * 删除 + * 删除品牌 * @param id * @param callBack */ @@ -77,4 +83,26 @@ export class GoodsService { }); } + /** + * 获取商品列表 + * @param params + * @param callBack + */ + public getListGoods(params: object, callBack:any) { + this.http.get(environment.baseUrl + 'goods/getListGoods?' + ObjectData.objectByString(params)).subscribe(data => { + callBack(data); + }); + } + + /** + * 编辑商品信息 + * @param params + * @param callBack + */ + public editGoodsMsg(params: object, callBack:any) { + this.http.post(environment.baseUrl + 'goods/editGoodsMsg', params).subscribe(data => { + callBack(data); + }); + } + }