diff --git a/pc4mobx/hrmSalary/components/TipLabel/index.js b/pc4mobx/hrmSalary/components/TipLabel/index.js
index 7768d994..5d111c33 100644
--- a/pc4mobx/hrmSalary/components/TipLabel/index.js
+++ b/pc4mobx/hrmSalary/components/TipLabel/index.js
@@ -6,10 +6,11 @@ export default class TipLabel extends React.Component {
         return (
             <div className="tipLabelWrapper">
                 <div className="titleWrapper">
-                    <span className="title">小提示</span>
+                    <span className="title">{this.props.title ? this.props.title : "小提示"}</span>
                 </div>
                 <div className="tipContentWrapper">
-                    {this.props.tipList.map(item => <div className="tipContentItem">{item}</div>)}
+                    {this.props.tipList && this.props.tipList.map(item => <div className="tipContentItem">{item}</div>)}
+                    {this.props.children}
                 </div>
             </div>
         )
diff --git a/pc4mobx/hrmSalary/components/TipLabel/index.less b/pc4mobx/hrmSalary/components/TipLabel/index.less
index 0ce5a5f2..7f8a20a0 100644
--- a/pc4mobx/hrmSalary/components/TipLabel/index.less
+++ b/pc4mobx/hrmSalary/components/TipLabel/index.less
@@ -14,6 +14,8 @@
     }
     .tipContentWrapper {
         padding-bottom: 10px;
+        padding-left: 10px;
+        padding-right: 10px;
     }
     .tipContentItem {
         line-height: 20px;
diff --git a/pc4mobx/hrmSalary/components/stepSlide/index.js b/pc4mobx/hrmSalary/components/stepSlide/index.js
new file mode 100644
index 00000000..db94ddc5
--- /dev/null
+++ b/pc4mobx/hrmSalary/components/stepSlide/index.js
@@ -0,0 +1,29 @@
+import React from 'react';
+import StepSlideHeader from './stepSlideHeader'
+import { WeaSlideModal } from 'ecCom'
+import SlideModalTitle from '../../components/slideModalTitle'
+
+export default class StepSlide extends React.Component {
+    render() {
+        return (
+            <WeaSlideModal visible={this.props.visible}
+                top={0}
+                width={40}
+                height={100}
+                direction={'right'}
+                measure={'%'}
+                title={
+                <SlideModalTitle 
+                    subtitle={this.props.title}
+                    editable={false}
+                />
+                }
+                content={(<StepSlideHeader>
+                    {this.props.content}
+                </StepSlideHeader>)}
+                onClose={() => setSlideVisiable(false)}
+                showMask={true}
+                closeMaskOnClick={() => setSlideVisiable(false)} /> 
+        )
+    }
+}
\ No newline at end of file
diff --git a/pc4mobx/hrmSalary/components/stepSlide/index.less b/pc4mobx/hrmSalary/components/stepSlide/index.less
new file mode 100644
index 00000000..db6e928c
--- /dev/null
+++ b/pc4mobx/hrmSalary/components/stepSlide/index.less
@@ -0,0 +1,9 @@
+.stepSlideHeader {
+    .headerWrapper {
+        padding-top: 10px;
+        padding-bottom: 10px;
+        border-bottom: 1px solid #eee;
+    }
+
+    
+}
\ No newline at end of file
diff --git a/pc4mobx/hrmSalary/components/stepSlide/stepSlideHeader.js b/pc4mobx/hrmSalary/components/stepSlide/stepSlideHeader.js
new file mode 100644
index 00000000..7256ad6e
--- /dev/null
+++ b/pc4mobx/hrmSalary/components/stepSlide/stepSlideHeader.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import { WeaSteps } from 'ecCom'
+const Step = WeaSteps.Step;
+import "./index.less"
+
+export default class StepSlideHeader extends React.Component {
+    render() {
+        return (
+            <div className="stepSlideHeader">
+                <div className="headerWrapper">
+                    <WeaSteps  current={1}>
+                        <Step description="基础设置" />
+                        <Step description="关联人员" />
+                        <Step description="薪资项目" />
+                        <Step description="调薪记薪规则" />
+                        <Step description="校验规则" />
+                    </WeaSteps>
+                </div>
+                <div className="contentWrapper">
+                    {this.props.children}
+                </div>
+            </div>
+            
+        )
+    }
+}
\ No newline at end of file
diff --git a/pc4mobx/hrmSalary/pages/ledger/columns.js b/pc4mobx/hrmSalary/pages/ledger/columns.js
index cb9722d4..6d2919a8 100644
--- a/pc4mobx/hrmSalary/pages/ledger/columns.js
+++ b/pc4mobx/hrmSalary/pages/ledger/columns.js
@@ -1,43 +1,42 @@
+import { Switch } from 'antd'
 export const columns = [
     {
-        title: "姓名",
+        title: "账套名称",
         dataIndex: 'title',
         key: 'title',
     },
     {
-        title: "个税扣缴义务人",
+        title: "薪资周期",
         dataIndex: 'title',
         key: 'title',
     },
     {
-        title: "部门",
+        title: "关联人数",
         dataIndex: 'title',
         key: 'title',
     },
     {
-        title: "手机号",
-        dataIndex: 'title',
-        key: 'title',
+        title: "启用",
+        dataIndex: 'isSwitch',
+        key: 'isSwitch',
+        render: (text) => <Switch />
     },
     {
-        title: "员工状态",
-        dataIndex: 'title',
-        key: 'title',
-    },
-    {
-        title: "基本工资",
+        title: "备注",
         dataIndex: 'title',
         key: 'title',
     },
     {
         title: "操作",
-        dataIndex: 'title',
-        key: 'title',
+        dataIndex: 'cz',
+        key: 'cz'
     }
 ]
 
 
-export const dataSource = [];
+export const dataSource = [{
+    title: "测试"
+}];
 
 
 
diff --git a/pc4mobx/hrmSalary/pages/ledger/index.js b/pc4mobx/hrmSalary/pages/ledger/index.js
index 68cf290d..e9fd0b77 100644
--- a/pc4mobx/hrmSalary/pages/ledger/index.js
+++ b/pc4mobx/hrmSalary/pages/ledger/index.js
@@ -4,11 +4,13 @@ import { toJS } from 'mobx';
 
 import { Button, Table, DatePicker } from 'antd';
 
-import { WeaTop, WeaTab, WeaRightMenu, WeaRangePicker, WeaTable } from 'ecCom';
+import { WeaTop, WeaTab, WeaRightMenu, WeaRangePicker, WeaTable, WeaInputSearch } from 'ecCom';
 
 import { renderNoright, getSearchs } from '../../util'; // 渲染form数据的方法：因为多个页面都会使用，所以抽的公共方法在util中
 import CustomTab from '../../components/customTab';
 import ContentWrapper from '../../components/contentWrapper';
+import StepSlide from '../../components/stepSlide'
+import SlideBaseForm from './slideBaseForm'
 
 import { columns, dataSource } from './columns';
 
@@ -21,9 +23,27 @@ export default class Ledger extends React.Component {
     super(props);
     this.state = {
       value: "",
-      selectedKey: "0"
+      selectedKey: "0",
+      stepSlideVisible: false,
+      columns: columns.map(item => {
+        if(item.dataIndex == "cz") {
+          item.render = () => <div>
+            <a style={{marginRight: "10px"}}>关联人员</a>
+            <a style={{marginRight: "10px"}} >删除</a>
+            <a style={{marginRight: "10px"}} onClick={() => this.onEdit()}>编辑</a>
+            <a style={{marginRight: "10px"}} >复制</a>
+            <a style={{marginRight: "10px"}}>操作日志</a>
+        </div>
+        }
+      })
     }
   }
+
+  onEdit() {
+    this.setState({
+      stepSlideVisible: true
+    })
+  }
   render() {
     const { baseTableStore } = this.props;
     const { loading, hasRight, form, condition, tableStore, showSearchAd, getTableDatas, doSearch, setShowSearchAd } = baseTableStore;
@@ -56,9 +76,13 @@ export default class Ledger extends React.Component {
     const topTab = [
       ];
 
-    const renderSearchOperationItem = () => {
-      return <div></div>
-     
+    const renderRightOperation = () => {
+      return (
+        <div style={{display: "inline-block"}}>
+          <Button type="primary" style={{marginRight: "10px"}} onClick={() => this.setState({stepSlideVisible: true})}>新建</Button>
+          <WeaInputSearch />
+        </div>
+      )
     }
 
     return (
@@ -75,7 +99,25 @@ export default class Ledger extends React.Component {
             dropMenuDatas={rightMenu} // 下拉菜单（和页面的右键菜单相同）
             dropMenuProps={{ collectParams }} // 收藏功能: 配置之后显示 收藏、帮助、显示页面地址 这3个功能
           >
+
+            <CustomTab 
+                searchOperationItem={
+                  renderRightOperation()
+                }
+                onChange={(v) => {
+                  
+                }}
+              />
             <WeaTable columns={columns} dataSource={dataSource}/>
+
+            {
+              this.state.stepSlideVisible && <StepSlide 
+              visible={this.state.stepSlideVisible} 
+              onCancel={() => {this.setState({stepSlideVisible: false})}}
+              title="新建账套"
+              content={<SlideBaseForm />}
+              />
+            }
           </WeaTop>
         </WeaRightMenu>
       </div>
diff --git a/pc4mobx/hrmSalary/pages/ledger/index.less b/pc4mobx/hrmSalary/pages/ledger/index.less
new file mode 100644
index 00000000..6b335d40
--- /dev/null
+++ b/pc4mobx/hrmSalary/pages/ledger/index.less
@@ -0,0 +1,27 @@
+.slideBaseForm {
+    .leftContentWrapper {
+        margin: 10px;
+        border: 1px solid #eee;
+        border-radius: 5px;
+        padding: 10px;
+    }
+    .rightContentWrapper {
+        margin: 10px;
+    }
+}
+
+.rightContentWrapper {
+    .greytip {
+        color: #999;
+        line-height: 24px;
+        font-size: 12px;
+    }
+    .tipLabel {
+        color: #333;
+        font-size: 14px;
+        line-height: 26px;
+    }
+    .higelinered {
+        color: red;
+    }
+}
\ No newline at end of file
diff --git a/pc4mobx/hrmSalary/pages/ledger/slideBaseForm.js b/pc4mobx/hrmSalary/pages/ledger/slideBaseForm.js
new file mode 100644
index 00000000..ba617cdc
--- /dev/null
+++ b/pc4mobx/hrmSalary/pages/ledger/slideBaseForm.js
@@ -0,0 +1,154 @@
+import React from 'react'
+import { Row, Col } from 'antd'
+import { WeaSelect, WeaTextarea, WeaInput } from "ecCom"
+import "./index.less"
+import TipLabel from '../../components/TipLabel'
+
+
+const options = [
+    {
+        key: "1",
+        selected: true,
+        showname: "111"
+    },{
+        key: "2",
+        selected: false,
+        showname: "222"
+    },{
+        key: "3",
+        selected: false,
+        showname: "333"
+    }
+];
+
+export default class SlideBaseForm extends React.Component {
+    render() {
+        return (
+            <div className="slideBaseForm">
+                <Row>
+                    <Col span={18}>
+                        <div className="leftContentWrapper">
+                            <Row className="formItem">
+                                <Col span={6}>账套名称</Col>
+                                <Col span={18}>
+                                    <WeaInput style={{width: "190px"}}/>
+                                </Col>
+                            </Row>
+                            <Row className="formItem">
+                                <Col span={6}>薪资类型</Col>
+                                <Col span={18}>
+                                    <WeaSelect options={[{
+                                        key: "1",
+                                        selected: true,
+                                        showname: "工资薪金"
+                                    }]} style={{width: "190px"}}/>
+                                </Col>
+                            </Row>
+                            <Row className="formItem">
+                                <Col span={6}>薪资周期</Col>
+                                <Col span={18}>
+                                    <WeaSelect options={[
+                                        {
+                                            key: "1",
+                                            selected: true,
+                                            showname: "本月"
+                                        }]} style={{width: "90px"}}/>
+                                    <WeaSelect options={[
+                                        {
+                                            key: "1",
+                                            selected: true,
+                                            showname: "1号"
+                                        }]} style={{width: "90px", marginLeft: '10px'}}/>
+                                    <span style={{marginLeft: "10px"}}>至本月最后一天</span>
+                                </Col>
+                            </Row>
+                            <Row className="formItem">
+                                <Col span={6}>税款所属期</Col>
+                                <Col span={18}>
+                                    <WeaSelect options={[
+                                        {
+                                            key: "1",
+                                            selected: true,
+                                            showname: "下月"
+                                        }]} style={{width: "90px"}}/>
+                                </Col>
+                            </Row>
+                            <Row className="formItem">
+                                <Col span={6}>考勤周期</Col>
+                                <Col span={18}>
+                                    <WeaSelect options={[
+                                        {
+                                            key: "1",
+                                            selected: true,
+                                            showname: "本月"
+                                        }]} style={{width: "90px"}}/>
+                                    <WeaSelect options={[{
+                                            key: "1",
+                                            selected: true,
+                                            showname: "1号"
+                                        }]} style={{width: "90px", marginLeft: "10px"}}/>
+                                    <span style={{marginLeft: "10px"}}>至本月最后一天</span>
+                                </Col>
+                            </Row>
+                            <Row className="formItem">
+                                <Col span={6}>福利台账月份</Col>
+                                <Col span={18}>
+                                    <WeaSelect options={[
+                                        {
+                                            key: "1",
+                                            selected: true,
+                                            showname: "本月"
+                                        }]} style={{width: "90px"}}/>
+                                </Col>
+                            </Row>
+                            <Row className="formItem">
+                                <Col span={6}>福利台账月份</Col>
+                                <Col span={18}>
+                                    <WeaSelect options={[
+                                        {
+                                            key: "1",
+                                            selected: true,
+                                            showname: "本月"
+                                        }]} style={{width: "90px"}}/>
+                                </Col>
+                            </Row>
+                            <Row className="formItem">
+                                <Col span={6}>异动人员核算规则</Col>
+                                <Col span={18}>
+                                    <WeaSelect options={[
+                                        {
+                                            key: "1",
+                                            selected: true,
+                                            showname: "核算方案"
+                                        }]} style={{width: "190px"}}/>
+                                </Col>
+                            </Row>
+                            <Row className="formItem">
+                                <Col span={6}>备注</Col>
+                                <Col span={18}>
+                                <WeaTextarea style={{width: "190px"}}/>
+                                </Col>
+                            </Row>
+                        </div>
+                    </Col>
+                    <Col span={6}>
+                        <div className="rightContentWrapper">
+                            <TipLabel title="月份周期说明">
+                                <p className="greytip">例：薪资所属月是2021-11（即核算员工11月的工资）</p>
+                                <p className="greytip">根据您当前的选择，相应的周期为：</p>
+                                <div className="tipLabel">薪资周期</div>
+                                <p className="greytip"><span className="higelinered">2021-11-01</span>至<span className="higelinered">2021-11-30</span></p>
+                                <div className="tipLabel">税款所属期</div>
+                                <p className="greytip higelinered">2021-12</p>
+                                <div className="tipLabel">考勤取值周期</div>
+                                <p className="greytip"><span className="higelinered">2021-11-01</span>至<span className="higelinered">2021-11-30</span></p>
+                                <div className="tipLabel">福利台账月份</div>
+                                <p className="greytip">引用<span className="higelinered">2021-11</span>的福利台账数据</p>
+                            </TipLabel>
+                        </div>
+                    </Col>
+                </Row>
+            </div>
+        )
+    }
+}
\ No newline at end of file
diff --git a/pc4mobx/hrmSalary/style/index.less b/pc4mobx/hrmSalary/style/index.less
index 6c61ba14..d8ed85d8 100644
--- a/pc4mobx/hrmSalary/style/index.less
+++ b/pc4mobx/hrmSalary/style/index.less
@@ -11,3 +11,8 @@
     margin-top: -10px;
   }
 }
+
+
+.formItem {
+  margin-bottom: 10px;
+}
\ No newline at end of file