社保方案list

2022-03-12 17:07:11 +08:00 · 2022-03-12 17:07:11 +08:00 · f5a46964dd
parent 5af7225b24
commit f5a46964dd
8 changed files with 215 additions and 67 deletions
--- a/pc4mobx/hrmSalary/components/TipLabel/index.js
+++ b/pc4mobx/hrmSalary/components/TipLabel/index.js
@ -0,0 +1,17 @@
+import React from 'react';
+import "./index.less"
+
+export default class TipLabel extends React.Component {
+    render() {
+        return (
+            <div className="tipLabelWrapper">
+                <div className="titleWrapper">
+                    <span className="title">小提示</span>
+                </div>
+                <div className="tipContentWrapper">
+                    {this.props.tipList.map(item => <div className="tipContentItem">{item}</div>)}
+                </div>
+            </div>
+        )
+    }
+}
--- a/pc4mobx/hrmSalary/components/TipLabel/index.less
+++ b/pc4mobx/hrmSalary/components/TipLabel/index.less
@ -0,0 +1,36 @@
+.tipLabelWrapper {
+    border-left: 1px solid #e2ecf2;
+    border-bottom: 1px solid #e2ecf2;
+    border-right: 1px solid #e2ecf2;
+    border-radius: 0px 0px 5px 5px;
+    width: 100%;
+    overflow: hidden;
+    .titleWrapper {
+        width: 100%;
+        line-height: 19.2px;
+        padding: 10px;
+        border-bottom: 1px solid #e2ecf2;
+        background-color: #f7fbfe;
+    }
+    .tipContentWrapper {
+        padding-bottom: 10px;
+    }
+    .tipContentItem {
+        line-height: 20px;
+        padding: 0px 16px;
+        padding-top: 10px;
+        color: rgb(153, 153, 153);
+    }
+    .tipContentItem:first {
+        padding-top: 0px;
+    }
+
+    .formLabel {
+        font-size: 14px;
+    }
+    .contentWrapper {
+        width: 100%;
+        overflow: hidden;
+    }
+
+}
--- a/pc4mobx/hrmSalary/components/twoColContent/index.js
+++ b/pc4mobx/hrmSalary/components/twoColContent/index.js
@ -0,0 +1,16 @@
+import React from 'react'
+import { Row, Col } from 'antd'
+
+export default class TwoColContent extends React.Component {
+    render() {
+        return <Row>
+            <Col span={18}>
+                {this.props.leftContent}
+            </Col>
+
+            <Col span={6}>
+                {this.props.rightContent}
+            </Col>
+        </Row>
+    }
+}
--- a/pc4mobx/hrmSalary/pages/socialSecurityBenefits/programme/index.js
+++ b/pc4mobx/hrmSalary/pages/socialSecurityBenefits/programme/index.js
@ -4,14 +4,17 @@ import { toJS } from 'mobx';

 import { Button, Table, DatePicker } from 'antd';

-import { WeaTop, WeaTab, WeaRightMenu, WeaRangePicker, WeaTable, WeaInputSearch, WeaSlideModal } from 'ecCom';
+import { WeaTop, WeaTab, WeaRightMenu, WeaRangePicker, WeaInputSearch, WeaSlideModal } from 'ecCom';
+import { WeaTableNew } from "comsMobx"

 import "./index.less";
+const WeaTable = WeaTableNew.WeaTable;

 import { renderNoright, getSearchs } from '../../../util'; // 渲染form数据的方法：因为多个页面都会使用，所以抽的公共方法在util中
 import CustomTab from '../../../components/customTab';
 import ContentWrapper from '../../../components/contentWrapper';
 import SlideModalTitle from '../../../components/slideModalTitle';
+import TipLabel from '../../../components/TipLabel'


 import {
@ -23,22 +26,29 @@ import {

 const { MonthPicker } = DatePicker;

-@inject('baseTableStore')
+import TwoColContent  from '../../../components/twoColContent';
+
+@inject('programmeStore')
@observer
 export default class Programme extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: "",
-      selectedKey: "0",
      searchValue: "",
      slideVisiable: false
    }
  }
-  render() {
-    const { baseTableStore } = this.props;
-    const { loading, hasRight, form, condition, tableStore, showSearchAd, getTableDatas, doSearch, setShowSearchAd } = baseTableStore;

+  componentWillMount() {
+    const { programmeStore } = this.props;
+    const {doInit} = programmeStore;
+    doInit();
+  }
+  render() {
+    const { programmeStore } = this.props;
+    const { loading, hasRight, form, condition, tableStore, showSearchAd, getTableDatas, doSearch, setShowSearchAd } = programmeStore;
+    const { selectedKey, setSelectedKey, getCustomCategoryList, customTableStore } = programmeStore;
    if (!hasRight && !loading) { // 无权限处理
      return renderNoright();
    }
@ -67,19 +77,19 @@ export default class Programme extends React.Component {
    const topTab = [
      {
        title: "社保",
-        viewcondition: "0"
+        viewcondition: "SOCIAL_SECURITY"
      },
      {
        title: "公积金",
-        viewcondition: "1"
+        viewcondition: "ACCUMULATION_FUND"
      },
      {
        title: "企业年金及其他福利",
-        viewcondition: "2"
+        viewcondition: "OTHER"
      },
      {
        title: "自定义福利",
-        viewcondition: "3"
+        viewcondition: "custom"
      }
    ];

@ -94,6 +104,15 @@ export default class Programme extends React.Component {

    }

+    const renderCustomRightContent = () => {
+      let tipList = [
+        "1、可以为社保、公积金、企业年金及其他福利新增自定义的福利项，如：残疾保险等",
+        "2、新增自定义福利默认启用，社保福利方案中的自定义福利项均未开启缴纳，当前页面的自定义福利项才可以停用；停用后再新增方案时没有该福利项",
+        "3、自定义福利若要缴纳，需要在方案里填写缴纳相关数据"
+      ]
+      return (<TipLabel tipList={tipList} />)
+    }
+
    return (
      <div className="mySalaryBenefitsWrapper">
        <WeaRightMenu
@ -113,21 +132,35 @@ export default class Programme extends React.Component {
                renderSearchOperationItem()
              }
              onChange={(v) => {
-                this.setState({ selectedKey: v })
+                setSelectedKey(v)
+                if(v == "custom") { // 自定义福利
+                  getCustomCategoryList()
+                } else {
+                  getTableDatas(v)
+                }
              }}
            />
            {
-              this.state.selectedKey == '0' && <WeaTable columns={socialSecurityColumns} dataSource={dataSource} />
-            }
-            {
-              this.state.selectedKey == '1' && <WeaTable columns={accumulationFundColumns} dataSource={dataSource} scroll={{ x: 1000 }} />
-            }
-            {
-              this.state.selectedKey == '2' && <WeaTable columns={otherBenefitsColumns} dataSource={dataSource} />
-            }
-            {
-              this.state.selectedKey == "3" && <WeaTable columns={CustomBenefitsColumns} dataSource={dataSource} />
+              selectedKey == "custom" ? 
+              <TwoColContent 
+                leftContent={
+                  <WeaTable // table内部做了loading加载处理，页面就不需要再加了
+                    comsWeaTableStore={tableStore} // table store
+                    hasOrder={true} // 是否启用排序
+                    needScroll={true} // 是否启用table内部列表滚动，将自适应到父级高度
+                  />
+                }
+                rightContent={
+                  renderCustomRightContent()
+                }
+              /> :
+              <WeaTable // table内部做了loading加载处理，页面就不需要再加了
+                comsWeaTableStore={tableStore} // table store
+                hasOrder={true} // 是否启用排序
+                needScroll={true} // 是否启用table内部列表滚动，将自适应到父级高度
+              />
            }
+            
          </WeaTop>
        </WeaRightMenu>
        <WeaSlideModal visible={this.state.slideVisiable}
--- a/pc4mobx/hrmSalary/pages/taxAgent/index.js
+++ b/pc4mobx/hrmSalary/pages/taxAgent/index.js
@ -20,6 +20,7 @@ import { columns, dataSource } from './columns';
 import { logColumns } from '../../common/columns'
 import LogViewModal from '../../components/logViewModal';
 import EditModal from './editModal'
+import TipLabel from '../../components/TipLabel'

 const { MonthPicker } = DatePicker;

@ -156,14 +157,9 @@ export default class TaxAgent extends React.Component {
        "2、删除个税扣缴义务人需先确认档案里无人员使用该个税扣缴义务人，否则不予删除；"
      ]
      return (
-        <div className="tipLabelWrapper">
-          <div className="titleWrapper">
-            <span className="title">小提示</span>
-          </div>
-          <div className="tipContentWrapper">
-            {tipList.map(item => <div className="tipContentItem">{item}</div>)}
-          </div>
-        </div>
+        <TipLabel 
+          tipList={tipList}
+        />
      )
    }

--- a/pc4mobx/hrmSalary/pages/taxAgent/index.less
+++ b/pc4mobx/hrmSalary/pages/taxAgent/index.less
@ -1,40 +1,3 @@
-.tipLabelWrapper {
-    border-left: 1px solid #e2ecf2;
-    border-bottom: 1px solid #e2ecf2;
-    border-right: 1px solid #e2ecf2;
-    border-radius: 0px 0px 5px 5px;
-    width: 100%;
-    overflow: hidden;
-    .titleWrapper {
-        width: 100%;
-        line-height: 19.2px;
-        padding: 10px;
-        border-bottom: 1px solid #e2ecf2;
-        background-color: #f7fbfe;
-    }
-    .tipContentWrapper {
-        padding-bottom: 10px;
-    }
-    .tipContentItem {
-        line-height: 20px;
-        padding: 0px 16px;
-        padding-top: 10px;
-        color: rgb(153, 153, 153);
-    }
-    .tipContentItem:first {
-        padding-top: 0px;
-    }
-
-    .formLabel {
-        font-size: 14px;
-    }
-    .contentWrapper {
-        width: 100%;
-        overflow: hidden;
-    }
-
-}
-
 .logViewModal {
    .searchBar {
        display: flex;
--- a/pc4mobx/hrmSalary/stores/index.js
+++ b/pc4mobx/hrmSalary/stores/index.js
@ -7,6 +7,7 @@ import { taxRateStore } from './taxRate';
 import { CumDeductStore } from "./cumDeduct"
 import { OtherDeductStore } from "./otherDeduct" 
 import { CumSituationStore } from './cumSituation'
+import { ProgrammeStore } from './programme'

 module.exports = {
  baseFormStore: new BaseFormStore(),
@ -16,6 +17,7 @@ module.exports = {
  taxRateStore: new taxRateStore(),
  cumDeductStore: new CumDeductStore(),
  otherDeductStore: new OtherDeductStore(),
-  cumSituationStore: new CumSituationStore()
+  cumSituationStore: new CumSituationStore(),
+  programmeStore: new ProgrammeStore()
 };

--- a/pc4mobx/hrmSalary/stores/programme.js
+++ b/pc4mobx/hrmSalary/stores/programme.js
@ -0,0 +1,85 @@
+import { observable, action, toJS } from 'mobx';
+import { message } from 'antd';
+import { WeaForm, WeaTableNew } from 'comsMobx';
+
+import * as API from '../apis/welfareScheme'; // 引入API接口文件
+
+const { TableStore } = WeaTableNew;
+
+export class ProgrammeStore {
+  @observable tableStore = new TableStore(); // new table
+  @observable form = new WeaForm(); // nrew 一个form
+  @observable condition = []; // 存储后台得到的form数据
+  @observable hasRight = true; // 判断用户是有权限查看当前页面： 没有权限渲染无权限页面，有权限渲染数据
+  @observable showSearchAd = false; // 高级搜索面板显示
+  @observable loading = true; // 数据加载状态
+  @observable selectedKey = "SOCIAL_SECURITY";
+
+  @action
+  setSelectedKey = selectedKey => this.selectedKey = selectedKey;
+
+  // 初始化操作
+  @action
+  doInit = () => {
+    this.getTableDatas();
+    // this.getCustomCategoryList();
+  }
+
+  // 获得高级搜索表单数据
+  @action
+  getCondition = () => {
+    API.getForm().then(action(res => {
+      if (res.status) { // 接口请求成功/失败处理
+        this.condition = res.condition;
+        this.form.initFormFields(res.condition); // 渲染高级搜索form表单
+      } else {
+        message.error(res.msg || '接口调用失败！')
+      }
+    }));
+  }
+
+  // 渲染table数据
+  @action
+  getTableDatas = (selectKey = "SOCIAL_SECURITY", params) => {
+    this.loading = true;
+    const formParams = this.form.getFormParams() || {};
+    params = params || formParams;
+    params.welfareTypeEnum = selectKey
+    API.getTable(params).then(action(res => {
+      if (res.status) { // 接口请求成功/失败处理
+        this.tableStore.getDatas(res.data.datas); // table 请求数据
+      } else {
+        message.error(res.msg || '接口调用失败！')
+      }
+      this.loading = false;
+    }));
+  }
+
+
+  // 渲染自定义福利
+  @action
+  getCustomCategoryList = (selectKey = "SOCIAL_SECURITY", params) => {
+    this.loading = true;
+    const formParams = this.form.getFormParams() || {};
+    params = params || formParams;
+    params.welfareTypeEnum = selectKey
+    API.getCustomCategoryList(params).then(action(res => {
+      if (res.status) { // 接口请求成功/失败处理
+        this.tableStore.getDatas(res.data.datas); // table 请求数据
+      } else {
+        message.error(res.msg || '接口调用失败！')
+      }
+      this.loading = false;
+    }));
+  }
+
+  @action
+  setShowSearchAd = bool => this.showSearchAd = bool;
+
+  // 高级搜索 - 搜索
+  @action doSearch = () => {
+    this.getTableDatas();
+    this.showSearchAd = false;
+  }
+
+}