工资单初版

pc4mobx/hrmSalary/components/importModal/modalStep1.js

@@ -28,7 +28,7 @@ export default class ModalStep1 extends React.Component {
         const dragger = {
             name: 'file',
             multiple: false,
-            action: "handleCancel",	//上传地址
+            action: "/api/doc/upload/uploadFile",	//上传地址
             onChange: (info) => {
                 const { status } = info.file;
                 if (status !== 'uploading') {

pc4mobx/hrmSalary/index.js

@@ -24,6 +24,7 @@ import PlaceOnFileDetail from './pages/calculateDetail/placeOnFileDetail';
 import CompareDetail from './pages/calculateDetail/compareDetail'
 import GenerateDeclarationDetail from './pages/declare/generateDeclarationDetail'
 import BaseForm from './components';
+import TemplatePreview from './pages/payroll/templatePreview'
 
 
 import stores from './stores';
@@ -93,6 +94,7 @@ const Routes = (
     <Route key='payroll' path='payroll' component={Payroll} />
     <Route key='payrollGrant' path='payrollGrant' component={PayrollGrant} />
     <Route key="payrollDetail" path="payrollDetail" component={PayrollDetail} />
+    <Route key="templatePreview" path="templatePreview" component={TemplatePreview} />
     <Route key='declare' path='declare' component={Declare} />
     <Route key='generateDeclarationDetail' path='generateDeclarationDetail' component={GenerateDeclarationDetail} />
     

pc4mobx/hrmSalary/pages/payroll/index.js

@@ -32,10 +32,8 @@ export default class Payroll extends React.Component {
     this.state = {
       value: "",
       selectedKey: "0",
-      startDate: moment(new Date()).format("YYYY-MM"),
-      endDate: moment(new Date()).format("YYYY-MM"),
-      selectedKey: "0",
-      stepSlideVisible: false,
+      startDate: "",
+      endDate: "",
       currentStep: 0,
       stepSlideVisible: false,
       selectedTab: 0,
@@ -49,12 +47,12 @@ export default class Payroll extends React.Component {
     }
     columns.map(item => {
       if(item.dataIndex == "cz") {
-        item.render = () => {
+        item.render = (text, record) => {
           return (
             <div>
               <a onClick={() => {window.open("/spa/hrmSalary/static/index.html#/main/hrmSalary/payrollGrant")}}>工资单发放</a>
-              <a style={{marginLeft: "10px"}}>查看详情</a>
-              <a style={{marginLeft: "10px"}}>更新模板</a>
+              <a onClick={window.open("/spa/hrmSalary/static/index.html#/main/hrmSalary/payrollDetail")}>查看详情</a>
+              <a onClick={this.handleUpdateTemplate(record)}>更新模板</a>
             </div>
           )
         }
@@ -83,6 +81,17 @@ export default class Payroll extends React.Component {
     })
   }
 
+  // 更新模板
+  handleUpdateTemplate(record) {
+    alert(JSON.stringify(record))
+    this.setState({
+      selectedKey: "1",
+      editSlideVisible: true,
+      templateCurrentId: record.templateId
+
+    })
+  }
+
   // 工资单模板-新建表单变化监听
   handleBaseInfoChange(request) {
     const { payrollStore: {setTemplateBaseData}} = this.props;
@@ -167,6 +176,46 @@ export default class Payroll extends React.Component {
       },
     });
   }
+
+  // 开始日期修改
+  handleStartDateChange(value) {
+    this.setState({
+      startDate: value
+    })
+
+    const { payrollStore } = this.props;
+    const { getPayrollList } = payrollStore;
+    let salaryYearMonth = []
+    if(value != "") {
+      salaryYearMonth.push(value)
+    }
+    if(this.state.endDate != "") {
+      salaryYearMonth.push(this.state.endDate);
+    }
+    getPayrollList({salaryYearMonth})
+
+  } 
+
+  // 结束日期修改
+  handleEndDateChange(value) {
+    this.setState({endDate: value})
+    const { payrollStore } = this.props;
+    const { getPayrollList } = payrollStore;
+    let salaryYearMonth = []
+    if(this.state.startDate != "") {
+      salaryYearMonth.push(this.state.startDate)
+    }
+    if(value != "") {
+      salaryYearMonth.push(value)
+    }
+    getPayrollList({salaryYearMonth})
+  }
+
+
+  // 预览
+  handlePreview() {
+    window.open("/spa/hrmSalary/static/index.html#/main/hrmSalary/templatePreview")
+  }
   
 
   render() {
@@ -219,13 +268,13 @@ export default class Payroll extends React.Component {
             <WeaDatePicker
                 format="yyyy-MM"
                 value={this.state.startDate}
-                onChange={value => this.props.onStartDateChange(value)}
+                onChange={value => this.handleStartDateChange(value)}
             />
             <span className="between"> 至 </span>
             <WeaDatePicker
                 format="yyyy-MM"
                 value={this.state.endDate}
-                onChange={value => this.props.onEndDateChange(value)}
+                onChange={value => this.handleEndDateChange(value)}
             />
           </div>
         </div>
@@ -330,7 +379,7 @@ export default class Payroll extends React.Component {
                     currentStep == 1 && <div style={{display: "inline-block"}}>
                         <Button type="default" style={{marginRight: "10px"}}>上一步</Button>
                         <Button type="primary" onClick={() => {this.handleSave()}}>保存</Button>
-                        <Button type="default" style={{marginLeft: "10px"}}>预览</Button>
+                        <Button type="default" style={{marginLeft: "10px"}} onClick={() => {this.handlePreview()}}>预览</Button>
                     </div>
                 }
             </div>

pc4mobx/hrmSalary/pages/payroll/stepForm/showSettingForm.js

@@ -82,7 +82,7 @@ export default class ShowSettingForm extends React.Component {
                             </Col>
                         </Row>
                         <Row className="formItem">
-                            <Col span={4}>工资单主题</Col>
+                            <Col span={4}>工资单背景</Col>
                             <Col span={20}>
                                 <BackgroundUpload imageUrl={background} onChange={(value) => {this.handleChange({background: value})}}/>
                                 {/* <Dragger {...dropProps} style={{width: "100px"}}>

pc4mobx/hrmSalary/pages/payroll/templatePreview/computerTemplate/index.js

@@ -0,0 +1,21 @@
+import React from 'react'
+
+export default class ComputerTemplate extends React.Component {
+    
+    render() {
+        return (
+            <div className="computerTemplate">
+                <div className="titleWrapper">
+                    测试标题
+                </div>
+                <div className="background-wrapper">
+
+                </div>
+
+                <div className="sobItemWrapper">
+                    
+                </div>
+            </div>
+        )
+    }
+}

pc4mobx/hrmSalary/pages/payroll/templatePreview/index.js

@@ -0,0 +1,39 @@
+import React from 'react'
+import phone from './phone_new.png'
+import computer from './computer.png'
+import './index.less'
+
+export default class TemplatePreview extends React.Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            selectKey: "0"
+        }
+    }
+
+    handleSelectClick(selectKey) {
+        this.setState({selectKey})
+    }
+    
+    render() {
+        const { selectKey } = this.state;
+        return (
+            <div className="templatePreview">
+                <div className="headerWrapper">
+                    <div className="iconsWrapper">
+                        <div onClick={() => {this.handleSelectClick("0")}} className={selectKey == "0" ? "iconWrapper activeIconWrapper" : "iconWrapper" }>
+                            <img src={computer} />
+                        </div>
+                        <div onClick={() => {this.handleSelectClick("1")}} className={selectKey == "1" ? "iconWrapper activeIconWrapper" : "iconWrapper"}>
+                            <img src={phone}/>
+                        </div>
+                    </div>
+                </div>
+
+                <div className="contentWrapper">
+                    
+                </div>
+            </div>
+        )
+    }
+}

pc4mobx/hrmSalary/pages/payroll/templatePreview/index.less

@@ -0,0 +1,27 @@
+.templatePreview {
+    .headerWrapper {
+        background-color: #0270c1;
+        height: 55px;
+        line-height: 55px;
+        text-align: center;
+        .iconsWrapper {
+            display: inline-block;
+            width: 150px;
+            height: 55px;
+            .iconWrapper {
+                display: inline-block;
+                width: 50px;
+                height: 55px;
+                line-height: 75px;
+                text-align: center;
+                img {
+                    width: 30px;
+                    height: 30px;
+                }
+            }
+            .activeIconWrapper {
+                background-color: #1c87d3;
+            }
+        }
+    }
+}