为了让我们的侧边栏和我们整体的系统联动起来,我们需要改造一下我们后端的GetProductType接口
开始改造,将这个接口加一个参数,就是我们的sysNo,产品类型的no,为了让前端整体产品列表所有的效果联动起来,我们也需要将产品列表中新增一个查询条件,GetProductDto新增一个产品类型查询条件
using System; using System.Collections.Generic; using System.Linq; using System.Threading.Tasks; using DealerPlatform.Domain; using DealerPlatform.Domain.GlobalDto; using DealerPlatform.Service.ProductApp.Dto; using DealerPlatform.Service.ProductApp.Vo; namespace DealerPlatform.Service.ProductApp { public interface IProductService : IocTag { Task<IEnumerable<ProductDto>> GetProductDto(string productType, string systemNo, PageWithSortDto dto);//新增productType查询条件 Task<IEnumerable<ProductTypeVo>> GetProductType(string sysNo);//新增sysNo查询条件 Task<List<BelongTypeVo>> GetBelongTypesAsync(); } }
using System; using System.Collections.Generic; using System.Linq; using System.Threading.Tasks; using AutoMapper; using DealerPlatform.Core.Repository; using DealerPlatform.Domain.GlobalDto; using DealerPlatform.Domain.Models; using DealerPlatform.Service.ProductApp.Dto; using DealerPlatform.Service.ProductApp.Vo; namespace DealerPlatform.Service.ProductApp { public partial class ProductService : IProductService { public ProductService( IRepository<Product> productRepo, IRepository<ProductSale> productSaleRepo, IRepository<ProductSaleAreaDiff> productSaleAreaDiffRepo, IRepository<ProductPhoto> productPhotoRepo, IMapper mapper) { ProductRepo = productRepo; ProductSaleRepo = productSaleRepo; ProductSaleAreaDiffRepo = productSaleAreaDiffRepo; ProductPhotoRepo = productPhotoRepo; Mapper = mapper; } public IRepository<Product> ProductRepo { get; } public IRepository<ProductSale> ProductSaleRepo { get; } public IRepository<ProductSaleAreaDiff> ProductSaleAreaDiffRepo { get; } public IRepository<ProductPhoto> ProductPhotoRepo { get; } public IMapper Mapper { get; } /// <summary> /// 获取商品数据 /// </summary> /// <returns></returns> public async Task<IEnumerable<ProductDto>> GetProductDto(string? productType, string systemNo, PageWithSortDto dto) { dto.Sort ??= "ProductName"; // int skipNum = (pageIndex - 1) * pageSize; // var products = (from p in (await ProductRepo.GetListAsync()) // orderby p.GetType().GetProperty(sort).GetValue(p) // select p).Skip(skipNum).Take(pageSize).ToList(); //获取商品主档信息 var products = await ProductRepo.GetListAsync(dto, s => (s.TypeNo == productType || string.IsNullOrWhiteSpace(productType)) && (s.SysNo == systemNo || string.IsNullOrWhiteSpace(systemNo))); var dtos = Mapper.Map<List<ProductDto>>(products); var productPhotos = await GetProductPhotosByProductNo(dtos.Select(s => s.ProductNo).ToArray()); var productSales = await GetProductSalesByProductNo(dtos.Select(s => s.ProductNo).ToArray()); dtos.ForEach(s => { s.ProductPhoto = productPhotos.FirstOrDefault(c => c.ProductNo == s.ProductNo); s.ProductSale = productSales.FirstOrDefault(c => c.ProductNo == s.ProductNo); }); //根据productId取到属性 return dtos; } public async Task<IEnumerable<ProductTypeVo>> GetProductType(string sysNo) { return await Task.Run(() => { var productType = ProductRepo.GetQueryable().Where(s => s.SysNo == sysNo && !string.IsNullOrWhiteSpace(s.TypeName)).Select(s => new ProductTypeVo { TypeNo = s.TypeNo, TypeName = s.TypeName, }).Distinct().ToList(); return productType; }); } /// <summary> /// 商品类型查询列表 /// </summary> /// <returns></returns> public async Task<List<BelongTypeVo>> GetBelongTypesAsync() { var data = ProductRepo.GetQueryable().Select(s => new BelongTypeVo { SysNo = s.SysNo, BelongTypeName = s.BelongTypeName, // BelongTypeNo = s.BelongTypeNo }).Distinct(); return data.ToList(); } } }
using System; using System.Collections.Generic; using System.Linq; using System.Threading.Tasks; using DealerPlatform.Domain.GlobalDto; using DealerPlatform.Service.ProductApp; using DealerPlatform.Service.ProductApp.Dto; using DealerPlatform.Service.ProductApp.Vo; using Microsoft.AspNetCore.Authentication.JwtBearer; using Microsoft.AspNetCore.Authorization; using Microsoft.AspNetCore.Mvc; namespace DealerPlatform.Web.Controllers { // [Authorize(AuthenticationSchemes = JwtBearerDefaults.AuthenticationScheme)] public class ProductController : BaseController { public ProductController(IProductService productService) { ProductService = productService; } public IProductService ProductService { get; } [HttpGet] public async Task<IEnumerable<ProductDto>> GetProductDtosAsync(string? productType, string? systemNo = "板材", string? sort = "", int pageIndex = 1, int pageSize = 30, OrderType orderType = OrderType.Asc) { sort ??= "ProductName"; var data = await ProductService.GetProductDto(productType, systemNo, new PageWithSortDto { Sort = sort, PageIndex = pageIndex, PageSize = pageSize, OrderType = orderType }); return data; } [HttpGet] public async Task<IEnumerable<ProductTypeVo>> GetProductType(string sysNo) { var data = await ProductService.GetProductType(sysNo); return data; } [HttpGet] public async Task<List<BelongTypeVo>> GetBelongTypesAsync() { var data = await ProductService.GetBelongTypesAsync(); return data; } } }
如上就是接口修改参数的全部代码,后端改造完毕,下面我们来改前端代码
首先前端应该新增接口,httpRequest文件夹下的ProductListRequest代码如下:
import axios from 'axios' import { IProductInputDto } from '@/Interfaces/ProductList' axios.defaults.baseURL = "http://localhost:5011/" export const getProduct = async (data: IProductInputDto) => { var res = await axios.get("Product/GetProductDtos", { params: data }); return res.data; } export const getBelongType = async () => { var res = await axios.get("Product/GetBelongTypes"); return res.data; } export const getProductType = async (belongTypeName: string) => { var res = await axios.get("Product/GetProductType?belongTypeName=" + belongTypeName); return res.data; }
import { getBelongType } from './../httpRequests/ProductListRequest'; export interface IProductInputDto { systemNo: string, productType: string | null, sort: string, pageIndex: number, } export interface IProductInfo { systemIndex: string, products: IProduct[], belongTypes: IBelongType[], typeSelected: string, productTypes: IProductType[], getProducts: (systemIndex: string, productType: string | null) => void, getBelongType: () => void, getProductType: (belongTypeName: string) => void tranPrice: (price: number) => string } export interface IProductType { typeNo: string; typeName: string; } export interface IProduct { id: number; sysNo: string; productNo: string; productName: string; typeNo: string; typeName: string; productPp: string; productXh: string; productCz: string; productHb: string; productHd: string; productGy: string; productHs: string; productMc: string; productDj: string; productCd: string; productGg: string; productYs: string; unitNo: string; unitName: string; productNote: string; productBzgg: string; belongTypeNo: string; belongTypeName: string; productPhoto: IProductPhoto; productSale: IProductSale; } export interface IBelongType { sysNo: string; belongTypeName: string; } export interface IProductPhoto { sysNo: string | null; productNo: string; productPhotoUrl: string; } export interface IProductSale { sysNo: string; productNo: string; stockNo: string | null; salePrice: number; }
本章内容就写到这了,下一章我将介绍ProductList的改造