feature/2.9.42310.02-社保福利档案页面重构

2023-11-07 10:28:44 +08:00 · 2023-11-07 10:28:44 +08:00 · 4c7b3f9a6a
parent eefa47164a
commit 4c7b3f9a6a
5 changed files with 291 additions and 9 deletions
--- a/pc4mobx/hrmSalary/pages/socialSecurityBenefits/welfareArchive/components/welfareEditArchiveSlide/index.js
+++ b/pc4mobx/hrmSalary/pages/socialSecurityBenefits/welfareArchive/components/welfareEditArchiveSlide/index.js
@ -0,0 +1,97 @@
+/*
+ * Author: 黎永顺
+ * name:社保福利档案页面重构-查看编辑弹框
+ * Description:
+ * Date: 2023/11/6
+ */
+import React, { Component } from "react";
+import { inject, observer } from "mobx-react";
+import { WeaLocaleProvider, WeaSlideModal, WeaTools } from "ecCom";
+import * as API from "../../../../../apis/welfareArchive";
+import { getWelfareSearchsForm, welfareConditions } from "../../config";
+import { Button } from "antd";
+
+const getKey = WeaTools.getKey;
+const getLabel = WeaLocaleProvider.getLabel;
+
+@inject("archivesStore")
+@observer
+class Index extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      loading: false, conditions: []
+    };
+  }
+
+  componentWillReceiveProps(nextProps, nextContext) {
+    if (nextProps.visible !== this.props.visible && nextProps.visible) {
+      document.querySelector(".salary-welfare-archive").classList.add("zIndex0-welfare-archive");
+      this.getBaseForm(nextProps);
+    } else if (nextProps.visible !== this.props.visible && !nextProps.visible) {
+      const { archivesStore: { initWelfareProfileForm } } = nextProps;
+      document.querySelector(".salary-welfare-archive").classList.remove("zIndex0-welfare-archive");
+      initWelfareProfileForm();
+    }
+  }
+
+  getBaseForm = (props) => {
+    const { employeeId, paymentOrganization, welfareTypeEnum } = props;
+    const payload = { employeeId, paymentOrganization, welfareTypeEnum };
+    API.getBaseForm(payload).then(({ status, data }) => {
+      if (status) {
+        const { data: result } = data;
+        this.setState({
+          conditions: _.map(welfareConditions, o => {
+            if (o.title === "basic") {
+              return {
+                ...o, title: getLabel(542699, "员工基本信息"),
+                items: _.map(o.items, g => {
+                  return { ...g, label: getLabel(g.lanId, g.label) };
+                })
+              };
+            }
+            return {
+              ...o, items: _.map(o.items, g => {
+                return { ...g, label: getLabel(g.lanId, g.label) };
+              })
+            };
+          })
+        }, () => {
+          const { archivesStore: { welfareProfileForm } } = props;
+          console.log(this.state.conditions);
+          welfareProfileForm.initFormFields(this.state.conditions);
+        });
+      }
+    });
+  };
+  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(543191, "员工福利档案")}</div>
+      </div>
+      <div className="titleCol titleRightBox">
+        <Button type="primary" onClick={this.save} loading={loading}>{getLabel(537558, "保存")}</Button>
+      </div>
+    </div>;
+  };
+
+  render() {
+    const { archivesStore: { welfareProfileForm } } = this.props;
+    const { conditions } = this.state;
+    return (
+      <WeaSlideModal
+        className="salary-welfare-archive-edit-layout" {...this.props}
+        top={0} width={760} height={100} measureT={"%"} measureX={"px"} measureY={"%"}
+        direction={"right"} title={this.renderTitle()}
+        content={<div className="salary-welfare-archive-edit-area">
+          {getWelfareSearchsForm(welfareProfileForm, conditions)}
+        </div>}
+      />
+    );
+  }
+}
+
+export default Index;
--- a/pc4mobx/hrmSalary/pages/socialSecurityBenefits/welfareArchive/components/welfareTableList/index.js
+++ b/pc4mobx/hrmSalary/pages/socialSecurityBenefits/welfareArchive/components/welfareTableList/index.js
@ -5,9 +5,10 @@
 * Date: 2023/10/31
 */
 import React, { Component } from "react";
+import { inject, observer } from "mobx-react";
 import { WeaLoadingGlobal, WeaLocaleProvider } from "ecCom";
 import { message, Modal, Spin } from "antd";
-import { inject, observer } from "mobx-react";
+import WelfareEditArchiveSlide from "../welfareEditArchiveSlide";
 import * as API from "../../../../../apis/welfareArchive";

 const getLabel = WeaLocaleProvider.getLabel;
@ -28,8 +29,9 @@ class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
-      dataSource: [], columns: [], loading: false, pageInfo: { current: 1, pageSize: 10, total: 0 },
-      selectedRowKeys: []
+      dataSource: [], columns: [], loading: false, selectedRowKeys: [],
+      pageInfo: { current: 1, pageSize: 10, total: 0 },
+      welfareEditSlide: { visible: false, employeeId: "", welfareTypeEnum: "", paymentOrganization: "" }
    };
  }

@ -65,7 +67,7 @@ class Index extends Component {
    if (type === "init") {
      this.getWelfareList(this.props);
    } else if (type === "turn") {
-      const { record: { baseInfo } = {}, interfaceParams = {} } = params;
+      const { record: { baseInfo, employeeId, paymentOrganization } = {}, interfaceParams = {} } = params;
      switch (id) {
        case "PAGEINFO":
          this.setState({
@ -76,6 +78,15 @@ class Index extends Component {
          const { selectedRowKeys } = params;
          this.setState({ selectedRowKeys });
          break;
+        case "EDIT":
+        case "VIEW":
+          this.setState({
+            welfareEditSlide: {
+              ...this.state.welfareEditSlide, visible: true,
+              employeeId, paymentOrganization
+            }
+          });
+          break;
        case "ADD-TO-PAY":
        case "STAY-DEL-TO-STOP":
        case "CANCEL-STOP":
@ -184,7 +195,7 @@ class Index extends Component {
  };

  render() {
-    const { loading, dataSource } = this.state;
+    const { loading, dataSource, welfareEditSlide } = this.state;
    const dom = document.querySelector(".wea-new-top-req-content");
    let height = 280;
    if (dom && dataSource.length > 0) {
@ -200,6 +211,11 @@ class Index extends Component {
            id="atdTable"
          />
        </Spin>
+        {/* 编辑产看员工福利档案*/}
+        <WelfareEditArchiveSlide {...welfareEditSlide}
+                                 onClose={(isFresh) => this.setState({
+                                   welfareEditSlide: { ...welfareEditSlide, visible: false }
+                                 })}/>
      </div>
    );
  }
--- a/pc4mobx/hrmSalary/pages/socialSecurityBenefits/welfareArchive/config.js
+++ b/pc4mobx/hrmSalary/pages/socialSecurityBenefits/welfareArchive/config.js
@ -8,6 +8,11 @@ import { CancelHelpfulDiv, HelpfulDiv } from "./components/welfareTip";
 const getKey = WeaTools.getKey;
 const getLabel = WeaLocaleProvider.getLabel;
 //批量操作列表
+export const welfareTypeEnum = {
+  social: "SOCIAL_SECURITY",
+  fund: "ACCUMULATION_FUND",
+  others: "OTHER"
+};
 export const optTypeEnum = [
  //批量增员
  {
@ -362,3 +367,94 @@ export const getLogSearchsForm = (form, condition, onSearch = () => void (0)) =>
  });
  return group;
 };
+export const welfareConditions = [
+  {
+    defaultshow: true,
+    title: "basic",
+    col: 3,
+    items: [
+      {
+        colSpan: 3,
+        conditionType: "INPUT",
+        domkey: ["username"],
+        fieldcol: 14,
+        label: "姓名",
+        lanId: 25034,
+        labelcol: 10,
+        value: "",
+        viewAttr: 1
+      },
+      {
+        colSpan: 3,
+        conditionType: "INPUT",
+        domkey: ["department"],
+        fieldcol: 14,
+        label: "部门",
+        lanId: 27511,
+        labelcol: 10,
+        value: "",
+        viewAttr: 1
+      },
+      {
+        colSpan: 3,
+        conditionType: "INPUT",
+        domkey: ["position"],
+        fieldcol: 14,
+        label: "岗位",
+        lanId: 6086,
+        labelcol: 10,
+        value: "",
+        viewAttr: 1
+      },
+      {
+        colSpan: 3,
+        conditionType: "INPUT",
+        domkey: ["telephone"],
+        fieldcol: 14,
+        label: "手机号",
+        lanId: 125238,
+        labelcol: 10,
+        value: "",
+        viewAttr: 1
+      },
+      {
+        colSpan: 3,
+        conditionType: "INPUT",
+        domkey: ["hiredate"],
+        fieldcol: 14,
+        label: "入职日期",
+        lanId: 1516,
+        labelcol: 10,
+        value: "",
+        viewAttr: 1
+      }
+    ]
+  }
+];
+export const getWelfareSearchsForm = (form, condition, onSearch = () => void (0)) => {
+  const { isFormInit } = form;
+  const formParams = form.getFormParams();
+  let group = [];
+  isFormInit && condition && condition.map(c => {
+    let items = [];
+    c.items.map(fields => {
+      items.push({
+        com: (
+          <WeaFormItem
+            label={`${fields.label}`} labelCol={{ span: `${fields.labelcol}` }}
+            wrapperCol={{ span: `${fields.fieldcol}` }} error={form.getError(fields)}
+            tipPosition="bottom"
+          >
+            <WeaSwitch fieldConfig={fields} form={form} formParams={formParams}/>
+          </WeaFormItem>),
+        colSpan: 1,
+        hide: fields.hide
+      });
+    });
+    group.push(
+      <WeaSearchGroup col={c.col} needTigger={true} title={c.title} showGroup={c.defaultshow} items={items}
+                      center={false} multiCol="multiCol"
+      />);
+  });
+  return group;
+};
--- a/pc4mobx/hrmSalary/pages/socialSecurityBenefits/welfareArchive/index.less
+++ b/pc4mobx/hrmSalary/pages/socialSecurityBenefits/welfareArchive/index.less
@ -1,3 +1,9 @@
+.zIndex0-welfare-archive {
+  .wea-new-top-req {
+    z-index: 0 !important;
+  }
+}
+
 .salary-welfare-archive {
  min-width: 1000px;
  overflow: auto;
@ -94,3 +100,72 @@
    }
  }
 }
+
+.salary-welfare-archive-edit-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-welfare-archive-edit-area {
+      background: #f6f6f6;
+      height: 100%;
+      overflow-y: auto;
+      padding: 16px;
+
+      .wea-search-group, .wea-form-cell {
+        padding: 0;
+
+        .wea-form-item {
+          padding: 5px 16px;
+        }
+      }
+
+      .wea-form-cell-wrapper {
+        background: #FFF;
+      }
+    }
+  }
+}
--- a/pc4mobx/hrmSalary/stores/archives.js
+++ b/pc4mobx/hrmSalary/stores/archives.js
@ -10,10 +10,8 @@ const { TableStore } = WeaTableNew;
 export class ArchivesStore {
  @observable logForm = new WeaForm(); // 社保福利档案重构-日志查询条件log
  @observable welfareForm = new WeaForm(); // 社保福利档案重构-列表查询form
-
-
-
-
+  @observable welfareProfileForm = new WeaForm(); // 社保福利档案重构-员工薪资档案form
+  @action initWelfareProfileForm = () => this.welfareProfileForm = new WeaForm();


  @observable tableStore = new TableStore(