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 } from 'antd';

import { WeaTop, WeaTab, WeaRightMenu, WeaRangePicker, WeaTable, WeaInputSearch, WeaSlideModal } 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'


const { MonthPicker } = DatePicker;

@inject('baseTableStore')
@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
    }
  }
  render() {
    const { baseTableStore } = this.props;
    const { loading, hasRight, form, condition, tableStore, showSearchAd, getTableDatas, doSearch, setShowSearchAd } = baseTableStore;
    const { selectedTab } = 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 = () => {
      return <div></div>
     
    }

    const handleMenuClick = (e) => {
      if(e.key == "1") {
        this.setState({
          changeSalaryVisible: true
        })
      }

      switch(e.key) {
        case "1":
          this.setState({
            changeSalaryVisible: true
          })
          break;
        case "2": 
          this.setState({
            editAgentVisible: true
          })
          break;
      }
    }

    const handleMenuClick2 = () => {

    }

    const menu = (
      <Menu onClick={handleMenuClick}>
        <Menu.Item key="1">调薪</Menu.Item>
        <Menu.Item key="2">调整个税扣缴义务人</Menu.Item>
        <Menu.Item key="3">档案初始化</Menu.Item>
      </Menu>
    );


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

    const renderRightOperation = () => {
        return (
            <div style={{display: "inline-block"}}>
                <Dropdown.Button type="primary" style={{marginRight: "10px"}} overlay={menu}>导入</Dropdown.Button>
                <Dropdown.Button style={{marginRight: "10px"}} overlay={menu2}>导出</Dropdown.Button>
                <Button type="default" style={{marginRight: "10px"}} onClick={() => {this.setState({editSlideVisible: true})}}>调薪记录</Button>
                <WeaInputSearch />
            </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>
      )
    }

    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()
                  }
              />
            <WeaTable columns={columns} dataSource={dataSource}/>
          </WeaTop>
        </WeaRightMenu>
        
        {
          this.state.changeSalaryVisible && <ChangeSalaryModal 
            visible={this.state.changeSalaryVisible}
            onCancel={() => {this.setState({changeSalaryVisible: false})}}
          />
        }

        {
          this.state.editAgentVisible && <EditAgentModal 
            visible={this.state.editAgentVisible}
            onCancel={() => {this.setState({editAgentVisible: false})}}
          />
        }

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