salary-management-front/pc4mobx/hrmSalary/pages/reportView/components/salaryStatisticsDetailShareLogDialog.js

/*
 * Author: 黎永顺
 * name: 分享记录-查看分享记录详情
 * Description:
 * Date: 2023/9/19
 */
import React, { Component } from "react";
import { inject, observer } from "mobx-react";
import {
  WeaButtonIcon,
  WeaDialog,
  WeaHelpfulTip,
  WeaInputSearch,
  WeaLocaleProvider,
  WeaSearchGroup,
  WeaTable,
  WeaTools
} from "ecCom";
import { message, Modal } from "antd";
import { shareLogCondition } from "./condition";
import { getConditionDomkeys, getSearchs } from "../../../util";
import { salaryStatisticsPushcancel, salaryStatisticsPushGetDetail } from "../../../apis/statistics";
import SalaryStatisticsDetailSharePersonDialog from "./salaryStatisticsDetailSharePersonDialog";
import "./index.less";

const getKey = WeaTools.getKey;
const { getLabel } = WeaLocaleProvider;

@inject("attendanceStore")
@observer
class SalaryStatisticsDetailShareLogDialog extends Component {
  constructor(props) {
    super(props);
    this.state = {
      conditions: [], loading: false, dataSource: [], columns: [],
      userNameSearch: "", sharePerDialog: { visible: false, id: "" }
    };
  }

  componentWillReceiveProps(nextProps, nextContext) {
    const { attendanceStore: { initShareLogForm } } = nextProps;
    if (nextProps.visible !== this.props.visible && nextProps.visible) {
      this.salaryStatisticsPushGetDetail(nextProps);
    } else if (nextProps.visible !== this.props.visible && !nextProps.visible) {
      initShareLogForm();
    }
  }

  renderShareLogTitle = () => {
    return <div className="logtitleHeader">
      <div className="titleText">
        <span style={{ marginRight: 10 }}>{getLabel(111, "被分享人")}</span>
        <WeaHelpfulTip width={200} placement="topLeft"
                       title={getLabel(111, "被分享人收到您分享的报表后，会默认赋予您的数据权限，但还需要有【薪酬统计分析】的菜单权限才可以查看报表。菜单权限设置路径：后台管理中心-【权限管理中心】-【角色设置】，建议创建一个仅查看报表的角色，这个角色只有薪酬管理模块的【薪酬统计分析】菜单权限。\n" +
                         "为了避免所选的人同名导致选错人，可在后台管理中心-【组织架构设置】-【浏览框显示字段定义】中人员浏览框的显示字段多勾选几个能区别人员的字段")}
        />
      </div>
      <div className="right">
        <WeaButtonIcon buttonType="add" type="primary" style={{ marginRight: 10 }}
                       onClick={() => this.setState({
                         sharePerDialog: {
                           ...this.state.sharePerDialog,
                           visible: true, id: this.props.id
                         }
                       })}/>
        <WeaInputSearch value={this.state.userNameSearch} onChange={v => this.setState({ userNameSearch: v })}
                        onSearch={() => this.salaryStatisticsPushGetDetail(this.props)}
        />
      </div>
    </div>;
  };
  salaryStatisticsPushGetDetail = (props) => {
    const { userNameSearch } = this.state;
    const { attendanceStore: { shareLogForm }, id } = props;
    this.setState({ loading: true });
    salaryStatisticsPushGetDetail({ id, userNameSearch }).then(({ status, data }) => {
      this.setState({ loading: false });
      if (status) {
        const { detailForm, detailTable } = data;
        const { columns, list: dataSource } = detailTable;
        this.setState({
          columns, dataSource,
          conditions: _.map(shareLogCondition, item => {
            return {
              ...item,
              items: _.map(item.items, o => {
                if (getKey(o) === "effectiveTime") {
                  return {
                    ...o,
                    helpfulTitle: getLabel(111, "有效时间之外，被分享人无法查看您分享的报表")
                  };
                }
                return { ...o };
              })
            };
          })
        }, () => {
          shareLogForm.initFormFields(this.state.conditions);
          getConditionDomkeys(this.state.conditions).map(key => {
            shareLogForm.updateFields({
              [key]: detailForm[key] || ""
            });
          });
        });
      }
    }).catch(() => this.setState({ loading: false }));
  };
  salaryStatisticsPushcancel = (id) => {
    Modal.confirm({
      title: getLabel(131329, "信息确认"),
      content: getLabel(111, "确定要全部撤回吗？"),
      onOk: () => {
        salaryStatisticsPushcancel({ id }).then(({ status, errormsg }) => {
          if (status) {
            message.success(getLabel(505793, "撤回成功！"));
            this.salaryStatisticsPushGetDetail(this.props);
            this.props.onGetTable();
          } else {
            message.error(errormsg);
          }
        });
      }
    });
  };

  render() {
    const { attendanceStore: { shareLogForm } } = this.props;
    const { conditions, dataSource, columns, loading, sharePerDialog } = this.state;
    return (
      <WeaDialog
        {...this.props}
        hasScroll initLoadCss title={getLabel(111, "查看分享记录详情")}
        className="shareDialogWrapper"
        style={{
          width: 850,
          height: 506.6,
          minHeight: 200,
          minWidth: 380,
          maxHeight: "60%",
          maxWidth: "60%",
          overflow: "hidden",
          transform: "translate(0px, 0px)"
        }}
      >
        <div style={{ padding: 16, overflowY: "auto" }}>
          {getSearchs(shareLogForm, conditions, 1, false)}
          <WeaSearchGroup title={this.renderShareLogTitle()} showGroup needTigger className="shareLogGroupWrapper">
            <WeaTable
              rowKey="id" dataSource={dataSource} pagination={false} loading={loading}
              columns={[
                ...columns,
                {
                  dataIndex: "operate",
                  width: 120,
                  title: <React.Fragment>
                    <span style={{ marginRight: 10 }}>{getLabel(30585, "操作")}</span>
                    <WeaHelpfulTip width={200} placement="topLeft"
                                   title={
                                     <div>
                                       <p>{getLabel(111, "1、分享状态为成功且撤回状态为空时，可操作撤回；")}</p>
                                       {/*<p>{getLabel(111, "2、撤回后不可重新分享；")}</p>*/}
                                       {/*<p>{getLabel(111, "3、分享状态为失败，可操作重新分享；")}</p>*/}
                                       {/*<p>{getLabel(111, "4、重新分享：以当前分享记录的分享报表、有效时间、渠道和说明重新分享，分享后自动刷新分享时间和分享状态")}</p>*/}
                                     </div>
                                   }
                    />
                  </React.Fragment>,
                  render: (__, record) => (_.isEmpty(record.rebackStatus) ?
                    <a href="javascript:void(0);"
                       onClick={() => this.salaryStatisticsPushcancel(record.id)}>{getLabel(32025, "撤回")}</a> : null)
                }
              ]}
            />
            <SalaryStatisticsDetailSharePersonDialog
              {...sharePerDialog}
              onCancel={() => this.setState({ sharePerDialog: { ...sharePerDialog, visible: false, id: "" } })}
              onGetTable={() => {
                this.salaryStatisticsPushGetDetail(this.props);
                this.props.onGetTable();
              }}
            />
          </WeaSearchGroup>
        </div>
      </WeaDialog>
    );
  }
}

export default SalaryStatisticsDetailShareLogDialog;