salary-management-front/pc4mobx/hrmSalary/pages/dataAcquisition/attendance/index.js

117 lines
4.1 KiB
JavaScript

/*
* Author: 黎永顺
* name: 考情引用
* Description:
* Date: 2023/2/23
*/
import React, { Component } from "react";
import { inject, observer } from "mobx-react";
import { Button, DatePicker } from "antd";
import { WeaFormItem, WeaNewScroll, WeaTab } from "ecCom";
import AttendanceDataComp from "./components/attendanceDataComp";
import FieldMangComp from "./components/fieldMangComp";
import moment from "moment";
import "./index.less";
const { MonthPicker } = DatePicker;
@inject("taxAgentStore")
@observer
class Index extends Component {
constructor(props) {
super(props);
this.state = {
fieldName: "",
selectedKey: "DATA",
salaryMonth: []
};
}
/*
* Author: 黎永顺
* Description: 考勤数据删选条件
* Params:
* Date: 2023/2/24
*/
getAttendanceDataScreen = () => {
const { salaryMonth } = this.state;
const [value1 = "", value2 = ""] = salaryMonth;
return <WeaFormItem label="薪资所属月" labelCol={{ span: 2 }} wrapperCol={{ span: 22 }}>
<MonthPicker
value={value1} format="YYYY-MM"
disabledDate={(current) => {
return current && value2 && current.getTime() > new Date(value2).getTime();
}}
onChange={(val) => this.handleChangeSalaryMonth([val ? moment(val).format("YYYY-MM") : "", value2])}
/>
<span className="to"></span>
<MonthPicker
value={value2} format="YYYY-MM"
disabledDate={(current) => {
return current && value1 && current.getTime() < new Date(value1).getTime();
}}
onChange={(val) => this.handleChangeSalaryMonth([value1, val ? moment(val).format("YYYY-MM") : ""])}
/>
</WeaFormItem>;
};
handleChangeSalaryMonth = (salaryMonth) => this.setState({ salaryMonth }, () => this.attendanceTableRef.getAttendanceList({ salaryYearMonth: _.compact(this.state.salaryMonth) }));
handleAddAttendFileds = () => this.fieldMangRef.handleTriggerAttendFileds();
handleImportAttendanceData = () => {
this.attendanceTableRef.handleImportAttendanceData({
visiable: true, params: {}, step: 0,
columns: [], slideDataSource: [], importResult: []
});
};
handleQuoteAttendanceData = () => {
this.attendanceTableRef.handleQuoteAttendanceData({
visible: true, title: "引用考勤数据"
});
};
render() {
const { selectedKey, salaryMonth, fieldName } = this.state;
const { taxAgentStore: { showOperateBtn } } = this.props;
const topTab = [
{ title: "考勤数据", viewcondition: "DATA" },
{ title: "字段管理", viewcondition: "FIELD" }
];
const buttons = selectedKey === "DATA" ? [
<Button type="primary" onClick={this.handleQuoteAttendanceData}>引用</Button>,
<Button type="ghost" onClick={this.handleImportAttendanceData}>导入</Button>
] : [<Button type="primary" onClick={this.handleAddAttendFileds}>新建</Button>];
return (
<div className="attendanceRefWrapper">
<WeaTab
datas={topTab} keyParam="viewcondition" selectedKey={selectedKey} buttons={showOperateBtn ? buttons : []}
searchType={selectedKey === "FIELD" ? ["base"] : []} searchsBasePlaceHolder="请输入字段名称"
onChange={v => this.setState({ selectedKey: v })}
searchsBaseValue={fieldName} onSearchChange={fieldName => this.setState({ fieldName })}
onSearch={() => this.fieldMangRef.getAttendanceFieldList({ fieldName, current: 1 })}
/>
{
selectedKey === "DATA" && this.getAttendanceDataScreen()
}
<div className="tableWrapper">
<WeaNewScroll height="100%">
{
selectedKey === "DATA" ?
<AttendanceDataComp
ref={dom => this.attendanceTableRef = dom}
showOperateBtn={showOperateBtn}
salaryYearMonth={salaryMonth}
/> :
<FieldMangComp
ref={dom => this.fieldMangRef = dom}
showOperateBtn={showOperateBtn}
fieldName={fieldName}
/>
}
</WeaNewScroll>
</div>
</div>
);
}
}
export default Index;