feature/2.9.42310.01-薪资核算页面重构

pc4mobx/hrmSalary/index.js

@@ -15,7 +15,8 @@ import CumSituation from "./pages/dataAcquisition/cumSituation";
 import Attendance from "./pages/dataAcquisition/attendance";
 import SpecialAddDeduction from "./pages/dataAcquisition/specialAddDeduction";
 import Ledger from "./pages/ledgerPage";
-import Calculate from "./pages/calculate";
+// import Calculate from "./pages/calculate";
+import Calculate from "./pages/calculate/calculate"; //重构的薪资核算页面
 import Payroll from "./pages/payroll";
 import PayrollGrant from "./pages/payroll/payrollGrant";
 import PayrollDetail from "./pages/payroll/payrollDetail";

pc4mobx/hrmSalary/pages/calculate/calculate.js

@@ -0,0 +1,59 @@
+/*
+ * Author: 黎永顺
+ * name: 薪资核算-重构页面
+ * Description:
+ * Date: 2023/10/9
+ */
+import React, { Component } from "react";
+import { inject, observer } from "mobx-react";
+import { WeaLocaleProvider, WeaTop } from "ecCom";
+import { Button } from "antd";
+import moment from "moment";
+import CalculateQuery from "./components/calculateQuery";
+import CalculateTablelist from "./components/calculateTablelist";
+import "./index.less";
+
+const getLabel = WeaLocaleProvider.getLabel;
+
+@inject("calculateStore", "taxAgentStore")
+@observer
+class Calculate extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      queryParams: {
+        name: "",
+        dateRange: [
+          moment(new Date()).startOf("year").format("YYYY-MM"),
+          moment(new Date()).startOf("month").format("YYYY-MM")
+        ]
+      }
+    };
+  }
+
+  renderCalculateOpts = () => {
+    const { taxAgentStore: { showOperateBtn } } = this.props;
+    const { queryParams } = this.state;
+    let calculateOpts = [
+      <Button type="primary">{getLabel(538780, "核算")}</Button>,
+      <CalculateQuery queryParams={queryParams} onSearch={() => {
+      }} onChange={v => this.setState({ queryParams: { ...queryParams, ...v } })}/>
+    ];
+    return !showOperateBtn ? calculateOpts.slice(1) : calculateOpts;
+  };
+
+  render() {
+    const { queryParams } = this.state;
+    return (
+      <WeaTop title={getLabel(538011, "薪资核算")} icon={<i className="icon-coms-fa"/>} iconBgcolor="#F14A2D"
+              buttons={this.renderCalculateOpts()}
+      >
+        <div className="calculate-body">
+          <CalculateTablelist queryParams={queryParams}/>
+        </div>
+      </WeaTop>
+    );
+  }
+}
+
+export default Calculate;

pc4mobx/hrmSalary/pages/calculate/columns.js

@@ -1,56 +0,0 @@
-export const columns = [
-    {
-        title: "薪资所属月",
-        dataIndex: 'title',
-        key: 'title',
-    },
-    {
-        title: "薪资账套",
-        dataIndex: 'title',
-        key: 'title',
-    },
-    {
-        title: "状态",
-        dataIndex: 'title',
-        key: 'title',
-    },
-    {
-        title: "税款所属期",
-        dataIndex: 'title',
-        key: 'title',
-    },
-    {
-        title: "核算人数",
-        dataIndex: 'title',
-        key: 'title',
-    },
-    {
-        title: "核算人",
-        dataIndex: 'title',
-        key: 'title',
-    },
-    {
-        title: "最后操作时间",
-        dataIndex: 'title',
-        key: 'title',
-    },
-    {
-        title: "备注",
-        dataIndex: 'title',
-        key: 'title',
-    },
-    {
-        title: "操作",
-        dataIndex: 'cz',
-        key: 'cz',
-    }
-]
-
-export const dataSource = [{
-    title: "测试"
-}];
-
-
-
-
-

pc4mobx/hrmSalary/pages/calculate/components/calculateQuery/index.js

@@ -0,0 +1,34 @@
+/*
+ * Author: 黎永顺
+ * name: 薪资核算-查询
+ * Description:
+ * Date: 2023/10/9
+ */
+import React, { Component } from "react";
+import { WeaInputSearch, WeaLocaleProvider } from "ecCom";
+import { MonthRangePicker } from "../../../reportView/components/statisticalMicroSettingsSlide";
+
+const getLabel = WeaLocaleProvider.getLabel;
+
+class Index extends Component {
+  render() {
+    const { queryParams } = this.props;
+    const { dateRange, name } = queryParams;
+    return (
+      <div className="salary-btn-flex">
+        <div className="mounth-range">
+          <span className="label">{getLabel(543549, "薪资所属月：")}</span>
+          <MonthRangePicker dateRange={dateRange} viewAttr={2}
+                            onChange={v => this.props.onChange({ dateRange: v })}/>
+        </div>
+        <WeaInputSearch value={name}
+                        placeholder={getLabel(543431, "请输入薪资账套名称")}
+                        onChange={v => this.props.onChange({ name: v })}
+                        onSearch={this.props.onSearch}
+        />
+      </div>
+    );
+  }
+}
+
+export default Index;

pc4mobx/hrmSalary/pages/calculate/components/calculateTablelist/index.js

@@ -0,0 +1,110 @@
+/*
+ * Author: 黎永顺
+ * name: 薪资核算-列表
+ * Description:
+ * Date: 2023/10/9
+ */
+import React, { Component } from "react";
+import { WeaLocaleProvider, WeaTable } from "ecCom";
+import { getSalaryAcctList } from "../../../../apis/calculate";
+
+const getLabel = WeaLocaleProvider.getLabel;
+
+class Index extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      loading: false, columns: [], dataSource: [],
+      pageInfo: { current: 1, pageSize: 10, total: 0 }
+    };
+  }
+
+  componentDidMount() {
+    const { queryParams } = this.props;
+    const { dateRange, ...extra } = queryParams;
+    const [startMonthStr, endMonthStr] = dateRange || [];
+    const params = { startMonthStr, endMonthStr, ...extra };
+    this.getSalaryAcctList(params);
+  }
+
+  componentWillReceiveProps(nextProps, nextContext) {
+    if (nextProps.queryParams !== this.props.queryParams) {
+      const { queryParams } = nextProps;
+      const { dateRange, ...extra } = queryParams;
+      const [startMonthStr, endMonthStr] = dateRange || [];
+      const params = { startMonthStr, endMonthStr, ...extra };
+      this.getSalaryAcctList(params);
+    }
+  }
+
+  getSalaryAcctList = (params) => {
+    const { pageInfo } = this.state;
+    const payload = { ...pageInfo, ...params };
+    this.setState({ loading: true });
+    getSalaryAcctList(payload).then(({ status, data }) => {
+      this.setState({ loading: false });
+      if (status) {
+        const { columns, list: dataSource, pageNum, pageSize, total } = data;
+        this.setState({
+          dataSource, pageInfo: { ...pageInfo, pageNum, pageSize, total },
+          columns: _.map(_.filter(columns, it => (it.dataIndex !== "backCalcStatus" && it.dataIndex !== "acctTimes")),
+            o => {
+              const { dataIndex } = o;
+              let width = "";
+              switch (dataIndex) {
+                case "status":
+                case "employeeSize":
+                  width = "5%";
+                  break;
+                case "salarySobName":
+                  width = "20%";
+                  break;
+                case "taxCycle":
+                case "description":
+                  width = "15%";
+                  break;
+                default:
+                  width = "10%";
+                  break;
+              }
+              if (dataIndex === "operate") {
+              }
+              return { ...o, width };
+            })
+        });
+      }
+    }).catch(() => this.setState({ loading: false }));
+  };
+
+  render() {
+    const { loading, dataSource, columns, pageInfo } = this.state;
+    const pagination = {
+      ...pageInfo,
+      showTotal: total => `${getLabel(18609, "共")} ${total} ${getLabel(18256, "条")}`,
+      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} loading={loading}
+        pagination={pagination} columns={columns}
+      />
+    );
+  }
+}
+
+export default Index;

pc4mobx/hrmSalary/pages/calculate/index.less

@@ -43,3 +43,39 @@
     }
   }
 }
+
+//重构薪资核算页
+.salary-btn-flex {
+  display: flex;
+  align-items: center;
+
+  .mounth-range {
+    display: flex;
+    align-items: center;
+    margin-right: 10px;
+
+    .label {
+      color: #999;
+    }
+  }
+
+  .wea-input-focus {
+    margin-top: -4px;
+  }
+}
+
+.calculate-body {
+  background: #f6f6f6;
+  height: 100%;
+  width: 100%;
+  padding: 16px;
+
+  .ant-table-tbody {
+    td {
+      width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+}