Net Core教程

.NET经销商实战(九)——侧边栏数据联动与优化

本文主要是介绍.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的改造

这篇关于.NET经销商实战(九)——侧边栏数据联动与优化的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!