薪资账套页面页面重构

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

@@ -0,0 +1,73 @@
+/*
+ * Author: 黎永顺
+ * name: 薪资账套列表
+ * Description:
+ * Date: 2022/12/7
+ */
+import React, { Component } from "react";
+import { WeaTable } from "ecCom";
+import { getLedgerList } from "../../../apis/ledger";
+
+class LedgerTable extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      loading: false,
+      dataSource: [],
+      columns: [],
+      pageInfo: {
+        current: 1,
+        pageSize: 10,
+        total: 0
+      }
+    };
+  }
+
+  componentDidMount() {
+    this.getLedgerList();
+  }
+
+  getLedgerList = () => {
+    const { name } = this.props;
+    const { pageInfo } = this.state;
+    const payload = { name, ...pageInfo };
+    this.setState({ loading: true });
+    getLedgerList(payload).then(({ status, data }) => {
+      this.setState({ loading: true });
+      if (status) {
+        console.log(data);
+      }
+    });
+  };
+
+  render() {
+    const { dataSource, columns, pageInfo, loading } = this.state;
+    const pagination = {
+      ...pageInfo,
+      showTotal: total => `共 ${total} 条`,
+      showQuickJumper: true,
+      showSizeChanger: true,
+      pageSizeOptions: ["10", "20", "50", "100"],
+      onShowSizeChange: (current, pageSize) => {
+        this.setState({ pageInfo: { ...pageInfo, current, pageSize } });
+      },
+      onChange: current => {
+        this.setState({
+          pageInfo: { ...pageInfo, current }
+        }, () => {
+        });
+      }
+    };
+    return (
+      <WeaTable
+        rowKey="id"
+        dataSource={dataSource}
+        pagination={pagination}
+        loading={loading}
+        columns={columns}
+      />
+    );
+  }
+}
+
+export default LedgerTable;

pc4mobx/hrmSalary/pages/ledgerPage/index.js

@@ -5,13 +5,41 @@
  * Date: 2022/12/6
  */
 import React, { Component } from "react";
+import { WeaInputSearch, WeaTop } from "ecCom";
+import { Button } from "antd";
+import LedgerTable from "./components/ledgerTable";
 
 class Index extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      searchVal: ""
+    };
+    this.ledgerTableRef = null;
+  }
+
   render() {
+    const { searchVal } = this.state;
+    const btns = [
+      <Button type="primary">新建</Button>,
+      <WeaInputSearch
+        value={searchVal} placeholder="请输入薪资账套名称"
+        onChange={searchVal => this.setState({ searchVal })}
+        onSearch={() => this.ledgerTableRef.getLedgerList()}
+      />
+    ];
     return (
-      <div>
-薪资账套
-      </div>
+      <WeaTop
+        title="薪资账套"
+        icon={<i className="icon-coms-fa"/>}
+        iconBgcolor="#F14A2D"
+        showDropIcon={false}
+        buttons={btns}
+      >
+        <div className="ledgerWrapper">
+          <LedgerTable name={searchVal} ref={dom => this.ledgerTableRef = dom}/>
+        </div>
+      </WeaTop>
     );
   }
 }

pc4mobx/hrmSalary/pages/ledgerPage/index.less

@@ -0,0 +1,3 @@
+.ledgerWrapper {
+  height: 100%;
+}