slide topLabelBar

pc4mobx/hrmSalary/components/slideModalTitle/index.js

@@ -17,6 +17,7 @@ export default class SlideModalTitle extends React.Component {
           <div className="subtitle">{this.props.subtitle}</div>
         </div>
         <div className="btnWrapper">
+            {this.props.btns}
             {
               this.state.editable && <Button type="primary" className="saveBtn" onClick={this.props.onSave}>保存</Button>
             }

pc4mobx/hrmSalary/pages/dataAcquisition/cumDeduct/editSlideContent.js

@@ -1,8 +1,12 @@
 import React from 'react';
-import { Row, Col, Table } from "antd"
+import { Row, Col, Table, DatePicker } from "antd"
 import { inject, observer } from 'mobx-react';
-import { WeaInput, WeaTextarea, WeaSearchGroup } from "ecCom";
+import { WeaInput, WeaTextarea, WeaSearchGroup, WeaSelect } from "ecCom";
 import { slideColumns} from './columns';
+import "./editSlideContent.less"
+
+const { MonthPicker } = DatePicker;
+
 
 let emptyItem = {
     incomeLowerLimit: "0.00",
@@ -15,14 +19,23 @@ let emptyItem = {
     taxDeduction: "0.00"
 }
 
-@inject('taxRateStore')
+@inject('cumDeductStore', "taxAgentStore")
 @observer
 export default class EditSlideContent extends React.Component {
 
+    constructor(props) {
+        super(props);
+        this.state = {
+            taxAgentId: ""
+        }
+    }
+
     componentWillMount() { // 初始化渲染页面
         this.state = {
           editable: this.props.editable === undefined ? "true": this.props.editable
         }
+        const { taxAgentStore: { fetchTaxAgentOption } } = this.props;
+        fetchTaxAgentOption();
     }
 
     addItem() {
@@ -37,47 +50,46 @@ export default class EditSlideContent extends React.Component {
         dataSource.push(item);
         setDataSource(dataSource)
     }
-    render() {
-        const { taxRateStore: {dataSource, nameValue, remarkValue, setNameValue, setRemarkValue, setDataSource}} = this.props;
-        return (
-            <div>
-            <WeaSearchGroup showGroup={true} title={"基本信息"}>
-                <Row gutter={16}>
-                    <Col span={6}>
-                        <div className="formLabel">名称:</div>
-                    </Col>
-                    <Col span={18}>
-                        <WeaInput
-                            id="name"
-                            value={nameValue}
-                            onChange={value => {
-                                setNameValue(value)
-                            }}
-                            viewAttr={this.props.editable ? 2: 1}
-                        />
-                    </Col>
-                </Row>
 
-                <Row gutter={16} style={{ marginTop: "16px" }}>
-                    <Col span={6}>
-                        <div className="formLabel">备注:</div>
+
+    render() {
+        const { taxAgentStore: {taxAgentOption}} = this.props;
+        const { taxAgentId} = this.state;
+        return (
+            <div className="cumDeductSlide">
+                <Row className="topLabelBar">
+                    <Col span={4}>
+                        <span className="username">姓名</span>
                     </Col>
-                    <Col span={18}>
-                        <WeaInput
-                            id="remark"
-                            value={remarkValue}
-                            onChange={value => {
-                                setRemarkValue(value)
+                    <Col span={12}>
+                        <span className="formLabel">申报月份</span>
+                        <div className="weaRangePickerWrapper">
+                        <div className="monthPickerWrapper">
+                            <MonthPicker width={100} />
+                        </div>
+                        <span className="betweenLable">
+                            至
+                        </span>
+                        <div className="monthPickerWrapper">
+                            <MonthPicker width={100}/>
+                        </div>
+                        </div>
+                    </Col>
+                    <Col span={8}>
+                        <span className="formLabel">个税扣缴义务人</span>
+                        <WeaSelect
+                            showSearch // 设置select可搜索
+                            style={{ width: 100 }}
+                            options={taxAgentOption}
+                            value={taxAgentId}
+                            onChange={v => {
+                            this.setState({taxAgentId: v})
+                            getTableDatas({ taxAgentId: v })
                             }}
-                            viewAttr={this.props.editable ? 2: 1}
                         />
                     </Col>
                 </Row>
-            </WeaSearchGroup>
-            <WeaSearchGroup showGroup={true} title={"详细设置"}>
-            
-            </WeaSearchGroup>
-        </div>                    
+            </div>                    
         )
     }
 }

pc4mobx/hrmSalary/pages/dataAcquisition/cumDeduct/editSlideContent.less

@@ -0,0 +1,21 @@
+.cumDeductSlide {
+    .topLabelBar {
+        padding: 10px 20px;
+        height: 40px;
+        line-height: 40px;
+    }
+    .formLabel {
+        margin-right: 10px;
+    }
+    .weaRangePickerWrapper {
+        display: inline-block;
+        .monthPickerWrapper {
+            width: 100px;
+            display: inline-block;
+        }
+        .betweenLable {
+            margin-left: 10px;
+            margin-right: 10px;
+        }
+    }
+}

pc4mobx/hrmSalary/pages/dataAcquisition/cumDeduct/index.js

@@ -88,7 +88,8 @@ export default class CumDeduct extends React.Component {
   }
 
   onEdit = (record) => {
-    alert(JSON.stringify(record))
+    const { cumDeductStore: { slideVisiable, setSlideVisiable } } = this.props;
+    setSlideVisiable(true)
   }
 
   // 增加编辑功能，重写columns绑定事件
@@ -115,7 +116,7 @@ export default class CumDeduct extends React.Component {
     const { cumDeductStore, taxAgentStore } = this.props;
     const { loading, hasRight, form, condition, tableStore, showSearchAd, getTableDatas, doSearch, setShowSearchAd } = cumDeductStore;
     const { taxAgentOption, step } = taxAgentStore
-    const { slideVisiable } = cumDeductStore
+    const { slideVisiable,  setSlideVisiable } = cumDeductStore
 
     if (!hasRight && !loading) { // 无权限处理
       return renderNoright();
@@ -176,6 +177,13 @@ export default class CumDeduct extends React.Component {
       </Dropdown.Button>
     ]
 
+    const renderBtns = () => {
+      return (
+        <Dropdown.Button onClick={handleButtonClick} overlay={menu} type="ghost">
+          导出全部
+      </Dropdown.Button>
+      )
+    }
 
 
     return (
@@ -227,10 +235,13 @@ export default class CumDeduct extends React.Component {
               subtitle={"累计专项附加扣除记录"}
               subTabs={[{title: "基础设置"}]}
               onSave={() => {this.state.currentOperate == "add" ? doSave() : doUpdate()}}
-              editable={this.state.editable}
+              editable={false}
+              btns={
+                renderBtns()
+              }
             />
           }
-          content={(<div>content</div>)}
+          content={(<EditSlideContent />)}
           onClose={() => setSlideVisiable(false)}
           showMask={true}
           closeMaskOnClick={() => setSlideVisiable(false)} />