提交 7f13c112 作者: 龚洪江

修复:更改正式服地址

上级 289b9d7e
#请求接口地址 #请求接口地址
#VITE_REQUEST_BASE_URL='https://www.iuav.shop' VITE_REQUEST_BASE_URL='https://www.iuav.shop'
#VITE_REQUEST_BASE_URL='https://test.iuav.shop' #VITE_REQUEST_BASE_URL='https://test.iuav.shop'
#VITE_REQUEST_BASE_URL='https://iuav.mmcuav.cn' #VITE_REQUEST_BASE_URL='https://iuav.mmcuav.cn'
VITE_REQUEST_BASE_URL='/api' #VITE_REQUEST_BASE_URL='/api'
#旧版接口地址 #旧版接口地址
#VITE_REQUEST_BASE_URL='https://iuav.mmcuav.cn' #VITE_REQUEST_BASE_URL='https://iuav.mmcuav.cn'
#VITE_REQUEST_BASE_URL='https://test.iuav.mmcuav.cn' #VITE_REQUEST_BASE_URL='https://test.iuav.mmcuav.cn'
......
...@@ -127,6 +127,7 @@ const Index: React.FC<propsType> = (props) => { ...@@ -127,6 +127,7 @@ const Index: React.FC<propsType> = (props) => {
style={{ width: item.width ? `${item.width}px` : '180px' }} style={{ width: item.width ? `${item.width}px` : '180px' }}
placeholder={item.placeholder} placeholder={item.placeholder}
allowClear allowClear
onSelect={item.onSelect}
> >
{item.options.map((option: any) => { {item.options.map((option: any) => {
return ( return (
......
.from-table-wrap { .from-table-wrap {
position: relative; position: relative;
.header-view {
position: relative;
width: 100%;
min-height: 60px;
height: auto;
background: #fff;
border-radius: 8px;
display: flex;
justify-content: flex-start;
align-content: center;
flex-wrap: wrap;
padding: 15px 20px 5px 20px;
margin: 0 0 10px 0;
.ant-select-selector {
min-width: 200px;
}
.ant-row {
margin-bottom: 10px;
}
.add-button {
margin-right: 15px;
}
}
} }
.detail-wrap { .detail-wrap {
position: relative; position: relative;
......
import React, { useEffect, useState } from 'react'; import React, { useEffect, useRef, useState } from 'react';
import './index.scss'; import './index.scss';
import { Button, Form, Input, message, Modal, Select, Table } from 'antd'; import { Button, message, Modal, Table } from 'antd';
import { useNavigate } from 'react-router-dom'; import { useNavigate, useSearchParams } from 'react-router-dom';
import { ColumnsType } from 'antd/es/table'; import { ColumnsType } from 'antd/es/table';
import { CategoryManageAPI, MakeManageAPI, ProduceManageAPI } from '~/api'; import { CategoryManageAPI, MakeManageAPI, ProduceManageAPI } from '~/api';
import AddOrEditProduce from './components/addOrEditProduceModal'; import AddOrEditProduce from './components/addOrEditProduceModal';
import { InterDataType, InterReqType, PaginationProps } from '~/api/interface'; import { InterDataType, InterReqType, PaginationProps } from '~/api/interface';
import { addProductType, productListType } from '~/api/interface/produceManageType'; import { addProductType, productListType } from '~/api/interface/produceManageType';
import { categoryListType, directoryListType } from '~/api/interface/categoryManage'; import { directoryListType } from '~/api/interface/categoryManage';
import { MakeListType } from '~/api/interface/makeManage'; import { MakeListType } from '~/api/interface/makeManage';
import { PlusOutlined } from '@ant-design/icons'; import { PlusOutlined } from '@ant-design/icons';
import qs from 'query-string';
import SearchBox, { searchColumns } from '~/components/search-box';
//产品列表返回类型 //产品列表返回类型
type produceListType = InterDataType<productListType>['list']; type produceListType = InterDataType<productListType>['list'];
//产品列表参数类型 //产品列表参数类型
type produceParametersType = Omit<InterReqType<productListType>, 'pageSize' | 'pageNo'>; type produceParametersType = Omit<InterReqType<productListType>, 'pageSize' | 'pageNo'>;
//分类返回类型
type categoryType = InterDataType<categoryListType>['list'];
//目录返回类型 //目录返回类型
type directoryType = InterDataType<directoryListType>; type directoryType = InterDataType<directoryListType>;
//品牌返回类型 //品牌返回类型
...@@ -24,20 +24,19 @@ type makeListType = InterDataType<MakeListType>['list']; ...@@ -24,20 +24,19 @@ type makeListType = InterDataType<MakeListType>['list'];
//新增编辑表单类型 //新增编辑表单类型
type addMakeParameterType = InterReqType<addProductType>; type addMakeParameterType = InterReqType<addProductType>;
const { Option } = Select;
const { confirm } = Modal; const { confirm } = Modal;
function ProduceManage() { function ProduceManage() {
const searchRef = useRef<any>();
// 路由操作 // 路由操作
const navigate = useNavigate(); const navigate = useNavigate();
const [searchParams, setSearchParams] = useSearchParams();
// 表格数据 // 表格数据
const [tableData, setTableData] = useState<produceListType>([]); const [tableData, setTableData] = useState<produceListType>([]);
//筛选表单 //筛选表单
const [query, setQuery] = useState<produceParametersType>(); const [query, setQuery] = useState<produceParametersType>();
// 加载中 // 加载中
const [loading, setLoading] = useState<boolean>(false); const [loading, setLoading] = useState<boolean>(false);
// 产品类型下拉列表
const [productTypeSelectList, setProductTypeSelectList] = useState<categoryType>([]);
// 新增弹窗是否显示 // 新增弹窗是否显示
const [visibleAddEdit, setVisibleAddEdit] = useState(false); const [visibleAddEdit, setVisibleAddEdit] = useState(false);
// 新增弹窗内容 // 新增弹窗内容
...@@ -92,6 +91,30 @@ function ProduceManage() { ...@@ -92,6 +91,30 @@ function ProduceManage() {
pageNo: 1, pageNo: 1,
totalCount: 0, totalCount: 0,
}); });
//筛选参数
const [searchColumnsData, setSearchColumnsData] = useState<searchColumns[]>([
{
label: '产品名称',
placeholder: '请输入产品名称',
type: 'input',
name: 'productName',
},
{
label: '产品目录',
placeholder: '请输入产品名称',
type: 'select',
name: 'directoryId',
options: [],
onSelect: (value) => decSelectChange(value),
},
{
label: '产品类型',
placeholder: '请输入产品名称',
type: 'select',
name: 'categoryId',
options: [],
},
]);
// 跳转详情 // 跳转详情
const handleDetail = (record: produceListType[0]) => { const handleDetail = (record: produceListType[0]) => {
...@@ -166,10 +189,13 @@ function ProduceManage() { ...@@ -166,10 +189,13 @@ function ProduceManage() {
const paginationChange = (pageNo: number, pageSize: number) => { const paginationChange = (pageNo: number, pageSize: number) => {
pagination.pageNo = pageNo; pagination.pageNo = pageNo;
pagination.pageSize = pageSize; pagination.pageSize = pageSize;
setSearchParams(qs.stringify({ ...query, pageNo, pageSize }));
getProduceList(query); getProduceList(query);
}; };
// 表单提交 // 表单提交
const onFinish = (val: produceListType) => { const onFinish = (val: any) => {
pagination.pageNo = 1;
pagination.pageSize = 10;
// 在这里对提交的数据做处理,如range转为开始和结束时间 // 在这里对提交的数据做处理,如range转为开始和结束时间
const data = Object.fromEntries( const data = Object.fromEntries(
// 过滤为空项 // 过滤为空项
...@@ -180,6 +206,9 @@ function ProduceManage() { ...@@ -180,6 +206,9 @@ function ProduceManage() {
), ),
); );
setQuery(data); setQuery(data);
setSearchParams(
qs.stringify({ ...data, pageNo: pagination.pageNo, pageSize: pagination.pageSize }),
);
getProduceList(data); getProduceList(data);
}; };
//品牌列表 //品牌列表
...@@ -192,64 +221,84 @@ function ProduceManage() { ...@@ -192,64 +221,84 @@ function ProduceManage() {
const getDirectoryList = () => { const getDirectoryList = () => {
ProduceManageAPI.getProductDirectoryList().then(({ result }) => { ProduceManageAPI.getProductDirectoryList().then(({ result }) => {
setDecList(result || []); setDecList(result || []);
searchColumnsData[1].options = (result || []).map((v) => ({
name: v.directoryName,
id: v.id,
}));
searchColumnsData.splice(1, 1, searchColumnsData[1]);
setSearchColumnsData([...searchColumnsData]);
}); });
}; };
//根据目录获取分类 //根据目录获取分类
const getCategoryListByDirectory = (directoryId: number) => { const getCategoryListByDirectory = (directoryId: number) => {
CategoryManageAPI.getCategoryList({ pageNo: 1, pageSize: 99999, directoryId, type: 4 }).then( CategoryManageAPI.getCategoryList({ pageNo: 1, pageSize: 99999, directoryId, type: 4 }).then(
({ result }) => { ({ result }) => {
setProductTypeSelectList(result.list || []); searchColumnsData[2].options = (result.list || []).map((v) => ({
name: v.classifyName,
id: v.id,
}));
searchColumnsData.splice(2, 1, searchColumnsData[2]);
setSearchColumnsData([...searchColumnsData]);
}, },
); );
}; };
// 目录修改 // 目录修改
const decSelectChange = (value: number) => { const decSelectChange = (value: number) => {
if (value) { if (value) {
(searchRef.current as any).getForm().setFieldValue('categoryId', undefined);
getCategoryListByDirectory(value); getCategoryListByDirectory(value);
} }
}; };
// componentDidMount // componentDidMount
useEffect(() => { useEffect(() => {
getProduceList(query); pagination.pageNo = Number(searchParams.get('pageNo') || 1);
pagination.pageSize = Number(searchParams.get('pageSize') || 10);
(searchRef.current as any).getForm().setFieldsValue({
productName: searchParams.get('productName') || undefined,
directoryId: searchParams.get('directoryId')
? Number(searchParams.get('directoryId'))
: undefined,
categoryId: searchParams.get('categoryId')
? Number(searchParams.get('categoryId'))
: undefined,
});
setQuery({
productName: searchParams.get('productName') || undefined,
directoryId: searchParams.get('directoryId')
? Number(searchParams.get('directoryId'))
: undefined,
categoryId: searchParams.get('categoryId')
? Number(searchParams.get('categoryId'))
: undefined,
});
getProduceList({
productName: searchParams.get('productName') || undefined,
directoryId: searchParams.get('directoryId')
? Number(searchParams.get('directoryId'))
: undefined,
categoryId: searchParams.get('categoryId')
? Number(searchParams.get('categoryId'))
: undefined,
});
getDirectoryList(); getDirectoryList();
if (searchParams.get('directoryId')) {
getCategoryListByDirectory(Number(searchParams.get('directoryId')));
}
}, []); }, []);
return ( return (
<div className='from-table-wrap'> <div className='from-table-wrap'>
<div className='header-view'> <div className='header-view'>
<Form name='basic' layout='inline' onFinish={onFinish}> <SearchBox
<Form.Item> search={searchColumnsData}
searchData={onFinish}
child={
<Button type='primary' onClick={handleAdd} icon={<PlusOutlined />}> <Button type='primary' onClick={handleAdd} icon={<PlusOutlined />}>
新增产品 新增产品
</Button> </Button>
</Form.Item> }
<Form.Item name='productName' label='产品名称'> baseRef={searchRef}
<Input placeholder='请输入产品名称' allowClear /> />
</Form.Item>
<Form.Item name='directoryId' label='产品目录'>
<Select placeholder='请选择产品目录' onChange={decSelectChange} allowClear>
{decList.map((v, index: number) => (
<Select.Option value={v.id} key={index}>
{v.directoryName}
</Select.Option>
))}
</Select>
</Form.Item>
<Form.Item name='goodsTypeId' label='产品类型'>
<Select placeholder='请选择产品类型' allowClear>
{productTypeSelectList.map((i, j) => (
<Option value={i.id} key={j}>
{i.classifyName}
</Option>
))}
</Select>
</Form.Item>
<Form.Item>
<Button type='primary' htmlType='submit'>
搜索
</Button>
</Form.Item>
</Form>
</div> </div>
<Table <Table
size='small' size='small'
......
...@@ -5,7 +5,7 @@ import { resolve } from 'path'; ...@@ -5,7 +5,7 @@ import { resolve } from 'path';
// https://vitejs.dev/config/ // https://vitejs.dev/config/
export default defineConfig({ export default defineConfig({
base: '/', base: './',
plugins: [react(), tsconfigPaths()], plugins: [react(), tsconfigPaths()],
server: { server: {
host: '0.0.0.0', host: '0.0.0.0',
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论