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

import React from "react";
import { inject, observer } from "mobx-react";
import { Button, Dropdown, Menu, message, Modal, Switch } from "antd";
import { WeaInputSearch, WeaLocaleProvider, WeaNewScroll, WeaSlideModal, WeaTop } from "ecCom";
import { renderLoading } from "../../util";
import CustomTab from "../../components/customTab";
import SystemSalaryItemModal from "./systemSalaryItemModal";
import { columns } from "./columns";
import SlideModalTitle from "../../components/slideModalTitle";
import CustomSalaryItemSlide from "./customSalaryItemSlide";
import CustomPaginationTable from "../../components/customPaginationTable";
import SyncToSalaryAccountSetDialog from "./syncToSalaryAccountSetDialog";
import "../socialSecurityBenefits/programme/index.less";

const { getLabel } = WeaLocaleProvider;
@inject("salaryItemStore", "taxAgentStore", "salaryFileStore")
@observer
export default class SalaryItem extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: "",
      selectedKey: "0",
      editable: false,
      isAdd: false,
      searchValue: "",
      formalModalVisible: false,
      searchParams: { current: 1, pageSize: 10, total: 0 },
      selectedRowKeys: [],
      syncSalarySetDialog: { visible: false, title: "", id: "" }
    };
    columns.map(item => {
      if (item.dataIndex == "refere") {
        item.render = () => {
          return (
            <Switch/>
          );
        };
      } else if (item.dataIndex == "cz") {
        item.render = () => {
          return (<div>
            <a style={{ marginRight: "10px" }}>编辑</a>
            <a style={{ marginRight: "10px" }}>删除</a>
            {/* <a>操作日志</a> */}
          </div>);
        };

      }
    });
    this.record = {};
  }


  componentWillMount() { // 初始化渲染页面
    const { salaryItemStore: { getTableDatas }, salaryFileStore, taxAgentStore } = this.props;
    const { commonEnumList } = salaryFileStore;
    const { fetchTaxAgentOption } = taxAgentStore;
    fetchTaxAgentOption();
    commonEnumList("user", { enumClass: "com.engine.salary.enums.sicategory.SharedTypeEnum" });
    getTableDatas({}).then(res => {
      this.setState({
        searchParams: {
          ...this.state.searchParams,
          current: res.pageNum,
          total: res.total
        }
      });
    });
  }

  onEditItem = (record, isedit) => {
    this.record = record;
    const { salaryItemStore: { getItemForm, setEditSlideVisible } } = this.props;
    this.setState({
      editable: isedit, isAdd: false,
      syncSalarySetDialog: { ...this.state.syncSalarySetDialog, id: record.id }
    });
    getItemForm(record.id).then(() => {
      setEditSlideVisible(true);
    }).catch(({ errormsg }) => {
      message.error(errormsg || "");
    });
  };

  // 删除列表项
  handleDeleteItem(record) {
    const { salaryItemStore: { deleteItemRequest, getTableDatas } } = this.props;
    Modal.confirm({
      title: "信息确认",
      content: "确认删除该条数据吗？",
      onOk: () => {
        deleteItemRequest([record.id]).then(() => {
          getTableDatas({ ...this.state.searchParams }).then(res => {
            this.setState({
              searchParams: {
                ...this.state.searchParams,
                total: res.total
              }
            });
          });
        });
      },
      onCancel: () => {
      }
    });
  }

  getColumns = () => {
    const { salaryItemStore, taxAgentStore: { showSalaryItemBtn, showOperateBtn } } = this.props;
    const { tableColumns } = salaryItemStore;
    let columns = tableColumns.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 "name":
            return <a onClick={() => {
              this.onEditItem(record, false);
            }}>{text}</a>;
          case "useDefault":
          case "hideDefault":
          case "useInEmployeeSalary":
            return <Switch checked={text === 1} disabled/>;
          default:
            return <div dangerouslySetInnerHTML={{ __html: valueSpan }}/>;
        }
      };
      return newColumn;
    });
    columns.push({
      key: "operate",
      title: "操作",
      width: 120,
      render: (text, record) => {
        return (
          <React.Fragment>
            <a
              onClick={() => this.onEditItem(record, true)}>{(showSalaryItemBtn || showOperateBtn) ? "编辑" : "查看"}</a>
            {
              (record.canDelete && (showSalaryItemBtn || showOperateBtn)) &&
              <a href="javascript:void(0)" style={{ marginLeft: 10 }}
                 onClick={() => this.handleDeleteItem(record)}
              >{getLabel(535052, "删除")}</a>
            }
          </React.Fragment>
        );
      }
    });
    return [
      // {
      //   title: "序号",
      //   dataIndex: "index",
      //   align: "left",
      //   width: 60,
      //   render: (text, record, index) => {
      //     const { current, pageSize } = this.state.searchParams;
      //     return (current - 1) * pageSize + index + 1;
      //   }
      // },
      ...columns];
  };

  handleSearch(value) {
    const { salaryItemStore: { getTableDatas } } = this.props;
    getTableDatas({ ...this.state.searchParams, current: 1, name: value }).then(res => {
      this.setState({
        searchParams: {
          ...this.state.searchParams,
          current: 1,
          total: res.total
        }
      });
    });
  }

  handlePageChange(value) {
    const { salaryItemStore: { getTableDatas } } = this.props;
    getTableDatas({ ...this.state.searchParams, name: this.state.searchValue, current: value }).then(res => {
      this.setState({
        searchParams: {
          ...this.state.searchParams,
          current: value,
          total: res.total
        }
      });
    });
  }

  handleShowSizeChange(searchParams) {
    const { salaryItemStore: { getTableDatas } } = this.props;
    getTableDatas({ ...searchParams });
  }

  render() {
    const {
      salaryItemStore,
      salaryFileStore,
      taxAgentStore: { showOperateBtn, showSalaryItemBtn, taxAgentOption }
    } = this.props;
    const { userStatusList } = salaryFileStore;
    const { selectedRowKeys } = this.state;
    const { loading, deleteItemRequest, getTableDatas } = salaryItemStore;
    const {
      tableDataSource,
      tableColumns,
      systemItemVisible,
      setSystemItemVisible,
      editSlideVisible,
      setEditSlideVisible,
      request
    } = salaryItemStore;
    if (this.getColumns().length === 2) { // 无权限处理
      return renderLoading();
    }

    const handleMenuClick = (e) => {
      const { salaryItemStore: { setEditSlideVisible, initRequest } } = this.props;
      if (e.key === "1") {
        setSystemItemVisible(true);
      } else if (e.key === "2") {
        this.setState({ editable: true, isAdd: true });
        initRequest();
        setEditSlideVisible(true);
      }
    };

    const menu = (
      <Menu onClick={handleMenuClick}>
        <Menu.Item key="2">{getLabel(111, "新增自定义薪资项")}</Menu.Item>
      </Menu>

    );

    const renderRightOperation = () => {
      return (<div style={{ display: "inline-block" }}>
        {
          (showOperateBtn || showSalaryItemBtn) &&
          <Dropdown.Button overlay={menu} type="primary" onClick={() => handleMenuClick({ key: "1" })}
                           style={{ marginRight: "10px" }}>{getLabel(111, "新增系统薪资项")}</Dropdown.Button>
        }
        {
          (showOperateBtn || showSalaryItemBtn) &&
          <Button
            type="primary"
            style={{ marginRight: "10px" }}
            onClick={() => {
              if (!selectedRowKeys.length) {
                message.info("未选中任何数据!");
                return;
              }
              Modal.confirm({
                title: "信息确认",
                content: `确定要将所选的薪资项（共${selectedRowKeys.length}条数据）删除吗？`,
                onOk: () => {
                  deleteItemRequest(selectedRowKeys).then(() => {
                    getTableDatas({ ...this.state.searchParams }).then(res => {
                      this.setState({
                        selectedRowKeys: [],
                        searchParams: {
                          ...this.state.searchParams,
                          total: res.total
                        }
                      });
                    });
                  });
                }
              });
            }}>批量删除薪资项</Button>
        }
        <WeaInputSearch value={this.state.searchValue} placeholder={"请输入名称"} onChange={(value) => {
          this.setState({ searchValue: value });
        }} onSearch={(value) => {
          this.handleSearch(value);
        }}/>
      </div>);

    };

    // 新建和修改保存的回调
    const handleSlideSave = (continueFlag) => {
      const { salaryItemStore: { saveItem, request, getTableDatas } } = this.props;
      const payload = _.cloneDeep(request);
      const { name, sharedType, taxAgentIds } = request;
      if (!name || (sharedType === "1" && !taxAgentIds)) {
        Modal.warning({
          title: "信息确认",
          content: "必要信息不完整，红色*为必填项！"
        });
        return;
      }
      saveItem(payload, continueFlag).then(() => {
        getTableDatas({ ...this.state.searchParams }).then(res => {
          this.setState({
            searchParams: {
              ...this.state.searchParams,
              total: res.total
            }
          });
        });
      });
    };

    const renderCustomOperate = () => {
      let arrList = [];
      if (this.state.isAdd) {
        arrList = [
          <Button type="primary" onClick={() => {
            handleSlideSave(false);
          }}>保存</Button>,
          <Button type="default" onClick={() => {
            handleSlideSave(true);
          }}>保存并继续创建</Button>
        ];
      } else if (this.state.editable) {
        arrList = [
          <Button type="ghost"
                  onClick={() => this.setState({
                    syncSalarySetDialog: {
                      ...this.state.syncSalarySetDialog,
                      visible: true,
                      title: getLabel(111, "请选择薪资账套")
                    }
                  })}
          >{getLabel(111, "同步到薪资账套")}</Button>,
          <Button type="primary" onClick={() => {
            handleSlideSave(true);
          }}>保存</Button>
        ];
      }
      return arrList;
    };

    const handleSaveSlideChange = (value) => {
      const { salaryItemStore: { setRequest } } = this.props;
      setRequest(value);
    };
    const rowSelection = {
      selectedRowKeys,
      onChange: (selectedRowKeys) => this.setState({ selectedRowKeys }),
      getCheckboxProps: record => ({
        disabled: !record.canDelete // Column configuration not to be checked
      })
    };
    return (
      <div className="mySalaryBenefitsWrapper">
        <WeaTop
          title="薪资项目管理"
          icon={<i className="icon-coms-fa"/>}
          iconBgcolor="#F14A2D"
          showDropIcon={false}
        >
          <CustomTab searchOperationItem={renderRightOperation()}/>
          <div className="tableWrapper">
            <WeaNewScroll height="100%">
              <CustomPaginationTable
                rowKey={record => record.id}
                loading={loading}
                rowSelection={rowSelection}
                dataSource={tableDataSource}
                columns={this.getColumns(tableColumns)}
                total={this.state.searchParams.total}
                current={this.state.searchParams.current}
                pageSize={this.state.searchParams.pageSize}
                onPageChange={(value) => {
                  this.handlePageChange(value);
                }}
                onShowSizeChange={(current, pageSize) => {
                  this.setState({
                    searchParams: {
                      ...this.state.searchParams,
                      current,
                      pageSize
                    }
                  }, () => {
                    this.handleShowSizeChange({ name: this.state.searchValue, ...this.state.searchParams });
                  });
                }}
              />
            </WeaNewScroll>
          </div>
        </WeaTop>
        <SyncToSalaryAccountSetDialog
          {...this.state.syncSalarySetDialog}
          onCancel={() => this.setState({
            syncSalarySetDialog: {
              ...this.state.syncSalarySetDialog,
              visible: false, title: ""
            }
          })}
        />

        {
          systemItemVisible &&
          <SystemSalaryItemModal
            visible={systemItemVisible}
            onCancel={() => {
              setSystemItemVisible(false);
            }}
            onInitTableList={() => {
              getTableDatas({ ...this.state.searchParams, name: this.state.searchValue }).then(res => {
                this.setState({
                  searchParams: {
                    ...this.state.searchParams,
                    total: res.total
                  }
                });
              });
            }}
          />
        }
        {
          editSlideVisible &&
          <WeaSlideModal
            className="slideOuterWrapper"
            visible={editSlideVisible}
            top={0}
            measureT="%"
            width={800}
            measureX="px"
            height={100}
            measureY="%"
            direction={"right"}
            title={
              <SlideModalTitle
                subtitle={(this.state.isAdd ? "新建" : "修改") + "自定义薪资项目"}
                editable={false}
                showOperateBtn={(showSalaryItemBtn || showOperateBtn)}
                customOperate={(showSalaryItemBtn || showOperateBtn) ? renderCustomOperate() : []}
              />
            }
            content={
              <CustomSalaryItemSlide
                record={this.record} editable={this.state.editable}
                isAdd={this.state.isAdd} request={request}
                userStatusList={userStatusList}
                taxAgentAdminOption={taxAgentOption}
                onChange={(value) => {
                  handleSaveSlideChange(value);
                }}/>
            }
            onClose={() => setEditSlideVisible(false)}
          />
        }
      </div>
    );
  }
}