Skip to content

A
admin-ci-test
提交 19dc54e9 作者: 龚洪江
操作

功能：商品分类，商品新增（未调完）

上级 95fca4a3
正在显示 包含 1345 行增加 和 158 行删除
src/api/interface/categoryManage.ts
......@@ -72,3 +72,58 @@ export type categoryDetailsType = InterFunction<
>;
//分类-关联列表
export type categoryRelevantType = InterFunction<{ id: number; type: number }, any>;
//分类管理-分类列表（新）
type categoryItemType = {
id: number;
name: string;
createTime: string;
icon: string;
description: string;
subDTOList: (Omit<categoryItemType, 'createTime' | 'icon' | 'subDTOList'> & {
categoryPrimaryId: number;
})[];
};
export type categoryListRespType = InterItemFunction<{ id?: number }, categoryItemType[]>;
//分类管理-1级分类新增（新）
export type addPrimaryCategoryType = InterFunction<
{
description: string;
icon: string;
name: string;
},
any
>;
//分类管理-1级分类编辑（新）
export type updatePrimaryCategoryType = InterFunction<
{
description: string;
icon: string;
name: string;
id?: number;
},
any
>;
//分类管理-1级分类删除（新）
export type deletePrimaryCategoryType = InterFunction<{ id: number }, any>;
//分类管理-2级分类新增(新)
export type addSubCategoryType = InterFunction<
{
categoryPrimaryId: number;
description: string;
name: string;
},
any
>;
//分类管理-2级分类编辑（新）
export type updateSubCategoryType = InterFunction<
{
categoryPrimaryId: number;
description: string;
name: string;
id?: number;
},
any
>;
//分类管理-2级分类删除（新）
export type deleteSubCategoryType = InterFunction<{ id: number }, any>;
src/api/interface/goodsType.ts
......@@ -103,3 +103,42 @@ export type batchOnShelfOrTakeDownType = InterFunction<{ goodsIds: number[]; sta
export type batchRemoveWareInfoType = InterFunction<number[], any>;
//商品-上下移动
export type exchangeGoodsInfoType = InterFunction<{ firstId: number; secondId: number }, any>;
//商品-新增（新）
export type addMallGoodsType = InterFunction<
{
categoryPrimaryId: number;
categorySubId: number;
description: string;
goodsDetails: string;
goodsLabel: string;
goodsSpecList: {
chooseType: number;
goodsSpecValuesList: {
channelPrice?: number;
id: number;
partNo: string;
salePrice: number;
showPrice: number;
specValueImage: string;
specValueName: string;
stock?: number;
}[];
id: number;
mallGoodsId: number;
must: number;
skuUnitId: number;
specName: string;
}[];
id: number;
labelShow: number;
resourcesList: {
id: number;
type: number;
url: string;
}[];
shelfStatus: number;
tradeName: string;
},
any
>;
src/api/modules/categoryManage.ts
import axios from '../request';
import {
addPrimaryCategoryType,
addSubCategoryType,
categoryDetailsType,
categoryListRespType,
categoryListType,
categoryRelevantType,
deletePrimaryCategoryType,
directoryListType,
directoryPageListType,
updatePrimaryCategoryType,
updateSubCategoryType,
} from '~/api/interface/categoryManage';
export class CategoryManageAPI {
......@@ -97,4 +103,26 @@ export class CategoryManageAPI {
static getRelevantBusiness: categoryRelevantType = (params) => {
return axios.get('/pms/classify/queryRelevantBusiness', { params });
};
// 分类管理-分类列表（新）
static getCategoryRespList: categoryListRespType = (data) =>
axios.post('/pms/category/categoryList', data);
// 分类管理-1级分类新增（新）
static addPrimaryCategory: addPrimaryCategoryType = (data) =>
axios.post('/pms/category/addPrimaryCategory', data);
// 分类管理-1级分类编辑（新）
static updatePrimaryCategory: updatePrimaryCategoryType = (data) =>
axios.post('/pms/category/updatePrimaryCategory', data);
// 分类管理-1级分类删除（新）
static deletePrimaryCategory: deletePrimaryCategoryType = (params) =>
axios.get('/pms/category/deletePrimaryCategory', { params });
// 分类管理-2级分类新增（新）
static addSubCategory: addSubCategoryType = (data) =>
axios.post('/pms/category/addSubCategory', data);
// 分类管理-2级分类编辑（新）
static updateSubCategory: updateSubCategoryType = (data) =>
axios.post('/pms/category/updateSubCategory', data);
// 分类管理-2级分类删除（新）
static deleteSubCategory: deletePrimaryCategoryType = (params) =>
axios.get('/pms/category/deleteSubCategory', { params });
}
src/api/modules/goodsAPI.ts
import {
addGoodsType,
addMallGoodsType,
batchOnShelfOrTakeDownType,
batchRemoveWareInfoType,
detailGoodsType,
......@@ -30,7 +31,7 @@ class GoodsAPI {
};
// 商品-单位
static getSkuUnit: skuUnitType = () => {
return axios.get('/pms/goods/getSkuUnit');
return axios.get('/pms/mall/goods/getSkuUnit');
};
// 商品-其它服务列表
static getOtherServiceList: otherServiceType = () => {
......@@ -48,5 +49,8 @@ class GoodsAPI {
static exchangeGoodsInfo: exchangeGoodsInfoType = (params) => {
return axios.get('/pms/goods/exchangeGoodsInfo', { params });
};
// 商品-新增（新）
static addMallGoods: addMallGoodsType = (data) =>
axios.post('/pms/mall/goods/addMallGoods', data);
}
export default GoodsAPI;
src/components/EditableCell/index.tsx
......@@ -8,7 +8,7 @@ export interface EditableCellProps extends React.HTMLAttributes<HTMLElement> {
editing: boolean;
dataIndex: string;
title: any;
inputType: 'number' | 'text' | 'select' | 'uploader' | 'radio';
inputType: 'number' | 'text' | 'select' | 'uploader' | 'radio' | 'textArea';
record: any;
index: number;
children: React.ReactNode;
......@@ -19,6 +19,7 @@ const EditableCell: React.FC<
radioOption?: { name: string; id: number }[];
uploadSuccess?: (record: any, result: any) => void;
rules?: any;
maxLength?: number;
}
> = ({
editing,
......@@ -32,6 +33,7 @@ const EditableCell: React.FC<
uploadSuccess,
children,
rules,
maxLength,
...restProps
}) => {
const inputNode = () => {
......@@ -70,8 +72,10 @@ const EditableCell: React.FC<
))}
</Radio.Group>
);
case 'textArea':
return <Input.TextArea placeholder={`请输入${title}`} maxLength={maxLength} showCount />;
default:
return <Input placeholder={`请输入${title}`} />;
return <Input placeholder={`请输入${title}`} maxLength={maxLength} />;
}
};
return (
......
src/pages/categoryManage/categoryList/components/addOrEditCategoryModal/index.tsx 0 → 100644
import { Form, Input, message, Modal, ModalProps } from 'antd';
import { FC, useEffect, useState } from 'react';
import { Uploader } from '~/components/uploader';
import { UploadOutlined } from '@ant-design/icons';
import { InterDataType, InterReqType } from '~/api/interface';
import { addPrimaryCategoryType, categoryListRespType } from '~/api/interface/categoryManage';
import { CategoryManageAPI } from '~/api';
//分类列表返回类型
type categoryType = InterDataType<categoryListRespType>['list'];
//新增分类请求参数类型
type addPrimaryCategoryParameter = InterReqType<addPrimaryCategoryType>;
interface selfProps {
onCancel: () => void;
onOK: () => void;
currentCategory: categoryType[0] | undefined;
}
const AddOrEditCategoryModal: FC<ModalProps & selfProps> = ({
open,
onCancel,
onOK,
currentCategory,
}) => {
const [form] = Form.useForm<addPrimaryCategoryParameter>();
const [fileList, setFileList] = useState<
{
id: number;
name: string;
uid: number;
url: string;
}[]
>([]);
//上传成功
const uploadSuccess = (
value: {
id: number;
name: string;
uid: number;
url: string;
}[],
) => {
form.setFieldValue('icon', value[0].url);
setFileList([...value]);
};
//提交
const handleOk = () => {
form.validateFields().then((values: any) => {
CategoryManageAPI[currentCategory ? 'updatePrimaryCategory' : 'addPrimaryCategory']({
...values,
id: currentCategory ? currentCategory.id : undefined,
}).then(({ code }) => {
if (code === '200') {
message.success('新增成功');
form.resetFields();
setFileList([]);
onOK();
}
});
});
};
const handleCancel = () => {
form.resetFields();
setFileList([]);
onCancel();
};
useEffect(() => {
if (currentCategory) {
form.setFieldsValue({
name: currentCategory.name,
icon: currentCategory.icon,
description: currentCategory.description || undefined,
});
setFileList([
{
name: 'categoryImg',
id: Math.random(),
uid: Math.random(),
url: currentCategory.icon,
},
]);
}
}, [currentCategory]);
return (
<Modal
open={open}
title={currentCategory ? '编辑分类' : '新增分类'}
onCancel={handleCancel}
onOk={handleOk}
>
<Form wrapperCol={{ span: 16 }} labelCol={{ span: 4 }} form={form}>
<Form.Item
label='分类名称'
name='name'
rules={[{ required: true, message: '请输入分类名称' }]}
>
<Input placeholder='请输入分类名称' maxLength={15} />
</Form.Item>
<Form.Item
label='分类图标'
name='icon'
rules={[{ required: true, message: '请上传分类图标' }]}
>
<Uploader
fileUpload
listType='picture-card'
onChange={uploadSuccess}
fileLength={1}
fileSize={5}
defaultFileList={fileList}
>
<UploadOutlined />
</Uploader>
</Form.Item>
<Form.Item label='分类描述' name='description'>
<Input.TextArea placeholder='请输入分类描述' rows={4} maxLength={70} showCount />
</Form.Item>
</Form>
</Modal>
);
};
export default AddOrEditCategoryModal;
src/pages/categoryManage/categoryList/index.scss 0 → 100644
.category-list{
&-row-bg{
td{
background-color: rgba($color: #000000, $alpha: 0.1) !important;
}
}
}
src/pages/categoryManage/categoryList/index.tsx 0 → 100644
import SearchBox from '~/components/search-box';
import { Button, Checkbox, Form, Image, message, Modal, Table, Tooltip } from 'antd';
import {
ArrowDownOutlined,
ArrowUpOutlined,
DownOutlined,
PlusOutlined,
RightOutlined,
} from '@ant-design/icons';
import { categoryListRespType } from '~/api/interface/categoryManage';
import { useEffect, useState } from 'react';
import { InterDataType, PaginationProps } from '~/api/interface';
import { CategoryManageAPI } from '~/api';
import EditableCell from '~/components/EditableCell';
import AddOrEditCategoryModal from './components/addOrEditCategoryModal';
import './index.scss';
type EditableTableProps = Parameters<typeof Table>[0];
type ColumnTypes = Exclude<EditableTableProps['columns'], undefined>;
//分类列表返回类型
type categoryType = InterDataType<categoryListRespType>['list'];
const CategoryList = () => {
const [categoryTableForm] = Form.useForm<any>();
//新增，编辑分类弹窗
const [addOrEditCategoryModalShow, setAddOrEditCategoryModalShow] = useState<boolean>(false);
const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
const [currentCategory, setCurrentCategory] = useState<categoryType[0]>();
const [loading, setLoading] = useState<boolean>(false);
// 编辑的行
const [editingKey, setEditingKey] = useState<number[]>([]);
//展开的行
const [expandedRowKeys, setExpandedRowKeys] = useState<number[]>([]);
const tableColumns: (ColumnTypes[number] & {
editable?: boolean;
dataIndex?: string;
rules?: any;
maxLength?: number;
inputType?: string;
})[] = [
{
title: '分类名称',
dataIndex: 'name',
editable: true,
width: '20%',
ellipsis: true,
onHeaderCell: () => ({
style: {
textAlign: 'center',
},
}),
rules: [{ required: true, message: '请输入分类名称' }],
maxLength: 15,
render: (text: string, record: any) => (
<span
style={{
marginLeft: record.subDTOList && record.subDTOList.length != 0 ? '10px' : '24px',
}}
>
{text}
</span>
),
},
{
title: '图片',
align: 'center',
dataIndex: 'icon',
render: (url: string) => (url ? <Image src={url} width={40} height={40} /> : ''),
},
{
title: '描述',
align: 'center',
dataIndex: 'description',
editable: true,
width: '20%',
ellipsis: true,
maxLength: 70,
inputType: 'textArea',
render: (text: string) => (
<Tooltip placement='topLeft' title={<span>{text}</span>}>
<span>{text}</span>
</Tooltip>
),
},
{
title: '创建时间',
align: 'center',
dataIndex: 'createTime',
},
{
title: '操作',
onHeaderCell: () => ({
style: {
textAlign: 'center',
},
}),
onCell: () => ({
style: {
textAlign: 'right',
},
}),
render: (_text: string, record: any) =>
editingKey.some((id: number) => id === record.id) ? (
<>
<Button type='link' onClick={() => addChildCategorySubmit(record)}>
确定
</Button>
<Button type='link' onClick={() => addChildCategoryCancel(record)}>
取消
</Button>
</>
) : (
<>
{record.subDTOList ? (
<Button type='link' onClick={() => addChildrenCategory(record)}>
新增子分类
</Button>
) : (
''
)}
<Button type='link'>详情</Button>
<Button type='link' onClick={() => addOrEditCategoryModalShowClick(record)}>
编辑
</Button>
<Button type='link' danger onClick={() => deleteCategory(record)}>
删除
</Button>
</>
),
},
];
const mergedColumns = tableColumns.map((col: any) => {
if (!col.editable) {
return col;
}
return {
...col,
onCell: (record: categoryType[0], index: number) => ({
record,
index,
dataIndex: col.dataIndex,
title: col.title,
editing: editingKey.some((id: number) => id === record.id),
rules: col.rules,
maxLength: col.maxLength,
inputType: col.inputType,
}),
};
});
const [tableData, setTableData] = useState<categoryType>([]);
//分页
const [pagination, setPagination] = useState<PaginationProps & { totalCount: number }>({
pageNo: 1,
pageSize: 10,
totalCount: 0,
});
//获取分类列表
const getCategoryList = () => {
setLoading(true);
CategoryManageAPI.getCategoryRespList({
pageNo: pagination.pageNo,
pageSize: pagination.pageSize,
}).then(({ result }) => {
setLoading(false);
setTableData(result.list ? [...result.list] : []);
pagination.totalCount = result.totalCount;
setPagination(pagination);
});
};
const paginationChange = (pageNo: number, pageSize: number) => {
pagination.pageNo = pageNo;
pagination.pageSize = pageSize;
getCategoryList();
};
// 排序选择
const onSelectChange = (record: categoryType[0]) => {
const index: number = selectedRowKeys.findIndex((item: any) => item === record.id);
if (index != -1) {
selectedRowKeys.splice(index, 1);
setSelectedRowKeys([...selectedRowKeys]);
} else {
setSelectedRowKeys([...selectedRowKeys, record.id]);
}
};
//新增、编辑分类弹窗
const addOrEditCategoryModalShowClick = (record?: categoryType[0] | any) => {
if (record && !record.subDTOList) {
setEditingKey([...editingKey, record.id]);
const defaultFormVal = Object.getOwnPropertyNames(record).reduce((pre: any, cur: string) => {
if (['name', 'description'].includes(cur)) {
pre[cur + record.id] = record[cur];
}
return pre;
}, {});
categoryTableForm.setFieldsValue(defaultFormVal);
} else {
setAddOrEditCategoryModalShow(true);
setCurrentCategory(record ? { ...record } : undefined);
}
};
const addOrEditCategoryModalCancel = () => {
setAddOrEditCategoryModalShow(false);
};
const addOrEditCategoryModalOk = () => {
setAddOrEditCategoryModalShow(false);
getCategoryList();
};
//删除分类
const deleteCategory = (record: categoryType[0]) => {
Modal.confirm({
title: '分类删除',
content: '确认删除这条分类?',
onOk: () => {
console.log('当前数据-->', record);
CategoryManageAPI[record.subDTOList ? 'deletePrimaryCategory' : 'deleteSubCategory']({
id: record.id,
}).then(({ code }) => {
if (code === '200') {
message.success('删除成功');
if (pagination.pageNo !== 1 && tableData.length === 1) {
pagination.pageNo -= 1;
}
getCategoryList();
}
});
},
});
};
//新增子分类
const addChildrenCategory = (record: categoryType[0]) => {
const categoryItemIndex = tableData.findIndex((v) => v.id === record.id);
if (categoryItemIndex !== -1) {
const selfChildId: number = Math.random();
tableData[categoryItemIndex].subDTOList = [
...tableData[categoryItemIndex].subDTOList,
{ id: selfChildId, name: '', description: '', categoryPrimaryId: record.id },
];
tableData.splice(categoryItemIndex, 1, tableData[categoryItemIndex]);
setTableData([...tableData]);
setEditingKey([...editingKey, selfChildId]);
}
const isExpend: boolean = expandedRowKeys.some((key: number) => key === record.id);
if (!isExpend) {
setExpandedRowKeys([...expandedRowKeys, record.id]);
}
};
// 展开监听
const onExpand = (_expanded: boolean, record: categoryType[0]) => {
const index = expandedRowKeys.findIndex((item: any) => item === record.id);
if (index !== -1) {
expandedRowKeys.splice(index, 1);
} else {
expandedRowKeys.push(record.id);
}
setExpandedRowKeys([...expandedRowKeys]);
};
//提交新增子分类
const addChildCategorySubmit = (record: categoryType[0]['subDTOList'][0]) => {
categoryTableForm
.validateFields(['description' + record.id, 'name' + record.id])
.then((values) => {
CategoryManageAPI[record.name ? 'updateSubCategory' : 'addSubCategory']({
categoryPrimaryId: record.categoryPrimaryId,
name: values['name' + record.id],
description: values['description' + record.id],
id: record.name ? record.id : undefined,
}).then(({ code }) => {
if (code === '200') {
message.success(record.name ? '编辑子分类成功' : '新增子分类成功');
const editingKeyIndex = editingKey.findIndex((id) => id === record.id);
if (editingKeyIndex !== -1) {
editingKey.splice(editingKeyIndex, 1);
setEditingKey([...editingKey]);
getCategoryList();
}
}
});
});
};
//取消新增子分类
const addChildCategoryCancel = (record: categoryType[0]['subDTOList'][0]) => {
const tableIndex: number = tableData.findIndex((v) => v.id === record.categoryPrimaryId);
if (tableIndex !== -1) {
const subDTOIndex: number = tableData[tableIndex].subDTOList.findIndex(
(v) => v.id === record.id,
);
if (subDTOIndex !== -1) {
//新增下的取消
if (!record.name) {
tableData[tableIndex].subDTOList.splice(subDTOIndex, 1);
tableData.splice(tableIndex, 1, tableData[tableIndex]);
setTableData([...tableData]);
}
//新增、编辑下的取消
const editKeyIndex = editingKey.findIndex((id) => id === record.id);
editingKey.splice(editKeyIndex, 1);
setEditingKey([...editingKey]);
//新增下的取消
if (tableData[tableIndex].subDTOList.length === 0 && !record.name) {
const expandedRowKeysIndex = expandedRowKeys.findIndex(
(id) => id === record.categoryPrimaryId,
);
expandedRowKeys.splice(expandedRowKeysIndex, 1);
setExpandedRowKeys([...expandedRowKeys]);
}
}
}
};
useEffect(() => {
getCategoryList();
}, []);
return (
<div className='category-list'>
<SearchBox
child={
<>
<Button
icon={<PlusOutlined />}
type='primary'
onClick={() => addOrEditCategoryModalShowClick()}
>
新增分类
</Button>
<Button icon={<ArrowUpOutlined />} type='primary'></Button>
<Button icon={<ArrowDownOutlined />} type='primary'></Button>
</>
}
/>
<Form form={categoryTableForm} component={false}>
<Table
bordered
rowSelection={{
selectedRowKeys,
hideSelectAll: true,
renderCell: (_checked: boolean, record: categoryType[0]) => {
return (
<>{record.subDTOList ? <Checkbox onChange={() => onSelectChange(record)} /> : ''}</>
);
},
}}
loading={loading}
rowKey='id'
columns={mergedColumns}
dataSource={tableData}
rowClassName={(record: categoryType[0]) => {
if (record.subDTOList) {
return '';
}
return 'category-list-row-bg';
}}
pagination={{
total: pagination.totalCount,
pageSize: pagination.pageSize,
current: pagination.pageNo,
showSizeChanger: true,
showQuickJumper: true,
onChange: (page: number, pageSize: number) => paginationChange(page, pageSize),
showTotal: (total, range) => `当前 ${range[0]}-${range[1]} 条记录 / 共 ${total} 条数据`,
}}
components={{
body: {
cell: EditableCell,
},
}}
expandedRowKeys={expandedRowKeys}
onExpand={(expanded: boolean, record: categoryType[0]) => onExpand(expanded, record)}
expandable={{
rowExpandable: (record) => {
if (record.subDTOList && record.subDTOList.length != 0) {
return true;
}
return false;
},
expandIcon: ({ expanded, onExpand, record }) => {
if (expanded && record.subDTOList && record.subDTOList.length != 0) {
return <DownOutlined onClick={(e) => onExpand(record, e)} />;
}
if (record.subDTOList && record.subDTOList.length != 0) {
return <RightOutlined onClick={(e) => onExpand(record, e)} />;
}
return <></>;
},
}}
childrenColumnName='subDTOList'
/>
</Form>
{/*新增，编辑分类*/}
<AddOrEditCategoryModal
open={addOrEditCategoryModalShow}
onCancel={addOrEditCategoryModalCancel}
onOK={addOrEditCategoryModalOk}
currentCategory={currentCategory}
/>
</div>
);
};
export default CategoryList;
src/pages/mallManage/mallGoods/goodsAddOrEditOrDetail/components/baseInfo/index.tsx
import { Button, Cascader, Form, Input, Radio, Select } from 'antd';
import { Uploader } from '~/components/uploader';
import type { RadioChangeEvent } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
import { InterDataType } from '~/api/interface';
import { categoryListRespType } from '~/api/interface/categoryManage';
import { CategoryManageAPI } from '~/api';
//分类返回类型
type categoryType = InterDataType<categoryListRespType>['list'];
interface selfProps {
ref: any;
}
//基本信息表单类型
export type baseInfoType = {
tradeName: string;
description: string;
mainImgList: {
id: number;
name: string;
uid: number;
url: string;
}[];
subImgList: {
id: number;
name: string;
uid: number;
url: string;
}[];
videoList: {
id: number;
name: string;
uid: number;
url: string;
}[];
categoryId: number[];
shelfStatus: number;
labelShow: number;
goodsLabel: string;
};
const BaseInfo = forwardRef<any, selfProps>((_props, ref) => {
const [baseInfoForm] = Form.useForm<baseInfoType>();
const [labelShow, setLabelShow] = useState<boolean>(false);
//分类列表
const [categoryList, setCategoryList] = useState<categoryType>([]);
//主图
const [mainFileList, setMainFileList] = useState<
{
id: number;
name: string;
uid: number;
url: string;
}[]
>([]);
//副图
const [subFileList, setSubFileList] = useState<
{
id: number;
name: string;
uid: number;
url: string;
}[]
>([]);
//视频
const [videoFileList, setVideoFileList] = useState<
{
id: number;
name: string;
uid: number;
url: string;
}[]
>([]);
useImperativeHandle(ref, () => ({
getForm: () => baseInfoForm,
}));
//标签选中监听
const labelRadioChange = (e: RadioChangeEvent) => {
setLabelShow(!!e.target.value);
};
//上传结果
const uploadSuccess = (
fileList: {
id: number;
name: string;
uid: number;
url: string;
}[],
type: string,
) => {
switch (type) {
case 'mainImgList':
setMainFileList(fileList);
baseInfoForm.setFieldValue('mainImgList', fileList);
break;
case 'subImgList':
setSubFileList(fileList);
baseInfoForm.setFieldValue('subImgList', fileList);
break;
case 'videoList':
setVideoFileList(fileList);
baseInfoForm.setFieldValue('videoList', fileList);
break;
default:
break;
}
};
//分类列表
const getCategoryList = () => {
CategoryManageAPI.getCategoryRespList({ pageNo: 1, pageSize: 99999 }).then(({ result }) => {
setCategoryList(result.list || []);
});
};
useEffect(() => {
getCategoryList();
}, []);
const BaseInfo = () => {
const [baseInfoForm] = Form.useForm();
return (
<div className='base-info'>
<Form labelCol={{ span: 1 }} wrapperCol={{ span: 8 }} form={baseInfoForm}>
<Form.Item label='商品名称'>
<Form
labelCol={{ span: 2 }}
wrapperCol={{ span: 8 }}
form={baseInfoForm}
initialValues={{ labelShow: 0, shelfStatus: 1 }}
>
<Form.Item
label='商品名称'
name='tradeName'
rules={[{ required: true, message: '请输入商品名称' }]}
>
<Input placeholder='请输入商品名称' />
</Form.Item>
<Form.Item label='商品描述'>
<Form.Item label='商品描述' name='description'>
<Input.TextArea rows={4} placeholder='请输入商品描述' />
</Form.Item>
<Form.Item label='商品主图'>
<Uploader fileUpload listType='picture-card'>
<Form.Item
label='商品主图'
name='mainImgList'
rules={[{ required: true, message: '请上传商品主图' }]}
>
<Uploader
fileUpload
listType='picture-card'
onChange={(fileList) => uploadSuccess(fileList, 'mainImgList')}
defaultFileList={mainFileList}
>
<UploadOutlined />
</Uploader>
</Form.Item>
<Form.Item label='商品副图'>
<Uploader fileUpload listType='picture-card'>
<Form.Item label='商品副图' name='subImgList'>
<Uploader
fileUpload
listType='picture-card'
onChange={(fileList) => uploadSuccess(fileList, 'subImgList')}
defaultFileList={subFileList}
>
<UploadOutlined />
</Uploader>
</Form.Item>{' '}
<Form.Item label='商品视频'>
<Uploader fileUpload listType='text'>
</Form.Item>
<Form.Item label='商品视频' name='videoList'>
<Uploader
fileUpload
listType='text'
onChange={(fileList) => uploadSuccess(fileList, 'videoList')}
defaultFileList={videoFileList}
>
<Button icon={<UploadOutlined />}>上传视频</Button>
</Uploader>
</Form.Item>
<Form.Item label='商品分类'>
<Cascader placeholder='请选择商品分类' />
<Form.Item
label='商品分类'
name='categoryId'
rules={[{ required: true, message: '请选择商品分类' }]}
>
<Cascader
placeholder='请选择商品分类'
options={categoryList}
fieldNames={{ label: 'name', value: 'id', children: 'subDTOList' }}
/>
</Form.Item>
<Form.Item label='商品状态'>
<Form.Item
label='商品状态'
name='shelfStatus'
rules={[{ required: true, message: '请选择商品状态' }]}
>
<Select placeholder='请选择商品状态'>
<Select.Option>上架</Select.Option>
<Select.Option>下架</Select.Option>
<Select.Option value={1}>上架</Select.Option>
<Select.Option value={0}>下架</Select.Option>
</Select>
</Form.Item>
<Form.Item label='商品标签'>
<Radio.Group>
<Form.Item label='显示标签' name='labelShow'>
<Radio.Group onChange={labelRadioChange}>
<Radio value={1}>显示</Radio>
<Radio value={0}>不显示</Radio>
</Radio.Group>
</Form.Item>
{labelShow ? (
<Form.Item
label='商品标签'
name='goodsLabel'
rules={[{ required: true, message: '请输入商品标签' }]}
>
<Input placeholder='请输入商品标签' />
</Form.Item>
) : (
''
)}
</Form>
</div>
);
};
});
export default BaseInfo;
src/pages/mallManage/mallGoods/goodsAddOrEditOrDetail/components/skuAddOrEditModal/index.tsx
import { Button, Form, Input, Modal, ModalProps, Radio, Select, Table } from 'antd';
import { FC, useState } from 'react';
import { Button, Form, Input, message, Modal, ModalProps, Radio, Select, Table } from 'antd';
import { FC, useEffect, useState } from 'react';
import EditableCell from '~/components/EditableCell';
import { MinusOutlined, PlusOutlined } from '@ant-design/icons';
import { InterDataType, InterReqType } from '~/api/interface';
import { addMallGoodsType, skuUnitType } from '~/api/interface/goodsType';
import { filterObjAttr } from '~/utils';
type EditableTableProps = Parameters<typeof Table>[0];
type ColumnTypes = Exclude<EditableTableProps['columns'], undefined>;
//商品sku规格类型
type goodsSpecType = InterReqType<addMallGoodsType>['goodsSpecList'][0];
//商品sku规格值类型
type goodsSpecValuesType =
InterReqType<addMallGoodsType>['goodsSpecList'][0]['goodsSpecValuesList'] & { fileList: any };
//单位返回类型
type unitType = InterDataType<skuUnitType>;
interface selfProps {
onCancel: () => void;
onOk: (value: goodsSpecType) => void;
skuUnitList: unitType;
currentSku: goodsSpecType | undefined;
}
const SkuAddOrEditModal: FC<ModalProps & selfProps> = ({ open, onCancel }) => {
const [tableData, setTableData] = useState<any>([{ id: 1 }]);
const SkuAddOrEditModal: FC<ModalProps & selfProps> = ({
open,
onCancel,
onOk,
skuUnitList,
currentSku,
}) => {
const [goodsSpecForm] = Form.useForm<Omit<goodsSpecType, 'goodsSpecValuesList'>>();
const [goodsSpecValuesForm] = Form.useForm<goodsSpecValuesType[0]>();
const [tableData, setTableData] = useState<goodsSpecValuesType[]>([
{
id: Math.random(),
channelPrice: 0,
partNo: '',
salePrice: 0,
showPrice: 1,
specValueImage: '',
specValueName: '',
stock: 0,
fileList: [],
},
]);
const defaultColumns: (ColumnTypes[number] & {
editable?: boolean;
dataIndex?: string;
inputType?: string;
radioOption?: { name: string; id: number }[];
rules?: any;
})[] = [
{
title: '序号',
......@@ -28,44 +64,48 @@ const SkuAddOrEditModal: FC<ModalProps & selfProps> = ({ open, onCancel }) => {
title: '图片',
align: 'center',
editable: true,
dataIndex: '',
dataIndex: 'specValueImage',
inputType: 'uploader',
rules: [{ required: true, message: '请上传图片' }],
},
{
title: '选项名称',
align: 'center',
editable: true,
dataIndex: '',
dataIndex: 'specValueName',
rules: [{ required: true, message: '请输入选项名称' }],
},
{
title: '料号',
align: 'center',
editable: true,
dataIndex: '',
dataIndex: 'partNo',
rules: [{ required: true, message: '请输入料号' }],
},
{
title: '销售价',
align: 'center',
editable: true,
dataIndex: '',
dataIndex: 'salePrice',
rules: [{ required: true, message: '请输入销售号' }],
},
{
title: '渠道价',
editable: true,
align: 'center',
dataIndex: '',
dataIndex: 'channelPrice',
},
{
title: '库存',
editable: true,
align: 'center',
dataIndex: '',
dataIndex: 'stock',
},
{
title: '是否显示',
editable: true,
align: 'center',
dataIndex: '',
dataIndex: 'showPrice',
inputType: 'radio',
width: '20%',
radioOption: [
......@@ -115,15 +155,69 @@ const SkuAddOrEditModal: FC<ModalProps & selfProps> = ({ open, onCancel }) => {
editing: col.editable,
radioOption: col.radioOption,
inputType: col.inputType,
uploadSuccess: col.inputType === 'uploader' ? uploadSuccess : undefined,
rules: col.rules,
}),
};
});
const handleCancel = () => {
clearForm();
onCancel();
};
const clearForm = () => {
goodsSpecForm.resetFields();
goodsSpecValuesForm.resetFields();
const list = [
{
id: Math.random(),
channelPrice: 0,
partNo: '',
salePrice: 0,
showPrice: 1,
specValueImage: '',
specValueName: '',
stock: 0,
fileList: [],
},
];
const obj = list.reduce((pre: any, cur: any) => {
Object.getOwnPropertyNames(cur).forEach((key: string) => {
if (['showPrice'].includes(key)) {
pre[key + cur.id] = cur[key];
}
});
return pre;
}, {});
goodsSpecValuesForm.setFieldsValue(obj);
setTableData(list);
};
//新增一行规格值
const addSkuDataRowClick = () => {
setTableData([...tableData, { id: tableData.length + 1 }]);
const list = [
...tableData,
{
id: Math.random(),
channelPrice: 0,
partNo: '',
salePrice: 0,
showPrice: 1,
specValueImage: '',
specValueName: '',
stock: 0,
fileList: [],
},
];
setTableData(list);
const obj = list.reduce((pre: any, cur: any) => {
Object.getOwnPropertyNames(cur).forEach((key: string) => {
if (['showPrice'].includes(key)) {
pre[key + cur.id] = cur[key];
}
});
return pre;
}, {});
goodsSpecValuesForm.setFieldsValue(obj);
};
//移除一行规格值
const removeSkuDataRowClick = (index: number) => {
......@@ -131,14 +225,94 @@ const SkuAddOrEditModal: FC<ModalProps & selfProps> = ({ open, onCancel }) => {
setTableData([...tableData]);
};
//规格值上传图片返回
const uploadSuccess = (record: goodsSpecValuesType, value: any) => {
const tableIndex: number = tableData.findIndex((v) => v.id === record.id);
goodsSpecValuesForm.setFieldValue('specValueImage' + record.id, value[0].url);
if (tableIndex !== -1) {
tableData[tableIndex].fileList = value;
setTableData([...tableData]);
}
};
//提交
const handleOk = () => {
Promise.all([goodsSpecForm.validateFields(), goodsSpecValuesForm.validateFields()]).then(
(values) => {
const goodsSpecValuesList: goodsSpecValuesType[] = tableData.map((v) => {
return Object.getOwnPropertyNames(v).reduce((pre: any, cur: string) => {
if (Object.getOwnPropertyNames(values[1]).includes(cur + v.id)) {
pre[cur] = values[1][cur + v.id];
pre.id = v.id;
}
return pre;
}, {});
});
onOk({ ...values[0], goodsSpecValuesList, id: currentSku?.id || Math.random() });
clearForm();
},
);
};
useEffect(() => {
const obj = tableData.reduce((pre: any, cur: any) => {
Object.getOwnPropertyNames(cur).forEach((key: string) => {
if (['showPrice'].includes(key)) {
pre[key + cur.id] = cur[key];
}
});
return pre;
}, {});
goodsSpecValuesForm.setFieldsValue(obj);
if (currentSku) {
goodsSpecForm.setFieldsValue(filterObjAttr(currentSku, ['goodsSpecValuesList']));
setTableData(
currentSku.goodsSpecValuesList.map((v: any) => ({
...v,
fileList: [
{
id: Math.random(),
uid: Math.random(),
url: v.specValueImage,
name: 'specValueImage',
},
],
})),
);
const goodsSpecValuesObj = currentSku.goodsSpecValuesList.reduce((pre: any, cur: any) => {
Object.getOwnPropertyNames(cur)
.filter((key: string) => key !== 'id')
.forEach((key: string) => {
pre[key + cur.id] = cur[key];
});
return pre;
}, {});
goodsSpecValuesForm.setFieldsValue(goodsSpecValuesObj);
}
}, [currentSku]);
return (
<Modal open={open} title='添加规格' width={1000} onCancel={handleCancel}>
<Form labelCol={{ span: 2 }} wrapperCol={{ span: 22 }}>
<Form.Item label='规格名称'>
<Modal
open={open}
title={currentSku ? '编辑规格' : '添加规格'}
width={1000}
onCancel={handleCancel}
onOk={handleOk}
>
<Form
labelCol={{ span: 2 }}
wrapperCol={{ span: 22 }}
initialValues={{ chooseType: 0, must: 0 }}
form={goodsSpecForm}
>
<Form.Item
label='规格名称'
name='specName'
rules={[{ required: true, message: '请输入规格名称' }]}
>
<Input placeholder='请输入规格名称' />
</Form.Item>
<Form.Item label='规格值'>
<Form component={false}>
<Form component={false} form={goodsSpecValuesForm}>
<Table
rowKey='id'
columns={columns as ColumnTypes}
......@@ -153,21 +327,29 @@ const SkuAddOrEditModal: FC<ModalProps & selfProps> = ({ open, onCancel }) => {
></Table>
</Form>
</Form.Item>
<Form.Item label='选择方式'>
<Form.Item label='选择方式' name='chooseType'>
<Radio.Group>
<Radio>单选</Radio>
<Radio>多选</Radio>
<Radio value={0}>单选</Radio>
<Radio value={1}>多选</Radio>
</Radio.Group>
</Form.Item>
<Form.Item label='是否必选'>
<Form.Item label='是否必选' name='must'>
<Radio.Group>
<Radio>非必选</Radio>
<Radio>必选</Radio>
<Radio value={0}>非必选</Radio>
<Radio value={1}>必选</Radio>
</Radio.Group>
</Form.Item>
<Form.Item label='规格单位'>
<Select>
<Select.Option value={0}>件</Select.Option>
<Form.Item
label='规格单位'
name='skuUnitId'
rules={[{ required: true, message: '请选择规格单位' }]}
>
<Select placeholder='请选择规格单位'>
{skuUnitList.map((v) => (
<Select.Option value={v.id} key={v.id}>
{v.unitName}
</Select.Option>
))}
</Select>
</Form.Item>
</Form>
......
src/pages/mallManage/mallGoods/goodsAddOrEditOrDetail/components/skuInfo/index.tsx
import { Button, Table } from 'antd';
import { Button, Popconfirm, Table } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import { ColumnsType } from 'antd/es/table';
import { FC } from 'react';
import { InterDataType, InterReqType } from '~/api/interface';
import { addMallGoodsType, skuUnitType } from '~/api/interface/goodsType';
//商品sku规格类型
type goodsSpecType = InterReqType<addMallGoodsType>['goodsSpecList'][0];
//单位返回类型
type unitType = InterDataType<skuUnitType>;
interface selfProps {
addOrEditSkuClick: () => void;
skuTableData: goodsSpecType[];
skuUnitList: unitType;
deleteSkuClick: (record: goodsSpecType) => void;
editSkuClick: (record: goodsSpecType) => void;
}
const SkuInfo: FC<selfProps> = ({ addOrEditSkuClick }) => {
const TableColumns: ColumnsType<any> = [
const SkuInfo: FC<selfProps> = ({
addOrEditSkuClick,
skuTableData,
skuUnitList,
deleteSkuClick,
editSkuClick,
}) => {
const tableColumns: ColumnsType<goodsSpecType> = [
{
title: '序号',
align: 'center',
render: (_text: string, _record, index: number) => index + 1,
},
{
title: '规格名称',
align: 'center',
dataIndex: 'specName',
},
{
title: '选择方式',
align: 'center',
dataIndex: 'chooseType',
render: (text: number) => (text ? '多选' : '单选'),
},
{
title: '是否必选',
align: 'center',
dataIndex: 'must',
render: (text: number) => (text ? '必选' : '非必选'),
},
{
title: '规格单位',
align: 'center',
dataIndex: 'skuUnitId',
render: (text: number) => skuUnitList.find((v) => v.id === text)?.unitName || '',
},
{
title: '操作',
align: 'center',
render: (_text: string, record) => (
<>
<Button type='link' onClick={() => editSkuClick(record)}>
编辑
</Button>
<Popconfirm
placement='topLeft'
title={'删除规格'}
description={'确认删除该规格吗？'}
onConfirm={() => deleteSkuClick(record)}
okText='确定'
cancelText='取消'
>
<Button type='link' danger>
删除
</Button>
</Popconfirm>
</>
),
},
];
return (
<div className='sku-info'>
<div className='sku-info-operate' style={{ margin: ' 20px 0 ' }}>
......@@ -45,7 +89,7 @@ const SkuInfo: FC<selfProps> = ({ addOrEditSkuClick }) => {
添加规格
</Button>
</div>
<Table bordered columns={TableColumns} />
<Table bordered columns={tableColumns} dataSource={skuTableData} rowKey='id' />
</div>
);
};
......
src/pages/mallManage/mallGoods/goodsAddOrEditOrDetail/index.tsx
import { Button, Tabs, TabsProps } from 'antd';
import { useState } from 'react';
import { Button, message, Tabs, TabsProps } from 'antd';
import { useEffect, useRef, useState } from 'react';
import BaseInfo from './components/baseInfo';
import SkuInfo from './components/skuInfo';
import IntroduceInfo from './components/introduceInfo';
import SkuAddOrEditModal from './components/skuAddOrEditModal';
import './index.scss';
import { useNavigate } from 'react-router-dom';
import { baseInfoType } from './components/baseInfo';
import { InterDataType, InterReqType } from '~/api/interface';
import { addMallGoodsType, skuUnitType } from '~/api/interface/goodsType';
import GoodsAPI from '~/api/modules/goodsAPI';
//商品sku规格类型
type goodsSpecType = InterReqType<addMallGoodsType>['goodsSpecList'][0];
//单位返回类型
type unitType = InterDataType<skuUnitType>;
const GoodsAddOrEditOrDetail = () => {
const baseInfoRef = useRef<any>();
const navigate = useNavigate();
//单位列表
const [skuUnitList, setSkuUnitList] = useState<unitType>([]);
const [tabSelectKeys, setTabSelectKeys] = useState<string>('1');
//新增、编辑sku弹窗
const [addOrEditSkuModalShow, setAddOrEditSkuModalShow] = useState<boolean>(false);
//当前编辑sku
const [currentSku, setCurrentSku] = useState<goodsSpecType>();
//基本信息暂存
const [baseInfo, setBaseInfo] = useState<baseInfoType>();
//skuTable数据
const [skuTable, setSkuTable] = useState<goodsSpecType[]>([]);
//新增、编辑sku弹窗显示
const addOrEditSkuClick = () => {
const addOrEditSkuClick = (record?: goodsSpecType) => {
setCurrentSku(record ? { ...record } : undefined);
setAddOrEditSkuModalShow(true);
};
const addOrEditSkuModalCancel = () => {
setAddOrEditSkuModalShow(false);
};
//tab 切换
const tabSelectChange = (key: string) => {
setTabSelectKeys(key);
};
//下一步
const toNextStep = () => {
setTabSelectKeys((Number(tabSelectKeys) + 1).toString());
};
//上一步
const toBackStep = () => {
setTabSelectKeys((Number(tabSelectKeys) - 1).toString());
const addOrEditSkuModalOk = (values: goodsSpecType) => {
setAddOrEditSkuModalShow(false);
const skuTableIndex: number = skuTable.findIndex((v) => v.id === values.id);
if (skuTableIndex !== -1) {
skuTable.splice(skuTableIndex, 1, values);
setSkuTable([...skuTable]);
} else {
setSkuTable([...skuTable, { ...values }]);
}
};
const backRoute = () => {
navigate(-1);
//sku删除
const deleteSkuClick = (record: goodsSpecType) => {
const skuIndex: number = skuTable.findIndex((v) => v.id === record.id);
skuTable.splice(skuIndex, 1);
setSkuTable([...skuTable]);
};
const TabItems: TabsProps['items'] = [
const tabItems: TabsProps['items'] = [
{
key: '1',
label: `基础信息`,
children: <BaseInfo />,
children: <BaseInfo ref={baseInfoRef} />,
},
{
key: '2',
label: `商品规格`,
children: <SkuInfo addOrEditSkuClick={addOrEditSkuClick} />,
children: (
<SkuInfo
addOrEditSkuClick={addOrEditSkuClick}
skuTableData={skuTable}
skuUnitList={skuUnitList}
deleteSkuClick={deleteSkuClick}
editSkuClick={addOrEditSkuClick}
/>
),
},
{
key: '3',
......@@ -52,9 +82,60 @@ const GoodsAddOrEditOrDetail = () => {
children: <IntroduceInfo />,
},
];
//tab 切换
const tabSelectChange = (key: string) => {
setTabSelectKeys(key);
};
//下一步
const toNextStep = () => {
switch (tabSelectKeys) {
case '1':
baseInfoRef.current
.getForm()
.validateFields()
.then((value: baseInfoType) => {
setBaseInfo(value);
setTabSelectKeys((Number(tabSelectKeys) + 1).toString());
})
.catch((error: any) => {
message.error(error.errorFields[0].errors[0]);
});
break;
case '2':
if (skuTable.length) {
setTabSelectKeys((Number(tabSelectKeys) + 1).toString());
} else {
message.warning('请添加规格');
}
break;
case '3':
break;
default:
break;
}
};
//上一步
const toBackStep = () => {
setTabSelectKeys((Number(tabSelectKeys) - 1).toString());
};
const backRoute = () => {
navigate(-1);
};
//单位列表
const getSkuUnit = () => {
GoodsAPI.getSkuUnit().then(({ result }) => {
setSkuUnitList(result || []);
});
};
useEffect(() => {
getSkuUnit();
}, []);
return (
<div className='goods-operate-wrap'>
<Tabs items={TabItems} activeKey={tabSelectKeys} onChange={tabSelectChange}></Tabs>
<Tabs items={tabItems} activeKey={tabSelectKeys} onChange={tabSelectChange}></Tabs>
<div className='next-step'>
{tabSelectKeys !== '1' ? <Button onClick={toBackStep}>上一步</Button> : ''}
{tabSelectKeys !== '3' ? (
......@@ -71,7 +152,13 @@ const GoodsAddOrEditOrDetail = () => {
</Button>
</div>
{/*新增、编辑sku弹窗*/}
<SkuAddOrEditModal open={addOrEditSkuModalShow} onCancel={addOrEditSkuModalCancel} />
<SkuAddOrEditModal
open={addOrEditSkuModalShow}
onCancel={addOrEditSkuModalCancel}
onOk={addOrEditSkuModalOk}
skuUnitList={skuUnitList}
currentSku={currentSku}
/>
</div>
);
};
......
src/pages/systemManage/companyManage/companyDetail/index.tsx 0 → 100644
import { useSearchParams } from 'react-router-dom';
import { useEffect, useState } from 'react';
const CompanyDetail = () => {
const [searchParams] = useSearchParams();
const [companyId, setCompanyId] = useState<number>(-1);
useEffect(() => {
setCompanyId(Number(searchParams.get('id')));
}, []);
return <div className='company-detail'>单位详情</div>;
};
export default CompanyDetail;
src/pages/systemManage/companyManage/index.tsx → src/pages/systemManage/companyManage/companyList/index.tsx
......@@ -6,6 +6,7 @@ import { InterListType, InterReqType } from '~/api/interface';
import { ColumnsType } from 'antd/es/table';
import { SystemManageAPI } from '~/api';
import { listCompanyPage } from '~/api/interface/systemManageType';
import { useNavigate } from 'react-router-dom';
import AddEditModal from './comp/addEditModal';
// 列表的数据类型
......@@ -16,6 +17,7 @@ type ReqType = InterReqType<listCompanyPage>;
let query: ReqType = {};
const CompanyManageView = () => {
const navigate = useNavigate();
const { confirm } = Modal;
// 新增编辑弹窗是否开启
const [addEditModalVisible, setAddEditModalVisible] = useState(false);
......@@ -77,6 +79,14 @@ const CompanyManageView = () => {
},
});
};
//跳转单位详情
const toCompanyDetail = (record: TableType[0]) => {
navigate({
pathname: '/systemManage/companyDetail',
search: `id=${record.id}`,
});
};
// componentDidMount
useEffect(() => {
query = {};
......@@ -88,17 +98,11 @@ const CompanyManageView = () => {
title: '单位名称',
dataIndex: 'companyName',
align: 'center',
width: '150px',
width: '20%',
fixed: 'left',
ellipsis: true,
},
{
title: '行政区划',
dataIndex: 'province',
align: 'center',
render: (_value, record) => `${record.province} / ${record.city} / ${record.district}`,
},
{
title: '详细地址',
dataIndex: 'address',
align: 'center',
......@@ -117,7 +121,7 @@ const CompanyManageView = () => {
},
{
title: '操作',
width: '100px',
width: '20%',
fixed: 'right',
align: 'center',
render: (_text, record) => (
......@@ -131,6 +135,9 @@ const CompanyManageView = () => {
>
变更
</Button>
<Button type='link' onClick={() => toCompanyDetail(record)}>
详情
</Button>
<Button
type='link'
danger
......
src/router/index.ts
......@@ -3,7 +3,6 @@ import { RouteObjectType, routerList } from '~/router/router';
import { InterDataType } from '~/api/interface';
import { listMenuInfoType } from '~/api/interface/systemManageType';
import { SystemManageAPI } from '~/api';
import Cookies from 'js-cookie';
//菜单类型
type menuType = InterDataType<listMenuInfoType>;
......@@ -11,7 +10,6 @@ type menuType = InterDataType<listMenuInfoType>;
let routerListStore: any[] = [];
// 获取用户权限路由列表
export const authRouterList = async () => {
if (localStorage.getItem('roleId') && Cookies.get('SHAREFLY-TOKEN')) {
// 如果缓存中没有数据
if (routerListStore.length === 0) {
// 加载路由数据
......@@ -39,8 +37,6 @@ export const authRouterList = async () => {
} else {
return Promise.resolve(routerListStore);
}
}
return Promise.resolve([]);
};
//获取全部节点
const getAllKeys = (data: menuType[]) => {
......
src/router/privateRouter.tsx
......@@ -14,23 +14,29 @@ function PrivateRouter() {
// TODO: 判断是否登录 (需要改为实时获取地址栏的路由)
const path = location.pathname;
const token = Cookies.get('SHAREFLY-TOKEN');
const roleId = localStorage.getItem('roleId');
if (!token && path !== '/login') {
navigate('/login', { replace: true });
return;
}
};
useEffect(() => {
beforeEach();
if (roleId && token) {
// 整合路由数据
authRouterList().then((value) => {
if (value.length) {
const routes = [...value, ...whiteRouterList];
setRouter(routes); //不同账号登录时，重新更新路由（有瑕疵）
} else if (localStorage.getItem('roleId')) {
setRouter(routes);
if (path === '/') {
navigate({ pathname: value[0].children.find((v: any) => !v.meta.hidden)?.path });
}
} else {
message.warning('该账号暂无权限');
navigate('/login', { replace: true });
}
});
}
};
useEffect(() => {
beforeEach();
}, [location.pathname]);
return useRoutes(router);
......
src/router/router.tsx
......@@ -98,6 +98,7 @@ const ProduceDetailView = React.lazy(
); //产品详情
const MakeListView = React.lazy(() => import('~/pages/mallManage/makeManage/makeList'));
// 分类管理
const CategoryListView = React.lazy(() => import('~/pages/categoryManage/categoryList'));
const CategoryManage = React.lazy(() => import('~/pages/categoryManage/category'));
const CategoryDetail = React.lazy(() => import('~/pages/categoryManage/category/detail'));
// 目录管理
......@@ -119,7 +120,10 @@ import TenderManageDetail from '~/pages/resourceManage/tenderManage/detail';
import TenderManageFeedback from '~/pages/resourceManage/tenderManage/feedback';
import BusinessCaseManage from '~/pages/resourceManage/businessCaseManage';
import CustomIdentityView from '~/pages/customManage/customIdentity';
import CompanyManageView from '~/pages/systemManage/companyManage';
import CompanyListView from '~/pages/systemManage/companyManage/companyList'; //单位列表
const CompanyDetailView = React.lazy(
() => import('~/pages/systemManage/companyManage/companyDetail'),
);
import AccountLimit from '~/pages/systemManage/limitManage/roleList'; //账号权限
import LimitInfo from '~/pages/systemManage/limitManage/limitInfo';
import CustomListDetail from '~/pages/customManage/customList/detail'; //权限信息
......@@ -647,76 +651,86 @@ export const routerList: Array<RouteObjectType> = [
},
children: [
{
path: '/categoryManage/jobServicesCategory/1',
element: withLoadingComponent(<CategoryManage />),
path: '/categoryManage/categoryList',
element: withLoadingComponent(<CategoryListView />),
errorElement: <ErrorPage />,
meta: {
id: 1210,
title: '作业服务分类',
title: '分类列表',
icon: <SendOutlined />,
},
},
{
path: '/categoryManage/jobServicesCategory/2',
element: withLoadingComponent(<CategoryManage />),
errorElement: <ErrorPage />,
meta: {
id: 1220,
title: '设备租赁分类',
icon: <RocketOutlined />,
},
},
{
path: '/categoryManage/jobServicesCategory/3',
element: withLoadingComponent(<CategoryManage />),
errorElement: <ErrorPage />,
meta: {
id: 1230,
title: '飞手培训分类',
icon: <AppstoreAddOutlined />,
},
},
{
path: '/categoryManage/jobServicesCategory/4',
element: withLoadingComponent(<CategoryManage />),
errorElement: <ErrorPage />,
meta: {
id: 1240,
title: '产品商城分类',
icon: <AppstoreOutlined />,
},
},
{
path: '/categoryManage/jobServicesCategory/0',
element: withLoadingComponent(<CategoryManage />),
errorElement: <ErrorPage />,
meta: {
id: 1250,
title: '通用分类',
icon: <CoffeeOutlined />,
},
},
{
path: '/categoryManage/detail/:id',
element: withLoadingComponent(<CategoryDetail />),
errorElement: <ErrorPage />,
meta: {
id: 18600,
title: '分类详情',
icon: '',
hidden: true,
},
},
{
path: '/categoryManage/DirectoryManage',
element: withLoadingComponent(<DirectoryManage />),
errorElement: <ErrorPage />,
meta: {
id: 1260,
title: '目录管理',
icon: <UnorderedListOutlined />,
},
},
// {
// path: '/categoryManage/jobServicesCategory/1',
// element: withLoadingComponent(<CategoryManage />),
// errorElement: <ErrorPage />,
// meta: {
// id: 1210,
// title: '作业服务分类',
// icon: <SendOutlined />,
// },
// },
// {
// path: '/categoryManage/jobServicesCategory/2',
// element: withLoadingComponent(<CategoryManage />),
// errorElement: <ErrorPage />,
// meta: {
// id: 1220,
// title: '设备租赁分类',
// icon: <RocketOutlined />,
// },
// },
// {
// path: '/categoryManage/jobServicesCategory/3',
// element: withLoadingComponent(<CategoryManage />),
// errorElement: <ErrorPage />,
// meta: {
// id: 1230,
// title: '飞手培训分类',
// icon: <AppstoreAddOutlined />,
// },
// },
// {
// path: '/categoryManage/jobServicesCategory/4',
// element: withLoadingComponent(<CategoryManage />),
// errorElement: <ErrorPage />,
// meta: {
// id: 1240,
// title: '产品商城分类',
// icon: <AppstoreOutlined />,
// },
// },
// {
// path: '/categoryManage/jobServicesCategory/0',
// element: withLoadingComponent(<CategoryManage />),
// errorElement: <ErrorPage />,
// meta: {
// id: 1250,
// title: '通用分类',
// icon: <CoffeeOutlined />,
// },
// },
// {
// path: '/categoryManage/detail/:id',
// element: withLoadingComponent(<CategoryDetail />),
// errorElement: <ErrorPage />,
// meta: {
// id: 18600,
// title: '分类详情',
// icon: '',
// hidden: true,
// },
// },
// {
// path: '/categoryManage/DirectoryManage',
// element: withLoadingComponent(<DirectoryManage />),
// errorElement: <ErrorPage />,
// meta: {
// id: 1260,
// title: '目录管理',
// icon: <UnorderedListOutlined />,
// },
// },
],
},
// {
......@@ -982,15 +996,26 @@ export const routerList: Array<RouteObjectType> = [
},
},
{
path: '/systemManage/companyManage',
element: withLoadingComponent(<CompanyManageView />),
path: '/systemManage/companyList',
element: withLoadingComponent(<CompanyListView />),
errorElement: <ErrorPage />,
meta: {
id: 1430,
title: '单位管理',
title: '单位列表',
icon: <BankOutlined />,
},
},
{
path: '/systemManage/companyDetail',
element: withLoadingComponent(<CompanyDetailView />),
errorElement: <ErrorPage />,
meta: {
id: 1440,
title: '单位详情',
icon: <BankOutlined />,
hidden: true,
},
},
],
},
];
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论