qiushouGoodsHouTai/src/pages/A2Goods/A2Register/A2SelectModal/index.tsx

import React, { useCallback, useEffect, useMemo, useState } from "react";
import styles from "./index.module.scss";
import { Button, Cascader, Input, Modal, Popconfirm, Table } from "antd";
import {
  A2GoodObjTit,
  A2GoodObjTxt,
  statusTxtObj,
  storageStatusTxtObj,
} from "../../data";
import { A2tableType } from "@/types";
import { A2_APIresList } from "@/store/action/A2Goods";
import { MessageFu } from "@/utils/message";
import { useDispatch, useSelector } from "react-redux";
import { API_roomTree } from "@/store/action/A4Roomset";
import { RootState } from "@/store";

type Props = {
  oldList: A2tableType[]; //外层的表格数据，用来和 isAcList  同步
  upTableFu: (itemArr: A2tableType[]) => void;
  closeFu: () => void;
  myType: "ZX" | "RK" | "YK" | "CK";
};

function A2SelectModal({ oldList, upTableFu, closeFu, myType }: Props) {
  const dispatch = useDispatch();

  // 获取下拉框树结构
  useEffect(() => {
    dispatch(API_roomTree());
  }, [dispatch]);

  const roomTree = useSelector((state: RootState) => state.A4Roomset.roomTree);

  // 搜索框
  const [txt, setTxt] = useState("");
  const [txtRes, setTxtRes] = useState("");

  // 所有藏品的数据
  const [listAll, setListAll] = useState<A2tableType[]>([]);

  // 在页面展示的藏品数据
  const [list, setList] = useState<A2tableType[]>([]);

  useEffect(() => {
    if (!txtRes) setList(listAll);
    else
      setList(
        listAll.filter((v) => v.name.includes(txtRes) || v.num.includes(txtRes))
      );
  }, [listAll, txtRes]);

  const getListAllFu = useCallback(async () => {
    const res = await A2_APIresList({ searchKey: "", type: myType });
    if (res.code === 0) setListAll(res.data);
  }, [myType]);

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

  // 已经添加的藏品数组
  const [isAcList, setIsAcList] = useState<A2tableType[]>([]);

  useEffect(() => {
    setIsAcList(oldList);
  }, [oldList]);

  const columns = useMemo(() => {
    let arr: any = [];
    arr = [
      {
        title: "编号",
        dataIndex: "num",
      },
      {
        title: "名称",
        dataIndex: "name",
      },
      {
        title: "级别",
        dataIndex: "dictLevel",
      },
      {
        title: "藏品状态",
        render: (item: A2tableType) =>
          Reflect.get(statusTxtObj, item.status) || "-",
      },
      {
        title: "库存状态",
        render: (item: A2tableType) =>
          Reflect.get(storageStatusTxtObj, item.storageStatus) || "-",
      },
    ];

    if (["YK", "CK"].includes(myType)) {
      arr.push({
        title: "库房位置",
        render: (item: A2tableType) => (
          <>
            <Cascader
              // 自定义字段
              fieldNames={{
                label: "name",
                value: "id",
                children: "children",
              }}
              style={{ width: "100%" }}
              options={roomTree}
              placeholder=""
              value={
                item.storageIds
                  ? item.storageIds.split(",").map((v) => Number(v))
                  : undefined
              }
              onChange={(e) => console.log(e)}
            />
          </>
        ),
      });
    }

    arr.push({
      title: "操作",
      render: (item: A2tableType) => (
        <>
          {isAcList.some((v) => v.id === item.id) ? (
            <Button
              size="small"
              type="text"
              onClick={() =>
                setIsAcList(isAcList.filter((v) => v.id !== item.id))
              }
            >
              取消添加
            </Button>
          ) : (
            <Button
              size="small"
              type="text"
              onClick={() => setIsAcList([...isAcList, item])}
            >
              添加
            </Button>
          )}
        </>
      ),
    });

    return arr;
  }, [isAcList, myType, roomTree]);

  return (
    <Modal
      wrapClassName={styles.A2SelectModal}
      open={true}
      title={
        <>
          添加藏品 - {Reflect.get(A2GoodObjTxt, myType)}&emsp;
          <span className="A2Stit">
            仅支持添加状态为 [已登记] {Reflect.get(A2GoodObjTit, myType)} 的藏品
          </span>
        </>
      }
      footer={
        [] // 设置footer为空，去掉 取消 确定默认按钮
      }
    >
      <div className="A2Cmain">
        {/* 搜索框 */}
        <div className="A2Cinput">
          <Input
            style={{ width: 260 }}
            placeholder="请输入藏品编号/名称，最多10字"
            maxLength={10}
            value={txt}
            onChange={(e) => setTxt(e.target.value.replace(/\s+/g, ""))}
          />
          &emsp;
          <Button type="primary" onClick={() => setTxtRes(txt)}>
            搜索
          </Button>
        </div>

        <div className="A2CtableBox">
          {/* 左边的未选中的表格 */}
          <div className="A2Ctable">
            <div className="A2Ctit">
              共计&nbsp;<span>{listAll.length}</span>
              &nbsp;个藏品。
            </div>

            <Table
              size="small"
              scroll={{ y: 400 }}
              dataSource={list.filter(
                (v) => !isAcList.map((c) => c.id).includes(v.id)
              )}
              columns={columns}
              rowKey="id"
              pagination={false}
            />
          </div>
          {/* 右边表格 */}
          <div className="A2Ctable">
            <div className="A2Ctit">
              已添加&nbsp;<span>{isAcList.length}</span>
              &nbsp;个藏品。
            </div>

            <Table
              size="small"
              scroll={{ y: 400 }}
              dataSource={isAcList}
              columns={columns}
              rowKey="id"
              pagination={false}
            />
          </div>
        </div>

        {/* 按钮 */}
        <div className="A2Cbtn">
          <Button
            type="primary"
            disabled={isAcList.length <= 0}
            onClick={() => {
              upTableFu(isAcList);
              MessageFu.success("添加成功!");
              closeFu();
            }}
          >
            提交
          </Button>
          &emsp;
          <Popconfirm
            title="放弃编辑后，信息将不会保存!"
            okText="放弃"
            cancelText="取消"
            onConfirm={closeFu}
            okButtonProps={{ loading: false }}
          >
            <Button>取消</Button>
          </Popconfirm>
        </div>
      </div>
    </Modal>
  );
}

const MemoA2SelectModal = React.memo(A2SelectModal);

export default MemoA2SelectModal;