导入数据提示框
This commit is contained in:
MustangDeng
parent
0f7c6320bc
commit
fd59f9ba01
|
|
@ -0,0 +1,40 @@
|
|||
import React from 'react';
|
||||
import { WeaSteps, WeaDatePicker, WeaInput } from 'ecCom';
|
||||
import { Upload, Icon, Modal, Row, Col, Button } from "antd";
|
||||
|
||||
import ModalStep1 from './modalStep1'
|
||||
|
||||
const Dragger = Upload.Dragger;
|
||||
|
||||
const Step = WeaSteps.Step;
|
||||
|
||||
export default class ImportModal extends React.Component {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
this.state = {
|
||||
currentStep: 0,
|
||||
}
|
||||
}
|
||||
render() {
|
||||
const { currentStep } = this.state;
|
||||
|
||||
return (<Modal title="数据导入" visible={this.props.visiable}
|
||||
onCancel={this.props.onCancel}
|
||||
width={850} className="cumDeductModal"
|
||||
footer={<Button type="primary" >下一步</Button>}
|
||||
>
|
||||
<div className="stepWrapper">
|
||||
<WeaSteps current={currentStep}>
|
||||
<Step description="上传Excel" />
|
||||
<Step description="数据预览" />
|
||||
<Step description="导入数据" />
|
||||
</WeaSteps>
|
||||
</div>
|
||||
{
|
||||
this.state.currentStep == 0 && (<ModalStep1 />)
|
||||
}
|
||||
|
||||
|
||||
</Modal>)
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,94 @@
|
|||
import React from 'react'
|
||||
import { WeaSteps, WeaDatePicker, WeaInput } from 'ecCom';
|
||||
import { Upload, Icon, Row, Col, Button } from "antd";
|
||||
|
||||
const Dragger = Upload.Dragger;
|
||||
|
||||
export default class ModalStep1 extends React.Component {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
this.state = {
|
||||
datetime: "",
|
||||
personValue: ""
|
||||
}
|
||||
}
|
||||
render() {
|
||||
const { datetime, personValue } = this.state
|
||||
return (
|
||||
<div>
|
||||
<div className="stepInformItem">
|
||||
<div className="stepInformTitle" style={{margin: "10px 0 10px 0"}}>
|
||||
导入选项
|
||||
</div>
|
||||
<div className="formWrapper" style={{border:"1px solid #eee", borderRadiu: "5px", padding: "10px"}}>
|
||||
<Row>
|
||||
<Col span={12}>
|
||||
<span className="formLabel" style={{lineHeight: "30px", marginRight: "10px"}}>税款所属期</span>
|
||||
<WeaDatePicker
|
||||
format="yyyy-MM"
|
||||
value={datetime}
|
||||
onChange={value => this.setState({ datetime: value })}
|
||||
/>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<span className="formLabel" style={{lineHeight: "30px", marginRight: "10px"}}>个税扣缴义务人</span>
|
||||
<WeaInput
|
||||
id="test"
|
||||
style={{ width: 200 }}
|
||||
value={personValue}
|
||||
onChange={value => {
|
||||
this.setState({ personValue: value });
|
||||
}}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="stepInformItem">
|
||||
<div className="stepInformTitle" style={{margin: "10px 0 10px 0"}}>
|
||||
导入excel
|
||||
</div>
|
||||
<div>
|
||||
<Dragger>
|
||||
<div style={{ padding: '25px 0' }}>
|
||||
<p className="ant-upload-drag-icon">
|
||||
<Icon type="inbox" />
|
||||
</p>
|
||||
<p className="ant-upload-text">点击或将文件拖拽到此区域上传</p>
|
||||
<p className="ant-upload-hint">支持单个或批量上传，严禁上传公司内部资料及其他违禁文件</p>
|
||||
</div>
|
||||
</Dragger>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div className="stepInformItem">
|
||||
<div className="stepInformTitle" style={{margin: "10px 0 10px 0"}}>
|
||||
操作步骤
|
||||
</div>
|
||||
|
||||
<div style={{lineHeight: "1.5"}}>
|
||||
1. 第一步，请选择导出的Excel文件或 点击这里下载模板 ，支持税务系统和社保平台下载的表格直接导入；<br />
|
||||
2. 第二步，请一定要确定Excel文档中的格式是模板中的格式，没有被修改掉；<br />
|
||||
3. 第三步，选择填写好的Excel文档，点击“下一步”按钮进行数据预览；<br />
|
||||
4. 第四步，如果以上步骤和Excel文档正确的话，数据会被正确导入，导入成功会有提示。如果有问题，则会提示Excel文档的错误之处。<br />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div className="stepInformItem">
|
||||
<div className="stepInformTitle" style={{margin: "10px 0 10px 0"}}>
|
||||
Excel文件说明
|
||||
</div>
|
||||
|
||||
<div style={{lineHeight: "1.5"}}>
|
||||
1. 后缀名为xls或者xlsx；<br />
|
||||
2. 数据请勿放在合并的单元格中；<br />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -7,7 +7,7 @@ import Archives from './pages/socialSecurityBenefits/archives';
|
|||
import StandingBook from './pages/socialSecurityBenefits/standingBook';
|
||||
import SalaryItemManagement from './pages/salaryItemManagement';
|
||||
import SalaryFile from './pages/salaryFile';
|
||||
import AccumulatedSpecialAdditionalDeduction from './pages/dataAcquisition/accumulatedSpecialAdditionalDeduction';
|
||||
import CumDeduct from './pages/dataAcquisition/cumDeduct';
|
||||
import OtherTaxExemptDeductions from './pages/dataAcquisition/otherTaxExemptDeductions';
|
||||
import CumulativeSituationInPreviousPeriods from './pages/dataAcquisition/cumulativeSituationInPreviousPeriods';
|
||||
import AttendanceReference from './pages/dataAcquisition/attendanceReference';
|
||||
|
|
@ -45,7 +45,7 @@ const DataAcquisition = props => props.children;
|
|||
// salaryItemManagement 薪资项目管理
|
||||
// salaryFile 薪资档案
|
||||
// dataAcquisition 数据采集
|
||||
// accumulatedSpecialAdditionalDeduction 累计专项附加扣除
|
||||
// CumDeduct 累计专项附加扣除
|
||||
// otherTaxExemptDeductions 其他免税扣除
|
||||
// cumulativeSituationInPreviousPeriods 往期累计情况
|
||||
// attendanceReference 考勤引用
|
||||
|
|
@ -67,7 +67,7 @@ const Routes = (
|
|||
<Route key='salaryItemManagement' path='salaryItemManagement' component={SalaryItemManagement} />
|
||||
<Route key='salaryFile' path='salaryFile' component={SalaryFile} />
|
||||
<Route key='dataAcquisition' path='dataAcquisition' component={DataAcquisition}>
|
||||
<Route key='accumulatedSpecialAdditionalDeduction' path='accumulatedSpecialAdditionalDeduction' component={AccumulatedSpecialAdditionalDeduction} />
|
||||
<Route key='cumDeduct' path='cumDeduct' component={CumDeduct} />
|
||||
<Route key='otherTaxExemptDeductions' path='otherTaxExemptDeductions' component={OtherTaxExemptDeductions} />
|
||||
<Route key='cumulativeSituationInPreviousPeriods' path='cumulativeSituationInPreviousPeriods' component={CumulativeSituationInPreviousPeriods} />
|
||||
<Route key='attendanceReference' path='attendanceReference' component={AttendanceReference} />
|
||||
|
|
|
|||
|
|
@ -2,13 +2,15 @@ import React from 'react';
|
|||
import { inject, observer } from 'mobx-react';
|
||||
import { toJS } from 'mobx';
|
||||
|
||||
import { Button, Table, DatePicker } from 'antd';
|
||||
import { Button, Table, DatePicker, Dropdown, Menu, Modal } from 'antd';
|
||||
|
||||
import { WeaTop, WeaTab, WeaRightMenu, WeaRangePicker, WeaTable } from 'ecCom';
|
||||
|
||||
import { renderNoright, getSearchs } from '../../../util'; // 渲染form数据的方法：因为多个页面都会使用，所以抽的公共方法在util中
|
||||
import CustomTab from '../../../components/customTab';
|
||||
import ContentWrapper from '../../../components/contentWrapper';
|
||||
import ImportModal from '../../../components/importModal'
|
||||
|
||||
|
||||
import { columns, dataSource } from './columns';
|
||||
|
||||
|
|
@ -16,14 +18,18 @@ const { MonthPicker } = DatePicker;
|
|||
|
||||
@inject('baseTableStore')
|
||||
@observer
|
||||
export default class AccumulatedSpecialAdditionalDeduction extends React.Component {
|
||||
export default class CumDeduct extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
value: "",
|
||||
selectedKey: "0"
|
||||
selectedKey: "0",
|
||||
visiable: true
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
render() {
|
||||
const { baseTableStore } = this.props;
|
||||
const { loading, hasRight, form, condition, tableStore, showSearchAd, getTableDatas, doSearch, setShowSearchAd } = baseTableStore;
|
||||
|
|
@ -54,18 +60,43 @@ export default class AccumulatedSpecialAdditionalDeduction extends React.Compone
|
|||
];
|
||||
|
||||
const topTab = [
|
||||
];
|
||||
];
|
||||
|
||||
const renderSearchOperationItem = () => {
|
||||
return <div></div>
|
||||
|
||||
}
|
||||
|
||||
const handleButtonClick = () => {
|
||||
}
|
||||
|
||||
const handleMenuClick = () => {
|
||||
|
||||
}
|
||||
|
||||
const handleBtnImport = () => {
|
||||
this.setState({
|
||||
visiable: true
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
const menu = (
|
||||
<Menu onClick={handleMenuClick}>
|
||||
<Menu.Item key="1">导出选中</Menu.Item>
|
||||
</Menu>
|
||||
);
|
||||
|
||||
const btns = [
|
||||
<Button type="primary" onClick={() => {handleBtnImport()}}>导入</Button>,
|
||||
<Dropdown.Button onClick={handleButtonClick} overlay={menu} type="ghost">
|
||||
导出全部
|
||||
</Dropdown.Button>
|
||||
]
|
||||
|
||||
return (
|
||||
<div className="mySalaryBenefitsWrapper">
|
||||
<div className="cumDeductWrapper">
|
||||
<WeaRightMenu
|
||||
datas={rightMenu} // 右键菜单
|
||||
collectParams={collectParams} // 收藏功能: 配置之后显示 收藏、帮助、显示页面地址 这3个功能
|
||||
>
|
||||
<WeaTop
|
||||
title="累计专项附加扣除" // 文字
|
||||
|
|
@ -74,10 +105,12 @@ export default class AccumulatedSpecialAdditionalDeduction extends React.Compone
|
|||
showDropIcon={true} // 是否显示下拉按钮
|
||||
dropMenuDatas={rightMenu} // 下拉菜单（和页面的右键菜单相同）
|
||||
dropMenuProps={{ collectParams }} // 收藏功能: 配置之后显示 收藏、帮助、显示页面地址 这3个功能
|
||||
buttons={btns}
|
||||
>
|
||||
<WeaTable columns={columns} dataSource={dataSource}/>
|
||||
</WeaTop>
|
||||
</WeaRightMenu>
|
||||
<ImportModal visiable={this.state.visiable} onCancel={() => {this.setState({visiable: false})}}/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Loading…
Reference in New Issue