From df7c8b943f4a34d0d5ccf4d6aab0b0c70a362293 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=8E=E6=B0=B8=E9=A1=BA?= <971387674@qq.com> Date: Fri, 24 Feb 2023 11:05:52 +0800 Subject: [PATCH] =?UTF-8?q?=E8=80=83=E5=8B=A4=E5=BC=95=E7=94=A8=E9=A1=B5?= =?UTF-8?q?=E9=9D=A2=E9=87=8D=E6=9E=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/attendanceDataComp.js | 94 +++++++++++++++++++ .../attendance/components/fieldMangComp.js | 93 ++++++++++++++++++ .../pages/dataAcquisition/attendance/index.js | 90 +++++++++++++++++- .../dataAcquisition/attendance/index.less | 67 +++++++++---- 4 files changed, 325 insertions(+), 19 deletions(-) create mode 100644 pc4mobx/hrmSalary/pages/dataAcquisition/attendance/components/attendanceDataComp.js create mode 100644 pc4mobx/hrmSalary/pages/dataAcquisition/attendance/components/fieldMangComp.js diff --git a/pc4mobx/hrmSalary/pages/dataAcquisition/attendance/components/attendanceDataComp.js b/pc4mobx/hrmSalary/pages/dataAcquisition/attendance/components/attendanceDataComp.js new file mode 100644 index 00000000..89b28cdf --- /dev/null +++ b/pc4mobx/hrmSalary/pages/dataAcquisition/attendance/components/attendanceDataComp.js @@ -0,0 +1,94 @@ +/* + * Author: 黎永顺 + * name: 考勤数据 + * Description: + * Date: 2023/2/24 + */ +import React, { Component } from "react"; +import { WeaTable } from "ecCom"; +import { getAttendanceList } from "../../../../apis/attendance"; + +class AttendanceDataComp extends Component { + constructor(props) { + super(props); + this.state = { + loading: { + query: false + }, + dataSource: [], + columns: [], + pageInfo: { + current: 1, + pageSize: 10, + total: 0 + } + }; + } + + componentDidMount() { + this.getAttendanceList(); + } + + getAttendanceList = (extraPayload) => { + const { loading, pageInfo } = this.state; + const module = { ...pageInfo, ...extraPayload }; + this.setState({ loading: { ...loading, query: true } }); + getAttendanceList(module).then(({ status, data }) => { + this.setState({ loading: { ...loading, query: false } }); + if (status) { + const { columns, list: dataSource, pageNum: current, pageSize, total } = data; + this.setState({ + pageInfo: { ...pageInfo, current, pageSize, total }, + dataSource, + columns + }); + } + }).catch(() => this.setState({ loading: { ...loading, query: false } })); + }; + + render() { + const { dataSource, columns, pageInfo, loading } = this.state; + const { showOperateBtn, salaryYearMonth } = this.props; + const pagination = { + ...pageInfo, + showTotal: total => `共 ${total} 条`, + showQuickJumper: true, + pageSizeOptions: ["10", "20", "50", "100"], + onShowSizeChange: (current, pageSize) => { + this.setState({ + pageInfo: { ...pageInfo, current, pageSize } + }, () => this.getAttendanceList({ salaryYearMonth: _.compact(salaryYearMonth) })); + }, + onChange: current => { + this.setState({ + pageInfo: { ...pageInfo, current } + }, () => this.getAttendanceList({ salaryYearMonth: _.compact(salaryYearMonth) })); + } + }; + return ( + { + return ( +
+ 查看 + {showOperateBtn && 删除} +
+ ); + } + } + ]} + dataSource={dataSource} + pagination={pagination} + loading={loading.query} + /> + ); + } +} + +export default AttendanceDataComp; diff --git a/pc4mobx/hrmSalary/pages/dataAcquisition/attendance/components/fieldMangComp.js b/pc4mobx/hrmSalary/pages/dataAcquisition/attendance/components/fieldMangComp.js new file mode 100644 index 00000000..aee44170 --- /dev/null +++ b/pc4mobx/hrmSalary/pages/dataAcquisition/attendance/components/fieldMangComp.js @@ -0,0 +1,93 @@ +/* + * Author: 黎永顺 + * name:字段管理 + * Description: + * Date: 2023/2/24 + */ +import React, { Component } from "react"; +import { Col, Row } from "antd"; +import { WeaTable } from "ecCom"; +import { getAttendanceFieldList } from "../../../../apis/attendance"; +import TipLabel from "../../../../components/TipLabel"; + +class FieldMangComp extends Component { + constructor(props) { + super(props); + this.state = { + loading: { + query: false + }, + dataSource: [], + columns: [], + pageInfo: { + current: 1, + pageSize: 10, + total: 0 + } + }; + } + + componentDidMount() { + this.getAttendanceFieldList(); + } + + getAttendanceFieldList = (extraPayload) => { + const { loading, pageInfo } = this.state; + const module = { ...pageInfo, ...extraPayload }; + this.setState({ loading: { ...loading, query: true } }); + getAttendanceFieldList(module).then(({ status, data }) => { + this.setState({ loading: { ...loading, query: false } }); + if (status) { + const { columns, list: dataSource, pageNum: current, pageSize, total } = data; + this.setState({ + pageInfo: { ...pageInfo, current, pageSize, total }, + dataSource, + columns + }); + } + }).catch(() => this.setState({ loading: { ...loading, query: false } })); + }; + + render() { + const { dataSource, columns, pageInfo, loading } = this.state; + const { fieldName } = this.props; + const pagination = { + ...pageInfo, + showTotal: total => `共 ${total} 条`, + showQuickJumper: true, + pageSizeOptions: ["10", "20", "50", "100"], + onShowSizeChange: (current, pageSize) => { + this.setState({ + pageInfo: { ...pageInfo, current, pageSize } + }, () => this.getAttendanceFieldList({ fieldName })); + }, + onChange: current => { + this.setState({ + pageInfo: { ...pageInfo, current } + }, () => this.getAttendanceFieldList({ fieldName })); + } + }; + return ( + + + + + + + + + ); + } +} + +export default FieldMangComp; diff --git a/pc4mobx/hrmSalary/pages/dataAcquisition/attendance/index.js b/pc4mobx/hrmSalary/pages/dataAcquisition/attendance/index.js index 89b59ff0..4961b36b 100644 --- a/pc4mobx/hrmSalary/pages/dataAcquisition/attendance/index.js +++ b/pc4mobx/hrmSalary/pages/dataAcquisition/attendance/index.js @@ -5,12 +5,96 @@ * 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("attendanceStore", "taxAgentStore") +@observer class Index extends Component { - render() { - return ( -
+ 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 + { + return current && value2 && current.getTime() > new Date(value2).getTime(); + }} + onChange={(val) => this.handleChangeSalaryMonth([val ? moment(val).format("YYYY-MM") : "", value2])} + /> + 至 + { + return current && value1 && current.getTime() < new Date(value1).getTime(); + }} + onChange={(val) => this.handleChangeSalaryMonth([value1, val ? moment(val).format("YYYY-MM") : ""])} + /> + ; + }; + handleChangeSalaryMonth = (salaryMonth) => this.setState({ salaryMonth }, () => this.attendanceTableRef.getAttendanceList({ salaryYearMonth: _.compact(this.state.salaryMonth) })); + + render() { + const { selectedKey, salaryMonth, fieldName } = this.state; + const { taxAgentStore: { showOperateBtn } } = this.props; + const topTab = [ + { title: "考勤数据", viewcondition: "DATA" }, + { title: "字段管理", viewcondition: "FIELD" } + ]; + const buttons = selectedKey === "DATA" ? [ + , + + ] : []; + return ( +
+ this.setState({ selectedKey: v })} + searchsBaseValue={fieldName} onSearchChange={fieldName => this.setState({ fieldName })} + onSearch={() => this.fieldMangRef.getAttendanceFieldList({ fieldName })} + /> + { + selectedKey === "DATA" && this.getAttendanceDataScreen() + } +
+ + { + selectedKey === "DATA" ? + this.attendanceTableRef = dom} + showOperateBtn={showOperateBtn} + salaryYearMonth={salaryMonth} + /> : + this.fieldMangRef = dom} + fieldName={fieldName} + /> + } + +
); } diff --git a/pc4mobx/hrmSalary/pages/dataAcquisition/attendance/index.less b/pc4mobx/hrmSalary/pages/dataAcquisition/attendance/index.less index 3bbe0224..6e4af33c 100644 --- a/pc4mobx/hrmSalary/pages/dataAcquisition/attendance/index.less +++ b/pc4mobx/hrmSalary/pages/dataAcquisition/attendance/index.less @@ -1,33 +1,66 @@ -.attendenceImportWrapper{ - .wea-dialog-body{ +.attendanceRefWrapper { + height: 100%; + display: flex; + flex-direction: column; + + .wea-form-item { + padding: 8px 16px; + + .to { + padding: 0 10px + } + } + + .tableWrapper { + flex: 1; + overflow: hidden; + } + + .linkWapper { + & > a:first-child { + padding-right: 10px; + } + } +} + + +.attendenceImportWrapper { + .wea-dialog-body { padding: 16px 120px; - .wea-select, .ant-select, .ant-select-selection{ + + .wea-select, .ant-select, .ant-select-selection { width: 100%; } - .ant-select-selection{ + + .ant-select-selection { border-radius: 0; height: 30px; } } } + //导入字段设置 -.fieldSetWrapper{ - .wea-dialog-body{ +.fieldSetWrapper { + .wea-dialog-body { padding: 16px 20px; } - .ant-modal-footer button{ - margin-right: 0!important; + + .ant-modal-footer button { + margin-right: 0 !important; } - .ant-btn-group{ - margin-left: 10px!important; + + .ant-btn-group { + margin-left: 10px !important; } - .searchWrapper{ + + .searchWrapper { display: flex; justify-content: flex-end; align-items: center; margin-bottom: 10px; } - .allInWrapper{ + + .allInWrapper { display: flex; justify-content: flex-start; margin-top: 10px; @@ -35,15 +68,17 @@ } //新建考勤自定义字段弹框 -.itemManageModalWrapper{ - .wea-select,.ant-select-selection,.ant-select{ +.itemManageModalWrapper { + .wea-select, .ant-select-selection, .ant-select { width: 100%; } - .wea-select{ + + .wea-select { display: inline-block; position: relative; } - .ant-select-selection{ + + .ant-select-selection { height: 30px; border-radius: 0; }