sw-project-interior/src/pages/A1Project/A1Down/index.tsx

import React, { useCallback, useEffect, useState } from "react";
import styles from "./index.module.scss";
import { Button, Checkbox, Empty, Modal } from "antd";
import { A2_APIgetDownList } from "@/store/action/A1Project";
import { A1getStorage, A1setStorage } from "@/utils/storage";
import { MessageFu } from "@/utils/message";

type SelectType = {
  id: number;
  label: string;
  done: boolean;
};

type Props = {
  downId: { id: number; txt: string };
  closeFu: () => void;
};

function A1Down({ downId, closeFu }: Props) {
  const getInfoFu = useCallback(async (id: number) => {
    const res = await A2_APIgetDownList(id);
    if (res.code === 0) {
      // setCheckedList(res.data || []);
      let arr = [
        { id: 1, label: "需求规格说明书", done: false },
        { id: 2, label: "重要文件1", done: false },
        { id: 3, label: "未分类", done: false },
      ];

      const storeIds = A1getStorage();

      if (storeIds) {
        arr = arr.map((v) => ({
          ...v,
          done: storeIds.includes(v.id) ? true : false,
        }));
      }

      setCheckedList(arr);
    }
  }, []);

  useEffect(() => {
    getInfoFu(downId.id);
  }, [getInfoFu, downId.id]);

  const [checkedList, setCheckedList] = useState([] as SelectType[]);

  // 全选的状态
  const [indeterminate, setIndeterminate] = useState(false);
  const [checkAll, setCheckAll] = useState(false);

  const onCheckAllChange = useCallback(
    (val: boolean) => {
      const newArr = checkedList.map((v) => ({
        ...v,
        done: val,
      }));

      setCheckedList(newArr);
      setCheckAll(val);
    },
    [checkedList]
  );

  const onChange = useCallback(
    (val: boolean, id: number) => {
      setCheckedList(
        checkedList.map((v) => ({
          ...v,
          done: v.id === id ? val : v.done,
        }))
      );
    },
    [checkedList]
  );

  useEffect(() => {
    const newArr = checkedList.filter((v) => v.done);

    setIndeterminate(!!newArr.length && newArr.length < checkedList.length);
    setCheckAll(newArr.length === checkedList.length);
  }, [checkedList]);

  // 点击提交
  const btnOkFu = useCallback(() => {
    console.log("-------", checkedList);
  }, [checkedList]);

  // 点击保存设置 到 本地
  const clickStoreFu = useCallback(() => {
    const arr = checkedList.filter((v) => v.done).map((v) => v.id);
    A1setStorage(arr);
    MessageFu.success("保存设置到本地成功!");
  }, [checkedList]);

  return (
    <Modal
      wrapClassName={styles.A1Down}
      destroyOnClose
      open={true}
      title={downId.txt}
      footer={
        [] // 设置footer为空，去掉 取消 确定默认按钮
      }
    >
      <div className="A1DownMain">
        {checkedList.length ? (
          <>
            <h3>请选择下载的项目文件类型</h3>
            <Checkbox
              indeterminate={indeterminate}
              onChange={(e) => onCheckAllChange(e.target.checked)}
              checked={checkAll}
            >
              全选
            </Checkbox>
          </>
        ) : null}

        {checkedList.length ? (
          <div className="A1DownMainC">
            {checkedList.map((v) => (
              <div className="A1DownMainCRow" key={v.id} title={v.label}>
                <Checkbox
                  onChange={(e) => onChange(e.target.checked, v.id)}
                  checked={v.done}
                >
                  {v.label}
                </Checkbox>
              </div>
            ))}
          </div>
        ) : (
          <>
            <br />
            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
          </>
        )}

        <div className="A1DownBtn">
          {checkedList.length ? (
            <div className="A1DownBtn1" onClick={clickStoreFu}>
              <Button disabled={checkedList.filter((v) => v.done).length < 1}>
                保存设置
              </Button>
            </div>
          ) : (
            <span></span>
          )}

          <div className="A1DownBtn2">
            <Button onClick={closeFu}>取消</Button>
            &emsp;
            <Button
              type="primary"
              onClick={btnOkFu}
              disabled={checkedList.filter((v) => v.done).length < 1}
            >
              提交
            </Button>
          </div>
        </div>
      </div>
    </Modal>
  );
}

const MemoA1Down = React.memo(A1Down);

export default MemoA1Down;