数据采集-考勤引用页面重构
This commit is contained in:
parent
10721ecba0
commit
7907fd5a83
|
|
@ -107,7 +107,8 @@ export default class ImportModal extends React.Component {
|
|||
localStorage.removeItem("fileList");
|
||||
this.props.onCancel();
|
||||
}}
|
||||
style={{ width: 850 }}
|
||||
style={{ width: 850, height: 600 }}
|
||||
hasScroll
|
||||
className="importModalWrapper"
|
||||
initLoadCss
|
||||
buttons={
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
.importModalWrapper {
|
||||
.wea-dialog-body {
|
||||
height: 80vh;
|
||||
overflow: hidden auto;
|
||||
.ant-modal-body {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -68,7 +68,44 @@ export const columns = [
|
|||
}
|
||||
}
|
||||
];
|
||||
|
||||
export const fieldsColumns = [
|
||||
{
|
||||
title: "id",
|
||||
dataIndex: "id",
|
||||
key: "id",
|
||||
display: true
|
||||
},
|
||||
{
|
||||
title: "字段名称",
|
||||
dataIndex: "fieldName",
|
||||
key: "fieldName",
|
||||
display: true
|
||||
},
|
||||
{
|
||||
title: "来源",
|
||||
dataIndex: "sourceType",
|
||||
key: "sourceType",
|
||||
display: true
|
||||
},
|
||||
{
|
||||
title: "类型",
|
||||
dataIndex: "fieldType",
|
||||
key: "fieldType",
|
||||
display: true
|
||||
},
|
||||
{
|
||||
title: "是否启用",
|
||||
dataIndex: "enableStatus",
|
||||
key: "enableStatus",
|
||||
display: true
|
||||
},
|
||||
{
|
||||
title: "备注",
|
||||
dataIndex: "description",
|
||||
key: "description",
|
||||
display: true
|
||||
}
|
||||
];
|
||||
export const conditions = [
|
||||
{
|
||||
items: [
|
||||
|
|
|
|||
|
|
@ -7,7 +7,15 @@
|
|||
import React, { Component } from "react";
|
||||
import { WeaTable } from "ecCom";
|
||||
import { message, Modal } from "antd";
|
||||
import { deleteAttendance, getAttendanceList } from "../../../../apis/attendance";
|
||||
import {
|
||||
deleteAttendance,
|
||||
getAttendanceList,
|
||||
getLedgerList,
|
||||
getSalaryCycleAndAttendCycle
|
||||
} from "../../../../apis/attendance";
|
||||
import ImportModal from "../../../../components/importModal";
|
||||
import HeaderSet from "../../../../components/importModal/headerSet";
|
||||
import ImportFormOptions from "./importFormOptions";
|
||||
import moment from "moment";
|
||||
|
||||
class AttendanceDataComp extends Component {
|
||||
|
|
@ -23,6 +31,14 @@ class AttendanceDataComp extends Component {
|
|||
current: 1,
|
||||
pageSize: 10,
|
||||
total: 0
|
||||
},
|
||||
importData: {
|
||||
visiable: false, params: {}, step: 0,
|
||||
columns: [], slideDataSource: [], importResult: []
|
||||
},
|
||||
importFormPayload: {
|
||||
salaryYearMonth: moment().format("YYYY-MM"), salarySobList: [],
|
||||
salarySobId: "", salaryCycle: "", attendCycle: ""
|
||||
}
|
||||
};
|
||||
}
|
||||
|
|
@ -55,6 +71,45 @@ class AttendanceDataComp extends Component {
|
|||
}
|
||||
}).catch(() => this.setState({ loading: { ...loading, query: false } }));
|
||||
};
|
||||
getLedgerList = () => {
|
||||
const { importFormPayload } = this.state;
|
||||
getLedgerList().then(({ status, data }) => {
|
||||
if (status) {
|
||||
this.setState({
|
||||
importFormPayload: {
|
||||
...importFormPayload,
|
||||
salarySobList: _.map(data, it => ({ key: it.id, showname: it.content }))
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
handleChangeImportPayload = (key, value) => {
|
||||
const { importFormPayload } = this.state;
|
||||
this.setState({
|
||||
importFormPayload: {
|
||||
...importFormPayload,
|
||||
[key]: value
|
||||
}
|
||||
}, () => {
|
||||
if (this.state.importFormPayload.salaryYearMonth && this.state.importFormPayload.salarySobId) {
|
||||
const payload = {
|
||||
salaryYearMonthStr: this.state.importFormPayload.salaryYearMonth,
|
||||
salarySobId: this.state.importFormPayload.salarySobId
|
||||
};
|
||||
getSalaryCycleAndAttendCycle(payload).then(({ status, data }) => {
|
||||
if (status) {
|
||||
this.setState({
|
||||
importFormPayload: {
|
||||
...this.state.importFormPayload,
|
||||
...data
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
handleDeleteAttendanceData = ({ id }) => {
|
||||
Modal.confirm({
|
||||
title: "信息确认",
|
||||
|
|
@ -71,9 +126,33 @@ class AttendanceDataComp extends Component {
|
|||
}
|
||||
});
|
||||
};
|
||||
handleImportAttendanceData = (importData) => {
|
||||
this.getLedgerList();
|
||||
this.setState({ importData });
|
||||
};
|
||||
setStep = step => this.setState({ importData: { ...this.state.importData, step } });
|
||||
handleFinish = () => {
|
||||
console.log("finish");
|
||||
};
|
||||
handlePreviewImport = (params) => {
|
||||
console.log("handlePreviewImport", params);
|
||||
};
|
||||
handleImport = (params) => {
|
||||
console.log("handleImport", params);
|
||||
};
|
||||
handleTemplateLinkClick = () => {
|
||||
const { importFormPayload } = this.state;
|
||||
const { salarySobId, salaryYearMonth } = importFormPayload;
|
||||
if (!salarySobId || !salaryYearMonth) {
|
||||
message.warning("请完善导入选项,再下载");
|
||||
return;
|
||||
}
|
||||
// const { attendanceStore: { downloadTemplate } } = this.props;
|
||||
// downloadTemplate(salaryYearMonth, salarySobId);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { dataSource, columns, pageInfo, loading } = this.state;
|
||||
const { dataSource, columns, pageInfo, loading, importData, importFormPayload } = this.state;
|
||||
const { showOperateBtn, salaryYearMonth } = this.props;
|
||||
const pagination = {
|
||||
...pageInfo,
|
||||
|
|
@ -93,29 +172,49 @@ class AttendanceDataComp extends Component {
|
|||
}
|
||||
};
|
||||
return (
|
||||
<WeaTable
|
||||
columns={[
|
||||
...columns,
|
||||
{
|
||||
title: "操作",
|
||||
width: 120,
|
||||
dataIndex: "operate",
|
||||
render: (_, record) => {
|
||||
return (
|
||||
<div className="linkWapper">
|
||||
<a href="javascript: void(0);">查看</a>
|
||||
{showOperateBtn &&
|
||||
<a href="javascript: void(0);" onClick={() => this.handleDeleteAttendanceData(record)}>删除</a>
|
||||
}
|
||||
</div>
|
||||
);
|
||||
<React.Fragment>
|
||||
<WeaTable
|
||||
columns={[
|
||||
...columns,
|
||||
{
|
||||
title: "操作",
|
||||
width: 120,
|
||||
dataIndex: "operate",
|
||||
render: (_, record) => {
|
||||
return (
|
||||
<div className="linkWapper">
|
||||
<a href="javascript: void(0);">查看</a>
|
||||
{showOperateBtn &&
|
||||
<a href="javascript: void(0);" onClick={() => this.handleDeleteAttendanceData(record)}>删除</a>
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
]}
|
||||
dataSource={dataSource}
|
||||
pagination={pagination}
|
||||
loading={loading.query}
|
||||
/>
|
||||
]}
|
||||
dataSource={dataSource}
|
||||
pagination={pagination}
|
||||
loading={loading.query}
|
||||
/>
|
||||
{/* 考勤引用导入 */}
|
||||
<ImportModal {...importData} setStep={this.setStep} onFinish={this.handleFinish}
|
||||
previewImport={this.handlePreviewImport} importFile={this.handleImport}
|
||||
templateLink={this.handleTemplateLinkClick} onCancel={this.handleFinish}
|
||||
headerSetCompoent={<HeaderSet
|
||||
onSetClick={() => {
|
||||
// getAttendanceFieldSettingList({ sourceType: "IMPORT" });
|
||||
// this.setState({
|
||||
// selectItemVisible: true
|
||||
// });
|
||||
}}
|
||||
/>}
|
||||
renderFormComponent={
|
||||
() => <ImportFormOptions
|
||||
{...importFormPayload}
|
||||
onChangeImportForm={this.handleChangeImportPayload}/>
|
||||
}
|
||||
/>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ import { Col, message, Row } from "antd";
|
|||
import AttendanceCustomFieldsModal from "./attendanceCustomFieldsModal";
|
||||
import { getAttendanceFieldList, updateAttendanceFieldStatus } from "../../../../apis/attendance";
|
||||
import TipLabel from "../../../../components/TipLabel";
|
||||
import { fieldsColumns } from "../columns";
|
||||
|
||||
class FieldMangComp extends Component {
|
||||
constructor(props) {
|
||||
|
|
@ -18,8 +19,8 @@ class FieldMangComp extends Component {
|
|||
loading: {
|
||||
query: false
|
||||
},
|
||||
dataSource: [],
|
||||
columns: [],
|
||||
dataSource: [{}],
|
||||
columns: fieldsColumns,
|
||||
pageInfo: {
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,57 @@
|
|||
/*
|
||||
* Author: 黎永顺
|
||||
* name: 考情数据导入的,表单选项
|
||||
* Description:
|
||||
* Date: 2023/3/3
|
||||
*/
|
||||
import React, { Component } from "react";
|
||||
import { WeaFormItem, WeaInput, WeaSearchGroup } from "ecCom";
|
||||
import { DataCollectionDatePicker, DataCollectionSelect } from "../../cumDeduct";
|
||||
import "./index.less";
|
||||
|
||||
const Input = (label, value, labelCol = 8, wrapperCol = 16) => {
|
||||
return (
|
||||
<WeaFormItem label={label} labelCol={{ span: labelCol }} wrapperCol={{ span: wrapperCol }}>
|
||||
<WeaInput viewAttr={1} value={value}/>
|
||||
</WeaFormItem>
|
||||
);
|
||||
};
|
||||
|
||||
class ImportFormOptions extends Component {
|
||||
screenChange = ({ key, value }) => {
|
||||
const { onChangeImportForm } = this.props;
|
||||
onChangeImportForm(key, value);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { salarySobList = [], salaryYearMonth, salarySobId, salaryCycle, attendCycle } = this.props;
|
||||
const items = [
|
||||
{
|
||||
com: DataCollectionDatePicker({
|
||||
label: "薪资所属月",
|
||||
value: salaryYearMonth,
|
||||
onChange: this.screenChange,
|
||||
key: "salaryYearMonth",
|
||||
screen: false
|
||||
})
|
||||
},
|
||||
{
|
||||
com: DataCollectionSelect({
|
||||
label: "薪资账套",
|
||||
value: salarySobId || "",
|
||||
onChange: this.screenChange,
|
||||
options: [{ key: "", showname: "" }, ...salarySobList],
|
||||
key: "salarySobId"
|
||||
})
|
||||
},
|
||||
{ com: Input("薪资周期", salaryCycle) },
|
||||
{ com: Input("考勤周期", attendCycle, 10, 14) }
|
||||
];
|
||||
return (
|
||||
<WeaSearchGroup className="attendanceFormWrapper" showGroup needTigger={false} items={items}
|
||||
col={2}/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default ImportFormOptions;
|
||||
|
|
@ -13,3 +13,7 @@
|
|||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.attendanceFormWrapper {
|
||||
padding: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -56,6 +56,12 @@ class Index extends Component {
|
|||
};
|
||||
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: []
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
const { selectedKey, salaryMonth, fieldName } = this.state;
|
||||
|
|
@ -66,7 +72,7 @@ class Index extends Component {
|
|||
];
|
||||
const buttons = selectedKey === "DATA" ? [
|
||||
<Button type="primary">引用</Button>,
|
||||
<Button type="ghost">导入</Button>
|
||||
<Button type="ghost" onClick={this.handleImportAttendanceData}>导入</Button>
|
||||
] : [<Button type="primary" onClick={this.handleAddAttendFileds}>新建</Button>];
|
||||
return (
|
||||
<div className="attendanceRefWrapper">
|
||||
|
|
|
|||
|
|
@ -204,8 +204,8 @@ export default class Programme extends React.Component {
|
|||
insuranceName: record["insuranceName"],
|
||||
id: record.id,
|
||||
isUse: record.isUse,
|
||||
paymentScope: record["payment_scope"].split(",").map(item => paymentScopeEnum[item]).join(","),
|
||||
welfareType: welfareTypeEnum[record.welfare_type]
|
||||
paymentScope: record["paymentScope"].split(",").map(item => paymentScopeEnum[item]).join(","),
|
||||
welfareType: welfareTypeEnum[record.welfareType]
|
||||
});
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue