提交 a2746629 作者: 龚洪江

功能:租赁页面

......@@ -31,9 +31,12 @@ export type listBrandInfoType = InterItemFunction<
>;
//租赁-型号-新增
export type addRentModeType = InterFunction<{ modeName: string; productTypeId: number }, any>;
export type addRentModeType = InterFunction<
{ modeName: string; productTypeId: number; brandInfoId: number; tag?: string },
any
>;
//租赁-型号-列表
export type rentModeListType = InterItemFunction<
{ brandInfoId?: number; productTypeId?: number },
any
{ modeName: string; id: number; brandInfoId: number; productTypeId: number; tag: string }[]
>;
.goods-info{
&-title{
font-size: 15px;
font-weight: bold;
line-height: 40px;
}
}
import { Form, Input, Radio } from 'antd';
import './index.scss';
const GoodsInfo = () => {
const qualityList = [
{
label: '全新',
value: 0,
},
{
label: '99新',
value: 1,
},
{
label: '95新',
value: 2,
},
{
label: '90新',
value: 3,
},
{
label: '80新',
value: 4,
},
];
return (
<div className='goods-info'>
<div className='goods-info-title'>商品信息</div>
<Form labelCol={{ span: 2 }} wrapperCol={{ span: 10 }}>
<Form.Item label='商品标题'>
<Input placeholder='请输入商品标题' />
</Form.Item>
<Form.Item label='商品卖点'>
<Input placeholder='请输入商品卖点' />
</Form.Item>
<Form.Item label='商品成新'>
<Radio.Group>
{qualityList.map((v, index) => (
<Radio value={v.value} key={index}>
{v.label}
</Radio>
))}
</Radio.Group>
</Form.Item>
<Form.Item label='商品状态'>
<Radio.Group>
<Radio value={1}>上架</Radio>
<Radio value={0}>下架</Radio>
</Radio.Group>
</Form.Item>
</Form>
</div>
);
};
export default GoodsInfo;
.rent-attr{
&-title{
font-size: 15px;
font-weight: bold;
line-height: 40px;
}
}
import './index.scss';
import { Button, Cascader, Form, Radio, Table } from 'antd';
import EditableCell from '~/components/EditableCell';
import { useState } from 'react';
import { MinusOutlined, PlusOutlined, UploadOutlined } from '@ant-design/icons';
import { Uploader } from '~/components/uploader';
import RichText from '~/components/richText';
type EditableTableProps = Parameters<typeof Table>[0];
type ColumnTypes = Exclude<EditableTableProps['columns'], undefined>;
const RentAttr = () => {
const typeList = [
{
label: '航拍无人机',
value: 1,
},
{
label: '行业无人机',
value: 2,
},
{
label: '挂载',
value: 3,
},
{
label: '配件',
value: 4,
},
];
const attrTableColumns: (ColumnTypes[number] & {
editable?: boolean;
dataIndex?: string;
inputType?: string;
rules?: any;
maxLength?: number;
})[] = [
{
title: '参数名称',
dataIndex: '',
editable: true,
align: 'center',
},
{
title: '参数值',
dataIndex: '',
editable: true,
align: 'center',
},
{
title: '操作',
dataIndex: '',
render: (_text: string, _record: any, index: number) => (
<>
{index === parameterTableData.length - 1 ? (
<Button
icon={<PlusOutlined />}
type='primary'
onClick={addParameterDataEvent}
style={{ marginRight: '10px' }}
></Button>
) : (
''
)}
{index ? (
<Button
type='primary'
icon={<MinusOutlined />}
onClick={deleteParameterDataEvent}
></Button>
) : (
''
)}
</>
),
},
];
const columns = attrTableColumns.map((col) => {
if (!col.editable) {
return col;
}
return {
...col,
onCell: (record: any) => ({
record,
dataIndex: col.dataIndex,
title: col.title,
editing: col.editable,
inputType: col.inputType,
rules: col.rules,
}),
};
});
const [parameterTableData, setParameterTableData] = useState<any>([{ id: 1 }]);
//商品参数新增
const addParameterDataEvent = () => {
setParameterTableData([...parameterTableData, { id: parameterTableData.length + 1 }]);
};
//商品参数删除
const deleteParameterDataEvent = () => {};
return (
<div className='rent-attr'>
<div className='rent-attr-title'>商品属性</div>
<Form labelCol={{ span: 2 }} wrapperCol={{ span: 10 }}>
<Form.Item label='商品类型'>
<Radio.Group>
{typeList.map((v) => (
<Radio key={v.value} value={v.value}>
{v.label}
</Radio>
))}
</Radio.Group>
</Form.Item>
<Form.Item label='商品型号'>
<Cascader placeholder='请选择商品型号' />
</Form.Item>
<Form.Item label='商品参数'>
<Form>
<Table
columns={columns as ColumnTypes}
components={{
body: {
cell: EditableCell,
},
}}
dataSource={parameterTableData}
bordered
rowKey='id'
pagination={false}
></Table>
</Form>
</Form.Item>
<Form.Item label='商品图片'>
<Uploader fileUpload listType='picture-card'>
<UploadOutlined />
</Uploader>
</Form.Item>
<Form.Item label='商品视频'>
<Uploader fileUpload listType='picture-card'>
<UploadOutlined />
</Uploader>
</Form.Item>
<Form.Item label='商品详情页'>
<RichText richTextContent='' />
</Form.Item>
</Form>
</div>
);
};
export default RentAttr;
.rent-info{
&-title{
font-size: 15px;
font-weight: bold;
line-height: 40px;
}
}
import { Form, Select } from 'antd';
import './index.scss';
const RentInfo = () => {
return (
<div className='rent-info'>
<div className='rent-info-title'>租赁信息</div>
<Form labelCol={{ span: 2 }} wrapperCol={{ span: 10 }}>
<Form.Item label='最低租期'>
<Select placeholder='请选择租期'>
<Select.Option>11</Select.Option>
</Select>
</Form.Item>
<Form.Item label='最高租期'>
<Select placeholder='请选择租期'>
<Select.Option>11</Select.Option>
</Select>
</Form.Item>
</Form>
</div>
);
};
export default RentInfo;
.sku-info{
&-title{
font-size: 15px;
font-weight: bold;
line-height: 40px;
}
}
import './index.scss';
import { Button, Col, Row, Table } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import { ColumnsType } from 'antd/es/table/InternalTable';
const SkuInfo = () => {
const skuTableColumns: ColumnsType<any> = [
{
title: '版本',
align: 'center',
},
{
title: '是否缺货',
align: 'center',
},
{
title: '押金',
align: 'center',
},
];
return (
<div className='sku-info'>
<div className='sku-info-title'>价格库存信息</div>
<Row>
<Col span={1}></Col>
<Col span={22}>
<div>
<Button type='primary' icon={<PlusOutlined />} style={{ marginBottom: '10px' }}>
新增规格
</Button>
<Table bordered columns={skuTableColumns} />
</div>
</Col>
</Row>
</div>
);
};
export default SkuInfo;
import GoodsInfo from './components/goodsInfo';
import RentAttr from './components/rentAttr';
import RentInfo from './components/rentInfo';
import SkuInfo from './components/skuInfo';
const RentAddOrEdit = () => {
return (
<div className='rent-create-edit'>
{/*商品信息*/}
<GoodsInfo />
{/*商品属性*/}
<RentAttr />
{/*租赁信息*/}
<RentInfo />
{/*价格库存信息*/}
<SkuInfo />
</div>
);
};
export default RentAddOrEdit;
......@@ -6,11 +6,14 @@ import { useEffect, useState } from 'react';
import { RentManageAPI } from '~/api';
import { InterDataType, PaginationProps } from '~/api/interface';
import { listBrandInfoType } from '~/api/interface/rentManageType';
import { useNavigate } from 'react-router-dom';
//品牌列表返回类型
type makeListType = InterDataType<listBrandInfoType>['list'];
const RentMake = () => {
const navigate = useNavigate();
const tableColumns: ColumnsType<makeListType[0]> = [
{
title: '品牌名称',
......@@ -30,7 +33,9 @@ const RentMake = () => {
width: '15%',
render: (_: any, record) => (
<>
<Button type='link'>绑定型号</Button>
<Button type='link' onClick={() => addRentModeClick(record)}>
新增型号
</Button>
<Button type='link' onClick={() => addOrEditRentMakeModalClick(record)}>
编辑
</Button>
......@@ -71,6 +76,14 @@ const RentMake = () => {
getListBrandInfo();
setAddOrEditRentMakeModalShow(false);
};
//品牌新增型号
const addRentModeClick = (record: makeListType[0]) => {
navigate({
pathname: '/rentManage/rentModel',
search: `brandInfoId=${record.id}&brandName=${record.brandName}`,
});
};
//分页
const paginationChange = (pageNo: number, pageSize: number) => {
pagination.pageNo = pageNo;
......
import { Form, Input, Modal, ModalProps, Select } from 'antd';
import { Button, Col, Form, Input, message, Modal, ModalProps, Row, Select } from 'antd';
import { FC, useEffect, useState } from 'react';
import { InterDataType, InterReqType } from '~/api/interface';
import { addRentModeType, getTypeListType } from '~/api/interface/rentManageType';
import { addRentModeType, getTypeListType, rentModeListType } from '~/api/interface/rentManageType';
import { RentManageAPI } from '~/api';
import { MinusOutlined, PlusOutlined } from '@ant-design/icons';
interface selfProps {
onOk: () => void;
onCancel: () => void;
brandInfoId: number;
rentTypeList: rentTypeListType;
currentRentMode: modeListType[0] | undefined;
}
//型号新增参数类型
type addRentParameterType = Exclude<InterReqType<addRentModeType>, undefined>;
//类型类别返回类型
type rentTypeListType = InterDataType<getTypeListType>['list'];
//型号返回类型
type modeListType = InterDataType<rentModeListType>['list'];
const AddOrEditRentModeModal: FC<ModalProps & selfProps> = ({ open, onOk, onCancel }) => {
const AddOrEditRentModeModal: FC<ModalProps & selfProps> = ({
open,
onOk,
onCancel,
brandInfoId,
rentTypeList,
currentRentMode,
}) => {
const [form] = Form.useForm<addRentParameterType>();
const [rentTypeList, setRentTypeList] = useState<rentTypeListType>([]);
//标签数组
const [tagList, setTagList] = useState<{ id: number; tagName: string }[]>([
{ id: Math.random(), tagName: 'tag1' },
]);
const handleOk = () => {
form.validateFields().then((values) => {
RentManageAPI.addRentMode({ ...values }).then(({ code }) => {
form.validateFields().then((values: any) => {
const covertTagList = tagList.reduce((pre: string[], cur) => {
const tagKeyItem: string | undefined = Object.keys(values).find(
(key: string) => key === cur.tagName,
);
if (tagKeyItem && values[tagKeyItem]) {
pre.push(values[tagKeyItem]);
}
return pre;
}, []);
RentManageAPI.addRentMode({
productTypeId: values.productTypeId,
modeName: values.modeName,
tag: covertTagList.length ? covertTagList.join(',') : undefined,
brandInfoId,
}).then(({ code }) => {
if (code === '200') {
message.success('新增成功');
form.resetFields();
onOk();
}
......@@ -32,20 +64,44 @@ const AddOrEditRentModeModal: FC<ModalProps & selfProps> = ({ open, onOk, onCanc
form.resetFields();
onCancel();
};
//获取类型列表
const getRentTypeList = () => {
RentManageAPI.getTypeList({ pageNo: 1, pageSize: 99999 }).then(({ result }) => {
setRentTypeList(result.list || []);
});
//新增标签
const addTagClick = () => {
setTagList([...tagList, { id: Math.random(), tagName: `tag${tagList.length + 1}` }]);
};
//删除标签
const deleteTagClick = (index: number) => {
form.setFieldValue(tagList[index].tagName, undefined);
tagList.splice(index, 1);
setTagList([...tagList]);
};
useEffect(() => {
getRentTypeList();
}, []);
if (currentRentMode) {
form.setFieldsValue({
productTypeId: currentRentMode.productTypeId,
modeName: currentRentMode.modeName,
...currentRentMode.tag?.split(',').reduce((pre: any, cur, currentIndex) => {
pre['tag' + (currentIndex + 1)] = cur;
return pre;
}, {}),
});
setTagList(
currentRentMode.tag
?.split(',')
.map((_v, index) => ({ id: Math.random(), tagName: `tag${index + 1}` })) || [],
);
}
}, [currentRentMode]);
return (
<Modal open={open} onOk={handleOk} onCancel={handleCancel} title='新增型号'>
<Form form={form}>
<Modal
open={open}
onOk={handleOk}
onCancel={handleCancel}
title={currentRentMode ? '编辑型号' : '新增型号'}
>
<Form form={form} labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}>
<Form.Item
label='所属类别'
name='productTypeId'
......@@ -66,6 +122,42 @@ const AddOrEditRentModeModal: FC<ModalProps & selfProps> = ({ open, onOk, onCanc
>
<Input placeholder='请输入型号名称' maxLength={30} />
</Form.Item>
{tagList.map((v, index) => (
<Row key={v.id}>
<Col span={20}>
<Form.Item
label={index ? '' : '标签'}
labelCol={{ span: 5 }}
wrapperCol={{ span: 19, offset: index ? 5 : 0 }}
name={v.tagName}
>
<Input placeholder='请输入标签名称' />
</Form.Item>
</Col>
<Col span={3} offset={1}>
{index === tagList.length - 1 ? (
<Button
type='primary'
icon={<PlusOutlined />}
style={{ marginRight: '5px' }}
onClick={addTagClick}
></Button>
) : (
''
)}
{index ? (
<Button
type='primary'
icon={<MinusOutlined />}
onClick={() => deleteTagClick(index)}
></Button>
) : (
''
)}
</Col>
</Row>
))}
</Form>
</Modal>
);
......
import SearchBox, { searchColumns as searchColumnsType } from '~/components/search-box';
import { Button, Table } from 'antd';
import { Button, Modal, Table, Tag } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import { ColumnsType } from 'antd/es/table/InternalTable';
import AddOrEditRentModeModal from '~/pages/rentManage/rentMode/components/addOrEditRentModeModal';
import { useEffect, useState } from 'react';
import { RentManageAPI } from '~/api';
import { PaginationProps } from '~/api/interface';
import { InterDataType, InterReqListType, PaginationProps } from '~/api/interface';
import { useSearchParams, useNavigate } from 'react-router-dom';
import { getTypeListType, rentModeListType } from '~/api/interface/rentManageType';
//类型类别返回类型
type rentTypeListType = InterDataType<getTypeListType>['list'];
//型号返回类型
type modeListType = InterDataType<rentModeListType>['list'];
//型号列表参数类型
type modeListParametersType = InterReqListType<rentModeListType>;
const RentMode = () => {
const tableColumns: ColumnsType<any> = [
const [searchParams] = useSearchParams();
const navigate = useNavigate();
const [rentTypeList, setRentTypeList] = useState<rentTypeListType>([]);
const tableColumns: ColumnsType<modeListType[0]> = [
{
title: '型号名称',
align: 'center',
dataIndex: 'modeName',
},
{
title: '所属类型',
align: 'center',
},
{
title: '所属品牌',
align: 'center',
dataIndex: 'productTypeId',
render: (text: number) => rentTypeList.find((v) => v.id === text)?.name || '',
},
{
title: '标签',
align: 'center',
dataIndex: 'tag',
render: (text: string) => text?.split(',').map((v, index) => <Tag key={index}>{v}</Tag>),
},
{
title: '操作',
align: 'center',
width: '10%',
render: (_: any, record) => (
<>
<Button type='link' onClick={() => addOrEditRentModelClick(record)}>
编辑
</Button>
<Button type='link' onClick={() => deleteRentModelClick(record)}>
删除
</Button>
</>
),
},
];
const searchColumns: searchColumnsType[] = [
{
name: '',
label: '设备类型',
placeholder: '请选择设备类型',
name: 'productTypeId',
label: '所属类型',
placeholder: '请选择所属类型',
type: 'select',
options: [],
options: rentTypeList.map((v) => ({ id: v.id, name: v.name })),
},
];
const [brandInfoId, setBrandInfoId] = useState<number>(-1);
const [addOrEditRentModelModalShow, setAddOrEditRentModelModalShow] = useState<boolean>(false);
const [pagination, setPagination] = useState<PaginationProps & { totalCount: number }>({
pageNo: 1,
pageSize: 10,
totalCount: 0,
});
const [tableData, setTableData] = useState<modeListType>([]);
const [query, setQuery] = useState<modeListParametersType>();
const [currentRentMode, setCurrentRentMode] = useState<modeListType[0]>();
//新增,编辑型号弹窗
const addOrEditRentModelClick = () => {
const addOrEditRentModelClick = (record?: modeListType[0]) => {
setCurrentRentMode(record ? { ...record } : undefined);
setAddOrEditRentModelModalShow(true);
};
const addOrEditRentModelModalCancel = () => {
setAddOrEditRentModelModalShow(false);
};
const addOrEditRentModelModalOk = () => {
setAddOrEditRentModelModalShow(true);
setAddOrEditRentModelModalShow(false);
getModeList(brandInfoId, query);
};
//类型列表
const getModeList = () => {
//删除型号
const deleteRentModelClick = (record: modeListType[0]) => {
Modal.confirm({
title: '提示',
content: '确认删除该型号?',
onOk: () => {},
});
};
//型号列表
const getModeList = (brandInfoId: number, query?: modeListParametersType) => {
RentManageAPI.getRentModeList({
pageNo: pagination.pageNo,
pageSize: pagination.pageSize,
brandInfoId,
...query,
}).then(({ result }) => {
pagination.totalCount = result.totalCount;
setTableData(result.list || []);
setPagination({ ...pagination });
});
};
//获取类型列表
const getRentTypeList = () => {
RentManageAPI.getTypeList({ pageNo: 1, pageSize: 99999 }).then(({ result }) => {
setRentTypeList(result.list || []);
searchColumns[0].options = (result.list || []).map((v) => ({ id: v.id, name: v.name }));
});
};
//返回
const backRoute = () => {
navigate(-1);
};
//分页
const paginationChange = (pageNo: number, pageSize: number) => {
pagination.pageNo = pageNo;
pagination.pageSize = pageSize;
getModeList(brandInfoId, query);
};
//筛选
const searchSuccess = (value: modeListParametersType) => {
pagination.pageSize = 10;
pagination.pageNo = 1;
setQuery(value);
getModeList(brandInfoId, value);
};
useEffect(() => {
getModeList();
getRentTypeList();
setBrandInfoId(Number(searchParams.get('brandInfoId')));
getModeList(Number(searchParams.get('brandInfoId')));
}, []);
return (
<div className='rent-model'>
<SearchBox
search={searchColumns}
child={
<Button type='primary' icon={<PlusOutlined />} onClick={addOrEditRentModelClick}>
新增型号
<>
<span style={{ marginRight: '10px', color: '#1677ff' }}>
当前品牌:{searchParams.get('brandName')}
</span>
<Button
type='primary'
icon={<PlusOutlined />}
onClick={() => addOrEditRentModelClick()}
>
新增型号
</Button>
</>
}
otherChild={
<Button type='primary' onClick={backRoute}>
返回
</Button>
}
searchData={searchSuccess}
/>
<Table
bordered
columns={tableColumns}
dataSource={tableData}
rowKey='id'
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} 条数据`,
}}
/>
<Table bordered columns={tableColumns} />
<AddOrEditRentModeModal
open={addOrEditRentModelModalShow}
onCancel={addOrEditRentModelModalCancel}
onOk={addOrEditRentModelModalOk}
brandInfoId={brandInfoId}
rentTypeList={rentTypeList}
currentRentMode={currentRentMode}
/>
</div>
);
......
......@@ -98,9 +98,7 @@ const ServiceIntroduceView = React.lazy(
); //服务介绍
const RentListView = React.lazy(() => import('~/pages/rentManage/rentGoods/rentList')); //租赁列表
const RentAddOrEditOrDetailView = React.lazy(
() => import('~/pages/rentManage/rentGoods/rentAddOrEditOrDetail'),
); //租赁新增、编辑、详情
const RentAddOrEditView = React.lazy(() => import('~/pages/rentManage/rentGoods/rentAddOrEdit')); //租赁新增、编辑、详情
const RentTypeView = React.lazy(() => import('~/pages/rentManage/rentType')); //租赁-类型管理
const RentMakeView = React.lazy(() => import('~/pages/rentManage/rentMake')); //租赁-品牌管理
const RentModeView = React.lazy(() => import('~/pages/rentManage/rentMode')); //租赁-型号管理
......@@ -716,7 +714,7 @@ export const routerList: Array<RouteObjectType> = [
},
{
path: '/rentManage/rentGoods/add',
element: withLoadingComponent(<RentAddOrEditOrDetailView />),
element: withLoadingComponent(<RentAddOrEditView />),
errorElement: <ErrorPage />,
meta: {
id: 10135,
......@@ -727,7 +725,7 @@ export const routerList: Array<RouteObjectType> = [
},
{
path: '/rentManage/rentGoods/edit',
element: withLoadingComponent(<RentAddOrEditOrDetailView />),
element: withLoadingComponent(<RentAddOrEditView />),
errorElement: <ErrorPage />,
meta: {
id: 10136,
......@@ -736,17 +734,17 @@ export const routerList: Array<RouteObjectType> = [
hidden: true,
},
},
{
path: '/rentManage/rentGoods/detail',
element: withLoadingComponent(<RentAddOrEditOrDetailView />),
errorElement: <ErrorPage />,
meta: {
id: 10136,
icon: <SmileOutlined />,
title: '租赁商品详情',
hidden: true,
},
},
// {
// path: '/rentManage/rentGoods/detail',
// element: withLoadingComponent(<RentAddOrEditView />),
// errorElement: <ErrorPage />,
// meta: {
// id: 10136,
// icon: <SmileOutlined />,
// title: '租赁商品详情',
// hidden: true,
// },
// },
{
path: '/rentManage/rentType',
element: withLoadingComponent(<RentTypeView />),
......@@ -776,8 +774,9 @@ export const routerList: Array<RouteObjectType> = [
meta: {
id: 10139,
icon: <SmileOutlined />,
title: '型号管理',
title: '品牌管理/型号',
develop: true,
hidden: true,
},
},
],
......@@ -792,20 +791,9 @@ export const routerList: Array<RouteObjectType> = [
title: '分类管理',
},
children: [
{
path: '/categoryManage/jobServicesCategory/1',
element: withLoadingComponent(<CategoryManage />),
errorElement: <ErrorPage />,
meta: {
id: 1210,
title: '作业服务分类',
icon: <SendOutlined />,
},
},
// 作业服务分类(新)
// {
// path: '/categoryManage/serviceCategoryList',
// element: withLoadingComponent(<ServiceCategoryListView />),
// path: '/categoryManage/jobServicesCategory/1',
// element: withLoadingComponent(<CategoryManage />),
// errorElement: <ErrorPage />,
// meta: {
// id: 1210,
......@@ -813,6 +801,17 @@ export const routerList: Array<RouteObjectType> = [
// icon: <SendOutlined />,
// },
// },
// 作业服务分类(新)
{
path: '/categoryManage/serviceCategoryList',
element: withLoadingComponent(<ServiceCategoryListView />),
errorElement: <ErrorPage />,
meta: {
id: 1210,
title: '作业服务分类',
icon: <SendOutlined />,
},
},
{
path: '/categoryManage/jobServicesCategory/2',
element: withLoadingComponent(<CategoryManage />),
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论