预览

pc4mobx/hrmSalary/components/customTab/index.less

@@ -1,5 +1,6 @@
 .tabWrapper {
     display: flex;
+    border-bottom: 1px solid rgb(234, 234, 234);
     .weaTab {
         flex: 1;
     }
@@ -8,7 +9,7 @@
         padding-right: 10px;
         line-height: 47px;
         height: 47px;
-        border-bottom: 1px solid rgb(234, 234, 234);
+        
         .tabSearchLabel {
             margin-right: 20px;
             color: #484848;

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

@@ -156,6 +156,7 @@ export default class CumDeduct extends React.Component {
       }
       return newColumn;
     });
+    console.log("newColumns:", newColumns)
     return newColumns;
   }
 
@@ -307,7 +308,6 @@ export default class CumDeduct extends React.Component {
               comsWeaTableStore={tableStore} // table store
               hasOrder={true} // 是否启用排序
               needScroll={true} // 是否启用table内部列表滚动，将自适应到父级高度
-              
               getColumns={this.getColumns}
               onOperatesClick={this.onOperatesClick.bind(this)}
             />

pc4mobx/hrmSalary/pages/ledger/index.js

@@ -250,11 +250,9 @@ export default class Ledger extends React.Component {
         })
       } else if(currentStep == 3) {
         saveAdjustmentRule().then(() => {
-          nextStep()
+          this.setState({stepSlideVisible: false})
         })
-      } else if(currentStep == 4) {
-        this.setState({stepSlideVisible: false})
-      }
+      } 
     }
 
     return (

pc4mobx/hrmSalary/pages/ledger/salaryItemForm.js

@@ -8,6 +8,7 @@ import { inject, observer } from 'mobx-react';
 import { toJS } from 'mobx';
 import CanMoveItem from './step3/canMoveItem'
 import UserInfoSelected from './step3/UserInfoSelect'
+import PreviewSalaryModal from './step3/previewSalaryModal'
 
 
 @inject('ledgerStore')
@@ -16,7 +17,8 @@ export default class SalaryItemForm extends React.Component {
     constructor(props) {
         super(props)
         this.state = {
-            addCategoryVisible: false
+            addCategoryVisible: false,
+            previewVisible: false
         }
         const { ledgerStore: { empFieldList }} = this.props;
         empFieldList();
@@ -54,14 +56,20 @@ export default class SalaryItemForm extends React.Component {
         setItemGroups(newItemGroups)
     }
 
+    // 预览点击事件
+    handlePreview() {
+        this.setState({previewVisible: true})
+    }
+
     render() {
         const {ledgerStore: {itemGroups, salaryItems, empBrowserList, setAddCategoryVisible, addCategoryVisible}} = this.props;
+        const { previewVisible } = this.state;
         return (
             <div className="salaryItemForm">
                 <div className="btnBar">
                     <div className="btns">
                         <Button type="default" onClick={() => {setAddCategoryVisible(true)}}>新增分类</Button>
-                        <Button type="default" style={{marginLeft: "10px"}}>预览</Button>
+                        <Button type="default" style={{marginLeft: "10px"}} onClick={() => {this.handlePreview()}}>预览</Button>
                     </div>
                     <div className="searchInputWrapper">
                         <WeaInputSearch style={{width: "150px"}} />
@@ -101,6 +109,14 @@ export default class SalaryItemForm extends React.Component {
                         setAddCategoryVisible(false)
                     }} />
                 }
+
+                {
+                    previewVisible &&
+                    <PreviewSalaryModal 
+                        visible={previewVisible}
+                        onCancel={() => {this.setState({previewVisible: false})}}
+                    />
+                }
             </div>
         )
     }

pc4mobx/hrmSalary/pages/ledger/slideBaseForm.js

@@ -6,6 +6,7 @@ import TipLabel from '../../components/TipLabel'
 import { daysOptions, cycleTypeOption } from './options'
 import { inject, observer } from 'mobx-react';
 import RequiredLabelTip from "../../components/requiredLabelTip"
+import { getCurrentYearMonth, getCurrentMonth, getSubtractMonthYearMonth, getAddMonthYearMonth} from '../../util/date'
 
 @inject('ledgerStore')
 @observer
@@ -37,6 +38,26 @@ export default class SlideBaseForm extends React.Component {
         setBaseInfoRequest(request)
     }
 
+    // 获取开始日期
+    getStartDate(salaryCycleType, day) {
+        day = Number(day)
+        return this.getMonth(salaryCycleType) + "-" + (day < 10 ? "0" + day : day)
+    }
+
+    // 获取开始月份
+    getMonth(salaryCycleType) {
+        switch(salaryCycleType) {
+            case "1": // 上上月
+                return getSubtractMonthYearMonth(2) 
+            case "2": //  上月
+                return getSubtractMonthYearMonth(1) 
+            case "3": // 本月
+                return getCurrentYearMonth() 
+            case "4": // 下月
+                return getAddMonthYearMonth(1) 
+        }
+    }
+
     render() {
         const { request, ledgerStore } = this.props;
         const { baseInfoRequest } = ledgerStore;
@@ -110,16 +131,16 @@ export default class SlideBaseForm extends React.Component {
                     <Col span={6}>
                         <div className="rightContentWrapper">
                             <TipLabel title="月份周期说明">
-                                <p className="greytip">例：薪资所属月是2021-11（即核算员工11月的工资）</p>
+                                <p className="greytip">例：薪资所属月是<span className="higelinered">{getCurrentYearMonth()}</span>（即核算员工<span className="higelinered">{getCurrentMonth()}</span>月的工资）</p>
                                 <p className="greytip">根据您当前的选择，相应的周期为：</p>
                                 <div className="tipLabel">薪资周期</div>
-                                <p className="greytip"><span className="higelinered">2021-11-01</span>至<span className="higelinered">2021-11-30</span></p>
+                                <p className="greytip"><span className="higelinered">{this.getStartDate(salaryCycleType, salaryCycleFromDay)}</span>至<span className="higelinered">{this.getMonth(salaryCycleType)}-30</span></p>
                                 <div className="tipLabel">税款所属期</div>
-                                <p className="greytip higelinered">2021-12</p>
+                                <p className="greytip higelinered">{this.getMonth(taxCycleType)}</p>
                                 <div className="tipLabel">考勤取值周期</div>
-                                <p className="greytip"><span className="higelinered">2021-11-01</span>至<span className="higelinered">2021-11-30</span></p>
+                                <p className="greytip"><span className="higelinered">{this.getStartDate(attendCycleType, attendCycleFromDay)}</span>至<span className="higelinered">{this.getMonth(attendCycleType)}-30</span></p>
                                 <div className="tipLabel">福利台账月份</div>
-                                <p className="greytip">引用<span className="higelinered">2021-11</span>的福利台账数据</p>
+                                <p className="greytip">引用<span className="higelinered">{this.getMonth(socialSecurityCycleType)}</span>的福利台账数据</p>
                             </TipLabel>
                         </div>
                     </Col>

pc4mobx/hrmSalary/pages/ledger/step3/AddSalaryItemModal.js

@@ -4,6 +4,7 @@ import { Modal, Button, message, Switch } from 'antd'
 import { WeaInputSearch, WeaTable } from 'ecCom'
 import { WeaTableNew } from "comsMobx"
 import { toJS } from 'mobx'
+import CustomTable from '../../../components/customTable'
 
 
 @inject('ledgerStore')
@@ -23,31 +24,29 @@ export default class AddSalaryItemModal extends React.Component {
     }
 
     // 增加编辑功能，重写columns绑定事件
-    getColumns = (columns) => {
+    getColumns(columns) {
         if(!columns) {
             return []
         }
         let newColumns = '';
         newColumns = columns.map(column => {
-        let newColumn = column;
-        newColumn.render = (text, record, index) => { //前端元素转义
-            let valueSpan = record[newColumn.dataIndex + "span"] !== undefined ? record[newColumn.dataIndex + "span"] : record[newColumn.dataIndex];
-            switch(newColumn.dataIndex) {
-            case "useDefault":
-            case "useInEmployeeSalary":
-                return <Switch checked={text == 1}/>
-            default:
-                return <div dangerouslySetInnerHTML={{ __html: valueSpan }} />
+            let newColumn = column;
+            newColumn.render = (text, record, index) => { //前端元素转义
+                let valueSpan = record[newColumn.dataIndex + "span"] !== undefined ? record[newColumn.dataIndex + "span"] : record[newColumn.dataIndex];
+                switch(newColumn.dataIndex) {
+                case "useDefault":
+                case "useInEmployeeSalary":
+                    return <Switch checked={text == 1}/>
+                default:
+                    return <div dangerouslySetInnerHTML={{ __html: valueSpan }} />
+                }
             }
-        }
-        return newColumn;
+            return newColumn;
         });
         return newColumns;
     }
 
-
     handleAdd() {
-        
         const { ledgerStore } = this.props;
         const { addSalaryItemDataSource, addItemsToGroup, addExcludeIds } = ledgerStore
         const { selectedRowKeys } = this.state;
@@ -79,11 +78,15 @@ export default class AddSalaryItemModal extends React.Component {
         this.setState({ selectedRowKeys });
     }
 
-    
+    // 分页
+    handleDataPageChange(value) {
+        const { ledgerStore: {listSalaryItem}} = this.props;
+        listSalaryItem(this.state.searchValue, value)
+    }
 
     render() {
         const { ledgerStore } = this.props;
-        const { addSalaryItemDataSource, addSalaryItemColumns } = ledgerStore
+        const { addSalaryItemDataSource, addSalaryItemColumns, addSalaryItemPageInfo,loading } = ledgerStore
         const { searchValue, selectedRowKeys } = this.state;
 
         const rowSelection = {
@@ -93,7 +96,8 @@ export default class AddSalaryItemModal extends React.Component {
 
         return (
             <Modal
-                visible={this.props.visible} onCancel={() => {this.props.onCancel()}} width={800}
+                visible={this.props.visible} onCancel={() => {this.props.onCancel()}} width={900} height={600}
+                style={{top: 20}}
                 footer={null}
             >
                  <div style={{height: "47px", lineHeight: '47px'}}>
@@ -104,7 +108,7 @@ export default class AddSalaryItemModal extends React.Component {
                     </div>
                 </div>
 
-                <div style={{margin: "10px"}}>
+                <div style={{margin: "10px", height: "400px", overflowY: "scroll"}}>
                     {/* <WeaTable // table内部做了loading加载处理，页面就不需要再加了
                         comsWeaTableStore={salaryItemTableStore} // table store
                         hasOrder={true} // 是否启用排序
@@ -113,10 +117,16 @@ export default class AddSalaryItemModal extends React.Component {
                         // onOperatesClick={this.onOperatesClick.bind(this)}
                     /> */}
 
-                    <WeaTable 
+                    <CustomTable 
+                        loading={loading}
                         dataSource={addSalaryItemDataSource}
                         columns={this.getColumns(addSalaryItemColumns)}
                         rowSelection={rowSelection}
+                        pagination={{
+                            onChange: (value) => {this.handleDataPageChange(value)},
+                            total: addSalaryItemPageInfo.total,
+                            current: addSalaryItemPageInfo.pageNum
+                          }}
                     />
                 </div>
             </Modal>

pc4mobx/hrmSalary/pages/ledger/step3/UserInfoSelect.js

@@ -35,22 +35,30 @@ export default class UserInfoSelected extends React.Component {
         }
         if(flag) {
             message.warning("该信息已存在")
+            this.setState({showSelect: false})
+            return 
         }
-
         const { ledgerStore: {empFields, addEmpFields, setUserSelectedList}} = this.props;
         addEmpFields(value)
         this.setState({showSelect: false})
-        setUserSelectedList(list)
-
+        
     }
 
     handleItemDelete(item) {
-        const { ledgerStore: {userSelectedList, setUserSelectedList}} = this.props;
+        const { ledgerStore: {userSelectedList, setUserSelectedList, empFields, setEmpFields}} = this.props;
         let list = [...userSelectedList]
-        if(!item.canDelete) {
+        let fields = [...empFields]
+        if(item.canDelete === false) {
             message.warning("该项不可删除");
+            return
         }
-        setUserSelectedList(list.filter(i => item.key != i.key))
+
+        fields = fields.filter(i => item.fieldId != i.fieldId)
+        fields.map((item, index) => {
+            item.sortedIndex = index
+        })
+        setEmpFields(fields)
+        setUserSelectedList(list.filter(i => item.fieldId != i.fieldId))
     }
 
     render() {

pc4mobx/hrmSalary/pages/ledger/step3/canMoveItem.js

@@ -105,7 +105,7 @@ export default class CanMoveItem extends React.Component {
 
         return (
             <div className="tableItemWrapper">
-                <div style={{padding: "10px"}}>
+                <div style={{padding: "10px"}}> 
                     <span className="itemTitle">{this.props.title}</span>
                     <span className="rightBtnsWrapper">
                         <Icon className="iconItem" type="minus-square" onClick={() => {this.handleDelete()}}/>

pc4mobx/hrmSalary/pages/ledger/step3/previewSalaryModal.js

@@ -0,0 +1,61 @@
+import React from 'react'
+import { Modal, Table } from 'antd'
+import { inject, observer } from 'mobx-react';
+import { WeaTable } from "ecCom"
+
+@inject('ledgerStore')
+@observer
+export default class PreviewSalaryModal extends React.Component {
+    getColumns() {
+        const { ledgerStore: { empFields, itemGroups }} = this.props;
+        let columns = []
+
+        empFields.map(item => {
+            columns.push({
+                title: item.fieldName,
+                key: item.fieldId
+            })
+        })
+
+        itemGroups.map(item => {
+            if(item.id != "default") {
+                let columnItem = {
+                    title: item.name,
+                    children: item.items.map(i => {
+                        return {
+                            title: i.name,
+                            key: i.id
+                        }
+                    })
+                }
+                columns.push(columnItem )
+            }
+        })
+
+        itemGroups.map(item => {
+            if(item.id == "default") {
+                item.items.map(i => {
+                    columns.push({
+                        title: i.name,
+                        key: i.id
+                    })
+                })
+            }
+        })
+
+        return columns;
+    }
+    render() {
+        return (
+            <Modal
+                visible={this.props.visible}
+                title="预览"
+                width={800}
+                onCancel={() => {this.props.onCancel()}}
+                footer={null}
+            >
+                <WeaTable columns={this.getColumns()} dataSource={[]} scroll={{x: 1200}}/>
+            </Modal>
+        )
+    }
+}

pc4mobx/hrmSalary/pages/salaryFile/slideAgent.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import { dataSource, slieAgentColumns } from "./columns"
-import { WeaInputSearch } from 'ecCom'
+import { WeaInputSearch, WeaTable } from 'ecCom'
 import { Table } from 'antd'
 import { inject, observer } from 'mobx-react';
 import "./index.less"
@@ -8,21 +8,64 @@ import "./index.less"
 @inject('salaryFileStore')
 @observer
 export default class SlideAgent extends React.Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            searchValue: ''
+        }
+    }
     componentWillMount() {
         const {salaryFileStore: {adjustRecordTaxAgentList}} = this.props;
-        adjustRecordTaxAgentList({})
+        adjustRecordTaxAgentList({username: this.state.searchValue})
+    }
+
+    // 分页
+    handlePageChange(value) {
+        const {salaryFileStore: {adjustRecordTaxAgentList}} = this.props;
+        adjustRecordTaxAgentList({username: this.state.searchValue, current: value})
+    }
+
+    // 搜索
+    handleSearch(value) {
+        const {salaryFileStore: {adjustRecordTaxAgentList}} = this.props;
+        adjustRecordTaxAgentList({username: value, current: 1})
+    }
+
+    getColumns(columns) {
+        let newColumns = [...columns]
+        newColumns.map(item => {
+            item.width = "120px"
+            if(item.dataIndex == "username") {
+                item.fixed = "left";
+            }
+        })
+        return newColumns;
     }
 
     render() {
         const { salaryFileStore: {taxAgentList} } = this.props;
+        const { searchValue } = this.state
 
         return (
             <div className="salaryFileSlide">
                 <div className="searchBar">
-                    <WeaInputSearch className="inputSearch"/>
+                    <WeaInputSearch className="inputSearch" value={searchValue} onChange={(value) => {
+                        this.setState({
+                            searchValue: value
+                        })
+                    }} onSearch={(value) => { this.handleSearch(value)}}/>
                 </div>
                 <div className="tableWrapper">
-                    <Table dataSource={taxAgentList.list} columns={taxAgentList.columns ? taxAgentList.columns : []}/>
+                    <WeaTable 
+                        dataSource={taxAgentList.list} 
+                        columns={this.getColumns(taxAgentList.columns ? taxAgentList.columns : [])}
+                        scroll={{x: this.getColumns(taxAgentList.columns ? taxAgentList.columns : []).length * 120}}
+                        pagination={{
+                            onChange: (value) => {this.handlePageChange(value)},
+                            total: taxAgentList.total,
+                            current: taxAgentList.pageNum
+                        }}
+                    />
                 </div>
             </div>
         )

pc4mobx/hrmSalary/pages/salaryFile/slideSalaryItem.js

@@ -10,8 +10,12 @@ import "./index.less"
 export default class SlideSalaryItem extends React.Component {
     constructor(props) {
         super(props)
+        this.state = {
+            searchValue: ''
+        }
         this.searchParam = {}
     }
+    
     componentWillMount() {
         const { salaryFileStore: {adjustRecordSalaryItemList}} = this.props;
         adjustRecordSalaryItemList({})
@@ -24,16 +28,39 @@ export default class SlideSalaryItem extends React.Component {
         adjustRecordSalaryItemList(this.searchParam)
     }
 
+    // 搜索
+    handleSearch(value) {
+        const {salaryFileStore: {adjustRecordSalaryItemList}} = this.props;
+        adjustRecordSalaryItemList({username: value, current: 1})
+    }
+
+    getColumns(columns) {
+        let newColumns = [...columns]
+        newColumns.map(item => {
+            item.width = "120px"
+            if(item.dataIndex == "username") {
+                item.fixed = "left";
+            }
+        })
+        return newColumns;
+    }
+
     render() {
         const { salaryFileStore: {salaryItemList} } = this.props;
+        const { searchValue } = this.state;
         return (
             <div className="salaryFileSlide">
                 <div className="searchBar">
-                    <WeaInputSearch className="inputSearch"/>
+                    <WeaInputSearch className="inputSearch" value={searchValue} onChange={(value) => {
+                        this.setState({
+                            searchValue: value
+                        })
+                    }} onSearch={(value) => { this.handleSearch(value)}}/>
                 </div>
                 <div className="tableWrapper">
                 <WeaTable dataSource={salaryItemList.list} 
-                    columns={salaryItemList.columns ? salaryItemList.columns : []}
+                    columns={this.getColumns(salaryItemList.columns ? salaryItemList.columns : [])}
+                    scroll={{x: this.getColumns(salaryItemList.columns ? salaryItemList.columns : []).length * 120}}
                     pagination={{
                         onChange: (value) => {this.handlePageChange(value)},
                         total: salaryItemList.total,

pc4mobx/hrmSalary/pages/salaryItem/formalFormModal.js

@@ -63,7 +63,7 @@ export default class FormalFormModal extends React.Component {
             extendParam:'{}',
             formula: this.state.value,
             parameters: this.parameters,
-            referenceType: this.referenceType == "" ? this.props.valueType == "2" ? "formula" : this.props.valueType == "3" ? "SQL" : "" : this.referenceType
+            referenceType: this.referenceType == "" ? this.props.valueType == "2" ? "formula" : this.props.valueType == "3" ? "sql" : "" : this.referenceType
         }
 
         saveFormual(params).then(data => {

pc4mobx/hrmSalary/pages/socialSecurityBenefits/standingBookDetail/index.js

@@ -10,7 +10,6 @@ import { WeaTab } from 'ecCom';
 import NormalIndex from './components/normal';
 import OverViewIndex from './components/overView';
 import AbnormalListIndex from './components/abnormalList';
-import _ from 'lodash';
 
 @inject('standingBookStore')
 @observer

pc4mobx/hrmSalary/stores/ledger.js

@@ -42,6 +42,7 @@ export class LedgerStore {
   // 添加薪资项目
   @observable addSalaryItemColumns = [];
   @observable addSalaryItemDataSource = [];
+  @observable addSalaryItemPageInfo = {}; // 分页信息
 
   @action
   initSlideData = () => {
@@ -66,6 +67,10 @@ export class LedgerStore {
     this.userSelectedList = [];
   }
 
+  // 设置员工字段
+  @action
+  setEmpFields = (empFields) => this.empFields = empFields
+
   @action
   setUserSelectedList = userSelectedList => this.userSelectedList = userSelectedList
 
@@ -102,6 +107,18 @@ export class LedgerStore {
     let result = [...this.empFields]
     result.push(item)
     this.empFields = result
+    this.userSelectedList = this.empFields.map(item => {
+      item = {...item}
+      item.key = item.fieldId
+      if(!item.showname || item.showname == "") {
+        this.empBrowserList.map(bitem => {
+          if(bitem.key == item.fieldId) {
+              item.showname = bitem.showname
+          }
+        })
+      }
+      return item;
+    })
   }
 
   @action
@@ -423,14 +440,15 @@ export class LedgerStore {
 
   // 薪资项目可选列表 
   @action
-  listSalaryItem = (searchValue = "") => {
+  listSalaryItem = (searchValue = "", current = 1) => {
     let excludeIds = []
     this.itemGroups.map(item => {
       item.items.map(i => {
-        excludeIds.push(i.id)
+        excludeIds.push(i.salaryItemId)
       })
     })
-    API.listSalaryItem({name:searchValue, excludeIds}).then(res => {
+    this.loading = true
+    API.listSalaryItem({name:searchValue, excludeIds, current}).then(res => {
       if(res.status) {
         this.addSalaryItemDataSource = res.data.list.map(item => {
           item = {...item}
@@ -438,10 +456,12 @@ export class LedgerStore {
           return item;
         });
         this.addSalaryItemColumns = res.data.columns;
+        this.addSalaryItemPageInfo = res.data
         // this.salaryItemTableStore.getDatas(res.data.datas);
       } else {
         message.error(res.errormsg || "获取数据失败")
       }
+      this.loading = false
     })
   }
 
@@ -638,6 +658,7 @@ export class LedgerStore {
                 })
                 return item;
             })
+            console.log("this.userSelectedList: " ,toJS(this.userSelectedList));
           } else {
             message.error(res.errormsg || "获取失败")
           }

pc4mobx/hrmSalary/util/date.js

@@ -0,0 +1,21 @@
+import moment from 'moment'
+
+// 获取当前年月
+export const getCurrentYearMonth = () => {
+    return moment(new Date()).format("YYYY-MM")
+}
+
+// 获取当前月份
+export const getCurrentMonth = () => {
+    return (new Date()).getMonth() + 1
+}
+
+// 获取前几个月的年月
+export const getSubtractMonthYearMonth = (subtract = 1) => {
+    return moment(new Date()).subtract(subtract,'months').startOf('month').format('YYYY-MM')
+}
+
+// 获取后几个月的年月
+export const getAddMonthYearMonth = (add = 1) => {
+    return moment(new Date()).add(add,'months').startOf('month').format('YYYY-MM')
+}