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

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

import { Button, Table, DatePicker, message, Modal } from 'antd';
import moment from 'moment'

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

import { columns, dataSource, tempateColumns } from './columns';
import StepSlide from '../../components/stepSlide'
import ItemMangeFormModal from '../dataAcquisition/attendance/itemMangeFormModal';
import BaseInformForm from './stepForm/baseInformForm'
import ShowSettingForm from './stepForm/showSettingForm'
import SlideModalTitle from "../../components/slideModalTitle"
import TemplateSettingList from './templateSettingList'
import { notNull } from '../../util/validate';
import CopyModal from './copyModal';
import SalarySendList from './SalarySendList'

const { RangePicker } = DatePicker;

@inject('payrollStore')
@observer
export default class Payroll extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: "",
      selectedKey: "0",
      currentStep: 0,
      stepSlideVisible: false,
      selectedTab: 0,
      editSlideVisible: false,
      initSelected: false,
      ledgerOptions: [],
      templateSearchValue: "", // 工资单模板列表-搜索条件-名称
      templateSelect: "", // 工资单模板列表-搜索条件-账套下拉选中值
      templateCurrentId: "",
      copyModalVisible: false
    }
    this.recordId = ""
    columns.map(item => {
      if(item.dataIndex == "cz") {
        item.render = (text, record) => {
          return (
            <div>
              <a onClick={() => {window.open("/spa/hrmSalary/static/index.html#/main/hrmSalary/payrollGrant")}}>工资单发放</a>
              <a onClick={window.open("/spa/hrmSalary/static/index.html#/main/hrmSalary/payrollDetail")}>查看详情</a>
              <a onClick={this.handleUpdateTemplate(record)}>更新模板</a>
            </div>
          )
        }
      }
    })

    tempateColumns.map(item => {
      if(item.dataIndex == "username") {
        item.render = (text) => {
          return (
            <a onClick={() => {this.setState({editSlideVisible: true})}}>{text}</a>
          )
        }
      } else if(item.dataIndex == "cz") {
        item.render = () => {
          return (
            <div style={{display: "inline-block"}}>
              <a style={{marginRight: "10px"}}>编辑</a>
              <a style={{marginRight: "10px"}}>复制</a>
              <a style={{marginRight: "10px"}}>删除</a>
              <a >操作日志</a>
            </div>
          )
        }
      }
    })
  }

  // 更新模板
  handleUpdateTemplate(record) {
    alert(JSON.stringify(record))
    this.setState({
      selectedKey: "1",
      editSlideVisible: true,
      templateCurrentId: record.templateId

    })
  }

  // 工资单模板-新建表单变化监听
  handleBaseInfoChange(request) {
    const { payrollStore: {setTemplateBaseData}} = this.props;
    setTemplateBaseData(request);
  }

  // 新建保存
  handleSave() {
    const { payrollStore } = this.props;
    const { fetchSavePayroll } = payrollStore
    fetchSavePayroll().then(() => {
      this.setState({currentStep: 0, stepSlideVisible: false})
    })
  }

  componentWillMount() {
    const { payrollStore } = this.props;
    const { getPayrollTemplateLedgerList } = payrollStore;
    // 获取薪资账套下拉列表
    getPayrollTemplateLedgerList().then((options) => {
      this.setState({
        initSelected: true,
        ledgerOptions: options
      })
    })
  }

  // 模板搜索
  handleTemplateSearch() {
    const { templateSearchValue, templateSelect } = this.state;
    let params = {name: templateSearchValue, salarySobId: templateSelect}
    const { payrollStore: {getPayrollTemplateList}} = this.props;
    getPayrollTemplateList(params)
  }

  // 模板选择框下拉改变事件
  handleTemplateSelectChange(value) {
    this.setState({templateSelect: value})
    this.handleTemplateSearch()
  }

  // 模板列表编辑
  handleTemplateListEdit(record) {
    const { payrollStore } = this.props;
    const { getPayrollShowForm } = payrollStore
    this.recordId = record.id
    getPayrollShowForm(record.id)
    this.setState({templateCurrentId: record.id, selectedTab: 0},() => {
      this.setState({editSlideVisible: true})
    })
  }

  // 模板列表复制
  handleTemplateListCopy(record) {
    this.setState({
      templateCurrentId: record.id
    }, () => {
      this.setState({
        copyModalVisible: true
      })
    })
  }

  // 复制模板保存事件监听
  handleCopyModalSave(value) {
    const { payrollStore } = this.props;
    const { duplicatePayroll } = payrollStore
    duplicatePayroll(this.state.templateCurrentId, value).then(() => {
      this.setState({
        copyModalVisible: false
      })
    })
  }

  //  模板列表删除
  handleTemplateListDelete(record) {
    const { payrollStore: { deletePayroll }} = this.props;
    Modal.confirm({
      title: '信息确认',
      content: '确认删除',
      onOk:() => {
        deletePayroll([record.id])
      },
      onCancel: () => {

      },
    });
  }



  handleRangePickerChange(value) {
    let range = value.map(item => moment(item).format("YYYY-MM"))
    const { payrollStore: { getPayrollList } } = this.props;
    getPayrollList({salaryYearMonth: range})
  }

  // 预览
  handlePreview() { 
    const { payrollStore : {templateBaseData, salaryTemplateShowSet, salaryItemSet}} = this.props;
    window.localStorage.setItem("templateBaseData", JSON.stringify(templateBaseData))
    window.localStorage.setItem("salaryTemplateShowSet", JSON.stringify(salaryTemplateShowSet))
    window.localStorage.setItem("salaryItemSet", JSON.stringify(salaryItemSet))
    window.open("/spa/hrmSalary/static/index.html#/main/hrmSalary/templatePreview")
  }
  
  // 更新保存
  handleUpdateSave() {
    const { payrollStore}  = this.props;
    const { fetchUpdatePayroll } = payrollStore;
    fetchUpdatePayroll(this.recordId).then(() => {
      this.setState({
        editSlideVisi1le: false,
        selectedTab: 0 
      })
    })
  }

  render() {
    const { payrollStore } = this.props;
    const { loading, hasRight, form, condition, tableStore, showSearchAd, getTableDatas, doSearch, setShowSearchAd } = payrollStore;
    const { currentStep, selectedTab, templateSearchValue, templateSelect } = 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 =  [{
      title: "工资单发放",
      viewcondition: "0"
    },
    {
        title: "工资单模板设置",
        viewcondition: "1"
    }];

    const renderRightOperation = () => {
      if(this.state.selectedKey == "0") {
        return <div style={{display: "inline-block"}}>
          <WeaHelpfulTip
            width={200}
            title="提示：无工资单模板无法发放工资单，请先设置一个默认使用的工资单模板"
            placement="topLeft"
          />
          <div style={{display: "inline-block", marginLeft: "10px"}}>
            <RangePicker picker="month" format="yyyy-MM" 
              onChange={(value) => this.handleRangePickerChange(value)}
            />
          </div>
        </div>
      } else if(this.state.selectedKey == "1") {
        return (
          <div style={{display: "inline-block"}}>
            <Button type="primary" onClick={() => {this.setState({stepSlideVisible: true})}}>新建</Button>
            {
              this.state.initSelected && <WeaSelect options={this.state.ledgerOptions} style={{width: "200px", marginLeft: "10px", marginRight: "10px"}} value={templateSelect} onChange={(value) => {this.handleTemplateSelectChange(value)}}/>
            }
            
            <WeaInputSearch style={{marginleft: "10px"}} placeholder="请输入工资单名称" value={templateSearchValue} onChange={(value) => {this.setState({templateSearchValue: value})}} onSearch={(value) => {this.handleTemplateSearch(value)}}/>
          </div>
        )
      }
    }
    
    const steps = [
      "基础设置",
      "显示设置"
    ]

    const validateStep1 = () => {
      const { payrollStore: {templateBaseData}} = this.props;
      if(!notNull(templateBaseData.name)) {
        message.warning("工资单模板名称不能为空")
        return false
      }

      if(!notNull(templateBaseData.salarySob)) {
        message.warning("薪资账套不能为空")
        return false;
      }
      return true;
    }
    const nextStep = () => { 
      if(!validateStep1()) {
        return
      }
      this.setState({
        currentStep: this.state.currentStep + 1
      })
    }
    // 上一步
    const prevStep = () => {
      this.setState({
        currentStep: this.state.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 
                topTab={topTab}
                searchOperationItem={
                  renderRightOperation()
                }
                onChange={(v) => {
                  this.setState({selectedKey: v})
                }}
              />
              {
                this.state.selectedKey == 0 && 
                <SalarySendList />
                
                // <WeaTable columns={columns} dataSource={dataSource}/>
              }

              {
                this.state.selectedKey == 1 && 
                <TemplateSettingList onEdit={(record) => {
                  this.handleTemplateListEdit(record)
                }}
                onCopy={(record) => {
                  this.handleTemplateListCopy(record)
                }}
                onDelete={(record)=> this.handleTemplateListDelete(record)}
                />
              }
          </WeaTop>
        </WeaRightMenu>

        {
          this.state.stepSlideVisible && <StepSlide 
          visible={this.state.stepSlideVisible} 
          currentStep={currentStep}
          steps={steps}
          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" style={{marginRight: "10px"}} onClick={() => {prevStep()}}>上一步</Button>
                        <Button type="primary" onClick={() => {this.handleSave()}}>保存</Button>
                        <Button type="default" style={{marginLeft: "10px"}} onClick={() => {this.handlePreview()}}>预览</Button>
                    </div>
                }
            </div>
          }
          title="新建工资单模板"
          content={
            <div>
              {
                currentStep == 0 && <BaseInformForm onChange={(request) => {this.handleBaseInfoChange(request)}}/>
              }
              {
                currentStep == 1 && <ShowSettingForm />
              }
            </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}]}
              editable={false}
              selectedTab={selectedTab}
              customOperate={<span>
                {
                  selectedTab == 0 && <Button type="primary" onClick={() => {this.handleUpdateSave()}}>保存</Button>
                }
                {
                  selectedTab == 1 && 
                  <span>
                    <Button type="primary" onClick={() => {this.handleUpdateSave()}} style={{marginRight: '10px'}}>保存</Button>
                    <Button type="default" onClick={() => {this.handlePreview()}}>预览</Button>
                  </span>
                }
              </span>}
              subItemChange={
                (item) => {this.setState({selectedTab: item.key})}
              }
            />
          }
          content={<div>
            {
              selectedTab == 0 && <BaseInformForm id={this.state.templateCurrentId} onChange={(request) => {this.handleBaseInfoChange(request)}}/>
            }
            {
              selectedTab == 1 && <ShowSettingForm id={this.state.templateCurrentId}/>
            }
          </div>}
          onClose={() => this.setState({editSlideVisible: false})}
          showMask={true}
          closeMaskOnClick={() => this.setState({editSlideVisible: false})} />
      }
      {
        this.state.copyModalVisible && <CopyModal onSave={(value) => this.handleCopyModalSave(value)} visible={this.state.copyModalVisible} onCancel={() => {this.setState({copyModalVisible: false})}}/>
      }
      </div>
    )
  }
}