sunmao-sdk/src/component/CustomHeaderModal/index.jsx

榫卯-开箱即用赋能-sdk

import React, { useEffect, useState } from "react";
import { Modal, Checkbox, Button, Alert, message, Spin } from "antd";
import { MenuOutlined } from "@ant-design/icons";
import { SortableContainer, SortableElement } from "react-sortable-hoc";
import QuestionCircle from "../QuestionCircle";
import "./index.less";
import { getDicTrue } from "../../utils/formUtils";
import { behaviorLog } from "../../utils/commonUtils";
import { setObject } from "../../utils/localStorageUtils";
import { CP } from "../..";
import { isEmpty } from "lodash";

// interface headerItem {
//   title?: string; // 字段名称（中文）
//   label?: string; // 字段名称（中文）
//   dataIndex?: string; // 字段名称（英文）
//   key?: string; // 字段名称（英文）
//   isSelected: boolean; // 是否被勾选
//   selectedIndex: number; // 用户选择顺序
//   remark?: string; // 字段提示语
//   isRequired: string; // 是否必选
// }

// 拖拽后对数组重新排序
const reorder = (list, startIndex, endIndex) => {
  const result = Array.from(list);
  const [removed] = result.splice(startIndex, 1);
  result.splice(endIndex, 0, removed);

  return result.map((i, index) => {
    i.selectedIndex = index;
    return i;
  });
};

const CustomHeaderModal = props => {
  const {
    title,
    show,
    handleCancel,
    onChange,
    cacheList,
    defaultList,
    fieldNames
  } = props;
  const { customKey, key, label, behaviorName } = fieldNames;

  const [headerLists, setHeaderLists] = useState([]);

  useEffect(() => {
    if (show) {
      if (!isEmpty(cacheList)) {
        // 判断缓存
        setHeaderLists(cacheList);
      } else {
        // 无缓存则初始化处理
        setDefaultTableColumns();
      }
    }
  }, [show]);

  // 初始化默认表头
  const setDefaultTableColumns = () => {
    //  转换处理
    setHeaderLists(
      defaultList.map((item, index) => {
        item.isSelected = getDicTrue(
          item.selectTrue || "5fb8b91ae2559fcd82cad4d2"
        );
        item.selectedIndex = index;
        return item;
      })
    );
  };

  // 表头拖拽
  const onDragEnd = ({ oldIndex, newIndex }) => {
    if (oldIndex === newIndex) {
      return;
    }
    const quotes = reorder(
      headerLists,
      oldIndex, // 原位置
      newIndex // 目标位置
    );
    setHeaderLists(quotes);
  };

  // 选择表头
  const checkChange = (e, field) => {
    const curSelect = e.target.checked;

    const index = headerLists.findIndex(item => item[key] === field[key]);
    if (index > -1) {
      setHeaderLists(lists => {
        lists[index] = {
          ...lists[index],
          isSelected: curSelect
        };
        return [...lists];
      });
    }
  };

  // 保存表头
  const submit = () => {
    if (!headerLists.some(item => item.isSelected)) {
      message.warning("请至少选择一个表头");
      return;
    }
    // 保存表头，存入缓存
    CP.customConfigMap[customKey] = headerLists;
    setObject("sunmao_customConfigMap", CP.customConfigMap);
    // 刷新页面表头
    onChange?.();
    setTimeout(() => {
      behaviorLog(behaviorName);
    }, 1);
  };

  // 全选
  const allSelectChange = e => {
    setHeaderLists(list => {
      return list.map(item => {
        // 必选表头不可取消
        if (getDicTrue(item.isRequired)) {
          item.isSelected = true;
        } else {
          item.isSelected = e.target.checked;
        }
        return item;
      });
    });
  };

  const SortableItem = SortableElement(({ value }) => {
    const name = value[label];
    return getDicTrue(value.isRequired) ? (
      // 不可选表头 需置灰
      <div className="header-item">
        <div className="disable-item">
          <Checkbox checked={true} disabled={true}></Checkbox>
          <span className="label disable-label">{name}</span>
          {value.remark && (
            <QuestionCircle
              title={value.remark}
              style={{ marginLeft: "4px" }}
            />
          )}
        </div>
        <MenuOutlined className="menu-icon" />
      </div>
    ) : (
      <div className="header-item">
        <Checkbox
          onChange={e => checkChange(e, value)}
          checked={value.isSelected}
        >
          <span className="label">{name}</span>
          {value.remark && (
            <QuestionCircle
              title={value.remark}
              style={{ marginLeft: "4px" }}
            />
          )}
        </Checkbox>
        <MenuOutlined className="menu-icon" />
      </div>
    );
  });

  const SortableList = SortableContainer(() => {
    return (
      <div className="header-lists">
        {headerLists
          .sort((a, b) => a["selectedIndex"] - b["selectedIndex"])
          .map((quote, index) => (
            <SortableItem key={quote[key]} index={index} value={quote} />
          ))}
      </div>
    );
  });

  return (
    <Modal
      visible={show}
      width={720}
      title={title || "自定义展示设置"}
      onCancel={handleCancel}
      destroyOnClose
      centered
      maskClosable={false}
      footer={
        <div className="custom-header-footer">
          <Checkbox
            key="selectAll"
            checked={headerLists.every(i => i.isSelected)}
            onChange={allSelectChange}
          >
            全选
          </Checkbox>
          <div className="button-group">
            <Button key="default" type="link" onClick={setDefaultTableColumns}>
              恢复默认
            </Button>
            <Button key="cancel" type="ghost" onClick={handleCancel}>
              取消
            </Button>
            <Button key="commit" type="primary" onClick={submit}>
              确定
            </Button>
          </div>
        </div>
      }
      className="custom-header-modal"
    >
      <>
        <Alert
          message="顺序设置：可点击按住字段右侧图标，直接拖拽到合适位置，按从左到右、从上到下的顺序排序。"
          type="info"
          showIcon
          closable
        />
        <h3 />
        <SortableList
          distance={5}
          onSortEnd={onDragEnd}
          axis="xy"
          helperClass="custom-header-drag-header-item"
        />
      </>
    </Modal>
  );
};

export default CustomHeaderModal;