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

2023-05-17 14:24:07 +08:00 · 2023-05-17 14:24:07 +08:00 · 22b4a46824
parent 4fd6e1f878
commit 22b4a46824
4 changed files with 168 additions and 77 deletions
--- a/pc4mobx/hrmSalary/pages/calculateDetail/acctResult/importModal/acctResultImportModal.js
+++ b/pc4mobx/hrmSalary/pages/calculateDetail/acctResult/importModal/acctResultImportModal.js
@ -2,8 +2,8 @@ import React from "react";
 import ImportModal from "../../../../components/importModal";
 import { Badge, Button, message } from "antd";
 import { inject, observer } from "mobx-react";
-import SelectFieldModal from "./selectFieldModal";
 import { getQueryString } from "../../../../util/url";
+import AddHeaderFieldsModal from "./addHeaderFieldsModal";

@inject("calculateStore", "standingBookStore")
@observer
@ -16,7 +16,10 @@ export default class AcctResultImportModal extends React.Component {
        salaryItemIds: ""
      },
      step: 0,
-      selectFieldVisible: false
+      selectFieldVisible: false,
+      addHeadFields: {
+        visible: false, itemsByGroup: []
+      }
    };
  }

@ -24,11 +27,6 @@ export default class AcctResultImportModal extends React.Component {
    const { id } = this.props;
    if (id) {
      this.getImportField();
-      // let modalParam = { ...this.state.modalParam };
-      // modalParam.salaryAcctRecordId = id;
-      // this.setState({
-      //   modalParam
-      // });
    } else {
      this.setState({
        modalParam: { ...this.state.modalParam, salaryAcctRecordId: "123" }
@ -36,18 +34,31 @@ export default class AcctResultImportModal extends React.Component {
    }
  }

-  getImportField=()=>{
+  getImportField = () => {
    const { calculateStore: { getImportField }, id } = this.props;
+    const { addHeadFields } = this.props;
    getImportField(id).then(data => {
      this.setState({
-        modalParam:{
+        addHeadFields: {
+          ...addHeadFields,
+          itemsByGroup: _.map(data.itemsByGroup, item => {
+            return {
+              ...item,
+              salaryItems: _.map(item.salaryItems, it => ({
+                ...it,
+                checked: false
+              }))
+            };
+          })
+        },
+        modalParam: {
          ...this.state.modalParam,
          salaryAcctRecordId: id,
          salaryItemIds: data.checkItems.join(",")
        }
      });
    });
-  }
+  };

  // 获取模板
  handleAccResultTemplateLink() {
@ -98,58 +109,22 @@ export default class AcctResultImportModal extends React.Component {
  }

  // 渲染第一步表单
-  renderFormComponent() {
+  renderFormComponent = () => {
    return <Badge
      count={!_.isEmpty(this.state.modalParam.salaryItemIds) ? this.state.modalParam.salaryItemIds.split(",").length : 0}>
-      <Button onClick={() => {
-        this.handleSelectedField();
-      }}>请选择表单字段</Button>
+      <Button onClick={this.handleSelectedField}>请选择表单字段</Button>
    </Badge>;
-  }
+  };

  // 选择表单字段
-  handleSelectedField() {
+  handleSelectedField = () => {
    this.setState({
-      selectFieldVisible: true
+      addHeadFields: {
+        ...this.state.addHeadFields,
+        visible: true
+      }
    });
-  }
-
-  // 添加表头字段
-  handleAdd(fieldDate) {
-    let salaryItemIdsList = [];
-    if (!_.isEmpty(fieldDate.formulaItems)) {
-      fieldDate.formulaItems.map(item => {
-        if (item.checked) {
-          salaryItemIdsList.push(item.salaryItemId);
-        }
-      });
-    }
-    if (!_.isEmpty(fieldDate.inputItems)) {
-      fieldDate.inputItems.map(item => {
-        if (item.checked) {
-          salaryItemIdsList.push(item.salaryItemId);
-        }
-      });
-    }
-    if (!_.isEmpty(fieldDate.sqlItems)) {
-      fieldDate.sqlItems.map(item => {
-        if (item.checked) {
-          salaryItemIdsList.push(item.salaryItemId);
-        }
-      });
-    }
-    let salaryItemIds = "";
-    if (salaryItemIdsList.length > 0) {
-      salaryItemIds = salaryItemIdsList.join(",");
-    }
-
-    let modalParam = { ...this.state.modalParam };
-    modalParam.salaryItemIds = salaryItemIds;
-    this.setState({
-      modalParam
-    });
-    this.props.onAdd(fieldDate);
-  }
+  };

  // 初始化Import数据
  handleImportModalInit() {
@ -197,7 +172,7 @@ export default class AcctResultImportModal extends React.Component {
      importInsuranceAcctDetail,
      importBalanceInsuranceDetail
    } = standingBookStore;
-    const { step, selectFieldVisible, modalParam } = this.state;
+    const { step, modalParam, addHeadFields } = this.state;
    return (
      <div>
        {
@ -223,7 +198,7 @@ export default class AcctResultImportModal extends React.Component {
              !isStandingBook ?
                fetchImportAcctResult(params) :
                standingBookType === "difference" ?
-                  importBalanceInsuranceDetail({...params, billMonth}) :
+                  importBalanceInsuranceDetail({ ...params, billMonth }) :
                  importInsuranceAcctDetail(params);
            }}
            templateLink={() => {
@ -236,23 +211,19 @@ export default class AcctResultImportModal extends React.Component {
            }}
          />
        }
-        {
-          selectFieldVisible && <SelectFieldModal
-            isStandingBook={isStandingBook}
-            standingBookType={standingBookType}
-            id={this.props.id}
-            visible={selectFieldVisible}
-            fieldData={this.props.fieldData}
-            onAdd={(fieldDate) => {
-              this.handleAdd(fieldDate);
-            }}
-            onCancel={() => {
-              this.setState({
-                selectFieldVisible: false
-              });
-            }}
-          />
-        }
+        <AddHeaderFieldsModal {...addHeadFields} selectItems={modalParam.salaryItemIds}
+                              onCancel={() => this.setState({ addHeadFields: { ...addHeadFields, visible: false } })}
+                              onAdd={(salaryItemIds) => this.setState({
+                                addHeadFields: {
+                                  ...addHeadFields,
+                                  visible: false
+                                },
+                                modalParam: {
+                                  ...modalParam,
+                                  salaryItemIds: salaryItemIds.join(",")
+                                }
+                              })}
+        />
      </div>
    );
  }
--- a/pc4mobx/hrmSalary/pages/calculateDetail/acctResult/importModal/addHeaderFieldsModal.js
+++ b/pc4mobx/hrmSalary/pages/calculateDetail/acctResult/importModal/addHeaderFieldsModal.js
@ -0,0 +1,105 @@
+/*
+ * Author: 黎永顺
+ * name: 表头字段添加
+ * Description:
+ * Date: 2023/5/17
+ */
+import React, { Component } from "react";
+import { Button, Col, Row } from "antd";
+import { WeaCheckbox, WeaDialog, WeaLocaleProvider, WeaSearchGroup } from "ecCom";
+import "./index.less";
+
+const { getLabel } = WeaLocaleProvider;
+
+class AddHeaderFieldsModal extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      itemsCheckeds: [],
+      showOnlyChecked: false
+    };
+  }
+
+  componentWillReceiveProps(nextProps, nextContext) {
+    if (nextProps.visible !== this.props.visible && nextProps.visible) {
+      this.setState({
+        itemsCheckeds: nextProps.selectItems ? _.map(nextProps.selectItems.split(","), it => Number(it)) : []
+      });
+    }
+  }
+
+  handleShowOnlyChecked = (showOnlyChecked) => this.setState({ showOnlyChecked: !!Number(showOnlyChecked) });
+  handleSelectGroupAll = (groupId, checked) => {
+    const { itemsCheckeds } = this.state;
+    const { itemsByGroup } = this.props;
+    _.map(itemsByGroup, item => {
+      if (item.salarySobItemGroupId === groupId) {
+        if (!!Number(checked)) {
+          this.setState({
+            itemsCheckeds: [...itemsCheckeds, ..._.map(item.salaryItems, child => child.salaryItemId)]
+          });
+        } else {
+          this.setState({
+            itemsCheckeds: _.differenceWith(itemsCheckeds, _.map(item.salaryItems, child => child.salaryItemId), _.isEqual)
+          });
+        }
+      }
+    });
+  };
+
+  render() {
+    const { showOnlyChecked, itemsCheckeds } = this.state;
+    const { itemsByGroup } = this.props;
+    let dataSource = _.map(itemsByGroup, item => {
+      return {
+        ...item,
+        salaryItems: _.map(item.salaryItems, child => {
+          return { ...child, checked: itemsCheckeds.includes(child.salaryItemId) };
+        })
+      };
+    });
+    if (showOnlyChecked) {
+      dataSource = _.map(dataSource, item => {
+        return { ...item, salaryItems: _.filter(item.salaryItems, it => !!it.checked) };
+      });
+    }
+    return (
+      <WeaDialog
+        {...this.props} hasScroll initLoadCss
+        scalable title={getLabel(111, "添加表头字段")}
+        style={{ width: 700, height: 484 }} className="addHeaderFieldsWrapper"
+        buttons={[
+          <Button type="primary" onClick={() => this.props.onAdd(itemsCheckeds)}>{getLabel(111, "添加")}</Button>,
+          <Button type="ghost" onClick={this.props.onCancel}>{getLabel(111, "取消")}</Button>
+        ]}
+        bottomLeft={<WeaCheckbox content={getLabel(111, "只显示已选中字段")}
+                                 onChange={this.handleShowOnlyChecked}/>}
+      >
+        {
+          _.map(dataSource, item => {
+            const { salarySobItemGroupName, salaryItems, salarySobItemGroupId } = item;
+            const value = _.every(salaryItems, it => !!it.checked) ? "1" : "0";
+            return <WeaSearchGroup showGroup needTigger
+                                   title={<WeaCheckbox content={salarySobItemGroupName} value={value}
+                                                       onChange={(val) => this.handleSelectGroupAll(salarySobItemGroupId, val)}/>}>
+              <Row gutter={16}>
+                {
+                  !_.isEmpty(salaryItems) ?
+                    _.map(salaryItems, it => {
+                      const { salaryItemId, salaryItemName, checked } = it;
+                      return <Col span={8} style={{ marginBottom: 16 }}>
+                        <WeaCheckbox content={salaryItemName} value={checked ? "1" : "0"}
+                                     onChange={() => this.setState({ itemsCheckeds: _.xorWith(itemsCheckeds, [salaryItemId], _.isEqual) })}/>
+                      </Col>;
+                    }) : <Col span={24} style={{ minHeight: 20, padding: "5%", textAlign: "center" }}>暂无数据</Col>
+                }
+              </Row>
+            </WeaSearchGroup>;
+          })
+        }
+      </WeaDialog>
+    );
+  }
+}
+
+export default AddHeaderFieldsModal;
--- a/pc4mobx/hrmSalary/pages/calculateDetail/acctResult/importModal/index.less
+++ b/pc4mobx/hrmSalary/pages/calculateDetail/acctResult/importModal/index.less
@ -0,0 +1,11 @@
+.addHeaderFieldsWrapper {
+  .wea-search-group {
+    .wea-title {
+      padding-left: 0 !important;
+    }
+
+    .wea-content {
+      padding: 8px 16px 0;
+    }
+  }
+}
--- a/pc4mobx/hrmSalary/pages/calculateDetail/payrollItemsTable.js
+++ b/pc4mobx/hrmSalary/pages/calculateDetail/payrollItemsTable.js
@ -5,7 +5,7 @@
 * Date: 2023/5/16
 */
 import React, { Component } from "react";
-import { WeaHelpfulTip, WeaInputNumber, WeaLocaleProvider, WeaSearchGroup, WeaTable } from "ecCom";
+import { WeaHelpfulTip, WeaInput, WeaInputNumber, WeaLocaleProvider, WeaSearchGroup, WeaTable } from "ecCom";

 const { getLabel } = WeaLocaleProvider;

@ -37,13 +37,17 @@ class PayrollItemsTable extends Component {
        </span>,
        width: "20%",
        render: (text, record) => {
-          const { canEdit } = record;
-          return <WeaInputNumber
+          const { canEdit, dataType } = record;
+          return dataType === "number" ? <WeaInputNumber
            disabled={!canEdit}
            min={0}
            precision={2}
            value={text || 0}
            onChange={(value) => onChangeIssueReissueValue(record.salaryItemId, value, "itemsByGroup", salarySobItemGroupId)}
+          /> : <WeaInput
+            disabled={!canEdit}
+            value={text}
+            onChange={(value) => onChangeIssueReissueValue(record.salaryItemId, value, "itemsByGroup", salarySobItemGroupId)}
          />;
        }
      },