Skip to content

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

封装导入文件模态框组件

parent 4a3d352b
Expand all Show whitespace changes
Inline Side-by-side
Showing with 347 additions and 65 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/addMember3.tsx 0 → 100644
View file @ b806666b
This diff is collapsed.
src/pages/member/memberImport/index.tsx
View file @ b806666b
This diff is collapsed.
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