列表水平滚动条

2022-04-25 16:17:03 +08:00 · 2022-04-25 16:17:03 +08:00 · 658b10e36a
parent 3ab51289d8
commit 658b10e36a
9 changed files with 88 additions and 55 deletions
--- a/pc4mobx/hrmSalary/apis/attendance.js
+++ b/pc4mobx/hrmSalary/apis/attendance.js
@ -210,4 +210,14 @@ export const importAttendQuoteData = (params) => {
    }).then(res => res.json())
 }

-
+// 查看考勤详情 
+export const viewAttendQuote = (ids) => {
+    return fetch('/api/bs/hrmsalary/attendQuote/view', {
+        method: 'POST',
+        mode: 'cors',
+        headers: {
+            'Content-Type': 'application/json'
+        }, 
+        body: JSON.stringify(ids)
+    }).then(res => res.json())
+}
--- a/pc4mobx/hrmSalary/components/importModal/modalStep3.js
+++ b/pc4mobx/hrmSalary/components/importModal/modalStep3.js
@ -1,6 +1,7 @@
 import React from "react"
 import successImg from "./success.svg"
 import { Button, Table } from "antd"
+import { WeaTable } from 'ecCom'

 export default class ModalStep3 extends React.Component {

@ -24,9 +25,9 @@ export default class ModalStep3 extends React.Component {
                        <div style={{fontSize: "20px", marginBottom: "10px"}}>数据导入完成</div>
                        <div>已导入 <span style={{color: "red"}}> {importResult.successCount} </span> 条数据，失败<span style={{color: "green"}}> {importResult.errorCount} </span>条数据</div>
                    </div>
-                    <div style={{marginTop: "20px"}} >
+                    <div style={{marginTop: "20px", maxHeight: "300px", overflowY: "scroll"}} >
                    {
-                        <Table columns={this.columns} dataSource={importResult.errorData} pagination={null}/>
+                        <WeaTable columns={this.columns} dataSource={importResult.errorData} pagination={false}/>
                    }
                    </div>
                </div>
--- a/pc4mobx/hrmSalary/pages/dataAcquisition/attendance/editSlideContent.js
+++ b/pc4mobx/hrmSalary/pages/dataAcquisition/attendance/editSlideContent.js
@ -23,62 +23,40 @@ let emptyItem = {
    taxDeduction: "0.00"
 }

-@inject('otherDeductStore', "taxAgentStore")
+@inject('attendanceStore')
@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();
+        const {attendanceStore: {viewAttendQuote}} = this.props;
+        viewAttendQuote({attendQuoteId: this.props.id})
    }

-    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)
+    getColumns(columns) {
+        let result = [...columns]
+        return result.filter(item => item.hide == "false")
    }

-    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;
+        const { attendanceStore } = this.props;
+        const { attendQuoteDetailPageInfo, attendQuoteDetailTableStore} = attendanceStore;
        return (
            <div className="attendSlide">
                <div className="titleWrapper"> 
-                    <div className="slideLeftTitle">考勤周期： 2021-01-01至2021-01-31</div>
-                    <WeaCheckbox className="rightTitle" content="仅查看异动人员"/>
+                    {
+                        this.props.salaryYearMonth != "" && 
+                        <div className="slideLeftTitle">考勤周期： {moment(this.props.salaryYearMonth + "-01").startOf("month").format("YYYY-MM-DD")} 至 {moment(this.props.salaryYearMonth + "-01").endOf("month").format("YYYY-MM-DD")}</div>
+                    }
                </div>
-
                <div>
-                    <Table 
-                        dataSource={slideDataSource}
-                        columns={slideColumns}
-                        width={"100%"}
+                    <WeaTable 
+                        columns={this.getColumns(attendQuoteDetailTableStore.columns ? attendQuoteDetailTableStore.columns : [])}
+                        dataSource={attendQuoteDetailPageInfo.list ? attendQuoteDetailPageInfo.list : []}
+                        scroll={{x: 1300}}
                    />
                </div>
            </div>                    
--- a/pc4mobx/hrmSalary/pages/dataAcquisition/attendance/index.js
+++ b/pc4mobx/hrmSalary/pages/dataAcquisition/attendance/index.js
@ -63,6 +63,8 @@ export default class Attendance extends React.Component {
    }
    this.fieldSearch = {}
    this.listSearch = {}
+    this.recordId = ""; // 考勤数据列表查看选择项
+    this.salaryYearMonth = ""; // 考勤数据查看，当前数据的薪资所属月
  }

  componentWillMount() {
@ -145,13 +147,34 @@ export default class Attendance extends React.Component {
    this.setState({modalVisiable: false})
  }

+  // 考情引用的列
+  getColumns(columns) {
+    let result = [...columns]
+    result.push({
+      title: "操作",
+      key: "operate",
+      render: (text, record) => {
+        return <a onClick={() => this.handleViewAttendance(record)}>查看</a>
+      }
+    })
+    return result;
+  }
+
+  // 查看考勤详情 
+  handleViewAttendance(record) {
+    const { attendanceStore: {setSlideVisiable}} = this.props;
+    this.recordId = record.id
+    this.salaryYearMonth = record.salaryYearMonth
+    setSlideVisiable(true)
+  }
+
  render() {
    const { attendanceStore } = this.props;
    const { modalParam } = this.state;
    const { loading, hasRight, form, condition, tableStore, showSearchAd, getTableDatas, doSearch, setShowSearchAd } = attendanceStore;
    const { step, setStep, setSlideVisiable, slideVisiable, doBatchDelete, attendTableStore, fieldSettingAttendList, fieldSettingCustomList, setFieldSettingAttendList, setFieldSettingCustomList, searchFieldSettingList } = attendanceStore;
    const { getAttendanceFieldSettingList, saveAttendanceFieldSetting, fieldDataSource, fieldTableStore, fieldPageInfo, attendanceDataSource, attendanceColumns, attendancePageInfo, importLedgerList, 
-      previewAttendQuoteColumns, previewAttendQuoteDataSource} = attendanceStore
+      previewAttendQuoteColumns, previewAttendQuoteDataSource, importResult} = attendanceStore
    const selectedRowKeys = toJS(tableStore.selectedRowKeys) || []; // tableStore 右侧选中数组
    
    if (!hasRight && !loading) { // 无权限处理
@ -279,7 +302,6 @@ export default class Attendance extends React.Component {
                }
            </Col>
        </Row>
-    
    )}


@ -474,7 +496,7 @@ export default class Attendance extends React.Component {
                /> */}

                <WeaTable // table内部做了loading加载处理，页面就不需要再加了
-                  columns={attendanceColumns}
+                  columns={this.getColumns(attendanceColumns)}
                  dataSource={attendanceDataSource}
                  // getColumns={this.getColumns}
                  // onOperatesClick={this.onOperatesClick.bind(this)}
@ -539,7 +561,7 @@ export default class Attendance extends React.Component {
          step={step}
          setStep={setStep}
          slideDataSource={previewAttendQuoteDataSource}
-          importResult={{}}
+          importResult={importResult}
          onFinish={() => {this.handleFinish()}}
          previewImport={(params) => {this.handlePreviewImport(params)}}
          importFile={(params) => {this.handleImport(params)}}
@ -577,7 +599,7 @@ export default class Attendance extends React.Component {
              }
            />
          }
-          content={(<EditSlideContent editable={this.state.editable}/>)}
+          content={(<EditSlideContent salaryYearMonth={this.salaryYearMonth} id={this.recordId} editable={this.state.editable}/>)}
          onClose={() => setSlideVisiable(false)}
          showMask={true}
          closeMaskOnClick={() => setSlideVisiable(false)} />
--- a/pc4mobx/hrmSalary/pages/mySalary/index.js
+++ b/pc4mobx/hrmSalary/pages/mySalary/index.js
@ -2,7 +2,7 @@ import React from 'react';
 import { inject, observer } from 'mobx-react';
 import { toJS } from 'mobx';

-import { Button, Table, DatePicker } from 'antd';
+import { Button, Table, DatePicker, Spin } from 'antd';

 import { WeaTop, WeaTab, WeaRightMenu, WeaRangePicker, WeaTable, WeaDatePicker } from 'ecCom';

@ -175,7 +175,8 @@ export default class MySalary extends React.Component {
            />

            {
-              this.state.selectedKey == '0' && <WeaTable columns={this.getColumns()} dataSource={myBillDataSource ? myBillDataSource : []}/>
+              this.state.selectedKey == '0' && 
+              <WeaTable columns={this.getColumns()} dataSource={myBillDataSource ? myBillDataSource : []}/>
            }
            {
              this.state.selectedKey == '1' && <WeaTable columns={socialSecurityBenefitsColumns} dataSource={dataSource} scroll={{ x: 1000}}/>
--- a/pc4mobx/hrmSalary/pages/salaryFile/index.js
+++ b/pc4mobx/hrmSalary/pages/salaryFile/index.js
@ -107,10 +107,14 @@ export default class SalaryFile extends React.Component {
  getColumns() {
    const { salaryFileStore: {tableStore}} = this.props;
    return tableStore.columns.filter(item => item.display == "true").map(item => {
+      item.width = item.oldWidth
      if(item.dataIndex == "operate") {
        item.render = (text, record) => (
          <a onClick={() => this.handleEdit(record)}>查看</a>
        )
+        item.fixed = 'right'
+      } else if(item.dataIndex == "username"){
+        item.fixed = 'left'
      }
      return item
    })
@ -304,6 +308,7 @@ export default class SalaryFile extends React.Component {
                total: pageInfo.total,
                current: pageInfo.pageNum
              }}
+              scroll={{x: 2300}}
            />
          </WeaTop>
        </WeaRightMenu>
--- a/pc4mobx/hrmSalary/pages/socialSecurityBenefits/archives/index.js
+++ b/pc4mobx/hrmSalary/pages/socialSecurityBenefits/archives/index.js
@ -16,6 +16,7 @@ import SlideModalTitle from '../../../components/slideModalTitle'
 import SocialSecurityForm from './socialSecurityForm';
 import AccumulationFundForm from './accumulationFundForm';
 import OtherForm from './otherForm';
+import { tempateColumns } from '../../payroll/columns';

 const { MonthPicker } = DatePicker;

@ -47,11 +48,7 @@ export default class Archives extends React.Component {
    let columns = [...tableStore.columns]
    columns = columns.filter(item => item.hide == "false")
    columns.map(item => {
-      item.render = (text, record) => {
-        return (
-          <div style={{height: "30px", lineHeight:"30px"}}>{text}</div>
-        )
-      }
+      item.width = item.oldWidth
    })
    columns.push({
      title: "操作",
--- a/pc4mobx/hrmSalary/stores/attendanceStore.js
+++ b/pc4mobx/hrmSalary/stores/attendanceStore.js
@ -40,6 +40,11 @@ export class AttendanceStore {
  @observable previewAttendQuoteList = []; // 导入-预览列表
  @observable previewAttendQuoteColumns = []; // 导入预览-列表对应列
  @observable previewAttendQuoteDataSource = []; // 导入预览-列表
+  @observable importResult = {}
+
+  // 考勤数据详情
+  @observable attendQuoteDetailPageInfo = {}; // 详情列表分页数据
+  @observable attendQuoteDetailTableStore = new TableStore(); // 详情列表表头数据

  @action
  searchFieldSettingList = (value) => {
@ -374,12 +379,23 @@ export class AttendanceStore {
  importAttendQuoteData = (params) => {
    API.importAttendQuoteData(params).then(res => {
      if(res.status) {
-        
+        this.importResult = res.data
      } else {
        message.error(res.errormsg || "导入失败")
      }
    })
  }
  
-
+  // 考勤数据详情
+  @action
+  viewAttendQuote = (ids) => {
+    API.viewAttendQuote(ids).then(res => {
+      if(res.status) {
+        this.attendQuoteDetailPageInfo = res.data.pageInfo
+        this.attendQuoteDetailTableStore.getDatas(res.data.dataKey.datas)
+      } else {
+        message.error(res.errormsg || "获取失败")
+      }
+    })
+  }
 }
--- a/pc4mobx/hrmSalary/stores/mySalary.js
+++ b/pc4mobx/hrmSalary/stores/mySalary.js
@ -95,12 +95,15 @@ export class MySalaryStore {
  // 我的工资单列表
  @action
  mySalaryBillList = (salaryYearMonth = []) => {
+    this.loading = true
    API.mySalaryBillList({salaryYearMonth}).then(res => {
      if(res.status) {
        this.myBillDataSource = res.data.datas
        this.myBillTableStore.getDatas(res.data.dataKey.datas)
+        this.loading = false
      } else {
        message.error(res.errormsg || "获取失败")
+        this.loading = false
      }
    })
  }