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

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>
     );
   }

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;

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}>
+          <Col span={12} className="declareSchemeDialogTitle-left">
-            <i className="icon-coms-fa"/>
+            <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>)}
       />
     );
   }

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
+  }
+];

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>

pc4mobx/hrmSalary/pages/employeedeclareDetail/index.less

@@ -70,15 +70,92 @@
 
 }
 
-.ant-calendar-picker-container {
+//.ant-calendar-picker-container {
-  right: 0 !important;
+//  right: 0 !important;
-  left: auto !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 {

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("...")