Skip to content

J
jinfa-platform
Commit b806666b authored by tjy's avatar tjy
Browse files
Options

封装导入文件模态框组件

parent 4a3d352b
Show whitespace changes
Inline Side-by-side
Showing with 1257 additions and 319 deletions
src/components/UploadModal/index.less 0 → 100644
View file @ b806666b
.step0Description{
text-align: left;
width: 280px;
margin: 0 auto;
list-style-type: decimal;
li{
color: #6B778C;
font-size: 14px;
}
}
.step1Description{
h4{
height:22px;
font-size:14px;
font-weight:500;
color:rgba(23,43,77,1);
line-height:22px;
}
p{
height:20px;
font-size:14px;
font-weight:400;
color:rgba(107,119,140,1);
line-height:20px;
}
}
src/components/UploadModal/index.tsx 0 → 100644
View file @ b806666b
import React, { useState, useEffect } from 'react';
import { Modal, Result, Progress, Button } from 'antd';
import { FileExcelOutlined } from '@ant-design/icons';
import styles from './index.less';
import { PublicApi } from '@/services/api';
interface Uploader {
visibleModal: boolean;
onCancel: Function;
}
let timeChange: any;
const UploadModal: React.FC<Uploader> = props => {
const [modalTitle, setModalTitle] = useState('导入');
const [modalStep, setModalStep] = useState(0);
const downLoadTemplate = () => {};
const step0Description = (
<>
<ul className={styles.step0Description}>
<li>
点击下载 EXCEL文件模板 <a onClick={downLoadTemplate}>下载</a>
</li>
<li>按照模板整理货品资料</li>
<li>点击导入按钮，导入整理好的货品资料</li>
</ul>
</>
);
const step1Description = (
<div className={styles.step1Description}>
<h4>正在进行数据导入检查</h4>
<p>请稍后…</p>
</div>
);
const step1DescripSuccess = (
<div className={styles.step1Description}>
<h4>无错误格式数据</h4>
<p>继续导入请按下一步</p>
<Button type="primary" onClick={() => handleUpload('import')}>
下一步
</Button>
</div>
);
const step1Exception = (
<div className={styles.step1Description}>
<h4>存在错误格式数据，已生成错误日志</h4>
<p>请导出错误日志修正数据后再次导入</p>
</div>
);
const step2Description = (
<div className={styles.step1Description}>
<h4>正在进行数据导入</h4>
<p>请稍后…</p>
</div>
);
const step2DescripSuccess = (
<div className={styles.step1Description}>
<h4>数据全部导入成功</h4>
<p>继续导入请点击继续导入，导入完成请点击导入完成</p>
<Button type="primary" onClick={() => handleUpload('continue')}>
继续导入
</Button>
&nbsp;&nbsp;&nbsp;&nbsp;
<Button onClick={() => props.onCancel()}>完成导入</Button>
</div>
);
const step2Exception = (
<div className={styles.step1Description}>
<h4>导入完成请点击导入完成</h4>
<p>已生成错误日志，请导出错误日志修正数据后再次导入</p>
</div>
);
// 导入的时候的描述文字
const [step1DescriptState, setStep1DescriptState] = useState(
step1Description,
);
const [step2DescriptState, setStep2DescriptState] = useState(
step2Description,
);
// timer 计时器模拟导入过程
const [exceptionCheck, setExceptionCheck] = useState(false); // 默认无异常
const [exceptionData, setExceptionData] = useState(false); // 默认无异常
const [time, setTime] = useState(0); // timer
useEffect(() => {
clearInterval(timeChange);
}, []);
useEffect(() => {
if (modalStep === 1) runTimer();
if (modalStep === 2) runTimer();
}, [modalStep]);
useEffect(() => {
if (time >= 100) {
clearInterval(timeChange);
setTime(100);
if (modalStep === 1) setStep1DescriptState(step1DescripSuccess);
if (modalStep === 2) setStep2DescriptState(step2DescripSuccess);
}
}, [time]);
const runTimer = () => {
setTime(0);
timeChange = setInterval(
() => setTime(t => t + Math.floor(Math.random() * 10)),
200,
);
};
//timer end
// 导入的时候 进度条的颜色配置
const step1Icon = (
<Progress
type="circle"
strokeColor={{
'0%': '#669EDE',
'100%': '#41CC9E',
}}
percent={time}
/>
);
const step2Icon = (
<Progress
type="circle"
strokeColor={{
'0%': '#669EDE',
'100%': '#41CC9E',
}}
percent={time}
/>
);
// 上传
const handleUpload = (type: string, step: number = 0) => {
let title = '';
switch (type) {
case 'continue':
step = 0;
title = '继续导入';
break;
case 'upload':
step = 1;
title = '导入检查';
break;
case 'import':
step = 2;
title = '数据导入';
break;
}
setModalStep(step);
setModalTitle(title);
};
const exportErrorLog = () => {};
const handleClose = () => {
setModalStep(0);
setModalTitle('导入');
setTime(0);
clearInterval(timeChange);
};
return (
<>
<Modal
title={modalTitle}
visible={props.visibleModal}
onCancel={() => props.onCancel()}
afterClose={() => handleClose()}
maskClosable={false}
footer={null}
destroyOnClose
>
{modalStep === 0 && (
<>
<Result
icon={<FileExcelOutlined />}
title={step0Description}
extra={
<Button
style={{ width: '100%' }}
type="primary"
onClick={() => handleUpload('upload')}
>
上传
</Button>
}
/>
</>
)}
{modalStep === 1 && !exceptionCheck && (
<>
<Result icon={step1Icon} title={step1DescriptState} />
</>
)}
{modalStep === 1 && exceptionCheck && (
<>
<Result
icon={<Progress type="circle" percent={100} status="exception" />}
title={step1Exception}
extra={<Button onClick={exportErrorLog}>导出错误日志</Button>}
/>
</>
)}
{modalStep === 2 && !exceptionData && (
<>
<Result icon={step2Icon} title={step2DescriptState} />
</>
)}
{modalStep === 2 && exceptionData && (
<>
<Result
icon={<Progress type="circle" percent={100} status="exception" />}
title={step2Exception}
extra={<Button onClick={exportErrorLog}>导出错误日志</Button>}
/>
</>
)}
</Modal>
</>
);
};
export default UploadModal;
src/pages/member/memberImport/addMember.tsx
View file @ b806666b
...@@ -25,7 +25,6 @@ import style from './index.less'; ...@@ -25,7 +25,6 @@ import style from './index.less';
// import japenImg from '../../../../mockStatic/japen.png'; // import japenImg from '../../../../mockStatic/japen.png';
// import korenImg from '../../../../mockStatic/koren.png'; // import korenImg from '../../../../mockStatic/koren.png';
// import us from '../../../../mockStatic/us.png'; // import us from '../../../../mockStatic/us.png';
const { TabPane } = Tabs; const { TabPane } = Tabs;
const data = []; const data = [];
...@@ -275,7 +274,7 @@ const addMember: React.FC<[]> = () => { ...@@ -275,7 +274,7 @@ const addMember: React.FC<[]> = () => {
代理地市 代理地市
</> </>
} }
name="lll" name="agentCities"
itemStyle={{ marginBottom: 0 }} itemStyle={{ marginBottom: 0 }}
> >
<> <>
......
src/pages/member/memberImport/addMember2.tsx
View file @ b806666b
import React, { useState, useRef, } from 'react' import React, { useState, useRef } from 'react';
import { history } from 'umi' import { history } from 'umi';
import { Card, Button } from 'antd' import { Card, Button } from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout' import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { ContainerOutlined, PlusOutlined, MinusOutlined } from '@ant-design/icons' import {
ContainerOutlined,
PlusOutlined,
MinusOutlined,
} from '@ant-design/icons';
import { import {
SchemaForm, SchemaForm,
SchemaField, SchemaField,
SchemaMarkupField as Field, SchemaMarkupField as Field,
MegaLayout, MegaLayout,
FormMegaLayout, FormMegaLayout,
createFormActions createFormActions,
} from '@formily/antd' } from '@formily/antd';
import { ArrayList } from '@formily/react-shared-components' import { ArrayList } from '@formily/react-shared-components';
import { toArr, isFn, FormPath } from '@formily/shared' import { toArr, isFn, FormPath } from '@formily/shared';
import { FormTab, Input, Select, DatePicker, Upload } from '@formily/antd-components' import {
import { StandardTable } from 'god' FormTab,
import { ColumnType } from 'antd/lib/table/interface' Input,
import './index.less' Select,
DatePicker,
Upload,
} from '@formily/antd-components';
import { StandardTable } from 'god';
import { ColumnType } from 'antd/lib/table/interface';
import './index.less';
import ChinaImg from '../../../../mockStatic/china.png' import ChinaImg from '../../../../mockStatic/china.png';
import gou from '../../../../mockStatic/gou.png' import gou from '../../../../mockStatic/gou.png';
import japenImg from '../../../../mockStatic/japen.png' import japenImg from '../../../../mockStatic/japen.png';
import korenImg from '../../../../mockStatic/koren.png' import korenImg from '../../../../mockStatic/koren.png';
import us from '../../../../mockStatic/us.png' import us from '../../../../mockStatic/us.png';
const _width: number = 24 const _width: number = 24;
const _height: number = 17 const _height: number = 17;
const selectList: any = [ const selectList: any = [
{ label: <><img src={ChinaImg} style={{ width: _width, height: 17 }} /> +86</>, value: '1' }, {
{ label: <><img src={gou} style={{ width: _width, height: 17 }} /> +86</>, value: '2' }, label: (
{ label: <><img src={japenImg} style={{ width: _width, height: 17 }} /> +86</>, value: '3' }, <>
{ label: <><img src={korenImg} style={{ width: _width, height: 17 }} /> +86</>, value: '4' }, <img src={ChinaImg} style={{ width: _width, height: 17 }} /> +86
{ label: <><img src={us} style={{ width: _width, height: 17 }} /> +86</>, value: '5' } </>
] ),
value: '1',
},
{
label: (
<>
<img src={gou} style={{ width: _width, height: 17 }} /> +86
</>
),
value: '2',
},
{
label: (
<>
<img src={japenImg} style={{ width: _width, height: 17 }} /> +86
</>
),
value: '3',
},
{
label: (
<>
<img src={korenImg} style={{ width: _width, height: 17 }} /> +86
</>
),
value: '4',
},
{
label: (
<>
<img src={us} style={{ width: _width, height: 17 }} /> +86
</>
),
value: '5',
},
];
const ArrayComponents = { const ArrayComponents = {
CircleButton: (props: any) => <Button {...props} />, CircleButton: (props: any) => <Button {...props} />,
...@@ -48,7 +93,7 @@ const ArrayCustom = (props: any) => { ...@@ -48,7 +93,7 @@ const ArrayCustom = (props: any) => {
? schema.items[schema.items.length - 1] ? schema.items[schema.items.length - 1]
: schema.items; : schema.items;
if (type === 'add') return mutators.push(items.getEmptyValue()); if (type === 'add') return mutators.push(items.getEmptyValue());
else return mutators.remove(index) else return mutators.remove(index);
}; };
return ( return (
...@@ -59,34 +104,32 @@ const ArrayCustom = (props: any) => { ...@@ -59,34 +104,32 @@ const ArrayCustom = (props: any) => {
editable={editable} editable={editable}
components={ArrayComponents} components={ArrayComponents}
> >
<div style={{ display: "flex", flexDirection: "column", flex: 1 }}> <div style={{ display: 'flex', flexDirection: 'column', flex: 1 }}>
{toArr(value).map((item, index) => { {toArr(value).map((item, index) => {
return ( return (
<div key={index}> <div key={index}>
<div className='address'> <div className="address">
<SchemaField path={FormPath.parse(path).concat(index)} /> <SchemaField path={FormPath.parse(path).concat(index)} />
{ {toArr(value).length - 1 === index ? (
toArr(value).length - 1 === index ?
<div <div
className="address-addition" className="address-addition"
onClick={() => onChange('add', index)} onClick={() => onChange('add', index)}
> >
<PlusOutlined className='address-addition-icon' /> <PlusOutlined className="address-addition-icon" />
</div> </div>
: ) : (
'' ''
} )}
{ {toArr(value).length > 1 ? (
toArr(value).length > 1 ?
<div <div
className="address-addition" className="address-addition"
onClick={() => onChange('del', index)} onClick={() => onChange('del', index)}
> >
<MinusOutlined className='address-addition-icon' /> <MinusOutlined className="address-addition-icon" />
</div> </div>
: ) : (
'' ''
} )}
</div> </div>
</div> </div>
); );
...@@ -105,10 +148,10 @@ const components = { ...@@ -105,10 +148,10 @@ const components = {
TextArea: Input.TextArea, TextArea: Input.TextArea,
Upload, Upload,
RangePicker: DatePicker.RangePicker, RangePicker: DatePicker.RangePicker,
ArrayCustom ArrayCustom,
} };
const actions = createFormActions() const actions = createFormActions();
const data = [ const data = [
{ {
...@@ -118,20 +161,20 @@ const data = [ ...@@ -118,20 +161,20 @@ const data = [
status: '1', status: '1',
operation: '申请注册', operation: '申请注册',
useTime: '2020-05-12 08:08', useTime: '2020-05-12 08:08',
result: '无' result: '无',
} },
] ];
const addMember: React.FC<[]> = () => { const addMember: React.FC<[]> = () => {
const ref = useRef({}) const ref = useRef({});
const [selectedRowKeys, setSelectedRowKeys] = useState<Array<string>>([]) const [selectedRowKeys, setSelectedRowKeys] = useState<Array<string>>([]);
const columns: ColumnType<any>[] = [ const columns: ColumnType<any>[] = [
{ {
title: '序号', title: '序号',
dataIndex: 'sn', dataIndex: 'sn',
align: 'center', align: 'center',
key: 'sn' key: 'sn',
}, },
{ {
title: '操作角色', title: '操作角色',
...@@ -162,37 +205,40 @@ const addMember: React.FC<[]> = () => { ...@@ -162,37 +205,40 @@ const addMember: React.FC<[]> = () => {
dataIndex: 'result', dataIndex: 'result',
align: 'center', align: 'center',
key: 'result', key: 'result',
} },
]; ];
const rowSelection = { const rowSelection = {
selectedRowKeys: selectedRowKeys, selectedRowKeys: selectedRowKeys,
onChange: (selectedRowKeys: any, selectedRows: any) => { onChange: (selectedRowKeys: any, selectedRows: any) => {
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows); console.log(
`selectedRowKeys: ${selectedRowKeys}`,
'selectedRows: ',
selectedRows,
);
}, },
}; };
// 模拟请求 // 模拟请求
const fetchData = (params: any) => { const fetchData = (params: any) => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
const queryResult = data.find(v => v.key === params.keywords) const queryResult = data.find(v => v.key === params.keywords);
setTimeout(() => { setTimeout(() => {
resolve({ resolve({
code: 200, code: 200,
message: '', message: '',
data: queryResult ? [queryResult] : data data: queryResult ? [queryResult] : data,
}) });
}, 1000) }, 1000);
}) });
} };
return ( return (
<PageHeaderWrapper <PageHeaderWrapper
onBack={() => history.goBack()} onBack={() => history.goBack()}
title={ title={
<> <>
<div className='headerTop'> <div className="headerTop">
<span>返回</span> <span>返回</span>
<span>新建会员</span> <span>新建会员</span>
</div> </div>
...@@ -201,9 +247,9 @@ const addMember: React.FC<[]> = () => { ...@@ -201,9 +247,9 @@ const addMember: React.FC<[]> = () => {
extra={ extra={
<> <>
<Button <Button
className='saveBtn' className="saveBtn"
icon={<ContainerOutlined />} icon={<ContainerOutlined />}
onClick={() => actions.submit()} onClick={() => console.log(actions.submit().then(values => values))}
> >
保存 保存
</Button> </Button>
...@@ -211,16 +257,10 @@ const addMember: React.FC<[]> = () => { ...@@ -211,16 +257,10 @@ const addMember: React.FC<[]> = () => {
} }
> >
<Card> <Card>
<SchemaForm <SchemaForm components={components} actions={actions}>
components={components}
actions={actions}
>
<FormTab name="tabs" defaultActiveKey={'tab-1'}> <FormTab name="tabs" defaultActiveKey={'tab-1'}>
<FormTab.TabPane name="tab-1" key='1' tab="基本信息"> <FormTab.TabPane name="tab-1" key="1" tab="基本信息">
<FormMegaLayout <FormMegaLayout labelWidth="140" labelAlign="left">
labelWidth="140"
labelAlign="left"
>
<Field <Field
name="aaa" name="aaa"
type="number" type="number"
...@@ -228,7 +268,7 @@ const addMember: React.FC<[]> = () => { ...@@ -228,7 +268,7 @@ const addMember: React.FC<[]> = () => {
x-props={{ style: { width: 572 } }} x-props={{ style: { width: 572 } }}
enum={[ enum={[
{ value: 1, label: '显示' }, { value: 1, label: '显示' },
{ value: 0, label: '隐藏' } { value: 0, label: '隐藏' },
]} ]}
required required
x-component="Select" x-component="Select"
...@@ -240,7 +280,7 @@ const addMember: React.FC<[]> = () => { ...@@ -240,7 +280,7 @@ const addMember: React.FC<[]> = () => {
x-props={{ style: { width: 572 } }} x-props={{ style: { width: 572 } }}
enum={[ enum={[
{ value: 1, label: '显示' }, { value: 1, label: '显示' },
{ value: 0, label: '隐藏' } { value: 0, label: '隐藏' },
]} ]}
required required
x-component="Select" x-component="Select"
...@@ -252,12 +292,12 @@ const addMember: React.FC<[]> = () => { ...@@ -252,12 +292,12 @@ const addMember: React.FC<[]> = () => {
x-props={{ style: { width: 572 } }} x-props={{ style: { width: 572 } }}
enum={[ enum={[
{ value: 1, label: '显示' }, { value: 1, label: '显示' },
{ value: 0, label: '隐藏' } { value: 0, label: '隐藏' },
]} ]}
required required
x-component="Select" x-component="Select"
/> />
<FormMegaLayout label='注册手机号' inline required > <FormMegaLayout label="注册手机号" inline required>
<Field <Field
name="phoneHead" name="phoneHead"
required required
...@@ -266,7 +306,7 @@ const addMember: React.FC<[]> = () => { ...@@ -266,7 +306,7 @@ const addMember: React.FC<[]> = () => {
x-props={{ style: { width: 128 } }} x-props={{ style: { width: 128 } }}
x-component="Select" x-component="Select"
x-component-props={{ x-component-props={{
placeholder: '请选择' placeholder: '请选择',
}} }}
/> />
<Field <Field
...@@ -275,7 +315,7 @@ const addMember: React.FC<[]> = () => { ...@@ -275,7 +315,7 @@ const addMember: React.FC<[]> = () => {
x-props={{ style: { width: 424 } }} x-props={{ style: { width: 424 } }}
x-component="Input" x-component="Input"
x-component-props={{ x-component-props={{
placeholder: '输入你的手机号码' placeholder: '输入你的手机号码',
}} }}
/> />
</FormMegaLayout> </FormMegaLayout>
...@@ -288,11 +328,8 @@ const addMember: React.FC<[]> = () => { ...@@ -288,11 +328,8 @@ const addMember: React.FC<[]> = () => {
/> />
</FormMegaLayout> </FormMegaLayout>
</FormTab.TabPane> </FormTab.TabPane>
<FormTab.TabPane name="tab-2" key='2' tab="渠道信息"> <FormTab.TabPane name="tab-2" key="2" tab="渠道信息">
<FormMegaLayout <FormMegaLayout labelWidth="140" labelAlign="left">
labelWidth="140"
labelAlign="left"
>
<Field <Field
type="string" type="string"
name="level" name="level"
...@@ -301,7 +338,7 @@ const addMember: React.FC<[]> = () => { ...@@ -301,7 +338,7 @@ const addMember: React.FC<[]> = () => {
x-component="Input" x-component="Input"
x-component-props={{ x-component-props={{
placeholder: '二级', placeholder: '二级',
disabled: true disabled: true,
}} }}
/> />
<Field <Field
...@@ -311,31 +348,31 @@ const addMember: React.FC<[]> = () => { ...@@ -311,31 +348,31 @@ const addMember: React.FC<[]> = () => {
x-props={{ style: { width: 572 } }} x-props={{ style: { width: 572 } }}
enum={[ enum={[
{ value: 1, label: '显示' }, { value: 1, label: '显示' },
{ value: 0, label: '隐藏' } { value: 0, label: '隐藏' },
]} ]}
required required
x-component="Select" x-component="Select"
/> />
<FormMegaLayout label='代理地市' inline required > <FormMegaLayout label="代理地市" inline required>
<Field <Field
name='addressList' name="addressList"
type='array' type="array"
default={[{}]} default={[{}]}
x-component='ArrayCustom' x-component="ArrayCustom"
> >
<Field type='object' x-mega-props={{ columns: 2 }}> <Field type="object" x-mega-props={{ columns: 2 }}>
<Field <Field
type="string" type="string"
name="province" name="province"
x-props={{ style: { width: 278 } }} x-props={{ style: { width: 278 } }}
enum={[ enum={[
{ value: 1, label: '广东省' }, { value: 1, label: '广东省' },
{ value: 0, label: '湖南省' } { value: 0, label: '湖南省' },
]} ]}
required required
x-component="Select" x-component="Select"
x-component-props={{ x-component-props={{
placeholder: '-省份/直辖市-' placeholder: '-省份/直辖市-',
}} }}
/> />
<Field <Field
...@@ -344,12 +381,12 @@ const addMember: React.FC<[]> = () => { ...@@ -344,12 +381,12 @@ const addMember: React.FC<[]> = () => {
x-props={{ style: { width: 278 } }} x-props={{ style: { width: 278 } }}
enum={[ enum={[
{ value: 1, label: '广州' }, { value: 1, label: '广州' },
{ value: 0, label: '珠海' } { value: 0, label: '珠海' },
]} ]}
required required
x-component="Select" x-component="Select"
x-component-props={{ x-component-props={{
placeholder: '-市-' placeholder: '-市-',
}} }}
/> />
<Field <Field
...@@ -358,12 +395,12 @@ const addMember: React.FC<[]> = () => { ...@@ -358,12 +395,12 @@ const addMember: React.FC<[]> = () => {
x-props={{ style: { width: 278 } }} x-props={{ style: { width: 278 } }}
enum={[ enum={[
{ value: 1, label: '海珠区' }, { value: 1, label: '海珠区' },
{ value: 0, label: '白云区' } { value: 0, label: '白云区' },
]} ]}
required required
x-component="Select" x-component="Select"
x-component-props={{ x-component-props={{
placeholder: '-区-' placeholder: '-区-',
}} }}
/> />
</Field> </Field>
...@@ -377,12 +414,12 @@ const addMember: React.FC<[]> = () => { ...@@ -377,12 +414,12 @@ const addMember: React.FC<[]> = () => {
required required
x-component="TextArea" x-component="TextArea"
x-component-props={{ x-component-props={{
placeholder: '最长200个字符，100个汉字' placeholder: '最长200个字符，100个汉字',
}} }}
/> />
</FormMegaLayout> </FormMegaLayout>
</FormTab.TabPane> </FormTab.TabPane>
<FormTab.TabPane name="tab-3" key='3' tab="营业执照"> <FormTab.TabPane name="tab-3" key="3" tab="营业执照">
<FormMegaLayout <FormMegaLayout
labelWidth="140" labelWidth="140"
labelAlign="left" labelAlign="left"
...@@ -392,14 +429,24 @@ const addMember: React.FC<[]> = () => { ...@@ -392,14 +429,24 @@ const addMember: React.FC<[]> = () => {
columns={2} columns={2}
responsive={{ lg: 2, m: 2, s: 1 }} responsive={{ lg: 2, m: 2, s: 1 }}
> >
<Field name="componyName" title="公司名称" x-component="Input" required /> <Field
<Field name="registration" title="登记机关" x-component="Input" required /> name="componyName"
title="公司名称"
x-component="Input"
required
/>
<Field
name="registration"
title="登记机关"
x-component="Input"
required
/>
<Field <Field
name="eType" name="eType"
title="企业类型" title="企业类型"
enum={[ enum={[
{ value: 1, label: '显示' }, { value: 1, label: '显示' },
{ value: 0, label: '隐藏' } { value: 0, label: '隐藏' },
]} ]}
x-component="Select" x-component="Select"
required required
...@@ -409,12 +456,12 @@ const addMember: React.FC<[]> = () => { ...@@ -409,12 +456,12 @@ const addMember: React.FC<[]> = () => {
title="登记时间" title="登记时间"
x-component="DatePicker" x-component="DatePicker"
x-component-props={{ x-component-props={{
format: 'YYYY-MM-DD HH:mm:ss' format: 'YYYY-MM-DD HH:mm:ss',
}} }}
required required
/> />
<FormMegaLayout <FormMegaLayout
label='住所' label="住所"
required required
grid grid
full full
...@@ -428,12 +475,12 @@ const addMember: React.FC<[]> = () => { ...@@ -428,12 +475,12 @@ const addMember: React.FC<[]> = () => {
x-props={{ style: { width: 180 } }} x-props={{ style: { width: 180 } }}
enum={[ enum={[
{ value: 1, label: '广东省' }, { value: 1, label: '广东省' },
{ value: 0, label: '湖南省' } { value: 0, label: '湖南省' },
]} ]}
required required
x-component="Select" x-component="Select"
x-component-props={{ x-component-props={{
placeholder: '-省份/直辖市-' placeholder: '-省份/直辖市-',
}} }}
/> />
<Field <Field
...@@ -442,12 +489,12 @@ const addMember: React.FC<[]> = () => { ...@@ -442,12 +489,12 @@ const addMember: React.FC<[]> = () => {
x-props={{ style: { width: 180 } }} x-props={{ style: { width: 180 } }}
enum={[ enum={[
{ value: 1, label: '广州' }, { value: 1, label: '广州' },
{ value: 0, label: '珠海' } { value: 0, label: '珠海' },
]} ]}
required required
x-component="Select" x-component="Select"
x-component-props={{ x-component-props={{
placeholder: '-市-' placeholder: '-市-',
}} }}
/> />
<Field <Field
...@@ -456,31 +503,38 @@ const addMember: React.FC<[]> = () => { ...@@ -456,31 +503,38 @@ const addMember: React.FC<[]> = () => {
x-props={{ style: { width: 180 } }} x-props={{ style: { width: 180 } }}
enum={[ enum={[
{ value: 1, label: '海珠区' }, { value: 1, label: '海珠区' },
{ value: 0, label: '白云区' } { value: 0, label: '白云区' },
]} ]}
required required
x-component="Select" x-component="Select"
x-component-props={{ x-component-props={{
placeholder: '-区-' placeholder: '-区-',
}} }}
/> />
</FormMegaLayout> </FormMegaLayout>
<Field name="code" title="统一社会信用代码" x-component="Input" required /> <Field
<Field name="legal" title="法人代表人" x-component="Input" required /> name="code"
title="统一社会信用代码"
x-component="Input"
required
/>
<Field
name="legal"
title="法人代表人"
x-component="Input"
required
/>
<Field <Field
name="pic" name="pic"
title="营业执照" title="营业执照"
x-component="Upload" x-component="Upload"
x-component-props={{ x-component-props={{
listType: 'card' listType: 'card',
}} }}
required required
/> />
</FormMegaLayout> </FormMegaLayout>
<FormMegaLayout <FormMegaLayout labelWidth="140" labelAlign="left">
labelWidth="140"
labelAlign="left"
>
<Field <Field
name="rCapital" name="rCapital"
title="注册资本" title="注册资本"
...@@ -493,7 +547,7 @@ const addMember: React.FC<[]> = () => { ...@@ -493,7 +547,7 @@ const addMember: React.FC<[]> = () => {
title="成立日期" title="成立日期"
x-component="DatePicker" x-component="DatePicker"
x-component-props={{ x-component-props={{
format: 'YYYY-MM-DD HH:mm:ss' format: 'YYYY-MM-DD HH:mm:ss',
}} }}
x-props={{ style: { width: 572 } }} x-props={{ style: { width: 572 } }}
required required
...@@ -514,11 +568,8 @@ const addMember: React.FC<[]> = () => { ...@@ -514,11 +568,8 @@ const addMember: React.FC<[]> = () => {
/> />
</FormMegaLayout> </FormMegaLayout>
</FormTab.TabPane> </FormTab.TabPane>
<FormTab.TabPane name="tab-4" key='4' tab="法定代表人"> <FormTab.TabPane name="tab-4" key="4" tab="法定代表人">
<FormMegaLayout <FormMegaLayout labelWidth="140" labelAlign="left">
labelWidth="140"
labelAlign="left"
>
<Field <Field
name="cName" name="cName"
type="string" type="string"
...@@ -527,7 +578,7 @@ const addMember: React.FC<[]> = () => { ...@@ -527,7 +578,7 @@ const addMember: React.FC<[]> = () => {
x-component="Input" x-component="Input"
required required
/> />
<FormMegaLayout label='法人手机号' inline required > <FormMegaLayout label="法人手机号" inline required>
<Field <Field
name="phoneHead" name="phoneHead"
required required
...@@ -536,7 +587,7 @@ const addMember: React.FC<[]> = () => { ...@@ -536,7 +587,7 @@ const addMember: React.FC<[]> = () => {
x-props={{ style: { width: 128 } }} x-props={{ style: { width: 128 } }}
x-component="Select" x-component="Select"
x-component-props={{ x-component-props={{
placeholder: '请选择' placeholder: '请选择',
}} }}
/> />
<Field <Field
...@@ -545,7 +596,7 @@ const addMember: React.FC<[]> = () => { ...@@ -545,7 +596,7 @@ const addMember: React.FC<[]> = () => {
x-props={{ style: { width: 424 } }} x-props={{ style: { width: 424 } }}
x-component="Input" x-component="Input"
x-component-props={{ x-component-props={{
placeholder: '输入你的手机号码' placeholder: '输入你的手机号码',
}} }}
/> />
</FormMegaLayout> </FormMegaLayout>
...@@ -567,11 +618,8 @@ const addMember: React.FC<[]> = () => { ...@@ -567,11 +618,8 @@ const addMember: React.FC<[]> = () => {
/> />
</FormMegaLayout> </FormMegaLayout>
</FormTab.TabPane> </FormTab.TabPane>
<FormTab.TabPane name="tab-5" key='5' tab="联系信息"> <FormTab.TabPane name="tab-5" key="5" tab="联系信息">
<FormMegaLayout <FormMegaLayout labelWidth="140" labelAlign="left">
labelWidth="140"
labelAlign="left"
>
<Field <Field
name="contacts" name="contacts"
type="string" type="string"
...@@ -587,10 +635,10 @@ const addMember: React.FC<[]> = () => { ...@@ -587,10 +635,10 @@ const addMember: React.FC<[]> = () => {
x-props={{ style: { width: 572 } }} x-props={{ style: { width: 572 } }}
x-component="Input" x-component="Input"
x-component-props={{ x-component-props={{
placeholder: '区号' placeholder: '区号',
}} }}
/> />
<FormMegaLayout label='法人手机号' inline required > <FormMegaLayout label="法人手机号" inline required>
<Field <Field
name="phoneHead" name="phoneHead"
required required
...@@ -599,7 +647,7 @@ const addMember: React.FC<[]> = () => { ...@@ -599,7 +647,7 @@ const addMember: React.FC<[]> = () => {
x-props={{ style: { width: 128 } }} x-props={{ style: { width: 128 } }}
x-component="Select" x-component="Select"
x-component-props={{ x-component-props={{
placeholder: '请选择' placeholder: '请选择',
}} }}
/> />
<Field <Field
...@@ -608,7 +656,7 @@ const addMember: React.FC<[]> = () => { ...@@ -608,7 +656,7 @@ const addMember: React.FC<[]> = () => {
x-props={{ style: { width: 424 } }} x-props={{ style: { width: 424 } }}
x-component="Input" x-component="Input"
x-component-props={{ x-component-props={{
placeholder: '输入你的手机号码' placeholder: '输入你的手机号码',
}} }}
/> />
</FormMegaLayout> </FormMegaLayout>
...@@ -619,23 +667,19 @@ const addMember: React.FC<[]> = () => { ...@@ -619,23 +667,19 @@ const addMember: React.FC<[]> = () => {
x-props={{ style: { width: 572 } }} x-props={{ style: { width: 572 } }}
x-component="Input" x-component="Input"
/> />
<FormMegaLayout <FormMegaLayout label="地址" inline required>
label='地址'
inline
required
>
<Field <Field
type="string" type="string"
name="province" name="province"
x-props={{ style: { width: 278 } }} x-props={{ style: { width: 278 } }}
enum={[ enum={[
{ value: 1, label: '广东省' }, { value: 1, label: '广东省' },
{ value: 0, label: '湖南省' } { value: 0, label: '湖南省' },
]} ]}
required required
x-component="Select" x-component="Select"
x-component-props={{ x-component-props={{
placeholder: '-省份/直辖市-' placeholder: '-省份/直辖市-',
}} }}
/> />
<Field <Field
...@@ -644,12 +688,12 @@ const addMember: React.FC<[]> = () => { ...@@ -644,12 +688,12 @@ const addMember: React.FC<[]> = () => {
x-props={{ style: { width: 278 } }} x-props={{ style: { width: 278 } }}
enum={[ enum={[
{ value: 1, label: '广州' }, { value: 1, label: '广州' },
{ value: 0, label: '珠海' } { value: 0, label: '珠海' },
]} ]}
required required
x-component="Select" x-component="Select"
x-component-props={{ x-component-props={{
placeholder: '-市-' placeholder: '-市-',
}} }}
/> />
<Field <Field
...@@ -658,12 +702,12 @@ const addMember: React.FC<[]> = () => { ...@@ -658,12 +702,12 @@ const addMember: React.FC<[]> = () => {
x-props={{ style: { width: 278 } }} x-props={{ style: { width: 278 } }}
enum={[ enum={[
{ value: 1, label: '海珠区' }, { value: 1, label: '海珠区' },
{ value: 0, label: '白云区' } { value: 0, label: '白云区' },
]} ]}
required required
x-component="Select" x-component="Select"
x-component-props={{ x-component-props={{
placeholder: '-区-' placeholder: '-区-',
}} }}
/> />
</FormMegaLayout> </FormMegaLayout>
...@@ -691,7 +735,7 @@ const addMember: React.FC<[]> = () => { ...@@ -691,7 +735,7 @@ const addMember: React.FC<[]> = () => {
/> />
</FormMegaLayout> </FormMegaLayout>
</FormTab.TabPane> </FormTab.TabPane>
<FormTab.TabPane name="tab-6" key='6' tab="流转记录"> <FormTab.TabPane name="tab-6" key="6" tab="流转记录">
<StandardTable <StandardTable
columns={columns} columns={columns}
currentRef={ref} currentRef={ref}
...@@ -701,10 +745,9 @@ const addMember: React.FC<[]> = () => { ...@@ -701,10 +745,9 @@ const addMember: React.FC<[]> = () => {
</FormTab.TabPane> </FormTab.TabPane>
</FormTab> </FormTab>
</SchemaForm> </SchemaForm>
</Card> </Card>
</PageHeaderWrapper > </PageHeaderWrapper>
) );
} };
export default addMember export default addMember;
src/pages/member/memberImport/addMember3.tsx 0 → 100644
View file @ b806666b
import React, { useState, useRef } from 'react';
import { history } from 'umi';
import { Card, Button } from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import {
ContainerOutlined,
PlusOutlined,
MinusOutlined,
} from '@ant-design/icons';
import { SchemaForm, Field, createFormActions } from '@formily/antd';
import {
FormTab,
Input,
Select,
DatePicker,
Upload,
} from '@formily/antd-components';
import { ArrayList } from '@formily/react-shared-components';
import { toArr, isFn, FormPath } from '@formily/shared';
import { StandardTable } from 'god';
import { ColumnType } from 'antd/lib/table/interface';
import './index.less';
const actions = createFormActions();
const addMember: React.FC<[]> = () => {
const ref = useRef({});
const [selectedRowKeys, setSelectedRowKeys] = useState<Array<string>>([]);
const columns: ColumnType<any>[] = [
{
title: '序号',
dataIndex: 'sn',
align: 'center',
key: 'sn',
},
{
title: '操作角色',
dataIndex: 'roleName',
align: 'center',
key: 'roleName',
},
{
title: '状态',
dataIndex: 'status',
align: 'center',
key: 'status',
},
{
title: '操作',
dataIndex: 'operation',
align: 'center',
key: 'operation',
},
{
title: '操作时间',
dataIndex: 'useTime',
align: 'center',
key: 'useTime',
},
{
title: '审核意见',
dataIndex: 'result',
align: 'center',
key: 'result',
},
];
return (
<PageHeaderWrapper
onBack={() => history.goBack()}
title={
<>
<div className="headerTop">
<span>返回</span>
<span>新建会员</span>
</div>
</>
}
extra={
<>
<Button
className="saveBtn"
icon={<ContainerOutlined />}
onClick={() => actions.submit()}
>
保存
</Button>
</>
}
>
<Card>
<SchemaForm
components={{ Input, Select, Upload, TextArea: Input.TextArea }}
actions={actions}
>
<FormTab name="tabs" defaultActiveKey={'1'}>
<FormTab.TabPane name="1" tab="选项1">
<Field
name="aaa"
type="number"
title="会员类型"
x-props={{ style: { width: 572 } }}
enum={[
{ value: 1, label: '显示' },
{ value: 0, label: '隐藏' },
]}
required
x-component="Input"
/>
<Field
name="bbb"
type="number"
title="会员角色"
x-props={{ style: { width: 572 } }}
required
x-component="TextArea"
/>
<Field
name="ccc"
type="number"
title="会员等级"
x-props={{ style: { width: 572 } }}
enum={[
{ value: 1, label: '显示' },
{ value: 0, label: '隐藏' },
]}
required
x-component="Select"
/>
<Field
name="aaa1"
type="number"
title="会员类型"
x-props={{ style: { width: 572 } }}
enum={[
{ value: 1, label: '显示' },
{ value: 0, label: '隐藏' },
]}
required
x-component="Select"
/>
<Field
name="bbb1"
type="number"
title="会员角色"
x-props={{ style: { width: 572 } }}
enum={[
{ value: 1, label: '显示' },
{ value: 0, label: '隐藏' },
]}
required
x-component="Upload"
/>
<Field
name="ccc1"
type="number"
title="会员等级"
x-props={{ style: { width: 572 } }}
enum={[
{ value: 1, label: '显示' },
{ value: 0, label: '隐藏' },
]}
required
x-component="Select"
/>
</FormTab.TabPane>
<FormTab.TabPane name="2" tab="选项2">
<Field
name="aaa"
type="number"
title="会员类型"
x-props={{ style: { width: 572 } }}
enum={[
{ value: 1, label: '显示' },
{ value: 0, label: '隐藏' },
]}
required
x-component="Select"
/>
<Field
name="bbb"
type="number"
title="会员角色"
x-props={{ style: { width: 572 } }}
enum={[
{ value: 1, label: '显示' },
{ value: 0, label: '隐藏' },
]}
required
x-component="Select"
/>
<Field
name="ccc"
type="number"
title="会员等级"
x-props={{ style: { width: 572 } }}
enum={[
{ value: 1, label: '显示' },
{ value: 0, label: '隐藏' },
]}
required
x-component="Select"
/>
<Field
name="aaa1"
type="number"
title="会员类型"
x-props={{ style: { width: 572 } }}
enum={[
{ value: 1, label: '显示' },
{ value: 0, label: '隐藏' },
]}
required
x-component="Select"
/>
<Field
name="bbb1"
type="number"
title="会员角色"
x-props={{ style: { width: 572 } }}
enum={[
{ value: 1, label: '显示' },
{ value: 0, label: '隐藏' },
]}
required
x-component="Select"
/>
<Field
name="ccc1"
type="number"
title="会员等级"
x-props={{ style: { width: 572 } }}
enum={[
{ value: 1, label: '显示' },
{ value: 0, label: '隐藏' },
]}
required
x-component="Select"
/>
</FormTab.TabPane>
<FormTab.TabPane name="3" tab="选项3">
<Field
name="aaa"
type="number"
title="会员类型"
x-props={{ style: { width: 572 } }}
enum={[
{ value: 1, label: '显示' },
{ value: 0, label: '隐藏' },
]}
required
x-component="Select"
/>
<Field
name="bbb"
type="number"
title="会员角色"
x-props={{ style: { width: 572 } }}
enum={[
{ value: 1, label: '显示' },
{ value: 0, label: '隐藏' },
]}
required
x-component="Select"
/>
<Field
name="ccc"
type="number"
title="会员等级"
x-props={{ style: { width: 572 } }}
enum={[
{ value: 1, label: '显示' },
{ value: 0, label: '隐藏' },
]}
required
x-component="Select"
/>
<Field
name="aaa1"
type="number"
title="会员类型"
x-props={{ style: { width: 572 } }}
enum={[
{ value: 1, label: '显示' },
{ value: 0, label: '隐藏' },
]}
required
x-component="Select"
/>
<Field
name="bbb1"
type="number"
title="会员角色"
x-props={{ style: { width: 572 } }}
enum={[
{ value: 1, label: '显示' },
{ value: 0, label: '隐藏' },
]}
required
x-component="Select"
/>
<Field
name="ccc1"
type="number"
title="会员等级"
x-props={{ style: { width: 572 } }}
enum={[
{ value: 1, label: '显示' },
{ value: 0, label: '隐藏' },
]}
required
x-component="Select"
/>
</FormTab.TabPane>
<FormTab.TabPane name="4" tab="选项4">
<Field
name="aaa"
type="number"
title="会员类型"
x-props={{ style: { width: 572 } }}
enum={[
{ value: 1, label: '显示' },
{ value: 0, label: '隐藏' },
]}
required
x-component="Select"
/>
<Field
name="bbb"
type="number"
title="会员角色"
x-props={{ style: { width: 572 } }}
enum={[
{ value: 1, label: '显示' },
{ value: 0, label: '隐藏' },
]}
required
x-component="Select"
/>
<Field
name="ccc"
type="number"
title="会员等级"
x-props={{ style: { width: 572 } }}
enum={[
{ value: 1, label: '显示' },
{ value: 0, label: '隐藏' },
]}
required
x-component="Select"
/>
<Field
name="aaa1"
type="number"
title="会员类型"
x-props={{ style: { width: 572 } }}
enum={[
{ value: 1, label: '显示' },
{ value: 0, label: '隐藏' },
]}
required
x-component="Select"
/>
<Field
name="bbb1"
type="number"
title="会员角色"
x-props={{ style: { width: 572 } }}
enum={[
{ value: 1, label: '显示' },
{ value: 0, label: '隐藏' },
]}
required
x-component="Select"
/>
<Field
name="ccc1"
type="number"
title="会员等级"
x-props={{ style: { width: 572 } }}
enum={[
{ value: 1, label: '显示' },
{ value: 0, label: '隐藏' },
]}
required
x-component="Select"
/>
</FormTab.TabPane>
<FormTab.TabPane name="5" tab="选项5">
<Field
name="aaa"
type="number"
title="会员类型"
x-props={{ style: { width: 572 } }}
enum={[
{ value: 1, label: '显示' },
{ value: 0, label: '隐藏' },
]}
required
x-component="Select"
/>
<Field
name="bbb"
type="number"
title="会员角色"
x-props={{ style: { width: 572 } }}
enum={[
{ value: 1, label: '显示' },
{ value: 0, label: '隐藏' },
]}
required
x-component="Select"
/>
<Field
name="ccc"
type="number"
title="会员等级"
x-props={{ style: { width: 572 } }}
enum={[
{ value: 1, label: '显示' },
{ value: 0, label: '隐藏' },
]}
required
x-component="Select"
/>
<Field
name="aaa1"
type="number"
title="会员类型"
x-props={{ style: { width: 572 } }}
enum={[
{ value: 1, label: '显示' },
{ value: 0, label: '隐藏' },
]}
required
x-component="Select"
/>
<Field
name="bbb1"
type="number"
title="会员角色"
x-props={{ style: { width: 572 } }}
enum={[
{ value: 1, label: '显示' },
{ value: 0, label: '隐藏' },
]}
required
x-component="Select"
/>
<Field
name="ccc1"
type="number"
title="会员等级"
x-props={{ style: { width: 572 } }}
enum={[
{ value: 1, label: '显示' },
{ value: 0, label: '隐藏' },
]}
required
x-component="Select"
/>
</FormTab.TabPane>
<FormTab.TabPane name="6" tab="选项6">
<Field
name="aaa"
type="number"
title="会员类型"
x-props={{ style: { width: 572 } }}
enum={[
{ value: 1, label: '显示' },
{ value: 0, label: '隐藏' },
]}
required
x-component="Select"
/>
<Field
name="bbb"
type="number"
title="会员角色"
x-props={{ style: { width: 572 } }}
enum={[
{ value: 1, label: '显示' },
{ value: 0, label: '隐藏' },
]}
required
x-component="Select"
/>
<Field
name="ccc"
type="number"
title="会员等级"
x-props={{ style: { width: 572 } }}
enum={[
{ value: 1, label: '显示' },
{ value: 0, label: '隐藏' },
]}
required
x-component="Select"
/>
<Field
name="aaa1"
type="number"
title="会员类型"
x-props={{ style: { width: 572 } }}
enum={[
{ value: 1, label: '显示' },
{ value: 0, label: '隐藏' },
]}
required
x-component="Select"
/>
<Field
name="bbb1"
type="number"
title="会员角色"
x-props={{ style: { width: 572 } }}
enum={[
{ value: 1, label: '显示' },
{ value: 0, label: '隐藏' },
]}
required
x-component="Select"
/>
<Field
name="ccc1"
type="number"
title="会员等级"
x-props={{ style: { width: 572 } }}
enum={[
{ value: 1, label: '显示' },
{ value: 0, label: '隐藏' },
]}
required
x-component="Select"
/>
</FormTab.TabPane>
</FormTab>
</SchemaForm>
</Card>
</PageHeaderWrapper>
);
};
export default addMember;
src/pages/member/memberImport/index.tsx
View file @ b806666b
import React, { useState, useRef } from 'react' import React, { useState, 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' Tooltip,
Input,
Select,
Button,
Card,
Dropdown,
Menu,
Row,
Col,
} from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { import {
PlusOutlined, PlusOutlined,
EyeOutlined, EyeOutlined,
UpOutlined, UpOutlined,
DeleteOutlined, DeleteOutlined,
DownOutlined DownOutlined,
} from '@ant-design/icons' } from '@ant-design/icons';
import { StandardTable } from 'god' import { StandardTable } from 'god';
import { ColumnType } from 'antd/lib/table/interface' import { ColumnType } from 'antd/lib/table/interface';
import style from './index.less' import style from './index.less';
import UploadModal from '@/components/UploadModal';
const { Option } = Select; const { Option } = Select;
...@@ -48,12 +59,12 @@ const data = [ ...@@ -48,12 +59,12 @@ const data = [
applyTime: '2020-05-12 08:08', applyTime: '2020-05-12 08:08',
status: '正常', status: '正常',
externalStatus: '待提交', externalStatus: '待提交',
} },
] ];
const memberImport: React.FC<{}> = () => { const memberImport: React.FC<{}> = () => {
const ref = useRef({}) const ref = useRef({});
let [isSearch, setIsSearch] = useState(false) let [isSearch, setIsSearch] = useState(false);
const [searchForm, setSearchForm] = useState({ const [searchForm, setSearchForm] = useState({
memberIdorName: '', memberIdorName: '',
memberType: '', memberType: '',
...@@ -63,16 +74,17 @@ const memberImport: React.FC<{}> = () => { ...@@ -63,16 +74,17 @@ const memberImport: React.FC<{}> = () => {
insideStatus: '', insideStatus: '',
outSideStatus: '', outSideStatus: '',
memberStatus: '', memberStatus: '',
TimeRange: '' TimeRange: '',
}) });
const [selectedRowKeys, setSelectedRowKeys] = useState<Array<string>>([]) const [selectedRowKeys, setSelectedRowKeys] = useState<Array<string>>([]);
const [visibleModal, setVisibleModal] = useState(false);
const columns: ColumnType<any>[] = [ const columns: ColumnType<any>[] = [
{ {
title: 'ID', title: 'ID',
dataIndex: 'id', dataIndex: 'id',
align: 'center', align: 'center',
key: 'id' key: 'id',
}, },
{ {
title: '会员名称', title: '会员名称',
...@@ -82,11 +94,17 @@ const memberImport: React.FC<{}> = () => { ...@@ -82,11 +94,17 @@ const memberImport: React.FC<{}> = () => {
render: (text: any, record: any) => { render: (text: any, record: any) => {
return ( return (
<div className={style.nameCell}> <div className={style.nameCell}>
<div className={style.nameCellTitle} onClick={() => handleSee(record)}>{text}&nbsp;<EyeOutlined /></div> <div
className={style.nameCellTitle}
onClick={() => handleSee(record)}
>
{text}&nbsp;
<EyeOutlined />
</div>
<div className={style[`levelIcon${record.level}`]}></div> <div className={style[`levelIcon${record.level}`]}></div>
</div> </div>
) );
} },
}, },
{ {
title: '会员类型', title: '会员类型',
...@@ -125,65 +143,77 @@ const memberImport: React.FC<{}> = () => { ...@@ -125,65 +143,77 @@ const memberImport: React.FC<{}> = () => {
render: (record: any) => { render: (record: any) => {
return ( return (
<> <>
<Button type='link'>提交审核</Button> <Button type="link">提交审核</Button>
<Button type='link' onClick={() => history.push('/memberCenter/memberAbility/manage/addMember')}>编辑</Button> <Button
<Button type='link'>更多</Button> type="link"
</> onClick={() =>
) history.push('/memberCenter/memberAbility/manage/addMember')
}
} }
>
编辑
</Button>
<Button type="link">更多</Button>
</>
);
},
},
]; ];
const menu = ( const menu = (
<Menu onClick={(e) => handleMenuClick(e)}> <Menu onClick={e => handleMenuClick(e)}>
<Menu.Item key="1" icon={<DeleteOutlined />}> <Menu.Item key="1" icon={<DeleteOutlined />}>
删除导入批次 删除导入批次
</Menu.Item> </Menu.Item>
</Menu> </Menu>
) );
const rowSelection = { const rowSelection = {
selectedRowKeys: selectedRowKeys, selectedRowKeys: selectedRowKeys,
onChange: (selectedRowKeys: any, selectedRows: any) => { onChange: (selectedRowKeys: any, selectedRows: any) => {
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows); console.log(
`selectedRowKeys: ${selectedRowKeys}`,
'selectedRows: ',
selectedRows,
);
}, },
}; };
// 模拟请求 // 模拟请求
const fetchData = (params: any) => { const fetchData = (params: any) => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
const queryResult = data.find(v => v.key === params.keywords) const queryResult = data.find(v => v.key === params.keywords);
setTimeout(() => { setTimeout(() => {
resolve({ resolve({
code: 200, code: 200,
message: '', message: '',
data: queryResult ? [queryResult] : data data: queryResult ? [queryResult] : data,
}) });
}, 1000) }, 1000);
}) });
} };
const handleSee = (record: any) => { const handleSee = (record: any) => {
console.log('see') console.log('see');
} };
const handleSearch = () => { } const handleSearch = () => {};
const handleReset = () => { const handleReset = () => {
for (let key in searchForm) { for (let key in searchForm) {
searchForm[key] = '' searchForm[key] = '';
}
setSearchForm({ ...searchForm })
} }
setSearchForm({ ...searchForm });
};
const handleMenuClick = (e: any) => { const handleMenuClick = (e: any) => {
console.log('menu', e); console.log('menu', e);
} };
return ( return (
<PageHeaderWrapper> <PageHeaderWrapper>
<Card> <Card>
<StandardTable <StandardTable
tableProps={{ rowKey: 'id' }}
columns={columns} columns={columns}
currentRef={ref} currentRef={ref}
rowSelection={rowSelection} rowSelection={rowSelection}
...@@ -192,12 +222,20 @@ const memberImport: React.FC<{}> = () => { ...@@ -192,12 +222,20 @@ const memberImport: React.FC<{}> = () => {
<Row> <Row>
<Col className={style.col} span={8}> <Col className={style.col} span={8}>
<Button <Button
type='primary' type="primary"
onClick={() => history.push('/memberCenter/memberAbility/manage/addMember')} onClick={() =>
history.push('/memberCenter/memberAbility/manage/addMember')
}
> >
<PlusOutlined />新建 <PlusOutlined />
新建
</Button>
<Button
className={style.importBtn}
onClick={() => setVisibleModal(true)}
>
导入
</Button> </Button>
<Button className={style.importBtn}>导入</Button>
<Dropdown.Button <Dropdown.Button
overlay={menu} overlay={menu}
trigger={['click']} trigger={['click']}
...@@ -206,7 +244,12 @@ const memberImport: React.FC<{}> = () => { ...@@ -206,7 +244,12 @@ const memberImport: React.FC<{}> = () => {
更多 更多
</Dropdown.Button> </Dropdown.Button>
</Col> </Col>
<Col className={style.col} span={12} offset={4} style={{ textAlign: 'right' }}> <Col
className={style.col}
span={12}
offset={4}
style={{ textAlign: 'right' }}
>
<Tooltip <Tooltip
trigger={['focus']} trigger={['focus']}
placement="top" placement="top"
...@@ -216,114 +259,139 @@ const memberImport: React.FC<{}> = () => { ...@@ -216,114 +259,139 @@ const memberImport: React.FC<{}> = () => {
style={{ width: '232px' }} style={{ width: '232px' }}
value={searchForm.memberIdorName} value={searchForm.memberIdorName}
placeholder="搜索" placeholder="搜索"
onChange={(e) => setSearchForm({ ...searchForm, memberIdorName: e.target.value })} onChange={e =>
setSearchForm({
...searchForm,
memberIdorName: e.target.value,
})
}
onSearch={() => handleSearch} onSearch={() => handleSearch}
/> />
</Tooltip> </Tooltip>
<Button className={style.importBtn} onClick={() => setIsSearch(isSearch = !isSearch)}> <Button
className={style.importBtn}
onClick={() => setIsSearch((isSearch = !isSearch))}
>
高级筛选{isSearch ? <UpOutlined /> : <DownOutlined />} 高级筛选{isSearch ? <UpOutlined /> : <DownOutlined />}
</Button> </Button>
<Button onClick={() => handleReset()}>重置</Button> <Button onClick={() => handleReset()}>重置</Button>
</Col> </Col>
{ {isSearch ? (
isSearch ?
<Row className={style.row}> <Row className={style.row}>
<Col className={style.col}> <Col className={style.col}>
<Select <Select
className={style.select} className={style.select}
value={searchForm.memberType} value={searchForm.memberType}
onChange={(val) => setSearchForm({ ...searchForm, memberType: val })} onChange={val =>
setSearchForm({ ...searchForm, memberType: val })
}
> >
<Option value=''>会员类型(全部)</Option> <Option value="">会员类型(全部)</Option>
<Option value='1'>企业会员</Option> <Option value="1">企业会员</Option>
<Option value='2'>个人会员</Option> <Option value="2">个人会员</Option>
<Option value='3'>渠道企业会员</Option> <Option value="3">渠道企业会员</Option>
<Option value='4'>渠道个人会员</Option> <Option value="4">渠道个人会员</Option>
</Select> </Select>
<Select <Select
className={style.select} className={style.select}
value={searchForm.memberRole} value={searchForm.memberRole}
onChange={(val) => setSearchForm({ ...searchForm, memberRole: val })} onChange={val =>
setSearchForm({ ...searchForm, memberRole: val })
}
> >
<Option value=''>会员角色(全部)</Option> <Option value="">会员角色(全部)</Option>
<Option value='1'>供应商</Option> <Option value="1">供应商</Option>
<Option value='2'>采购商</Option> <Option value="2">采购商</Option>
<Option value='3'>加工企业</Option> <Option value="3">加工企业</Option>
<Option value='4'>金融服务商</Option> <Option value="4">金融服务商</Option>
<Option value='5'>物流服务商</Option> <Option value="5">物流服务商</Option>
<Option value='6'>渠道供应商</Option> <Option value="6">渠道供应商</Option>
<Option value='7'>渠道采购商</Option> <Option value="7">渠道采购商</Option>
</Select> </Select>
<Select <Select
className={style.select} className={style.select}
value={searchForm.memberLevel} value={searchForm.memberLevel}
onChange={(val) => setSearchForm({ ...searchForm, memberLevel: val })} onChange={val =>
setSearchForm({ ...searchForm, memberLevel: val })
}
> >
<Option value=''>会员等级(全部)</Option> <Option value="">会员等级(全部)</Option>
<Option value='1'>青铜会员</Option> <Option value="1">青铜会员</Option>
<Option value='2'>白银会员</Option> <Option value="2">白银会员</Option>
<Option value='3'>黄金会员</Option> <Option value="3">黄金会员</Option>
<Option value='4'>钻石会员</Option> <Option value="4">钻石会员</Option>
</Select> </Select>
<Select <Select
className={style.select} className={style.select}
value={searchForm.applySource} value={searchForm.applySource}
onChange={(val) => setSearchForm({ ...searchForm, applySource: val })} onChange={val =>
setSearchForm({ ...searchForm, applySource: val })
}
> >
<Option value=''>申请来源(全部)</Option> <Option value="">申请来源(全部)</Option>
<Option value='1'>WEB企业商城申请</Option> <Option value="1">WEB企业商城申请</Option>
<Option value='2'>H5企业商城申请</Option> <Option value="2">H5企业商城申请</Option>
<Option value='3'>WEB渠道商城申请</Option> <Option value="3">WEB渠道商城申请</Option>
<Option value='4'>H5渠道商城申请</Option> <Option value="4">H5渠道商城申请</Option>
<Option value='5'>商户代录入</Option> <Option value="5">商户代录入</Option>
<Option value='6'>渠道代录入</Option> <Option value="6">渠道代录入</Option>
</Select> </Select>
<Select <Select
className={style.select} className={style.select}
value={searchForm.outSideStatus} value={searchForm.outSideStatus}
onChange={(val) => setSearchForm({ ...searchForm, outSideStatus: val })} onChange={val =>
setSearchForm({ ...searchForm, outSideStatus: val })
}
> >
<Option value=''>外部状态(全部)</Option> <Option value="">外部状态(全部)</Option>
<Option value='1'>待审核</Option> <Option value="1">待审核</Option>
<Option value='2'>审核通过</Option> <Option value="2">审核通过</Option>
<Option value='3'>审核不通过</Option> <Option value="3">审核不通过</Option>
</Select> </Select>
<Select <Select
className={style.select} className={style.select}
value={searchForm.insideStatus} value={searchForm.insideStatus}
onChange={(val) => setSearchForm({ ...searchForm, insideStatus: val })} onChange={val =>
setSearchForm({ ...searchForm, insideStatus: val })
}
> >
<Option value=''>内部状态(全部)</Option> <Option value="">内部状态(全部)</Option>
<Option value='1'>待提交审核</Option> <Option value="1">待提交审核</Option>
<Option value='2'>待审核</Option> <Option value="2">待审核</Option>
<Option value='3'>审核通过</Option> <Option value="3">审核通过</Option>
<Option value='4'>审核不通过</Option> <Option value="4">审核不通过</Option>
</Select> </Select>
<Select <Select
className={style.select} className={style.select}
value={searchForm.TimeRange} value={searchForm.TimeRange}
onChange={(val) => setSearchForm({ ...searchForm, TimeRange: val })} onChange={val =>
setSearchForm({ ...searchForm, TimeRange: val })
}
> >
<Option value=''>时间范围(全部)</Option> <Option value="">时间范围(全部)</Option>
<Option value='1'>今天</Option> <Option value="1">今天</Option>
<Option value='2'>一周内</Option> <Option value="2">一周内</Option>
<Option value='3'>一个月内</Option> <Option value="3">一个月内</Option>
<Option value='4'>三个月内</Option> <Option value="4">三个月内</Option>
<Option value='5'>六个月内</Option> <Option value="5">六个月内</Option>
<Option value='6'>一年内</Option> <Option value="6">一年内</Option>
<Option value='7'>一年前</Option> <Option value="7">一年前</Option>
</Select> </Select>
</Col> </Col>
</Row> </Row>
: ) : (
'' ''
} )}
</Row> </Row>
} }
/> />
</Card> </Card>
</PageHeaderWrapper > <UploadModal
) visibleModal={visibleModal}
} onCancel={() => setVisibleModal(false)}
/>
</PageHeaderWrapper>
);
};
export default memberImport export default memberImport;
src/pages/member/memberLevel/index.tsx
View file @ b806666b
import React, { ReactNode, useState, useRef, useEffect } from 'react' import React, { ReactNode, useState, useRef, useEffect } from 'react';
import { history } from 'umi' import { history } from 'umi';
import { Row, Col, Tooltip, Button, Popconfirm, Card, Input } from 'antd' import { Row, Col, Tooltip, Button, Popconfirm, Card, Input } from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout' import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { PlayCircleOutlined, PauseCircleOutlined, EyeOutlined } from '@ant-design/icons' import {
import { StandardTable } from 'god' PlayCircleOutlined,
import { ColumnType } from 'antd/lib/table/interface' PauseCircleOutlined,
import style from './index.less' EyeOutlined,
} from '@ant-design/icons';
import { StandardTable } from 'god';
import { ColumnType } from 'antd/lib/table/interface';
import style from './index.less';
import { PublicApi } from '@/services/api';
const data = [ const data = [
{ {
...@@ -19,7 +24,7 @@ const data = [ ...@@ -19,7 +24,7 @@ const data = [
type: '服务消费', type: '服务消费',
roleType: '企业会员', roleType: '企业会员',
thresvalue: '100000', thresvalue: '100000',
status: 1 status: 1,
}, },
{ {
key: '2', key: '2',
...@@ -32,7 +37,7 @@ const data = [ ...@@ -32,7 +37,7 @@ const data = [
type: '服务消费', type: '服务消费',
roleType: '企业会员', roleType: '企业会员',
thresvalue: '100000', thresvalue: '100000',
status: 2 status: 2,
}, },
{ {
key: '3', key: '3',
...@@ -45,7 +50,7 @@ const data = [ ...@@ -45,7 +50,7 @@ const data = [
type: '服务消费', type: '服务消费',
roleType: '企业会员', roleType: '企业会员',
thresvalue: '100000', thresvalue: '100000',
status: 1 status: 1,
}, },
{ {
key: '4', key: '4',
...@@ -58,13 +63,13 @@ const data = [ ...@@ -58,13 +63,13 @@ const data = [
type: '服务消费', type: '服务消费',
roleType: '企业会员', roleType: '企业会员',
thresvalue: '100000', thresvalue: '100000',
status: 2 status: 2,
} },
] ];
const memberLevel: React.FC<[]> = () => { const memberLevel: React.FC<[]> = () => {
const ref = useRef({}) const ref = useRef({});
const [keywords, setKeywords] = useState('') const [keywords, setKeywords] = useState('');
const columns: ColumnType<any>[] = [ const columns: ColumnType<any>[] = [
{ {
...@@ -78,14 +83,21 @@ const memberLevel: React.FC<[]> = () => { ...@@ -78,14 +83,21 @@ const memberLevel: React.FC<[]> = () => {
dataIndex: 'level', dataIndex: 'level',
align: 'center', align: 'center',
key: 'level', key: 'level',
render: (text: any, record: any) => <div className={style[`levelIcon${record.level}`]}></div> render: (text: any, record: any) => (
<div className={style[`levelIcon${record.level}`]}></div>
),
}, },
{ {
title: '会员等级标签', title: '会员等级标签',
dataIndex: 'levelTab', dataIndex: 'levelTab',
align: 'center', align: 'center',
key: 'levelTab', key: 'levelTab',
render: (text: any, record: any) => <span className={style.nameCellTitle} onClick={() => handleSee(record)}>{text}&nbsp;<EyeOutlined /></span> render: (text: any, record: any) => (
<span className={style.nameCellTitle} onClick={() => handleSee(record)}>
{text}&nbsp;
<EyeOutlined />
</span>
),
}, },
{ {
title: '会员等级类型', title: '会员等级类型',
...@@ -129,7 +141,7 @@ const memberLevel: React.FC<[]> = () => { ...@@ -129,7 +141,7 @@ const memberLevel: React.FC<[]> = () => {
align: 'center', align: 'center',
key: 'status', key: 'status',
render: (text: any, record: any) => { render: (text: any, record: any) => {
let component: ReactNode = null let component: ReactNode = null;
component = ( component = (
<Popconfirm <Popconfirm
title="确定要执行这个操作?" title="确定要执行这个操作?"
...@@ -139,79 +151,80 @@ const memberLevel: React.FC<[]> = () => { ...@@ -139,79 +151,80 @@ const memberLevel: React.FC<[]> = () => {
cancelText="否" cancelText="否"
> >
<Button <Button
type='link' type="link"
onClick={() => handleModify(record)} onClick={() => handleModify(record)}
style={record.status === 1 ? style={
{ color: '#00B37A' } : { color: 'red' }} record.status === 1 ? { color: '#00B37A' } : { color: 'red' }
}
> >
{ {record.status === 1 ? (
record.status === 1 ?
<> <>
<span>有效</span> <span>有效</span>
<PlayCircleOutlined /> <PlayCircleOutlined />
</> </>
: ) : (
<> <>
<span>无效</span> <span>无效</span>
<PauseCircleOutlined /> <PauseCircleOutlined />
</> </>
} )}
</Button> </Button>
</Popconfirm> </Popconfirm>
) );
return component return component;
} },
}, },
{ {
title: '操作', title: '操作',
dataIndex: 'option', dataIndex: 'option',
align: 'center', align: 'center',
render: (record: any) => <Button type='link' onClick={(record) => handleSet(record)}>设置</Button> render: (record: any) => (
} <Button type="link" onClick={record => handleSet(record)}>
设置
</Button>
),
},
]; ];
// 模拟请求 // 模拟请求
const fetchData = (params: any) => { const fetchData = (params: any) => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
const queryResult = data.find(v => v.key === params.keywords) PublicApi.postMemberManageLevelPage({
setTimeout(() => { levelTag: '',
resolve({ memberLevelTypeEnum: '',
code: 200, roleName: '',
message: '', current: params.page,
data: queryResult ? [queryResult] : data pageSize: params.rows,
}) }).then(res => {});
}, 1000) });
}) };
}
useEffect(() => { useEffect(() => {
console.log(keywords) console.log(keywords);
}) });
const handleSee = (record: any) => { const handleSee = (record: any) => {};
}
const confirm = () => { const confirm = () => {
console.log('confirm') console.log('confirm');
} };
const cancel = () => { const cancel = () => {
console.log('cancel') console.log('cancel');
} };
const handleModify = (record: object) => { const handleModify = (record: object) => {
// 通过传入的params字符串判断是修改那种类型的数据 // 通过传入的params字符串判断是修改那种类型的数据
console.log('执行状态修改', record) console.log('执行状态修改', record);
} };
const handleSearch = () => { } const handleSearch = () => {};
const handleReset = () => { } const handleReset = () => {};
const handleSet = (record: any) => { const handleSet = (record: any) => {
history.push('/memberCenter/memberAbility/manage/level/addEquity') history.push('/memberCenter/memberAbility/manage/level/addEquity');
} };
return ( return (
<PageHeaderWrapper> <PageHeaderWrapper>
...@@ -226,24 +239,33 @@ const memberLevel: React.FC<[]> = () => { ...@@ -226,24 +239,33 @@ const memberLevel: React.FC<[]> = () => {
<Tooltip <Tooltip
trigger={['focus']} trigger={['focus']}
placement="top" placement="top"
title={<span>输入ID、会员等级、会员角色名称&nbsp;&nbsp;进行搜索</span>} title={
<span>
输入ID、会员等级、会员角色名称&nbsp;&nbsp;进行搜索
</span>
}
> >
<Input.Search <Input.Search
style={{ width: '232px' }} style={{ width: '232px' }}
value={keywords} value={keywords}
placeholder="搜索" placeholder="搜索"
onChange={(e) => setKeywords(e.target.value)} onChange={e => setKeywords(e.target.value)}
onSearch={() => handleSearch} onSearch={() => handleSearch}
/> />
</Tooltip> </Tooltip>
<Button className={style.resetBtn} onClick={() => handleReset()}>重置</Button> <Button
className={style.resetBtn}
onClick={() => handleReset()}
>
重置
</Button>
</Col> </Col>
</Row> </Row>
} }
/> />
</Card> </Card>
</PageHeaderWrapper> </PageHeaderWrapper>
) );
} };
export default memberLevel export default memberLevel;
\ 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