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

/*
 * Author: 黎永顺
 * name:薪资档案
 * Description:
 * Date: 2022-10-10 17:53:44
 */
import React, { Component } from "react";
import { toJS } from "mobx";
import { inject, observer } from "mobx-react";
import { tabCondition } from "./config";
import * as API from "../../apis/payrollFiles";
import {
  WeaBrowser,
  WeaFormItem,
  WeaHelpfulTip,
  WeaInput,
  WeaLocaleProvider,
  WeaPopoverHrm,
  WeaSearchGroup,
  WeaSelect,
  WeaSlideModal,
  WeaTab,
  WeaTop
} from "ecCom";
import { WeaTableNew } from "comsMobx";
import { Button, Dropdown, Menu, message, Modal, Spin } from "antd";
import ImportMenu from "./components/importMenu";
import ExportMenu from "./components/exportMenu";
import AllWithoutPay from "./components/allWithoutPay";
import BatchSuspendsPay from "./components/batchSuspendsPay";
import SlideModalTitle from "../../components/slideModalTitle";
import SalaryFileViewSlide from "../salaryFile/saralyFileViewSlide";
import ChangeSalaryModal from "../salaryFile/changeSalaryModal";
import "./index.less";

const getLabel = WeaLocaleProvider.getLabel;
const WeaTableComx = WeaTableNew.WeaTable;

@inject("payrollFilesStore", "taxAgentStore", "salaryFileStore")
@observer
class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedKey: "pending",
      showSearchAd: false,
      dataSource: [],
      archiveStatusList: [],
      userStatusList: [],
      importType: [],
      selectedRowKeys: [],
      tabCount: {
        SUSPEND: 0,
        STOP: 0,
        FIXED: 0,
        PENDING: 0
      },
      loading: {
        query: false,
        add: false,
        update: false
      },
      pageInfo: {
        current: 1,
        pageSize: 10,
        total: 0
      },
      searchItemsValue: {
        username: "",
        workcode: "",
        departmentIds: "",
        positionIds: "",
        statuses: "",
        // archiveStatus: "EFFICIENT",
        taxAgentId: "",
        subcompanyIds: ""
      },
      salaryAdjustmentInfo: {},
      changeSalaryVisible: false,
      noPayDate: "",
      slideParams: {
        visible: false,
        id: ""
      },
      paysetParams: {
        payStartDate: "",
        payEndDate: ""
      },
      salaryArchiveDelete: "" //待定薪、停薪员工 是否允许删除薪资档案 0： 否， 1： 是
    };
  }

  Input = (value, key) => {
    const { username, workcode } = this.state.searchItemsValue;
    return (
      <WeaFormItem
        label={value}
        labelCol={{ span: 6 }}
        wrapperCol={{ span: 18 }}
      >
        <WeaInput value={key === "username" ? username : workcode}
                  onChange={(val) => this.setState({
                    searchItemsValue: {
                      ...this.state.searchItemsValue,
                      [key]: val
                    }
                  })}/>
      </WeaFormItem>
    );
  };
  Browser = (value, key) => {
    const { positionIds, departmentIds, subcompanyIds } = this.state.searchItemsValue;
    return (
      <WeaFormItem
        label={value}
        labelCol={{ span: 6 }}
        wrapperCol={{ span: 18 }}
      >
        <WeaBrowser
          isSingle={false}
          value={key === "departmentIds" ? departmentIds : key === "subcompanyIds" ? subcompanyIds : positionIds}
          type={key === "departmentIds" ? 57 : key === "subcompanyIds" ? 164 : 278}
          onChange={(val) => {
            this.setState({ searchItemsValue: { ...this.state.searchItemsValue, [key]: val } });
          }}/>
      </WeaFormItem>
    );
  };
  Select = (value, key) => {
    const { taxAgentStore } = this.props;
    const { statuses, archiveStatus, taxAgentId } = this.state.searchItemsValue;
    const { archiveStatusList, userStatusList } = this.state;
    const { taxAgentAdminOption } = taxAgentStore;
    return (
      <WeaFormItem
        label={value}
        labelCol={{ span: 6 }}
        wrapperCol={{ span: 18 }}
      >
        <WeaSelect
          multiple={key === "statuses"}
          value={key === "statuses" ? statuses : key === "taxAgentId" ? taxAgentId : archiveStatus}
          options={key === "statuses" ? userStatusList : key === "taxAgentId" ? [{
            key: "",
            showname: ""
          }, ...taxAgentAdminOption] : archiveStatusList}
          onChange={(val) => this.setState({ searchItemsValue: { ...this.state.searchItemsValue, [key]: val } })}/>
      </WeaFormItem>
    );
  };

  componentDidMount() {
    const { taxAgentStore } = this.props;
    const { getTaxAgentSelectListAsAdmin } = taxAgentStore;
    getTaxAgentSelectListAsAdmin();
    this.queryTabTotal();
    this.queryList("/api/bs/hrmsalary/salaryArchive/pendingList");
    const init = this.init();
    window.addEventListener("message", this.handleReceive, false);
  }

  componentWillUnmount() {
    window.removeEventListener("message", this.handleReceive, false);
  }

  handleReceive = ({ data }) => {
    const { payrollFilesStore: { tableStore }, taxAgentStore: { showOperateBtn } } = this.props;
    const columns = _.map(_.filter(toJS(tableStore.columns), (item) => item.display === "true"), (it, idx) => ({
      dataIndex: it.dataIndex,
      width: (it.dataIndex === "username" || it.dataIndex === "operate") ? 150 : it.dataIndex === "taxAgentName" ? 176 : 150,
      title: it.title, align: "left",
      fixed: (idx === 0 || idx === 1 || idx === 2) ? "left" : it.dataIndex === "operate" ? "right" : "",
      ellipsis: true
    }));
    const { type, payload: { id, params } = {} } = data;
    const { dataSource, pageInfo, selectedKey, selectedRowKeys } = this.state;
    if (type === "init") {
      this.postMessageToChild({
        columns, dataSource, showOperateBtn, selectedKey,
        showSum: false, pageInfo, selectedRowKeys
      });
    } else if (type === "turn") {
      if (id === "PAGEINFO") {
        const { pageNum: current, size: pageSize } = params;
        this.setState({ pageInfo: { ...pageInfo, current, pageSize } }, () => this.query());
      } else if (id === "EDIT") {
        const { record } = params;
        this.handleEdit(record);
      } else if (id === "MOREOPT") {
        const { id, event: e } = params;
        this.handleMenuClick(e, id);
      } else if (id === "CANCELSTOP") {
        const { id } = params;
        this.cancelStop(id);
      } else if (id === "ROWSELECTION") {
        const { selectedRowKeys } = params;
        this.setState({ selectedRowKeys });
      }
    }
  };
  postMessageToChild = (payload) => {
    const childFrameObj = document.getElementById("atdTable");
    const { dataSource, columns, showSum, pageInfo, showOperateBtn, selectedKey, selectedRowKeys } = payload;
    const { salaryArchiveDelete } = this.state;
    childFrameObj && childFrameObj.contentWindow.postMessage(JSON.stringify({
      dataSource, columns, showSum, pageInfo, showOperateBtn, selectedKey, selectedRowKeys, salaryArchiveDelete
    }), "*");
  };

  init = async () => {
    const { data: archiveStatusList } = await this.commonEnumList({ enumClass: "com.engine.salary.enums.salaryarchive.ArchiveStatusEnum" });
    const { data: userStatusList } = await this.commonEnumList({ enumClass: "com.engine.salary.enums.UserStatusEnum" });
    const { data: salaryArchiveDelete } = await this.salaryArchiveDelete();
    this.setState({
      archiveStatusList: [{
        key: "",
        showname: ""
      }, ..._.map(archiveStatusList, it => ({
        key: String(it.value),
        showname: it.defaultLabel
      }))],
      userStatusList: [..._.map(userStatusList, it => ({
        key: String(it.value),
        showname: it.defaultLabel
      }))],
      salaryArchiveDelete
    }, () =>
      this.getImportTypes());
  };

  salaryAdjustmentInfo = () => {
    API.salaryAdjustmentInfo().then(({ status, data }) => {
      if (status) {
        this.setState({ salaryAdjustmentInfo: data });
      }
    });
  };
  queryTabTotal = () => {
    API.queryTabTotal().then(({ data = {}, status }) => {
      if (status) {
        this.setState({ tabCount: { ...this.state.tabCount, ...data } });
      }
    });
  };
  queryList = (url) => {
    const { loading, pageInfo, searchItemsValue, selectedKey } = this.state;
    const { payrollFilesStore: { tableStore, queryList }, taxAgentStore: { showOperateBtn } } = this.props;
    const payload = { ...pageInfo };
    this.setState({
      loading: { ...loading, query: true }
    });
    queryList(payload, searchItemsValue, url).then(({ data, status }) => {
      this.setState({ loading: { ...loading, query: false } });
      if (status && selectedKey === _.lowerCase(data.listType)) {
        const { pageInfo: paganition } = data;
        const { list: dataSource, total, pageNum: current, pageSize } = paganition;
        this.setState({
          dataSource,
          pageInfo: {
            ...pageInfo,
            total,
            current,
            pageSize
          },
          tabCount: { ...this.state.tabCount, [tabCountKey[selectedKey]]: total }
        });
      }
    });
  };
  //一键全部设为定薪员工
  allGotoFixed = () => {
    const { pageInfo } = this.state;
    if (pageInfo.total === 0) {
      message.warning("您没有需要处理的待定薪人员！");
      return;
    }
    Modal.warning({
      title: "信息确认",
      content: `确定要将所有待定薪人员（共${pageInfo.total}条数据）设为发薪人员吗？`,
      onOk: () => {
        API.allGotoFixed({}).then(({ status, data, errormsg }) => {
          if (status) {
            const { msg } = data;
            message.info(msg || "操作成功!");
            this.queryTabTotal();
            this.query();
          } else {
            message.error(errormsg || "操作失败!");
          }
        });
      }
    });
  };
  commonEnumList = (params) => {
    return API.commonEnumList(params);
  };
  salaryArchiveDelete = () => {
    return API.salaryArchiveDelete();
  };
  getImportTypes = () => {
    API.getImportTypes().then(({ data, status }) => {
      if (status) {
        this.setState({
          importType: data
        });
      }
    });
  };
  //取消停薪
  cancelStop = (id) => {
    API.cancelStop([id]).then(({ status, errormsg }) => {
      if (status) {
        message.success("操作成功!");
        this.queryTabTotal();
        this.query();
      } else {
        message.error(errormsg || "操作失败!");
      }
    });
  };
  //待定薪删除待办
  deletePendingTodo = (params) => {
    API.deletePendingTodo(params).then(({ status, errormsg }) => {
      if (status) {
        message.success("操作成功!");
        this.setState({
          selectedRowKeys: []
        }, () => {
          this.queryTabTotal();
          this.query();
        });
      } else {
        message.error(errormsg || "操作失败!");
      }
    });
  };
  //待停薪删除待办
  deleteSuspendTodo = (params) => {
    API.deleteSuspendTodo(params).then(({ status, errormsg }) => {
      if (status) {
        message.success("操作成功!");
        this.setState({
          selectedRowKeys: []
        }, () => {
          this.query();
          this.queryTabTotal();
        });
      } else {
        message.error(errormsg || "操作失败!");
      }
    });
  };
  handleClick = ({ key }) => {
    const { selectedRowKeys } = this.state;
    if (selectedRowKeys.length === 0) {
      message.warning("请选择表格数据");
      return;
    }
    if (key === "batchDelete") {
      this.deletePendingTodo(selectedRowKeys);
    } else {
      API.gotoFixed(selectedRowKeys).then(({ status, data, errormsg }) => {
        if (status) {
          if (data.type === "success") {
            message.success("操作成功!");
            this.setState({
              selectedRowKeys: []
            }, () => {
              this.queryTabTotal();
              this.query();
            });
          } else {
            message.info(data.msg);
          }
        } else {
          message.error(errormsg || "操作失败!");
        }
      });
    }
  };
  getRightOptionBtns = () => {
    const { selectedKey, importType, selectedRowKeys, searchItemsValue, pageInfo } = this.state;
    const { taxAgentStore: { showOperateBtn } } = this.props;
    if (selectedKey === "pending" && showOperateBtn) {
      return [
        <Button type="primary" onClick={() => {
          this.importRef.handleMenuClick({ key: "PENDING" });
        }}>导入</Button>,
        <Dropdown overlay={<ExportMenu selectedKey={selectedKey} selectedRowKeys={selectedRowKeys}
                                       searchItemsValue={searchItemsValue}/>}>
          <Button type="primary">导出<i className="icon-coms-down2" style={{
            marginLeft: 8,
            verticalAlign: "middle"
          }}/></Button>
        </Dropdown>,
        <Button type="ghost" onClick={this.allGotoFixed}>全部设为发薪人员</Button>,
        <Dropdown
          overlay={
            <Menu className="dropdownMenuWrapper" onClick={this.handleClick}>
              <Menu.Item key="batchSet">批量设为发薪员工</Menu.Item>
              <Menu.Item key="batchDelete">批量删除待办</Menu.Item>
            </Menu>
          }
        >
          <Button type="primary">更多<i className="icon-coms-down2" style={{
            marginLeft: 8,
            verticalAlign: "middle"
          }}/></Button>
        </Dropdown>
      ];
    } else if (selectedKey === "fixed" && showOperateBtn) {
      return [
        <WeaHelpfulTip
          width={300}
          title={<HelpfulDiv/>}
          placement="topLeft"
        />,
        <Dropdown overlay={
          <ImportMenu
            importType={importType}
            refreshList={() => {
              this.query();
              this.setState({ selectedRowKeys: [] });
            }}/>
        }>
          <Button type="primary">导入<i className="icon-coms-down2" style={{
            marginLeft: 8,
            verticalAlign: "middle"
          }}/></Button>
        </Dropdown>,
        <Dropdown overlay={<ExportMenu selectedKey={selectedKey} selectedRowKeys={selectedRowKeys}
                                       searchItemsValue={searchItemsValue}/>}>
          <Button type="primary">导出<i className="icon-coms-down2" style={{
            marginLeft: 8,
            verticalAlign: "middle"
          }}/></Button>
        </Dropdown>
      ];
    } else if (selectedKey === "suspend" && showOperateBtn) {
      return [
        <Dropdown overlay={
          <AllWithoutPay
            pageInfo={pageInfo}
            selectedRowKeys={selectedRowKeys}
            refreshList={() => {
              this.queryTabTotal();
              this.query();
              this.setState({ selectedRowKeys: [] });
            }}
          />
        }>
          <Button type="primary" style={{ marginLeft: 8 }}>全部停薪<i className="icon-coms-down2" style={{
            marginLeft: 8,
            verticalAlign: "middle"
          }}/></Button>
        </Dropdown>,
        <Button type="ghost" onClick={() => {
          const { selectedRowKeys } = this.state;
          if (selectedRowKeys.length === 0) {
            message.warning("未选择条目");
            return;
          }
          this.deleteSuspendTodo(selectedRowKeys);
        }}>批量删除待办</Button>,
        <Button type="primary" onClick={() => {
          this.importRef.handleMenuClick({ key: "SUSPEND" });
        }}>导入</Button>,
        <Dropdown overlay={<ExportMenu selectedKey={selectedKey} selectedRowKeys={selectedRowKeys}
                                       searchItemsValue={searchItemsValue}/>}>
          <Button type="primary">导出<i className="icon-coms-down2" style={{
            marginLeft: 8,
            verticalAlign: "middle"
          }}/></Button>
        </Dropdown>
      ];
    } else if (selectedKey === "stop" && showOperateBtn) {
      return [
        <Dropdown overlay={
          <BatchSuspendsPay
            selectedRowKeys={selectedRowKeys}
            refreshList={() => {
              this.queryTabTotal();
              this.query();
              this.setState({ selectedRowKeys: [] });
            }}
          />
        }>
          <Button type="primary">批量取消停薪<i className="icon-coms-down2" style={{
            marginLeft: 8,
            verticalAlign: "middle"
          }}/></Button>
        </Dropdown>,
        <Dropdown overlay={<ExportMenu selectedKey={selectedKey} selectedRowKeys={selectedRowKeys}
                                       searchItemsValue={searchItemsValue}/>}>
          <Button type="primary">导出<i className="icon-coms-down2" style={{
            marginLeft: 8,
            verticalAlign: "middle"
          }}/></Button>
        </Dropdown>
      ];
    } else if (selectedKey === "ext" && showOperateBtn) {
      return [
        <WeaHelpfulTip
          width={300}
          title={<HelpfulDiv/>}
          placement="topLeft"
        />,
        <Dropdown overlay={
          <ImportMenu
            isExtEmp importType={importType}
            refreshList={() => {
              this.query();
              this.setState({ selectedRowKeys: [] });
            }}/>
        }>
          <Button type="primary">导入<i className="icon-coms-down2" style={{
            marginLeft: 8,
            verticalAlign: "middle"
          }}/></Button>
        </Dropdown>
      ];
    }
    return [];
  };
  getColumns = () => {
    const { payrollFilesStore: { tableStore }, taxAgentStore: { showOperateBtn } } = this.props;
    const columns = _.map(_.filter(toJS(tableStore.columns), (item) => item.display === "true"), (it, idx) => ({
      dataIndex: it.dataIndex,
      width: (it.dataIndex === "username" || it.dataIndex === "operate") ? 150 : it.dataIndex === "taxAgentName" ? 176 : 150,
      title: it.title, align: "left",
      fixed: (idx === 0 || idx === 1 || idx === 2) ? "left" : it.dataIndex === "operate" ? "right" : "",
      ellipsis: true
    }));
    this.postMessageToChild({
      columns, showOperateBtn, selectedKey: this.state.selectedKey,
      dataSource: this.state.dataSource, selectedRowKeys: this.state.selectedRowKeys,
      showSum: false, pageInfo: this.state.pageInfo
    });
  };
  handleEdit = (record) => {
    const { selectedKey } = this.state;
    this.setState({
      slideParams: {
        ...this.state.slideParams,
        visible: true,
        id: record.id
      }
    }, () => selectedKey === "fixed" && this.salaryAdjustmentInfo());
  };
  //列表操作
  handleMenuClick = (e, id) => {
    const { key } = e;
    if (key === "payroll") {
      //设为定薪员工
      API.gotoFixed([id]).then(({ status, errormsg }) => {
        if (status) {
          message.success("操作成功!");
          this.query();
        } else {
          message.error(errormsg || "操作失败!");
        }
      });
    } else if (key === "stopSalary") {
      //停薪
      API.gotoStop([id]).then(({ status, errormsg }) => {
        if (status) {
          message.success("操作成功!");
          this.query();
        } else {
          message.error(errormsg || "操作失败!");
        }
      });
    } else if (key === "deletePendingTodo") {
      this.deletePendingTodo([id]);
    } else if (key === "deleteSuspendTodo") {
      this.deleteSuspendTodo([id]);
    } else if (key === "view") {
      this.handleEdit(id);
    } else if (key === "deleteAchives") {
      Modal.confirm({
        title: getLabel(131329, "信息确认"),
        content: getLabel(388758, "确认要删除吗?"),
        onOk: () => {
          API.deleteSalaryArchive([id]).then(({ status, errormsg }) => {
            if (status) {
              message.success(getLabel(30700, "操作成功"));
              this.query();
            } else {
              message.error(errormsg || getLabel(30651, "操作失败"));
            }
          });
        }
      });
    }
  };
  // 查看 Slide 头部操作按钮
  renderEditSlideOperate = () => {
    const { taxAgentStore: { showOperateBtn } } = this.props;
    const { slideParams: { id }, salaryAdjustmentInfo, selectedKey } = this.state;
    const { isShow, url } = salaryAdjustmentInfo;
    let arrList = [];
    if (showOperateBtn && isShow === "true" && selectedKey === "fixed") {
      arrList.push(<Button type="primary" onClick={() => {
        const linkUrl = url.indexOf("http") !== -1 ? url : `${window.location.origin}${url}`;
        window.open(`${linkUrl}&salaryArchiveId=${id}`);
      }}>发起调薪</Button>);
    }
    if (showOperateBtn && (selectedKey === "fixed" || selectedKey === "ext")) {
      arrList.push(<Button type="primary" onClick={() => {
        this.setState({ changeSalaryVisible: true });
      }}>调薪</Button>);
    }
    selectedKey !== "stop" && arrList.push(<Button type="primary" onClick={this.handleSave}>保存</Button>);
    return arrList;
  };
  //切换tab
  handleChangeTab = (selectedKey) => {
    const { slideParams, pageInfo } = this.state;
    this.setState({
      selectedRowKeys: [],
      slideParams: { ...slideParams, visible: false, id: "" },
      selectedKey,
      pageInfo: {
        ...pageInfo,
        current: 1,
        pageSize: 10
      }
    }, () => {
      if (!this.handleChangeDebounce) {
        this.handleChangeDebounce = _.debounce(() => {
          this.query();
        }, 500);
      }
      this.handleChangeDebounce();
    });
  };
  //编辑保存
  handleSave = () => {
    const { paysetParams, selectedKey } = this.state;
    const { salaryFileStore: { adjustSalaryItems, detailForm } } = this.props;
    if ((selectedKey === "pending" && _.isEmpty(paysetParams.payStartDate)) || (selectedKey === "suspend" && _.isEmpty(paysetParams.payEndDate))) {
      Modal.warning({
        title: "信息确认",
        content: "必要信息不完整，红色*为必填项！"
      });
      return;
    }
    const payload = {
      ...paysetParams,
      salaryArchiveId: detailForm.id,
      salaryArchiveItems: _.map(toJS(adjustSalaryItems), it => ({
        salaryItemId: it.id,
        adjustValue: String(it.value || "")
      })),
      status: selectedKey === "ext" ? "FIXED" : _.upperCase(selectedKey)
    };
    API.savePaySet(payload).then(({ status, errormsg }) => {
      if (status) {
        message.success("操作成功!");
        this.query();
      } else {
        message.error(errormsg || "保存失败!");
      }
    });
  };
  //发薪设置
  handleSetpay = (params) => {
    const { type, date } = params;
    const { paysetParams } = this.state;
    if (type === "起始发薪日期") {
      this.setState({ paysetParams: { ...paysetParams, payStartDate: date } });
    } else if (type === "最后发薪日期") {
      this.setState({ paysetParams: { ...paysetParams, payEndDate: date } });
    }
  };
  query = () => {
    const { selectedKey } = this.state;
    switch (selectedKey) {
      case "pending":
        this.queryList("/api/bs/hrmsalary/salaryArchive/pendingList");
        break;
      case "fixed":
        this.queryList("/api/bs/hrmsalary/salaryArchive/fixedList");
        break;
      case "suspend":
        this.queryList("/api/bs/hrmsalary/salaryArchive/suspendList");
        break;
      case "stop":
        this.queryList("/api/bs/hrmsalary/salaryArchive/stopList");
        break;
      default:
        this.queryList("/api/bs/hrmsalary/salaryArchive/extList");
        break;
    }
  };

  render() {
    const {
      tabCount,
      selectedKey,
      loading,
      pageInfo,
      showSearchAd,
      slideParams,
      changeSalaryVisible,
      paysetParams
    } = this.state;
    const { payrollFilesStore: { tableStore } } = this.props;
    const renderSearch = () => {
      const searchItems = [
        { com: this.Input("姓名", "username") },
        { com: this.Browser("分部", "subcompanyIds") },
        { com: this.Browser("部门", "departmentIds") },
        { com: this.Browser("岗位", "positionIds") },
        { com: this.Select("人员状态", "statuses") },
        // { com: this.Select("档案状态", "archiveStatus") },
        { com: this.Select("个税扣缴义务人", "taxAgentId") },
        { com: this.Input("工号", "workcode") }
      ];
      return <WeaSearchGroup title={"基本信息"} items={searchItems} showGroup/>;
    };
    const adBtn = [
      // 高级搜索内部按钮
      <Button type="primary" onClick={() => {
        this.setState({
          showSearchAd: false,
          pageInfo: {
            ...pageInfo,
            current: 1,
            pageSize: 10
          }
        }, () => this.query());
      }}> 搜索 </Button>,
      <Button type="ghost" onClick={() => this.setState({
        searchItemsValue: {
          username: "",
          workcode: "",
          departmentIds: "",
          positionIds: "",
          statuses: "",
          archiveStatus: ""
        }
      })}> 重置 </Button>,
      <Button type="ghost" onClick={() => this.setState({ showSearchAd: false })}> 取消 </Button>
    ];
    const rightMenu = [
      {
        key: "BTN_COLUMN",
        icon: <i className="icon-coms-Custom"/>,
        content: "显示列定制",
        onClick: () => {
          tableStore.setColSetVisible(true);
          tableStore.tableColSet(true);
        }
      }
    ];
    return (
      <div className="payrollFilesWrapper">
        <WeaTop
          title="薪资档案" icon={<i className="icon-coms-fa"/>}
          iconBgcolor="#F14A2D" showDropIcon={true}
          dropMenuDatas={rightMenu}
        >
          <WeaTab
            datas={tabCondition}
            counts={tabCount}
            className="payrollFilesTab"
            keyParam="viewcondition" //主键
            countParam="groupid" //数量
            leftStyle={{ paddingRight: $(".payrollFilesTab-right").width() }}
            selectedKey={selectedKey}
            onChange={this.handleChangeTab}
            buttons={this.getRightOptionBtns()}
            searchType={["base", "advanced"]} // base：基础搜索框 advanced：显示高级搜索按钮
            showSearchAd={showSearchAd} // 是否展开高级搜索面板
            setShowSearchAd={(bool) => this.setState({ showSearchAd: bool })} //高级搜索面板受控
            searchsAd={renderSearch()} // 高级搜索内部数据g1etSearchs(form, toJS(condition), 2)
            buttonsAd={adBtn} // 高级搜索内部按钮
            onSearch={() => {
              this.setState({
                pageInfo: {
                  ...pageInfo,
                  current: 1,
                  pageSize: 10
                }
              }, () => {
                this.query();
              });
            }} // 点搜索按钮时的回调this.handleSearch()
            searchsBasePlaceHolder={"请输入姓名"}
            onSearchChange={(v) => this.setState({
              searchItemsValue: {
                ...this.state.searchItemsValue,
                username: v
              }
            })} // 在搜索框中输入的文字改变时的回调: 这里需要同步高级搜索和外部搜索框的值form.updateFields({ username: v })
            searchsBaseValue={this.state.searchItemsValue.username}
          />
          <div className="tableWrapper">
            <Spin spinning={loading.query}>
              <iframe
                style={{ border: 0, width: "100%", height: "100%" }}
                // src="http://localhost:7607/#/payrollFilesTable"
                src="/spa/hrmSalary/hrmSalaryCalculateDetail/index.html#/payrollFilesTable"
                id="atdTable"
              />
            </Spin>
            {/*人员卡片*/}
            <WeaPopoverHrm/>
            <WeaTableComx
              style={{ display: "none" }}
              comsWeaTableStore={tableStore}
              needScroll={true}
              columns={this.getColumns()}
            />
          </div>
        </WeaTop>
        <div style={{ display: "none" }}>
          <ImportMenu
            ref={(dom) => this.importRef = dom}
            refreshList={() => {
              this.query();
              this.setState({ selectedRowKeys: [] });
            }}/>
        </div>
        {slideParams.visible && (
          <WeaSlideModal
            className="slideOuterWrapper"
            visible={slideParams.visible}
            top={0}
            measureT="%"
            width={980}
            measureX="px"
            height={100}
            measureY="%"
            direction="right"
            title={
              <SlideModalTitle
                subtitle="员工薪资档案"
                editable={false}
                customOperate={this.renderEditSlideOperate()}
              />
            }
            content={
              <SalaryFileViewSlide
                id={slideParams.id}
                selectedKey={selectedKey}
                handleSetpay={this.handleSetpay}
                paysetParams={paysetParams}
                onChangePaySetParams={(res) => {
                  this.setState({
                    paysetParams: {
                      ...paysetParams,
                      ...res
                    }
                  });
                }}
              />
            }
            onClose={() => {
              this.setState({
                paysetParams: { payStartDate: "", payEndDate: "" },
                slideParams: { ...slideParams, visible: false, id: "" }
              });
            }}
          />
        )}
        {changeSalaryVisible && (
          <ChangeSalaryModal
            currentId={slideParams.id}
            visible={changeSalaryVisible}
            onCancel={() => {
              this.setState({ changeSalaryVisible: false });
            }}
          />
        )}
      </div>
    );
  }
}

export default Index;

const HelpfulDiv = () => {
  return <div className="helpWrapper">
    <span>导入按钮使用场景说明：</span>
    <span>1.档案初始化：</span>
    <span className="pl10">
      <span>a.初次使用薪酬模块，全量导入员工的薪资档案数据；</span>
      <span>b.员工入职，导入新入职的员工的薪资档案数据（若导入表格中的人员已存在在薪资档案中，初始化导入会将档案中该人员的数据清除再导入）；</span>
      <span>c.返聘人员使用调薪功能调整薪资档案值或使用调整个税扣缴；</span>
    </span>
    <span>2.调薪：档案中已存在的人员批量调整薪资项目值（包括返聘人员的情况）；</span>
    <span>3.调整个税扣缴义务人：档案中已存在的人员批量调整个税扣缴义务人（包括返聘人员的情况）；</span>
  </div>;
};

export const tabCountKey = {
  suspend: "SUSPEND",
  stop: "STOP",
  fixed: "FIXED",
  pending: "PENDING"
};