.NET经销商实战(八)——前端界面代码改造



前端代码结构如上图

1.在Interfaces新增ProductList.ts文件

代码如下:

点击查看代码
export interface IProductInputDto {
	systemNo: string,
	sort: string,
	pageIndex: number,

}
export interface IProductInfo {
	products: IProduct[],
	belongTypes: IBelongType[],
	getProducts: Function,
	// tranPrice: Function(price: number): 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;
}

2.在HttpRequests文件夹新增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;
}


3.前端界面

在views中修改ProductList.vue文件如下:

点击查看代码






相关