.NET经销商实战(九)——侧边栏数据联动与优化
作者：互联网
为了让我们的侧边栏和我们整体的系统联动起来,我们需要改造一下我们后端的GetProductType接口
开始改造,将这个接口加一个参数,就是我们的sysNo,产品类型的no,为了让前端整体产品列表所有的效果联动起来,我们也需要将产品列表中新增一个查询条件,GetProductDto新增一个产品类型查询条件
1.IProductService代码如下:
点击查看代码
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();
}
}
2.ProductService代码如下:
点击查看代码
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();
}
}
}
3.ProductController代码如下:
点击查看代码
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代码如下:
4.ProductListRequest.ts代码如下
点击查看代码
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;
}
5.Interfaces文件夹下的ProductList.ts代码如下:
点击查看代码
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的改造
标签：string,data,侧边,联动,var,using,NET,DealerPlatform,public 来源： https://www.cnblogs.com/humblexwang/p/16287212.html