数据采集-考勤引用页面重构

This commit is contained in:
黎永顺 2023-03-03 16:29:52 +08:00
parent 10721ecba0
commit 7907fd5a83
9 changed files with 237 additions and 34 deletions

View File

@ -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={

View File

@ -1,7 +1,5 @@
.importModalWrapper {
.wea-dialog-body {
height: 80vh;
overflow: hidden auto;
.ant-modal-body {
padding: 16px;
}

View File

@ -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: [

View File

@ -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>
);
}
}

View File

@ -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,

View File

@ -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;

View File

@ -13,3 +13,7 @@
border-radius: 0;
}
}
.attendanceFormWrapper {
padding: 0;
}

View File

@ -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">

View File

@ -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]
});
};