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, Switch } from "antd";
import { WeaSelect, WeaSlideModal, WeaTop } from "ecCom";
import { WeaTableNew } from "comsMobx";
import { renderNoright } from "../../../util"; // 渲染form数据的方法：因为多个页面都会使用，所以抽的公共方法在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 "./index.less";

const WeaMobxTable = WeaTableNew.WeaTable;

@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 } = this.props;
    const { doInit } = programmeStore;
    doInit();
    const { commonEnumList } = salaryFileStore;
    commonEnumList("user", { enumClass: "com.engine.salary.enums.sicategory.SharedTypeEnum" });
  }

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

    newColumns = newColumns.map(column => {
      let newColumn = column;
      newColumn.render = (text, record, index) => {
        //前端元素转义
        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
                onClick={() => {
                  this.onEdit(record);
                }}>
                编辑
              </a>
            );
          default:
            return <div dangerouslySetInnerHTML={{ __html: valueSpan }}/>;
        }
      };
      return newColumn;
    });

    newColumns.push({
      title: "操作",
      dataIndex: "operate",
      render: (text, record) => {
        return (
          <a
            onClick={() => {
              this.onEdit(record);
            }}>
            编辑
          </a>
        );
      }
    });
    newColumns.push({
      key: "moreOperate",
      dataIndex: "moreOperate",
      render: (text, record) => {
        return (
          <Dropdown
            overlay={
              <Menu>
                <Menu.Item>
                  <a
                    onClick={() => {
                      this.onCopy(record);
                    }}>
                    复制
                  </a>
                </Menu.Item>
                {/*暂时隐藏*/}
                <Menu.Item>
                  <a
                    onClick={() => {
                      this.onDelete(record);
                    }}>
                    删除
                  </a>
                </Menu.Item>
              </Menu>
            }>
            <a href="javascript:void(0)" style={{ textDecoration: "none" }}>
              <i
                className="icon-coms-more"
                style={{ fontSize: 18 }}>
              </i>
            </a>
          </Dropdown>
        );
      }
    });
    return newColumns;
  };

  handleCategoryStatusChange(record, value) {
    const { programmeStore: { updateCustomCategoryStatus } } = this.props;
    Modal.confirm({
      title: "信息确认",
      content: `确认要${value ? "启用" : "停用"}吗`,
      onOk: () => {
        updateCustomCategoryStatus(record.id, value);
      },
      onCancel: () => {
      }
    });
  }

  getCustomColumns = columns => {
    const { taxAgentStore: { showOperateBtn } } = this.props;
    let newColumns = [];
    newColumns = columns.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 "operate":
            return (
              <a
                href="javascript:void(0);"
                onClick={() => {
                  this.onCustomEdit(record);
                }}>
                编辑
              </a>
            );
          case "is_use":
            return (
              <Switch
                disabled={!showOperateBtn}
                checked={text == 1}
                onChange={value => {
                  this.handleCategoryStatusChange(record, value);
                }}
              />
            );
          default:
            return <div dangerouslySetInnerHTML={{ __html: valueSpan }}/>;
        }
      };
      return newColumn;
    });
    return newColumns;
  };

  onEdit(record) {
    let id = record.id;
    const { programmeStore } = this.props;
    const { getForm, selectedKey } = programmeStore;
    getForm({
      welfareTypeEnum: selectedKey,
      id
    });
    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: () => {
      }
    });
  };

  onCustomOperatesClick(record, index, operate, flag) {
    switch (operate.text.toString()) {
      case "编辑": // 编辑
        this.onCustomEdit(record);
        break;
    }
  }

  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["insurance_name"],
      id: record.id,
      isUse: record.is_use,
      paymentScope: record["payment_scope"].split(",").map(item => paymentScopeEnum[item]).join(","),
      welfareType: welfareTypeEnum[record.welfare_type]
    });
  };

  // 页面跳转
  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,
      condition,
      tableStore,
      showSearchAd,
      getTableDatas,
      doSearch,
      setShowSearchAd
    } = programmeStore;
    const {
      selectedKey,
      setSelectedKey,
      getCustomCategoryList,
      customTableStore,
      customSelectkey,
      setCustomSelectkey,
      requestParams,
      setRequestParams,
      formCondition,
      setCustomNewVisible,
      customNewVisible,
      tableDataSource,
      tableColumns,
      tablePageInfo
    } = programmeStore;
    if (!hasRight && !loading) {
      // 无权限处理
      return renderNoright();
    }

    const rightMenu = [
      // 右键菜单
    ];
    const collectParams = {
      // 收藏功能配置
      favname: "社保福利方案",
      favouritetype: 1,
      objid: 0,
      link: "wui/index.html#/ns_demo03/index",
      importantlevel: 1
    };
    const adBtn = [
      // 高级搜索内部按钮
      <Button type="primary" onClick={doSearch}>
        搜索
      </Button>,
      <Button type="ghost" onClick={() => form.resetForm()}>
        重置
      </Button>,
      <Button type="ghost" onClick={() => setShowSearchAd(false)}>
        取消
      </Button>
    ];

    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 renderSearchOperationItem = () => {
    //   const { programmeStore: {setCustomSelectkey, getCustomCategoryList}} = this.props;
    //   return
    // }

    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="mySalaryBenefitsWrapper">
        <WeaTop
          title="社保福利方案" // 文字
          icon={<i className="icon-coms-fa"/>} // 左侧图标
          iconBgcolor="#F14A2D" // 左侧图标背景色
          showDropIcon={false} // 是否显示下拉按钮
          dropMenuDatas={rightMenu} // 下拉菜单（和页面的右键菜单相同）
          dropMenuProps={{ collectParams }}>
          {/* 收藏功能: 配置之后显示 收藏、帮助、显示页面地址 这3个功能 */}
          <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);
                      getCustomCategoryList(v);
                    }}
                  />}
              </div>
            }
            onChange={v => {
              setSelectedKey(v);
              handleSlideClose();
              if (v == "custom") {
                // 自定义福利
                getCustomCategoryList();
              } else {
                getTableDatas(v);
              }
            }}
          />
          {selectedKey == "custom"
            ? <TwoColContent
              leftContent={
                <WeaMobxTable // table内部做了loading加载处理，页面就不需要再加了
                  comsWeaTableStore={tableStore} // table store
                  hasOrder={true} // 是否启用排序
                  needScroll={true} // 是否启用table内部列表滚动，将自适应到父级高度
                  getColumns={this.getCustomColumns}
                  onOperatesClick={this.onCustomOperatesClick.bind(this)}
                />
              }
              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);
              }}
            />}
        </WeaTop>
        <WeaSlideModal
          className="slideOuterWrapper"
          visible={this.state.slideVisiable}
          top={0}
          width={60}
          height={100}
          direction={"right"}
          measure={"%"}
          title={
            <SlideModalTitle
              subtitle={this.state.customEdit ? "修改" : "新增"}
              subTabs={[{ 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();
          }}
          showMask={true}
          closeMaskOnClick={() => {
            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={() => {
              setCustomNewVisible(false);
            }}
          />}
      </div>
    );
  }
}