Commit 395942d5 authored by XieZhiXiong's avatar XieZhiXiong

完成待提交授信申请单UI

parent 3049b78e
......@@ -3,7 +3,7 @@
* @Date: 2020-08-19 15:33:27
* @LastEditors: XieZhiXiong
* @Copyright: 1549414730@qq.com
* @LastEditTime: 2020-09-29 10:42:23
* @LastEditTime: 2020-09-29 20:29:08
*/
const payandSettleRoute = {
path:'/memberCenter/payandSettle',
......@@ -28,28 +28,45 @@ const payandSettleRoute = {
path:'/memberCenter/payandSettle/creditApplication',
name:'creditApplication',
routes: [
// 授信额度管理
{
path: '/memberCenter/payandSettle/creditApplication/quotaMenage',
name: 'quotaMenage',
component: '@/pages/payandSettle/creditApplication/quotaMenage/index',
},
// 授信额度管理详情
{
path: '/memberCenter/payandSettle/creditApplication/quotaMenage/detail',
name: 'quotaMenageDetail',
component: '@/pages/payandSettle/creditApplication/quotaMenage/detail/index',
hideInMenu: true,
},
// 授信申请单查询
{
path: '/memberCenter/payandSettle/creditApplication/quotaFormQuery',
name: 'quotaFormQuery',
component: '@/pages/payandSettle/creditApplication/quotaFormQuery/index',
},
// 授信申请单详情
{
path: '/memberCenter/payandSettle/creditApplication/quotaFormQuery/detail',
name: 'quotaFormQueryDetail',
component: '@/pages/payandSettle/creditApplication/quotaFormQuery/detail',
hideInMenu: true,
},
// 待提交授信申请单
{
path: '/memberCenter/payandSettle/creditApplication/quotaPrSubmit',
name: 'quotaPrSubmit',
component: '@/pages/payandSettle/creditApplication/quotaPrSubmit/index',
},
// 待提交授信申请单详情
{
path: '/memberCenter/payandSettle/creditApplication/quotaPrSubmit/detail',
name: 'quotaPrSubmitDetail',
component: '@/pages/payandSettle/creditApplication/quotaPrSubmit/detail',
hideInMenu: true,
},
],
},
// 资金账户
......
......@@ -2,7 +2,7 @@
* @Author: LeeJiancong
* @Date: 2020-07-13 14:08:50
* @LastEditors: XieZhiXiong
* @LastEditTime: 2020-09-29 17:04:44
* @LastEditTime: 2020-09-29 20:26:04
*/
export default {
......@@ -250,6 +250,8 @@ export default {
'menu.payandSettle.creditApplication.quotaMenageDetail': '授信额度管理',
'menu.payandSettle.creditApplication.quotaFormQuery': '授信申请单查询',
'menu.payandSettle.creditApplication.quotaFormQueryDetail': '授信申请单详情',
'menu.payandSettle.creditApplication.quotaPrSubmit': '待提交授信申请单',
'menu.payandSettle.creditApplication.quotaPrSubmitDetail': '待提交授信申请单详情',
'menu.payandSettle.capitalAccounts': '资金账户',
'menu.payandSettle.capitalAccounts.accountLists': '账户管理',
'menu.payandSettle.capitalAccounts.accountDetail': '账户详情',
......
......@@ -108,7 +108,7 @@ const QuotaFormQueryDetail: React.FC = () => {
</Suspense>
<Suspense fallback={null}>
<QuotaApplicationInfo editable={true} />
<QuotaApplicationInfo />
</Suspense>
<Suspense fallback={null}>
......
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';
const OuterCirculation = React.lazy(() => import('../components/OuterCirculation'));
const QuotaApplicationInfo = React.lazy(() => import('../components/QuotaApplicationInfo'));
const HitoryList = React.lazy(() => import('../components/HistoryList'));
const OuterCirculationRecord = React.lazy(() => import('../components/OuterCirculationRecord'));
const QuotaPrSubmitDetail: React.FC = () => {
const steps = [
{
title: '提交授信申请单',
description: '采购商',
},
{
title: '确认授信申请单',
description: '供应商',
},
{
title: '完成',
description: '',
},
];
const outerRecord = [
{
id: 1,
order: 1,
role: '采购商',
status: 2,
action: '提交授信申请单',
createTime: '2020-05-12 08:08',
opinion: '同意',
},
{
id: 2,
order: 2,
role: '采购商',
status: 2,
action: '提交授信申请单',
createTime: '2020-05-12 08:08',
opinion: '同意',
},
];
return (
<PageHeaderWrapper
title={
<>
<PageHeader
style={{ padding: '0' }}
onBack={() => history.goBack()}
title={
<AvatarWrap
info={{
aloneTxt: '单',
name: '申请单号:DPTY12',
}}
extra="青铜会员"
/>
}
extra={(
<>
</>
)}
>
<Descriptions
size="small"
column={3}
style={{
padding: '0 32px',
}}
>
<Descriptions.Item label="会员归属">广州白马皮具交易中心</Descriptions.Item>
<Descriptions.Item label="会员类型">企业会员</Descriptions.Item>
<Descriptions.Item label="会员角色名称">采购商</Descriptions.Item>
<Descriptions.Item label="会员状态">
<StatusTag type="success" title="正常" />
</Descriptions.Item>
<Descriptions.Item label="外部状态">
<StatusTag type="success" title="接受申请" />
</Descriptions.Item>
<Descriptions.Item label="内部状态">
<Badge color="#41CC9E" text="正常" />
</Descriptions.Item>
</Descriptions>
</PageHeader>
</>
}
>
<Suspense fallback={null}>
<OuterCirculation steps={steps} />
</Suspense>
<Suspense fallback={null}>
<QuotaApplicationInfo editable={true} />
</Suspense>
<Suspense fallback={null}>
<HitoryList />
</Suspense>
<Suspense fallback={null}>
<OuterCirculationRecord dataSource={outerRecord} />
</Suspense>
</PageHeaderWrapper>
);
};
export default QuotaPrSubmitDetail;
\ No newline at end of file
import React, { useState, useRef } from 'react';
import { Card, Badge, Progress, Button } from 'antd';
import {
ClockCircleOutlined,
} from '@ant-design/icons';
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,
orderNo: 'SPTY9',
applicationTime: '2020-05-12 08:08',
memberName: '广州白马皮具交易有限公司',
memberType: '企业会员',
memberRole: '采购商',
memberLevel: '青铜会员',
before : '48,000',
after: '50,000.00',
outerStatus: 1,
innerStatus: 1,
},
{
id: 2,
orderNo: 'SPTY9',
applicationTime: '2020-05-12 08:08',
memberName: '广州白马皮具交易有限公司',
memberType: '企业会员',
memberRole: '采购商',
memberLevel: '青铜会员',
before : '48,000',
after: '50,000.00',
outerStatus: 1,
innerStatus: 1,
},
];
const QuotaPrSubmit: React.FC = () => {
const ref = useRef<any>({});
const defaultColumns: ColumnType<any>[] = [
{
title: '申请单号/时间',
dataIndex: 'orderNo',
align: 'center',
render: (text, record) => (
<>
<EyePreview
url={`/memberCenter/payandSettle/creditApplication/quotaPrSubmit/detail`}
>
{text}
</EyePreview>
<div>
<ClockCircleOutlined /> {record.applicationTime}
</div>
</>
),
},
{
title: '会员归属',
dataIndex: 'memberName',
align: 'center',
},
{
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: 'before',
align: 'center',
},
{
title: '申请调整后额度(元)',
dataIndex: 'after',
align: 'center',
},
{
title: '外部状态',
dataIndex: 'outerStatus',
align: 'center',
filters: [],
onFilter: (value, record) => record.outerStatus === value,
render: (text, record) => (
<StatusTag type="warnning" title="不接受申请" />
),
},
{
title: '内部状态',
dataIndex: 'innerStatus',
align: 'center',
filters: [],
onFilter: (value, record) => record.innerStatus === value,
render: (text, record) => <Badge color="#41CC9E" text="正常" />,
},
{
title: '操作',
dataIndex: 'option',
align: 'center',
render: (text, record) => (
<>
<Button
type="link"
>
提交
</Button>
<Button
type="link"
danger
>
删除
</Button>
<Button
type="link"
danger
>
修改
</Button>
</>
),
},
];
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 QuotaPrSubmit;
\ No newline at end of file
/*
* @Author: XieZhiXiong
* @Date: 2020-09-29 10:03:06
* @LastEditors: XieZhiXiong
* @LastEditTime: 2020-09-29 10:03:43
* @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: {
'[startDate, endDate]': {
type: 'string',
default: '',
'x-component': 'dateSelect',
'x-component-props': {
placeholder: '单据时间(全部)',
allowClear: true,
},
},
outterStatus: {
type: 'string',
default: undefined,
enum: [],
'x-component-props': {
placeholder: '外部状态(全部)',
allowClear: true,
},
},
innerStatus: {
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