社保福利档案新增编辑页面重构

pc4mobx/hrmSalary/pages/socialSecurityBenefits/archives/index.less

@@ -12,6 +12,10 @@
         padding: 4px 16px;
         border-bottom: 1px solid #e5e5e5;
         border-right: 1px solid #e5e5e5;
+
+        .wea-form-item {
+          padding: 0;
+        }
       }
     }
   }

pc4mobx/hrmSalary/pages/socialSecurityBenefits/archives/socialSecurityForm.js

@@ -1,6 +1,7 @@
 import React from "react";
-import { WeaCheckbox, WeaSearchGroup } from "ecCom";
+import { WeaCheckbox, WeaDatePicker, WeaFormItem, WeaInput, WeaSearchGroup, WeaSelect } from "ecCom";
 import { inject, observer } from "mobx-react";
+import { toJS } from "mobx";
 import "./index.less";
 
 @inject("archivesStore")
@@ -46,27 +47,58 @@ export default class SocialSecurityForm extends React.Component {
 
   render() {
     const { archivesStore: { socialSecurityForm, socialSecurityPaymentForm } } = this.props;
-    const { items } = socialSecurityForm;
+    const { items, data: socialData } = socialSecurityForm;
     let baseData = socialSecurityForm.data;
     let paymentData = socialSecurityPaymentForm.data;
     let paymentItems = socialSecurityPaymentForm.items;
     // Integer数据转为string
-    let data = { ...baseData };
-    if (!_.isNil(data)) {
-      Object.keys(data).map(key => {
-        if (!_.isNil(data[key])) {
-          data[key] = data[key].toString();
-        }
-      });
-    }
-    const { nonPayment } = data;
-    console.log(baseData, data);
+    // let socialData = { ...baseData };
+    // if (!_.isNil(socialData)) {
+    //   Object.keys(socialData).map(key => {
+    //     if (!_.isNil(socialData[key])) {
+    //       socialData[key] = socialData[key].toString();
+    //     }
+    //   });
+    // }
+    const { nonPayment = "", schemeAccount = "", socialStartTime = "", socialEndTime = "" } = socialData || {};
+    const socialItems = !_.isNil(toJS(items)) ? [
+      ..._.map(_.filter(toJS(items)[0].items, it => it.domkey[0] !== "paymentOrganization"),
+        item => ({
+          com: SocialSelect({
+            label: item.label,
+            value: !_.isNil(socialData[item["domkey"][0]]) ? socialData[item["domkey"][0]].toString() : "",
+            options: item.options,
+            onChange: this.handleFormChange
+          })
+        })),
+      {
+        com: SocialDatePicker({
+          label: "社保起始缴纳月",
+          value: socialStartTime,
+          onChange: this.handleFormChange
+        })
+      },
+      {
+        com: SocialEditInput({
+          label: "社保账号",
+          value: schemeAccount,
+          onChange: this.handleFormChange
+        })
+      },
+      {
+        com: SocialDatePicker({
+          label: "社保最后缴纳月",
+          value: socialEndTime,
+          onChange: this.handleFormChange
+        })
+      }
+    ] : [];
     return (
       <div className="socialFormWrapper">
         <WeaSearchGroup
           title="社保基础信息"
-          customComponent={<SocialTitle value={nonPayment} onChange={this.handleFormChange}/>}
-          items={[]} col={2} showGroup needTigger={false}/>
+          customComponent={<SocialTitle value={nonPayment.toString()} onChange={this.handleFormChange}/>}
+          items={socialItems} col={2} showGroup needTigger={false}/>
         {/*<div style={{ overflow: "hidden" }}>*/}
         {/*  <WeaCheckbox*/}
         {/*    style={{ float: "right", marginRight: "10px", marginTop: "10px" }}*/}
@@ -180,3 +212,27 @@ const SocialTitle = (props) => {
   const { value, onChange } = props;
   return <WeaCheckbox value={value} content="暂不缴纳" onChange={onChange}/>;
 };
+const SocialSelect = (props) => {
+  const { value, onChange, options, label, labelColSpan = 12, wrapperColSpan = 12 } = props;
+  return <WeaFormItem label={label} labelCol={{ span: labelColSpan }} wrapperCol={{ span: wrapperColSpan }}>
+    <WeaSelect value={value} options={options} onChange={onChange}/>
+  </WeaFormItem>;
+};
+const SocialEditInput = (props) => {
+  const { value, onChange, label, labelColSpan = 12, wrapperColSpan = 12 } = props;
+  return (
+    <WeaFormItem label={label} labelCol={{ span: labelColSpan }} wrapperCol={{ span: wrapperColSpan }}>
+      <WeaInput value={value} onChange={onChange}/>
+    </WeaFormItem>
+  );
+};
+const SocialDatePicker = (props) => {
+  const { value, onChange, label, format = "YYYY-MM", viewAttr = 2, labelColSpan = 12, wrapperColSpan = 12 } = props;
+  return (
+    <WeaFormItem label={label} labelCol={{ span: labelColSpan }} wrapperCol={{ span: wrapperColSpan }}>
+      <WeaDatePicker value={value} viewAttr={viewAttr} format={format} onChange={onChange}/>
+    </WeaFormItem>
+  );
+};
+
+