From 0a35202baa6415f3211df3b033c40289a1a54f00 Mon Sep 17 00:00:00 2001
From: MustangDeng <670124965@qq.com>
Date: Tue, 15 Mar 2022 11:06:56 +0800
Subject: [PATCH] =?UTF-8?q?=E8=80=83=E6=83=85=E6=95=B0=E6=8D=AE=E6=9F=A5?=
 =?UTF-8?q?=E7=9C=8B=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/slideModalTitle/index.js       |   2 +
 .../dataAcquisition/attendance/columns.js     | 138 ++++++++++---
 .../attendance/editSlideContent.js            |  87 ++++++++
 .../attendance/editSlideContent.less          |  26 +++
 .../pages/dataAcquisition/attendance/index.js | 186 ++++++++++++++++--
 pc4mobx/hrmSalary/stores/attendanceStore.js   |   4 +
 6 files changed, 404 insertions(+), 39 deletions(-)
 create mode 100644 pc4mobx/hrmSalary/pages/dataAcquisition/attendance/editSlideContent.js
 create mode 100644 pc4mobx/hrmSalary/pages/dataAcquisition/attendance/editSlideContent.less

diff --git a/pc4mobx/hrmSalary/components/slideModalTitle/index.js b/pc4mobx/hrmSalary/components/slideModalTitle/index.js
index ba47f290..f51f4e73 100644
--- a/pc4mobx/hrmSalary/components/slideModalTitle/index.js
+++ b/pc4mobx/hrmSalary/components/slideModalTitle/index.js
@@ -17,10 +17,12 @@ 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>
             }
+            {this.props.customOperate}
         </div>
         
       </div>
diff --git a/pc4mobx/hrmSalary/pages/dataAcquisition/attendance/columns.js b/pc4mobx/hrmSalary/pages/dataAcquisition/attendance/columns.js
index f161c187..8ea97c7e 100644
--- a/pc4mobx/hrmSalary/pages/dataAcquisition/attendance/columns.js
+++ b/pc4mobx/hrmSalary/pages/dataAcquisition/attendance/columns.js
@@ -1,72 +1,158 @@
 export const columns = [
     {
         title: "姓名",
-        dataIndex: 'title',
-        key: 'title',
+        dataIndex: 'username',
+        key: 'username',
     },
     {
         title: "个税扣缴义务人",
-        dataIndex: 'title',
-        key: 'title',
+        dataIndex: 'ywr',
+        key: 'ywr',
     },
     {
         title: "部门",
-        dataIndex: 'title',
+        dataIndex: 'bm',
         key: 'title',
     },
     {
         title: "手机号",
-        dataIndex: 'title',
-        key: 'title',
+        dataIndex: 'sjh',
+        key: 'sjh',
     },
     {
         title: "工号",
-        dataIndex: 'title',
-        key: 'title',
+        dataIndex: 'gh',
+        key: 'gh',
     },
     {
         title: "证件号码",
-        dataIndex: 'title',
-        key: 'title',
+        dataIndex: 'sfzh',
+        key: 'sfzh',
     },
     {
         title: "入职日期",
-        dataIndex: 'title',
-        key: 'title',
+        dataIndex: 'rzrq',
+        key: 'rzrq',
     },
     {
         title: "累计子女教育",
-        dataIndex: 'title',
-        key: 'title',
+        dataIndex: 'ljznjy',
+        key: 'ljznjy',
     },
     {
         title: "累计继续教育",
-        dataIndex: 'title',
-        key: 'title',
+        dataIndex: 'ljjxjy',
+        key: 'ljjxjy',
     },
     {
         title: "累计住房贷款利息",
-        dataIndex: 'title',
-        key: 'title',
+        dataIndex: 'ljzfdklx',
+        key: 'ljfdklx',
     },
     {
         title: "累计住房租金",
-        dataIndex: 'title',
-        key: 'title',
+        dataIndex: 'ljzfzj',
+        key: 'ljzfzj',
     },
     {
         title: "累计赡养老人",
-        dataIndex: 'title',
-        key: 'title',
+        dataIndex: 'ljsylr',
+        key: 'ljsylr',
     },
     {
         title: "操作",
-        dataIndex: 'title',
-        key: 'title',
+        dataIndex: 'cz',
+        key: 'cz',
+        render: (text, record) => {
+           
+        }
     }
 ]
 
-export const dataSource = [];
+export const slideColumns = [
+    {
+        title: "姓名",
+        dataIndex: 'username',
+        key: 'username'
+    },
+    {
+        title: "部门",
+        dataIndex: 'username',
+        key: 'username'
+    },
+    {
+        title: "手机号",
+        dataIndex: 'username',
+        key: 'username'
+    },
+    {
+        title: "工号",
+        dataIndex: 'username',
+        key: 'username'
+    },
+    {
+        title: "在职计薪天数",
+        dataIndex: 'username',
+        key: 'username'
+    },
+    {
+        title: "非在职计薪天数",
+        dataIndex: 'username',
+        key: 'username'
+    },
+    {
+        title: "应出勤天数（不含节假日）",
+        dataIndex: 'username',
+        key: 'username'
+    },
+    {
+        title: "实际出勤天数",
+        dataIndex: 'username',
+        key: 'username'
+    },
+    {
+        title: "工作日加班",
+        dataIndex: 'username',
+        key: 'username'
+    },
+    {
+        title: "双休日日加班",
+        dataIndex: 'username',
+        key: 'username'
+    },
+    {
+        title: "事假时长",
+        dataIndex: 'username',
+        key: 'username'
+    },
+    {
+        title: "病假时长",
+        dataIndex: 'username',
+        key: 'username'
+    }
+]
+
+
+export const slideDataSource = [{
+    username: "测试"
+}]
+
+export const dataSource = [
+    {
+        username: "测试",
+        ywr: "测试",
+        bm: "测试",
+        sjh: "测试",
+        gh: "测试",
+        sfzh: "测试",
+        rzrq: "测试",
+        ljznjy: "测试",
+        ljjxjy: "测试",
+        ljzfdklx: "测试",
+        ljzfzj: "测试",
+        ljsylr: "测试"
+    }
+];
 
 
 
diff --git a/pc4mobx/hrmSalary/pages/dataAcquisition/attendance/editSlideContent.js b/pc4mobx/hrmSalary/pages/dataAcquisition/attendance/editSlideContent.js
new file mode 100644
index 00000000..ef34b569
--- /dev/null
+++ b/pc4mobx/hrmSalary/pages/dataAcquisition/attendance/editSlideContent.js
@@ -0,0 +1,87 @@
+import React from 'react';
+import { Row, Col, Table, DatePicker } from "antd"
+import { inject, observer } from 'mobx-react';
+import { WeaInput, WeaTextarea, WeaSearchGroup, WeaSelect, WeaCheckbox, WeaTable } from "ecCom";
+import { slideColumns, slideDataSource, columns } from './columns';
+import "./editSlideContent.less"
+
+// import { WeaTableNew } from "comsMobx"
+// const WeaTable = WeaTableNew.WeaTable;
+import moment from 'moment'
+
+const { MonthPicker } = DatePicker;
+
+
+let emptyItem = {
+    incomeLowerLimit: "0.00",
+    incomeUpperLimit: "0.00",
+    dutyFreeValue: "0.00",
+    dutyFreeRate: "0.00",
+    taxableIncomeLl: "0.00",
+    taxableIncomeUl: "0.00",
+    taxRate: "0.00",
+    taxDeduction: "0.00"
+}
+
+@inject('otherDeductStore', "taxAgentStore")
+@observer
+export default class EditSlideContent extends React.Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            taxAgentId: "",
+            startDate: moment(new Date()).format("YYYY-MM"),
+            endDate: moment(new Date()).format("YYYY-MM"),
+            editable: this.props.editable === undefined ? "true": this.props.editable
+        }
+    }
+
+    componentWillMount() { // 初始化渲染页面
+        const { taxAgentStore: { fetchTaxAgentOption } } = this.props;
+        fetchTaxAgentOption();
+    }
+
+    addItem() {
+        const { taxRateStore: {setDataSource}} = this.props;
+        let dataSource = [...this.props.taxRateStore.dataSource];
+        let indexNum = 1;
+        if(dataSource.length > 0) {
+            indexNum = dataSource[dataSource.length - 1].indexNum +  1
+        }
+        let item = {...emptyItem}
+        item.indexNum = indexNum
+        dataSource.push(item);
+        setDataSource(dataSource)
+    }
+
+    fetchCumDeductDetailList(param) {
+        const { otherDeductStore} = this.props;
+        const { getOtherDeductDetailList, currentRecord } = otherDeductStore;
+        getOtherDeductDetailList(currentRecord.id, param);
+    }
+
+
+    render() {
+        const { taxAgentStore: {taxAgentOption}} = this.props;
+        const { otherDeductStore } = this.props;
+        const { slideTableStore, currentRecord } = otherDeductStore;
+        const { startDate, endDate, taxAgentId } = this.state;
+        return (
+            <div className="attendSlide">
+                <div className="titleWrapper"> 
+                    <div className="slideLeftTitle">考勤周期： 2021-01-01至2021-01-31</div>
+                    <WeaCheckbox className="rightTitle" content="仅查看异动人员"/>
+                </div>
+
+                <div>
+                    <Table 
+                        dataSource={slideDataSource}
+                        columns={slideColumns}
+                        width={"100%"}
+                    />
+                </div>
+            </div>                    
+        )
+    }
+}
\ No newline at end of file
diff --git a/pc4mobx/hrmSalary/pages/dataAcquisition/attendance/editSlideContent.less b/pc4mobx/hrmSalary/pages/dataAcquisition/attendance/editSlideContent.less
new file mode 100644
index 00000000..fd7858c8
--- /dev/null
+++ b/pc4mobx/hrmSalary/pages/dataAcquisition/attendance/editSlideContent.less
@@ -0,0 +1,26 @@
+.attendSlide {
+    .titleWrapper {
+        height: 47px;
+        line-height: 47px;
+        overflow: hidden;
+        padding-left: 10px;
+        padding-right: 10px;
+        .slideLeftTitle {
+            float: left;
+        }
+        .rightTitle {
+            float: right;
+        }
+    }
+    .weaRangePickerWrapper {
+        display: inline-block;
+        .monthPickerWrapper {
+            width: 100px;
+            display: inline-block;
+        }
+        .betweenLable {
+            margin-left: 10px;
+            margin-right: 10px;
+        }
+    }
+}
\ No newline at end of file
diff --git a/pc4mobx/hrmSalary/pages/dataAcquisition/attendance/index.js b/pc4mobx/hrmSalary/pages/dataAcquisition/attendance/index.js
index 6a87ea2f..9ecbcb2d 100644
--- a/pc4mobx/hrmSalary/pages/dataAcquisition/attendance/index.js
+++ b/pc4mobx/hrmSalary/pages/dataAcquisition/attendance/index.js
@@ -2,9 +2,9 @@ import React from 'react';
 import { inject, observer } from 'mobx-react';
 import { toJS } from 'mobx';
 
-import { Button, Table, DatePicker, Row, Col } from 'antd';
+import { Button, Table, DatePicker, Row, Col, Menu, Dropdown } from 'antd';
 
-import { WeaHelpfulTip, WeaCheckbox, WeaDatePicker, WeaTop, WeaTab, WeaRightMenu, WeaRangePicker, WeaTable, WeaSelect } from 'ecCom';
+import { WeaInputSearch, WeaSlideModal, WeaHelpfulTip, WeaCheckbox, WeaDatePicker, WeaTop, WeaTab, WeaRightMenu, WeaRangePicker, WeaTable, WeaSelect } from 'ecCom';
 
 import { renderNoright, getSearchs } from '../../../util'; // 渲染form数据的方法：因为多个页面都会使用，所以抽的公共方法在util中
 import CustomTab from '../../../components/customTab';
@@ -17,7 +17,8 @@ import HeaderSet from "../../../components/importModal/headerSet"
 import SelectItemModal, {items} from '../../../components/selectItemsModal'
 import RefereAttendFormModal from './refereAttendFormModal'
 import SelectItemsWrapper from '../../../components/selectItemsModal/selectItemsWrapper'
-
+import SlideModalTitle from '../../../components/slideModalTitle'
+import EditSlideContent from './editSlideContent';
 
 const { MonthPicker } = DatePicker;
 
@@ -34,13 +35,96 @@ export default class Attendance extends React.Component {
       modalParam: {},
       modalVisiable: false,
       selectItemVisible: false,
-      refereAttendFormVisible: false
+      refereAttendFormVisible: false,
+      tabSelectedKey: "0",
+      columns: [
+        {
+            title: "姓名",
+            dataIndex: 'username',
+            key: 'username',
+        },
+        {
+            title: "个税扣缴义务人",
+            dataIndex: 'ywr',
+            key: 'ywr',
+        },
+        {
+            title: "部门",
+            dataIndex: 'bm',
+            key: 'title',
+        },
+        {
+            title: "手机号",
+            dataIndex: 'sjh',
+            key: 'sjh',
+        },
+        {
+            title: "工号",
+            dataIndex: 'gh',
+            key: 'gh',
+        },
+        {
+            title: "证件号码",
+            dataIndex: 'sfzh',
+            key: 'sfzh',
+        },
+        {
+            title: "入职日期",
+            dataIndex: 'rzrq',
+            key: 'rzrq',
+        },
+        {
+            title: "累计子女教育",
+            dataIndex: 'ljznjy',
+            key: 'ljznjy',
+        },
+        {
+            title: "累计继续教育",
+            dataIndex: 'ljjxjy',
+            key: 'ljjxjy',
+        },
+        {
+            title: "累计住房贷款利息",
+            dataIndex: 'ljzfdklx',
+            key: 'ljfdklx',
+        },
+        {
+            title: "累计住房租金",
+            dataIndex: 'ljzfzj',
+            key: 'ljzfzj',
+        },
+        {
+            title: "累计赡养老人",
+            dataIndex: 'ljsylr',
+            key: 'ljsylr',
+        },
+        {
+            title: "操作",
+            key: 'cz',
+            render: (text, record) => {
+                return (<div style={{display: "inline-block"}}>
+                  <a type="link" onClick={() => this.onShowSlide()}>查看</a>
+                  <a type="link" onClick={() => this.onDelete()} style={{marginLeft: "10px"}}>删除</a>
+                  </div>)
+            }
+        }]
     }
   }
+
+  onShowSlide() {
+    const {attendanceStore : {setSlideVisiable}} = this.props;
+    setSlideVisiable(true)
+  }
+
+
+  onDelete() {
+    
+  }
+
   render() {
     const { attendanceStore } = this.props;
     const { loading, hasRight, form, condition, tableStore, showSearchAd, getTableDatas, doSearch, setShowSearchAd } = attendanceStore;
-    const { step, setStep } = attendanceStore;
+    const { step, setStep, setSlideVisiable, slideVisiable } = attendanceStore;
     if (!hasRight && !loading) { // 无权限处理
       return renderNoright();
     }
@@ -66,8 +150,14 @@ export default class Attendance extends React.Component {
       <Button type="ghost" onClick={() => setShowSearchAd(false)}>取消</Button>,
     ];
 
-    const topTab = [
-    ];
+    const topTab =  [{
+      title: "社保",
+      viewcondition: "0"
+    },
+    {
+      title: "公积金",
+      viewcondition: "1"
+    }];
 
     const renderSearchOperationItem = () => {
       return <div>
@@ -117,9 +207,32 @@ export default class Attendance extends React.Component {
                 2022-03-01 ~ 2022-03-31
             </Col>
         </Row>
-    )
+    
+    )}
+
+
+    const renderCustomOperate = () => {
+      return (
+        <div style={{display: "inline-block"}}>
+          <Dropdown.Button overlay={menu} type="primary">导出</Dropdown.Button>
+          <Button type="default" style={{marginLeft: "10px", marginRight: "10px"}}>自定义列</Button>
+          <WeaInputSearch
+            placeholder="请输入姓名/部门/工号/手机号"
+          />
+        </div>
+      )
     }
 
+
+    const menu = (
+      <Menu>
+        <Menu.Item key="1">导出全部</Menu.Item>
+      </Menu>
+    );
+    
+
+
+
     return (
       <div className="mySalaryBenefitsWrapper">
         <WeaRightMenu
@@ -134,18 +247,43 @@ export default class Attendance extends React.Component {
             dropMenuDatas={rightMenu} // 下拉菜单（和页面的右键菜单相同）
             dropMenuProps={{ collectParams }} // 收藏功能: 配置之后显示 收藏、帮助、显示页面地址 这3个功能
           >
-            <CustomTab 
-              leftOperation={
-                renderLeftOperation()
-              }
+
+            <CustomTab topTab={topTab}
               searchOperationItem={
                 renderSearchOperationItem()
               }
+              onChange={(v) => {
+              }}
+            />
+            <CustomTab 
+              leftOperation={
+                renderLeftOperation()
+              }
+              
               onChange={(v) => {
                 
               }}
             />
-            <WeaTable columns={columns} dataSource={dataSource}/>
+
+            {
+              this.state.tabSelectedKey == 0 ? 
+              <WeaTable columns={this.state.columns} dataSource={dataSource}/>
+              : 
+              <TwoColContent 
+                leftContent={
+                  <WeaTable columns={this.state.columns} dataSource={dataSource}/>
+                }
+                rightContent={
+                    <TipLabel tipList={
+                      [
+                        "1、考勤字段包含自定义字段和考勤模块的统计字段，所有字段不可重名；",
+                        "2、停用自定义字段将影响其参与计算的账套核算；"
+                      ]
+                    }/>
+                }
+              />
+            }
+            
           </WeaTop>
         </WeaRightMenu>
 
@@ -174,6 +312,28 @@ export default class Attendance extends React.Component {
           </SelectItemModal>
           
           <RefereAttendFormModal visible={this.state.refereAttendFormVisible} onCancel={() => this.setState({refereAttendFormVisible: false})}/>
+
+          {
+          slideVisiable && <WeaSlideModal visible={slideVisiable}
+          top={0}
+          width={40}
+          height={100}
+          direction={'right'}
+          measure={'%'}
+          title={
+            <SlideModalTitle 
+              subtitle={"考勤数据"}
+              editable={false}
+              customOperate={
+                renderCustomOperate()
+              }
+            />
+          }
+          content={(<EditSlideContent editable={this.state.editable}/>)}
+          onClose={() => setSlideVisiable(false)}
+          showMask={true}
+          closeMaskOnClick={() => setSlideVisiable(false)} />
+        }
       </div>
 
 
diff --git a/pc4mobx/hrmSalary/stores/attendanceStore.js b/pc4mobx/hrmSalary/stores/attendanceStore.js
index 6151d400..7440f909 100644
--- a/pc4mobx/hrmSalary/stores/attendanceStore.js
+++ b/pc4mobx/hrmSalary/stores/attendanceStore.js
@@ -15,6 +15,10 @@ export class AttendanceStore {
   @observable loading = true; // 数据加载状态
   @observable step = 0 ;
   @observable modalVisiable = false;
+  @observable slideVisiable = false;
+
+  @action
+  setSlideVisiable = slideVisiable => this.slideVisiable = slideVisiable;
 
   @action
   setStep = step => this.step = step