diff --git a/pc4mobx/hrmSalary/apis/mySalaryBenefits.js b/pc4mobx/hrmSalary/apis/mySalaryBenefits.js
index c491ff6d..7a29d7db 100644
--- a/pc4mobx/hrmSalary/apis/mySalaryBenefits.js
+++ b/pc4mobx/hrmSalary/apis/mySalaryBenefits.js
@@ -2,7 +2,14 @@ import { WeaTools } from 'ecCom';
 
 // 工资单列表
 export const mySalaryBillList = params => {
-  return WeaTools.callApi('/api/bs/hrmsalary/salaryBill/mySalaryBillList', 'POST', params);
+  return fetch('/api/bs/hrmsalary/salaryBill/mySalaryBillList', {
+    method: 'POST',
+    mode: 'cors',
+    headers: {
+        'Content-Type': 'application/json'
+    }, 
+    body: JSON.stringify(params)
+  }).then(res => res.json())
 };
 
 // 社保福利列表
diff --git a/pc4mobx/hrmSalary/pages/mySalary/index.js b/pc4mobx/hrmSalary/pages/mySalary/index.js
index 71f37656..e7ec9da3 100644
--- a/pc4mobx/hrmSalary/pages/mySalary/index.js
+++ b/pc4mobx/hrmSalary/pages/mySalary/index.js
@@ -4,35 +4,96 @@ import { toJS } from 'mobx';
 
 import { Button, Table, DatePicker } from 'antd';
 
-import { WeaTop, WeaTab, WeaRightMenu, WeaRangePicker, WeaTable } from 'ecCom';
+import { WeaTop, WeaTab, WeaRightMenu, WeaRangePicker, WeaTable, WeaDatePicker } from 'ecCom';
 
 import { renderNoright, getSearchs } from '../../util'; // 渲染form数据的方法：因为多个页面都会使用，所以抽的公共方法在util中
 import CustomTab from '../../components/customTab';
 import ContentWrapper from '../../components/contentWrapper';
+import moment from 'moment'
 import "./index.less"
 
 import { payrollColumns,
   socialSecurityBenefitsColumns,
   salaryRecordColumns,
   dataSource } from './columns';
+import PayrollModal from './payrollModal';
 
 const { MonthPicker } = DatePicker;
 
-@inject('baseTableStore')
+@inject('mySalaryStore')
 @observer
 export default class MySalary extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
       value: "",
-      selectedKey: "0"
+      selectedKey: "0",
+      salaryStartDate: moment(new Date()).format("YYYY-MM"),
+      salaryEndDate: moment(new Date()).format("YYYY-MM"),
+      salaryBillVisible: false
     }
+    this.salaryInfoId = ""
   }
-  render() {
-    const { baseTableStore } = this.props;
-    const { loading, hasRight, form, condition, tableStore, showSearchAd, getTableDatas, doSearch, setShowSearchAd } = baseTableStore;
-    const { tabIndex } = baseTableStore 
 
+  componentWillMount() {
+    const { mySalaryStore : {mySalaryBillList}} = this.props;
+    mySalaryBillList([this.state.salaryStartDate, this.state.salaryEndDate])
+  }
+
+  // 查看工资单
+  handleView(record) {
+    this.salaryInfoId = record.id;
+    this.setState({
+      salaryBillVisible: true
+    })
+  }
+
+  getColumns() {
+    const { mySalaryStore: {myBillTableStore}} = this.props;
+    let columns = myBillTableStore.columns ? myBillTableStore.columns: []
+    columns = columns.filter(item => item.hide == "false")
+    columns.map(item => {
+      if(item.dataIndex == "salaryYearMonth") {
+          item.render = (text, record) => {
+              return <span>{moment(parseInt(text)).format("YYYY-MM")}</span>
+          }
+      } else if(item.dataIndex == "sendTime") {
+          item.render = (text, record) => {
+              return <span>{moment(parseInt(text)).format("YYYY-MM-DD HH:mm:ss")}</span>
+          }
+      }
+  })
+    columns.push({
+      title: "操作",
+      dataIndex: "operate",
+      render: (text,record) => {
+        return (
+          <a onClick={() => {this.handleView(record)}}>查看</a>
+        )
+      }
+    })
+    return columns;
+  }
+
+  // 工资单开始时间
+  onSalaryStartDateChange(value) {
+    this.setState({salaryStartDate: value})
+    const { mySalaryStore : {mySalaryBillList}} = this.props;
+    mySalaryBillList([value, this.state.salaryEndDate])
+  }
+
+  // 工资单结束时间
+  onSalaryEndDateChange(value) {
+    this.setState({salaryEndDate: value})
+    const { mySalaryStore : {mySalaryBillList}} = this.props;
+    mySalaryBillList([this.state.salaryStartDate, value])
+  }
+
+  render() {
+    const { mySalaryStore } = this.props;
+    const { loading, hasRight, form, condition, tableStore, showSearchAd, getTableDatas, doSearch, setShowSearchAd } = mySalaryStore;
+    const { tabIndex, myBillTableStore, myBillDataSource  } = mySalaryStore 
+    const { salaryBillVisible } = this.state;
     if (!hasRight && !loading) { // 无权限处理
       return renderNoright();
     }
@@ -78,13 +139,21 @@ export default class MySalary extends React.Component {
         return (<div><span className="tabSearchLabel">薪资所属月：</span>
         <div className="weaRangePickerWrapper">
           <div className="monthPickerWrapper">
-            <MonthPicker />
+          <WeaDatePicker
+            format="yyyy-MM"
+            value={this.state.salaryStartDate}
+            onChange={value => this.onSalaryStartDateChange(value)}
+          />
           </div>
           <span className="betweenLable">
             至
           </span>
           <div className="monthPickerWrapper">
-            <MonthPicker />
+          <WeaDatePicker
+            format="yyyy-MM"
+            value={this.state.salaryEndDate}
+            onChange={value => this.onSalaryEndDateChange(value)}
+          />
           </div>
         </div></div>)
       } else if(this.state.selectedKey == "1"){
@@ -130,7 +199,7 @@ export default class MySalary extends React.Component {
             />
 
             {
-              this.state.selectedKey == '0' && <WeaTable columns={payrollColumns} dataSource={dataSource}/>
+              this.state.selectedKey == '0' && <WeaTable columns={this.getColumns()} dataSource={myBillDataSource ? myBillDataSource : []}/>
             }
             {
               this.state.selectedKey == '1' && <WeaTable columns={socialSecurityBenefitsColumns} dataSource={dataSource} scroll={{ x: 1000}}/>
@@ -141,6 +210,13 @@ export default class MySalary extends React.Component {
             
           </WeaTop>
         </WeaRightMenu>
+        {
+          salaryBillVisible && <PayrollModal 
+            visible={salaryBillVisible}
+            id={this.salaryInfoId}
+            onCancel={() => {this.setState({salaryBillVisible: false})}}
+          />
+        }
       </div>
     )
   }
diff --git a/pc4mobx/hrmSalary/pages/mySalary/payrollModal.js b/pc4mobx/hrmSalary/pages/mySalary/payrollModal.js
new file mode 100644
index 00000000..7be4d891
--- /dev/null
+++ b/pc4mobx/hrmSalary/pages/mySalary/payrollModal.js
@@ -0,0 +1,152 @@
+import React from 'react'
+import { Modal, Row, Col } from 'antd'
+import { inject, observer } from 'mobx-react';
+
+@inject('mySalaryStore')
+@observer
+export default class PayrollModal extends React.Component {
+    componentWillMount() {
+        const { mySalaryStore: {getMySalaryBill}} = this.props;
+        getMySalaryBill(this.props.id)
+    }
+    render() {
+        const { mySalaryStore: { mySalaryBill }} = this.props;
+        return (
+            <Modal visible={this.props.visible} onCancel={() => {this.props.onCancel()}} 
+            width={900}
+            footer={null}>
+                <div className="computerTemplate" style={{
+                    backgroundColor: "rgb(246, 246, 246)",
+                    minHeight: "600px",
+                    height: "600px",
+                    overflowY: "scroll",
+                    paddingTop: "30px",
+                    paddingBottom: "20px",
+                    margin: "20px auto",
+                }}>
+                    <div className="titleWrapper" style={{
+                        textAlign: "center",
+                        fontSize: "18px",
+                        fontWeight: 700
+                    }}>
+                        { mySalaryBill.salaryTemplate && mySalaryBill.salaryTemplate.theme }
+                    </div>
+                    {
+                        mySalaryBill.salaryTemplate && mySalaryBill.salaryTemplate.background && mySalaryBill.salaryTemplate.background !== ""
+                        && <div className="background-wrapper" style={{
+                            height: "200px",
+                            margin: "10px"
+                        }}>
+                            <img className="background-img" src={mySalaryBill.salaryTemplate.background} style={{
+                                width: "100%",
+                                height: "200px"
+                            }}/>
+                        </div>
+                    }
+
+                    {/* 员工信息 */}
+                    <div className="sobItemWrapper">
+                        <div className="sobItem" style={{
+                            margin: "10px",
+                            backgroundColor: "#FFF",
+                            padding: "10px",
+                            lineHeight: "35px",
+                            textAlign: "center"
+                        }}>
+                            {
+                                mySalaryBill.employeeInformation && <Row className="titleRow" style={{
+                                    border: "1px solid #f2f2f2",
+                                    textAlign: "left"
+                                }}>
+                                    <Col span={24} className="sobTitle" style={{
+                                        paddingLeft: "10px"
+                                    }}>{mySalaryBill.employeeInformation.groupName}</Col>
+                                </Row>
+                            }
+                            <Row className="contentRow" style={{
+                                        borderLeft: "1px solid #f2f2f2",
+                                        borderBottom: "1px solid #f2f2f2",
+                                        borderRight: "1px solid #f2f2f2"
+                                    }}>
+                            {
+                                mySalaryBill.employeeInformation && mySalaryBill.employeeInformation.items.map((item, index) => (
+                                    <Col>
+                                        <Col span={ 4 } className="contentItem" style={{
+                                            borderRight: "1px solid #f2f2f2",
+                                            overflow: "hidden",
+                                            textOverflow: "ellipsis", 
+                                            whiteSpace: "nowrap"
+                                        }}>{item.name}</Col>
+                                        <Col span={ 4 } className="contentItem" 
+                                        style={{
+                                            borderRight: (index + 1) % 3 == 0 ? "none": "1px solid #f2f2f2",
+                                            overflow: "hidden",
+                                            textOverflow: "ellipsis", 
+                                            whiteSpace: "nowrap"
+                                        }}
+                                        >{item.salaryItemValue}</Col>
+                                    </Col>
+                                ))
+                            }
+                            </Row>
+                        </div>
+                    </div>
+
+                    {
+                        mySalaryBill.salaryGroups && mySalaryBill.salaryGroups.length > 0 &&
+                            mySalaryBill.salaryGroups.map(group => (
+                                <div className="sobItemWrapper">
+                                    <div className="sobItem" style={{
+                                        margin: "10px",
+                                        backgroundColor: "#FFF",
+                                        padding: "10px",
+                                        lineHeight: "35px",
+                                        textAlign: "center"
+                                    }}>
+                                    {
+                                        mySalaryBill.employeeInformation && <Row className="titleRow" style={{
+                                            border: "1px solid #f2f2f2",
+                                            textAlign: "left"
+                                        }}>
+                                            <Col span={24} className="sobTitle" style={{
+                                                paddingLeft: "10px"
+                                            }}>{group.groupName}</Col>
+                                        </Row>
+                                    }
+                                    <Row className="contentRow" style={{
+                                                borderLeft: "1px solid #f2f2f2",
+                                                borderBottom: "1px solid #f2f2f2",
+                                                borderRight: "1px solid #f2f2f2"
+                                            }}>
+                                    {
+                                        group.items && group.items.map((item, index) => (
+                                            <Col>
+                                                <Col span={ 4 } className="contentItem" style={{
+                                                    borderRight: "1px solid #f2f2f2",
+                                                    borderBottom: (index + 1) > 3 ? "1px solid #f2f2f2" : "none",
+                                                    overflow: "hidden",
+                                                    textOverflow: "ellipsis", 
+                                                    whiteSpace: "nowrap"
+                                                }}>{item.name}</Col>
+                                                <Col span={ 4 } className="contentItem" 
+                                                style={{
+                                                    borderRight: (index + 1) % 3 == 0 ? "none": "1px solid #f2f2f2",
+                                                    borderBottom: (index + 1) > 3 ? "1px solid #f2f2f2" : "none",
+                                                    overflow: "hidden",
+                                                    textOverflow: "ellipsis", 
+                                                    whiteSpace: "nowrap"
+                                                }}
+                                                >{item.salaryItemValue}</Col>
+                                            </Col>
+                                        ))
+                                    }
+                                    </Row>
+                                </div>
+                            </div>
+                        ))
+                    }
+                </div>
+            </Modal>
+        )
+    }
+}
\ No newline at end of file
diff --git a/pc4mobx/hrmSalary/pages/payroll/SalarySendList.js b/pc4mobx/hrmSalary/pages/payroll/SalarySendList.js
index 17275535..153a66f5 100644
--- a/pc4mobx/hrmSalary/pages/payroll/SalarySendList.js
+++ b/pc4mobx/hrmSalary/pages/payroll/SalarySendList.js
@@ -2,6 +2,7 @@ import React from 'react'
 import { inject, observer } from 'mobx-react';
 import { Table, Menu, Dropdown } from 'antd'
 import { WeaTable } from 'ecCom'
+import moment from 'moment'
 
 @inject('payrollStore')
 @observer
@@ -39,6 +40,17 @@ export default class SalarySendList extends React.Component {
         }
         
         let result =  columns.filter(item => item.hide == "false")
+        result.map(item => {
+            if(item.dataIndex == "salaryYearMonth") {
+                item.render = (text, record) => {
+                    return <span>{moment(parseInt(text)).format("YYYY-MM")}</span>
+                }
+            } else if(item.dataIndex == "lastSendTime") {
+                item.render = (text, record) => {
+                    return <span>{moment(parseInt(text)).format("YYYY-MM-DD HH:mm:ss")}</span>
+                }
+            }
+        })
         return result
             .concat([
                 {
diff --git a/pc4mobx/hrmSalary/stores/mySalary.js b/pc4mobx/hrmSalary/stores/mySalary.js
index f91a7010..842c1af1 100644
--- a/pc4mobx/hrmSalary/stores/mySalary.js
+++ b/pc4mobx/hrmSalary/stores/mySalary.js
@@ -1,6 +1,6 @@
 import { observable, action, toJS } from 'mobx';
 import { message } from 'antd';
-import { WeaForm, WeaLogView } from 'comsMobx';
+import { WeaForm, WeaLogView, WeaTableNew } from 'comsMobx';
 import { WeaLocaleProvider } from 'ecCom';
 import moment from 'moment'
 
@@ -8,6 +8,7 @@ import * as API from '../apis/mySalaryBenefits'; // 引入API接口文件
 
 const {LogStore} = WeaLogView;
 const getLabel = WeaLocaleProvider.getLabel;
+const { TableStore } = WeaTableNew;
 
 export class MySalaryStore {
   @observable tableStore = new TableStore(); // new table
@@ -19,6 +20,12 @@ export class MySalaryStore {
   @observable tabIndex = 0;  // tab选中坐标
   @observable params = {};  // 搜索条件
 
+  // 工资单列表
+  @observable myBillDataSource = [];
+  @observable myBillTableStore = new TableStore();
+
+  // 工资单详情
+  @observable mySalaryBill = {};
 
   @action
   initParams = () => {
@@ -88,5 +95,30 @@ export class MySalaryStore {
     this.getTableDatas();
     this.showSearchAd = false;
   }
+
+  // 我的工资单列表
+  @action
+  mySalaryBillList = (salaryYearMonth = []) => {
+    API.mySalaryBillList({salaryYearMonth}).then(res => {
+      if(res.status) {
+        this.myBillDataSource = res.data.datas
+        this.myBillTableStore.getDatas(res.data.dataKey.datas)
+      } else {
+        message.error(res.errormsg || "获取失败")
+      }
+    })
+  }
+
+  // 我的工资单详情
+  @action
+  getMySalaryBill = (salaryInfoId) => {
+    API.mySalaryBill({salaryInfoId}).then(res => {
+      if(res.status) {
+        this.mySalaryBill = res.data
+      } else {
+        message.error(res.errormsg || "获取失败")
+      }
+    })
+  }
   
 }
\ No newline at end of file