slide

pc4mobx/hrmSalary/components/slideModalTitle/index.js

@@ -14,10 +14,23 @@ export default class SlideModalTitle extends React.Component {
           <i className='icon-coms-meeting' />
         </div>
         <div className="slideTitle">
-          <div className="subtitle">{this.props.subtitle}</div>
+          {
+            this.props.subtitle && <div className="subtitle">
+              {
+                this.props.tabs ?
+                <div>
+                  <div className="mainTitle">{this.props.subtitle}</div>
+                  <div className="subTab">
+                    {this.props.tabs.map(item => (
+                      <span className={item.key == this.props.selectedTab ? "subItem subItemSelected" : "subItem"} onClick={() => this.props.subItemChange(item)}>{item.title}</span>
+                   ))}
+                  </div>
+                </div> : <div>{this.props.subtitle}</div>
+              }
+            </div>
+          }
         </div>
         <div className="btnWrapper">
-            
             {this.props.btns}
             {
               this.state.editable && <Button type="primary" className="saveBtn" onClick={this.props.onSave}>保存</Button>

pc4mobx/hrmSalary/components/slideModalTitle/index.less

@@ -19,6 +19,25 @@
             line-height: 52px;
             font-size: 14px;
             font-weight: 600;
+            .mainTitle {
+                line-height: 37px;
+                height: 22px;
+            }
+            .subTab {
+                line-height: 40px;
+                height: 22px;
+                font-weight: normal;
+                font-size: 12px;
+                .subItem {
+                    margin-right: 20px;
+                    cursor: pointer;
+                }
+                .subItemSelected {
+                    border-bottom: 2px solid #2db7f5;
+                    color: #2db7f5;
+                }
+            }
+
         }
         .tabItem {
             height: 20px;
@@ -26,6 +45,8 @@
             font-size: 12px;
         }
     }
+
+
     .btnWrapper {
         position: absolute;
         right: 50px;

pc4mobx/hrmSalary/components/stepSlide/index.js

@@ -26,9 +26,9 @@ export default class StepSlide extends React.Component {
                 content={(<StepSlideHeader current={currentStep}>
                     {this.props.content}
                 </StepSlideHeader>)}
-                onClose={() => setSlideVisiable(false)}
+                onClose={() => this.props.onCancel()}
                 showMask={true}
-                closeMaskOnClick={() => setSlideVisiable(false)} /> 
+                closeMaskOnClick={() => this.props.onCancel()} /> 
         )
     }
 }

pc4mobx/hrmSalary/pages/ledger/index.js

@@ -4,7 +4,7 @@ import { toJS } from 'mobx';
 
 import { Button, Table, DatePicker } from 'antd';
 
-import { WeaTop, WeaTab, WeaRightMenu, WeaRangePicker, WeaTable, WeaInputSearch } from 'ecCom';
+import { WeaTop, WeaTab, WeaRightMenu, WeaRangePicker, WeaTable, WeaInputSearch, WeaSlideModal } from 'ecCom';
 
 import { renderNoright, getSearchs } from '../../util'; // 渲染form数据的方法：因为多个页面都会使用，所以抽的公共方法在util中
 import CustomTab from '../../components/customTab';
@@ -17,6 +17,7 @@ import { columns, dataSource } from './columns';
 import SalaryItemForm from './salaryItemForm';
 import CalRulesForm from './calcRulesForm';
 import ValidRulesForm from './validRulesForm';
+import SlideModalTitle from '../../components/slideModalTitle'
 
 const { MonthPicker } = DatePicker;
 
@@ -29,7 +30,9 @@ export default class Ledger extends React.Component {
       value: "",
       selectedKey: "0",
       stepSlideVisible: false,
+      editSlideVisible: false,
       currentStep: 4,
+      selectedTab: 0,
       columns: columns.map(item => {
         if(item.dataIndex == "cz") {
           item.render = () => <div>
@@ -46,13 +49,13 @@ export default class Ledger extends React.Component {
 
   onEdit() {
     this.setState({
-      stepSlideVisible: true
+      editSlideVisible: true
     })
   }
   render() {
     const { baseTableStore } = this.props;
     const { loading, hasRight, form, condition, tableStore, showSearchAd, getTableDatas, doSearch, setShowSearchAd } = baseTableStore;
-    const { currentStep } = this.state;
+    const { currentStep, selectedTab } = this.state;
     if (!hasRight && !loading) { // 无权限处理
       return renderNoright();
     }
@@ -125,7 +128,6 @@ export default class Ledger extends React.Component {
                 }}
               />
             <WeaTable columns={columns} dataSource={dataSource}/>
-
             {
               this.state.stepSlideVisible && <StepSlide 
               visible={this.state.stepSlideVisible} 
@@ -182,6 +184,50 @@ export default class Ledger extends React.Component {
               }
               />
             }
+
+            {
+              this.state.editSlideVisible && 
+              <WeaSlideModal visible={this.state.editSlideVisible}
+                top={0}
+                width={40}
+                height={100}
+                direction={'right'}
+                measure={'%'}
+                
+                title={
+                  <SlideModalTitle 
+                    subtitle={"编辑账套"}
+                    tabs={[{title: '基础设置', key: 0}, {title: "关联人员", key: 1}, {title: "薪资项目", key: 2}, {title: '调薪计薪规则', key: 3}, {title: "校验规则", key: 4}]}
+                    editable={true}
+                    selectedTab={selectedTab}
+                    subItemChange={
+                      (item) => {this.setState({selectedTab: item.key})}
+                    }
+                  />
+                }
+                content={<div>
+                  {
+                    selectedTab == 0 && <SlideBaseForm />
+                  }
+                  {
+                    selectedTab == 1 && <SlideRefereUser />
+                  }
+                  {
+                    selectedTab == 2 && <SalaryItemForm />
+                  }
+                  {
+                    selectedTab == 3 && <CalRulesForm />
+                  }
+                  {
+                    selectedTab == 4 && <ValidRulesForm />
+                  }
+                </div>}
+                onClose={() => this.setState({editSlideVisible: false})}
+                showMask={true}
+                
+                closeMaskOnClick={() => this.setState({editSlideVisible: false})} />
+   
+            }
           </WeaTop>
         </WeaRightMenu>
       </div>