salary-management-front/pc4mobx/hrmSalary/pages/socialSecurityBenefits/programme/index.js

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

import { Button, Table, DatePicker, Row, Col, Switch, Modal, Dropdown, Menu } from 'antd';

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

import { WeaTableNew } from "comsMobx"
import CustomTable from '../../../components/customTable'
import "./index.less";
const WeaMobxTable = WeaTableNew.WeaTable;

import { renderNoright, getSearchs } from '../../../util'; // 渲染form数据的方法：因为多个页面都会使用，所以抽的公共方法在util中
import CustomTab from '../../../components/customTab';
import ContentWrapper from '../../../components/contentWrapper';
import SlideModalTitle from '../../../components/slideModalTitle';
import TipLabel from '../../../components/TipLabel'
import DefaultSlideForm from './defaultSlideForm'
import CustomNewModal from './customNewModal'
import { welfareTypeEnum, paymentScopeEnum } from './enum';
import CustomPaginationTable from '../../../components/customPaginationTable'


import {
  socialSecurityColumns,
  accumulationFundColumns,
  otherBenefitsColumns,
  CustomBenefitsColumns, dataSource
} from './columns';

const { MonthPicker } = DatePicker;

import TwoColContent  from '../../../components/twoColContent';
import CopySchemaModal from './copySchemaModal';

@inject('programmeStore')
@observer
export default class Programme extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: "",
      searchValue: "",
      slideVisiable: false,
      currentOperate: "add",
      copyModalValue: "",
      copyId: "",
      customNewVisible: false,
      customEdit: false
    }

    this.pageInfo = {current: 1, pageSize: 10}
  }

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

  // 增加编辑功能，重写columns绑定事件
  getColumns = (columns) => {
    let newColumns = columns.filter(item => item.dataIndex !== "id" && item.dataIndex !== "paymentArea")
    
    newColumns = newColumns.map(column => {
      let newColumn = column;
      newColumn.render = (text, record, index) => { //前端元素转义
        let valueSpan = record[newColumn.dataIndex + "span"] !== undefined ? record[newColumn.dataIndex + "span"] : record[newColumn.dataIndex];
        if(newColumn.dataIndex == "id") {
          newColumn.display = false
        }
        switch(newColumn.dataIndex) {
          case "operate":
            return <a onClick={() => {this.onEdit(record)}}>编辑</a>
          default:
            return <div dangerouslySetInnerHTML={{ __html: valueSpan }} />
        }
      }
      return newColumn;
    });

    newColumns.push({
      title: "操作",
      dataIndex: "operate",
      render: (text, record) => {
        return <a onClick={() => {this.onEdit(record)}}>编辑</a>
      }
    })
    newColumns.push(
      {
        title : '',
        key: "moreOperate",
        dataIndex: "moreOperate",
        render: (text, record) => {
            return (
                <Dropdown overlay={<Menu>
                    <Menu.Item>
                      <a onClick={() => {
                          this.onCopy(record);
                      }}>复制</a>
                    </Menu.Item>
                  </Menu>}>
                    <i className="icon-coms-more"></i>
                </Dropdown>
                
            );
        }
    })
    return newColumns;
  }

  handleCategoryStatusChange(record, value) {
    const {programmeStore: { updateCustomCategoryStatus }} = this.props;
    Modal.confirm({
      title: '信息确认',
      content: `确认要${value ? '启用' : '停用'}吗`,
      onOk:() => {
        updateCustomCategoryStatus(record.id, value)
      },
      onCancel: () => {

      },
    });
  }

  getCustomColumns = (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 "operate":
            return <a onClick={() => {this.onCustomEdit(record)}}>编辑</a>
          case "is_use":
            return <Switch checked={text == 1} onChange={(value) => {this.handleCategoryStatusChange(record, value)}}/>
          default:
            return <div dangerouslySetInnerHTML={{ __html: valueSpan }} />
        }
      }
      return newColumn;
    });
    return newColumns;
  }

  onEdit(record) {
    let id = record.id;
    const { programmeStore } = this.props
    const { getForm, selectedKey } = programmeStore
    getForm({
      welfareTypeEnum: selectedKey,
      id
    })
    this.setState({slideVisiable: true, currentOperate: "update"})
  }

  onCopy(record) {
    this.setState({
      copyId: record.id,
      copyModalVisible: true
    })
  }

  onCustomOperatesClick(record, index, operate, flag) {
    switch(operate.text.toString()){
      case '编辑': // 编辑
        this.onCustomEdit(record);
        break;
    }
  }

  onCustomEdit(record) { 
    const { programmeStore: {getCustomForm, setCustomNewVisible, setCustomRequest}} = this.props;
    getCustomForm()
    setCustomNewVisible(true)
    this.setState({
      customEdit: true
    })
    setCustomRequest({
      insuranceName: record['insurance_name'],
      id: record.id,
      isUse: record.is_use,
      paymentScope: record.payment_scope.split(",").map(item => paymentScopeEnum[item]),
      welfareType: welfareTypeEnum[record.welfare_type]
    })
  }

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

  render() {
    const { programmeStore } = this.props;
    const { loading, hasRight, form, condition, tableStore, showSearchAd, getTableDatas, doSearch, setShowSearchAd } = programmeStore;
    const { selectedKey, setSelectedKey, getCustomCategoryList, customTableStore, 
      customSelectkey, setCustomSelectkey, requestParams, setRequestParams, formCondition, 
      setCustomNewVisible, customNewVisible, tableDataSource, tableColumns, tablePageInfo  } = programmeStore;
    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: "SOCIAL_SECURITY"
      },
      {
        title: "公积金",
        viewcondition: "ACCUMULATION_FUND"
      },
      {
        title: "企业年金及其他福利",
        viewcondition: "OTHER"
      },
      {
        title: "自定义福利",
        viewcondition: "custom"
      }
    ];

    const options  = [
      {
        showname: "全部",
        key: ""
      },
      {
        showname: "社保",
        key: "SOCIAL_SECURITY"  
      },
      {
        showname: "公积金",
        key: "ACCUMULATION_FUND"  
      },
      {
        showname: "企业年金及其他福利",
        key: "OTHER"
      }
    ]

    const handleNewClick = () => {
      const { programmeStore: {initSlideParms, getForm, selectedKey}} = this.props;
      initSlideParms();
      this.setState({ slideVisiable: true, currentOperate: "add" })
      getForm({welfareTypeEnum: selectedKey})
    }

    const handleCustomNewClick = () => {
      const { programmeStore : { getCustomForm, getCumCustomForm, setCustomNewVisible, setCustomRequest }} = this.props;
      getCustomForm()
      setCustomRequest({})
      setCustomNewVisible(true)
      this.setState({customEdit: false})

    }

    // const renderSearchOperationItem = () => {
    //   const { programmeStore: {setCustomSelectkey, getCustomCategoryList}} = this.props;
    //   return 
    // }

    const handleOnSave = () => {
      const { programmeStore } = this.props
      const { currentOperate } = this.state
      const { selectedKey, defaultPersonDataSource, defaultCompanyDataSource, createScheme, requestParams, updateScheme } = programmeStore
      let { schemeName, remarks, paymentArea, paymentType } = requestParams
      let request = {
        insuranceScheme: {
          paymentType,
          welfareType: selectedKey,
          schemeName,
          remarks,
          paymentArea
        },
        insuranceSchemeDetailList: [...defaultPersonDataSource, ...defaultCompanyDataSource]
      }
      
      if(currentOperate == "add") {
        createScheme(request)
      } else if(currentOperate == "update"){
        request.insuranceScheme.id = requestParams.id
        updateScheme(request)
      }
      this.setState({slideVisiable: false})
    }

    const renderCustomRightContent = () => {
      let tipList = [
        "1、可以为社保、公积金、企业年金及其他福利新增自定义的福利项，如：残疾保险等",
        "2、新增自定义福利默认启用，社保福利方案中的自定义福利项均未开启缴纳，当前页面的自定义福利项才可以停用；停用后再新增方案时没有该福利项",
        "3、自定义福利若要缴纳，需要在方案里填写缴纳相关数据"
      ]
      return (<TipLabel tipList={tipList} />)
    }

    const handleCopyModalSave = () => {
      const { programmeStore: {copyScheme}} = this.props;
      const { copyId, copyModalValue } = this.state;
      copyScheme({id:copyId, schemeName: copyModalValue})
      this.setState({copyModalVisible : false})
    }

    const handleSlideClose = () => {
      this.setState({ slideVisiable: false })
      const { programmeStore: {initSlideParms} } = this.props;
      initSlideParms()
    }

    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={
                <div>
                  <Button type="primary" style={{ marginRight: '10px' }} onClick={() => { 
                    if(selectedKey == "custom") {
                      handleCustomNewClick()
                    } else {
                      handleNewClick()
                    }
                    
                  }}>新建</Button>
                
                  {
                    selectedKey == "custom" &&  <WeaSelect
                      options={options}
                      value={customSelectkey}
                      style={{width: "150px"}}
                      onChange={(v) => {
                        setCustomSelectkey(v)
                        getCustomCategoryList(v)
                        console.log("v:", v)
                      }}
                    />
                  }
                </div>
              }
              onChange={(v) => {
                setSelectedKey(v)
                if(v == "custom") { // 自定义福利
                  getCustomCategoryList()
                } else {
                  getTableDatas(v)
                }
              }}
            />
            {
              selectedKey == "custom" ? 
              <TwoColContent 
                leftContent={
                  <WeaMobxTable // table内部做了loading加载处理，页面就不需要再加了
                    comsWeaTableStore={tableStore} // table store
                    hasOrder={true} // 是否启用排序
                    needScroll={true} // 是否启用table内部列表滚动，将自适应到父级高度
                    getColumns={this.getCustomColumns}
                    onOperatesClick={this.onCustomOperatesClick.bind(this)}
                  />
                }
                rightContent={
                  renderCustomRightContent()
                }
              /> :
              

              <CustomPaginationTable
                loading={loading}
                columns={this.getColumns(tableColumns)}
                dataSource={tableDataSource}
                total={tablePageInfo.total}
                current={tablePageInfo.pageNum}
                onPageChange={(value) => {
                  this.handlePageChange(value)
                }}
                onShowSizeChange={(current,pageSize) => {
                  this.pageInfo = {current, pageSize}
                  const { programmeStore: {form, getTableDatas, selectedKey} } = this.props;
                  getTableDatas(selectedKey, this.pageInfo)
                }}
              />
              
            }
          </WeaTop>
        </WeaRightMenu>
        {
          this.state.slideVisiable && <WeaSlideModal visible={this.state.slideVisiable}
          top={0}
          width={40}
          height={100}
          direction={'right'}
          measure={'%'}
          title={
            <SlideModalTitle 
              subtitle={this.state.customEdit ? "修改社保方案": "新增社保方案"}
              subTabs={[{title: "基础设置"}]}
              onSave={() => {
                handleOnSave();
              }}
            />
          }
          content={(<DefaultSlideForm requestParams={requestParams} onChange={(requestParams) => {
            console.log("requestParams:", requestParams);
            setRequestParams(requestParams)
          }}/>)}
          onClose={() => {handleSlideClose()}}
          showMask={true}
          closeMaskOnClick={() => {handleSlideClose()}}
          onAnimationEnd={() => console.log('onAnimationEnd')} />
        }

          {
            this.state.copyModalVisible && <CopySchemaModal 
              visible={this.state.copyModalVisible}
              value={this.state.copyModalValue}
              onChange={(value) => this.setState({copyModalValue: value})}
              onCancel={() => {this.setState({copyModalVisible: false})}}
              footer={<Button type="primary" onClick={() => {handleCopyModalSave()}}>保存</Button>
            }
            />
          }

          {
            customNewVisible && <CustomNewModal 
              visible={customNewVisible}
              condition={formCondition}
              form={form}
              edit={this.state.customEdit}
              onCancel={() => {setCustomNewVisible(false)}}
            />
          }
      </div>
    )
  }
}