feature/2.9.42309.01-薪资核算详情页面列表改造（页面编辑）

pc4mobx/hrmSalary/pages/calculate/doCalc/components/salaryEditCalc/baseInfo.js

@@ -0,0 +1,59 @@
+/*
+ * Author: 黎永顺
+ * name: 薪资基本信息
+ * Description:
+ * Date: 2023/9/25
+ */
+import React, { Component } from "react";
+import { WeaHelpfulTip, WeaLocaleProvider, WeaSearchGroup } from "ecCom";
+import cs from "classnames";
+import { Col, Row } from "antd";
+import "./index.less";
+
+const getLabel = WeaLocaleProvider.getLabel;
+
+class EditSalaryBaseInfo extends Component {
+  render() {
+    const { baseInfo } = this.props;
+    return (
+      <WeaSearchGroup
+        needTigger showGroup className="esf-base-info-form"
+        title={
+          <div>
+            <span>{getLabel(82743, "基础信息")}</span>
+            <WeaHelpfulTip
+              width={200} placement="topLeft"
+              title={getLabel(111, "提示：基本信息根据账套设置显示")}
+              style={{ marginLeft: 10 }}
+            />
+          </div>
+        }
+      >
+        <Row type="flex" className="esf-form-content">
+          {
+            _.map(baseInfo, (item, index) => {
+              const { fieldName, fieldValue } = item;
+              return (
+                <Col span={(index === baseInfo.length - 1 && (index + 1) % 2 === 1) ? 24 : 12}>
+                  <Row className={cs("esf-form-item", {
+                    "esf-form-odd-item": index % 2 === 0,
+                    "esf-form-last-item": (index === baseInfo.length - 1 && (index + 1) % 2 === 1)
+                  })}>
+                    <Col span={(index === baseInfo.length - 1 && (index + 1) % 2 === 1) ? 3 : 6}>
+                      <span className="label">{fieldName}</span>
+                    </Col>
+                    <Col span={(index === baseInfo.length - 1 && (index + 1) % 2 === 1) ? 21 : 18}>
+                      <span className="value">{fieldValue}</span>
+                    </Col>
+                  </Row>
+                </Col>
+              );
+            })
+          }
+        </Row>
+      </WeaSearchGroup>
+    );
+  }
+}
+
+export default EditSalaryBaseInfo;

pc4mobx/hrmSalary/pages/calculate/doCalc/components/salaryEditCalc/editCalcTable.js

@@ -10,6 +10,7 @@ import { message, Modal, Spin } from "antd";
 import { inject, observer } from "mobx-react";
 import { acctResultList, updateLockStatus } from "../../../../../apis/calculate";
 import ProgressModal from "../../../../../components/progressModal";
+import EditSalaryCalcSlide from "./editSalaryCalcSlide";
 
 const getLabel = WeaLocaleProvider.getLabel;
 
@@ -20,7 +21,8 @@ class EditCalcTable extends Component {
     super(props);
     this.state = {
       loading: false, pageInfo: { current: 1, pageSize: 10, total: 0 },
-      selectedRowKeys: [], progressVisible: false, progress: 0
+      selectedRowKeys: [], progressVisible: false, progress: 0,
+      salaryCalcSlide: { visible: false, id: "" }
     };
     this.timerLock = null;
   }
@@ -51,6 +53,12 @@ class EditCalcTable extends Component {
           const { salaryItemId, lockType: lockStatus } = params;
           this.updateLockStatus({ lockStatus, salaryItemId });
           break;
+        case "EDIT":
+          const { id: salaryCalcId } = params;
+          this.setState({
+            salaryCalcSlide: { visible: true, id: salaryCalcId }
+          });
+          break;
         default:
           break;
       }
@@ -152,7 +160,7 @@ class EditCalcTable extends Component {
   };
 
   render() {
-    const { loading, progressVisible, progress } = this.state;
+    const { loading, progressVisible, progress, salaryCalcSlide } = this.state;
     return (
       <div className="editCalcTable-layout">
         <Spin spinning={loading}>
@@ -162,6 +170,13 @@ class EditCalcTable extends Component {
             // src="/spa/hrmSalary/hrmSalaryCalculateDetail/index.html#/calcTable"
             id="atdTable"
           />
+          <EditSalaryCalcSlide {...salaryCalcSlide}
+                               onClose={(isFresh) => this.setState({
+                                 salaryCalcSlide: {
+                                   visible: false,
+                                   id: ""
+                                 }
+                               }, () => isFresh === "true" && this.queryCalcResultList())}/>
           {
             progressVisible &&
             <ProgressModal

pc4mobx/hrmSalary/pages/calculate/doCalc/components/salaryEditCalc/editSalaryCalcSlide.js

@@ -0,0 +1,160 @@
+/*
+ * Author: 黎永顺
+ * name: 编辑弹框
+ * Description:
+ * Date: 2023/9/25
+ */
+import React, { Component } from "react";
+import { Button, message } from "antd";
+import { WeaLocaleProvider, WeaSlideModal, WeaTab } from "ecCom";
+import EditSalaryBaseInfo from "./baseInfo";
+import PayrollItemsTable from "../../../../calculateDetail/payrollItemsTable";
+import IssuedAndReissueTable from "../../../../calculateDetail/issuedAndReissueTable";
+import { acctresultDetail, saveAcctResult } from "../../../../../apis/calculate";
+import { toDecimal_n } from "../../../../../util";
+import "./index.less";
+
+
+const getLabel = WeaLocaleProvider.getLabel;
+
+class EditSalaryCalcSlide extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      baseInfo: [], selectedKey: "0", loading: false,
+      issuedAndReissueItems: [], //已发补发薪资项目
+      itemsByGroup: [] //正常发放薪资项目所得薪资项目
+    };
+  }
+
+  componentWillReceiveProps(nextProps, nextContext) {
+    if (nextProps.visible !== this.props.visible && nextProps.visible) this.acctresultDetail(nextProps.id);
+    if (nextProps.visible !== this.props.visible && !nextProps.visible) this.setState({ selectedKey: "0" });
+  }
+
+  acctresultDetail = (id) => {
+    acctresultDetail({ id }).then(({ status, data }) => {
+      if (status) {
+        const { employeeInfos, issuedAndReissueItems, itemsByGroup } = data;
+        this.setState({
+          baseInfo: employeeInfos, issuedAndReissueItems, itemsByGroup
+        });
+      }
+    });
+  };
+  renderTitle = () => {
+    const { loading } = this.state;
+    return <div className="titleDialog">
+      <div className="titleCol titleLeftBox">
+        <div className="titleIcon"><i className="icon-coms-fa"/></div>
+        <div className="title">{getLabel(543559, "编辑薪资")}</div>
+      </div>
+      <div className="titleCol titleRightBox">
+        <Button type="primary" onClick={this.save} loading={loading}>{getLabel(111, "保存并核算")}</Button>
+      </div>
+    </div>;
+  };
+  handleItemValueChange = (field, value, isInput, groupId) => {
+    const { issuedAndReissueItems, itemsByGroup } = this.state;
+    if (isInput === "itemsByGroup") {
+      this.setState({
+        itemsByGroup: 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 === "issuedAndReissueItems") {
+      this.setState({
+        issuedAndReissueItems: issuedAndReissueItems.map(item => {
+          item = { ...item };
+          if (item.salaryItemName === field) {
+            item.resultValue = value;
+          }
+          return item;
+        })
+      });
+    }
+  };
+  save = () => {
+    const { id: salaryAcctEmpId } = this.props;
+    const { issuedAndReissueItems, itemsByGroup } = this.state;
+    const payload = {
+      salaryAcctEmpId,
+      items: [
+        ..._.reduce(itemsByGroup, (pre, cur) => {
+          return [
+            ...pre,
+            ..._.map(cur.salaryItems, it => {
+              return {
+                salaryItemId: it.salaryItemId,
+                resultValue: (it.dataType === "number" && !!it.resultValue) ? toDecimal_n(it.resultValue, it.pattern || 2) : it.resultValue
+              };
+            })
+          ];
+        }, []),
+        ...issuedAndReissueItems.map(item => ({
+          salaryItemId: item.salaryItemId,
+          resultValue: (item.dataType === "number" && !!item.resultValue) ? toDecimal_n(item.resultValue, item.pattern || 2) : item.resultValue
+        }))
+      ]
+    };
+    this.setState({ loading: true });
+    saveAcctResult(payload).then(({ status, errormsg }) => {
+      this.setState({ loading: false });
+      if (status) {
+        message.success(getLabel(30700, "操作成功！"));
+        this.props.onClose("true");
+      } else {
+        message.error(errormsg);
+      }
+    }).catch(() => this.setState({ loading: false }));
+  };
+
+  render() {
+    const { baseInfo, selectedKey, itemsByGroup, issuedAndReissueItems } = this.state;
+    const topTab = [
+      { title: getLabel(542704, "正常工资薪金所得"), viewcondition: "0" },
+      { title: getLabel(542651, "已发补发"), viewcondition: "1" }
+    ];
+    return (
+      <React.Fragment>
+        <WeaSlideModal
+          className="salary-calculate-esf-layout" {...this.props}
+          top={0} width={60} height={100} measure={"%"}
+          direction={"right"} title={this.renderTitle()}
+          content={<div className="salary-calculate-esf-area">
+            <EditSalaryBaseInfo baseInfo={baseInfo}/>
+            <WeaTab keyParam="viewcondition" className="calc-esf-tab"
+                    selectedKey={selectedKey} onChange={v => this.setState({ selectedKey: v })}
+                    datas={!_.isEmpty(issuedAndReissueItems) ? topTab : topTab.slice(0, 1)}
+            />
+            {
+              selectedKey === "0" && _.map(itemsByGroup, item => {
+                return <PayrollItemsTable {...item} onChangeIssueReissueValue={this.handleItemValueChange}/>;
+              })
+            }
+            {
+              selectedKey === "1" &&
+              <IssuedAndReissueTable
+                dataSource={issuedAndReissueItems}
+                onChangeIssueReissueValue={this.handleItemValueChange}
+              />
+            }
+          </div>}
+        />
+      </React.Fragment>
+    );
+  }
+}
+
+export default EditSalaryCalcSlide;

pc4mobx/hrmSalary/pages/calculate/doCalc/components/salaryEditCalc/index.less

@@ -54,3 +54,101 @@
     }
   }
 }
+
+.salary-calculate-esf-layout {
+
+  .titleDialog {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 46px 0 16px;
+
+    .titleCol {
+      flex: 1;
+      display: flex;
+      align-items: center;
+    }
+
+    .titleLeftBox {
+      .titleIcon {
+        color: #fff;
+        margin: 0;
+        width: 40px;
+        height: 40px;
+        line-height: 40px;
+        font-size: 22px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: #F14A2D;
+        border-radius: 50%;
+      }
+
+      .title {
+        font-size: 14px;
+        color: #333;
+        padding-left: 6px;
+      }
+    }
+
+    .titleRightBox {
+      justify-content: flex-end;
+    }
+  }
+
+  .wea-slide-modal-title {
+    border-bottom: 1px solid #e5e5e5 !important;
+  }
+
+  .wea-slide-modal-content {
+    height: 100%;
+
+    .salary-calculate-esf-area {
+      background: #f6f6f6;
+      height: 100%;
+      overflow-y: auto;
+      padding: 16px;
+
+      .esf-base-info-form, .wea-title, .wea-content {
+        padding: 0;
+      }
+
+      .esf-form-content {
+        background: #fff;
+        border: 1px solid #e5e5e5;
+        border-top: none;
+        border-bottom: none;
+
+        .esf-form-item {
+          border-bottom: 1px solid #e5e5e5;
+        }
+
+        .esf-form-last-item {
+          border-right: none !important;
+        }
+
+        .esf-form-odd-item {
+          border-right: 1px solid #e5e5e5;
+        }
+
+        .label {
+          color: #666;
+        }
+
+        .label, .value {
+          display: inline-block;
+          line-height: 24px;
+          padding: 8px 16px;
+        }
+      }
+
+      .wea-new-table {
+        background: #FFF;
+      }
+
+      .wea-search-group {
+        padding: 0;
+      }
+    }
+  }
+}

pc4mobx/hrmSalary/pages/calculate/doCalc/index.less

@@ -5,6 +5,10 @@
   height: 100%;
   background: #f6f6f6;
 
+  .wea-new-top-req {
+    z-index: 0 !important;
+  }
+
   .wea-new-top-req-wapper .wea-new-top-req-title > div:last-child {
     right: 16px;
   }