From 02863814ba3942e815823471fadf6a3d1343d7c1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=8E=E6=B0=B8=E9=A1=BA?= <971387674@qq.com>
Date: Fri, 13 Oct 2023 09:17:54 +0800
Subject: [PATCH] =?UTF-8?q?feature/2.9.42310.01-=E5=B7=A5=E8=B5=84?=
 =?UTF-8?q?=E5=8D=95=E5=8F=91=E6=94=BE=E9=A1=B5=E9=9D=A2=E9=87=8D=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pc4mobx/hrmSalary/index.js                    |   3 +-
 .../components/grantTableList/index.js        | 129 ++++++++++++++++++
 .../components/reqQuery/grantQuery.js         |  30 ++++
 .../components/reqQuery/templateQuery.js      |  53 +++++++
 .../hrmSalary/pages/payrollRelease/index.js   | 104 ++++++++++++++
 .../hrmSalary/pages/payrollRelease/index.less |  33 +++++
 6 files changed, 351 insertions(+), 1 deletion(-)
 create mode 100644 pc4mobx/hrmSalary/pages/payrollRelease/components/grantTableList/index.js
 create mode 100644 pc4mobx/hrmSalary/pages/payrollRelease/components/reqQuery/grantQuery.js
 create mode 100644 pc4mobx/hrmSalary/pages/payrollRelease/components/reqQuery/templateQuery.js
 create mode 100644 pc4mobx/hrmSalary/pages/payrollRelease/index.js
 create mode 100644 pc4mobx/hrmSalary/pages/payrollRelease/index.less

diff --git a/pc4mobx/hrmSalary/index.js b/pc4mobx/hrmSalary/index.js
index ca8f7464..2ae4df93 100644
--- a/pc4mobx/hrmSalary/index.js
+++ b/pc4mobx/hrmSalary/index.js
@@ -17,7 +17,8 @@ import SpecialAddDeduction from "./pages/dataAcquisition/specialAddDeduction";
 import Ledger from "./pages/ledgerPage";
 // import Calculate from "./pages/calculate";
 import Calculate from "./pages/calculate/calculate"; //重构的薪资核算页面
-import Payroll from "./pages/payroll";
+// import Payroll from "./pages/payroll";
+import Payroll from "./pages/payrollRelease";//重构的工资单发放页面
 import PayrollGrant from "./pages/payroll/payrollGrant";
 import PayrollDetail from "./pages/payroll/payrollDetail";
 import Declare from "./pages/declare";
diff --git a/pc4mobx/hrmSalary/pages/payrollRelease/components/grantTableList/index.js b/pc4mobx/hrmSalary/pages/payrollRelease/components/grantTableList/index.js
new file mode 100644
index 00000000..0866b9d8
--- /dev/null
+++ b/pc4mobx/hrmSalary/pages/payrollRelease/components/grantTableList/index.js
@@ -0,0 +1,129 @@
+/*
+ * Author: 黎永顺
+ * name: 工资单发放重构-工资单发放列表
+ * Description:
+ * Date: 2023/10/12
+ */
+import React, { Component } from "react";
+import { WeaLocaleProvider, WeaTable } from "ecCom";
+import { Dropdown, Menu, Tag } from "antd";
+import { getPayrollList } from "../../../../apis/payroll";
+import moment from "moment";
+
+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() {
+    this.getPayrollList(this.props);
+  }
+
+  componentWillReceiveProps(nextProps, nextContext) {
+    if (nextProps.isRefresh !== this.props.isRefresh) this.getPayrollList(nextProps);
+  }
+
+  getPayrollList = (props) => {
+    const { pageInfo } = this.state;
+    const { queryParams } = props;
+    const { dateRange: salaryYearMonth } = queryParams;
+    const params = { salaryYearMonth };
+    const payload = { ...pageInfo, ...params };
+    this.setState({ loading: true });
+    getPayrollList(payload).then(({ status, data }) => {
+      this.setState({ loading: false });
+      if (status) {
+        const { columns, pageInfo: { pageNum, pageSize, total, list: dataSource } } = data;
+        this.setState({
+          dataSource, pageInfo: { ...pageInfo, pageNum, pageSize, total },
+          columns: _.map(_.filter(columns, it => it.column !== "acctTimes"), o => {
+            const { column } = o;
+            if (column === "salarySob") {
+              return {
+                dataIndex: o.column, title: o.text, width: o.width,
+                render: (text, record) => {
+                  const { acctTimes, salaryAcctType } = record;
+                  return <div className="salarySobNameWrapper">
+                    <span title={text}>{text}</span>
+                    <div className="salarySobNameTagWrapper">
+                      {
+                        salaryAcctType === 1 &&
+                        <Tag color="yellow">补发</Tag>
+                      }
+                      <Tag color="blue">{`${getLabel(15323, "第")}${acctTimes}${getLabel(18929, "次")}`}</Tag>
+                    </div>
+                  </div>;
+                }
+              };
+            }
+            if (column === "salaryYearMonth" || column === "lastSendTime") {
+              return {
+                dataIndex: o.column, title: o.text, width: o.width,
+                render: (text) => {
+                  const time = moment(parseInt(text)).format("YYYY-MM");
+                  return <span title={time}>{time}</span>;
+                }
+              };
+            }
+            return { dataIndex: o.column, title: o.text, width: 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 }
+        }, () => this.getPayrollList(this.props));
+      },
+      onChange: current => {
+        this.setState({
+          pageInfo: { ...pageInfo, current }
+        }, () => this.getPayrollList(this.props));
+      }
+    };
+    return (
+      <WeaTable
+        rowKey="id"
+        dataSource={dataSource} loading={loading} pagination={pagination}
+        columns={[
+          ...columns,
+          {
+            dataIndex: "operate", title: getLabel(30585, "操作"), width: 170,
+            render: (__, record) => {
+              return <React.Fragment>
+                <a href="javascript:void(0);" style={{ marginRight: 10 }}>{getLabel(542702, "发放")}</a>
+                <a href="javascript:void(0);" style={{ marginRight: 10 }}>{getLabel(83110, "查看详情")}</a>
+                <Dropdown
+                  overlay={<Menu>
+                    <Menu.Item key="1">{getLabel(543603, "更新模板")}</Menu.Item>
+                  </Menu>
+                  }
+                >
+                  <a href="javascript:void(0);"><i className="icon-coms-more"/></a>
+                </Dropdown>
+              </React.Fragment>;
+            }
+          }
+        ]}
+      />
+    );
+  }
+}
+
+export default Index;
diff --git a/pc4mobx/hrmSalary/pages/payrollRelease/components/reqQuery/grantQuery.js b/pc4mobx/hrmSalary/pages/payrollRelease/components/reqQuery/grantQuery.js
new file mode 100644
index 00000000..e92477d4
--- /dev/null
+++ b/pc4mobx/hrmSalary/pages/payrollRelease/components/reqQuery/grantQuery.js
@@ -0,0 +1,30 @@
+/*
+ * Author: 黎永顺
+ * name: 工资单发放重构-工资单查询
+ * Description:
+ * Date: 2023/10/12
+ */
+import React, { Component } from "react";
+import { WeaHelpfulTip, WeaLocaleProvider } from "ecCom";
+import { MonthRangePicker } from "../../../reportView/components/statisticalMicroSettingsSlide";
+
+const getLabel = WeaLocaleProvider.getLabel;
+
+class GrantQuery extends Component {
+  render() {
+    const { queryParams } = this.props;
+    const { dateRange } = queryParams;
+    return (
+      <div className="payroll-btn-flex">
+        <WeaHelpfulTip
+          width={200} placement="topLeft" style={{ marginRight: 10 }}
+          title={getLabel(543576, "提示：无工资单模板无法发放工资单，请先设置一个默认使用的工资单模板")}
+        />
+        <MonthRangePicker dateRange={dateRange} viewAttr={2}
+                          onChange={v => this.props.onChange({ dateRange: v })}/>
+      </div>
+    );
+  }
+}
+
+export default GrantQuery;
diff --git a/pc4mobx/hrmSalary/pages/payrollRelease/components/reqQuery/templateQuery.js b/pc4mobx/hrmSalary/pages/payrollRelease/components/reqQuery/templateQuery.js
new file mode 100644
index 00000000..a33268c6
--- /dev/null
+++ b/pc4mobx/hrmSalary/pages/payrollRelease/components/reqQuery/templateQuery.js
@@ -0,0 +1,53 @@
+/*
+ * Author: 黎永顺
+ * name: 工资单发放重构-工资单模板查询
+ * Description:
+ * Date: 2023/10/12
+ */
+import React, { Component } from "react";
+import { WeaInputSearch, WeaLocaleProvider, WeaSelect } from "ecCom";
+import { getPayrollTemplateLedgerList } from "../../../../apis/payroll";
+
+const getLabel = WeaLocaleProvider.getLabel;
+
+class TemplateQuery extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      salarySobOptions: []
+    };
+  }
+
+  componentDidMount() {
+    this.getPayrollTemplateLedgerList();
+  }
+
+  getPayrollTemplateLedgerList = () => {
+    getPayrollTemplateLedgerList().then(({ status, data }) => {
+      if (status) {
+        this.setState({
+          salarySobOptions: _.map(data, o => ({ key: o.id, showname: o.content }))
+        });
+      }
+    });
+  };
+
+  render() {
+    const { salarySobOptions } = this.state;
+    const { queryParams } = this.props;
+    const { salarySobId, name } = queryParams;
+    return (
+      <div className="payroll-btn-flex">
+        <WeaSelect value={salarySobId} options={salarySobOptions} style={{ width: 200 }}
+                   onChange={v => this.props.onChange({ salarySobId: v })}/>
+        <WeaInputSearch value={name} style={{ marginLeft: 10 }}
+                        placeholder={getLabel(111, "请输入工资单模板名称")}
+                        onChange={v => this.props.onChange({ name: v })}
+                        onSearch={this.props.onSearch}
+        />
+      </div>
+    );
+  }
+}
+
+export default TemplateQuery;
diff --git a/pc4mobx/hrmSalary/pages/payrollRelease/index.js b/pc4mobx/hrmSalary/pages/payrollRelease/index.js
new file mode 100644
index 00000000..ce57319e
--- /dev/null
+++ b/pc4mobx/hrmSalary/pages/payrollRelease/index.js
@@ -0,0 +1,104 @@
+/*
+ * Author: 黎永顺
+ * name: 工资单发放-重构页面
+ * Description:
+ * Date: 2023/10/12
+ */
+import React, { Component } from "react";
+import { inject, observer } from "mobx-react";
+import { WeaLocaleProvider, WeaReqTop } from "ecCom";
+import GrantQuery from "./components/reqQuery/grantQuery";
+import TemplateQuery from "./components/reqQuery/templateQuery";
+import GrantTableList from "./components/grantTableList";
+import { Button } from "antd";
+import moment from "moment";
+import "./index.less";
+
+const getLabel = WeaLocaleProvider.getLabel;
+
+@inject("taxAgentStore")
+@observer
+class Index extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      selectedKey: "grant", isRefresh: false,
+      queryParams: {
+        salarySobId: "", name: "",
+        dateRange: [
+          moment(new Date()).startOf("year").format("YYYY-MM"),
+          moment(new Date()).startOf("month").format("YYYY-MM")
+        ]
+      }
+    };
+  }
+
+  renderReqBtns = () => {
+    const { taxAgentStore: { showOperateBtn } } = this.props;
+    const { selectedKey, isRefresh, queryParams } = this.state;
+    let reqBtns = [];
+    switch (selectedKey) {
+      case "grant":
+        reqBtns = [
+          <GrantQuery queryParams={queryParams}
+                      onChange={v => this.setState({
+                        isRefresh: !isRefresh,
+                        queryParams: { ...queryParams, ...v }
+                      })}/>
+        ];
+        break;
+      case "template":
+        const btns = [
+          <Button type="primary">{getLabel(365, "新建")}</Button>,
+          <Button type="ghost">{getLabel(32136, "批量删除")}</Button>
+        ];
+        const queryBtns = [
+          <TemplateQuery queryParams={queryParams}
+                         onChange={v => this.setState({
+                           isRefresh: !isRefresh,
+                           queryParams: { ...queryParams, ...v }
+                         })}/>
+        ];
+        reqBtns = showOperateBtn ? [...btns, ...queryBtns] : [...queryBtns];
+        break;
+      default:
+        break;
+    }
+    return reqBtns;
+  };
+  renderContent = () => {
+    const { selectedKey, queryParams, isRefresh } = this.state;
+    let dom = null;
+    switch (selectedKey) {
+      case "grant":
+        dom = <GrantTableList queryParams={queryParams} isRefresh={isRefresh}/>;
+        break;
+      default:
+        break;
+    }
+    return dom;
+  };
+
+  render() {
+    const { selectedKey } = this.state;
+    const tabs = [
+      { key: "grant", title: getLabel(538012, "工资单发放") },
+      { key: "template", title: getLabel(543575, "工资单模板设置") },
+      { key: "watermark", title: getLabel(545285, "工资单基础设置") }
+    ];
+    return (
+      <div className="salary-payroll-main-page">
+        <WeaReqTop
+          title={getLabel(538012, "工资单发放")} tabDatas={tabs} selectedKey={selectedKey}
+          buttonSpace={10} icon={<i className="icon-coms-fa"/>} iconBgcolor="#F14A2D"
+          onChange={key => this.setState({ selectedKey: key })}
+          buttons={this.renderReqBtns()}
+        >
+          <div className="salary-payroll-content">{this.renderContent()}</div>
+        </WeaReqTop>
+      </div>
+    );
+  }
+}
+
+export default Index;
diff --git a/pc4mobx/hrmSalary/pages/payrollRelease/index.less b/pc4mobx/hrmSalary/pages/payrollRelease/index.less
new file mode 100644
index 00000000..a49b938a
--- /dev/null
+++ b/pc4mobx/hrmSalary/pages/payrollRelease/index.less
@@ -0,0 +1,33 @@
+.salary-payroll-main-page {
+  min-width: 1000px;
+  overflow: auto;
+  width: 100%;
+  height: 100%;
+  background: #f6f6f6;
+
+  .payroll-btn-flex {
+    display: flex;
+    align-items: center;
+
+    .wea-input-focus {
+      margin-top: -4px;
+    }
+  }
+
+  .wea-new-top-req {
+    z-index: 0 !important;
+  }
+
+  .wea-new-top-req-wapper .wea-new-top-req-title > div:last-child {
+    right: 16px;
+  }
+
+  .salary-payroll-content {
+    padding: 8px 16px;
+    height: 100%;
+
+    .wea-new-table {
+      background: #fff;
+    }
+  }
+}