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

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

@@ -15,25 +15,23 @@ export default class SocialSecurityForm extends React.Component {
     getPaymentForm(this.props.employeeId, "SOCIAL_SECURITY", siSchemeId, this.props.record.paymentOrganization);
   }
 
-  // 表单变化
-  handleFormChange = (params) => {
-    console.log("params", params);
-    return;
+  handleFormChange = ({ key, value }) => {
+    const params = { [key]: value };
     const { archivesStore: { socialSecurityForm, setSocialSecurityForm }, onChangeRecordSchemeId } = this.props;
     const { data } = socialSecurityForm;
     let request = { ...data, ...params };
     let form = { ...socialSecurityForm };
     form.data = request;
     setSocialSecurityForm(form);
-    Object.keys(params).length > 1 &&
-    onChangeRecordSchemeId(params.socialSchemeId);
+    key === "socialName" && this.handleFetchPaymentForm(value);
+    key === "socialName" && onChangeRecordSchemeId(value);
   };
 
-  // 获取基数表单
-  handleFetchPaymentForm(value) {
-    const { archivesStore: { getPaymentForm } } = this.props;
-    getPaymentForm(this.props.employeeId, "SOCIAL_SECURITY", value, this.props.record.paymentOrganization);
-  }
+  handleFetchPaymentForm = (value) => {
+    const { archivesStore: { getPaymentForm }, employeeId, record } = this.props;
+    const { paymentOrganization } = record;
+    getPaymentForm(employeeId, "SOCIAL_SECURITY", value, paymentOrganization);
+  };
 
   //基数变化
   handlePaymentChange(params) {
@@ -67,6 +65,7 @@ export default class SocialSecurityForm extends React.Component {
       ..._.map(_.filter(toJS(items)[0].items, it => it.domkey[0] !== "paymentOrganization"),
         item => ({
           com: SocialSelect({
+            key: item["domkey"][0],
             label: item.label,
             value: !_.isNil(socialData[item["domkey"][0]]) ? socialData[item["domkey"][0]].toString() : "",
             options: item.options,
@@ -75,6 +74,7 @@ export default class SocialSecurityForm extends React.Component {
         })),
       {
         com: SocialDatePicker({
+          key: "socialStartTime",
           label: "社保起始缴纳月",
           value: socialStartTime,
           onChange: this.handleFormChange
@@ -82,6 +82,7 @@ export default class SocialSecurityForm extends React.Component {
       },
       {
         com: SocialEditInput({
+          key: "schemeAccount",
           label: "社保账号",
           value: schemeAccount,
           onChange: this.handleFormChange
@@ -89,6 +90,7 @@ export default class SocialSecurityForm extends React.Component {
       },
       {
         com: SocialDatePicker({
+          key: "socialEndTime",
           label: "社保最后缴纳月",
           value: socialEndTime,
           onChange: this.handleFormChange
@@ -99,7 +101,8 @@ export default class SocialSecurityForm extends React.Component {
       <div className="socialFormWrapper">
         <WeaSearchGroup
           title="社保基础信息"
-          customComponent={<SocialTitle value={nonPayment.toString()} onChange={this.handleFormChange}/>}
+          customComponent={<SocialTitle key="nonPayment" value={nonPayment.toString()}
+                                        onChange={this.handleFormChange}/>}
           items={socialItems} col={2} showGroup needTigger={false}/>
         {
           !_.isEmpty(socialName) && !_.isEmpty(toJS(paymentItems)) && _.map(toJS(paymentItems), item => {
@@ -107,6 +110,7 @@ export default class SocialSecurityForm extends React.Component {
             return <WeaSearchGroup
               items={_.map(items, child => ({
                 com: SocialInputNumber({
+                  key: child["domkey"][0],
                   label: child.label,
                   value: !_.isNil(paymentData[child["domkey"][0]]) ? paymentData[child["domkey"][0]].toString() : "",
                   onChange: this.handleFormChange
@@ -226,36 +230,46 @@ export default class SocialSecurityForm extends React.Component {
   }
 }
 const SocialTitle = (props) => {
-  const { value, onChange } = props;
-  return <WeaCheckbox value={value} content="暂不缴纳" onChange={onChange}/>;
+  const { value, onChange, key } = props;
+  return <WeaCheckbox value={value} content="暂不缴纳" onChange={(val) => onChange({ key, value: val })}/>;
 };
 const SocialSelect = (props) => {
-  const { value, onChange, options, label, labelColSpan = 12, wrapperColSpan = 12 } = props;
+  const { key, 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}/>
+    <WeaSelect value={value} options={options} onChange={(val) => onChange({ key, value: val })}/>
   </WeaFormItem>;
 };
 const SocialEditInput = (props) => {
-  const { value, onChange, label, labelColSpan = 12, wrapperColSpan = 12 } = props;
+  const { key, value, onChange, label, labelColSpan = 12, wrapperColSpan = 12 } = props;
   return (
     <WeaFormItem label={label} labelCol={{ span: labelColSpan }} wrapperCol={{ span: wrapperColSpan }}>
-      <WeaInput value={value} onChange={onChange}/>
+      <WeaInput value={value} onChange={(val) => onChange({ key, value: val })}/>
     </WeaFormItem>
   );
 };
 const SocialInputNumber = (props) => {
-  const { value, onChange, label, labelColSpan = 12, wrapperColSpan = 12 } = props;
+  const { key, value, onChange, label, labelColSpan = 12, wrapperColSpan = 12 } = props;
   return (
     <WeaFormItem label={label} labelCol={{ span: labelColSpan }} wrapperCol={{ span: wrapperColSpan }}>
-      <WeaInputNumber value={value} onChange={onChange} min={0} precision={2}/>
+      <WeaInputNumber value={value} onChange={(val) => onChange({ key, value: val })} min={0} precision={2}/>
     </WeaFormItem>
   );
 };
 const SocialDatePicker = (props) => {
-  const { value, onChange, label, format = "YYYY-MM", viewAttr = 2, labelColSpan = 12, wrapperColSpan = 12 } = props;
+  const {
+    key,
+    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}/>
+      <WeaDatePicker value={value} viewAttr={viewAttr} format={format}
+                     onChange={(val) => onChange({ key, value: val })}/>
     </WeaFormItem>
   );
 };