qt
/
salary-management-front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

考勤数据导入

This commit is contained in:
MustangDeng 2022-03-14 17:07:26 +08:00
parent 7c2ad81d2f
commit 236a6952a4
9 changed files with 278 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
pc4mobx/hrmSalary/components/importModal/headerSet.js Normal file
View File

@ -0,0 +1,20 @@
import React from "react"
import { Button } from "antd"
import { WeaCheckbox, WeaHelpfulTip } from "ecCom";
export default class HeaderSet extends React.Component {
render() {
return (
<div style={{display: "inline-block"}}>
<Button type="default" style={{marginLeft: "10px", marginRight: "10px"}} onClick={this.props.onSetClick}>表头设置</Button>
<WeaCheckbox style={{marginRight: "10px"}}/>
<WeaHelpfulTip
className="headSetTips"
width={200}
title="提示：勾选此项，则导出模板的考勤模块字段自动填充考勤模块的数据，导入时默认为覆盖导入"
placement="topLeft"
/>
</div>
)
}
}

2
pc4mobx/hrmSalary/components/importModal/index.js
View File

@ -78,6 +78,7 @@ export default class ImportModal extends React.Component {
{
this.props.step == 0 && (<ModalStep1
templateLink={this.props.templateLink}
headerSetCompoent={this.props.headerSetCompoent}
formComponent={this.props.renderFormComponent()}
onFileIdChange={(fileId) => {this.setState({fileId})}}
onStep1Next={() => {
@ -89,6 +90,7 @@ export default class ImportModal extends React.Component {
onPreviewDate={() => this.handlePreviewDate()}
dataSource={slideDataSource}
columns={this.props.columns}
onStep2Next={() => {this.nextStep()}} onStep2Pre={() => {this.preStep()}}/>)
}
{

4
pc4mobx/hrmSalary/components/importModal/modalStep1.js
View File

@ -78,7 +78,9 @@ export default class ModalStep1 extends React.Component {
</div>
<div style={{ lineHeight: "30px" }}>
<p>1. 第一步，请选择导出的Excel文件或 <a href={this.props.templateLink}>点击这里下载模板</a>；</p>
<p>1. 第一步，请选择导出的Excel文件或 <a href={this.props.templateLink}>点击这里下载模板</a>；
{this.props.headerSetCompoent && this.props.headerSetCompoent }
</p>
<p>2. 第二步，请一定要确定Excel文档中的格式是模板中的格式，没有被修改掉；</p>
<p>3. 第三步，选择填写好的Excel文档，点击“下一步”按钮进行数据预览；</p>
<p>4. 第四步，如果以上步骤和Excel文档正确的话，数据会被正确导入，导入成功会有提示。如果有问题，则会提示Excel文档的错误之处。</p>

58
pc4mobx/hrmSalary/components/selectItemsModal/index.js Normal file
View File

@ -0,0 +1,58 @@
import React from 'react';
import { WeaInputSearch, WeaCheckbox } from 'ecCom'
import { Row , Col, Modal, Dropdown, Menu, Button } from "antd"
import SelectItemsWrapper from './selectItemsWrapper'
const items = [
{
key: "1",
title: "测试",
checked: false
},
{
key: "2",
title: "测试2",
checked: true
}
]
export default class SelectItemModal extends React.Component {
render(){
const menu = (
<Menu>
<Menu.Item key="1">恢复默认设置</Menu.Item>
<Menu.Item key="2">设置默认设置</Menu.Item>
<Menu.Item key="3">操作日志</Menu.Item>
</Menu>
);
return (
<Modal visible={this.props.visible} width={800} footer={false} onCancel={this.props.onCancel}>
<div style={{marginBottom: "20px", height: "47px", overflow: "hidden"}}>
<span style={{fontSize: "16px", fontWeight: "400"}}>导入字段设置</span>
<WeaInputSearch
style={{float: "right", marginRight: "30px"}}
placeholder={"请输入关键字"}
/>
</div>
<SelectItemsWrapper items={items} title={"考勤模块"}/>
<SelectItemsWrapper items={items} title={"自定义"}/>
<div style={{marginTop: "40px", overflow:"hidden", height: "50px", lineHeight: "50px"}}>
<div style={{float: "left"}}>
<WeaCheckbox content="只显示已选中字段"/>
</div>
<div style={{float: "right"}}>
<Button type="primary" style={{marginRight: "10px"}}>保存</Button>
<Dropdown.Button overlay={menu}>更多</Dropdown.Button>
</div>
</div>
</Modal>
)
}
}

47
pc4mobx/hrmSalary/components/selectItemsModal/selectItemsWrapper.js Normal file
View File

@ -0,0 +1,47 @@
import React from 'react'
import { WeaCheckbox } from 'ecCom';
import { Row, Col, Icon } from 'antd';
export default class SelectItemsWrapper extends React.Component {
constructor(props) {
super(props);
this.state = {
showContent: true
}
}
render() {
return (
<div style={{ margin: "10px 20px" }}>
<div style={{marginBottom: "10px", cursor: "pointer"}} onClick={() => this.setState({
showContent: !this.state.showContent
})}>
<div style={{display: "inline-block"}}><WeaCheckbox content={<span style={{fontWeight: "600"}}>{this.props.title}</span>} /></div>
<div style={{float: 'right', fontWeight: "600"}}>已选中0个字段
<span style={{marginLeft: "10px", fontWeight: "400"}}>
{
this.state.showContent ? <Icon type="down" /> : <Icon type="left" />
}
</span>
</div>
</div>
{
this.state.showContent && <div style={{height: "160px",
border: "1px solid #eee",
padding: "10px",
overflowY: "scroll",
borderRadius: "5px"
}}>
<Row>
{
this.props.items && this.props.items.map(item => (
<Col span={6}><WeaCheckbox content={item.title} value={item.checked}/></Col>
))
}
</Row>
</div>
}
</div>
)
}
}

1
pc4mobx/hrmSalary/pages/dataAcquisition/attendance/columns.js
View File

@ -66,7 +66,6 @@ export const columns = [
}
]
export const dataSource = [];

83
pc4mobx/hrmSalary/pages/dataAcquisition/attendance/index.js
View File

@ -2,9 +2,9 @@ import React from 'react';
import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx';
import { Button, Table, DatePicker } from 'antd';
import { Button, Table, DatePicker, Row, Col } from 'antd';
import { WeaDatePicker, WeaTop, WeaTab, WeaRightMenu, WeaRangePicker, WeaTable } from 'ecCom';
import { WeaHelpfulTip, WeaCheckbox, WeaDatePicker, WeaTop, WeaTab, WeaRightMenu, WeaRangePicker, WeaTable, WeaSelect } from 'ecCom';
import { renderNoright, getSearchs } from '../../../util'; // 渲染form数据的方法：因为多个页面都会使用，所以抽的公共方法在util中
import CustomTab from '../../../components/customTab';
@ -12,10 +12,13 @@ import ContentWrapper from '../../../components/contentWrapper';
import { columns, dataSource } from './columns';
import MonthRange from '../../../components/monthRange'
import ImportModal from '../../../components/importModal'
import HeaderSet from "../../../components/importModal/headerSet"
import SelectItemModal from '../../../components/selectItemsModal'
const { MonthPicker } = DatePicker;
@inject('baseTableStore')
@inject('attendanceStore')
@observer
export default class Attendance extends React.Component {
constructor(props) {
@ -24,13 +27,16 @@ export default class Attendance extends React.Component {
value: "",
selectedKey: "0",
startDate: "",
endDate: ""
endDate: "",
modalParam: {},
modalVisiable: false,
selectItemVisible: false
}
}
render() {
const { baseTableStore } = this.props;
const { loading, hasRight, form, condition, tableStore, showSearchAd, getTableDatas, doSearch, setShowSearchAd } = baseTableStore;
const { attendanceStore } = this.props;
const { loading, hasRight, form, condition, tableStore, showSearchAd, getTableDatas, doSearch, setShowSearchAd } = attendanceStore;
const { step, setStep } = attendanceStore;
if (!hasRight && !loading) { // 无权限处理
return renderNoright();
}
@ -57,12 +63,12 @@ export default class Attendance extends React.Component {
];
const topTab = [
];
];
const renderSearchOperationItem = () => {
return <div>
<Button type="primary" style={{ marginRight: '10px' }} onClick={() => { this.setState({ slideVisiable: true }) }}>引用</Button>
<Button type="default" onClick={() => { this.setState({ slideVisiable: true }) }}>导入</Button>
<Button type="default" onClick={() => { this.setState({ modalVisiable: true }) }}>导入</Button>
</div>
}
@ -73,6 +79,43 @@ export default class Attendance extends React.Component {
/>
}
const renderHeaderSetCompoent = () => {
return (
<HeaderSet onSetClick={() => this.setState({
selectItemVisible: true
})}/>
)
}
const renderFormComponent = () => {
return (
<Row>
<Col span={12}>
<span className="formLabel" style={{ lineHeight: "30px", marginRight: "10px" }}>薪资所属月：</span>
<WeaDatePicker
format="yyyy-MM"
/>
</Col>
<Col span={12}>
<span className="formLabel" style={{ lineHeight: "30px", marginRight: "10px" }}>薪资账套：</span>
<WeaSelect
showSearch // 设置select可搜索
style={{ width: 200, display: "inline-block" }}
/>
</Col>
<Col span={12}>
<span className="formLabel" style={{ lineHeight: "30px", marginRight: "10px" }}>薪资周期：</span>
2022-03-01 ~ 2022-03-31
</Col>
<Col span={12}>
<span className="formLabel" style={{ lineHeight: "30px", marginRight: "10px" }}>考勤周期：</span>
2022-03-01 ~ 2022-03-31
</Col>
</Row>
)
}
return (
<div className="mySalaryBenefitsWrapper">
<WeaRightMenu
@ -101,7 +144,29 @@ export default class Attendance extends React.Component {
<WeaTable columns={columns} dataSource={dataSource}/>
</WeaTop>
</WeaRightMenu>
<ImportModal
params={this.state.modalParam}
columns={columns}
step={step}
setStep={setStep}
slideDataSource={dataSource}
importResult={{}}
onFinish={() => {}}
previewImport={(params) => {}}
importFile={(params) => {}}
headerSetCompoent={renderHeaderSetCompoent()}
templateLink={"/api/bs/hrmsalary/addUpDeduction/downloadTemplate"}
renderFormComponent={() => renderFormComponent()}
visiable={this.state.modalVisiable}
onCancel={() => { this.setState({modalVisiable: false})}}
/>
<SelectItemModal visible={this.state.selectItemVisible} onCancel={() => this.setState({selectItemVisible: false})}/>
</div>
)
}
}

71
pc4mobx/hrmSalary/stores/attendanceStore.js Normal file
View File

@ -0,0 +1,71 @@
import { observable, action, toJS } from 'mobx';
import { message } from 'antd';
import { WeaForm, WeaTableNew } from 'comsMobx';
import * as API from '../apis'; // 引入API接口文件
const { TableStore } = WeaTableNew;
export class AttendanceStore {
@observable tableStore = new TableStore(); // new table
@observable form = new WeaForm(); // nrew 一个form
@observable condition = []; // 存储后台得到的form数据
@observable hasRight = true; // 判断用户是有权限查看当前页面： 没有权限渲染无权限页面，有权限渲染数据
@observable showSearchAd = false; // 高级搜索面板显示
@observable loading = true; // 数据加载状态
@observable step = 0 ;
@observable modalVisiable = false;
@action
setStep = step => this.step = step
@action
setModalVisiable = modalVisiable => this.modalVisiable = modalVisiable
// 初始化操作
@action
doInit = () => {
this.getCondition();
this.getTableDatas();
}
// 获得高级搜索表单数据
@action
getCondition = () => {
API.getCondition().then(action(res => {
if (res.api_status) { // 接口请求成功/失败处理
this.condition = res.condition;
this.form.initFormFields(res.condition); // 渲染高级搜索form表单
} else {
message.error(res.msg || '接口调用失败！')
}
}));
}
// 渲染table数据
@action
getTableDatas = (params) => {
this.loading = true;
const formParams = this.form.getFormParams() || {};
params = params || formParams;
API.getTableDatas(params).then(action(res => {
if (res.api_status) { // 接口请求成功/失败处理
this.tableStore.getDatas(res.datas); // table 请求数据
this.hasRight = res.hasRight;
} else {
message.error(res.msg || '接口调用失败！')
}
this.loading = false;
}));
}
@action
setShowSearchAd = bool => this.showSearchAd = bool;
// 高级搜索 - 搜索
@action doSearch = () => {
this.getTableDatas();
this.showSearchAd = false;
}
}

4
pc4mobx/hrmSalary/stores/index.js
View File

@ -8,6 +8,7 @@ import { CumDeductStore } from "./cumDeduct"
import { OtherDeductStore } from "./otherDeduct"
import { CumSituationStore } from './cumSituation'
import { ProgrammeStore } from './programme'
import { AttendanceStore } from './attendanceStore';
module.exports = {
baseFormStore: new BaseFormStore(),
@ -18,6 +19,7 @@ module.exports = {
cumDeductStore: new CumDeductStore(),
otherDeductStore: new OtherDeductStore(),
cumSituationStore: new CumSituationStore(),
programmeStore: new ProgrammeStore()
programmeStore: new ProgrammeStore(),
attendanceStore: new AttendanceStore()
};