考勤引用模块页面重构

pc4mobx/hrmSalary/pages/dataAcquisition/attendance/components/attendanceDataComp.js

@@ -6,7 +6,9 @@
  */
 import React, { Component } from "react";
 import { WeaTable } from "ecCom";
-import { getAttendanceList } from "../../../../apis/attendance";
+import { message, Modal } from "antd";
+import { deleteAttendance, getAttendanceList } from "../../../../apis/attendance";
+import moment from "moment";
 
 class AttendanceDataComp extends Component {
   constructor(props) {
@@ -40,11 +42,35 @@ class AttendanceDataComp extends Component {
         this.setState({
           pageInfo: { ...pageInfo, current, pageSize, total },
           dataSource,
-          columns
+          columns: _.map(columns, item => {
+            if (item.dataIndex === "salaryYearMonth") {
+              return {
+                ...item,
+                render: (text) => <span>{moment(text).format("YYYY-MM")}</span>
+              };
+            }
+            return { ...item };
+          })
         });
       }
     }).catch(() => this.setState({ loading: { ...loading, query: false } }));
   };
+  handleDeleteAttendanceData = ({ id }) => {
+    Modal.confirm({
+      title: "信息确认",
+      content: "确认要删除吗?",
+      onOk: () => {
+        deleteAttendance([id]).then(({ status, errormsg }) => {
+          if (status) {
+            message.success("删除成功");
+            this.getAttendanceList();
+          } else {
+            message.error(errormsg || "删除失败");
+          }
+        });
+      }
+    });
+  };
 
   render() {
     const { dataSource, columns, pageInfo, loading } = this.state;
@@ -53,6 +79,7 @@ class AttendanceDataComp extends Component {
       ...pageInfo,
       showTotal: total => `共 ${total} 条`,
       showQuickJumper: true,
+      showSizeChanger: true,
       pageSizeOptions: ["10", "20", "50", "100"],
       onShowSizeChange: (current, pageSize) => {
         this.setState({
@@ -73,11 +100,13 @@ class AttendanceDataComp extends Component {
             title: "操作",
             width: 120,
             dataIndex: "operate",
-            render: (text, record) => {
+            render: (_, record) => {
               return (
                 <div className="linkWapper">
                   <a href="javascript: void(0);">查看</a>
-                  {showOperateBtn && <a href="javascript: void(0);">删除</a>}
+                  {showOperateBtn &&
+                    <a href="javascript: void(0);" onClick={() => this.handleDeleteAttendanceData(record)}>删除</a>
+                  }
                 </div>
               );
             }

pc4mobx/hrmSalary/pages/dataAcquisition/attendance/components/fieldMangComp.js

@@ -5,11 +5,10 @@
  * Date: 2023/2/24
  */
 import React, { Component } from "react";
-import { toJS } from "mobx";
 import { WeaCheckbox, WeaTable } from "ecCom";
-import { Col, Row } from "antd";
+import { Col, message, Row } from "antd";
 import AttendanceCustomFieldsModal from "./attendanceCustomFieldsModal";
-import { getAttendanceFieldList } from "../../../../apis/attendance";
+import { getAttendanceFieldList, updateAttendanceFieldStatus } from "../../../../apis/attendance";
 import TipLabel from "../../../../components/TipLabel";
 
 class FieldMangComp extends Component {
@@ -38,20 +37,17 @@ class FieldMangComp extends Component {
   }
 
   getAttendanceFieldList = (extraPayload = {}) => {
-    const { fieldTableStore } = this.props;
     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 { dataKey, pageInfo: pageInfoData } = data;
-        const { datas } = dataKey;
-        const { list: dataSource, pageNum: current, pageSize, total } = pageInfoData;
-        fieldTableStore.getDatas(datas);
+        const { pageInfo: pageInfoData } = data;
+        const { list: dataSource, columns, pageNum: current, pageSize, total } = pageInfoData;
         this.setState({
           pageInfo: { ...pageInfo, current, pageSize, total },
-          dataSource
+          dataSource, columns
         });
       }
     }).catch(() => this.setState({ loading: { ...loading, query: false } }));
@@ -60,9 +56,21 @@ class FieldMangComp extends Component {
     const { addPayload } = this.state;
     this.setState({ addPayload: { ...addPayload, visible: !addPayload.visible } });
   };
+  handleAttendanceFieldSwitch = ({ id }, enableStatus) => {
+    const payload = { id, enableStatus: enableStatus === "1" };
+    updateAttendanceFieldStatus(payload).then(({ status, errormsg }) => {
+      if (status) {
+        message.success("操作成功");
+        this.getAttendanceFieldList();
+      } else {
+        message.error(errormsg || "操作失败");
+      }
+    });
+  };
   getColumns = () => {
+    const { columns } = this.state;
     const { showOperateBtn } = this.props;
-    return _.map(_.filter(toJS(this.props.fieldTableStore.columns), item => !!item.hide), child => ({
+    return _.map(_.filter(columns, item => !!item.display), child => ({
       ...child,
       render: (text, record) => {
         switch (child.dataIndex) {
@@ -70,9 +78,7 @@ class FieldMangComp extends Component {
             return (
               <WeaCheckbox
                 value={text} display="switch" disabled={!showOperateBtn}
-                onChange={value => {
-                  console.log(record, value);
-                }}
+                onChange={value => this.handleAttendanceFieldSwitch(record, value)}
               />
             );
           default:

pc4mobx/hrmSalary/pages/dataAcquisition/attendance/index.js

@@ -15,7 +15,7 @@ import "./index.less";
 
 const { MonthPicker } = DatePicker;
 
-@inject("attendanceStore", "taxAgentStore")
+@inject("taxAgentStore")
 @observer
 class Index extends Component {
   constructor(props) {
@@ -59,7 +59,7 @@ class Index extends Component {
 
   render() {
     const { selectedKey, salaryMonth, fieldName } = this.state;
-    const { taxAgentStore: { showOperateBtn }, attendanceStore: { fieldTableStore } } = this.props;
+    const { taxAgentStore: { showOperateBtn } } = this.props;
     const topTab = [
       { title: "考勤数据", viewcondition: "DATA" },
       { title: "字段管理", viewcondition: "FIELD" }
@@ -91,7 +91,6 @@ class Index extends Component {
                 /> :
                 <FieldMangComp
                   ref={dom => this.fieldMangRef = dom}
-                  fieldTableStore={fieldTableStore}
                   showOperateBtn={showOperateBtn}
                   fieldName={fieldName}
                 />

pc4mobx/hrmSalary/stores/attendanceStore.js

@@ -1,9 +1,7 @@
 import { observable } from "mobx";
-import { WeaForm, WeaTableNew } from "comsMobx";
+import { WeaForm } from "comsMobx";
 
-const { TableStore } = WeaTableNew;
 
 export class AttendanceStore {
   @observable form = new WeaForm();
-  @observable fieldTableStore = new TableStore();
 }