salary-management-front/pc4mobx/hrmSalary/pages/custom-pages/lingyue/layout.js

/*
  *  薪酬二开项目
  * 领悦
  * @Author:    黎永顺
  * @Date:      2024/8/22
  * @Wechat:
  * @Email:     971387674@qq.com
  * @description:
*/
import React, { Component } from "react";
import { inject, observer } from "mobx-react";
import { WeaDatePicker, WeaFormItem, WeaLocaleProvider, WeaSelect, WeaTop } from "ecCom";
import { commonEnumList } from "../../../apis/ruleconfig";
import CustomSelect from "../../../components/CustomSelect";
import { Button, Dropdown, Menu } from "antd";
import "./index.less";

const getLabel = WeaLocaleProvider.getLabel;

@inject("taxAgentStore")
@observer
class Layout extends Component {
  constructor(props) {
    super(props);
    this.state = { options: [] };
  }

  componentDidMount() {
    this.getOptions();
  }

  getOptions = () => {
    commonEnumList({ enumClass: "com.engine.salary.enums.ly.LyPushStatusEnum" }).then(({ status, data }) => {
      if (status) this.setState({ options: _.map(data, o => ({ key: String(o.value), showname: o.defaultLabel })) });
    });
  };

  render() {
    const {
      title, query, onChange, listRef, isQuery, lyAuth = false, ffgsqcLabel, companyOpts, costCompanyOpts,
      taxAgentStore: { salaryManager, PageAndOptAuth }, fycdgsqcLabel, queryDateLabel
    } = this.props, { options } = this.state;
    const { lyCanGenDel } = PageAndOptAuth;
    const { salaryMonth, ffgsqc, fycdgsqc, jtStatus, ffStatus } = query;
    let buttons = [
      <Button type="primary" onClick={() => listRef.handleOperate("GENERATE")}>{getLabel(111, "生成数据")}</Button>,
      <Dropdown.Button onClick={() => listRef.handleOperate("ALLDEL")}
                       overlay={<Menu onClick={({ key }) => listRef.handleOperate(key)}>
                         <Menu.Item key="BATCHDEL">{getLabel(111, "批量删除")}</Menu.Item>
                       </Menu>} type="ghost">{getLabel(111, "")}</Dropdown.Button>
    ];
    const dropMenuDatas = [
      { key: "EXPORTALL", icon: <i className="iconfont icon-daochu"/>, content: getLabel(81272, "导出全部") }
    ];
    !lyCanGenDel && (buttons = buttons.slice(2));
    (lyAuth || salaryManager) && buttons.unshift(<Button type="primary"
                                                         onClick={() => listRef.handleOperate("GENERATEVOUCHER")}>{getLabel(111, "生成并预览凭证")}</Button>);
    return (
      <WeaTop
        title={title} icon={<i className="icon-coms-fa"/>} buttons={buttons} showDropIcon={true}
        iconBgcolor="#F14A2D" className="custom_salary_lingyue" dropMenuDatas={dropMenuDatas}
        onDropMenuClick={key => listRef.handleOperate(key)}>
        <div className="lingyue-body">
          <div className="lingyue-query">
            <WeaFormItem label={queryDateLabel} labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
              <WeaDatePicker format="YYYY-MM" value={salaryMonth}
                             onChange={value => onChange({ ...query, salaryMonth: value, isQuery: !isQuery })}/>
            </WeaFormItem>
            <WeaFormItem label={ffgsqcLabel} labelCol={{ span: 8 }} wrapperCol={{ span: 16 }} style={{ width: 358 }}>
              <CustomSelect value={ffgsqc} options={companyOpts}
                            onChange={value => onChange({ ...query, ffgsqc: value, isQuery: !isQuery })}/>
            </WeaFormItem>
            <WeaFormItem label={fycdgsqcLabel} labelCol={{ span: 8 }} wrapperCol={{ span: 16 }} style={{ width: 358 }}>
              <CustomSelect value={fycdgsqc} options={costCompanyOpts}
                            onChange={value => onChange({ ...query, fycdgsqc: value, isQuery: !isQuery })}/>
            </WeaFormItem>
            <WeaFormItem label={getLabel(111, "计提状态")} labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
              <WeaSelect options={options} value={jtStatus} multiple
                         onChange={value => onChange({ ...query, jtStatus: value, isQuery: !isQuery })}/>
            </WeaFormItem>
            <WeaFormItem label={getLabel(111, "发放状态 ")} labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
              <WeaSelect options={options} value={ffStatus} multiple
                         onChange={value => onChange({ ...query, ffStatus: value, isQuery: !isQuery })}/>
            </WeaFormItem>
          </div>
          {this.props.children}
        </div>
      </WeaTop>);
  }
}

export default Layout;