考勤引用页面重构

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 (
+      <WeaTable
+        columns={[
+          ...columns,
+          {
+            title: "操作",
+            width: 120,
+            dataIndex: "operate",
+            render: (text, record) => {
+              return (
+                <div className="linkWapper">
+                  <a href="javascript: void(0);">查看</a>
+                  {showOperateBtn && <a href="javascript: void(0);">删除</a>}
+                </div>
+              );
+            }
+          }
+        ]}
+        dataSource={dataSource}
+        pagination={pagination}
+        loading={loading.query}
+      />
+    );
+  }
+}
+
+export default AttendanceDataComp;

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 (
+      <Row gutter={20}>
+        <Col xs={24} sm={24} md={16} lg={18}>
+          <WeaTable
+            columns={columns}
+            dataSource={dataSource}
+            pagination={pagination}
+            loading={loading.query}
+          />
+        </Col>
+        <Col xs={24} sm={24} md={8} lg={6}>
+          <TipLabel
+            tipList={[
+              "1、考勤字段包含自定义字段和考勤模块的统计字段，所有字段不可重名；",
+              "2、停用自定义字段将影响其参与计算的账套核算；"
+            ]}
+          />
+        </Col>
+      </Row>
+    );
+  }
+}
+
+export default FieldMangComp;

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 (
-      <div>
+  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) }));
+
+  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">引用</Button>,
+      <Button type="ghost">导入</Button>
+    ] : [<Button type="primary">新建</Button>];
+    return (
+      <div className="attendanceRefWrapper">
+        <WeaTab
+          datas={topTab} keyParam="viewcondition" selectedKey={selectedKey} buttons={buttons}
+          searchType={selectedKey === "FIELD" ? ["base"] : []} searchsBasePlaceHolder="请输入字段名称"
+          onChange={v => this.setState({ selectedKey: v })}
+          searchsBaseValue={fieldName} onSearchChange={fieldName => this.setState({ fieldName })}
+          onSearch={() => this.fieldMangRef.getAttendanceFieldList({ fieldName })}
+        />
+        {
+          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}
+                  fieldName={fieldName}
+                />
+            }
+          </WeaNewScroll>
+        </div>
       </div>
     );
   }

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