sw-project-interior/src/pages/A1Project/A1Inner/A1ILack.tsx

import React, { useCallback, useEffect, useState } from "react";
import styles from "./index.module.scss";
import { Button, Checkbox, Empty, Input, Modal, Popconfirm } from "antd";
import { A1_APIIgetLack, A1_APIIsaveLack } from "@/store/action/A1Project";
import { A1IlackType } from "@/types";
import classNames from "classnames";
import { MessageFu } from "@/utils/message";

type Props = {
  closeFu: () => void;
  addSuFu: () => void;
  projectId: number;
};

function A1ILack({ closeFu, addSuFu, projectId }: Props) {
  // 进来获取 根据 项目id 获取 列表信息

  const getInfoFu = useCallback(async () => {
    const res = await A1_APIIgetLack(projectId);

    if (res.code === 0) {
      const arr: A1IlackType[] = res.data;
      setData(
        arr.map((v) => ({
          ...v,
          done: false,
        }))
      );
    }
  }, [projectId]);

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

  // 渲染的数组
  const [data, setData] = useState<A1IlackType[]>([]);

  // 勾选框的变化
  const selceFu = useCallback(
    (id: number, val: boolean) => {
      setData(
        data.map((v) => ({
          ...v,
          done: v.attributeId === id ? val : v.done,
          desc:v.attributeId === id&&v.desc==='-未填信息'?'':v.desc
        }))
      );
    },
    [data]
  );

  // 输入框的变化
  // setValue(e.target.value.replace(/\s+/g, ""))
  const descChangeFu = useCallback(
    (id: number, val: string) => {
      setData(
        data.map((v) => ({
          ...v,
          desc: v.attributeId === id ? val.replace(/\s+/g, "") : v.desc,
        }))
      );
    },
    [data]
  );

  // 点击确定
  const btnOk = useCallback(async () => {
    // 过滤掉已经 上传的 没有输入的
    const arr = data.filter((v) => v.done);

    const arr2 = arr.map((v) => ({
      attributeId: v.attributeId,
      description: v.desc || "-未填信息",
    }));

    const res = await A1_APIIsaveLack(projectId, arr2);

    if (res.code === 0) {
      if (arr.length > 0) MessageFu.success("登记成功!");

      addSuFu();
      closeFu();
    }
  }, [addSuFu, closeFu, data, projectId]);

  return (
    <Modal
      wrapClassName={styles.A1ILack}
      destroyOnClose
      open={true}
      title="登记缺失文件"
      footer={
        [] // 设置footer为空，去掉 取消 确定默认按钮
      }
    >
      <div className="A1ILmain">
        <div className="A1ILmain1">请勾选后再填写</div>

        {/* 主体 */}

        {data.length >= 1 ? (
          <div className="A1ILmainC">
            {data.map((v) => (
              <div className="A1ILmainCRow" key={v.attributeId}>
                <div
                  className={classNames(
                    "A1ILmainCRow1",
                    v.hasUpload ? "A1ILmainCRow1No" : ""
                  )}
                >
                  <Checkbox
                    checked={v.done}
                    onChange={(e) => selceFu(v.attributeId, e.target.checked)}
                  >
                    <div className="A1ILmainCRow1Txt" title={v.attributeName}>
                      {v.attributeName}
                    </div>
                    <div className="A1ILmainCRow1Txt2">：</div>
                  </Checkbox>
                </div>
                <div
                  className={classNames(
                    "A1ILmainCRow2",
                    v.desc === "-未填信息" ? "A1ILmainCRow2NoTxt" : ""
                  )}
                >
                  {v.hasUpload ? (
                    "已上传"
                  ) : (
                    <Input
                      disabled={!v.done}
                      placeholder="请输入缺失原因"
                      maxLength={100}
                      showCount
                      value={v.desc}
                      onChange={(e) =>
                        descChangeFu(v.attributeId, e.target.value)
                      }
                    />
                  )}
                </div>
              </div>
            ))}
          </div>
        ) : (
          <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
        )}

        {/* 底部按钮 */}
        <div className="A1ILbtn">
          {data.length >= 1 ? (
            <>
              <Popconfirm
                title="放弃编辑后，信息将不会保存!"
                okText="放弃"
                cancelText="取消"
                onConfirm={closeFu}
                okButtonProps={{ loading: false }}
              >
                <Button>取消</Button>
              </Popconfirm>
              &emsp;
              <Button
                type="primary"
                onClick={btnOk}
                disabled={data.filter((v) => v.done).length < 1}
              >
                确定
              </Button>
            </>
          ) : (
            <Button onClick={closeFu}> 取消</Button>
          )}
        </div>
      </div>
    </Modal>
  );
}

const MemoA1ILack = React.memo(A1ILack);

export default MemoA1ILack;