产品-薪酬核算页面编辑薪资项目项同步e10页面

2023-05-16 16:56:20 +08:00 · 2023-05-16 16:56:20 +08:00 · 4fd6e1f878
parent bdcad182a2
commit 4fd6e1f878
5 changed files with 123 additions and 145 deletions
--- a/pc4mobx/hrmSalary/pages/calculateDetail/editSalaryDetail.js
+++ b/pc4mobx/hrmSalary/pages/calculateDetail/editSalaryDetail.js
@ -1,10 +1,9 @@
 import React from "react";
-import { WeaHelpfulTip, WeaInput, WeaTab } from "ecCom";
+import { WeaHelpfulTip, WeaTab } from "ecCom";
 import IssuedAndReissueTable from "./issuedAndReissueTable";
-import { Col, Row } from "antd";
+import PayrollItemsTable from "./payrollItemsTable";
 import { inject, observer } from "mobx-react";
 import { toJS } from "mobx";
-import cs from "classnames";
 import "./index.less";

@inject("calculateStore")
@ -22,25 +21,23 @@ export default class EditSalaryDetail extends React.Component {
    acctresultDetail(this.props.id);
  }

-  handleItemValueChange = (field, value, isInput) => {
-    console.log(field, value, isInput);
+  handleItemValueChange = (field, value, isInput, groupId) => {
    const { calculateStore: { acctresultDetailForm, setAcctresultDetailForm } } = this.props;
    let form = { ...acctresultDetailForm };
-    if (isInput === "inputItems") {
-      form.inputItems = acctresultDetailForm.inputItems.map(item => {
-        item = { ...item };
-        if (item.salaryItemName === field) {
-          item.resultValue = value;
+    if (isInput === "itemsByGroup") {
+      form.itemsByGroup = acctresultDetailForm.itemsByGroup.map(item => {
+        if (item.salarySobItemGroupId === groupId) {
+          return {
+            ...item,
+            salaryItems: _.map(item.salaryItems, it => {
+              if (it.salaryItemId === field) {
+                return { ...it, resultValue: value };
+              }
+              return { ...it };
+            })
+          };
        }
-        return item;
-      });
-    } else if (isInput === "formulaItems") {
-      form.formulaItems = acctresultDetailForm.formulaItems.map(item => {
-        item = { ...item };
-        if (item.salaryItemName === field) {
-          item.resultValue = value;
-        }
-        return item;
+        return { ...item };
      });
    } else if (isInput === "issuedAndReissueItems") {
      form.issuedAndReissueItems = acctresultDetailForm.issuedAndReissueItems.map(item => {
@ -53,7 +50,6 @@ export default class EditSalaryDetail extends React.Component {
    }
    setAcctresultDetailForm(form);
  };
-
  renderTableTr = (data, isInput) => {
    const tables = [];
    const len = data.length;
@ -77,10 +73,10 @@ export default class EditSalaryDetail extends React.Component {
    return tables;
  };

-
  render() {
    const { calculateStore: { acctresultDetailForm } } = this.props;
    const { selectedKey } = this.state;
+    const { itemsByGroup = [] } = toJS(acctresultDetailForm);
    const topTab = [
      {
        title: "正常工资薪金所得",
@ -96,14 +92,8 @@ export default class EditSalaryDetail extends React.Component {
        <div className="detailItemWrapper">
          <div>
            <span className="itemTitle">基本信息</span>
-            <WeaHelpfulTip
-              style={{ marginLeft: "10px" }}
-              width={200}
-              title="根据账套设置显示"
-              placement="topLeft"
-            />
+            <WeaHelpfulTip style={{ marginLeft: "10px" }} title="提示：基本信息根据账套设置显示" placement="topLeft"/>
          </div>
-
          <div className="itemContent">
            {
              !_.isEmpty(acctresultDetailForm.employeeInfos) &&
@ -123,69 +113,9 @@ export default class EditSalaryDetail extends React.Component {
          />
        }
        {
-          selectedKey === "0" &&
-          <div>
-            <div className="detailItemWrapper">
-              <span className="itemTitle">输入项</span>
-              <div className="itemContent">
-                <Row>
-                  {
-                    acctresultDetailForm.inputItems && acctresultDetailForm.inputItems.map((item, index) => {
-                      const len = acctresultDetailForm.inputItems.length;
-                      return (
-                        <Col span={8}>
-                          <Row>
-                            <Col span={12}
-                                 className={cs("itemLabel", { "borderB-none": Math.ceil((index + 1) / 3) === len / 3 })}>{item.salaryItemName}</Col>
-                            <Col span={12} className={cs("itemValue", {
-                              "borderB-none": Math.ceil((index + 1) / 3) === len / 3,
-                              "borderR-none": (index + 1) % 3 === 0
-                            })}><WeaInput value={item.resultValue} disabled={!item.canEdit} onChange={(value) => {
-                              this.handleItemValueChange(item.salaryItemName, value, "inputItems");
-                            }}/></Col>
-                          </Row>
-                        </Col>
-                      );
-                    })
-                  }
-                </Row>
-              </div>
-            </div>
-            <div className="detailItemWrapper">
-            <span className="itemTitle">
-              <span>公式项</span>
-              <WeaHelpfulTip
-                style={{ marginLeft: "10px" }}
-                width={200}
-                title="提示：修改后，若点击核算，将按照公式核算，覆盖修改的数据"
-                placement="topLeft"
-              />
-            </span>
-              <div className="itemContent">
-                <Row>
-                  {
-                    acctresultDetailForm.formulaItems && acctresultDetailForm.formulaItems.map((item, index) => {
-                      const len = acctresultDetailForm.formulaItems.length;
-                      return (
-                        <Col span={8}>
-                          <Row>
-                            <Col span={12}
-                                 className={cs("itemLabel", { "borderB-none": Math.ceil((index + 1) / 3) === len / 3 })}>{item.salaryItemName}</Col>
-                            <Col span={12} className={cs("itemValue", {
-                              "borderB-none": Math.ceil((index + 1) / 3) === len / 3,
-                              "borderR-none": (index + 1) % 3 === 0
-                            })}><WeaInput value={item.resultValue} disabled={!item.canEdit} onChange={(value) => {
-                              this.handleItemValueChange(item.salaryItemName, value, "formulaItems");
-                            }}/></Col>
-                          </Row>
-                        </Col>
-                      );
-                    })
-                  }
-                </Row>
-              </div>
-            </div>
-          </div>
+          selectedKey === "0" && _.map(itemsByGroup, item => {
+            return <PayrollItemsTable {...item} onChangeIssueReissueValue={this.handleItemValueChange}/>;
+          })
        }
        {
          selectedKey === "1" &&
--- a/pc4mobx/hrmSalary/pages/calculateDetail/index.less
+++ b/pc4mobx/hrmSalary/pages/calculateDetail/index.less
@ -127,44 +127,8 @@
          }
        }
      }
-
-      & > .ant-row {
-        border: 1px solid rgba(0, 0, 0, .06);
-      }
-
-      .itemLabel {
-        background-color: #fafafa;
-        padding: 12px 6px;
-        height: 45px;
-        display: flex;
-        align-items: center;
-        justify-content: flex-start;
-        border-right: 1px solid rgba(0, 0, 0, .06);
-        border-bottom: 1px solid rgba(0, 0, 0, .06);
-      }
-
-      .borderB-none {
-        border-bottom: none !important;
-      }
-
-      .borderR-none {
-        border-right: none !important;
-      }
-
-      .itemValue {
-        padding: 12px 6px;
-        display: flex;
-        align-items: center;
-        height: 45px;
-        border-right: 1px solid rgba(0, 0, 0, .06);
-        border-bottom: 1px solid rgba(0, 0, 0, .06);
-      }
    }
  }
-
-  .itemRow {
-    line-height: 40px;
-  }
 }

 .placeOnFileDetail {
@ -255,6 +219,14 @@
    top: 10px !important;
  }

+  .wea-search-group {
+    padding: 0 !important;
+
+    .wea-title {
+      padding: 0 !important;
+    }
+  }
+
 }

@media (min-width: 1260px) {
--- a/pc4mobx/hrmSalary/pages/calculateDetail/issuedAndReissueTable.js
+++ b/pc4mobx/hrmSalary/pages/calculateDetail/issuedAndReissueTable.js
@ -40,7 +40,7 @@ class IssuedAndReissueTable extends Component {
        }
      },
      {
-        dataIndex: "salaryBackItemFormula",
+        dataIndex: "itemFormulaContent",
        title: <span>
          <span style={{ marginRight: 8 }}>核算公式</span>
          <WeaHelpfulTip
--- a/pc4mobx/hrmSalary/pages/calculateDetail/payrollItemsTable.js
+++ b/pc4mobx/hrmSalary/pages/calculateDetail/payrollItemsTable.js
@ -0,0 +1,79 @@
+/*
+ * Author: 黎永顺
+ * name: 薪资项目表格
+ * Description:
+ * Date: 2023/5/16
+ */
+import React, { Component } from "react";
+import { WeaHelpfulTip, WeaInputNumber, WeaLocaleProvider, WeaSearchGroup, WeaTable } from "ecCom";
+
+const { getLabel } = WeaLocaleProvider;
+
+class PayrollItemsTable extends Component {
+  render() {
+    const {
+      salarySobItemGroupId,
+      salarySobItemGroupName,
+      salaryItems: dataSource,
+      onChangeIssueReissueValue
+    } = this.props;
+    const columns = [
+      {
+        dataIndex: "salaryItemName",
+        title: getLabel(111, "薪资项目"),
+        width: "15%",
+        render: (text) => {
+          return <span className="tdEllipsis" title={text}>{text}</span>;
+        }
+      },
+      {
+        dataIndex: "resultValue",
+        title: <span>
+          <span style={{ marginRight: 8 }}>{getLabel(111, "项目值")}</span>
+          <WeaHelpfulTip
+            title={getLabel(111, "1.若薪资项目有公式，手动编辑项目值后，则默认将手动编辑的项目值锁定；点击锁定图标，解锁手动编辑的项目值，公式生效，点击保存按照公式重新核算；重新核算后，不显示解锁图标。")}
+            placement="top" width={250}
+          />
+        </span>,
+        width: "20%",
+        render: (text, record) => {
+          const { canEdit } = record;
+          return <WeaInputNumber
+            disabled={!canEdit}
+            min={0}
+            precision={2}
+            value={text || 0}
+            onChange={(value) => onChangeIssueReissueValue(record.salaryItemId, value, "itemsByGroup", salarySobItemGroupId)}
+          />;
+        }
+      },
+      {
+        dataIndex: "itemFormulaContent",
+        title: <span>
+          <span style={{ marginRight: 8 }}>{getLabel(111, "核算公式")}</span>
+          <WeaHelpfulTip
+            title={getLabel(111, "若薪资项目有公式，且项目值手动编辑修改过并点击锁定图标，则公式失效；若解除锁定，则项目公式重新生效；")}
+            placement="top" width={250}
+          />
+        </span>,
+        width: "65%",
+        render: (text, record) => {
+          return <span className="tdEllipsis" title={text}>{_.isNil(text) ? "输入" : text}</span>;
+        }
+      }
+    ];
+    return (
+      <WeaSearchGroup title={salarySobItemGroupName} showGroup needTigger>
+        <WeaTable
+          rowKey="salaryItemId"
+          dataSource={dataSource}
+          columns={columns}
+          bordered
+          pagination={false}
+        />
+      </WeaSearchGroup>
+    );
+  }
+}
+
+export default PayrollItemsTable;
--- a/pc4mobx/hrmSalary/stores/calculate.js
+++ b/pc4mobx/hrmSalary/stores/calculate.js
@ -3,7 +3,6 @@ import { message } from "antd";
 import { WeaForm, WeaTableNew } from "comsMobx";

 import * as API from "../apis/calculate";
-import { backCalculate } from "../apis/calculate";

 const { TableStore } = WeaTableNew;

@ -487,28 +486,26 @@ export class calculateStore {
  // 薪资结果-编辑表单保存
  @action
  saveAcctResult = (recordId) => {
-    let inputItems = this.acctresultDetailForm.inputItems.map(item => {
+    const itemsByGroupItems = _.reduce(this.acctresultDetailForm.itemsByGroup, (pre, cur) => {
+      return [
+        ...pre,
+        ..._.map(cur.salaryItems, it => {
+          return {
+            salaryItemId: it.salaryItemId,
+            resultValue: it.resultValue
+          };
+        })
+      ];
+    }, []);
+
+    const issuedAndReissueItems = this.acctresultDetailForm.issuedAndReissueItems.map(item => {
      let record = {};
      record.salaryItemId = item.salaryItemId;
      record.resultValue = item.resultValue;
      return record;
    });

-    let formulaItems = this.acctresultDetailForm.formulaItems.map(item => {
-      let record = {};
-      record.salaryItemId = item.salaryItemId;
-      record.resultValue = item.resultValue;
-      return record;
-    });
-
-    let issuedAndReissueItems = this.acctresultDetailForm.issuedAndReissueItems.map(item => {
-      let record = {};
-      record.salaryItemId = item.salaryItemId;
-      record.resultValue = item.resultValue;
-      return record;
-    });
-
-    let items = inputItems.concat(formulaItems).concat(issuedAndReissueItems);
+    let items = itemsByGroupItems.concat(issuedAndReissueItems);
    let params = {
      salaryAcctEmpId: recordId,
      items