salary-management-front/pc4mobx/hrmSalary/pages/dataAcquisition/attendance/index.js

/*
 * Author: 黎永顺
 * name: 考情引用
 * Description:
 * Date: 2023/2/23
 */
import React, { Component } from "react";
import { inject, observer } from "mobx-react";
import { Button, DatePicker } from "antd";
import { WeaFormItem, WeaInputSearch, WeaLocaleProvider, WeaNewScroll, WeaReqTop } from "ecCom";
import AttendanceDataComp from "./components/attendanceDataComp";
import FieldMangComp from "./components/fieldMangComp";
import LogDialog from "../../../components/logViewModal";
import moment from "moment";
import "./index.less";

const getLabel = WeaLocaleProvider.getLabel;
const { MonthPicker } = DatePicker;

@inject("taxAgentStore")
@observer
class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      fieldName: "", selectedKey: "DATA", salaryMonth: [],
      logDialogVisible: false, filterConditions: "[]"
    };
  }

  /*
   * Author: 黎永顺
   * Description: 考勤数据删选条件
   * Params:
   * Date: 2023/2/24
   */
  getAttendanceDataScreen = () => {
    const { salaryMonth } = this.state;
    const [value1 = "", value2 = ""] = salaryMonth;
    return <WeaFormItem label="薪资所属月" labelCol={{ span: 2 }} wrapperCol={{ span: 22 }}>
      <MonthPicker
        value={value1} format="YYYY-MM"
        disabledDate={(current) => {
          return current && value2 && current.getTime() > new Date(value2).getTime();
        }}
        onChange={(val) => this.handleChangeSalaryMonth([val ? moment(val).format("YYYY-MM") : "", value2])}
      />
      <span className="to">至</span>
      <MonthPicker
        value={value2} format="YYYY-MM"
        disabledDate={(current) => {
          return current && value1 && current.getTime() < new Date(value1).getTime();
        }}
        onChange={(val) => this.handleChangeSalaryMonth([value1, val ? moment(val).format("YYYY-MM") : ""])}
      />
    </WeaFormItem>;
  };
  handleChangeSalaryMonth = (salaryMonth) => this.setState({ salaryMonth }, () => this.attendanceTableRef.getAttendanceList({ salaryYearMonth: _.compact(this.state.salaryMonth) }));
  handleAddAttendFileds = () => this.fieldMangRef.handleTriggerAttendFileds();
  handleImportAttendanceData = () => this.attendanceTableRef.handleImportAttendanceData({ visible: true, params: {} });
  handleQuoteAttendanceData = () => {
    this.attendanceTableRef.handleQuoteAttendanceData({
      visible: true, title: "引用考勤数据"
    });
  };
  onDropMenuClick = (key, targetid = "") => {
    switch (key) {
      case "log":
        this.setState({
          logDialogVisible: true,
          filterConditions: targetid ? `[{\"connectCondition\":\"AND\",\"columIndex\":\"targetid\",\"type\":\"=\",\"value\":\"${targetid}\"}]` : "[]"
        });
        break;
      default:
        break;
    }
  };

  render() {
    const { selectedKey, salaryMonth, fieldName, logDialogVisible, filterConditions } = this.state;
    const { taxAgentStore: { showOperateBtn } } = this.props;
    const topTab = [
      { title: "考勤数据", key: "DATA" },
      { title: "字段管理", key: "FIELD" }
    ];
    const buttons = selectedKey === "DATA" ? [
      <Button type="primary" onClick={this.handleQuoteAttendanceData}>引用</Button>,
      <Button type="ghost" onClick={this.handleImportAttendanceData}>导入</Button>
    ] : [
      <Button type="primary" onClick={this.handleAddAttendFileds}>新建</Button>,
      <WeaInputSearch placeholder={getLabel(511723, "请输入字段名称")}
                      value={fieldName} onChange={fieldName => this.setState({ fieldName })}
                      onSearch={() => this.fieldMangRef.getAttendanceFieldList({ fieldName, current: 1 })}/>
    ];
    return (
      <div className="attendanceRefWrapper">
        <WeaReqTop
          buttonSpace={10} icon={<i className="icon-coms-fa"/>} iconBgcolor="#F14A2D"
          tabDatas={topTab} selectedKey={selectedKey} buttons={showOperateBtn ? buttons : []}
          onChange={v => this.setState({ selectedKey: v })} title={getLabel(525196, "考勤数据")}
          showDropIcon onDropMenuClick={this.onDropMenuClick}
          dropMenuDatas={[
            {
              key: "log", icon: <i className="iconfont icon-caozuorizhi32"/>,
              content: getLabel(545781, "操作日志")
            }
          ]}
        >
          {
            selectedKey === "DATA" && this.getAttendanceDataScreen()
          }
          <div className="tableWrapper">
            <WeaNewScroll height="100%">
              {
                selectedKey === "DATA" ?
                  <AttendanceDataComp
                    ref={dom => this.attendanceTableRef = dom}
                    showOperateBtn={showOperateBtn}
                    salaryYearMonth={salaryMonth}
                    onFilterLog={(type, targetid) => this.onDropMenuClick(type, targetid)}
                  /> :
                  <FieldMangComp
                    ref={dom => this.fieldMangRef = dom}
                    showOperateBtn={showOperateBtn}
                    fieldName={fieldName}
                    onFilterLog={(type, targetid) => this.onDropMenuClick(type, targetid)}
                  />
              }
            </WeaNewScroll>
          </div>
          {/*操作日志*/}
          <LogDialog visible={logDialogVisible} logFunction={selectedKey === "DATA" ? "attendquote" : "attendfield"}
                     onCancel={() => this.setState({ logDialogVisible: false })} filterConditions={filterConditions}/>
        </WeaReqTop>
      </div>
    );
  }
}

export default Index;