数据采集页面重构

pc4mobx/hrmSalary/apis/cumDeduct.js

@@ -1,5 +1,5 @@
 import { WeaTools } from "ecCom";
-import { postFetch } from '../util/request';
+import { postFetch } from "../util/request";
 
 //数据采集-累计专项附加扣除列表
 export const getCumDeductList = (params) => {
@@ -7,9 +7,9 @@ export const getCumDeductList = (params) => {
     method: "POST",
     mode: "cors",
     headers: {
-      "Content-Type": "application/json",
+      "Content-Type": "application/json"
     },
-    body: JSON.stringify(params),
+    body: JSON.stringify(params)
   }).then((res) => res.json());
 };
 
@@ -52,9 +52,9 @@ export const getCumDeductDetailList = (params) => {
     method: "POST",
     mode: "cors",
     headers: {
-      "Content-Type": "application/json",
+      "Content-Type": "application/json"
     },
-    body: JSON.stringify(params),
+    body: JSON.stringify(params)
   }).then((res) => res.json());
 };
 
@@ -62,9 +62,9 @@ export const getCumDeductDetailList = (params) => {
 export const exportCumDeductDetailList = (id, ids = "") => {
   fetch(
     "/api/bs/hrmsalary/addUpDeduction/exportDetail?accumulatedSpecialAdditionalDeductionId=" +
-      id +
-      "&ids=" +
-      ids+ "&taxAgentId=" + taxAgentId
+    id +
+    "&ids=" +
+    ids + "&taxAgentId=" + taxAgentId
   ).then((res) =>
     res.blob().then((blob) => {
       var filename = `累计专项附加扣除.xlsx`;
@@ -84,9 +84,9 @@ export const importCumDeductParam = (params) => {
     method: "POST",
     mode: "cors",
     headers: {
-      "Content-Type": "application/json",
+      "Content-Type": "application/json"
     },
-    body: JSON.stringify(params),
+    body: JSON.stringify(params)
   }).then((res) => res.json());
 };
 
@@ -96,34 +96,39 @@ export const importCumDeductPreview = (params) => {
     method: "POST",
     mode: "cors",
     headers: {
-      "Content-Type": "application/json",
+      "Content-Type": "application/json"
     },
-    body: JSON.stringify(params),
+    body: JSON.stringify(params)
   }).then((res) => res.json());
 };
 
 
 //新增累计专项附加扣除
 export const createAddUpDeduction = (params) => {
-  return postFetch('/api/bs/hrmsalary/addUpDeduction/createAddUpDeduction', params);
-}
+  return postFetch("/api/bs/hrmsalary/addUpDeduction/createAddUpDeduction", params);
+};
 //查看信息
 export const getAddUpDeduction = (params) => {
-  return postFetch('/api/bs/hrmsalary/addUpDeduction/getAddUpDeduction', params);
-}
+  return postFetch("/api/bs/hrmsalary/addUpDeduction/getAddUpDeduction", params);
+};
 //编辑累计专项附加扣除
 export const editAddUpDeduction = (params) => {
-  return postFetch('/api/bs/hrmsalary/addUpDeduction/editAddUpDeduction', params);
-}
+  return postFetch("/api/bs/hrmsalary/addUpDeduction/editAddUpDeduction", params);
+};
 //批量删除累计专项附加扣除
 export const deleteSelectAddUpDeduction = (params) => {
-  return postFetch('/api/bs/hrmsalary/addUpDeduction/deleteSelectAddUpDeduction', params);
-}
+  return postFetch("/api/bs/hrmsalary/addUpDeduction/deleteSelectAddUpDeduction", params);
+};
 //一键清空累计专项附加扣除
 export const deleteAllAddUpDeduction = (params) => {
-  return postFetch('/api/bs/hrmsalary/addUpDeduction/deleteAllAddUpDeduction', params);
-}
+  return postFetch("/api/bs/hrmsalary/addUpDeduction/deleteAllAddUpDeduction", params);
+};
 //一键累计
 export const autoAddAll = (params) => {
-  return postFetch('/api/bs/hrmsalary/addUpDeduction/autoAddAll', params);
-}
+  return postFetch("/api/bs/hrmsalary/addUpDeduction/autoAddAll", params);
+};
+
+//数据采集列表查询
+export const getTableDate = ({ url, ...params }) => {
+  return postFetch(url, params);
+};

pc4mobx/hrmSalary/components/UnifiedTable/index.js

@@ -0,0 +1,26 @@
+import React, { Component } from "react";
+import { WeaTable } from "ecCom";
+import "./index.less";
+
+class Index extends Component {
+
+  render() {
+    const { columns } = this.props;
+    const unifiedColumns = _.map(columns, (item, index) => {
+      if (index === 0 || index === 2) {
+        return { ...item, fixed: "left", width: 150 };
+      } else if (index === 1) {
+        return { ...item, fixed: "left", width: 176 };
+      }
+      if (item.dataIndex === "operate") {
+        return { ...item, fixed: "right", width: "120px" };
+      }
+      return { ...item, width: "33%" };
+    });
+    return (
+      <WeaTable className="unifiedTable" {...this.props} columns={unifiedColumns} scroll={{ x: 1440 }}/>
+    );
+  }
+}
+
+export default Index;

pc4mobx/hrmSalary/components/UnifiedTable/index.less

@@ -0,0 +1,24 @@
+.unifiedTable {
+  .ellipsis {
+    display: inline-block;
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .linkWapper {
+    a {
+      color: #4d7ad8;
+      margin-right: 8px;
+    }
+
+    i {
+      cursor: pointer;
+    }
+
+    a:hover {
+      text-decoration: none;
+    }
+  }
+}

pc4mobx/hrmSalary/pages/dataAcquisition/cumDeduct/index.js

@@ -1,62 +1,118 @@
 import React, { Component } from "react";
-import { getCumDeductList } from "../../../apis/cumDeduct";
-import { WeaTable } from "ecCom";
-
+import { inject, observer } from "mobx-react";
+import { WeaDatePicker, WeaFormItem, WeaHelpfulTip, WeaSearchGroup, WeaSelect } from "ecCom";
+import { Button, Dropdown, Menu } from "antd";
+import DataTables from "../dataTables";
+import Layout from "../layout";
+import moment from "moment";
+import "../index.less";
 
+@inject("taxAgentStore")
+@observer
 class Index extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      columns: [], dataSource: []
+      declareMonth: moment(new Date()).format("YYYY-MM"),
+      taxAgentId: "",
+      innerWidth: window.innerWidth
     };
   }
 
-  componentDidMount() {
-    this.getCumDeductList();
-  }
-
-  getCumDeductList = () => {
-    getCumDeductList({ declareMonth: ["2023-02"], taxAgentId: "" }).then(res => {
-      this.setState({
-        columns: _.map(res.data.columns, item => {
-          if (item.dataIndex === "username") {
-            return {
-              ...item,
-              fixed: "left",
-              width: "20%"
-            };
-          }
-          if (item.dataIndex === "taxAgentName") {
-            return {
-              ...item,
-              fixed: "left",
-              width: "25%"
-            };
-          }
-          if (item.dataIndex === "operate") {
-            return {
-              ...item,
-              fixed: "right",
-              width: "100px"
-            };
-          }
-
-          return {
-            ...item,
-            width: "25%"
-          };
-        }),
-        dataSource: res.data.list
-      });
-    });
+  handleResize = (innerWidth) => this.setState({ innerWidth });
+  /*
+   * Author: 黎永顺
+   * Description: 筛选组件
+   * Params:
+   * Date: 2023/2/17
+   */
+  getScreen = () => {
+    const { taxAgentStore: { taxAgentOption } } = this.props;
+    const { declareMonth, taxAgentId, innerWidth } = this.state;
+    const items = [
+      {
+        com: DataCollectionDatePicker({
+          label: "税款所属期",
+          value: declareMonth,
+          onChange: this.screenChange,
+          key: "declareMonth"
+        })
+      },
+      {
+        com: DataCollectionSelect({
+          label: "个税扣缴义务人",
+          value: taxAgentId,
+          onChange: this.screenChange,
+          options: [{ key: "", showname: "全部" }, ...taxAgentOption],
+          key: "taxAgentId"
+        })
+      }
+    ];
+    return <WeaSearchGroup className="screenWrapper" showGroup needTigger={false} items={items}
+                           col={innerWidth < 900 ? 1 : 2}/>;
+  };
+  screenChange = ({ key, value }) => {
+    console.log(key, value);
+  };
+  /*
+   * Author: 黎永顺
+   * Description: 顶部操作按钮
+   * Params:
+   * Date: 2023/2/17
+   */
+  getTopBtns = () => {
+    return [
+      <Button type="primary"> 导入 </Button>,
+      <Button type="ghost"> 新建 </Button>,
+      <Button type="ghost"> 一键累计 </Button>,
+      <Dropdown
+        overlay={
+          <Menu className="dropdownMenuWrapper" onClick={this.handleMenuClick}>
+            <Menu.Item key="handleBatchDelete">批量删除</Menu.Item>
+            <Menu.Item key="handleEmpty">一键清空</Menu.Item>
+            <Menu.Item key="handleExportSelect">导出选中</Menu.Item>
+            <Menu.Item key="handleExportAll">导出全部</Menu.Item>
+          </Menu>
+        }
+      >
+        <Button type="ghost"> 更多 </Button>
+      </Dropdown>
+    ];
+  };
+  handleMenuClick = ({ key }) => {
+    console.log(key);
   };
 
   render() {
-    const { columns, dataSource } = this.state;
+    const { declareMonth, taxAgentId } = this.state;
+    const tablePayload = {
+      declareMonth: [declareMonth],
+      taxAgentId
+    };
     return (
-      <WeaTable columns={columns} dataSource={dataSource} scroll={{ x: 800 }}/>
+      <Layout title="累计专项附加扣除" btns={this.getTopBtns()} leftComp={this.getScreen()}
+              onResizeWindowInnerWidth={this.handleResize}>
+        <DataTables
+          url="/api/bs/hrmsalary/addUpDeduction/list"
+          payload={tablePayload}
+        />
+      </Layout>
     );
   }
 }
 
 export default Index;
+
+const DataCollectionDatePicker = (props) => {
+  const { value, label, onChange, format = "YYYY-MM", key } = props;
+  return <WeaFormItem label={label} labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
+    <WeaDatePicker value={value} onChange={() => onChange({ key, value })} format={format}/>
+    <WeaHelpfulTip title="提示：默认显示本年截至当前月所有员工申报的累计专项附加及其他扣除额" width={200}/>
+  </WeaFormItem>;
+};
+const DataCollectionSelect = (props) => {
+  const { value, label, onChange, options, key } = props;
+  return <WeaFormItem label={label} labelCol={{ span: 10 }} wrapperCol={{ span: 14 }}>
+    <WeaSelect value={value} onChange={() => onChange({ key, value })} options={options}/>
+  </WeaFormItem>;
+};

pc4mobx/hrmSalary/pages/dataAcquisition/dataTables.js

@@ -0,0 +1,112 @@
+/*
+ * Author: 黎永顺
+ * name: 数据采集-列表
+ * Description:
+ * Date: 2023/2/17
+ */
+import React, { Component } from "react";
+import { inject, observer } from "mobx-react";
+import UnifiedTable from "../../components/UnifiedTable";
+import { getTableDate } from "../../apis/cumDeduct";
+import { Menu, Popover } from "antd";
+
+@inject("taxAgentStore")
+@observer
+class DataTables extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      loading: {
+        query: false
+      },
+      dataSource: [],
+      columns: [],
+      selectedRowKeys: [],
+      pageInfo: {
+        current: 1, pageSize: 10, total: 0
+      }
+    };
+  }
+
+  componentDidMount() {
+    this.getTableDate();
+  }
+
+  getTableDate = () => {
+    const { loading, pageInfo } = this.state;
+    const { url, payload } = this.props;
+    const module = { url, ...payload };
+    this.setState({ loading: { ...loading, query: true } });
+    getTableDate(module).then(({ status, data }) => {
+      this.setState({ loading: { ...loading, query: false } });
+      if (status) {
+        const { columns, list: dataSource, pageNum: current, pageSize, total } = data;
+        this.setState({
+          pageInfo: { ...pageInfo, current, pageSize, total },
+          dataSource,
+          columns
+        });
+      }
+    }).catch(() => this.setState({ loading: { ...loading, query: false } }));
+  };
+
+  render() {
+    const { columns, dataSource, loading } = this.state;
+    const { taxAgentStore: { showOperateBtn } } = this.props;
+    return <UnifiedTable
+      rowKey="id"
+      // rowSelection={rowSelection}
+      columns={_.map(columns, item => {
+        const { dataIndex } = item;
+        if (dataIndex === "username") {
+          return {
+            ...item,
+            render: (text, record) => {
+              return <a
+                className="ellipsis"
+                href={`javaScript:openhrm(${record.employeeId});`}
+                onClick={e => window.pointerXY(e)}
+                title={text}
+              >
+                {text}
+              </a>;
+            }
+          };
+        } else if (dataIndex === "operate") {
+          return {
+            ...item,
+            render: (text, record) => (
+              <div className="linkWapper">
+                <a href="javaScript:void(0);">查看明细</a>
+                {
+                  showOperateBtn &&
+                  <Popover
+                    overlayClassName="moreIconWrapper"
+                    placement="bottomRight"
+                    content={<Menu onClick={(e) => this.handleOperate(e, record)}>
+                      <Menu.Item key="edit">编辑</Menu.Item>
+                      <Menu.Item key="delete">删除</Menu.Item>
+                    </Menu>} title="">
+                    <i className="icon-coms-more"/>
+                  </Popover>
+                }
+              </div>
+            )
+          };
+        } else {
+          return {
+            ...item,
+            render: (text) => {
+              return <span className="ellipsis" title={text}> {text} </span>;
+            }
+          };
+        }
+      })}
+      dataSource={dataSource}
+      // pagination={pagination}
+      loading={loading.query}
+    />;
+  }
+}
+
+export default DataTables;

pc4mobx/hrmSalary/pages/dataAcquisition/index.less

@@ -1,9 +1,10 @@
-.tipWrapper{
+.tipWrapper {
   display: flex;
   flex-direction: column;
   margin: 0 25px 20px 25px;
   border: 1px solid #e5e5e5;
-  .title{
+
+  .title {
     border-bottom: 1px solid #e5e5e5;
     height: 40px;
     line-height: 40px;
@@ -11,7 +12,8 @@
     background: #f6f6f6;
     font-size: 14px;
   }
-  .content{
+
+  .content {
     width: 100%;
     display: flex;
     flex-direction: column;
@@ -19,3 +21,50 @@
     color: #999;
   }
 }
+
+.layoutWrapper {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .wea-tab-left {
+    min-width: 600px !important;
+    max-width: 600px !important;
+  }
+
+  .screenWrapper {
+    padding: 0;
+
+    .wea-content {
+      padding: 0;
+    }
+
+    .wea-form-cell {
+      padding: 0 16px;
+
+      .wea-date-picker {
+        width: 85%;
+      }
+    }
+
+    .wea-helpful-tip {
+      padding-left: 10px;
+    }
+  }
+
+  .dataContent {
+    flex: 1;
+    overflow: hidden;
+  }
+
+}
+
+//下拉框菜单样式
+.dropdownMenuWrapper {
+  .ant-menu-item {
+    border-right: none;
+    padding: 0 16px;
+    height: 30px;
+    line-height: 30px;
+  }
+}

pc4mobx/hrmSalary/pages/dataAcquisition/layout.js

@@ -0,0 +1,61 @@
+/*
+ * Author: 黎永顺
+ * name: 数据采集-组件框
+ * Description:
+ * Date: 2023/2/17
+ */
+import React, { Component } from "react";
+import { inject, observer } from "mobx-react";
+import { WeaNewScroll, WeaTab, WeaTop } from "ecCom";
+import "./index.less";
+
+@inject("taxAgentStore")
+@observer
+class Layout extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      showSearchAd: false
+    };
+  }
+
+  componentDidMount() {
+    const { taxAgentStore: { fetchTaxAgentOption } } = this.props;
+    fetchTaxAgentOption();
+    window.addEventListener("resize", this.resizeUpdate);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener("resize", this.resizeUpdate);
+  }
+
+  resizeUpdate = () => {
+    const { onResizeWindowInnerWidth } = this.props;
+    onResizeWindowInnerWidth(window.innerWidth);
+  };
+
+  render() {
+    const { showSearchAd } = this.state;
+    const { title, btns, leftComp, children, taxAgentStore: { showOperateBtn } } = this.props;
+    return (
+      <div className="layoutWrapper">
+        <WeaTop title={title} buttons={showOperateBtn ? btns : []}
+                icon={<i className="icon-coms-fa"/>}
+                iconBgcolor="#F14A2D" showDropIcon={false}
+        />
+        <WeaTab
+          searchType={["base", "advanced"]}
+          replaceLeft={leftComp}
+          searchsAd={<h1>1111</h1>}
+          showSearchAd={showSearchAd}
+          setShowSearchAd={bool => this.setState({ showSearchAd: bool })}
+        />
+        <div className="dataContent">
+          <WeaNewScroll height="100%">{children}</WeaNewScroll>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Layout;