人员信息报送-查看详情页面开发完成

pc4mobx/hrmSalary/pages/employeedeclareDetail/constants.js

@@ -0,0 +1,27 @@
+export const submitStatus = [
+  {
+    key: "ALL",
+    showname: "全部（报送状态）",
+    lanId: 332
+  },
+  {
+    key: "NOT_DECLARE",
+    showname: "待报送",
+    lanId: 111
+  },
+  {
+    key: "DECLARING",
+    showname: "报送中",
+    lanId: 111
+  },
+  {
+    key: "DECLARE_FAIL",
+    showname: "报送失败",
+    lanId: 111
+  },
+  {
+    key: "DECLARE_SUCCESS",
+    showname: "报送成功",
+    lanId: 111
+  }
+];

pc4mobx/hrmSalary/pages/employeedeclareDetail/index.js

@@ -5,8 +5,9 @@
  * Date: 2023/8/11
  */
 import React, { Component } from "react";
-import { WeaLocaleProvider, WeaTop } from "ecCom";
-import { Button, Dropdown } from "antd";
+import { WeaDatePicker, WeaLocaleProvider, WeaSelect, WeaTab, WeaTop } from "ecCom";
+import { submitStatus } from "./constants";
+import { Button, Dropdown, Menu } from "antd";
 import { inject, observer } from "mobx-react";
 import "./index.less";
 
@@ -15,26 +16,71 @@ const { getLabel } = WeaLocaleProvider;
 @inject("taxAgentStore")
 @observer
 class Index extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      selectedKey: "0"
+    };
+  }
+
   componentDidMount() {
     document.title = getLabel(544289, "人员信息报送");
   }
 
   render() {
+    const { selectedKey } = this.state;
     const { taxAgentStore: { showOperateBtn } } = this.props;
+    const menu = (
+      <Menu>
+        <Menu.Item key="1">{getLabel(32136, "批量删除")}</Menu.Item>
+        <Menu.Item key="2">{getLabel(111, "批量编辑")}</Menu.Item>
+        <Menu.Item key="3">{getLabel(81272, "导出全部")}</Menu.Item>
+        <Menu.Item key="4">{getLabel(543715, "导出所选")}</Menu.Item>
+      </Menu>
+    );
     const buttons = [
       <Button type="primary">{getLabel(111, "全部报送")}</Button>,
-      <Button type="primary">{getLabel(111, "全部报送")}</Button>,
-      <Dropdown overlay={[]}>
+      <Button type="ghost">{getLabel(111, "获取报送结果")}</Button>,
+      <Button type="ghost">{getLabel(111, "刷新数据")}</Button>,
+      <WeaDatePicker format="YYYY-MM" style={{ width: 200 }}/>,
+      <Dropdown overlay={menu}>
         <Button type="ghost" icon="ellipsis" className="moreBtn"/>
       </Dropdown>
     ];
+    const topTab = [
+      { title: getLabel(332, "全部"), viewcondition: "0" },
+      { title: getLabel(111, "本月新增"), viewcondition: "1" },
+      { title: getLabel(111, "本月信息变动"), viewcondition: "2" }
+    ];
     return (
       <WeaTop
         title={getLabel(544289, "人员信息报送")} iconBgcolor="#F14A2D"
         icon={<i className="icon-coms-fa"/>} className="declareWrapper"
         buttons={showOperateBtn ? buttons : []}
       >
-        <div style={{ height: "100%", background: "#f6f6f6", padding: 16 }}></div>
+        <div style={{ height: "100%", background: "#f6f6f6" }}>
+          <div className="base-info">
+            <div className="left"><span>{getLabel(537996, "个税扣缴义务人")}：</span></div>
+            <div className="right">
+              <div className="header-declare-info">
+                <a href="javascript:void(0);" className="fail">{getLabel(111, "报送失败")}:&nbsp;&nbsp;0</a>
+                <span className="not">{getLabel(111, "未报送")}:&nbsp;&nbsp;0</span>
+              </div>
+            </div>
+          </div>
+          <div className="listview-com-layout">
+            <WeaTab
+              datas={topTab} keyParam="viewcondition"
+              selectedKey={selectedKey} searchType={["base", "advanced"]}
+              buttons={[
+                <WeaSelect
+                  style={{ width: 200 }}
+                  options={_.map(submitStatus, it => ({ ...it, showname: getLabel(it.lanId, it.showname) }))}/>
+              ]}
+              onChange={key => this.setState({ selectedKey: key })}
+            />
+          </div>
+        </div>
       </WeaTop>
     );
   }

pc4mobx/hrmSalary/pages/employeedeclareDetail/index.less

@@ -15,4 +15,37 @@
       color: #57c5f7;
     }
   }
+
+  .base-info {
+    background: #ebf4ff;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    min-height: 50px;
+    margin-bottom: 8px;
+    border-radius: 4px;
+    padding: 0 16px;
+
+    .right .header-declare-info {
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+      font-size: 12px;
+      margin-right: 16px;
+
+      .fail {
+        color: #5d9cec;
+        cursor: pointer;
+        margin-right: 10px;
+      }
+    }
+  }
+
+  .listview-com-layout {
+    padding: 0 16px;
+
+    .wea-tab .wea-tab-right, .wea-input-focus {
+      background: transparent;
+    }
+  }
 }