我人都写傻了

src/pages/A2Goods/A2Register/A2CancelModal/index.module.scss

@@ -0,0 +1,53 @@
+.A2CancelModal {
+  :global {
+    .ant-modal-close {
+      display: none;
+    }
+
+    .ant-modal {
+      width: 1000px !important;
+    }
+
+    .A2Cmain {
+      padding-top: 20px;
+      border-top: 1px solid #ccc;
+
+      .A2Cinput {
+        display: flex;
+      }
+
+      .A2Ctit {
+        font-size: 14px;
+        color: #999;
+        margin: 8px 0 5px;
+
+        &>span {
+          color: var(--themeColor);
+        }
+      }
+
+      .A2Ctable {
+        margin-top: 15px;
+
+        .ant-table-body {
+          max-height: 400px;
+          min-height: 100px;
+          overflow-y: auto !important;
+          overflow-y: overlay !important;
+        }
+
+        .ant-table-cell {
+          text-align: center !important;
+        }
+        .ant-btn-text {
+          color: var(--themeColor);
+        }
+      }
+
+      .A2Cbtn {
+        margin-top: 20px;
+        text-align: center;
+      }
+    }
+  }
+}

src/pages/A2Goods/A2Register/A2CancelModal/index.tsx

@@ -0,0 +1,181 @@
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import styles from "./index.module.scss";
+import { Button, Input, Modal, Popconfirm, Table } from "antd";
+import { statusTxtObj, storageStatusTxtObj } from "../../data";
+import { A2tableType } from "@/types";
+import { A2_APIresList } from "@/store/action/A2Goods";
+import { MessageFu } from "@/utils/message";
+
+type Props = {
+  oldList: A2tableType[]; //外层的表格数据，用来和 isAcList  同步
+  upTableFu: (itemArr: A2tableType[]) => void;
+  closeFu: () => void;
+};
+
+function A2CancelModal({ oldList, upTableFu, closeFu }: Props) {
+  // 搜索框
+  const [txt, setTxt] = useState("");
+  const [txtRes, setTxtRes] = useState("");
+
+  // 所有藏品的数据
+  const [listAll, setListAll] = useState<A2tableType[]>([]);
+
+  // 在页面展示的藏品数据
+  const [list, setList] = useState<A2tableType[]>([]);
+
+  useEffect(() => {
+    if (!txtRes) setList([]);
+    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: "ZX" });
+    if (res.code === 0) setListAll(res.data);
+  }, []);
+
+  useEffect(() => {
+    getListAllFu();
+  }, [getListAllFu]);
+
+  // 已经添加的藏品数组
+  const [isAcList, setIsAcList] = useState<A2tableType[]>([]);
+
+  useEffect(() => {
+    setIsAcList(oldList);
+  }, [oldList]);
+
+  const columns = useMemo(() => {
+    return [
+      {
+        title: "编号",
+        dataIndex: "num",
+      },
+      {
+        title: "名称",
+        dataIndex: "name",
+      },
+      {
+        title: "时代",
+        render: (item: A2tableType) => item.dictAge || "（空）",
+      },
+      {
+        title: "级别",
+        dataIndex: "dictLevel",
+      },
+      {
+        title: "藏品状态",
+        render: (item: A2tableType) =>
+          Reflect.get(statusTxtObj, item.status) || "-",
+      },
+      {
+        title: "库存状态",
+        render: (item: A2tableType) =>
+          Reflect.get(storageStatusTxtObj, item.storageStatus) || "-",
+      },
+      {
+        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>
+            )}
+          </>
+        ),
+      },
+    ];
+  }, [isAcList]);
+
+  return (
+    <Modal
+      wrapClassName={styles.A2CancelModal}
+      open={true}
+      title="添加注销藏品"
+      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="A2Ctit">
+          当前已添加 &nbsp;<span>{isAcList.length}</span>
+          &nbsp;个。仅支持添加状态为[已登记][未入库/已入库/已出库]的藏品
+        </div>
+
+        {/* 表格主体 */}
+        <div className="A2Ctable">
+          <Table
+            size="small"
+            scroll={{ y: 400 }}
+            dataSource={list}
+            columns={columns}
+            rowKey="id"
+            pagination={false}
+          />
+        </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 MemoA2CancelModal = React.memo(A2CancelModal);
+
+export default MemoA2CancelModal;

src/pages/A2Goods/A2Register/index.tsx

@@ -19,15 +19,24 @@ import {
 import history from "@/utils/history";
 import { A2tableType } from "@/types";
 import ZlistTable from "@/components/ZlistTable";
+import A2CancelModal from "./A2CancelModal";
+import B1Look from "@/pages/B1Submit/B1Look";
 
 type Props = {
   closeFu: () => void;
   upInfoFu: () => void;
   outInfo: A2addInfoType;
-  type: "DJ" | "ZX";
+  myType: "DJ" | "ZX";
+  // 从藏品查看页面点击注销进来
+  isLookItem?: A2tableType;
 };
 
-function A2Register({ closeFu, outInfo, upInfoFu, type }: Props) {
+function A2Register({ closeFu, outInfo, upInfoFu, myType, isLookItem }: Props) {
+  // 从 藏品查看也进来，直接把这条藏品信息添加到表格
+  useEffect(() => {
+    if (isLookItem && isLookItem.id) setTableList([isLookItem]);
+  }, [isLookItem]);
+
   // 记录删除了的所有id集合
   const delIdArr = useRef<number[]>([]);
 
@@ -63,7 +72,7 @@ function A2Register({ closeFu, outInfo, upInfoFu, type }: Props) {
         description: topValue,
         goodsIds: tableList.map((v) => v.id).join(","),
         status,
-        type: "DJ",
+        type: myType,
       };
 
       const res1 = await A2_APIaddWai(obj);
@@ -74,29 +83,41 @@ function A2Register({ closeFu, outInfo, upInfoFu, type }: Props) {
       }
 
       if (res1.code === 0) {
-        MessageFu.success(`${outInfo.txt}成功!`);
+        MessageFu.success(`操作成功!`);
         if (window.location.hash.includes("/submit")) {
-          upInfoFu();
-          closeFu();
+          history.replace("/404");
+          window.setTimeout(() => {
+            history.push("/submit");
+          }, 200);
         } else history.push("/submit");
       }
     },
-    [closeFu, outInfo.id, outInfo.txt, tableList, topValue, upInfoFu]
+    [myType, outInfo.id, outInfo.txt, tableList, topValue]
   );
 
+  // 点击表格的查看
+  const [lookId, setLookId] = useState(0);
+
   // 表格的操作模块的列
   const listTableBtn = useMemo(() => {
     return {
       title: "操作",
       render: (item: A2tableType) => (
         <>
-          <Button
-            size="small"
-            type="text"
-            onClick={() => setAddInfo({ id: item.id, txt: "编辑" })}
-          >
-            编辑
-          </Button>
+          {myType === "DJ" ? (
+            <Button
+              size="small"
+              type="text"
+              onClick={() => setAddInfo({ id: item.id, txt: "编辑" })}
+            >
+              编辑
+            </Button>
+          ) : (
+            <Button size="small" type="text" onClick={() => setLookId(item.id)}>
+              查看
+            </Button>
+          )}
+
           <Popconfirm
             title="删除后无法恢复，是否删除?"
             okText="删除"
@@ -115,7 +136,7 @@ function A2Register({ closeFu, outInfo, upInfoFu, type }: Props) {
         </>
       ),
     };
-  }, [tableList]);
+  }, [tableList, myType]);
 
   // 新增和编辑
   const [addInfo, setAddInfo] = useState<A2addInfoType>({ id: 0, txt: "" });
@@ -134,13 +155,13 @@ function A2Register({ closeFu, outInfo, upInfoFu, type }: Props) {
   return (
     <div className={styles.A2Register}>
       <div className="A2Rtop">
-        {type === "ZX" ? (
+        {myType === "ZX" ? (
           <div className="A2RtopTit">
             注：注销后，将无法在清单中查询到此藏品；请谨慎操作
           </div>
         ) : null}
         <div className="A2RTitle">
-          {type === "DJ" ? "登记申请" : "注销申请"}
+          {myType === "DJ" ? "登记申请" : "注销申请"}
         </div>
         <div className="A2Rtop1">申请说明：</div>
         <div className="A2Rtop2">
@@ -194,16 +215,26 @@ function A2Register({ closeFu, outInfo, upInfoFu, type }: Props) {
       {/* 点击新增和编辑出来的弹窗 --- 登记申请*/}
       {addInfo.id ? (
         <>
-          {type === "DJ" ? (
+          {myType === "DJ" ? (
             <A2AddModal
               addInfo={addInfo}
               closeFu={() => setAddInfo({ id: 0, txt: "" })}
               upTableFu={(item, flag) => addOrEditSuccFu(item, flag)}
             />
-          ) : null}
-          {/* 待完善 ZX 新增 和 编辑 的页面*/}
+          ) : (
+            <A2CancelModal
+              oldList={tableList}
+              closeFu={() => setAddInfo({ id: 0, txt: "" })}
+              upTableFu={(itemArr) => setTableList(itemArr)}
+            />
+          )}
         </>
       ) : null}
+
+      {/* 点击表格的查看 */}
+      {lookId ? (
+        <B1Look goodsId={lookId} closeFu={() => setLookId(0)} isCance={true} />
+      ) : null}
     </div>
   );
 }

src/pages/A2Goods/index.tsx

@@ -257,7 +257,7 @@ function A2Goods() {
           closeFu={() => setOutInfo({ id: 0, txt: "" })}
           outInfo={outInfo}
           upInfoFu={() => {}}
-          type={outType}
+          myType={outType}
         />
       ) : null}
 

src/pages/A4Roomset/A4SonAdd/index.module.scss

@@ -36,6 +36,9 @@
       .ant-table-cell {
         text-align: center !important;
       }
+      .ant-btn-text {
+        color: var(--themeColor);
+      }
     }
 
   }

src/pages/B1Submit/B1Info/index.tsx

@@ -389,7 +389,7 @@ function B1Info({ closeFu, lookId, pageKey, upTableFu }: Props) {
             closeFu={() => setOutInfo({ id: 0, txt: "" })}
             outInfo={outInfo}
             upInfoFu={() => getInfoFu(info.id, true)}
-            type={info.type}
+            myType={info.type}
           />
         ) : null
       ) : null}

src/pages/B1Submit/B1Look/index.module.scss

@@ -164,6 +164,7 @@
       .ant-table-cell {
         text-align: center !important;
       }
+      
 
       .B1Lbtn {
         margin-top: 20px;

src/pages/B1Submit/B1Look/index.tsx

@@ -18,13 +18,15 @@ import { B1LbtnKey } from "../data";
 import A2AddModal from "@/pages/A2Goods/A2Register/A2AddModal";
 import B1Log from "./B1Log";
 import { A2tableType } from "@/types";
+import A2Register from "@/pages/A2Goods/A2Register";
 
 type Props = {
   goodsId: number;
   closeFu: () => void;
+  isCance?: Boolean; //从藏品注销或其他模块进来，不展示操作按钮
 };
 
-function B1Look({ closeFu, goodsId }: Props) {
+function B1Look({ closeFu, goodsId, isCance }: Props) {
   // isFileDonw 全局的是否允许下载
   const isFileDonw = useSelector(
     (state: RootState) => state.A0Layout.isFileDonw
@@ -192,7 +194,7 @@ function B1Look({ closeFu, goodsId }: Props) {
               </Button>
               &emsp;
               {/* 只有已登记的时候才有操作按钮 */}
-              {info.status === 2 ? (
+              {info.status === 2 && !isCance ? (
                 <>
                   <Popover placement="bottom" content={btnArr}>
                     <Button type="primary">
@@ -295,6 +297,18 @@ function B1Look({ closeFu, goodsId }: Props) {
           idOldToNew={true}
         />
       ) : null}
+
+      {/* 点击注销出现的弹窗 */}
+      {btnKey.txt === "注销" ? (
+        <A2Register
+          outInfo={{ id: btnKey.id, txt: "新增" }}
+          upInfoFu={() => {}}
+          closeFu={() => setBtnKey({ id: 0, txt: "" })}
+          myType="ZX"
+          // 把这一条藏品信息传进去
+          isLookItem={info}
+        />
+      ) : null}
     </div>
   );
 }

src/store/action/A2Goods.ts

@@ -27,7 +27,7 @@ export const A2_APIaddSon = (data: any) => {
 /**
  * 通过id获取单个藏品详情（内）
  */
-export const A2_APIgetInfoSon = (id:number) => {
+export const A2_APIgetInfoSon = (id: number) => {
   return http.get(`cms/goods/detail/${id}`);
 };
 
@@ -48,21 +48,27 @@ export const A2_APIaddWai = (data: any) => {
 /**
  * 通过id获取详情（外 1对多）
  */
-export const A2_APIgetInfoWai = (orderId:number) => {
+export const A2_APIgetInfoWai = (orderId: number) => {
   return http.get(`cms/order/detail/${orderId}`);
 };
 
 /**
  * 待审核  撤回 =》待提交 （审核 撤回）
  */
-export const A2_APIaudit = (data:any) => {
-  return http.post('cms/order/audit',data);
+export const A2_APIaudit = (data: any) => {
+  return http.post("cms/order/audit", data);
 };
 
 /**
  * 待审核  撤回 =》待提交 （审核 撤回）
  */
-export const A2_APIoldToNew = (data:any) => {
-  return http.post('cms/order/save/edit',data);
+export const A2_APIoldToNew = (data: any) => {
+  return http.post("cms/order/save/edit", data);
 };
 
+/**
+ * RK:入库 | CK:出库 | ZX:注销 | YK：移库的藏品选择
+ */
+export const A2_APIresList = (data: any) => {
+  return http.post("cms/order/goods/getList", data);
+};