数据采集页面重构

2023-02-20 09:41:36 +08:00 · 2023-02-20 09:41:36 +08:00 · 3affb156b9
parent 67b211e656
commit 3affb156b9
4 changed files with 179 additions and 32 deletions
--- a/pc4mobx/hrmSalary/pages/dataAcquisition/cumDeduct/index.js
+++ b/pc4mobx/hrmSalary/pages/dataAcquisition/cumDeduct/index.js
@ -1,11 +1,11 @@
 import React, { Component } from "react";
 import { inject, observer } from "mobx-react";
 import { WeaDatePicker, WeaFormItem, WeaHelpfulTip, WeaSearchGroup, WeaSelect } from "ecCom";
-import { Button, Dropdown, Menu } from "antd";
+import { Button, Dropdown, Menu, message } from "antd";
+import { autoAddAll } from "../../../apis/cumDeduct";
 import DataTables from "../dataTables";
 import Layout from "../layout";
 import moment from "moment";
-import "../index.less";

@inject("taxAgentStore")
@observer
@ -15,11 +15,68 @@ class Index extends Component {
    this.state = {
      declareMonth: moment(new Date()).format("YYYY-MM"),
      taxAgentId: "",
-      innerWidth: window.innerWidth
+      innerWidth: window.innerWidth,
+      addAllLoading: false,
+      slidePayload: {
+        visible: false,
+        title: "",
+        children: null,
+        id: ""
+      }
    };
+    this.tableRef = null;
  }

+  /*
+   * Author: 黎永顺
+   * Description:一键累计
+   * Params:
+   * Date: 2023/2/17
+   */
+  autoAddAll = () => {
+    const { monthValue: declareMonth } = this.state;
+    this.setState({ addAllLoading: true });
+    autoAddAll({ yearMonth: declareMonth }).then(({ status, data, errormsg }) => {
+      this.setState({ addAllLoading: false });
+      if (status) {
+        message.success(data || "操作成功");
+        this.tableRef.getTableDate();
+      } else {
+        message.error(errormsg || "操作失败");
+      }
+    }).catch(() => this.setState({ addAllLoading: false }));
+  };
+
  handleResize = (innerWidth) => this.setState({ innerWidth });
+  /*
+   * Author: 黎永顺
+   * Description:新增数据采集-累计专项附加扣除
+   * Params:
+   * Date: 2023/2/20
+   */
+  handleAddData = () => {
+    const { slidePayload } = this.state;
+    this.setState({
+      slidePayload: {
+        ...slidePayload,
+        visible: true,
+        title: "新建",
+        chidren: <h1>3433333</h1>
+      }
+    });
+  };
+  handleCloseSlide = () => {
+    const { slidePayload } = this.state;
+    this.setState({
+      slidePayload: {
+        ...slidePayload,
+        visible: false,
+        title: "",
+        chidren: null,
+        id: ""
+      }
+    });
+  };
  /*
   * Author: 黎永顺
   * Description: 筛选组件
@ -52,7 +109,7 @@ class Index extends Component {
                           col={innerWidth < 900 ? 1 : 2}/>;
  };
  screenChange = ({ key, value }) => {
-    console.log(key, value);
+    this.setState({ [key]: value }, () => this.tableRef.getTableDate());
  };
  /*
   * Author: 黎永顺
@ -61,10 +118,11 @@ class Index extends Component {
   * Date: 2023/2/17
   */
  getTopBtns = () => {
+    const { addAllLoading } = this.state;
    return [
-      <Button type="primary"> 导入 </Button>,
-      <Button type="ghost"> 新建 </Button>,
-      <Button type="ghost"> 一键累计 </Button>,
+      <Button type="primary">导入</Button>,
+      <Button type="ghost" onClick={this.handleAddData}>新建</Button>,
+      <Button type="ghost" loading={addAllLoading} onClick={this.autoAddAll}>一键累计</Button>,
      <Dropdown
        overlay={
          <Menu className="dropdownMenuWrapper" onClick={this.handleMenuClick}>
@ -84,17 +142,19 @@ class Index extends Component {
  };

  render() {
-    const { declareMonth, taxAgentId } = this.state;
-    const tablePayload = {
-      declareMonth: [declareMonth],
-      taxAgentId
-    };
+    const { taxAgentStore: { showOperateBtn } } = this.props;
+    const { declareMonth, taxAgentId, slidePayload } = this.state;
+    const tablePayload = { declareMonth: [declareMonth], taxAgentId };
    return (
      <Layout title="累计专项附加扣除" btns={this.getTopBtns()} leftComp={this.getScreen()}
-              onResizeWindowInnerWidth={this.handleResize}>
+              onResizeWindowInnerWidth={this.handleResize} slidePayload={...slidePayload}
+              onClose={this.handleCloseSlide}
+      >
        <DataTables
+          ref={dom => this.tableRef = dom}
          url="/api/bs/hrmsalary/addUpDeduction/list"
          payload={tablePayload}
+          showOperateBtn={showOperateBtn}
        />
      </Layout>
    );
@ -106,13 +166,13 @@ 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}/>
+    <WeaDatePicker value={value} onChange={(val) => onChange({ key, value: val })} 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}/>
+    <WeaSelect value={value} onChange={(val) => onChange({ key, value: val })} options={options}/>
  </WeaFormItem>;
 };
--- a/pc4mobx/hrmSalary/pages/dataAcquisition/dataTables.js
+++ b/pc4mobx/hrmSalary/pages/dataAcquisition/dataTables.js
@ -5,13 +5,10 @@
 * 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);
@ -35,7 +32,7 @@ class DataTables extends Component {
  getTableDate = () => {
    const { loading, pageInfo } = this.state;
    const { url, payload } = this.props;
-    const module = { url, ...payload };
+    const module = { ...pageInfo, url, ...payload };
    this.setState({ loading: { ...loading, query: true } });
    getTableDate(module).then(({ status, data }) => {
      this.setState({ loading: { ...loading, query: false } });
@ -51,11 +48,36 @@ class DataTables extends Component {
  };

  render() {
-    const { columns, dataSource, loading } = this.state;
-    const { taxAgentStore: { showOperateBtn } } = this.props;
+    const { columns, dataSource, loading, selectedRowKeys, pageInfo } = this.state;
+    const { showOperateBtn } = this.props;
+    const rowSelection = {
+      selectedRowKeys,
+      onChange: (selectedRowKeys) => this.setState({ selectedRowKeys })
+    };
+    const pagination = {
+      ...pageInfo,
+      showTotal: (total) => `共 ${total} 条`,
+      pageSizeOptions: ["10", "20", "50", "100"],
+      showSizeChanger: true,
+      showQuickJumper: true,
+      onShowSizeChange: (current, pageSize) => {
+        this.setState({
+          pageInfo: { ...pageInfo, current, pageSize }
+        }, () => {
+          this.getTableDate();
+        });
+      },
+      onChange: (current) => {
+        this.setState({
+          pageInfo: { ...pageInfo, current }
+        }, () => {
+          this.getTableDate();
+        });
+      }
+    };
    return <UnifiedTable
      rowKey="id"
-      // rowSelection={rowSelection}
+      rowSelection={rowSelection}
      columns={_.map(columns, item => {
        const { dataIndex } = item;
        if (dataIndex === "username") {
@ -103,7 +125,7 @@ class DataTables extends Component {
        }
      })}
      dataSource={dataSource}
-      // pagination={pagination}
+      pagination={pagination}
      loading={loading.query}
    />;
  }
--- a/pc4mobx/hrmSalary/pages/dataAcquisition/index.less
+++ b/pc4mobx/hrmSalary/pages/dataAcquisition/index.less
@ -59,12 +59,33 @@

 }

-//下拉框菜单样式
-.dropdownMenuWrapper {
-  .ant-menu-item {
-    border-right: none;
-    padding: 0 16px;
-    height: 30px;
-    line-height: 30px;
+.slideOuterWrapper {
+  .wea-slide-modal-title {
+    height: initial;
+    line-height: initial;
+    text-align: left;
+  }
+
+  .rodal-close {
+    z-index: 99;
+    top: 10px !important;
+  }
+
+}
+
+@media (min-width: 1260px) {
+  .slideOuterWrapper {
+    .reqTopWrapper .wea-new-top-req-title > div:first-child > div {
+      max-width: 100% !important;
+    }
  }
 }
+
+@media screen and (min-width: 1060px) and (max-width: 1260px) {
+  .slideOuterWrapper {
+    .reqTopWrapper .wea-new-top-req-title > div:first-child > div {
+      max-width: calc(100% - 96px) !important;
+    }
+  }
+}
+
--- a/pc4mobx/hrmSalary/pages/dataAcquisition/layout.js
+++ b/pc4mobx/hrmSalary/pages/dataAcquisition/layout.js
@ -6,7 +6,8 @@
 */
 import React, { Component } from "react";
 import { inject, observer } from "mobx-react";
-import { WeaNewScroll, WeaTab, WeaTop } from "ecCom";
+import { WeaNewScroll, WeaSlideModal, WeaTab, WeaTop } from "ecCom";
+import SlideModalTitle from "../../components/slideModalTitle";
 import "./index.less";

@inject("taxAgentStore")
@ -36,7 +37,11 @@ class Layout extends Component {

  render() {
    const { showSearchAd } = this.state;
-    const { title, btns, leftComp, children, taxAgentStore: { showOperateBtn } } = this.props;
+    const {
+      title, btns, leftComp, children, taxAgentStore: { showOperateBtn },
+      slidePayload, onClose
+    } = this.props;
+    const { visible, title: subtitle, children: slideChildren, id } = slidePayload;
    return (
      <div className="layoutWrapper">
        <WeaTop title={title} buttons={showOperateBtn ? btns : []}
@ -52,6 +57,45 @@ class Layout extends Component {
        />
        <div className="dataContent">
          <WeaNewScroll height="100%">{children}</WeaNewScroll>
+          {/* 新增-编辑-详情弹框 */}
+          <WeaSlideModal
+            className="slideOuterWrapper"
+            visible={visible}
+            top={0}
+            measureT="%"
+            width={800}
+            measureX="px"
+            height={100}
+            measureY="%"
+            direction="right"
+            title={
+              <SlideModalTitle
+                subtitle={subtitle}
+                loading={false}
+                onSave={() => {
+                  // const { baseInfo } = this.addItemRef.state;
+                  // const bool = _.every(_.pick(baseInfo, ["declareMonth", "taxAgentId", "employeeId"]), v => !_.isEmpty(v));
+                  // if (!bool && _.isEmpty(editId)) {
+                  //   Modal.warning({
+                  //     title: "信息确认",
+                  //     content: "必要信息不完整，红色*为必填项！"
+                  //   });
+                  //   return;
+                  // }
+                  // const payload = {
+                  //   ..._.pick(baseInfo, ["declareMonth", "taxAgentId", "employeeId", "taxAgentName"]),
+                  //   ...addForm.getFormParams()
+                  // };
+                  // this.handleSaveDeduction(payload);
+                }}
+                editable={true}
+                showOperateBtn={showOperateBtn}
+                customOperate={[]}
+              />
+            }
+            content={slideChildren}
+            onClose={onClose}
+          />
        </div>
      </div>
    );