薪资账套页面重构

pc4mobx/hrmSalary/pages/ledgerPage/components/index.less

@@ -26,25 +26,30 @@
 }
 
 //薪资账套基本设置信息
-.baseSettingWrapper{
+.baseSettingWrapper {
   padding: 12px 12px 12px 20px;
-  .baseSettingLeft{
+
+  .baseSettingLeft {
     border: 1px solid #ebedf0;
-    padding: 0!important;
+    padding: 0 !important;
     border-bottom: none;
-    .wea-form-item{
+
+    .wea-form-item {
       padding: 4px 10px;
       border-bottom: 1px solid #ebedf0;
-      .desc{
+
+      .desc {
         line-height: 32px;
       }
     }
   }
-  .baseSettingRight{
+
+  .baseSettingRight {
     width: 100%;
     background: #fff;
     border: 1px solid #ebedf0;
-    .title{
+
+    .title {
       border-bottom: 1px solid #ebedf0;
       background: #f7fbfe;
       width: 100%;
@@ -52,16 +57,22 @@
       line-height: 40px;
       font-size: 14px;
     }
-    .descContent{
+
+    .descContent {
       color: #999;
       width: 100%;
       padding: 0 12px;
       line-height: 24px;
-      .descTitle{
+
+      .descTitle {
         font-size: 14px;
         color: #333;
         line-height: 26px;
       }
     }
+
+    .notice {
+      color: #ff4d4f;
+    }
   }
 }

pc4mobx/hrmSalary/pages/ledgerPage/components/ledgerBaseSetting.js

@@ -9,6 +9,7 @@ import { WeaCheckbox, WeaFormItem, WeaHelpfulTip, WeaInput, WeaSelect, WeaTextar
 import { Col, Row } from "antd";
 import { inject, observer } from "mobx-react";
 import { baseSettingFormItem } from "../config";
+import { getAddMonthYearMonth, getCurrentYearMonth, getSubtractMonthYearMonth } from "../../../util/date";
 import "./index.less";
 
 @inject("taxAgentStore")
@@ -97,7 +98,7 @@ class LedgerBaseSetting extends Component {
               })
             }
           </Col>
-          <Col span={6}><MonthCycleDesc/></Col>
+          <Col span={6}><MonthCycleDesc {...settingBaseInfo}/></Col>
         </Row>
       </div>
     );
@@ -122,19 +123,36 @@ const CustomSelect = (props) => {
   </Row>;
 };
 const MonthCycleDesc = (props) => {
+  const { taxCycleType, socialSecurityCycleType } = props;
   return <div className="baseSettingRight">
     <div className="title">月份周期说明</div>
     <div className="descContent">
-      <div>例：薪资所属月是2022-12（即核算员工12月的工资）</div>
+      <div>
+        例：薪资所属月是<span className="notice">{moment().format("YYYY-MM")}</span>（即核算员工<span
+        className="notice">{moment().format("MM")}</span>月的工资）
+      </div>
       <div>根据您当前的选择，相应的周期为：</div>
       <div className="descTitle">薪资周期</div>
       <div>2022-12-04至2023-01-03</div>
       <div className="descTitle">税款所属期</div>
-      <div>2022-12-04至2023-01-03</div>
+      <div className="notice">{getMonth(taxCycleType)}</div>
       <div className="descTitle">考勤取值周期</div>
       <div>2022-12-04至2023-01-03</div>
       <div className="descTitle">福利台账月份</div>
-      <div>2022-12-04至2023-01-03</div>
+      <div>引用<span className="notice">{getMonth(socialSecurityCycleType)}</span>的福利台账数据</div>
     </div>
   </div>;
 };
+
+const getMonth = (salaryCycleType) => {
+  switch (salaryCycleType) {
+    case "1": // 上上月
+      return getSubtractMonthYearMonth(2);
+    case "2": //  上月
+      return getSubtractMonthYearMonth(1);
+    case "3": // 本月
+      return getCurrentYearMonth();
+    case "4": // 下月
+      return getAddMonthYearMonth(1);
+  }
+};