薪资账套重构

pc4mobx/hrmSalary/pages/ledgerPage/components/ledgerSlide.js

@@ -5,13 +5,96 @@
  * Date: 2022/12/8
  */
 import React, { Component } from "react";
+import { inject, observer } from "mobx-react";
+import { WeaSlideModal, WeaSteps } from "ecCom";
+import SlideModalTitle from "../../../components/slideModalTitle";
 
+const Step = WeaSteps.Step;
+const tabs = [
+  { key: 0, title: "基础设置" },
+  { key: 1, title: "关联人员" },
+  { key: 3, title: "薪资项目" },
+  { key: 4, title: "回算薪资项目" },
+  { key: 5, title: "校验规则" }
+];
+
+@inject("taxAgentStore")
+@observer
 class LedgerSlide extends Component {
-  render() {
-    return (
-      <div>
+  constructor(props) {
+    super(props);
+    this.state = {
+      current: 0,
+      loading: false,
+      taxAgentId: ""
+    };
+  }
 
-      </div>
+  handleChangeSlideTab = (current) => {
+    this.setState({ current: Number(current) });
+  };
+  renderChildren = () => {
+    const { current } = this.state;
+    const { decentralization } = this.props;
+    const { taxAgentId } = this.state;
+    let CurrentDom = null;
+    switch (current) {
+      case 0:
+        CurrentDom = <BaseSettings decentralization={decentralization}/>;
+        break;
+      default:
+        CurrentDom = null;
+        break;
+    }
+    return CurrentDom;
+  };
+
+  render() {
+    const { title, visible, onCancel, taxAgentStore: { showOperateBtn } } = this.props;
+    const { current, taxAgentId } = this.state;
+    return (
+      <WeaSlideModal
+        className="slideOuterWrapper"
+        visible={visible}
+        top={0}
+        width={50}
+        height={100}
+        direction="right"
+        measure="%"
+        title={
+          <SlideModalTitle
+            subtitle={title}
+            tabs={taxAgentId ? tabs : []}
+            loading={false}
+            showOperateBtn={showOperateBtn}
+            editable={false}
+            onSave={() => {
+            }}
+            selectedTab={current}
+            customOperate={this.renderCustomOperate()}
+            subItemChange={this.handleChangeSlideTab}
+          />
+        }
+        content={
+          <div className="taxAgentSlideContent">
+            {
+              !taxAgentId &&
+              <WeaSteps current={current} style={{ margin: "20px 0" }}>
+                {
+                  _.map(tabs, item => {
+                    const { key, title } = item;
+                    return <Step description={title} key={key}/>;
+                  })
+                }
+              </WeaSteps>
+            }
+            {
+              this.renderChildren()
+            }
+          </div>
+        }
+        onClose={onCancel}
+      />
     );
   }
 }