feature/2.10.1.2401.01-社保福利台账列表页面重构

pc4mobx/hrmSalary/pages/socialSecurityBenefits/standingBook/columns.js

@@ -41,3 +41,22 @@ export const socialAccountConditions = [
     title: ""
   }
 ];
+export const welfareRQConditions = [
+  {
+    items: [
+      {
+        colSpan: 1,
+        conditionType: "SELECT",
+        domkey: ["paymentOrganization"],
+        fieldcol: 14,
+        label: "个税扣缴义务人",
+        lanId: 537996,
+        labelcol: 6,
+        options: [],
+        viewAttr: 2
+      }
+    ],
+    defaultshow: true,
+    title: ""
+  }
+];

pc4mobx/hrmSalary/pages/socialSecurityBenefits/standingBook/components/welfareRecordQuery.js

@@ -0,0 +1,109 @@
+/*
+ * Author: 黎永顺
+ * name: 社保福利台账重构-查询组件
+ * Description:
+ * Date: 2024/1/23
+ */
+import React, { Component } from "react";
+import { inject, observer } from "mobx-react";
+import { WeaFormItem, WeaLocaleProvider, WeaSearchGroup, WeaTools } from "ecCom";
+import { WeaSwitch } from "comsMobx";
+import * as API from "../../../../apis/standingBook";
+import { welfareRQConditions } from "../columns";
+import { MonthRangePicker } from "../../../reportView/components/statisticalMicroSettingsSlide";
+import moment from "moment";
+
+const getLabel = WeaLocaleProvider.getLabel;
+const getKey = WeaTools.getKey;
+
+@inject("standingBookStore")
+@observer
+class WelfareRecordQuery extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      conditions: [],
+      dateRange: [
+        moment(new Date()).subtract(1, "year").startOf("year").format("YYYY-MM"),
+        moment(new Date()).endOf("year").format("YYYY-MM")
+      ]
+    };
+  }
+
+  componentDidMount() {
+    API.getAdminTaxAgentList().then(({ status, data }) => {
+      if (status) {
+        this.setState({
+          conditions: _.map(welfareRQConditions, item => {
+            return {
+              ...item,
+              items: _.map(item.items, o => {
+                if (getKey(o) === "paymentOrganization") {
+                  return { ...o, options: _.map(data, g => ({ key: g.id.toString(), showname: g.name })) };
+                }
+                return o;
+              })
+            };
+          })
+        }, () => {
+          const { standingBookStore: { welfareRQForm } } = this.props;
+          welfareRQForm.initFormFields(this.state.conditions);
+        });
+      }
+    });
+  }
+
+  renderForm = (form, conditions) => {
+    const { dateRange } = this.state;
+    const { isFormInit } = form;
+    const formParams = form.getFormParams();
+    let group = [];
+    isFormInit && conditions && conditions.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}
+                         onChange={this.getWelfareRecordLiost}/>
+            </WeaFormItem>)
+        });
+      });
+      group.push(
+        <WeaSearchGroup col={4} needTigger showGroup={c.defaultshow}
+                        items={[
+                          {
+                            com: (<WeaFormItem label={getLabel(542443, "账单月份")} labelCol={{ span: 6 }}
+                                               wrapperCol={{ span: 14 }}>
+                              <MonthRangePicker dateRange={dateRange} viewAttr={2}
+                                                onChange={v => this.setState({ dateRange: v }, () => this.getWelfareRecordLiost())}/>
+                            </WeaFormItem>)
+                          },
+                          ...items
+                        ]}
+        />);
+    });
+    return group;
+  };
+  getWelfareRecordLiost = () => {
+    const { standingBookStore: { welfareRQForm } } = this.props;
+    const { dateRange } = this.state;
+    const [startTime, endTime] = dateRange;
+    const payload = {
+      ...welfareRQForm.getFormParams(), startTime, endTime
+    };
+    console.log(payload);
+  };
+
+  render() {
+    const { standingBookStore: { welfareRQForm } } = this.props;
+    const { conditions } = this.state;
+    return (
+      <div className="salary-welfare-record-query">{this.renderForm(welfareRQForm, conditions)}</div>
+    );
+  }
+}
+
+export default WelfareRecordQuery;

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

@@ -54,3 +54,41 @@
     }
   }
 }
+
+//社保福利台账页面重构
+.salary-welfare-record {
+  min-width: 1000px;
+  overflow: auto;
+  width: 100%;
+  height: 100%;
+  background: #f6f6f6;
+
+  .salary-welfare-record-content {
+    width: 100%;
+    height: 100%;
+    padding: 8px 16px;
+    display: flex;
+    flex-direction: column;
+
+    .salary-welfare-record-query {
+      width: 100%;
+      height: 46px;
+      display: flex;
+      align-items: center;
+
+      .wea-search-group {
+        width: 100%;
+        padding: 0;
+
+        .wea-content {
+          padding: 0;
+
+          .rangePickerBox {
+            display: flex;
+            align-items: center;
+          }
+        }
+      }
+    }
+  }
+}

pc4mobx/hrmSalary/pages/socialSecurityBenefits/standingBook/standingBook.js

@@ -6,15 +6,28 @@
  * Date: 2024/1/23
  */
 import React, { Component } from "react";
-import { WeaLocaleProvider } from "ecCom";
+import { inject, observer } from "mobx-react";
+import { WeaLocaleProvider, WeaTop } from "ecCom";
+import { Button } from "antd";
+import WelfareRecordQuery from "./components/welfareRecordQuery";
+import "./index.less";
 
 const getLabel = WeaLocaleProvider.getLabel;
 
+@inject("standingBookStore", "taxAgentStore")
+@observer
 class StandingBook extends Component {
   render() {
+    const { taxAgentStore: { showOperateBtn } } = this.props;
+    const rightBtns = [<Button type="primary">{getLabel(538780, "核算")}</Button>];
     return (
-      <div>
-        社保福利台账重构
+      <div className="salary-welfare-record">
+        <WeaTop title={getLabel(538002, "社保福利台账")} icon={<i className="icon-coms-fa"/>}
+                iconBgcolor="#F14A2D" buttons={showOperateBtn ? rightBtns : []}>
+          <div className="salary-welfare-record-content">
+            <WelfareRecordQuery/>
+          </div>
+        </WeaTop>
       </div>
     );
   }

pc4mobx/hrmSalary/stores/StandingBook.js

@@ -11,6 +11,7 @@ export class StandingBookStore {
   @action initAccountForm = () => this.accountForm = new WeaForm();
   @observable addCPForm = new WeaForm(); // 社保台账详情页面，添加补差人员form
   @action initAddCPForm = () => this.addCPForm = new WeaForm();
+  @observable welfareRQForm = new WeaForm(); // 社保台账页面重构，查询form
 
 
   @observable tableStore = new TableStore(); // new table