Skip to content

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

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

上级 95fca4a3
正在显示 包含 974 行增加 和 188 行删除
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/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/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,36 +10,33 @@ type menuType = InterDataType<listMenuInfoType>;
let routerListStore: any[] = [];
// 获取用户权限路由列表
export const authRouterList = async () => {
if (localStorage.getItem('roleId') && Cookies.get('SHAREFLY-TOKEN')) {
// 如果缓存中没有数据
if (routerListStore.length === 0) {
// 加载路由数据
const { result } = await SystemManageAPI.getListRoleMenuInfo({
roleId: Number(localStorage.getItem('roleId')),
});
const ids: number[] = getAllKeys([result]);
const getRouteList = (data: RouteObjectType[]) => {
return data.reduce((pre: RouteObjectType[], cur) => {
const Obj: RouteObjectType = { ...cur };
if (ids.includes(Obj.meta.id) || Obj.meta.hidden) {
if (Obj.children) {
Obj.children = [...getRouteList(Obj.children)];
}
pre.push(Obj);
// 如果缓存中没有数据
if (routerListStore.length === 0) {
// 加载路由数据
const { result } = await SystemManageAPI.getListRoleMenuInfo({
roleId: Number(localStorage.getItem('roleId')),
});
const ids: number[] = getAllKeys([result]);
const getRouteList = (data: RouteObjectType[]) => {
return data.reduce((pre: RouteObjectType[], cur) => {
const Obj: RouteObjectType = { ...cur };
if (ids.includes(Obj.meta.id) || Obj.meta.hidden) {
if (Obj.children) {
Obj.children = [...getRouteList(Obj.children)];
}
return pre;
}, []);
};
const arr = [...getRouteList(routerList)];
// 将路由数据存到store中
routerListStore = arr;
// 完成后返回路由数据
return Promise.resolve(arr);
} else {
return Promise.resolve(routerListStore);
}
pre.push(Obj);
}
return pre;
}, []);
};
const arr = [...getRouteList(routerList)];
// 将路由数据存到store中
routerListStore = arr;
// 完成后返回路由数据
return Promise.resolve(arr);
} 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;
}
if (roleId && token) {
// 整合路由数据
authRouterList().then((value) => {
if (value.length) {
const routes = [...value, ...whiteRouterList];
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();
// 整合路由数据
authRouterList().then((value) => {
if (value.length) {
const routes = [...value, ...whiteRouterList];
setRouter(routes); //不同账号登录时，重新更新路由（有瑕疵）
} else if (localStorage.getItem('roleId')) {
message.warning('该账号暂无权限');
navigate('/login', { replace: true });
}
});
}, [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,13 +996,24 @@ 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 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论