Skip to content

A
admin
提交 9ff1c213 作者: 18928357778
操作

Merge branch 'master' of ssh://git.mmcuav.cn:8222/root/sharefly-admin-uav

上级 3f1f71dc 6b4387b5
正在显示 包含 462 行增加 和 13 行删除
src/assets/style/App.scss
......@@ -11,7 +11,7 @@
font-size: 14px;
}
.ant-btn-link{
.ant-btn-link {
padding: 0;
font-size: 16px !important;
font-weight: bold !important;
......@@ -22,3 +22,27 @@
}
}
}
.ant-table-row:nth-child(odd) {
background: #FCFCFC;
}
.ant-table-row:nth-child(odd) > td {
background: #FCFCFC;
}
::-webkit-scrollbar {
background-color: transparent;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
width: 7px;
height: 7px;
}
::-webkit-scrollbar-thumb {
background-color: #1677ff;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
}
src/components/layout/index.scss
......@@ -209,6 +209,7 @@ $page-background: #F3F6FF ;
box-sizing: border-box;
position: relative;
box-shadow: 0 16px 24px 0 #eeeeee;
min-width: 720px;
}
.layout-content::-webkit-scrollbar {
......
src/components/layout/menu/index.tsx
......@@ -24,9 +24,10 @@ export function MenuView() {
const onOpenChange: MenuProps['onOpenChange'] = (keys) => {
setOpenKeys([keys[keys.length - 1]]);
};
// 点击侧边栏事件
const onSelect: MenuProps['onSelect'] = (keys) => {
setSelectedKeys(keys.selectedKeys);
// 点击侧边栏事件 onSelect改为onClick
const onSelect: MenuProps['onClick'] = (keys) => {
setSelectedKeys([keys.key]);
// setSelectedKeys(keys.selectedKeys);
const id = Number(keys.key);
const current = GetRouteByID(id, routerList);
// console.log(current?.path);
......@@ -74,7 +75,7 @@ export function MenuView() {
<Menu
openKeys={openKeys}
selectedKeys={selectedKeys}
onSelect={onSelect}
onClick={onSelect}
onOpenChange={onOpenChange}
mode='inline'
items={items}
......
src/pages/orderManage/productOrder/comp/detailDelivery/index.tsx 0 → 100644
import React from 'react';
import { Image } from 'antd';
function DetailDelivery() {
return (
<div className={'detail-delivery detail-half'}>
<div className={'detail-title'}>收货信息</div>
<div className={'detail-text'}>收货人：测试</div>
<div className={'detail-text'}>手机号：15889328503</div>
<div className={'detail-text'}>
收货地址：广东省深圳市南山区仙鼓路(南山区万科云城(仙鼓路西50米))
</div>
<div className={'detail-title'}>物流信息</div>
<div className={'detail-text'}>物流单号：YT6732436785799</div>
<div className={'detail-text'}>物流进度：--</div>
<div className={'detail-title'}>验收信息</div>
<div className={'detail-text'}>验收状态：已验收</div>
<div className={'detail-text'}>验收凭证：</div>
<div className={'detail-image'}>
{[
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
].map((i, j) => (
<Image key={j} className={'image'} src={i} alt='付款凭证' />
))}
</div>
</div>
);
}
export default DetailDelivery;
src/pages/orderManage/productOrder/comp/detailInformation/index.tsx 0 → 100644
import { useState } from 'react';
import { Table } from 'antd';
import { ColumnsType } from 'antd/es/table';
// 表格数据类型
type TableType = any;
function DetailInformation() {
// 表格数据
const [tableData] = useState<TableType>([{ id: 1 }]);
// 表格结构
const columns: ColumnsType<TableType[0]> = [
{
title: '商品',
dataIndex: 'userName',
align: 'center',
render: (_text, _record) => `--`,
},
{
title: '单价(元)',
dataIndex: 'userName',
align: 'center',
render: (_text, _record) => `--`,
},
{
title: '数量',
dataIndex: 'userName',
align: 'center',
render: (_text, _record) => `--`,
},
{
title: '订单状态',
dataIndex: 'userName',
align: 'center',
render: (_text, _record) => `--`,
},
{
title: '实收款',
dataIndex: 'userName',
align: 'center',
render: (_text, _record) => `--`,
},
];
return (
<div className={'detail-information'}>
<div className={'detail-title'}>订单明细</div>
<div className={'detail-text'}>
<span className={'item'}>订单编号：UD202302181041156087</span>
<span className={'item'}>创建时间：2023-02-18 10:41:16</span>
<span className={'item'}>合同编号：UAV202334741131</span>
</div>
<Table
style={{ margin: '20px auto', width: '90%' }}
size='small'
dataSource={tableData}
columns={columns}
rowKey='id'
bordered
pagination={false}
// rowSelection={{ selectedRowKeys, onChange: onSelectChange }}
/>
</div>
);
}
export default DetailInformation;
src/pages/orderManage/productOrder/comp/detailPurchaser/index.tsx 0 → 100644
import React from 'react';
import { Button, Image } from 'antd';
function DetailPurchaser() {
return (
<div className={'detail-purchaser detail-half'}>
<div className={'detail-title'}>买家信息</div>
<div className={'detail-text'}>UID： UID4460817</div>
<div className={'detail-text'}>企业： 浙江科比特创新科技有限公司</div>
<div className={'detail-text'}>备注： 测试单，不用管</div>
<div className={'detail-title'}>合同信息</div>
<div className={'detail-text'}>合同编号： UAV202334741131</div>
<div className={'detail-text'}>合同状态： 已归档</div>
<div className={'detail-text'}>
合同操作：
<Button type={'link'}>平台签署</Button>
<Button type={'link'}>查看</Button>
<Button type={'link'}>下载</Button>
</div>
<div className={'detail-title'}>付款凭证</div>
<div className={'detail-text'}>预付款：</div>
<div className={'detail-image'}>
{[
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
].map((i, j) => (
<Image key={j} className={'image'} src={i} alt='付款凭证' />
))}
</div>
<div className={'detail-text'}>尾款：</div>
<div className={'detail-image'}>
{[
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
].map((i, j) => (
<Image key={j} className={'image'} src={i} alt='付款凭证' />
))}
</div>
<div className={'detail-text'}>全款：</div>
<div className={'detail-image'}>
{[
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/file/infrastructure-05-05.png',
].map((i, j) => (
<Image key={j} className={'image'} src={i} alt='付款凭证' />
))}
</div>
</div>
);
}
export default DetailPurchaser;
src/pages/orderManage/productOrder/detail/index.scss 0 → 100644
.order-detail {
position: relative;
box-sizing: border-box;
.order-head {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
.head-text {
font-size: 13px;
font-weight: 600;
color: #000000;
div {
margin-bottom: 10px;
span {
margin-right: 20px;
}
}
}
}
.detail-wrap {
position: relative;
width: 100%;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
margin-top: 15px;
padding-bottom: 100px;
.detail-information {
margin-top: 10px;
width: 100%;
}
.detail-half {
width: 50%;
}
.detail-title {
font-size: 13px;
font-weight: 600;
color: #000000;
margin-bottom: 15px;
margin-top: 20px;
}
.detail-title:first-child {
margin-top: 0;
}
.detail-text {
margin-bottom: 10px;
.item {
margin-right: 20px;
}
}
.detail-image {
display: flex;
justify-content: flex-start;
margin-left: 56px;
margin-top: -20px;
margin-bottom: 10px;
.image {
width: 68px;
height: 68px;
//margin-right: 10px;
}
.ant-image {
margin-right: 10px;
}
}
}
}
src/pages/orderManage/productOrder/detail/index.tsx 0 → 100644
import { useEffect } from 'react';
import { useNavigate, useSearchParams } from 'react-router-dom';
import { Button } from 'antd';
import './index.scss';
import DetailDelivery from '~/pages/orderManage/productOrder/comp/detailDelivery';
import DetailPurchaser from '~/pages/orderManage/productOrder/comp/detailPurchaser';
import DetailInformation from '~/pages/orderManage/productOrder/comp/detailInformation';
function ProductOrderDetail() {
// 路由钩子
const navigate = useNavigate();
// 参数钩子
const [searchParams] = useSearchParams();
// 接收到的参数
const id = searchParams.get('id');
// 返回上一页
const handleBack = () => {
navigate(-1);
};
// componentDidMount
useEffect(() => {
console.log('拿到的id是 --->', id);
}, [id]);
return (
<div className={'order-detail'}>
<div className={'order-head'}>
<div className='head-text'>
<div>
<span>订单编号：R2023051916330461</span>
<span>合同编号：UAV202334741131</span>
</div>
<div>
<span>当前状态：交易完成</span>
<span>创建时间：2023-02-18 10:41:16</span>
</div>
</div>
<Button type={'primary'} onClick={() => handleBack()}>
返回
</Button>
</div>
<div className={'detail-wrap'}>
<DetailPurchaser />
<DetailDelivery />
<DetailInformation />
</div>
</div>
);
}
export default ProductOrderDetail;
src/pages/orderManage/productOrder/index.tsx
import { useState } from 'react';
import SearchBox from '~/components/search-box';
import { Button } from 'antd';
import { Button, Table } from 'antd';
import { ColumnsType } from 'antd/es/table';
import { useNavigate } from 'react-router-dom';
import qs from 'query-string';
// 表格数据类型
type TableType = any;
// 订单状态搜索列表
const statusCodeButtonList = [
......@@ -14,12 +20,105 @@ const statusCodeButtonList = [
];
function ProductOrderView() {
// 路由钩子
const navigate = useNavigate();
// 当前选择的是第几个按钮
const [statusCodeButtonIndex, setStatusCodeButtonIndex] = useState<number>(0);
// 表格分页配置
const [pagination] = useState({
total: 0,
pageSize: 10,
current: 1,
totalPage: 0,
});
// 表格数据
const [tableData] = useState<TableType>([{ id: 1 }]);
// 订单状态筛选
const statusChangeEvent = (index: number) => {
setStatusCodeButtonIndex(index);
const statusChangeEvent = (i: number) => {
console.log('订单状态筛选 --->', i);
setStatusCodeButtonIndex(i);
};
// 跳转订单详情
const handleDetail = (record: TableType[0]) => {
console.log('跳转订单详情 --->', record.id);
navigate(`/orderManage/productOrder/detail?${qs.stringify({ id: record.id })}`);
};
// 表格结构
const columns: ColumnsType<TableType[0]> = [
{
title: '商品',
dataIndex: 'userName',
align: 'center',
render: (_text, _record) => `--`,
},
{
title: '单价(元)',
dataIndex: 'userName',
align: 'center',
render: (_text, _record) => `--`,
},
{
title: '数量',
dataIndex: 'userName',
align: 'center',
render: (_text, _record) => `--`,
},
{
title: '买家',
dataIndex: 'userName',
align: 'center',
render: (_text, _record) => `--`,
},
{
title: '订单状态',
dataIndex: 'userName',
align: 'center',
render: (_text, _record) => `--`,
},
{
title: '实收款',
dataIndex: 'userName',
align: 'center',
render: (_text, _record) => `--`,
},
{
title: '相关运营',
dataIndex: 'userName',
align: 'center',
render: (_text, _record) => `--`,
},
{
title: '推荐人',
dataIndex: 'userName',
align: 'center',
render: (_text, _record) => `--`,
},
{
title: '订单交期',
dataIndex: 'userName',
align: 'center',
render: (_text, _record) => `--`,
},
{
title: '备注',
dataIndex: 'remark',
align: 'center',
render: (_text, _record) => `--`,
},
{
title: '操作',
dataIndex: 'action',
align: 'center',
fixed: 'right',
render: (_text, record) => (
<>
<Button type={'link'} onClick={() => handleDetail(record)}>
详情
</Button>
</>
),
},
];
return (
<>
<SearchBox
......@@ -68,6 +167,24 @@ function ProductOrderView() {
</>
}
/>
<Table
size='small'
dataSource={tableData}
columns={columns}
rowKey='id'
scroll={{ x: 1200 }}
pagination={{
total: pagination.total,
pageSize: pagination.pageSize,
current: pagination.current,
showSizeChanger: true,
showQuickJumper: true,
// onChange: (page: number, pageSize: number) =>
// paginationChange(page, pageSize),
showTotal: (total, range) => `当前 ${range[0]}-${range[1]} 条记录 / 共 ${total} 条数据`,
}}
// rowSelection={{ selectedRowKeys, onChange: onSelectChange }}
/>
</>
);
}
......
src/router/router.tsx
......@@ -2,7 +2,18 @@ import React from 'react';
import { Navigate, RouteObject } from 'react-router-dom';
import ErrorPage from '~/pages/common/error';
import LayoutView from '~/components/layout';
<<<<<<< HEAD
import { AccountBookOutlined, MacCommandOutlined ,GiftOutlined,PayCircleOutlined} from '@ant-design/icons';
=======
import {
AccountBookOutlined,
BarsOutlined,
MacCommandOutlined,
ShopOutlined,
CreditCardOutlined,
ShoppingOutlined,
} from '@ant-design/icons';
>>>>>>> 6b4387b5925df322c6d7c37e64e4fc9eea147962
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
import { AgnosticIndexRouteObject } from '@remix-run/router';
......@@ -14,6 +25,7 @@ import PointDetailList from '~/pages/pointManage/pointDetail';
import DivideOrder from '~/pages/pointManage/divideOrder';
import DivideRules from '~/pages/pointManage/divideRules';
import LoginView from '~/pages/common/login';
import ProductOrderDetail from '~/pages/orderManage/productOrder/detail';
const ActivityList = React.lazy(() => import('src/pages/activityManage/activityList'));//活动管理
const ProductOrderView = React.lazy(() => import('src/pages/orderManage/productOrder')); //销售订单
......@@ -79,7 +91,7 @@ export const routerList: Array<RouteObjectType> = [
errorElement: <ErrorPage />,
meta: {
id: 10000,
icon: <MacCommandOutlined />,
icon: <BarsOutlined />,
title: '订单管理',
},
children: [
......@@ -89,7 +101,17 @@ export const routerList: Array<RouteObjectType> = [
meta: {
id: 10010,
title: '商城订单',
icon: <MacCommandOutlined />,
icon: <ShoppingOutlined />,
},
},
{
path: '/orderManage/productOrder/detail',
element: withLoadingComponent(<ProductOrderDetail />),
meta: {
id: 10010,
title: '商城订单 / 详情',
icon: <ShoppingOutlined />,
hidden: true,
},
},
{
......@@ -98,7 +120,7 @@ export const routerList: Array<RouteObjectType> = [
meta: {
id: 10020,
title: '租赁订单',
icon: <MacCommandOutlined />,
icon: <ShopOutlined />,
},
},
{
......@@ -107,7 +129,7 @@ export const routerList: Array<RouteObjectType> = [
meta: {
id: 10030,
title: '服务订单',
icon: <MacCommandOutlined />,
icon: <CreditCardOutlined />,
},
},
],
......@@ -214,7 +236,6 @@ export const routerList: Array<RouteObjectType> = [
title: '活动优惠券操作',
icon: <PayCircleOutlined />,
hidden:true,
selectKey:'/couponManage/couponList'
},
},
{
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论