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

import { WeaTop, WeaTab, WeaRightMenu, WeaRangePicker, WeaInputSearch, WeaSlideModal } from 'ecCom';
import { WeaTableNew } from "comsMobx"
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';
import SlideModalTitle from '../../components/slideModalTitle'
import CopyFormModal from './copyFormModal'

const { MonthPicker } = DatePicker;

const WeaTable = WeaTableNew.WeaTable;

@inject('ledgerStore')
@observer
export default class Ledger extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: "",
      selectedKey: "0",
      stepSlideVisible: false,
      editSlideVisible: false,
      copyFormVisible: false,
      currentStep: 0,
      selectedTab: 0,
      currentReocrd: {},
      searchValue: "",
      step1Request: {}
    }
  }

  handleSearch(value) {
    const{ ledgerStore: {getTableDatas}} = this.props;
    getTableDatas({name: value})
  }

  refereUser() {
    this.setState({
      editSlideVisible: true,
      selectedTab: 1
    })
  }

  onEdit() {
    this.setState({
      editSlideVisible: true
    })
  }

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


  handleItemStatusChange(value, record) {
    const { ledgerStore: { changeLedgerStatus }} = this.props;
    changeLedgerStatus(record.id, value ? 0 : 1);
  }


  handleItemClick(record, selectedTab = 0) {
    const { ledgerStore:  {setSalarySobId} } = this.props;
    setSalarySobId(record.id)
    this.setState({
      selectedTab,
      editSlideVisible: true,
      request: record
    })
  }

  // 编辑Slide保存按钮
  handleEditSlideSave() {
    const { selectedTab, step1Request } = this.state;
    const { ledgerStore: {saveLedgerItem, saveAdjustmentRule, saveLedgerBasic, baseInfoRequest}} = this.props;
    if(selectedTab == 0) {
      saveLedgerBasic(baseInfoRequest)
    } else if(selectedTab == 2) {
      saveLedgerItem()
    } else if(selectedTab == 3) {
      saveAdjustmentRule()
    } 
  }

  // 增加编辑功能，重写columns绑定事件
  getColumns = (columns) => {
    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 'name':
            return <a onClick={() => {this.handleItemClick(record)}}>{text}</a>
          case "disable":
            return <Switch checked={text == 0} onChange={(value) => {this.handleItemStatusChange(value, record)}}/>
          case "operate":
            return <a onClick={() => {this.handleItemClick(record, 1)}}>关联人员</a>
          default:
            return <div dangerouslySetInnerHTML={{ __html: valueSpan }} />
        }
      }
      return newColumn;
    });
    return newColumns;
  }


  onOperatesClick = (record, index, operate, flag) => {
    const { ledgerStore: { deleteLedger }} = this.props;
    switch(operate.index.toString()){
      case "0": // 编辑
        this.handleItemClick(record)
        break;
      case '1': // 复制
        this.setState({
          copyFormVisible: true,
          currentReocrd: record
        })
        break;
      case "3": // 关联人员
        this.handleItemClick(record, 1)
        break;
      case "4": // 删除
        Modal.confirm({
          title: '信息确认',
          content: '确认删除',
          onOk:() => {
            deleteLedger([record.id])
          },
          onCancel: () => {

          },
        });
        
        break;
    }
  };

  handleCopySave = (value) => {
    const { ledgerStore: { doCopy}} = this.props
    doCopy(this.state.currentReocrd.id, value).then(() => {
      this.setState({copyFormVisible: false})
    })
  }

  handleNew = () => {
    const { ledgerStore: { initSlideData }} = this.props;
    initSlideData();
    this.setState({stepSlideVisible: true, currentStep: 0})
  }

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

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

    const prevStep = () => {
      const { currentStep } = this.state;
      this.setState({currentStep: currentStep  - 1});
    }
    const steps = [
      "基础设置",
      "关联人员",
      "薪资项目",
      "调薪记薪规则",
      // "校验规则",
    ]

    const handleStep1Save = () => {
      const { step1Request } = this.state;
      const { ledgerStore: {saveLedgerBasic, baseInfoRequest} } = this.props;
      saveLedgerBasic(baseInfoRequest).then(() => {
        nextStep();
      })
    }


    const handleStep3Save = () => {
      const { ledgerStore: {saveAdjustmentRule} } = this.props;
      saveAdjustmentRule().then(() => {
        nextStep()
      })
    }

    const handleStepSave = () => {
      const { currentStep } = this.state;
      const { ledgerStore: { saveLedgerBasic, saveLedgerItem, saveAdjustmentRule, baseInfoRequest }} = this.props;
      if(currentStep == 0) {
        saveLedgerBasic(baseInfoRequest).then(() => {
          nextStep();
        })
      } else if(currentStep == 1) {
        nextStep()
      }else if(currentStep == 2) {
        saveLedgerItem().then(() => {
          nextStep()
        })
      } else if(currentStep == 3) {
        saveAdjustmentRule().then(() => {
          this.setState({stepSlideVisible: false})
        })
      } 
    }

    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 // table内部做了loading加载处理，页面就不需要再加了
              comsWeaTableStore={tableStore} // table store
              hasOrder={true} // 是否启用排序
              needScroll={true} // 是否启用table内部列表滚动，将自适应到父级高度
              
              getColumns={this.getColumns}
              onOperatesClick={this.onOperatesClick.bind(this)}
            />
            {
              this.state.stepSlideVisible && <StepSlide 
              visible={this.state.stepSlideVisible} 
              steps={steps}
              currentStep={currentStep}
              onCancel={() => {this.setState({stepSlideVisible: false})}}
              customOperate = {
                <div style={{display: "inline-block"}}>
                    {
                        currentStep == 0 && <Button type="primary" onClick={() => {handleStep1Save()}}>保存并进入下一步</Button>
                    }
                    {
                        currentStep == 1 && <div style={{display: "inline-block"}}>
                            <Button type="default" onClick={() => {this.setState({stepSlideVisible: false})}}>完成，跳过所有步骤</Button>
                            <Button type="primary" style={{marginLeft: "10px"}} onClick={() => {handleStepSave()}}>下一步</Button>
                        </div>
                    }
                    {
                      currentStep == 2 && <div>
                        <Button type="default" onClick={() => {this.setState({stepSlideVisible: false})}}>完成，跳过所有步骤</Button>
                        <Button type="default" style={{marginLeft: "10px"}} onClick={() => {prevStep()}}>上一步</Button>
                        <Button type="primary" style={{marginLeft: '10px'}} onClick={() => {handleStepSave()}}>保存并进入下一步</Button>
                      </div>
                    }
                    {
                      currentStep == 3 &&
                      <div>
                        <Button type="default" style={{marginRight: "10px"}} onClick={() => {prevStep()}}>上一步</Button>
                        <Button type="primary" onClick={() => {handleStepSave()}}>完成</Button>
                      </div>
                      
                    }
                </div>
              }
              title="新建账套"
              content={
                <div>
                  {
                    currentStep == 0 && <SlideBaseForm />
                  }
                  {
                    currentStep == 1 && <SlideRefereUser />
                  }
                  {
                    currentStep == 2 && <SalaryItemForm />
                  }
                  {
                    currentStep == 3 && <CalRulesForm />
                  }
                  {/* {
                    currentStep == 4 && <ValidRulesForm />
                  } */}
                  
                </div>
              
              }
              />
            }

            {
              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}, {title: "薪资项目", key: 2}, {title: '调薪计薪规则', key: 3}]}
                    editable={true}
                    selectedTab={selectedTab}
                    onSave={() => this.handleEditSlideSave()}
                    subItemChange={
                      (item) => {this.setState({selectedTab: item.key})}
                    }
                  />
                }
                content={<div>
                  {
                    selectedTab == 0 && <SlideBaseForm edit={true} />
                  }
                  {
                    selectedTab == 1 && <SlideRefereUser edit={true} />
                  }
                  {
                    selectedTab == 2 && <SalaryItemForm edit={true}/>
                  }
                  {
                    selectedTab == 3 && <CalRulesForm edit={true}/>
                  }
                  {/* {
                    selectedTab == 4 && <ValidRulesForm edit={true}/>
                  } */}
                </div>}
                onClose={() => this.setState({editSlideVisible: false})}
                showMask={true}
                closeMaskOnClick={() => this.setState({editSlideVisible: false})} />
            }
          </WeaTop>
        </WeaRightMenu>

        {
          this.state.copyFormVisible && 
          <CopyFormModal 
            visible={this.state.copyFormVisible}
            onSave={(value) => this.handleCopySave(value)}
            onCancel={() => {this.setState({copyFormVisible: false})}}
          />
        }
      </div>
    )
  }
}