Commit c710903d authored by 前端-许佳敏's avatar 前端-许佳敏
parents f6b36b67 638f80da
...@@ -37,6 +37,45 @@ const MemberRoute = { ...@@ -37,6 +37,45 @@ const MemberRoute = {
component: '@/pages/member/memberMaintain/index', component: '@/pages/member/memberMaintain/index',
}, },
{ {
path: '/memberCenter/memberAbility/manage/memberPrSubmit',
name: 'memberPrSubmit',
key: 'memberPrSubmit',
component: '@/pages/member/memberPrSubmit/index'
},
{
path: '/memberCenter/memberAbility/manage/auditPrSubmit',
name: 'auditPrSubmit',
key: 'auditPrSubmit',
hideInMenu: true,
component: '@/pages/member/memberPrSubmit/auditPrSubmit'
},
{
path: '/memberCenter/memberAbility/manage/memberPr',
name: 'memberPr',
key: 'memberPr',
component: '@/pages/member/memberPr/index'
},
{
path: '/memberCenter/memberAbility/manage/auditPr',
name: 'auditPr',
key: 'auditPr',
hideInMenu: true,
component: '@/pages/member/memberPr/auditPr'
},
{
path: '/memberCenter/memberAbility/manage/memberPrConfirm',
name: 'memberPrConfirm',
key: 'memberPrConfirm',
component: '@/pages/member/memberPrConfirm/index'
},
{
path: '/memberCenter/memberAbility/manage/auditPrComfirm',
name: 'auditPrComfirm',
key: 'auditPrComfirm',
hideInMenu: true,
component: '@/pages/member/memberPrConfirm/auditPrComfirm'
},
{
path: '/memberCenter/memberAbility/manage/upgradeRule', path: '/memberCenter/memberAbility/manage/upgradeRule',
name: 'memberUpgradeRule', name: 'memberUpgradeRule',
key: 'memberUpgradeRule', key: 'memberUpgradeRule',
......
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
"@umijs/test": "^3.2.0", "@umijs/test": "^3.2.0",
"bizcharts": "^4.0.7", "bizcharts": "^4.0.7",
"god": "0.1.7", "god": "0.1.7",
"god-tool": "^2.2.0", "god-tool": "2.4.0",
"lint-staged": "^10.0.7", "lint-staged": "^10.0.7",
"mobx": "^5.15.4", "mobx": "^5.15.4",
"mobx-react": "^6.2.2", "mobx-react": "^6.2.2",
......
...@@ -50,6 +50,12 @@ export default { ...@@ -50,6 +50,12 @@ export default {
'menu.memberAbility.memberManage.memberImport': '会员导入', 'menu.memberAbility.memberManage.memberImport': '会员导入',
'menu.memberAbility.memberManage.addMember': '新增会员', 'menu.memberAbility.memberManage.addMember': '新增会员',
'menu.memberAbility.memberManage.memberMaintain': '会员维护', 'menu.memberAbility.memberManage.memberMaintain': '会员维护',
'menu.memberAbility.memberManage.memberPrSubmit': '待提交审核',
'menu.memberAbility.memberManage.auditPrSubmit': '待提交审核详情',
'menu.memberAbility.memberManage.memberPr': '待审核',
'menu.memberAbility.memberManage.auditPr': '待审核详情',
'menu.memberAbility.memberManage.memberPrConfirm': '待确认审核',
'menu.memberAbility.memberManage.auditPrComfirm': '待确认审核详情',
'menu.memberAbility.memberManage.memberUpgradeRule': '会员升级规则', 'menu.memberAbility.memberManage.memberUpgradeRule': '会员升级规则',
'menu.memberAbility.memberManage.memberLevel': '会员等级', 'menu.memberAbility.memberManage.memberLevel': '会员等级',
'menu.memberAbility.memberManage.addEquity': '会员权益设置', 'menu.memberAbility.memberManage.addEquity': '会员权益设置',
...@@ -61,15 +67,15 @@ export default { ...@@ -61,15 +67,15 @@ export default {
//物流能力 //物流能力
'menu.logisticsAbility': '物流', 'menu.logisticsAbility': '物流',
'menu.logisticsAbility.logistics':'物流管理', 'menu.logisticsAbility.logistics': '物流管理',
'menu.logisticsAbility.logistics.company':'物流公司管理', 'menu.logisticsAbility.logistics.company': '物流公司管理',
'menu.logisticsAbility.logistics.addCompany':'新建物流公司', 'menu.logisticsAbility.logistics.addCompany': '新建物流公司',
'menu.logisticsAbility.logistics.deliveryAddress':'发货地址管理', 'menu.logisticsAbility.logistics.deliveryAddress': '发货地址管理',
'menu.logisticsAbility.logistics.addressForm':'新建发货地址', 'menu.logisticsAbility.logistics.addressForm': '新建发货地址',
'menu.logisticsAbility.logistics.receivingAddress':'收货地址管理', 'menu.logisticsAbility.logistics.receivingAddress': '收货地址管理',
'menu.logisticsAbility.logistics.template':'运费模板管理', 'menu.logisticsAbility.logistics.template': '运费模板管理',
'menu.logisticsAbility.logistics.templateForm':'新建运费模板', 'menu.logisticsAbility.logistics.templateForm': '新建运费模板',
'menu.logisticsAbility.logisticsSubmit':'物流单提交', 'menu.logisticsAbility.logisticsSubmit': '物流单提交',
'menu.logisticsAbility.logisticsSubmit.orderSearchList':'物流单查询' 'menu.logisticsAbility.logisticsSubmit.orderSearchList': '物流单查询'
}; };
\ No newline at end of file
import React, { ReactNode, useRef, useState } from 'react';
import { history } from 'umi';
import { StopOutlined, CheckSquareOutlined } from '@ant-design/icons';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Row, Col, Button, Tag, Badge, Tabs, Steps, Descriptions } from 'antd';
import { StandardTable } from 'god';
import { ColumnType } from 'antd/lib/table/interface';
import style from './index.less';
const { TabPane } = Tabs;
const { Step } = Steps;
interface ItemProps {}
const data = [
{
key: '1',
id: '1',
name: '价格权益',
explain: '交易一方能获得另一方的价格折扣',
type: '交易获取',
setting: '按交易金额比例设置',
params: '1',
status: 2,
},
{
key: '2',
id: '2',
name: '返现权益',
explain: '交易一方能获得另一方的交易返现',
type: '交易获取',
setting: '按交易金额比例设置',
params: '1',
status: 1,
},
];
const auditDetail: React.FC<ItemProps> = props => {
const ref = useRef({});
const [fActived, setfActived] = useState('1');
const [lActived, setlActived] = useState('1');
const [detailData, setDetailData] = useState({
step: {
current: 0,
items: [
{
title: '会员',
desc: '申请注册',
},
{
title: '平台',
desc: '审核会员',
},
{
title: '完成',
desc: '',
},
],
},
});
const columns: ColumnType<any>[] = [
{
title: 'ID',
dataIndex: 'id',
align: 'center',
key: 'id',
},
{
title: '会员权益名称',
dataIndex: 'name',
align: 'center',
key: 'name',
},
{
title: '会员权益说明',
dataIndex: 'explain',
align: 'center',
key: 'explain',
},
{
title: '权益获取方式',
dataIndex: 'type',
align: 'center',
key: 'type',
},
];
// 模拟请求
const fetchData = (params: any) => {
return new Promise((resolve, reject) => {
const queryResult = data.find(v => v.key === params.keywords);
setTimeout(() => {
resolve({
code: 200,
message: '',
data: queryResult ? [queryResult] : data,
});
}, 1000);
});
};
return (
<PageHeaderWrapper
onBack={() => window.history.back()}
title={
<>
<div className={style['headerTop']}>
<div className={style['headerTop-prefix']}>广</div>
<div className={style['headerTop-name']}>
广州市极致皮具有限公司
</div>
<div className={style[`levelIcon${'1'}`]}></div>
</div>
</>
}
extra={
<>
<Button>
<StopOutlined />
审核不通过
</Button>
<Button className={style.saveBtn}>
<CheckSquareOutlined />
审核通过
</Button>
</>
}
content={
<div className={style['headerMain']}>
<div className={style['headerMain-left']}>
<div className={style['headerMain-left-option']}>
<div>会员类型:</div>
<div>企业会员</div>
</div>
<div className={style['headerMain-left-option']}>
<div>会员角色:</div>
<div>供应商</div>
</div>
<div className={style['headerMain-left-option']}>
<div>会员状态:</div>
<div>
<Tag color="green">正常</Tag>
</div>
</div>
<div className={style['headerMain-left-option']}>
<div>外部状态:</div>
<div>
<Tag color="gold">待审核</Tag>
</div>
</div>
<div className={style['headerMain-left-option']}>
<div>内部状态:</div>
<div>
<Badge color="#669EDE" text="待提交审核" />
</div>
</div>
</div>
</div>
}
>
<Row>
<Col className={style.mainCol} span={24}>
<Tabs activeKey={fActived} onChange={val => setfActived(val)}>
<TabPane tab="外部审核流程" key="1">
<Steps
style={{ padding: '34px 0' }}
progressDot
current={detailData.step.current}
>
{detailData.step.items.map((item, index) => {
return (
<Step
key={index}
title={item.title}
description={item.desc}
/>
);
})}
</Steps>
</TabPane>
<TabPane tab="内部审核流程" key="2">
<Steps
style={{ padding: '34px 0' }}
progressDot
current={detailData.step.current}
>
{detailData.step.items.map((item, index) => {
return (
<Step
key={index}
title={item.title}
description={item.desc}
/>
);
})}
</Steps>
</TabPane>
</Tabs>
</Col>
<Col className={style.mainCol} span={24}>
<Descriptions
style={{ marginTop: '20px' }}
column={2}
title="基本信息"
>
<Descriptions.Item label="登录账户">
185 2929 6547
</Descriptions.Item>
<Descriptions.Item label="注册手机号">
185 2929 6547
</Descriptions.Item>
<Descriptions.Item label="注册邮箱">
kuaimeizheng@163.com
</Descriptions.Item>
<Descriptions.Item label="申请时间">
2020-12-26 13:45
</Descriptions.Item>
</Descriptions>
</Col>
<Col className={style.mainCol} span={24}>
<Descriptions
style={{ marginTop: '20px' }}
column={2}
title="渠道信息"
>
<Descriptions.Item label="渠道级别">二级</Descriptions.Item>
<Descriptions.Item label="渠道类型">电商渠道</Descriptions.Item>
<Descriptions.Item label="代理地市">
广东省/广州市 广东省/广州市
</Descriptions.Item>
<Descriptions.Item label="渠道描述">门店</Descriptions.Item>
</Descriptions>
</Col>
<Col className={style.mainCol} span={24}>
<Descriptions
style={{ marginTop: '20px' }}
column={2}
title="营业执照"
>
<Descriptions.Item label="渠道级别">二级</Descriptions.Item>
<Descriptions.Item label="渠道类型">电商渠道</Descriptions.Item>
<Descriptions.Item label="代理地市">
广东省/广州市 广东省/广州市
</Descriptions.Item>
<Descriptions.Item label="渠道描述">门店</Descriptions.Item>
</Descriptions>
</Col>
<Col className={style.mainCol} span={24}>
<Descriptions
style={{ marginTop: '20px' }}
column={2}
title="法定代表人信息"
>
<Descriptions.Item label="渠道级别">二级</Descriptions.Item>
<Descriptions.Item label="渠道类型">电商渠道</Descriptions.Item>
<Descriptions.Item label="代理地市">
广东省/广州市 广东省/广州市
</Descriptions.Item>
<Descriptions.Item label="渠道描述">门店</Descriptions.Item>
</Descriptions>
</Col>
<Col className={style.mainCol} span={24}>
<Descriptions
style={{ marginTop: '20px' }}
column={2}
title="联系信息"
>
<Descriptions.Item label="渠道级别">二级</Descriptions.Item>
<Descriptions.Item label="渠道类型">电商渠道</Descriptions.Item>
<Descriptions.Item label="代理地市">
广东省/广州市 广东省/广州市
</Descriptions.Item>
<Descriptions.Item label="渠道描述">门店</Descriptions.Item>
</Descriptions>
</Col>
<Col className={style.mainCol} span={24}>
<Tabs activeKey={lActived} onChange={val => setlActived(val)}>
<TabPane tab="流转记录" key="1">
<StandardTable
columns={columns}
currentRef={ref}
fetchTableData={(params: any) => fetchData(params)}
/>
</TabPane>
<TabPane tab="内部单据流转记录" key="2">
Content of Tab Pane 2
</TabPane>
</Tabs>
</Col>
</Row>
</PageHeaderWrapper>
);
};
export default auditDetail;
import React, { ReactNode, useState, useRef } from 'react';
import { history } from 'umi';
import {
Row,
Col,
Card,
Tooltip,
Button,
Popconfirm,
Select,
Input,
} from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import {
EyeOutlined,
UpOutlined,
DownOutlined,
ClockCircleOutlined,
} from '@ant-design/icons';
import { StandardTable } from 'god';
import { ColumnType } from 'antd/lib/table/interface';
import style from './index.less';
interface PageProps {
pageType: string; // 页面类型 1 待提交审核 2 待审核 3 待确认审核
}
const { Option } = Select;
const data = [
{
key: '1',
id: '1',
level: '1',
name: '温州隆昌皮具有限公司1',
type: 1,
role: 1,
applyTime: '2020-05-12 08:08',
status: 1,
source: 1,
outSideStatus: 1,
inSideStatus: 1,
externalStatus: '待提交',
},
{
key: '2',
id: '2',
level: '2',
name: '温州隆昌皮具有限公司2',
type: 2,
role: 2,
applyTime: '2020-05-12 08:08',
status: -1,
source: 2,
outSideStatus: 1,
inSideStatus: 2,
externalStatus: '待提交',
},
{
key: '3',
id: '3',
level: '3',
name: '温州隆昌皮具有限公司3',
type: 1,
role: 3,
applyTime: '2020-05-12 08:08',
status: 1,
source: 3,
outSideStatus: 2,
inSideStatus: 3,
externalStatus: '待提交',
},
{
key: '4',
id: '4',
level: '3',
name: '温州隆昌皮具有限公司4',
type: 2,
role: 4,
applyTime: '2020-05-12 08:08',
status: 1,
source: 4,
outSideStatus: 4,
inSideStatus: 4,
externalStatus: '待提交',
},
{
key: '5',
id: '5',
level: '3',
name: '温州隆昌皮具有限公司4',
type: 2,
role: 5,
applyTime: '2020-05-12 08:08',
status: 1,
source: 4,
outSideStatus: 4,
inSideStatus: 2,
externalStatus: '待提交',
},
{
key: '6',
id: '6',
level: '3',
name: '温州隆昌皮具有限公司4',
type: 2,
role: 6,
applyTime: '2020-05-12 08:08',
status: 1,
source: 4,
outSideStatus: 4,
inSideStatus: 2,
externalStatus: '待提交',
},
];
const auditList: React.FC<PageProps> = props => {
const ref = useRef({});
let [isSearch, setIsSearch] = useState(false);
const [searchForm, setSearchForm] = useState({
memberIdorName: '',
memberType: '',
memberRole: '',
memberLevel: '',
applySource: '',
insideStatus: '',
outSideStatus: '',
memberStatus: '',
TimeRange: '',
});
const [selectedRowKeys, setSelectedRowKeys] = useState<Array<string>>([]);
const columns: ColumnType<any>[] = [
{
title: 'ID',
dataIndex: 'id',
align: 'center',
key: 'id',
},
{
title: '会员名称',
dataIndex: 'name',
align: 'center',
key: 'name',
render: (text: any, record: any) => {
return (
<div className={style.nameCell}>
<div
className={style.nameCellTitle}
onClick={() => handleSee(record)}
>
{text}&nbsp;
<EyeOutlined />
</div>
<div className={style[`levelIcon${record.level}`]}></div>
</div>
);
},
},
{
title: '会员类型',
dataIndex: 'type',
align: 'center',
key: 'type',
render: (text: any, record: any) => (
<>{record.type === 1 ? '企业会员' : '渠道企业会员'}</>
),
},
{
title: '会员角色',
dataIndex: 'role',
align: 'center',
key: 'role',
render: (text: any, record: any) => {
let component: ReactNode = null;
component = (
<div>
{record.role === 1
? '供应商'
: record.role === 2
? '加工企业'
: record.role === 3
? '物流服务商'
: record.role === 4
? '金融服务商'
: record.role === 5
? '采购商'
: '渠道供应商'}
</div>
);
return component;
},
},
{
title: '申请来源/时间',
dataIndex: 'applyTime',
align: 'center',
key: 'applyTime',
render: (text: any, record: any) => {
let component: ReactNode = null;
component = (
<>
<div>
{record.source === 1
? '平台录入'
: record.source === 2
? 'WEB企业商城申请'
: record.source === 3
? '商户录入'
: '渠道录入'}
</div>
<div>
<ClockCircleOutlined /> {record.applyTime}
</div>
</>
);
return component;
},
},
{
title: '会员状态',
dataIndex: 'status',
align: 'center',
key: 'status',
sorter: true,
render: (text: any, record: any) => {
let component: ReactNode = null;
component = (
<div
style={
record.status === 1 ? { color: '#00B37A' } : { color: '#42526E' }
}
>
{record.outSideStatus === 1 ? '正常' : '冻结'}
</div>
);
return component;
},
},
{
title: '外部状态',
dataIndex: 'outSideStatus',
align: 'center',
key: 'outSideStatus',
sorter: true,
render: (text: any, record: any) => {
let component: ReactNode = null;
component = (
<div
style={
record.outSideStatus === 1
? { color: '#FF991F' }
: record.outSideStatus === 2
? { color: '#00B37A' }
: { color: '#E63F3B' }
}
>
{record.outSideStatus === 1
? '待审核'
: record.outSideStatus === 2
? '审核通过'
: '审核不通过'}
</div>
);
return component;
},
},
{
title: '内部状态',
dataIndex: 'inSideStatus',
align: 'center',
key: 'inSideStatus',
sorter: true,
render: (text: any, record: any) => {
let component: ReactNode = null;
component = (
<div
style={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
}}
>
<span
className={
record.inSideStatus === 1
? 'commonStatusModify'
: record.inSideStatus === 2
? 'commonStatusInvalid'
: record.inSideStatus === 3
? 'commonStatusValid'
: 'commonStatusNoPass'
}
>
<span className="commonStatus"></span>
</span>
{record.inSideStatus === 1
? '待提交'
: record.inSideStatus === 2
? '待审核'
: record.inSideStatus === 3
? '审核通过'
: '审核不通过'}
</div>
);
return component;
},
},
{
title: '操作',
dataIndex: 'option',
align: 'center',
render: (text: any, record: any) => {
let component: ReactNode = null;
component = (
<Button type="link" onClick={() => handleChange(record)}>
{props.pageType === '1'
? '提交审核'
: props.pageType === '2'
? '审核'
: '确认审核'}
</Button>
);
return component;
},
},
];
const rowSelection = {
selectedRowKeys: selectedRowKeys,
onChange: (selectedRowKeys: any, selectedRows: any) => {
console.log(
`selectedRowKeys: ${selectedRowKeys}`,
'selectedRows: ',
selectedRows,
);
},
};
// 模拟请求
const fetchData = (params: any) => {
return new Promise((resolve, reject) => {
const queryResult = data.find(v => v.key === params.keywords);
setTimeout(() => {
resolve({
code: 200,
message: '',
data: queryResult ? [queryResult] : data,
});
}, 1000);
});
};
const handleSearch = () => {};
const handleDel = (e: any) => {};
const handleReset = () => {};
const handleSee = (record: any) => {};
const handleSubmit = (val: any) => {
console.log(val);
};
const handleChange = (record: object) => {
let path =
props.pageType === '1'
? 'auditPrSubmit'
: props.pageType === '2'
? 'auditPr'
: 'auditPrComfirm';
history.push(`/memberCenter/memberAbility/manage/${path}`);
};
return (
<PageHeaderWrapper>
<Card>
<StandardTable
columns={columns}
currentRef={ref}
fetchTableData={(params: any) => fetchData(params)}
rowSelection={rowSelection}
controlRender={
<Row>
<Col className={style.col} span={2}>
<Button>
{props.pageType === '1'
? '批量提交审核'
: props.pageType === '2'
? '批量审核通过'
: '批量确认审核通过'}
</Button>
</Col>
<Col
className={style.col}
span={20}
offset={2}
style={{ textAlign: 'right' }}
>
<Tooltip
trigger={['focus']}
placement="top"
title={<span>输入ID、会员名称&nbsp;&nbsp;进行搜索</span>}
>
<Input.Search
style={{ width: '232px' }}
value={searchForm.memberIdorName}
placeholder="搜索"
onChange={e =>
setSearchForm({
...searchForm,
memberIdorName: e.target.value,
})
}
onSearch={() => handleSearch}
/>
</Tooltip>
<Button
style={{ margin: '0 16px' }}
onClick={() => setIsSearch((isSearch = !isSearch))}
>
高级筛选{isSearch ? <UpOutlined /> : <DownOutlined />}
</Button>
<Button onClick={() => handleReset()}>重置</Button>
</Col>
{isSearch ? (
<Row className={style.subRow}>
<Col className={style.subCol}>
<Select
className={style.select}
value={searchForm.memberType}
onChange={val =>
setSearchForm({ ...searchForm, memberType: val })
}
>
<Option value="">会员类型(全部)</Option>
<Option value="1">企业会员</Option>
<Option value="2">个人会员</Option>
<Option value="3">渠道企业会员</Option>
<Option value="4">渠道个人会员</Option>
</Select>
<Select
className={style.select}
value={searchForm.memberRole}
onChange={val =>
setSearchForm({ ...searchForm, memberRole: val })
}
>
<Option value="">会员角色(全部)</Option>
<Option value="1">供应商</Option>
<Option value="2">采购商</Option>
<Option value="3">加工企业</Option>
<Option value="4">金融服务商</Option>
<Option value="5">物流服务商</Option>
<Option value="6">渠道供应商</Option>
<Option value="7">渠道采购商</Option>
</Select>
<Select
className={style.select}
value={searchForm.memberLevel}
onChange={val =>
setSearchForm({ ...searchForm, memberLevel: val })
}
>
<Option value="">会员等级(全部)</Option>
<Option value="1">青铜会员</Option>
<Option value="2">白银会员</Option>
<Option value="3">黄金会员</Option>
<Option value="4">钻石会员</Option>
</Select>
<Select
className={style.select}
value={searchForm.applySource}
onChange={val =>
setSearchForm({ ...searchForm, applySource: val })
}
>
<Option value="">申请来源(全部)</Option>
<Option value="1">WEB企业商城申请</Option>
<Option value="2">H5企业商城申请</Option>
<Option value="3">WEB渠道商城申请</Option>
<Option value="4">H5渠道商城申请</Option>
<Option value="5">商户代录入</Option>
<Option value="6">渠道代录入</Option>
</Select>
<Select
className={style.select}
value={searchForm.outSideStatus}
onChange={val =>
setSearchForm({ ...searchForm, outSideStatus: val })
}
>
<Option value="">外部状态(全部)</Option>
<Option value="1">待审核</Option>
<Option value="2">审核通过</Option>
<Option value="3">审核不通过</Option>
</Select>
<Select
className={style.select}
value={searchForm.insideStatus}
onChange={val =>
setSearchForm({ ...searchForm, insideStatus: val })
}
>
<Option value="">内部状态(全部)</Option>
<Option value="1">待提交审核</Option>
<Option value="2">待审核</Option>
<Option value="3">审核通过</Option>
<Option value="4">审核不通过</Option>
</Select>
<Select
className={style.select}
value={searchForm.TimeRange}
onChange={val =>
setSearchForm({ ...searchForm, TimeRange: val })
}
>
<Option value="">时间范围(全部)</Option>
<Option value="1">今天</Option>
<Option value="2">一周内</Option>
<Option value="3">一个月内</Option>
<Option value="4">三个月内</Option>
<Option value="5">六个月内</Option>
<Option value="6">一年内</Option>
<Option value="7">一年前</Option>
</Select>
</Col>
</Row>
) : (
''
)}
</Row>
}
/>
</Card>
</PageHeaderWrapper>
);
};
export default auditList;
.col {
margin-bottom: 16px;
}
.subRow {
width: 100%;
.subCol {
width : 100%;
text-align: right;
.select {
width : 160px;
margin : 0 0 16px 16px;
text-align: left;
&:nth-of-type(1) {
margin-left: 0;
}
}
}
}
.mainCol {
background-color: #fff;
margin-bottom : 24px;
padding : 0 24px;
box-sizing : border-box;
&:nth-last-of-type(1) {
margin: 0;
}
}
.nameCell {
text-align: left;
.nameCellTitle {
color : @main-color;
cursor: pointer;
}
.levelIcon1 {
width : 100%;
height : 16px;
background : url("/static/imgs/level1@2x.png") no-repeat;
background-size: 54px 16px;
margin-top : 8px;
}
.levelIcon2 {
width : 100%;
height : 16px;
background : url("/static/imgs/level2@2x.png") no-repeat;
background-size: 54px 16px;
margin-top : 8px;
}
.levelIcon3 {
width : 100%;
height : 16px;
background : url("/static/imgs/level3@2x.png") no-repeat;
background-size: 54px 16px;
margin-top : 8px;
}
}
.headerTop {
display : flex;
align-items: center;
font-size : 20px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
&-prefix {
width : 48px;
height : 48px;
line-height : 48px;
border-radius : 4px;
border : 1px solid #DFE1E6;
color : #fff;
text-align : center;
background-color: #8777D9;
}
&-name {
color : #172B4D;
margin: 0 8px 0 12px;
}
}
.headerMain {
display: flex;
&-left {
flex : 6;
display : flex;
flex-wrap : wrap;
padding-left: 90px;
&-option {
display : flex;
width : calc(100% / 3);
margin-bottom: 17px;
font-size : 14px;
font-family : PingFangSC-Regular, PingFang SC;
font-weight : 400;
color : #6B778C;
padding-right: 20px;
&:nth-of-type(n + 4) {
margin: 0;
}
div {
flex: 1;
&:nth-last-of-type(1) {
flex: 2;
}
}
}
}
&-right {
flex : 1;
text-align: right;
}
}
.saveBtn {
color : #fff;
background : @main-color;
margin-left: 10px;
}
\ No newline at end of file
import React, { useState, useRef } from 'react' import React, { useState, useEffect, useRef } from 'react';
import { history } from 'umi' import { history } from 'umi';
import { Tooltip, Input, Select, Button, Card, Dropdown, Menu, Row, Col } from 'antd' import {
import { PageHeaderWrapper } from '@ant-design/pro-layout' Tabs,
Badge,
Tooltip,
Button,
Card,
Dropdown,
Menu,
Row,
Col,
} from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { import {
PlusOutlined, PlusOutlined,
EyeOutlined, EyeOutlined,
UpOutlined, UpOutlined,
ContainerOutlined,
DeleteOutlined, DeleteOutlined,
DownOutlined DownOutlined,
} from '@ant-design/icons' } from '@ant-design/icons';
import { StandardTable } from 'god' import {
import { ColumnType } from 'antd/lib/table/interface' Form,
import style from './index.less' FormItem,
FormButtonGroup,
createFormActions,
} from '@formily/antd';
import {
MegaLayout,
Select,
Input,
DatePicker,
} from '@formily/antd-components';
import { StandardTable } from 'god';
import { ColumnType } from 'antd/lib/table/interface';
import style from './index.less';
import ChinaImg from '../../../../mockStatic/china.png';
import gou from '../../../../mockStatic/gou.png';
import japenImg from '../../../../mockStatic/japen.png';
import korenImg from '../../../../mockStatic/koren.png';
import us from '../../../../mockStatic/us.png';
const { Option } = Select; const countryTem = `<><img src={} style={{ width: 24, height: 17 }} />`;
const selectList: any = [
{
label: (
<>
<img src={ChinaImg} style={{ width: 24, height: 17 }} /> +86
</>
),
value: '1',
},
{
label: (
<>
<img src={gou} style={{ width: 24, height: 17 }} /> +86
</>
),
value: '2',
},
{
label: (
<>
<img src={japenImg} style={{ width: 24, height: 17 }} /> +86
</>
),
value: '3',
},
{
label: (
<>
<img src={korenImg} style={{ width: 24, height: 17 }} /> +86
</>
),
value: '4',
},
{
label: (
<>
<img src={us} style={{ width: 24, height: 17 }} /> +86
</>
),
value: '5',
},
];
const data = [] const { TabPane } = Tabs;
const data = [];
const addMember: React.FC<[]> = () => { const addMember: React.FC<[]> = () => {
const [actived, setActived] = useState('2');
const [tabCount, setTabCount] = useState({
'1': 0,
'2': 2,
'3': 3,
'4': 4,
'5': 5,
'6': 6,
});
const [editable, setEditable] = useState(true);
useEffect(() => {
// console.log(actived)
});
return ( return (
<div></div> <PageHeaderWrapper
) onBack={() => history.goBack()}
} title={
<>
<div className={style.headerTop}>
<span>返回</span>
<span>新建会员</span>
</div>
</>
}
extra={
<>
<Button className={style.saveBtn} icon={<ContainerOutlined />}>
保存
</Button>
</>
}
>
<Card>
<Tabs
tabBarGutter={30}
activeKey={actived}
onChange={activeKey => setActived(activeKey)}
>
<TabPane
tab={
<Badge count={tabCount['1']} offset={[10, 0]}>
基本信息
</Badge>
}
key="1"
>
<Form
editable={editable}
labelCol={3}
wrapperCol={10}
labelAlign="left"
>
<FormItem
title="会员类型"
name="memberType"
dataSource={[
{ value: 1, label: '企业会员' },
{ value: 2, label: '渠道会员' },
]}
rules={[{ required: true, message: '请选择会员类型!' }]}
component={Select}
/>
<FormItem
title="会员角色"
name="memberRole"
dataSource={[
{ value: 1, label: '企业会员' },
{ value: 2, label: '渠道会员' },
]}
rules={[{ required: true, message: '请选择会员角色!' }]}
component={Select}
/>
<FormItem
title="会员等级"
name="memberLevel"
dataSource={[
{ value: 1, label: '企业会员' },
{ value: 2, label: '渠道会员' },
]}
rules={[{ required: true, message: '请选择会员等级!' }]}
component={Select}
/>
<FormItem label="注册手机号" name="registry">
<Row gutter={10}>
<Col span={6}>
<FormItem
itemStyle={{ marginBottom: 0 }}
name="country"
dataSource={selectList}
initialValue={'1'}
required
component={Select}
/>
</Col>
<Col span={18}>
<FormItem
itemStyle={{ marginBottom: 0 }}
name="phoneMobile"
required
component={Input}
/>
</Col>
</Row>
</FormItem>
<FormItem title="注册邮箱" name="memberEmail" component={Input} />
</Form>
</TabPane>
<TabPane
tab={
<Badge count={tabCount['2']} offset={[10, 0]}>
渠道信息
</Badge>
}
key="2"
>
<Form
editable={editable}
labelCol={3}
wrapperCol={10}
labelAlign="left"
>
<FormItem
title="渠道级别"
name="channelLevel"
component={Input}
/>
<FormItem
title="渠道类型"
name="channelType"
dataSource={[
{ value: 1, label: '企业会员' },
{ value: 2, label: '渠道会员' },
]}
rules={[{ required: true, message: '请选择渠道类型!' }]}
component={Select}
/>
<FormItem title="代理地市" name="address" component={Input}>
{/* <Row gutter={10}>
<Col span={6}>
<FormItem
itemStyle={{ marginBottom: 0 }}
name="country"
dataSource={selectList}
initialValue={'1'}
required
component={Select}
/>
</Col>
<Col span={18}>
<FormItem
itemStyle={{ marginBottom: 0 }}
name="phoneMobile"
required
component={Input}
/>
</Col>
</Row> */}
</FormItem>
<FormItem
mega-props={{
placeholder: '最长200个字符,100个汉字',
}}
title="渠道描述"
name="desc"
rules={[{ required: true, message: '请填写渠道描述!' }]}
component={Input.TextArea}
x-component-props={{
placeholder: '测试',
}}
/>
</Form>
</TabPane>
<TabPane
tab={
<Badge count={tabCount['3']} offset={[10, 0]}>
营业执照
</Badge>
}
key="3"
>
Tab 3
</TabPane>
<TabPane
tab={
<Badge count={tabCount['4']} offset={[10, 0]}>
法定代表人
</Badge>
}
key="4"
>
Tab 4
</TabPane>
<TabPane
tab={
<Badge count={tabCount['5']} offset={[10, 0]}>
联系信息
</Badge>
}
key="5"
>
Tab 5
</TabPane>
<TabPane
tab={
<Badge count={tabCount['6']} offset={[10, 0]}>
流转记录
</Badge>
}
key="6"
>
Tab 6
</TabPane>
</Tabs>
</Card>
</PageHeaderWrapper>
);
};
export default addMember export default addMember;
\ No newline at end of file
import React, { ReactNode, useState, useRef } from 'react' import React, { ReactNode, useState, useRef } from 'react'
import { history } from 'umi' import { history } from 'umi'
import { Button, Popconfirm, Card, Input, Slider, Row, Col } from 'antd' import { Button, Popconfirm, Card, Input, Slider } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout' import { PageHeaderWrapper } from '@ant-design/pro-layout'
import { PlayCircleOutlined, ContainerOutlined } from '@ant-design/icons' import { PlayCircleOutlined, ContainerOutlined } from '@ant-design/icons'
import { StandardTable } from 'god' import { StandardTable } from 'god'
......
import React from 'react';
import AuditDetail from '../components/auditDetail';
const auditPr: React.FC<{}> = () => {
return <AuditDetail />;
};
export default auditPr;
import React from 'react';
import AuditList from '../components/auditList';
const memberPr = () => {
return <AuditList pageType="2" />;
};
export default memberPr;
import React from 'react';
import AuditDetail from '../components/auditDetail';
const auditPrConfirm: React.FC<{}> = () => {
return <AuditDetail />;
};
export default auditPrConfirm;
import React from 'react';
import AuditList from '../components/auditList';
const memberPrConfirm = () => {
return <AuditList pageType="3" />;
};
export default memberPrConfirm;
import React from 'react';
import AuditDetail from '../components/auditDetail';
const auditPrSubmit: React.FC<{}> = () => {
return <AuditDetail />;
};
export default auditPrSubmit;
import React from 'react';
import AuditList from '../components/auditList';
const memberPrSubmit = () => {
return <AuditList pageType="1" />;
};
export default memberPrSubmit;
This source diff could not be displayed because it is too large. You can view the blob instead.
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