Commit 2ad52ba8 authored by XieZhiXiong's avatar XieZhiXiong

静态页面开发中

parent 0ecdc5fe
/*
* @Author: LeeJiancong
* @Date: 2020-08-19 15:33:27
* @LastEditors: LeeJiancong
* @LastEditors: XieZhiXiong
* @Copyright: 1549414730@qq.com
* @LastEditTime: 2020-08-20 10:22:11
* @LastEditTime: 2020-09-27 19:18:57
*/
const payandSettleRoute = {
path:'/memberCenter/payandSettle',
......@@ -22,7 +22,25 @@ const payandSettleRoute = {
component:'@/pages/payandSettle/paySetting'
}
]
}
},
// 授信申请
{
path:'/memberCenter/payandSettle/creditApplication',
name:'creditApplication',
routes: [
{
path: '/memberCenter/payandSettle/creditApplication/quotaMenage',
name: 'quotaMenage',
component: '@/pages/payandSettle/quotaMenage/index',
},
{
path: '/memberCenter/payandSettle/creditApplication/quotaMenage/detail',
name: 'quotaMenageDetail',
component: '@/pages/payandSettle/quotaMenage/detail/index',
hideInMenu: true,
},
],
},
]
}
export default payandSettleRoute
\ No newline at end of file
......@@ -2,7 +2,7 @@
* @Author: LeeJiancong
* @Date: 2020-07-13 14:08:50
* @LastEditors: XieZhiXiong
* @LastEditTime: 2020-09-27 11:19:28
* @LastEditTime: 2020-09-27 17:42:44
*/
export default {
......@@ -235,6 +235,9 @@ export default {
'menu.payandSettle': '支付',
'menu.payandSettle.paySetting': '支付方式管理',
'menu.payandSettle.paySetting.payParamsSetting': '会员支付参数配置',
'menu.payandSettle.creditApplication': '授信申请',
'menu.payandSettle.creditApplication.quotaMenage': '授信额度管理',
'menu.payandSettle.creditApplication.quotaMenageDetail': '授信额度管理',
// 权限管理
'menu.systemSetting': '系统',
......
import React from 'react';
import {
Row,
Col,
Statistic,
Badge,
} from 'antd';
import MellowCard from '@/components/MellowCard';
import { Pie } from '@/components/Charts';
import styles from './index.less';
interface IntroduceRowProps {
quotaData: {
x: string,
y: number,
}[],
};
const IntroduceRow: React.FC<IntroduceRowProps> = ({
quotaData = [],
}) => {
return (
<Row gutter={23}>
<Col span={10}>
<MellowCard title="授信额度">
<Row gutter={20} align="middle">
<Col span={14}>
<Pie
hasLegend={false}
subTitle=""
total={null}
data={quotaData}
height={200}
colors={['#41CC9E', '#EF6260']}
/>
</Col>
<Col span={10}>
<Statistic
title={(
<Badge color="#41CC9E" text="剩余可用额度(元):" />
)}
value={100000}
precision={2}
/>
</Col>
</Row>
</MellowCard>
</Col>
<Col span={14}>
<MellowCard
title="账单记录"
extra={(
123
)}
>
2
</MellowCard>
</Col>
</Row>
);
};
export default IntroduceRow;
\ No newline at end of file
import React, { Suspense } from 'react';
import {
PageHeader,
Descriptions,
Card,
Spin,
Button,
Badge,
message,
} from 'antd';
import { FormOutlined } from '@ant-design/icons';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { history } from 'umi';
import AvatarWrap from '@/components/AvatarWrap';
import StatusTag from '@/components/StatusTag';
import styles from './index.less';
const IntroduceRow = React.lazy(() => import('./components/IntroduceRow'));
const QuotaMenageDetail: React.FC = () => {
const quotaData = [
{
x: '剩余可用额度(元)',
y: 80,
},
{
x: '已用额度(元)',
y: 20,
},
];
return (
<PageHeaderWrapper
title={
<>
<PageHeader
style={{ padding: '0' }}
onBack={() => history.goBack()}
title={
<AvatarWrap
info={{
name: '订单号:DPTY12',
}}
extra="青铜会员"
/>
}
extra={(
<>
</>
)}
>
<Descriptions
size="small"
column={3}
style={{
padding: '0 32px',
}}
>
<Descriptions.Item label="会员类型">企业会员</Descriptions.Item>
<Descriptions.Item label="会员角色" span={2}>供应商</Descriptions.Item>
<Descriptions.Item label="还款状态">
<StatusTag type="warnning" title="逾期 3 天" />
</Descriptions.Item>
<Descriptions.Item label="会员状态" span={2}>
<Badge color="#41CC9E" text="正常" />
</Descriptions.Item>
</Descriptions>
</PageHeader>
</>
}
>
<Suspense fallback={null}>
<IntroduceRow quotaData={quotaData} />
</Suspense>
</PageHeaderWrapper>
);
};
export default QuotaMenageDetail;
\ No newline at end of file
import React, { useState, useRef } from 'react';
import { Card, Badge, Progress, Button } from 'antd';
import { StandardTable } from 'god';
import { ColumnType } from 'antd/lib/table/interface';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { createFormActions } from '@formily/antd';
import { useStateFilterSearchLinkageEffect } from '@/formSchema/effects/useFilterSearch';
import { useAsyncInitSelect } from '@/formSchema/effects/useAsyncInitSelect';
import { FORM_FILTER_PATH } from '@/formSchema/const';
import EyePreview from '@/components/EyePreview';
import NiceForm from '@/components/NiceForm';
import StatusTag from '@/components/StatusTag';
import { listSearchSchema } from './schema';
import styles from './index.less';
const formActions = createFormActions();
const mock = [
{
id: 1,
memberName: '广州白马皮具交易有限公司',
memberType: '企业会员',
memberRole: '采购商',
memberLevel: '青铜会员',
available : '50,000.00',
count: '48,000',
used: '48,000',
repaymentStatus: 1,
status: 1,
},
{
id: 2,
memberName: '广州白马皮具交易有限公司',
memberType: '企业会员',
memberRole: '采购商',
memberLevel: '青铜会员',
available : '50,000.00',
count: '48,000',
used: '48,000',
repaymentStatus: 1,
status: 1,
},
];
const QuotaMenage: React.FC = () => {
const ref = useRef<any>({});
const defaultColumns: ColumnType<any>[] = [
{
title: '会员归属',
dataIndex: 'memberName',
align: 'center',
render: (text, record) => (
<EyePreview
url={`/memberCenter/payandSettle/creditApplication/quotaMenage/detail`}
>
{text}
</EyePreview>
),
},
{
title: '会员类型',
dataIndex: 'memberType',
align: 'center',
},
{
title: '会员角色',
dataIndex: 'memberRole',
align: 'center',
render: (text, record) => <>{text}</>,
},
{
title: '所属会员等级',
dataIndex: 'memberLevel',
align: 'center',
render: (text, record) => <>{text}</>,
},
{
title: '剩余可用额度(元)',
dataIndex: 'available',
align: 'center',
},
{
title: '总额度/已用额度(元)',
dataIndex: 'count',
align: 'center',
render: (text, record) => (
<>
<div>总额度:{text}</div>
<div>已使用:{record.used}</div>
</>
),
},
{
title: '',
dataIndex: 'used',
align: 'center',
render: (text, record) => (
<Progress
type="circle"
percent={40}
strokeColor="#41CC9E"
strokeWidth={12}
width={40}
format={() => ''}
/>
),
},
{
title: '还款状态',
dataIndex: 'repaymentStatus',
align: 'center',
render: (text, record) => (
<StatusTag type="warnning" title="逾期 3 天" />
),
},
{
title: '状态',
dataIndex: 'status',
align: 'center',
filters: [],
onFilter: (value, record) => record.innerStatus === value,
render: (text, record) => <Badge color="#41CC9E" text="正常" />,
},
];
const [columns, setColumns] = useState<any[]>(defaultColumns);
const fetchListData = (params: any) => {
return Promise.resolve({
total: 2,
data: mock,
});
};
// 初始化高级筛选选项
const fetchSelectOptions = async () => {
return {};
};
return (
<PageHeaderWrapper>
<Card>
<StandardTable
tableProps={{
rowKey: 'id',
}}
columns={columns}
currentRef={ref}
fetchTableData={(params: any) => fetchListData(params)}
controlRender={
<NiceForm
actions={formActions}
onSubmit={values => ref.current.reload(values)}
effects={($, actions) => {
useStateFilterSearchLinkageEffect(
$,
actions,
'name',
FORM_FILTER_PATH,
);
useAsyncInitSelect(
['innerStatus', 'outerStatus'],
fetchSelectOptions,
);
}}
schema={listSearchSchema}
/>
}
/>
</Card>
</PageHeaderWrapper>
);
};
export default QuotaMenage;
\ No newline at end of file
/*
* @Author: XieZhiXiong
* @Date: 2020-09-27 17:47:42
* @LastEditors: XieZhiXiong
* @LastEditTime: 2020-09-27 19:29:08
* @Description:
*/
import { ISchema } from '@formily/antd';
import { FORM_FILTER_PATH } from '@/formSchema/const';
import { UPLOAD_TYPE } from '@/constants';
export const listSearchSchema: ISchema = {
type: 'object',
properties: {
megaLayout: {
type: 'object',
'x-component': 'mega-layout',
properties: {
name: {
type: 'string',
'x-component': 'Search',
'x-component-props': {
placeholder: '搜索',
align: 'flex-left',
tip: '输入 会员归属 进行搜索',
},
},
[FORM_FILTER_PATH]: {
type: 'object',
'x-component': 'mega-layout',
'x-component-props': {
grid: true,
full: true,
autoRow: true,
columns: 6,
},
properties: {
repaymentStatus: {
type: 'string',
default: undefined,
enum: [],
'x-component-props': {
placeholder: '还款状态(全部)',
allowClear: true,
},
},
status: {
type: 'string',
default: undefined,
enum: [],
'x-component-props': {
placeholder: '状态(全部)',
allowClear: true,
},
},
submit: {
'x-component': 'Submit',
'x-mega-props': {
span: 1,
},
'x-component-props': {
children: '查询',
},
},
},
},
},
},
},
};
\ No newline at end of file
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