feature/2.9.42310.01-薪资核算页面重构

pc4mobx/hrmSalary/pages/calculate/calculate.js

@@ -46,7 +46,7 @@ class Calculate extends Component {
     const { queryParams } = this.state;
     return (
       <WeaTop title={getLabel(538011, "薪资核算")} icon={<i className="icon-coms-fa"/>} iconBgcolor="#F14A2D"
-              buttons={this.renderCalculateOpts()}
+              buttons={this.renderCalculateOpts()} className="calculate-main-layout"
       >
         <div className="calculate-body">
           <CalculateTablelist queryParams={queryParams}/>

pc4mobx/hrmSalary/pages/calculate/components/calculateQuery/index.js

@@ -24,7 +24,6 @@ class Index extends Component {
         <WeaInputSearch value={name}
                         placeholder={getLabel(543431, "请输入薪资账套名称")}
                         onChange={v => this.props.onChange({ name: v })}
-                        onSearch={this.props.onSearch}
         />
       </div>
     );

pc4mobx/hrmSalary/pages/calculate/components/calculateTablelist/index.js

@@ -5,7 +5,8 @@
  * Date: 2023/10/9
  */
 import React, { Component } from "react";
-import { WeaLocaleProvider, WeaTable } from "ecCom";
+import { WeaHelpfulTip, WeaLocaleProvider, WeaTable } from "ecCom";
+import { Dropdown, Menu, Tag } from "antd";
 import { getSalaryAcctList } from "../../../../apis/calculate";
 
 const getLabel = WeaLocaleProvider.getLabel;
@@ -20,25 +21,19 @@ class Index extends Component {
   }
 
   componentDidMount() {
-    const { queryParams } = this.props;
-    const { dateRange, ...extra } = queryParams;
-    const [startMonthStr, endMonthStr] = dateRange || [];
-    const params = { startMonthStr, endMonthStr, ...extra };
-    this.getSalaryAcctList(params);
+    this.getSalaryAcctList(this.props);
   }
 
   componentWillReceiveProps(nextProps, nextContext) {
-    if (nextProps.queryParams !== this.props.queryParams) {
-      const { queryParams } = nextProps;
-      const { dateRange, ...extra } = queryParams;
-      const [startMonthStr, endMonthStr] = dateRange || [];
-      const params = { startMonthStr, endMonthStr, ...extra };
-      this.getSalaryAcctList(params);
-    }
+    if (nextProps.queryParams !== this.props.queryParams) this.getSalaryAcctList(nextProps);
   }
 
-  getSalaryAcctList = (params) => {
+  getSalaryAcctList = (props) => {
     const { pageInfo } = this.state;
+    const { queryParams } = props;
+    const { dateRange, ...extra } = queryParams;
+    const [startMonthStr, endMonthStr] = dateRange || [];
+    const params = { startMonthStr, endMonthStr, ...extra };
     const payload = { ...pageInfo, ...params };
     this.setState({ loading: true });
     getSalaryAcctList(payload).then(({ status, data }) => {
@@ -59,7 +54,6 @@ class Index extends Component {
                 case "salarySobName":
                   width = "20%";
                   break;
-                case "taxCycle":
                 case "description":
                   width = "15%";
                   break;
@@ -68,6 +62,56 @@ class Index extends Component {
                   break;
               }
               if (dataIndex === "operate") {
+                return {
+                  ...o, width: 170,
+                  title: <span>
+                    <span>{getLabel(30585, "操作")}</span>
+                    <WeaHelpfulTip
+                      placement="topLeft" style={{ marginLeft: 4 }}
+                      title={getLabel(111, "当前账套当次核算的工资单全部撤回才可重新核算")}
+                    />
+                  </span>,
+                  render: (__, record) => {
+                    const { operate = [] } = record;
+                    return <React.Fragment>
+                      {
+                        _.map(operate.slice(0, 2), f => (
+                          <a href="javascript:void(0);" style={{ marginRight: 10 }}>{f.text}</a>
+                        ))
+                      }
+                      {
+                        !_.isEmpty(operate.slice(2)) &&
+                        <Dropdown
+                          overlay={<Menu>
+                            {
+                              _.map(operate.slice(2), g => (<Menu.Item key={g.index}>{g.text}</Menu.Item>))
+                            }
+                          </Menu>
+                          }
+                        >
+                          <a href="javascript:void(0);"><i className="icon-coms-more"/></a>
+                        </Dropdown>
+                      }
+                    </React.Fragment>;
+                  }
+                };
+              } else if (dataIndex === "salarySobName") {
+                return {
+                  ...o, width,
+                  render: (text, record) => {
+                    const { acctTimes, backCalcStatus } = record;
+                    return <div className="salarySobNameWrapper">
+                      <span title={text}>{text}</span>
+                      <div className="salarySobNameTagWrapper">
+                        {
+                          backCalcStatus === 1 &&
+                          <i className="icon-coms-Refresh" title={getLabel(542638, "回算")}/>
+                        }
+                        <Tag color="blue">{`${getLabel(15323, "第")}${acctTimes}${getLabel(18929, "次")}`}</Tag>
+                      </div>
+                    </div>;
+                  }
+                };
               }
               return { ...o, width };
             })
@@ -87,14 +131,12 @@ class Index extends Component {
       onShowSizeChange: (current, pageSize) => {
         this.setState({
           pageInfo: { ...pageInfo, current, pageSize }
-        }, () => {
-        });
+        }, () => this.getSalaryAcctList(this.props));
       },
       onChange: current => {
         this.setState({
           pageInfo: { ...pageInfo, current }
-        }, () => {
-        });
+        }, () => this.getSalaryAcctList(this.props));
       }
     };
     return (

pc4mobx/hrmSalary/pages/calculate/index.less

@@ -30,6 +30,9 @@
 
   & > span {
     flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
   .salarySobNameTagWrapper {
@@ -64,18 +67,29 @@
   }
 }
 
-.calculate-body {
-  background: #f6f6f6;
-  height: 100%;
-  width: 100%;
-  padding: 16px;
+.calculate-main-layout {
+  .wea-new-top-content {
+    overflow-y: hidden;
+  }
 
-  .ant-table-tbody {
-    td {
-      width: 100%;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
+  .calculate-body {
+    height: 100%;
+    width: 100%;
+    padding: 16px;
+    overflow-y: auto;
+
+    .wea-new-table {
+      background: #fff;
     }
+
+    .ant-table-tbody {
+      td {
+        width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+
   }
 }