salary-management-front/pc4mobx/hrmSalary/pages/socialSecurityBenefits/programme/index.js

import React from "react";
import { inject, observer } from "mobx-react";
import { toJS } from "mobx";
import { Button, Dropdown, Menu, message, Modal } from "antd";
import { WeaLocaleProvider, WeaNewScroll, WeaSelect, WeaSlideModal, WeaTop } from "ecCom";
import { renderNoright } from "../../../util";
import CustomTab from "../../../components/customTab";
import SlideModalTitle from "../../../components/slideModalTitle";
import TipLabel from "../../../components/TipLabel";
import DefaultSlideForm from "./defaultSlideForm";
import CustomNewModal from "./customNewModal";
import { paymentScopeEnum, welfareTypeEnum } from "./enum";
import CustomPaginationTable from "../../../components/customPaginationTable";
import TwoColContent from "../../../components/twoColContent";
import CopySchemaModal from "./copySchemaModal";
import CustomBenefitsTable from "./customBenefitsTable";
import "./index.less";

const { getLabel } = WeaLocaleProvider;
@inject("programmeStore", "taxAgentStore", "salaryFileStore")
@observer
export default class Programme extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: "",
      searchValue: "",
      slideVisiable: false,
      currentOperate: "add",
      copyModalValue: "",
      copyId: "",
      customNewVisible: false,
      customEdit: false
    };

    this.pageInfo = { current: 1, pageSize: 10 };
  }

  componentWillMount() {
    const { programmeStore, salaryFileStore, taxAgentStore } = this.props;
    const { doInit } = programmeStore;
    doInit();
    const { commonEnumList } = salaryFileStore;
    commonEnumList("user", { enumClass: "com.engine.salary.enums.sicategory.SharedTypeEnum" });
    const { getTaxAgentSelectListAsAdmin } = taxAgentStore;
    getTaxAgentSelectListAsAdmin();
  }

  // 增加编辑功能，重写columns绑定事件
  getColumns = columns => {
    const { taxAgentStore: { showOperateBtn } } = this.props;
    let newColumns = columns.filter(
      item => item.dataIndex !== "id" && item.dataIndex !== "paymentArea"
    );

    newColumns = newColumns.map(column => {
      let newColumn = column;
      newColumn.render = (text, record) => {
        //前端元素转义
        let valueSpan =
          record[newColumn.dataIndex + "span"] !== undefined
            ? record[newColumn.dataIndex + "span"]
            : record[newColumn.dataIndex];
        if (newColumn.dataIndex === "id") newColumn.display = false;
        switch (newColumn.dataIndex) {
          case "operate":
            return (
              <a href="javascript: void(0);" onClick={() => this.onEdit(record)}>编辑</a>
            );
          default:
            return <div dangerouslySetInnerHTML={{ __html: valueSpan }}/>;
        }
      };
      return newColumn;
    });

    newColumns.push({
      title: "操作",
      dataIndex: "operate",
      width: 120,
      render: (text, record) => {
        return (
          <React.Fragment>
            <a href="javascript:void(0);" onClick={() => this.onEdit(record)}
               style={{ marginRight: 10 }}>{showOperateBtn ? "编辑" : "查看"}</a>
            {
              showOperateBtn &&
              <a href="javascript:void(0)" onClick={() => this.onCopy(record)}
                 style={{ marginRight: 10 }}>{getLabel(77, "复制")}</a>
            }
            {
              showOperateBtn &&
              <Dropdown
                overlay={
                  <Menu>
                    <Menu.Item>
                      <a href="javascript:void(0)" onClick={() => this.onDelete(record)}>{getLabel(535052, "删除")}</a>
                    </Menu.Item>
                  </Menu>
                }>
                <a href="javascript:void(0)"><i className="icon-coms-more"/></a>
              </Dropdown>
            }
          </React.Fragment>
        );
      }
    });
    return newColumns;
  };

  onEdit = (record) => {
    let id = record.id;
    const { programmeStore } = this.props;
    const { getForm, selectedKey } = programmeStore;
    getForm({
      welfareTypeEnum: selectedKey,
      id
    }).then(() => {
      this.setState({ slideVisiable: true, customEdit: true, currentOperate: "update" });
    });
  };

  onCopy = (record) => {
    this.setState({
      copyId: record.id,
      copyModalValue: record.schemeName,
      copyModalVisible: true
    });
  };

  onDelete = (record) => {
    const { programmeStore: { deleteScheme, deleteLoading, selectedKey } } = this.props;
    Modal.confirm({
      title: "确认信息",
      content: "确认删除本条数据吗？",
      confirmLoading: deleteLoading,
      onOk: () => {
        deleteScheme({ ids: [record.id], welfareTypeEnum: selectedKey });
      },
      onCancel: () => {
      }
    });
  };

  onCustomEdit = (record) => {
    const {
      programmeStore: { getCustomForm, setCustomNewVisible, setCustomRequest },
      taxAgentStore: { showOperateBtn }
    } = this.props;
    if (!showOperateBtn) {
      message.warning("请设置编辑权限！");
      return;
    }
    getCustomForm();
    setCustomNewVisible(true);
    this.setState({
      customEdit: true
    });
    setCustomRequest({
      insuranceName: record["insuranceName"],
      id: record.id,
      isUse: record.isUse,
      paymentScope: record["paymentScope"].split(",").map(item => paymentScopeEnum[item]).join(","),
      welfareType: welfareTypeEnum[record.welfareType]
    });
  };

  // 页面跳转
  handlePageChange(value) {
    const { programmeStore: { form, getTableDatas, selectedKey } } = this.props;
    this.pageInfo.current = value;
    getTableDatas(selectedKey, this.pageInfo);
  }

  render() {
    const { programmeStore, taxAgentStore: { showOperateBtn } } = this.props;
    const { loading, hasRight, form, getTableDatas } = programmeStore;
    const {
      selectedKey,
      setSelectedKey,
      customSelectkey,
      setCustomSelectkey,
      requestParams,
      setRequestParams,
      formCondition,
      setCustomNewVisible,
      customNewVisible,
      tableDataSource,
      tableColumns,
      tablePageInfo
    } = programmeStore;
    if (!hasRight && !loading) return renderNoright();

    const topTab = [
      {
        title: "社保",
        viewcondition: "SOCIAL_SECURITY"
      },
      {
        title: "公积金",
        viewcondition: "ACCUMULATION_FUND"
      },
      {
        title: "企业年金及其他福利",
        viewcondition: "OTHER"
      },
      {
        title: "自定义福利",
        viewcondition: "custom"
      }
    ];

    const options = [
      {
        showname: "全部",
        key: ""
      },
      {
        showname: "社保",
        key: "SOCIAL_SECURITY"
      },
      {
        showname: "公积金",
        key: "ACCUMULATION_FUND"
      },
      {
        showname: "企业年金及其他福利",
        key: "OTHER"
      }
    ];

    const handleNewClick = () => {
      const {
        programmeStore: { initSlideParms, getForm, selectedKey }
      } = this.props;
      initSlideParms();
      this.setState({ slideVisiable: true, currentOperate: "add" });
      getForm({ welfareTypeEnum: selectedKey });
    };

    const handleCustomNewClick = () => {
      const {
        programmeStore: {
          getCustomForm,
          setCustomNewVisible,
          setCustomRequest
        }
      } = this.props;
      getCustomForm();
      setCustomRequest({});
      setCustomNewVisible(true);
      this.setState({ customEdit: false });
    };

    const handleOnSave = () => {
      const { programmeStore } = this.props;
      const { currentOperate } = this.state;
      const {
        selectedKey,
        defaultPersonDataSource,
        defaultCompanyDataSource,
        createScheme,
        requestParams,
        updateScheme
      } = programmeStore;
      let { schemeName, remarks, paymentArea, paymentType, sharedType, taxAgentIds } = requestParams;
      let request = {
        insuranceScheme: {
          paymentType,
          welfareType: selectedKey,
          schemeName,
          remarks,
          paymentArea,
          sharedType,
          taxAgentIds
        },
        insuranceSchemeDetailList: [
          ...defaultPersonDataSource,
          ...defaultCompanyDataSource
        ]
      };
      if (currentOperate == "add") {
        createScheme(request).then(res => {
          if (res.status) this.setState({ slideVisiable: false });
        });
      } else if (currentOperate == "update") {
        request.insuranceScheme.id = requestParams.id;
        updateScheme(request).then(res => {
          if (res.status) this.setState({ slideVisiable: false });
        });
      }
    };

    const renderCustomRightContent = () => {
      let tipList = [
        "1、可以为社保、公积金、企业年金及其他福利新增自定义的福利项，如：残疾保险等",
        "2、新增自定义福利默认启用，社保福利方案中的自定义福利项均未开启缴纳，当前页面的自定义福利项才可以停用；停用后再新增方案时没有该福利项",
        "3、自定义福利若要缴纳，需要在方案里填写缴纳相关数据"
      ];
      return <TipLabel tipList={tipList}/>;
    };

    const handleCopyModalSave = () => {
      const { programmeStore: { copyScheme } } = this.props;
      const { copyId, copyModalValue } = this.state;
      if (_.isEmpty(this.refs.copyRef.state.value)) {
        this.refs.copyRef.refs.weaError.showError();
      } else {
        copyScheme({ id: copyId, schemeName: copyModalValue }).then(() => {
          this.setState({ copyModalVisible: false });
        });
      }
    };

    const handleSlideClose = () => {
      this.setState({ slideVisiable: false, customEdit: false });
      const { programmeStore: { initSlideParms } } = this.props;
      initSlideParms();
    };

    return (
      <div className="socialSecurityAndWelfareSchemeWrapper">
        <WeaTop
          title="社保福利方案" // 文字
          icon={<i className="icon-coms-fa"/>} // 左侧图标
          iconBgcolor="#F14A2D" // 左侧图标背景色
          showDropIcon={false} // 是否显示下拉按钮
        >
          <CustomTab
            topTab={topTab}
            searchOperationItem={
              <div>
                {/* 操作按钮权限 */}
                {showOperateBtn &&
                  <Button
                    type="primary"
                    style={{ marginRight: "10px" }}
                    onClick={() => {
                      if (selectedKey == "custom") {
                        handleCustomNewClick();
                      } else {
                        handleNewClick();
                      }
                    }}>
                    新建
                  </Button>}

                {selectedKey == "custom" &&
                  <WeaSelect
                    options={options}
                    value={customSelectkey}
                    style={{ width: "150px" }}
                    onChange={v => {
                      setCustomSelectkey(v);
                      this.customBenefitsTableRef.getCustomCategoryList({ current: 1, welfareTypeEnum: v });
                    }}
                  />}
              </div>
            }
            onChange={v => {
              setSelectedKey(v);
              handleSlideClose();
              if (v == "custom") {
                // 自定义福利
              } else {
                getTableDatas(v);
              }
            }}
          />
          <div className="tableWrapper">
            <WeaNewScroll height="100%">
              {selectedKey == "custom"
                ? <TwoColContent
                  leftContent={
                    <CustomBenefitsTable
                      ref={dom => this.customBenefitsTableRef = dom}
                      showOperateBtn={showOperateBtn}
                      welfareTypeEnum={customSelectkey}
                      onCustomEdit={this.onCustomEdit}
                    />
                  }
                  rightContent={renderCustomRightContent()}
                />
                : <CustomPaginationTable
                  loading={loading}
                  columns={this.getColumns(tableColumns)}
                  dataSource={tableDataSource}
                  total={toJS(tablePageInfo).total}
                  current={toJS(tablePageInfo).pageNum}
                  pageSize={this.pageInfo.pageSize}
                  onPageChange={value => {
                    this.handlePageChange(value);
                  }}
                  onShowSizeChange={(current, pageSize) => {
                    this.pageInfo = { current, pageSize };
                    const {
                      programmeStore: { form, getTableDatas, selectedKey }
                    } = this.props;
                    getTableDatas(selectedKey, this.pageInfo);
                  }}
                />}
            </WeaNewScroll>
          </div>
        </WeaTop>
        <WeaSlideModal
          className="slideOuterWrapper"
          visible={this.state.slideVisiable}
          top={0}
          measureT="%"
          width={800}
          measureX="px"
          height={100}
          measureY="%"
          direction={"right"}
          title={
            <SlideModalTitle
              subtitle={
                this.state.customEdit ?
                  `修改${_.find(topTab, it => it.viewcondition === selectedKey).title}方案` :
                  `新增${_.find(topTab, it => it.viewcondition === selectedKey).title}方案`
              }
              editable={true}
              showOperateBtn={showOperateBtn}
              onSave={() => handleOnSave()}
            />
          }
          content={
            this.state.slideVisiable ?
              <DefaultSlideForm
                customEditVisible={this.state.customEdit}
                requestParams={requestParams}
                onChange={requestParams => {
                  setRequestParams(requestParams);
                }}
              /> : null
          }
          onClose={() => {
            handleSlideClose();
          }}
        />

        {this.state.copyModalVisible &&
          <CopySchemaModal
            ref="copyRef"
            title={_.filter(topTab, it => it.viewcondition === selectedKey)[0].title}
            visible={this.state.copyModalVisible}
            value={this.state.copyModalValue}
            onChange={value => this.setState({ copyModalValue: value })}
            onCancel={() => {
              this.setState({ copyModalVisible: false });
            }}
            footer={
              [<Button
                type="primary"
                onClick={() => {
                  handleCopyModalSave();
                }}>
                保存
              </Button>]
            }
          />}

        {customNewVisible &&
          <CustomNewModal
            visible={customNewVisible}
            condition={formCondition}
            form={form}
            edit={this.state.customEdit}
            onCancel={(isRefresh) => {
              setCustomNewVisible(false);
              isRefresh && this.customBenefitsTableRef.getCustomCategoryList();
            }}
          />}
      </div>
    );
  }
}