薪资账套页面重构

pc4mobx/hrmSalary/pages/ledgerPage/components/ledgerTable.js

@@ -5,7 +5,7 @@
  * Date: 2022/12/7
  */
 import React, { Component } from "react";
-import { WeaTable } from "ecCom";
+import { WeaCheckbox, WeaTable } from "ecCom";
 import { getLedgerList } from "../../../apis/ledger";
 
 class LedgerTable extends Component {
@@ -33,9 +33,26 @@ class LedgerTable extends Component {
     const payload = { name, ...pageInfo };
     this.setState({ loading: true });
     getLedgerList(payload).then(({ status, data }) => {
-      this.setState({ loading: true });
+      this.setState({ loading: false });
       if (status) {
-        console.log(data);
+        const { pageNum: current, pageSize, total, columns, list: dataSource } = data;
+        this.setState({
+          pageInfo: { ...pageInfo, current, pageSize, total },
+          dataSource,
+          columns: _.map(columns, item => {
+            const { dataIndex } = item;
+            if (dataIndex === "disable") {
+              item.render = (text) => {
+                return <WeaCheckbox value={text === 0 ? "1" : "0"} display="switch"/>;
+              };
+            } else {
+              item.render = (text) => {
+                return <span className="tdEllipsis" title={text}>{text}</span>;
+              };
+            }
+            return { ...item };
+          })
+        });
       }
     });
   };
@@ -49,12 +66,15 @@ class LedgerTable extends Component {
       showSizeChanger: true,
       pageSizeOptions: ["10", "20", "50", "100"],
       onShowSizeChange: (current, pageSize) => {
-        this.setState({ pageInfo: { ...pageInfo, current, pageSize } });
+        this.setState({ pageInfo: { ...pageInfo, current, pageSize } }, () => {
+          this.getLedgerList();
+        });
       },
       onChange: current => {
         this.setState({
           pageInfo: { ...pageInfo, current }
         }, () => {
+          this.getLedgerList();
         });
       }
     };

pc4mobx/hrmSalary/pages/ledgerPage/index.less

@@ -1,3 +1,11 @@
 .ledgerWrapper {
   height: 100%;
+
+  .tdEllipsis {
+    display: inline-block;
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 }