salary-management-front/pc4mobx/hrmSalary/pages/salaryFile/index.js

import React from 'react';
import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx';

import { Button, Table, DatePicker, Dropdown, Menu, message } from 'antd';

import { WeaTop, WeaTab, WeaRightMenu, WeaRangePicker, WeaTable, 
  WeaInputSearch, WeaSlideModal, WeaCheckbox, WeaHelpfulTip } from 'ecCom';

import { renderNoright, getSearchs } from '../../util'; // 渲染form数据的方法：因为多个页面都会使用，所以抽的公共方法在util中
import CustomTab from '../../components/customTab';
import ContentWrapper from '../../components/contentWrapper';

import { columns, dataSource } from './columns';

import ChangeSalaryModal from "./changeSalaryModal"
import EditAgentModal from './editAgentModal';
import SlideModalTitle from '../../components/slideModalTitle'
import SlideSalaryItem from './slideSalaryItem'
import SlideAgent from './slideAgent'
import ImportModal from '../../components/importModal'
import SalaryFileViewSlide from './saralyFileViewSlide'
import CustomPaginationTable from "../../components/customPaginationTable"

const { MonthPicker } = DatePicker;

import "./index.less"
import CustomTable from '../../components/customTable';

@inject('salaryFileStore')
@observer
export default class SalaryFile extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: "",
      selectedKey: "0",
      changeSalaryVisible: false,
      editAgentVisible: false,
      selectedTab: 0,
      editSlideVisible: false,
      importType: "",
      modalVisiable: false,
      step: 0,
      recordSlideVisible: false,
      selectedRowKeys: [],
      showSearchBar: false,
      importResult: {},
      searchValue: ""
    }
    this.pageInfo = {current: 1, pageSize: 10}
  }

  componentWillMount() {
    const { salaryFileStore: {doInit} } = this.props;
    doInit();
  }

  // 设置导入步数
  setStep(step) {
    this.setState({step})
  }

  // 渲染导入模板附加元素
  renderFormComponent() {
    return (
      <div style={{display: "inline-block"}}>
        <WeaCheckbox id="importData" content="导出现有数据" />
        <WeaHelpfulTip
            width={200}
            title="提示：建议先导出现有最新数据，修改后再导入"
            placement="topLeft"
          />
      </div>
    )
  }


  // 导入预览
  handlePreviewImport(params) {
    const { salaryFileStore: {importPreview}} = this.props;
    params.importType = this.state.importType;
    importPreview(params)
  }

  // 导入档案
  handleImportFile(params) {
    const { salaryFileStore: {importSalaryArchive}} = this.props;
    params.importType = this.state.importType
    importSalaryArchive(params).then(data => {
      data.errorData = data.errorNotice
      this.setState({
        importResult: data
      })
    })
  }


  // 导入完成按钮操作
  handleImportFinish() {
    this.setState({modalVisiable: false, step: 0})
  }

  // 导出全部
  handleExportAll() {
    const { salaryFileStore: {exportSalaryArchive}} = this.props;
    exportSalaryArchive();
  }

  // 定制列
  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
    })
  }

  // 编辑行
  handleEdit(record) {
    this.setState({editSlideVisible: true})
    const { salaryFileStore: {setCurrentId}} = this.props;
    setCurrentId(record.id)
  }

  // 显示调整个税扣缴义务人表单
  handSildeOptionMenuClick(e) {
    const { salaryFileStore: {setEditAgentVisible}} = this.props;
    setEditAgentVisible(true)
  }

  // 查看 Slide 头部操作按钮
  renderEditSlideOperate() {
    return <div style={{display: "inline-block"}}>
        <Dropdown.Button type="primary" overlay={
          <Menu onClick={this.handSildeOptionMenuClick.bind(this)}>
          <Menu.Item key="1">调整个税扣缴义务人</Menu.Item>
        </Menu>
        } onClick={() => {this.setState({changeSalaryVisible: true})}}>调薪</Dropdown.Button>
      </div>
  }

  // table选中条目
  onSelectChange = selectedRowKeys => {
    this.setState({ selectedRowKeys });
  };

  // 显示影响搜索面板
  handleShowSearchBar = () => {
    this.setState({
      showSearchBar: !this.state.showSearchBar
    })
  }

  // 页面跳转
  handlePageChange = (value) => {
    const { salaryFileStore: {getTableDatas, form}} = this.props;
    this.pageInfo.current = value;
    getTableDatas(this.pageInfo)
  }

  handleShowSizeChange(pageInfo) {
    const { salaryFileStore: {getTableDatas, form}} = this.props;
    getTableDatas(pageInfo)
  }
  
  // 搜索
  handleSearch(value) {
    const { salaryFileStore: {getTableDatas, form}} = this.props;
    getTableDatas({username: value})
  }

  // 初始化导入参数
  handleInitModal() {
    const { salaryFileStore: { setPreviewDataSource } } = this.props;
    setPreviewDataSource([])
    this.setState({
      importResult: {}
    })
  }

  render() {
    const { salaryFileStore } = this.props;
    const { loading, hasRight, form, condition, tableStore, showSearchAd, getTableDatas, doSearch, setShowSearchAd } = salaryFileStore;
    const { importType, previewColumns, previewDataSource, dataSource, currentId, editAgentVisible, setEditAgentVisible, pageInfo } = salaryFileStore;
    
    const { selectedTab, step, selectedRowKeys } = this.state;
    if (!hasRight && !loading) { // 无权限处理
      return renderNoright();
    }

    const rightMenu = [// 右键菜单
      { 
        key: 'BTN_COLUMN',
        icon: <i className='icon-coms-Custom' />,
        content: '显示列定制',
        onClick: this.showColumn
      },
    ];
    const collectParams = { // 收藏功能配置
      favname: '薪资档案',
      favouritetype: 1,
      objid: 0,
      link: 'wui/index.html#/ns_demo03/index',
      importantlevel: 1,
    };
    const adBtn = [ // 高级搜索内部按钮
      <Button type="primary" onClick={doSearch}>搜索</Button>,
      <Button type="ghost" onClick={() => form.resetForm()}>重置</Button>,
      <Button type="ghost" onClick={() => setShowSearchAd(false)}>取消</Button>,
    ];

    const topTab = [
    ];

    const renderSearchOperationItem = () => {
     
    }

    const handleMenuClick = (e) => {
      this.setState({importType: e.key, modalVisiable: true, step: 0})
    }

    const handleMenuClick2 = () => {
      const { electedRowKeys } = this.state;
      if(selectedRowKeys.length == 0) {
        message.warning("未选择条目")
        return 
      }
      const { salaryFileStore: {exportSalaryArchive}} = this.props;
      exportSalaryArchive(selectedRowKeys.join(","))
    }

    const menu = (
      <Menu onClick={handleMenuClick}>
        {
          importType.map(item => (
            <Menu.Item key={item.id}>{item.content}</Menu.Item>
          ))
        }
      </Menu>
    );


    const menu2 = (
      <Menu onClick={handleMenuClick2}>
        <Menu.Item key="1">导出所选</Menu.Item>
      </Menu>
    );

    const renderRightOperation = () => {
        return (
            <div style={{display: "inline-block", position: 'relative'}} className="salaryFileTabWrapper">
                <WeaHelpfulTip
                  style={{marginRight: '10px'}}
                  width={200}
                  title="导入按钮使用场景说明：\n
                  1.档案初始化：\n
                  a.初次使用薪酬模块，全量导入员工的薪资档案数据；\n
                  b.员工入职，导入新入职的员工的薪资档案数据（若导入表格中的人员已存在在薪资档案中，初始化导入会将档案中该人员的数据清除再导入）；\n
                  c.返聘人员使用调薪功能调整薪资档案值或使用调整个税扣缴；\n
                  2.调薪：档案中已存在的人员批量调整薪资项目值（包括返聘人员的情况）；\n
                  3.调整个税扣缴义务人：档案中已存在的人员批量调整个税扣缴义务人（包括返聘人员的情况）；\n"
                  placement="topLeft"
                />
                <Dropdown.Button type="primary" style={{marginRight: "10px"}} overlay={menu}>导入</Dropdown.Button>
                <Dropdown.Button style={{marginRight: "10px"}} overlay={menu2} onClick={() => {this.handleExportAll()}}>导出全部</Dropdown.Button>
                <Button type="default" style={{marginRight: "10px"}} onClick={() => {this.setState({recordSlideVisible: true})}}>调薪记录</Button>
                <WeaInputSearch value={this.state.searchValue} onChange={(value) => {this.setState({
                    searchValue: value
                })}} onSearch={(value) => {this.handleSearch(value)}}/>
                {/* <Button type="default" onClick={() =>{this.handleShowSearchBar()}}>高级搜索</Button> */}
            </div>
        )
    }

    const handleSlideMoreMenuClick = () => {

    }

    const slideMoreMenu = (
      <Menu onClick={handleSlideMoreMenuClick}>
        <Menu.Item key="1">导出全部</Menu.Item>
      </Menu>
    );
    
    const renderCustomOperate = () => {
      return (
        <div style={{display: "inline-block"}}>
          <Dropdown.Button type="primary" overlay={slideMoreMenu}>导出</Dropdown.Button>
          <Button type="default">自定义列</Button>
        </div>
      )
    }

    const rowSelection = {
        selectedRowKeys,
        onChange: this.onSelectChange,
    };

    return (
      <div className="mySalaryBenefitsWrapper">
        <WeaRightMenu
          datas={rightMenu} // 右键菜单
          collectParams={collectParams} // 收藏功能: 配置之后显示 收藏、帮助、显示页面地址 这3个功能
        >
          <WeaTop
            title="薪资档案" // 文字
            icon={<i className='icon-coms-meeting' />} // 左侧图标
            iconBgcolor='#F14A2D' // 左侧图标背景色
            showDropIcon={true} // 是否显示下拉按钮
            dropMenuDatas={rightMenu} // 下拉菜单（和页面的右键菜单相同）
            dropMenuProps={{ collectParams }} // 收藏功能: 配置之后显示 收藏、帮助、显示页面地址 这3个功能
          >
            <CustomTab 
                  searchOperationItem={
                      renderRightOperation()
                  }
              />

            <CustomPaginationTable 
              loading={loading}
              rowSelection={rowSelection}
              columns={this.getColumns()}
              dataSource={dataSource}
              total={pageInfo.total}
              current={pageInfo.pageNum}
              pageSize={this.pageInfo.pageSize}
              scroll={{x: 2300}}
              onPageChange={(value) => {
                this.handlePageChange(value)
              }}
              onShowSizeChange={(current, pageSize) => {
                this.pageInfo = {current, pageSize}
                this.handleShowSizeChange(this.pageInfo)
              }}
            />
          </WeaTop>
        </WeaRightMenu>


        {
          this.state.modalVisiable && 
          <ImportModal 
            init={() => {
              this.handleInitModal()
            }}
            params={{}}
            columns={previewColumns}
            step={step}
            setStep={this.setStep.bind(this)}
            slideDataSource={previewDataSource}
            importResult={this.state.importResult}
            onFinish={() => {this.handleImportFinish()}}
            previewImport={(params) => {
              this.handlePreviewImport(params)
            }}
            importFile={(params) => {this.handleImportFile(params)}}
            templateLink={"/api/bs/hrmsalary/salaryArchive/downloadTemplate?importType=" + this.state.importType}
            renderFormComponent={() => {this.renderFormComponent()}} 
            visiable={this.state.modalVisiable} 
            onCancel={() => { this.setState({modalVisiable: false})}} 
          />
        }
        {
          this.state.changeSalaryVisible && <ChangeSalaryModal 
            currentId={currentId}
            visible={this.state.changeSalaryVisible}
            onCancel={() => {this.setState({changeSalaryVisible: false})}}
          />
        }

        {
          editAgentVisible && <EditAgentModal 
            currentId={currentId}
            visible={editAgentVisible}
            onCancel={() => {setEditAgentVisible(false)}}
          />
        }

        {/* 操作记录 */}
        {
            this.state.recordSlideVisible && 
            <WeaSlideModal visible={this.state.recordSlideVisible}
              top={0}
              width={40}
              height={100}
              direction={'right'}
              measure={'%'}
              title={
                <SlideModalTitle 
                  subtitle={"操作记录"}
                  tabs={[{title: '薪资项目', key: 0}, {title: "个税扣缴义务人", key: 1}]}
                  editable={false}
                  selectedTab={selectedTab}
                  customOperate={() => {renderCustomOperate()}}
                  subItemChange={
                    (item) => {this.setState({selectedTab: item.key})}
                  }
                />
              }
              content={<div>
                {
                  selectedTab == 0 && <SlideSalaryItem />
                }
                {
                  selectedTab == 1 && <SlideAgent />
                }
              </div>}
              onClose={() => this.setState({recordSlideVisible: false})}
              showMask={true}
              closeMaskOnClick={() => this.setState({recordSlideVisible: false})} />
        }

        {
            this.state.editSlideVisible && 
            <WeaSlideModal visible={this.state.editSlideVisible}
              top={0}
              width={40}
              height={100}
              direction={'right'}
              measure={'%'}
              title={
                <SlideModalTitle 
                  subtitle={"员工薪资档案"}
                  editable={false}
                  customOperate={this.renderEditSlideOperate()}
                />
              }
              content={<SalaryFileViewSlide id={currentId} />}
              onClose={() => this.setState({editSlideVisible: false})}
              showMask={true}
              closeMaskOnClick={() => this.setState({editSlideVisible: false})} />
        }
        
      </div>
    )
  }
}