个税对接-人员信息报送详情页

2023-08-14 17:08:40 +08:00 · 2023-08-14 17:08:40 +08:00 · c628b482f9
parent 9cb47f784c
commit c628b482f9
7 changed files with 290 additions and 10 deletions
--- a/pc4mobx/hrmSalary/pages/employeedeclareDetail/components/baseInfo.js
+++ b/pc4mobx/hrmSalary/pages/employeedeclareDetail/components/baseInfo.js
@ -7,20 +7,51 @@
 import React, { Component } from "react";
 import { WeaLocaleProvider } from "ecCom";
 import { getQueryString } from "../../../util/url";
+import EmployeeDeclareDetailCalcDialog from "./employeeDeclareDetailCalcDialog";

 const { getLabel } = WeaLocaleProvider;

 class BaseInfo extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      declareCalcDialog: {
+        visible: false
+      }
+    };
+  }
+
+  handleOpenFailDialog = () => {
+    this.setState({
+      declareCalcDialog: {
+        visible: true
+      }
+    });
+  };
+
  render() {
+    const { declareCalcDialog } = this.state;
    return (
      <div className="base-info">
        <div className="left"><span>{getLabel(537996, "个税扣缴义务人")}：{getQueryString("taxName")}</span></div>
        <div className="right">
          <div className="header-declare-info">
-            <a href="javascript:void(0);" className="fail">{getLabel(111, "报送失败")}:&nbsp;&nbsp;0</a>
+            <a href="javascript:void(0);" className="fail"
+               onClick={this.handleOpenFailDialog}>{getLabel(111, "报送失败")}:&nbsp;&nbsp;0</a>
            <span className="not">{getLabel(111, "未报送")}:&nbsp;&nbsp;0</span>
          </div>
        </div>
+        {/*报送失败数据查看*/}
+        <EmployeeDeclareDetailCalcDialog
+          {...declareCalcDialog}
+          onCancel={() => {
+            this.setState({
+              declareCalcDialog: {
+                visible: false
+              }
+            });
+          }}
+        />
      </div>
    );
  }
--- a/pc4mobx/hrmSalary/pages/employeedeclareDetail/components/employeeDeclareDetailCalcDialog.js
+++ b/pc4mobx/hrmSalary/pages/employeedeclareDetail/components/employeeDeclareDetailCalcDialog.js
@ -0,0 +1,50 @@
+/*
+ * Author: 黎永顺
+ * name: 报送信息-失败查看弹框
+ * Description:
+ * Date: 2023/8/14
+ */
+import React, { Component } from "react";
+import { WeaDialog, WeaLocaleProvider, WeaTable } from "ecCom";
+import { Button, Col, Row } from "antd";
+
+const { getLabel } = WeaLocaleProvider;
+
+class EmployeeDeclareDetailCalcDialog extends Component {
+
+  render() {
+    return (
+      <WeaDialog
+        {...this.props}
+        scalable hasScroll className="declareCalcDialog" initLoadCss
+        title={(<Row className="declareCalcDialogTitle" type="flex">
+          <Col span={12} className="declareCalcDialogTitle-left">
+            <span className="title">{getLabel(111, "报送失败数据详情")}</span>
+          </Col>
+          <Col span={12} className="declareCalcDialogTitle-right">
+            <Button type="primary" onClick={this.handleSubmit}>{getLabel(81272, "导出全部")}</Button>
+          </Col>
+        </Row>)}
+        style={{
+          width: 1150,
+          height: 606.6,
+          minHeight: 200,
+          minWidth: 380,
+          maxHeight: "90%",
+          maxWidth: "90%",
+          overflow: "hidden",
+          transform: "translate(0px, 0px)"
+        }}
+      >
+        <div className="declareCalcDialogContent">
+          <WeaTable
+            columns={[{ dataIndex: "opt", title: "操作" }]}
+            dataSource={[]}
+          />
+        </div>
+      </WeaDialog>
+    );
+  }
+}
+
+export default EmployeeDeclareDetailCalcDialog;
--- a/pc4mobx/hrmSalary/pages/employeedeclareDetail/components/employeeDeclareDetailSchemaEditDialog.js
+++ b/pc4mobx/hrmSalary/pages/employeedeclareDetail/components/employeeDeclareDetailSchemaEditDialog.js
@ -7,11 +7,37 @@
 import React, { Component } from "react";
 import { WeaLocaleProvider, WeaSlideModal } from "ecCom";
 import { Button, Col, Row } from "antd";
+import { inject, observer } from "mobx-react";
+import { declareConditions } from "../constants";
+import { getSearchs } from "../../../util";

 const { getLabel } = WeaLocaleProvider;

+@inject("employeeDeclareStore")
+@observer
 class EmployeeDeclareDetailSchemaEditDialog extends Component {
+  componentDidMount() {
+    const { employeeDeclareStore: { declareForm } } = this.props;
+    declareForm.initFormFields(declareConditions);
+  }
+
+  componentWillReceiveProps(nextProps, nextContext) {
+  }
+
+  handleSubmit = () => {
+    const { employeeDeclareStore: { declareForm: form } } = this.props;
+    form.validateForm().then(f => {
+      if (f.isValid) {
+        const payload = form.getFormParams();
+        console.log(payload);
+      } else {
+        f.showErrors();
+      }
+    });
+  };
+
  render() {
+    const { employeeDeclareStore: { declareForm: form } } = this.props;
    return (
      <WeaSlideModal
        {...this.props}
@ -20,13 +46,15 @@ class EmployeeDeclareDetailSchemaEditDialog extends Component {
        height={100} measureY="%"
        direction="right"
        title={(<Row className="declareSchemeDialogTitle" type="flex">
-          <Col span={12}>
-            <i className="icon-coms-fa"/>
+          <Col span={12} className="declareSchemeDialogTitle-left">
+            <div className="icon-circle-base"><i className="icon-coms-fa"/></div>
            <span className="title">{getLabel(111, "本月新增数据")}</span>
          </Col>
-          <Col span={12} style={{ textAlign: "right" }}><Button type="primary">保存</Button></Col>
+          <Col span={12} className="declareSchemeDialogTitle-right">
+            <Button type="primary" onClick={this.handleSubmit}>{getLabel(537558, "保存")}</Button>
+          </Col>
        </Row>)}
-        content={(<div className="declareSchemeDialog">Content</div>)}
+        content={(<div className="declareSchemeDialog">{getSearchs(form, declareConditions, 1)}</div>)}
      />
    );
  }
--- a/pc4mobx/hrmSalary/pages/employeedeclareDetail/constants.js
+++ b/pc4mobx/hrmSalary/pages/employeedeclareDetail/constants.js
@ -26,6 +26,7 @@ export const submitStatus = [
  }
 ];

+
 export const advanceConditions = [
  {
    items: [
@ -185,3 +186,67 @@ export const advanceConditions = [
    defaultshow: true
  }
 ];
+
+export const declareConditions = [
+  {
+    items: [
+      {
+        colSpan: 2,
+        fieldcol: 12,
+        labelcol: 6,
+        rules: "selectLinkageRequired",
+        conditionType: "SELECT_LINKAGE",
+        selectLinkageDatas: {
+          "1": {
+            browserConditionParam: {
+              completeParams: {},
+              conditionDataParams: {},
+              dataParams: {},
+              destDataParams: {},
+              hasAddBtn: false,
+              hasAdvanceSerach: true,
+              idSeparator: ",",
+              isAutoComplete: 1,
+              isDetail: 0,
+              isMultCheckbox: false,
+              isSingle: true,
+              linkUrl: "",
+              pageSize: 10,
+              quickSearchName: "",
+              replaceDatas: [],
+              title: "",
+              type: "1"
+            },
+            conditionType: "BROWSER",
+            domkey: ["INPUT"]
+          },
+          "2": {
+            conditionType: "CHECKBOX",
+            domkey: ["CHECKBOX"]
+          }
+        },
+        options: [
+          { key: "1", showname: "今天" },
+          { key: "2", showname: "本周" }
+        ],
+        domkey: ["secleve"],
+        label: "系统名称",
+        lanId: 111,
+        viewAttr: 3
+      },
+      {
+        colSpan: 1,
+        conditionType: "INPUT",
+        domkey: ["keyword"],
+        fieldcol: 12,
+        label: "证件姓名",
+        lanId: 111,
+        labelcol: 6,
+        value: "",
+        rules: "required",
+        viewAttr: 3
+      }
+    ],
+    defaultshow: true
+  }
+];
--- a/pc4mobx/hrmSalary/pages/employeedeclareDetail/index.js
+++ b/pc4mobx/hrmSalary/pages/employeedeclareDetail/index.js
@ -8,6 +8,7 @@ import React, { Component } from "react";
 import { WeaDatePicker, WeaLocaleProvider, WeaSelect, WeaTab, WeaTop } from "ecCom";
 import { Button, Dropdown, Menu, Spin } from "antd";
 import BaseInfo from "./components/baseInfo";
+import EmployeeDeclareDetailSchemaEditDialog from "./components/employeeDeclareDetailSchemaEditDialog";
 import { advanceConditions, submitStatus } from "./constants";
 import { getSearchs } from "../../util";
 import { inject, observer } from "mobx-react";
@ -25,7 +26,10 @@ class Index extends Component {
      selectedKey: "0",
      showSearchAd: false,
      declareStatus: "ALL",
-      taxCycle: new Date()
+      taxCycle: new Date(),
+      declareEditDialog: {
+        visible: false
+      }
    };
  }

@ -34,12 +38,17 @@ class Index extends Component {
    document.title = getLabel(544289, "人员信息报送");
    advanceForm.initFormFields(advanceConditions);
    window.addEventListener("message", this.handleReceive, false);
+    this.setCss();
  }

  componentWillUnmount() {
    window.removeEventListener("message", this.handleReceive, false);
  }

+  setCss = () => {
+    $($("head")[0]).append("<style id=\"theme-style\" type=\"text/css\">" + ".ant-calendar-picker-container { right: 0 !important; left: auto !important}" + "</style>");
+  };
+
  handleReceive = ({ data }) => {
    const { type, payload: { id, params } = {} } = data;
    if (type === "init") {
@ -55,9 +64,16 @@ class Index extends Component {
    const childFrameObj = document.getElementById("atdTable");
    childFrameObj && childFrameObj.contentWindow.postMessage(JSON.stringify({}), "*");
  };
+  handleAdd = () => {
+    this.setState({
+      declareEditDialog: {
+        visible: true
+      }
+    });
+  };

  render() {
-    const { selectedKey, showSearchAd, declareStatus, taxCycle } = this.state;
+    const { selectedKey, showSearchAd, declareStatus, taxCycle, declareEditDialog } = this.state;
    const { taxAgentStore: { showOperateBtn }, employeeDeclareStore: { advanceForm: form } } = this.props;
    const menu = (
      <Menu>
@ -100,6 +116,7 @@ class Index extends Component {
              advanceHeight={300} searchsAd={getSearchs(form, toJS(advanceConditions), 2)}
              buttons={[
                <Dropdown.Button
+                  onClick={this.handleAdd}
                  overlay={
                    <Menu>
                      <Menu.Item key="1">{getLabel(32935, "导入")}</Menu.Item>
@ -126,6 +143,17 @@ class Index extends Component {
                  id="atdTable"
                />
              </Spin>
+              {/*新增编辑报送信息*/}
+              <EmployeeDeclareDetailSchemaEditDialog
+                {...declareEditDialog}
+                onClose={() => {
+                  this.setState({
+                    declareEditDialog: {
+                      visible: false
+                    }
+                  });
+                }}
+              />
            </div>
          </div>
        </div>
--- a/pc4mobx/hrmSalary/pages/employeedeclareDetail/index.less
+++ b/pc4mobx/hrmSalary/pages/employeedeclareDetail/index.less
@ -70,15 +70,92 @@

 }

-.ant-calendar-picker-container {
-  right: 0 !important;
-  left: auto !important;
+//.ant-calendar-picker-container {
+//  right: 0 !important;
+//  left: auto !important;
+//}
+
+.wea-slide-modal-title {
+  border-bottom: 1px solid #e5e5e5 !important;
+}
+
+.wea-slide-modal-content {
+  height: 100%;
+}
+
+.declareSchemeDialogTitle {
+  border-bottom: 1px solid #e5e5e5;
+
+  .declareSchemeDialogTitle-left {
+    text-align: left;
+    padding-left: 16px;
+
+    .icon-circle-base {
+      background: rgb(241, 74, 45);
+    }
+
+    .title {
+      color: #111;
+      font-weight: 700;
+    }
+  }
+
+  .declareSchemeDialogTitle-right {
+    text-align: right;
+    padding-right: 56px;
+  }
 }

 .declareSchemeDialog {
  height: 100%;
  padding: 16px;
  overflow-y: auto;
+  background: #f6f6f6;
+
+  .wea-search-group .wea-content {
+    padding: 0;
+  }
+
+  .wea-search-group {
+    border: 1px solid #e5e5e5;
+    border-bottom: none;
+    background: #fff;
+
+    .wea-form-item {
+      padding: 5px 16px;
+      border-bottom: 1px solid #e5e5e5;
+    }
+  }
+
+  .wea-search-group, .wea-form-cell {
+    padding: 0;
+  }
+}
+
+.declareCalcDialog {
+  .declareCalcDialogTitle {
+    display: flex;
+    align-items: center;
+
+    .declareCalcDialogTitle-left {
+      text-align: left;
+
+      .title {
+        color: #111;
+        font-weight: 700;
+      }
+    }
+
+    .declareCalcDialogTitle-right {
+      text-align: right;
+    }
+  }
+
+  .declareCalcDialogContent {
+    height: 100%;
+    padding: 16px;
+    background: #f6f6f6;
+  }
 }

 .flex {
--- a/pc4mobx/hrmSalary/stores/employeeDeclare.js
+++ b/pc4mobx/hrmSalary/stores/employeeDeclare.js
@ -5,6 +5,7 @@ const { TableStore } = WeaTableNew;

 export class EmployeeDeclareStore {
  @observable advanceForm = new WeaForm(); //人员信息报送详情页面，高级搜索form实例
+  @observable declareForm = new WeaForm(); //人员信息报送详情页面，新增编辑报送信息form实例
  @observable tableStore = new TableStore();

  @action("...")