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

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

import { Button, Table, DatePicker } from 'antd';

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

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

import { columns, dataSource } from './columns';
import SalaryItemForm from './salaryItemForm';
import CalRulesForm from './calcRulesForm';
import ValidRulesForm from './validRulesForm';

const { MonthPicker } = DatePicker;

@inject('baseTableStore')
@observer
export default class Ledger extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: "",
      selectedKey: "0",
      stepSlideVisible: false,
      currentStep: 4,
      columns: columns.map(item => {
        if(item.dataIndex == "cz") {
          item.render = () => <div>
            <a style={{marginRight: "10px"}}>关联人员</a>
            <a style={{marginRight: "10px"}} >删除</a>
            <a style={{marginRight: "10px"}} onClick={() => this.onEdit()}>编辑</a>
            <a style={{marginRight: "10px"}} >复制</a>
            <a style={{marginRight: "10px"}}>操作日志</a>
        </div>
        }
      })
    }
  }

  onEdit() {
    this.setState({
      stepSlideVisible: true
    })
  }
  render() {
    const { baseTableStore } = this.props;
    const { loading, hasRight, form, condition, tableStore, showSearchAd, getTableDatas, doSearch, setShowSearchAd } = baseTableStore;
    const { currentStep } = 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 renderRightOperation = () => {
      return (
        <div style={{display: "inline-block"}}>
          <Button type="primary" style={{marginRight: "10px"}} onClick={() => this.setState({stepSlideVisible: true})}>新建</Button>
          <WeaInputSearch />
        </div>
      )
    }

    const nextStep = () => {
      const { currentStep } = this.state;
      this.setState({currentStep:  currentStep + 1})
    }

    const prevStep = () => {
      const { currentStep } = this.state;
      this.setState({currentStep: currentStep  - 1});
    }

    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()
                }
                onChange={(v) => {
                  
                }}
              />
            <WeaTable columns={columns} dataSource={dataSource}/>

            {
              this.state.stepSlideVisible && <StepSlide 
              visible={this.state.stepSlideVisible} 
              currentStep={currentStep}
              onCancel={() => {this.setState({stepSlideVisible: false})}}
              customOperate = {
                <div style={{display: "inline-block"}}>
                    {
                        currentStep == 0 && <Button type="primary" onClick={() => {nextStep()}}>保存并进入下一步</Button>
                    }
                    {
                        currentStep == 1 && <div style={{display: "inline-block"}}>
                            <Button type="default" onClick={() => {this.setState({stepSlideVisible: false})}}>完成，跳过所有步骤</Button>
                            <Button type="primary" style={{marginLeft: "10px"}} onClick={() => {nextStep()}}>下一步</Button>
                        </div>
                    }
                    {
                      (currentStep == 2 || currentStep == 3) && <div>
                        <Button type="default" onClick={() => {this.setState({stepSlideVisible: false})}}>完成，跳过所有步骤</Button>
                        <Button type="default" style={{marginLeft: "10px"}} onClick={() => {prevStep()}}>上一步</Button>
                        <Button type="primary" onClick={() => {nextStep()}}>保存并进入下一步</Button>
                      </div>
                    }
                    {
                      currentStep == 4 &&
                      <div>
                        <Button type="default" style={{marginRight: "10px"}} onClick={() => {prevStep()}}>上一步</Button>
                        <Button type="primary" onClick={() => {this.setState({stepSlideVisible: false})}}>完成</Button>
                      </div>
                      
                    }
                </div>
              }
              title="新建账套"
              content={
                <div>
                  {
                    currentStep == 0 && <SlideBaseForm />
                  }
                  {
                    currentStep == 1 && <SlideRefereUser />
                  }
                  {
                    currentStep == 2 && <SalaryItemForm />
                  }
                  {
                    currentStep == 3 && <CalRulesForm />
                  }
                  {
                    currentStep == 4 && <ValidRulesForm />
                  }
                </div>
              
              }
              />
            }
          </WeaTop>
        </WeaRightMenu>
      </div>
    )
  }
}