Commit 1585f1ea authored by GuanHua's avatar GuanHua
parents e38dd2d8 24f448de
...@@ -11,6 +11,7 @@ const config: any = { ...@@ -11,6 +11,7 @@ const config: any = {
"process.env.BACK_GATEWAY": process.env.BACK_GATEWAY "process.env.BACK_GATEWAY": process.env.BACK_GATEWAY
}, },
// layout: {}, // layout: {},
esbuild: {},
antd: {}, antd: {},
locale: { locale: {
antd: true, antd: true,
......
...@@ -184,15 +184,7 @@ const CommodityRoute = { ...@@ -184,15 +184,7 @@ const CommodityRoute = {
icon: 'smile', icon: 'smile',
hideInMenu: true, hideInMenu: true,
component: './repositories/adjustRepository', component: './repositories/adjustRepository',
}, }
{
path: '/memberCenter/commodityAbility/repositories/viewRepository',
name: 'viewRepository',
key: 'viewRepository',
icon: 'smile',
hideInMenu: true,
component: './repositories/viewRepository',
},
] ]
} }
......
...@@ -36,6 +36,7 @@ ...@@ -36,6 +36,7 @@
"@formily/antd": "^1.3.3", "@formily/antd": "^1.3.3",
"@formily/antd-components": "^1.3.3", "@formily/antd-components": "^1.3.3",
"@umijs/hooks": "^1.9.3", "@umijs/hooks": "^1.9.3",
"@umijs/plugin-esbuild": "^1.0.1",
"@umijs/preset-react": "1.x", "@umijs/preset-react": "1.x",
"@umijs/test": "^3.2.0", "@umijs/test": "^3.2.0",
"antd-img-crop": "^3.12.0", "antd-img-crop": "^3.12.0",
......
import React, { useState, useRef, ReactNode } from 'react'
import { history } from 'umi'
import { Card, Space, Radio, Row, Col, Descriptions, Table, Tag } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import {
EyeOutlined,
} from '@ant-design/icons'
import {
Chart,
Interval,
Tooltip,
Axis,
Coordinate,
Interaction,
Legend,
} from 'bizcharts'
import { ColumnType } from 'antd/lib/table/interface'
import ReutrnEle from '@/components/ReturnEle'
import styles from './index.less'
const ViewRepository: React.FC<{}> = () => {
const [memberType, setMemberType] = useState(1)
const dataRecord = [
{
key: '1',
inRepository: '牛皮仓-渠道商城-所有渠道',
outRepository: '牛皮仓-直销商城-会员渠道',
productName: '进口头层牛皮荔枝纹/天青色/XXXLL',
inAmount: 10232,
outAmount: 981232,
unit: '吨',
time: '1250-51-02 45:23:99',
},
{
key: '2',
inRepository: '牛皮仓-渠道商城-所有渠道',
outRepository: '牛皮仓-直销商城-会员渠道',
productName: '进口头层牛皮荔枝纹/天青色/XXXLL',
inAmount: 10232,
outAmount: 981232,
unit: '吨',
time: '1250-51-02 45:23:99',
}
];
const columnsRecord: ColumnType<any>[] = [
{
title: 'ID',
dataIndex: 'key',
key: 'key',
},
{
title: '调出/调入仓位',
dataIndex: 'inRepository',
key: 'inRepository',
render: (text: any, record: any) => <>
<p><Tag color="gold">调出仓位 </Tag>{record.outRepository}</p>
<p><Tag color="blue">调入仓位 </Tag>{record.inRepository}</p>
</>
},
{
title: '调出商品',
dataIndex: 'productName',
key: 'productName',
},
{
title: '单位',
key: 'unit',
dataIndex: 'unit',
},
{
title: '调出库存',
key: 'outAmount',
dataIndex: 'outAmount',
render: (text: any, record: any) => <>
<p>调出库存:{record.outAmount}</p>
<p>调出前库存:{record.outAmount}</p>
</>
},
{
title: '调入库存',
key: 'inAmount',
dataIndex: 'inAmount',
render: (text: any, record: any) => <>
<p>调入库存:{record.inAmount}</p>
<p>调入后库存:{record.inAmount}</p>
</>
},
{
title: '调拨时间',
key: 'time',
dataIndex: 'time',
},
];
const dataMember = [
{
key: '1',
name: '渠道名称',
type: '渠道企业会员',
role: '渠道采购商',
class: '青铜会员',
},
{
key: '2',
name: '渠道名称',
type: '渠道企业会员',
role: '渠道采购商',
class: '铁皮会员',
},
]
const columnsMember: ColumnType<any>[] = [
{
title: 'ID',
dataIndex: 'key',
align: 'center',
key: 'key',
},
{
title: '会员名称',
dataIndex: 'name',
align: 'center',
key: 'name',
render: (text:any, record:any) => <span className="commonPickColor">{text}&nbsp;<EyeOutlined /></span>
},
{
title: '会员类型',
dataIndex: 'type',
align: 'center',
key: 'type',
},
{
title: '会员角色',
dataIndex: 'role',
align: 'center',
key: 'role',
},
{
title: '会员等级',
dataIndex: 'class',
align: 'center',
key: 'class',
},
]
const content = <>
<Descriptions colon={true} column={2}>
<Descriptions.Item label="当前库存"><span className={styles.amount}>12000</span></Descriptions.Item>
<Descriptions.Item label="已用库存"><span className={styles.amount}>8000</span></Descriptions.Item>
</Descriptions>
<br />
<br />
<Descriptions colon={true} column={1}>
<Descriptions.Item label="商品名称">进口头层黄牛皮荔枝纹/红色/XL</Descriptions.Item>
<Descriptions.Item label="库存扣减方式">按仓位随机扣减(默认)</Descriptions.Item>
</Descriptions>
</>
const dataChart = [
{ item: '当前库存', count: 12000, percent: 0.6 },
{ item: '已用库存', count: 8000, percent: 0.4 },
]
const colsChart = {
percent: {
formatter: (val:any) => {
val = val * 20000;
return val;
},
},
}
return (
<PageHeaderWrapper
title="进口头层黄牛皮荔枝纹/红色/XL"
onBack={() => history.goBack()}
backIcon={<ReutrnEle logoSrc='https://avatars1.githubusercontent.com/u/8186664?s=460&v=4' />}
>
<Space direction="vertical" style={{width:'100%'}}>
<Row gutter={[26,0]}>
<Col span={12}>
<Card headStyle={{borderBottom:'none'}} title="当前仓位库存(尺)" style={{height:'320px'}}>
<Row>
<Col span={12}>
<Chart height={180} data={dataChart} scale={colsChart} autoFit>
<Coordinate type="theta" radius={0.75} />
<Tooltip showTitle={false} />
<Legend visible={false} />
<Axis visible={false} />
<Interval
position="percent"
adjust="stack"
color={['item',['#669ede', '#f4f5f7']]}
style={{
lineWidth: 1,
stroke: '#fff',
}}
label={['count', {
content: (data: any) => {
return `${data.item}: ${data.percent * 100}%`;
},
}]}
/>
<Interaction type='element-single-selected' />
</Chart>
</Col>
<Col span={12}>{content}</Col>
</Row>
</Card>
</Col>
<Col span={12}>
<Card headStyle={{borderBottom:'none'}} title={<>当前仓位库存(尺)<Tag color="red">广州成品仓</Tag></>} style={{height:'320px'}}>
<Row>
<Col span={12}>
<Chart height={180} data={dataChart} scale={colsChart} autoFit>
<Coordinate type="theta" radius={0.75} />
<Tooltip showTitle={false} />
<Legend visible={false} />
<Axis visible={false} />
<Interval
position="percent"
adjust="stack"
color={['item',['#41cc9e', '#f4f5f7']]}
style={{
lineWidth: 1,
stroke: '#fff',
}}
label={['count', {
content: (data: any) => {
return `${data.item}: ${data.percent * 100}%`;
},
}]}
/>
<Interaction type='element-single-selected' />
</Chart>
</Col>
<Col span={12}>{content}</Col>
</Row>
</Card>
</Col>
</Row>
</Space>
<Space direction="vertical" style={{width:'100%'}}>
<Card headStyle={{borderBottom:'none'}} title="适用商城">
<Descriptions colon={false} column={4}>
<Descriptions.Item label="LOGO">XXXXX商城</Descriptions.Item>
<Descriptions.Item label="LOGO">XXXXX商城</Descriptions.Item>
<Descriptions.Item label="LOGO">XXXXX商城</Descriptions.Item>
<Descriptions.Item label="LOGO">XXXXX商城</Descriptions.Item>
<Descriptions.Item label="LOGO">XXXXX商城</Descriptions.Item>
<Descriptions.Item label="LOGO">XXXXX商城</Descriptions.Item>
<Descriptions.Item label="LOGO">XXXXX商城</Descriptions.Item>
</Descriptions>
</Card>
</Space>
<Space direction="vertical" style={{width:'100%'}}>
<Card headStyle={{borderBottom:'none'}} title="适用会员">
<Row>
<Col span={3}>
<p>适用会员:</p>
</Col>
<Col span={21}>
<p>{memberType ? <Radio checked>指定会员</Radio> : <Radio checked>所有会员共享(默认)</Radio>}</p>
</Col>
</Row>
{memberType ? <Table dataSource={dataMember} columns={columnsMember} /> : ''}
</Card>
</Space>
<Space direction="vertical" style={{width:'100%'}}>
<Card headStyle={{borderBottom:'none'}} title="仓位库存调拨记录">
<Table columns={columnsRecord} dataSource={dataRecord} />
</Card>
</Space>
</PageHeaderWrapper>
)
}
export default ViewRepository
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment