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';
// import japenImg from '../../../../mockStatic/japen.png';
// import korenImg from '../../../../mockStatic/koren.png';
// import us from '../../../../mockStatic/us.png';
const { TabPane } = Tabs;
const data = [];
......@@ -275,7 +274,7 @@ const addMember: React.FC<[]> = () => {
代理地市
</>
}
name="lll"
name="agentCities"
itemStyle={{ marginBottom: 0 }}
>
<>
......
src/pages/member/memberImport/addMember2.tsx
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 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,
SchemaField,
SchemaMarkupField as Field,
MegaLayout,
FormMegaLayout,
createFormActions
} from '@formily/antd'
import { ArrayList } from '@formily/react-shared-components'
import { toArr, isFn, FormPath } from '@formily/shared'
import { FormTab, Input, Select, DatePicker, Upload } from '@formily/antd-components'
import { StandardTable } from 'god'
import { ColumnType } from 'antd/lib/table/interface'
import './index.less'
createFormActions,
} from '@formily/antd';
import { ArrayList } from '@formily/react-shared-components';
import { toArr, isFn, FormPath } from '@formily/shared';
import {
FormTab,
Input,
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 gou from '../../../../mockStatic/gou.png'
import japenImg from '../../../../mockStatic/japen.png'
import korenImg from '../../../../mockStatic/koren.png'
import us from '../../../../mockStatic/us.png'
const _width: number = 24
const _height: number = 17
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 _width: number = 24;
const _height: number = 17;
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: <><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' }
]
{
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: (
<>
<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 = {
CircleButton: (props: any) => <Button {...props} />,
......@@ -48,7 +93,7 @@ const ArrayCustom = (props: any) => {
? schema.items[schema.items.length - 1]
: schema.items;
if (type === 'add') return mutators.push(items.getEmptyValue());
else return mutators.remove(index)
else return mutators.remove(index);
};
return (
......@@ -59,34 +104,32 @@ const ArrayCustom = (props: any) => {
editable={editable}
components={ArrayComponents}
>
<div style={{ display: "flex", flexDirection: "column", flex: 1 }}>
<div style={{ display: 'flex', flexDirection: 'column', flex: 1 }}>
{toArr(value).map((item, index) => {
return (
<div key={index}>
<div className='address'>
<div className="address">
<SchemaField path={FormPath.parse(path).concat(index)} />
{
toArr(value).length - 1 === index ?
{toArr(value).length - 1 === index ? (
<div
className="address-addition"
onClick={() => onChange('add', index)}
>
<PlusOutlined className='address-addition-icon' />
<PlusOutlined className="address-addition-icon" />
</div>
:
) : (
''
}
{
toArr(value).length > 1 ?
)}
{toArr(value).length > 1 ? (
<div
className="address-addition"
onClick={() => onChange('del', index)}
>
<MinusOutlined className='address-addition-icon' />
<MinusOutlined className="address-addition-icon" />
</div>
:
) : (
''
}
)}
</div>
</div>
);
......@@ -105,10 +148,10 @@ const components = {
TextArea: Input.TextArea,
Upload,
RangePicker: DatePicker.RangePicker,
ArrayCustom
}
ArrayCustom,
};
const actions = createFormActions()
const actions = createFormActions();
const data = [
{
......@@ -118,20 +161,20 @@ const data = [
status: '1',
operation: '申请注册',
useTime: '2020-05-12 08:08',
result: '无'
}
]
result: '无',
},
];
const addMember: React.FC<[]> = () => {
const ref = useRef({})
const [selectedRowKeys, setSelectedRowKeys] = useState<Array<string>>([])
const ref = useRef({});
const [selectedRowKeys, setSelectedRowKeys] = useState<Array<string>>([]);
const columns: ColumnType<any>[] = [
{
title: '序号',
dataIndex: 'sn',
align: 'center',
key: 'sn'
key: 'sn',
},
{
title: '操作角色',
......@@ -162,37 +205,40 @@ const addMember: React.FC<[]> = () => {
dataIndex: 'result',
align: 'center',
key: 'result',
}
},
];
const rowSelection = {
selectedRowKeys: selectedRowKeys,
onChange: (selectedRowKeys: any, selectedRows: any) => {
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
console.log(
`selectedRowKeys: ${selectedRowKeys}`,
'selectedRows: ',
selectedRows,
);
},
};
// 模拟请求
const fetchData = (params: any) => {
return new Promise((resolve, reject) => {
const queryResult = data.find(v => v.key === params.keywords)
const queryResult = data.find(v => v.key === params.keywords);
setTimeout(() => {
resolve({
code: 200,
message: '',
data: queryResult ? [queryResult] : data
})
}, 1000)
})
}
data: queryResult ? [queryResult] : data,
});
}, 1000);
});
};
return (
<PageHeaderWrapper
onBack={() => history.goBack()}
title={
<>
<div className='headerTop'>
<div className="headerTop">
<span>返回</span>
<span>新建会员</span>
</div>
......@@ -201,9 +247,9 @@ const addMember: React.FC<[]> = () => {
extra={
<>
<Button
className='saveBtn'
className="saveBtn"
icon={<ContainerOutlined />}
onClick={() => actions.submit()}
onClick={() => console.log(actions.submit().then(values => values))}
>
保存
</Button>
......@@ -211,16 +257,10 @@ const addMember: React.FC<[]> = () => {
}
>
<Card>
<SchemaForm
components={components}
actions={actions}
>
<SchemaForm components={components} actions={actions}>
<FormTab name="tabs" defaultActiveKey={'tab-1'}>
<FormTab.TabPane name="tab-1" key='1' tab="基本信息">
<FormMegaLayout
labelWidth="140"
labelAlign="left"
>
<FormTab.TabPane name="tab-1" key="1" tab="基本信息">
<FormMegaLayout labelWidth="140" labelAlign="left">
<Field
name="aaa"
type="number"
......@@ -228,7 +268,7 @@ const addMember: React.FC<[]> = () => {
x-props={{ style: { width: 572 } }}
enum={[
{ value: 1, label: '显示' },
{ value: 0, label: '隐藏' }
{ value: 0, label: '隐藏' },
]}
required
x-component="Select"
......@@ -240,7 +280,7 @@ const addMember: React.FC<[]> = () => {
x-props={{ style: { width: 572 } }}
enum={[
{ value: 1, label: '显示' },
{ value: 0, label: '隐藏' }
{ value: 0, label: '隐藏' },
]}
required
x-component="Select"
......@@ -252,12 +292,12 @@ const addMember: React.FC<[]> = () => {
x-props={{ style: { width: 572 } }}
enum={[
{ value: 1, label: '显示' },
{ value: 0, label: '隐藏' }
{ value: 0, label: '隐藏' },
]}
required
x-component="Select"
/>
<FormMegaLayout label='注册手机号' inline required >
<FormMegaLayout label="注册手机号" inline required>
<Field
name="phoneHead"
required
......@@ -266,7 +306,7 @@ const addMember: React.FC<[]> = () => {
x-props={{ style: { width: 128 } }}
x-component="Select"
x-component-props={{
placeholder: '请选择'
placeholder: '请选择',
}}
/>
<Field
......@@ -275,7 +315,7 @@ const addMember: React.FC<[]> = () => {
x-props={{ style: { width: 424 } }}
x-component="Input"
x-component-props={{
placeholder: '输入你的手机号码'
placeholder: '输入你的手机号码',
}}
/>
</FormMegaLayout>
......@@ -288,11 +328,8 @@ const addMember: React.FC<[]> = () => {
/>
</FormMegaLayout>
</FormTab.TabPane>
<FormTab.TabPane name="tab-2" key='2' tab="渠道信息">
<FormMegaLayout
labelWidth="140"
labelAlign="left"
>
<FormTab.TabPane name="tab-2" key="2" tab="渠道信息">
<FormMegaLayout labelWidth="140" labelAlign="left">
<Field
type="string"
name="level"
......@@ -301,7 +338,7 @@ const addMember: React.FC<[]> = () => {
x-component="Input"
x-component-props={{
placeholder: '二级',
disabled: true
disabled: true,
}}
/>
<Field
......@@ -311,31 +348,31 @@ const addMember: React.FC<[]> = () => {
x-props={{ style: { width: 572 } }}
enum={[
{ value: 1, label: '显示' },
{ value: 0, label: '隐藏' }
{ value: 0, label: '隐藏' },
]}
required
x-component="Select"
/>
<FormMegaLayout label='代理地市' inline required >
<FormMegaLayout label="代理地市" inline required>
<Field
name='addressList'
type='array'
name="addressList"
type="array"
default={[{}]}
x-component='ArrayCustom'
x-component="ArrayCustom"
>
<Field type='object' x-mega-props={{ columns: 2 }}>
<Field type="object" x-mega-props={{ columns: 2 }}>
<Field
type="string"
name="province"
x-props={{ style: { width: 278 } }}
enum={[
{ value: 1, label: '广东省' },
{ value: 0, label: '湖南省' }
{ value: 0, label: '湖南省' },
]}
required
x-component="Select"
x-component-props={{
placeholder: '-省份/直辖市-'
placeholder: '-省份/直辖市-',
}}
/>
<Field
......@@ -344,12 +381,12 @@ const addMember: React.FC<[]> = () => {
x-props={{ style: { width: 278 } }}
enum={[
{ value: 1, label: '广州' },
{ value: 0, label: '珠海' }
{ value: 0, label: '珠海' },
]}
required
x-component="Select"
x-component-props={{
placeholder: '-市-'
placeholder: '-市-',
}}
/>
<Field
......@@ -358,12 +395,12 @@ const addMember: React.FC<[]> = () => {
x-props={{ style: { width: 278 } }}
enum={[
{ value: 1, label: '海珠区' },
{ value: 0, label: '白云区' }
{ value: 0, label: '白云区' },
]}
required
x-component="Select"
x-component-props={{
placeholder: '-区-'
placeholder: '-区-',
}}
/>
</Field>
......@@ -377,12 +414,12 @@ const addMember: React.FC<[]> = () => {
required
x-component="TextArea"
x-component-props={{
placeholder: '最长200个字符，100个汉字'
placeholder: '最长200个字符，100个汉字',
}}
/>
</FormMegaLayout>
</FormTab.TabPane>
<FormTab.TabPane name="tab-3" key='3' tab="营业执照">
<FormTab.TabPane name="tab-3" key="3" tab="营业执照">
<FormMegaLayout
labelWidth="140"
labelAlign="left"
......@@ -392,14 +429,24 @@ const addMember: React.FC<[]> = () => {
columns={2}
responsive={{ lg: 2, m: 2, s: 1 }}
>
<Field name="componyName" title="公司名称" x-component="Input" required />
<Field name="registration" title="登记机关" x-component="Input" required />
<Field
name="componyName"
title="公司名称"
x-component="Input"
required
/>
<Field
name="registration"
title="登记机关"
x-component="Input"
required
/>
<Field
name="eType"
title="企业类型"
enum={[
{ value: 1, label: '显示' },
{ value: 0, label: '隐藏' }
{ value: 0, label: '隐藏' },
]}
x-component="Select"
required
......@@ -409,12 +456,12 @@ const addMember: React.FC<[]> = () => {
title="登记时间"
x-component="DatePicker"
x-component-props={{
format: 'YYYY-MM-DD HH:mm:ss'
format: 'YYYY-MM-DD HH:mm:ss',
}}
required
/>
<FormMegaLayout
label='住所'
label="住所"
required
grid
full
......@@ -428,12 +475,12 @@ const addMember: React.FC<[]> = () => {
x-props={{ style: { width: 180 } }}
enum={[
{ value: 1, label: '广东省' },
{ value: 0, label: '湖南省' }
{ value: 0, label: '湖南省' },
]}
required
x-component="Select"
x-component-props={{
placeholder: '-省份/直辖市-'
placeholder: '-省份/直辖市-',
}}
/>
<Field
......@@ -442,12 +489,12 @@ const addMember: React.FC<[]> = () => {
x-props={{ style: { width: 180 } }}
enum={[
{ value: 1, label: '广州' },
{ value: 0, label: '珠海' }
{ value: 0, label: '珠海' },
]}
required
x-component="Select"
x-component-props={{
placeholder: '-市-'
placeholder: '-市-',
}}
/>
<Field
......@@ -456,31 +503,38 @@ const addMember: React.FC<[]> = () => {
x-props={{ style: { width: 180 } }}
enum={[
{ value: 1, label: '海珠区' },
{ value: 0, label: '白云区' }
{ value: 0, label: '白云区' },
]}
required
x-component="Select"
x-component-props={{
placeholder: '-区-'
placeholder: '-区-',
}}
/>
</FormMegaLayout>
<Field name="code" title="统一社会信用代码" x-component="Input" required />
<Field name="legal" title="法人代表人" x-component="Input" required />
<Field
name="code"
title="统一社会信用代码"
x-component="Input"
required
/>
<Field
name="legal"
title="法人代表人"
x-component="Input"
required
/>
<Field
name="pic"
title="营业执照"
x-component="Upload"
x-component-props={{
listType: 'card'
listType: 'card',
}}
required
/>
</FormMegaLayout>
<FormMegaLayout
labelWidth="140"
labelAlign="left"
>
<FormMegaLayout labelWidth="140" labelAlign="left">
<Field
name="rCapital"
title="注册资本"
......@@ -493,7 +547,7 @@ const addMember: React.FC<[]> = () => {
title="成立日期"
x-component="DatePicker"
x-component-props={{
format: 'YYYY-MM-DD HH:mm:ss'
format: 'YYYY-MM-DD HH:mm:ss',
}}
x-props={{ style: { width: 572 } }}
required
......@@ -514,11 +568,8 @@ const addMember: React.FC<[]> = () => {
/>
</FormMegaLayout>
</FormTab.TabPane>
<FormTab.TabPane name="tab-4" key='4' tab="法定代表人">
<FormMegaLayout
labelWidth="140"
labelAlign="left"
>
<FormTab.TabPane name="tab-4" key="4" tab="法定代表人">
<FormMegaLayout labelWidth="140" labelAlign="left">
<Field
name="cName"
type="string"
......@@ -527,7 +578,7 @@ const addMember: React.FC<[]> = () => {
x-component="Input"
required
/>
<FormMegaLayout label='法人手机号' inline required >
<FormMegaLayout label="法人手机号" inline required>
<Field
name="phoneHead"
required
......@@ -536,7 +587,7 @@ const addMember: React.FC<[]> = () => {
x-props={{ style: { width: 128 } }}
x-component="Select"
x-component-props={{
placeholder: '请选择'
placeholder: '请选择',
}}
/>
<Field
......@@ -545,7 +596,7 @@ const addMember: React.FC<[]> = () => {
x-props={{ style: { width: 424 } }}
x-component="Input"
x-component-props={{
placeholder: '输入你的手机号码'
placeholder: '输入你的手机号码',
}}
/>
</FormMegaLayout>
......@@ -567,11 +618,8 @@ const addMember: React.FC<[]> = () => {
/>
</FormMegaLayout>
</FormTab.TabPane>
<FormTab.TabPane name="tab-5" key='5' tab="联系信息">
<FormMegaLayout
labelWidth="140"
labelAlign="left"
>
<FormTab.TabPane name="tab-5" key="5" tab="联系信息">
<FormMegaLayout labelWidth="140" labelAlign="left">
<Field
name="contacts"
type="string"
......@@ -587,10 +635,10 @@ const addMember: React.FC<[]> = () => {
x-props={{ style: { width: 572 } }}
x-component="Input"
x-component-props={{
placeholder: '区号'
placeholder: '区号',
}}
/>
<FormMegaLayout label='法人手机号' inline required >
<FormMegaLayout label="法人手机号" inline required>
<Field
name="phoneHead"
required
......@@ -599,7 +647,7 @@ const addMember: React.FC<[]> = () => {
x-props={{ style: { width: 128 } }}
x-component="Select"
x-component-props={{
placeholder: '请选择'
placeholder: '请选择',
}}
/>
<Field
......@@ -608,7 +656,7 @@ const addMember: React.FC<[]> = () => {
x-props={{ style: { width: 424 } }}
x-component="Input"
x-component-props={{
placeholder: '输入你的手机号码'
placeholder: '输入你的手机号码',
}}
/>
</FormMegaLayout>
......@@ -619,23 +667,19 @@ const addMember: React.FC<[]> = () => {
x-props={{ style: { width: 572 } }}
x-component="Input"
/>
<FormMegaLayout
label='地址'
inline
required
>
<FormMegaLayout label="地址" inline required>
<Field
type="string"
name="province"
x-props={{ style: { width: 278 } }}
enum={[
{ value: 1, label: '广东省' },
{ value: 0, label: '湖南省' }
{ value: 0, label: '湖南省' },
]}
required
x-component="Select"
x-component-props={{
placeholder: '-省份/直辖市-'
placeholder: '-省份/直辖市-',
}}
/>
<Field
......@@ -644,12 +688,12 @@ const addMember: React.FC<[]> = () => {
x-props={{ style: { width: 278 } }}
enum={[
{ value: 1, label: '广州' },
{ value: 0, label: '珠海' }
{ value: 0, label: '珠海' },
]}
required
x-component="Select"
x-component-props={{
placeholder: '-市-'
placeholder: '-市-',
}}
/>
<Field
......@@ -658,12 +702,12 @@ const addMember: React.FC<[]> = () => {
x-props={{ style: { width: 278 } }}
enum={[
{ value: 1, label: '海珠区' },
{ value: 0, label: '白云区' }
{ value: 0, label: '白云区' },
]}
required
x-component="Select"
x-component-props={{
placeholder: '-区-'
placeholder: '-区-',
}}
/>
</FormMegaLayout>
......@@ -691,7 +735,7 @@ const addMember: React.FC<[]> = () => {
/>
</FormMegaLayout>
</FormTab.TabPane>
<FormTab.TabPane name="tab-6" key='6' tab="流转记录">
<FormTab.TabPane name="tab-6" key="6" tab="流转记录">
<StandardTable
columns={columns}
currentRef={ref}
......@@ -701,10 +745,9 @@ const addMember: React.FC<[]> = () => {
</FormTab.TabPane>
</FormTab>
</SchemaForm>
</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 { history } from 'umi'
import { Tooltip, Input, Select, Button, Card, Dropdown, Menu, Row, Col } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import React, { useState, useRef } from 'react';
import { history } from 'umi';
import {
Tooltip,
Input,
Select,
Button,
Card,
Dropdown,
Menu,
Row,
Col,
} from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import {
PlusOutlined,
EyeOutlined,
UpOutlined,
DeleteOutlined,
DownOutlined
} from '@ant-design/icons'
import { StandardTable } from 'god'
import { ColumnType } from 'antd/lib/table/interface'
import style from './index.less'
DownOutlined,
} from '@ant-design/icons';
import { StandardTable } from 'god';
import { ColumnType } from 'antd/lib/table/interface';
import style from './index.less';
import UploadModal from '@/components/UploadModal';
const { Option } = Select;
......@@ -48,12 +59,12 @@ const data = [
applyTime: '2020-05-12 08:08',
status: '正常',
externalStatus: '待提交',
}
]
},
];
const memberImport: React.FC<{}> = () => {
const ref = useRef({})
let [isSearch, setIsSearch] = useState(false)
const ref = useRef({});
let [isSearch, setIsSearch] = useState(false);
const [searchForm, setSearchForm] = useState({
memberIdorName: '',
memberType: '',
......@@ -63,16 +74,17 @@ const memberImport: React.FC<{}> = () => {
insideStatus: '',
outSideStatus: '',
memberStatus: '',
TimeRange: ''
})
const [selectedRowKeys, setSelectedRowKeys] = useState<Array<string>>([])
TimeRange: '',
});
const [selectedRowKeys, setSelectedRowKeys] = useState<Array<string>>([]);
const [visibleModal, setVisibleModal] = useState(false);
const columns: ColumnType<any>[] = [
{
title: 'ID',
dataIndex: 'id',
align: 'center',
key: 'id'
key: 'id',
},
{
title: '会员名称',
......@@ -82,11 +94,17 @@ const memberImport: React.FC<{}> = () => {
render: (text: any, record: any) => {
return (
<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>
)
}
);
},
},
{
title: '会员类型',
......@@ -125,65 +143,77 @@ const memberImport: React.FC<{}> = () => {
render: (record: any) => {
return (
<>
<Button type='link'>提交审核</Button>
<Button type='link' onClick={() => history.push('/memberCenter/memberAbility/manage/addMember')}>编辑</Button>
<Button type='link'>更多</Button>
</>
)
}
<Button type="link">提交审核</Button>
<Button
type="link"
onClick={() =>
history.push('/memberCenter/memberAbility/manage/addMember')
}
>
编辑
</Button>
<Button type="link">更多</Button>
</>
);
},
},
];
const menu = (
<Menu onClick={(e) => handleMenuClick(e)}>
<Menu onClick={e => handleMenuClick(e)}>
<Menu.Item key="1" icon={<DeleteOutlined />}>
删除导入批次
</Menu.Item>
</Menu>
)
);
const rowSelection = {
selectedRowKeys: selectedRowKeys,
onChange: (selectedRowKeys: any, selectedRows: any) => {
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
console.log(
`selectedRowKeys: ${selectedRowKeys}`,
'selectedRows: ',
selectedRows,
);
},
};
// 模拟请求
const fetchData = (params: any) => {
return new Promise((resolve, reject) => {
const queryResult = data.find(v => v.key === params.keywords)
const queryResult = data.find(v => v.key === params.keywords);
setTimeout(() => {
resolve({
code: 200,
message: '',
data: queryResult ? [queryResult] : data
})
}, 1000)
})
}
data: queryResult ? [queryResult] : data,
});
}, 1000);
});
};
const handleSee = (record: any) => {
console.log('see')
}
console.log('see');
};
const handleSearch = () => { }
const handleSearch = () => {};
const handleReset = () => {
for (let key in searchForm) {
searchForm[key] = ''
}
setSearchForm({ ...searchForm })
searchForm[key] = '';
}
setSearchForm({ ...searchForm });
};
const handleMenuClick = (e: any) => {
console.log('menu', e);
}
};
return (
<PageHeaderWrapper>
<Card>
<StandardTable
tableProps={{ rowKey: 'id' }}
columns={columns}
currentRef={ref}
rowSelection={rowSelection}
......@@ -192,12 +222,20 @@ const memberImport: React.FC<{}> = () => {
<Row>
<Col className={style.col} span={8}>
<Button
type='primary'
onClick={() => history.push('/memberCenter/memberAbility/manage/addMember')}
type="primary"
onClick={() =>
history.push('/memberCenter/memberAbility/manage/addMember')
}
>
<PlusOutlined />新建
<PlusOutlined />
新建
</Button>
<Button
className={style.importBtn}
onClick={() => setVisibleModal(true)}
>
导入
</Button>
<Button className={style.importBtn}>导入</Button>
<Dropdown.Button
overlay={menu}
trigger={['click']}
......@@ -206,7 +244,12 @@ const memberImport: React.FC<{}> = () => {
更多
</Dropdown.Button>
</Col>
<Col className={style.col} span={12} offset={4} style={{ textAlign: 'right' }}>
<Col
className={style.col}
span={12}
offset={4}
style={{ textAlign: 'right' }}
>
<Tooltip
trigger={['focus']}
placement="top"
......@@ -216,114 +259,139 @@ const memberImport: React.FC<{}> = () => {
style={{ width: '232px' }}
value={searchForm.memberIdorName}
placeholder="搜索"
onChange={(e) => setSearchForm({ ...searchForm, memberIdorName: e.target.value })}
onChange={e =>
setSearchForm({
...searchForm,
memberIdorName: e.target.value,
})
}
onSearch={() => handleSearch}
/>
</Tooltip>
<Button className={style.importBtn} onClick={() => setIsSearch(isSearch = !isSearch)}>
<Button
className={style.importBtn}
onClick={() => setIsSearch((isSearch = !isSearch))}
>
高级筛选{isSearch ? <UpOutlined /> : <DownOutlined />}
</Button>
<Button onClick={() => handleReset()}>重置</Button>
</Col>
{
isSearch ?
{isSearch ? (
<Row className={style.row}>
<Col className={style.col}>
<Select
className={style.select}
value={searchForm.memberType}
onChange={(val) => setSearchForm({ ...searchForm, memberType: val })}
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>
<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 })}
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>
<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 })}
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>
<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 })}
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>
<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 })}
onChange={val =>
setSearchForm({ ...searchForm, outSideStatus: val })
}
>
<Option value=''>外部状态(全部)</Option>
<Option value='1'>待审核</Option>
<Option value='2'>审核通过</Option>
<Option value='3'>审核不通过</Option>
<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 })}
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>
<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 })}
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>
<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 >
)
}
<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 { history } from 'umi'
import { Row, Col, Tooltip, Button, Popconfirm, Card, Input } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import { PlayCircleOutlined, PauseCircleOutlined, EyeOutlined } from '@ant-design/icons'
import { StandardTable } from 'god'
import { ColumnType } from 'antd/lib/table/interface'
import style from './index.less'
import React, { ReactNode, useState, useRef, useEffect } from 'react';
import { history } from 'umi';
import { Row, Col, Tooltip, Button, Popconfirm, Card, Input } from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import {
PlayCircleOutlined,
PauseCircleOutlined,
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 = [
{
......@@ -19,7 +24,7 @@ const data = [
type: '服务消费',
roleType: '企业会员',
thresvalue: '100000',
status: 1
status: 1,
},
{
key: '2',
......@@ -32,7 +37,7 @@ const data = [
type: '服务消费',
roleType: '企业会员',
thresvalue: '100000',
status: 2
status: 2,
},
{
key: '3',
......@@ -45,7 +50,7 @@ const data = [
type: '服务消费',
roleType: '企业会员',
thresvalue: '100000',
status: 1
status: 1,
},
{
key: '4',
......@@ -58,13 +63,13 @@ const data = [
type: '服务消费',
roleType: '企业会员',
thresvalue: '100000',
status: 2
}
]
status: 2,
},
];
const memberLevel: React.FC<[]> = () => {
const ref = useRef({})
const [keywords, setKeywords] = useState('')
const ref = useRef({});
const [keywords, setKeywords] = useState('');
const columns: ColumnType<any>[] = [
{
......@@ -78,14 +83,21 @@ const memberLevel: React.FC<[]> = () => {
dataIndex: 'level',
align: 'center',
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: '会员等级标签',
dataIndex: 'levelTab',
align: 'center',
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: '会员等级类型',
......@@ -129,7 +141,7 @@ const memberLevel: React.FC<[]> = () => {
align: 'center',
key: 'status',
render: (text: any, record: any) => {
let component: ReactNode = null
let component: ReactNode = null;
component = (
<Popconfirm
title="确定要执行这个操作?"
......@@ -139,79 +151,80 @@ const memberLevel: React.FC<[]> = () => {
cancelText="否"
>
<Button
type='link'
type="link"
onClick={() => handleModify(record)}
style={record.status === 1 ?
{ color: '#00B37A' } : { color: 'red' }}
style={
record.status === 1 ? { color: '#00B37A' } : { color: 'red' }
}
>
{
record.status === 1 ?
{record.status === 1 ? (
<>
<span>有效</span>
<PlayCircleOutlined />
</>
:
) : (
<>
<span>无效</span>
<PauseCircleOutlined />
</>
}
)}
</Button>
</Popconfirm>
)
return component
}
);
return component;
},
},
{
title: '操作',
dataIndex: 'option',
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) => {
return new Promise((resolve, reject) => {
const queryResult = data.find(v => v.key === params.keywords)
setTimeout(() => {
resolve({
code: 200,
message: '',
data: queryResult ? [queryResult] : data
})
}, 1000)
})
}
PublicApi.postMemberManageLevelPage({
levelTag: '',
memberLevelTypeEnum: '',
roleName: '',
current: params.page,
pageSize: params.rows,
}).then(res => {});
});
};
useEffect(() => {
console.log(keywords)
})
console.log(keywords);
});
const handleSee = (record: any) => {
}
const handleSee = (record: any) => {};
const confirm = () => {
console.log('confirm')
}
console.log('confirm');
};
const cancel = () => {
console.log('cancel')
}
console.log('cancel');
};
const handleModify = (record: object) => {
// 通过传入的params字符串判断是修改那种类型的数据
console.log('执行状态修改', record)
}
console.log('执行状态修改', record);
};
const handleSearch = () => { }
const handleSearch = () => {};
const handleReset = () => { }
const handleReset = () => {};
const handleSet = (record: any) => {
history.push('/memberCenter/memberAbility/manage/level/addEquity')
}
history.push('/memberCenter/memberAbility/manage/level/addEquity');
};
return (
<PageHeaderWrapper>
......@@ -226,24 +239,33 @@ const memberLevel: React.FC<[]> = () => {
<Tooltip
trigger={['focus']}
placement="top"
title={<span>输入ID、会员等级、会员角色名称&nbsp;&nbsp;进行搜索</span>}
title={
<span>
输入ID、会员等级、会员角色名称&nbsp;&nbsp;进行搜索
</span>
}
>
<Input.Search
style={{ width: '232px' }}
value={keywords}
placeholder="搜索"
onChange={(e) => setKeywords(e.target.value)}
onChange={e => setKeywords(e.target.value)}
onSearch={() => handleSearch}
/>
</Tooltip>
<Button className={style.resetBtn} onClick={() => handleReset()}>重置</Button>
<Button
className={style.resetBtn}
onClick={() => handleReset()}
>
重置
</Button>
</Col>
</Row>
}
/>
</Card>
</PageHeaderWrapper>
)
}
);
};
export default memberLevel
\ No newline at end of file
export default memberLevel;
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