diff --git a/pc4mobx/hrmSalary/apis/payroll.js b/pc4mobx/hrmSalary/apis/payroll.js
index 85680736..8d6e72fe 100644
--- a/pc4mobx/hrmSalary/apis/payroll.js
+++ b/pc4mobx/hrmSalary/apis/payroll.js
@@ -137,7 +137,14 @@ export const savePayroll = params => {
 
 //工资单-编辑工资单
 export const updatePayroll = params => {
-    return WeaTools.callApi('/api/bs/hrmsalary/salaryBill/template/update', 'POST', params);
+    return fetch('/api/bs/hrmsalary/salaryBill/template/update', {
+        method: 'POST',
+        mode: 'cors',
+        headers: {
+            'Content-Type': 'application/json'
+        }, 
+        body: JSON.stringify(params)
+    }).then(res => res.json())
 }
 
 
diff --git a/pc4mobx/hrmSalary/components/progressModal/index.js b/pc4mobx/hrmSalary/components/progressModal/index.js
index 64ba0d3a..818ce3fb 100644
--- a/pc4mobx/hrmSalary/components/progressModal/index.js
+++ b/pc4mobx/hrmSalary/components/progressModal/index.js
@@ -6,7 +6,7 @@ export default class ProgressModal extends React.Component {
     render() {
         return (
             <div>
-                <Modal style={{top: 20}} visible={this.props.visible} width={this.props.width ? this.props.width: 600} onCancel={() => {this.props.onCancel()}} footer={null}>
+                <Modal title="正在核算请稍后" style={{top: 20}} visible={this.props.visible} width={this.props.width ? this.props.width: 600} onCancel={() => {this.props.onCancel()}} footer={null}>
                     <div>
                         <WeaProgress percent={this.props.progress ? this.props.progress : 0} strokeColor={this.props.color ? this.props.color: "#B37BFA"} />
                     </div>
diff --git a/pc4mobx/hrmSalary/pages/payroll/components/backgroundUpload.js b/pc4mobx/hrmSalary/pages/payroll/components/backgroundUpload.js
index 91e5ff7c..d66e626e 100644
--- a/pc4mobx/hrmSalary/pages/payroll/components/backgroundUpload.js
+++ b/pc4mobx/hrmSalary/pages/payroll/components/backgroundUpload.js
@@ -21,16 +21,13 @@ function beforeUpload(file) {
 }
 
   export default class BackgroundUpload extends React.Component {
-      constructor(props) {
-          super(props)
-          this.state = {
-            showOperate: false,
-            visible: false
-          }
-      }
-      componentWillMount() {
-        this.props.imageUrl && this.setState({imageUrl: this.props.imageUrl})
-      }
+    constructor(props) {
+        super(props)
+        this.state = {
+        showOperate: false,
+        visible: false
+        }
+    }
 
     // 上传完成监听
     handleChange = (info) => {
@@ -42,10 +39,7 @@ function beforeUpload(file) {
 
     // 删除
     handleDelete = () => {
-        this.setState({
-            imageUrl: null,
-        })
-        this.props.onChange && this.props.onChagne("");
+        this.props.onChange && this.props.onChange(null);
     }
 
     // 预览
@@ -61,11 +55,11 @@ function beforeUpload(file) {
             showUploadList: false,
             onChange: this.handleChange.bind(this)
           };
-        const imageUrl = this.state.imageUrl;
+        const { imageUrl } = this.props;
         return (
             <div className="uploadPictureWrapper">
                 {
-                imageUrl ?
+                (imageUrl || imageUrl == "") ?
                     <div className="previewWrapper" onMouseEnter={() => {this.setState({showOperate: true})}} onMouseLeave={() => {this.setState({showOperate: false})}}>
                         <img src={imageUrl} alt="" className="previewImg"/>
                         {
@@ -86,9 +80,6 @@ function beforeUpload(file) {
                     </div>
                 </Modal>
             </div>
-
-            
-        
         );
       }
   }
\ No newline at end of file
diff --git a/pc4mobx/hrmSalary/pages/payroll/index.js b/pc4mobx/hrmSalary/pages/payroll/index.js
index 1236a942..550f4b27 100644
--- a/pc4mobx/hrmSalary/pages/payroll/index.js
+++ b/pc4mobx/hrmSalary/pages/payroll/index.js
@@ -42,6 +42,7 @@ export default class Payroll extends React.Component {
       templateCurrentId: "",
       copyModalVisible: false
     }
+    this.recordId = ""
     columns.map(item => {
       if(item.dataIndex == "cz") {
         item.render = (text, record) => {
@@ -132,6 +133,10 @@ export default class Payroll extends React.Component {
 
   // 模板列表编辑
   handleTemplateListEdit(record) {
+    const { payrollStore } = this.props;
+    const { getPayrollShowForm } = payrollStore
+    this.recordId = record.id
+    getPayrollShowForm(record.id)
     this.setState({templateCurrentId: record.id, selectedTab: 0},() => {
       this.setState({editSlideVisible: true})
     })
@@ -184,9 +189,24 @@ export default class Payroll extends React.Component {
 
   // 预览
   handlePreview() { 
+    const { payrollStore : {templateBaseData, salaryTemplateShowSet, salaryItemSet}} = this.props;
+    window.localStorage.setItem("templateBaseData", JSON.stringify(templateBaseData))
+    window.localStorage.setItem("salaryTemplateShowSet", JSON.stringify(salaryTemplateShowSet))
+    window.localStorage.setItem("salaryItemSet", JSON.stringify(salaryItemSet))
     window.open("/spa/hrmSalary/static/index.html#/main/hrmSalary/templatePreview")
   }
   
+  // 更新保存
+  handleUpdateSave() {
+    const { payrollStore}  = this.props;
+    const { fetchUpdatePayroll } = payrollStore;
+    fetchUpdatePayroll(this.recordId).then(() => {
+      this.setState({
+        editSlideVisi1le: false,
+        selectedTab: 0 
+      })
+    })
+  }
 
   render() {
     const { payrollStore } = this.props;
@@ -280,6 +300,12 @@ export default class Payroll extends React.Component {
         currentStep: this.state.currentStep + 1
       })
     }
+    // 上一步
+    const prevStep = () => {
+      this.setState({
+        currentStep: this.state.currentStep - 1
+      })
+    }
 
     return (
       <div className="mySalaryBenefitsWrapper">
@@ -338,7 +364,7 @@ export default class Payroll extends React.Component {
                 }
                 {
                     currentStep == 1 && <div style={{display: "inline-block"}}>
-                        <Button type="default" style={{marginRight: "10px"}}>上一步</Button>
+                        <Button type="default" style={{marginRight: "10px"}} onClick={() => {prevStep()}}>上一步</Button>
                         <Button type="primary" onClick={() => {this.handleSave()}}>保存</Button>
                         <Button type="default" style={{marginLeft: "10px"}} onClick={() => {this.handlePreview()}}>预览</Button>
                     </div>
@@ -360,7 +386,6 @@ export default class Payroll extends React.Component {
           />
       }
 
-
       {
         this.state.editSlideVisible && 
         <WeaSlideModal visible={this.state.editSlideVisible}
@@ -374,6 +399,7 @@ export default class Payroll extends React.Component {
               subtitle={"编辑工资单模板"}
               tabs={[{title: '基础设置', key: 0}, {title: "显示设置", key: 1}]}
               editable={true}
+              onSave={() => {this.handleUpdateSave()}}
               selectedTab={selectedTab}
               subItemChange={
                 (item) => {this.setState({selectedTab: item.key})}
@@ -382,7 +408,7 @@ export default class Payroll extends React.Component {
           }
           content={<div>
             {
-              selectedTab == 0 && <BaseInformForm id={this.state.templateCurrentId}/>
+              selectedTab == 0 && <BaseInformForm id={this.state.templateCurrentId} onChange={(request) => {this.handleBaseInfoChange(request)}}/>
             }
             {
               selectedTab == 1 && <ShowSettingForm id={this.state.templateCurrentId}/>
diff --git a/pc4mobx/hrmSalary/pages/payroll/stepForm/baseInformForm.js b/pc4mobx/hrmSalary/pages/payroll/stepForm/baseInformForm.js
index 85d6bebe..6aa51ded 100644
--- a/pc4mobx/hrmSalary/pages/payroll/stepForm/baseInformForm.js
+++ b/pc4mobx/hrmSalary/pages/payroll/stepForm/baseInformForm.js
@@ -1,9 +1,10 @@
 import React from 'react'
-import { Row, Col, Switch } from 'antd'
+import { Row, Col, Switch, Select } from 'antd'
 import { WeaInput, WeaSelect } from 'ecCom'
 import { inject, observer } from 'mobx-react';
 import RequiredLabelTip from '../../../components/requiredLabelTip';
 import "./index.less"
+const { Option } = Select
 
 @inject('payrollStore')
 @observer
@@ -21,9 +22,13 @@ export default class BaseInformForm extends React.Component {
         const { getPayrollBaseForm} = payrollStore
         getPayrollBaseForm(this.props.id).then(data => {
             this.setState({
-                inited: true,
                 options: data.salarySobOptions,
                 request: data.templateBaseData
+            }, () => {
+                this.setState({
+                    inited: true,
+                })
+                
             })
         })
     }
@@ -49,8 +54,14 @@ export default class BaseInformForm extends React.Component {
                         <Row className="formItem">
                             <Col span={8}>薪资账套<RequiredLabelTip /></Col>
                             <Col span={16}>
+
                                 {
-                                    this.state.inited && <WeaSelect options={this.state.options} value={salarySob} style={{width: "200px"}} onChange={(value) => {this.hanldeChange({salarySob: value})}}/>
+                                    this.state.inited && this.state.options.length > 0 && <Select 
+                                    defaultValue={salarySob ? salarySob : ""} value={salarySob ? salarySob : ""} style={{ width: "200px" }} onChange={(value) => this.hanldeChange({salarySob: value})}>
+                                    {this.state.options.map(item => (
+                                        <Option value={item.key} key={item.key}>{item.showname}</Option>
+                                    ))}
+                                    </Select>
                                 }
                             </Col>
                         </Row>
diff --git a/pc4mobx/hrmSalary/pages/payroll/templatePreview/computerTemplate/index.js b/pc4mobx/hrmSalary/pages/payroll/templatePreview/computerTemplate/index.js
index 9d00cb4f..1413baf7 100644
--- a/pc4mobx/hrmSalary/pages/payroll/templatePreview/computerTemplate/index.js
+++ b/pc4mobx/hrmSalary/pages/payroll/templatePreview/computerTemplate/index.js
@@ -1,35 +1,77 @@
 import React from 'react'
 import background from './background.png'
 import { Row, Col } from 'antd'
+import moment from 'moment'
 
+import { inject, observer } from 'mobx-react';
+
+@inject('payrollStore')
+@observer
 export default class ComputerTemplate extends React.Component {
+    constructor(props) {
+        super(props);
+        this.templateBaseData = {}
+        this.salaryItemSetStr = {}
+        this.salaryTemplateShowSet = []
+    }
     
+    componentWillMount() {
+        let templateBaseDataStr = window.localStorage.getItem("templateBaseData");
+        this.templateBaseData = JSON.parse(templateBaseDataStr)
+        let salaryTemplateShowSetStr = window.localStorage.getItem("salaryTemplateShowSet");
+        let salaryItemSetStr = window.localStorage.getItem("salaryItemSet");
+        this.salaryItemSet = JSON.parse(salaryItemSetStr)
+        this.salaryTemplateShowSet = JSON.parse(salaryTemplateShowSetStr)
+    }
+
     render() {
         const { isPC } = this.props;
         return (
             <div className="computerTemplate">
                 <div className="titleWrapper">
-                    测试标题
+                    {this.salaryTemplateShowSet.theme.replace("${companyName}", "上海泛微").replace("${salaryMonth}", moment(new Date()).format("YYYY-MM"))}
                 </div>
                 <div className="background-wrapper">
-                    <img className="background-img" src={background} />
+                    <img className="background-img" src={this.salaryTemplateShowSet.background} />
+                </div>
+
+                <div className="sobItemDiv" style={{margin: "20px auto"}}>
+                    {
+                        this.salaryTemplateShowSet.textContentPosition == 1 && this.salaryTemplateShowSet.textContent
+                    }
                 </div>
 
                 <div className="sobItemWrapper">
-                    <div className="sobItem">
-                        <Row className="titleRow">
-                            <Col span={24} className="sobTitle">员工信息</Col>
-                        </Row>
+                    {
+                        this.salaryItemSet.length > 0 && 
+                        this.salaryItemSet.map(group => (
+                            <div className="sobItem">
+                                <Row className="titleRow">
+                                    <Col span={24} className="sobTitle">{group.groupName}</Col>
+                                </Row>
+                                
+                                <Row className="contentRow">
+                                    {
+                                        group.items && group.items.map(item => (
+                                            <Col span={8}>
+                                                <Row>
+                                                    <Col span={ 12 } className="contentItem">{item.name}</Col>
+                                                    <Col span={ 12 } className="contentItem">{item.salaryItemValue}</Col>
+                                                </Row>
+                                            </Col>
+                                        ))
+                                    }
+                                </Row>
+                            </div>
+                        ))
                         
-                        <Row className="contentRow">
-                            <Col span={ 4 } className="contentItem">个税扣缴义务人</Col>
-                            <Col span={ 4 } className="contentItem">上海泛微</Col>
-                            <Col span={ 4 } className="contentItem">姓名</Col>
-                            <Col span={ 4 } className="contentItem">张三</Col>
-                            <Col span={ 4 } className="contentItem">部门</Col>
-                            <Col span={ 4 } className="contentItem">研发部</Col>
-                        </Row>
-                    </div>
+                    }
+                    
+                </div>
+                <div style={{margin: "20px auto"}}>
+                    {
+                        this.salaryTemplateShowSet.textContentPosition == 2 && this.salaryTemplateShowSet.textContent
+                    }
                 </div>
             </div>
         )
diff --git a/pc4mobx/hrmSalary/pages/payroll/templatePreview/index.js b/pc4mobx/hrmSalary/pages/payroll/templatePreview/index.js
index ed6be8b5..1ea6dce8 100644
--- a/pc4mobx/hrmSalary/pages/payroll/templatePreview/index.js
+++ b/pc4mobx/hrmSalary/pages/payroll/templatePreview/index.js
@@ -4,7 +4,10 @@ import computer from './computer.png'
 import './index.less'
 import ComputerTemplate from './computerTemplate'
 import PhoneTemplate from './phoneTemplate'
+import { inject, observer } from 'mobx-react';
 
+@inject('payrollStore')
+@observer
 export default class TemplatePreview extends React.Component {
     constructor(props) {
         super(props)
@@ -13,6 +16,8 @@ export default class TemplatePreview extends React.Component {
         }
     }
 
+    
+
     handleSelectClick(selectKey) {
         this.setState({selectKey})
     }
@@ -34,7 +39,7 @@ export default class TemplatePreview extends React.Component {
 
                 <div className="contentWrapper">
                     {
-                        this.state.selectKey == "0" ? <ComputerTemplate/> : <PhoneTemplate />
+                        this.state.selectKey == "0" ? <ComputerTemplate /> : <PhoneTemplate />
                     }
                     
                 </div>
diff --git a/pc4mobx/hrmSalary/pages/payroll/templatePreview/phoneTemplate/index.js b/pc4mobx/hrmSalary/pages/payroll/templatePreview/phoneTemplate/index.js
index 9fdfab88..571d607d 100644
--- a/pc4mobx/hrmSalary/pages/payroll/templatePreview/phoneTemplate/index.js
+++ b/pc4mobx/hrmSalary/pages/payroll/templatePreview/phoneTemplate/index.js
@@ -2,8 +2,13 @@ import React from 'react'
 import { Row, Col} from 'antd'
 import background from '../computerTemplate/background.png'
 import "../index.less"
+import { inject, observer } from 'mobx-react';
 
+
+@inject('payrollStore')
+@observer
 export default class PhoneTemplate extends React.Component {
+    
     render() {
         return (
             <div className="computerTemplate phoneTemplate" >
diff --git a/pc4mobx/hrmSalary/stores/payroll.js b/pc4mobx/hrmSalary/stores/payroll.js
index dccf61e2..f6a26d89 100644
--- a/pc4mobx/hrmSalary/stores/payroll.js
+++ b/pc4mobx/hrmSalary/stores/payroll.js
@@ -133,7 +133,7 @@ export class payrollStore {
         if(res.status) {
           let response = res.data.salaryTemplateBaseSet
           let templateBaseData = response.data
-          templateBaseData.salarySob = templateBaseData.salarySob !== undefined ? templateBaseData.salarySob + "": null;
+          templateBaseData.salarySob = templateBaseData.salarySob != undefined ? templateBaseData.salarySob + "": null;
           this.templateBaseData = templateBaseData // 基础信息表单数据
           
           this.salarySobOptions = response.salarySobOptions ?
@@ -242,6 +242,28 @@ export class payrollStore {
     })
   }
 
+  // 工资单模板-更新工资单模板
+  @action
+  fetchUpdatePayroll = () => {
+    if(!(this.validateSalaryTemplateShowSet())) {
+      return false
+    }
+    let params = this.convertParams()
+    params.id = id
+    return new Promise((resolve, reject) => {
+      API.updatePayroll(params).then(res => {
+        if(res.status) {
+          message.success("保存成功");
+          this.getPayrollTemplateList();
+          resolve();
+        } else  {
+          message.error(res.errormsg || "保存失败")
+          reject()
+        }
+      })
+    })
+  }
+
   //工资单-获取薪资账套下拉列表
   @action
   getPayrollTemplateLedgerList = () => {