完成初版

src/components/ZlistTable.tsx

@@ -6,7 +6,7 @@ import ImageLazy from "./ImageLazy";
 
 type Props = {
   list: A2tableType[];
-  btnDom: any;
+  btnDom: any[];
   y: number;
 };
 
@@ -51,8 +51,7 @@ function ZlistTable({ btnDom, list, y }: Props) {
           Reflect.get(storageStatusTxtObj, item.storageStatus) || "-",
       },
     ] as any[];
-    arr.push(btnDom);
-    return arr;
+    return [...arr,...btnDom];
   }, [btnDom]);
 
   return (

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

@@ -22,46 +22,68 @@
         display: flex;
       }
 
-.A2CtableBox{
-  display: flex;
-  .A2Ctable {
-    width: calc(50% - 10px);
-    margin-top: 10px;
-    border: 1px solid #ccc;
-    padding: 10px;
-
-    &:nth-of-type(2){
-      margin-left: 20px;
-    }
+      .A2CtableBox {
+        display: flex;
 
-    .A2Ctit {
-      font-size: 14px;
-      color: #999;
-      margin-bottom: 5px;
-      &>span {
-        color: var(--themeColor);
-      }
-    }
+        .A2Ctable {
+          width: calc(50% - 10px);
+          margin-top: 10px;
+          border: 1px solid #ccc;
+          padding: 10px;
+          border-radius: 8px;
 
+          &:nth-of-type(2) {
+            margin-left: 20px;
+          }
 
-    .ant-table-body {
-      max-height: 400px;
-      min-height: 100px;
-      overflow-y: auto !important;
-      overflow-y: overlay !important;
-    }
+          .A2Ctit {
+            font-size: 14px;
+            color: #999;
+            margin-bottom: 5px;
 
-    .ant-table-cell {
-      text-align: center !important;
-    }
+            &>span {
+              color: var(--themeColor);
+            }
+          }
+
+
+          .ant-table-body {
+            max-height: 400px;
+            min-height: 100px;
+            overflow-y: auto !important;
+            overflow-y: overlay !important;
+
+            .ant-cascader {
+              // pointer-events: none;
+              .ant-select-selector {
+                border: none;
+                padding: 0;
+              }
+              .ant-select-selection-item{
+                padding: 0;
+              }
+              .ant-select-clear{
+                opacity: 0 ;
+              }
+
+              .ant-select-arrow {
+                opacity: 0;
+              }
+            }
+
+          }
+
+          .ant-table-cell {
+            text-align: center !important;
+          }
+
+          .ant-btn-text {
+            color: var(--themeColor);
+          }
+        }
+      }
 
-    .ant-btn-text {
-      color: var(--themeColor);
-    }
-  }
-}
 
- 
 
       .A2Cbtn {
         margin-top: 20px;

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

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import styles from "./index.module.scss";
-import { Button, Input, Modal, Popconfirm, Table } from "antd";
+import { Button, Cascader, Input, Modal, Popconfirm, Table } from "antd";
 import {
   A2GoodObjTit,
   A2GoodObjTxt,
@@ -10,6 +10,9 @@ import {
 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  同步
@@ -19,6 +22,15 @@ type Props = {
 };
 
 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("");
@@ -54,7 +66,8 @@ function A2SelectModal({ oldList, upTableFu, closeFu, myType }: Props) {
   }, [oldList]);
 
   const columns = useMemo(() => {
-    return [
+    let arr: any = [];
+    arr = [
       {
         title: "编号",
         dataIndex: "num",
@@ -64,10 +77,6 @@ function A2SelectModal({ oldList, upTableFu, closeFu, myType }: Props) {
         dataIndex: "name",
       },
       {
-        title: "时代",
-        render: (item: A2tableType) => item.dictAge || "（空）",
-      },
-      {
         title: "级别",
         dataIndex: "dictLevel",
       },
@@ -81,34 +90,64 @@ function A2SelectModal({ oldList, upTableFu, closeFu, myType }: Props) {
         render: (item: A2tableType) =>
           Reflect.get(storageStatusTxtObj, item.storageStatus) || "-",
       },
-      {
-        title: "操作",
+    ];
+
+    if (["YK", "CK"].includes(myType)) {
+      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>
-            )}
+            <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)}
+            />
           </>
         ),
-      },
-    ];
-  }, [isAcList]);
+      });
+    }
+
+    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

src/pages/A2Goods/A2Register/index.tsx

@@ -99,42 +99,48 @@ function A2Register({ closeFu, outInfo, myType, isLookItem }: Props) {
 
   // 表格的操作模块的列
   const listTableBtn = useMemo(() => {
-    return {
-      title: "操作",
-      render: (item: A2tableType) => (
-        <>
-          {myType === "DJ" ? (
-            <Button
-              size="small"
-              type="text"
-              onClick={() => setAddInfo({ id: item.id, txt: "编辑" })}
+    return [
+      {
+        title: "操作",
+        render: (item: A2tableType) => (
+          <>
+            {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="删除"
+              cancelText="取消"
+              onConfirm={() => {
+                delIdArr.current.push(item.id);
+                setTableList(tableList.filter((v) => v.id !== item.id));
+                MessageFu.success("删除成功!");
+              }}
+              okButtonProps={{ loading: false }}
             >
-              编辑
-            </Button>
-          ) : (
-            <Button size="small" type="text" onClick={() => setLookId(item.id)}>
-              查看
-            </Button>
-          )}
-
-          <Popconfirm
-            title="删除后无法恢复，是否删除?"
-            okText="删除"
-            cancelText="取消"
-            onConfirm={() => {
-              delIdArr.current.push(item.id);
-              setTableList(tableList.filter((v) => v.id !== item.id));
-              MessageFu.success("删除成功!");
-            }}
-            okButtonProps={{ loading: false }}
-          >
-            <Button size="small" type="text" danger>
-              删除
-            </Button>
-          </Popconfirm>
-        </>
-      ),
-    };
+              <Button size="small" type="text" danger>
+                删除
+              </Button>
+            </Popconfirm>
+          </>
+        ),
+      },
+    ];
   }, [tableList, myType]);
 
   // 新增和编辑

src/pages/A3Stock/A3RoomStatu/index.module.scss

@@ -50,18 +50,23 @@
 
       .A3RtopRow1 {
         margin-bottom: 10px;
-        &>div{
+
+        &>div {
           display: flex;
           align-items: center;
           margin-right: 20px;
         }
-        .A3RtopRowSonYK{
-          .ant-cascader{
+
+        .A3RtopRowSonYK {
+          .ant-cascader {
             pointer-events: none;
-            .ant-select-selector{
+
+            .ant-select-selector {
               border: none;
+              // padding: 0;
             }
-            .ant-select-arrow{
+
+            .ant-select-arrow {
               opacity: 0;
             }
           }
@@ -75,6 +80,30 @@
       border-radius: 10px;
       padding: 18px 24px 24px;
 
+      // 表格里面的库房位置
+      .A3RTableDZ {
+        .ant-cascader {
+
+          // pointer-events: none;
+          .ant-select-selector {
+            border: none;
+            padding: 0;
+          }
+
+          .ant-select-selection-item {
+            padding: 0;
+          }
+
+          .ant-select-clear {
+            opacity: 0;
+          }
+
+          .ant-select-arrow {
+            opacity: 0;
+          }
+        }
+      }
+
       .A3Rtable1 {
         display: flex;
         justify-content: space-between;

src/pages/A3Stock/A3RoomStatu/index.tsx

@@ -86,6 +86,13 @@ function A3RoomStatu({ closeFu, outInfo, myType, isLookItem }: Props) {
     async (status: 0 | 1) => {
       if (!roomId && myType !== "CK") return MessageFu.warning("请选择库房!");
 
+      if (myType === "YK" && roomId) {
+        const newTxt = roomId.join(",");
+        if (tableList.some((v) => v.storageIds === newTxt)) {
+          return MessageFu.warning("有藏品库房位置和移库的位置相同!");
+        }
+      }
+
       const obj = {
         id:
           outInfo.txt === "新增" || statusRef.current === 2 ? null : outInfo.id,
@@ -121,7 +128,36 @@ function A3RoomStatu({ closeFu, outInfo, myType, isLookItem }: Props) {
 
   // 表格的操作模块的列
   const listTableBtn = useMemo(() => {
-    return {
+    let arr: any = [];
+
+    if (["YK", "CK"].includes(myType)) {
+      arr.push({
+        title: "库房位置",
+        render: (item: A2tableType) => (
+          <div className="A3RTableDZ">
+            <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)}
+            />
+          </div>
+        ),
+      });
+    }
+
+    arr.push({
       title: "操作",
       render: (item: A2tableType) => (
         <>
@@ -146,8 +182,10 @@ function A3RoomStatu({ closeFu, outInfo, myType, isLookItem }: Props) {
           </Popconfirm>
         </>
       ),
-    };
-  }, [tableList]);
+    });
+
+    return arr;
+  }, [myType, roomTree, tableList]);
 
   // 新增和编辑
   const [addInfo, setAddInfo] = useState<A2addInfoType>({ id: 0, txt: "" });

src/pages/A3Stock/data.ts

@@ -1,6 +1,6 @@
 export type A3selectType = {
   searchKey: string;
-  aaaa:string
+  storageId:number[]|undefined
   storageStatus: "" | 0 | 1 | 2 | 3 | 4;
   pageSize: number;
   pageNum: number;

src/pages/A3Stock/index.tsx

@@ -1,12 +1,22 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import styles from "./index.module.scss";
 import { Button, Cascader, Input, Select, Table } from "antd";
 import { useDispatch, useSelector } from "react-redux";
 import { A3roomStatuType, A3selectType } from "./data";
-import { options3 } from "../A2Goods/data";
+import { options3, statusTxtObj, storageStatusTxtObj } from "../A2Goods/data";
 import { API_roomTree } from "@/store/action/A4Roomset";
 import { RootState } from "@/store";
 import A3RoomStatu from "./A3RoomStatu";
+import { A3_APIgetList } from "@/store/action/A3Stock";
+import { A2tableType } from "@/types";
+import ImageLazy from "@/components/ImageLazy";
+import B1Look from "../B1Submit/B1Look";
 function A3Stock() {
   const dispatch = useDispatch();
 
@@ -20,12 +30,24 @@ function A3Stock() {
   // 筛选和分页
   const [tableSelect, setTableSelect] = useState<A3selectType>({
     searchKey: "",
-    aaaa: "",
+    storageId: undefined,
     storageStatus: "",
     pageSize: 10,
     pageNum: 1,
   });
 
+  const getListFu = useCallback(async () => {
+    const obj = {
+      ...tableSelect,
+      storageId: tableSelect.storageId ? tableSelect.storageId[0] : null,
+    };
+    dispatch(A3_APIgetList(obj));
+  }, [dispatch, tableSelect]);
+
+  useEffect(() => {
+    getListFu();
+  }, [getListFu]);
+
   // 输入框的改变
   const txtTimeRef = useRef(-1);
   const txtChangeFu = useCallback(
@@ -45,7 +67,7 @@ function A3Stock() {
     setInputKey(Date.now());
     setTableSelect({
       searchKey: "",
-      aaaa: "",
+      storageId: undefined,
       storageStatus: "",
       pageSize: 10,
       pageNum: 1,
@@ -55,6 +77,80 @@ function A3Stock() {
   // 入库 出库 移库
   const [roomStatu, setRoomStatu] = useState<A3roomStatuType>("");
 
+  const A3TableList = useSelector(
+    (state: RootState) => state.A3Stock.tableInfo
+  );
+
+  // 页码变化
+  const paginationChange = useCallback(
+    () => (pageNum: number, pageSize: number) => {
+      setTableSelect({ ...tableSelect, pageNum, pageSize });
+    },
+    [tableSelect]
+  );
+
+  const columns = useMemo(() => {
+    return [
+      {
+        title: "库房名称",
+        dataIndex: "storageName",
+      },
+      {
+        title: "库房编号",
+        dataIndex: "storageNum",
+      },
+      {
+        title: "货架编号",
+        dataIndex: "rackNum",
+      },
+      {
+        title: "缩略图",
+        render: (item: A2tableType) => (
+          <div className="tableImgAuto">
+            <ImageLazy width={60} height={60} src={item.thumb} />
+          </div>
+        ),
+      },
+      {
+        title: "藏品编号",
+        dataIndex: "num",
+      },
+      {
+        title: "名称",
+        dataIndex: "name",
+      },
+      {
+        title: "级别",
+        render: (item: A2tableType) => item.dictLevel || "（空）",
+      },
+      {
+        title: "藏品状态",
+        render: (item: A2tableType) =>
+          Reflect.get(statusTxtObj, item.status) || "（空）",
+      },
+      {
+        title: "库存状态",
+        render: (item: A2tableType) =>
+          Reflect.get(storageStatusTxtObj, item.storageStatus) || "（空）",
+      },
+      {
+        title: "入库时间",
+        dataIndex: "storageTime",
+      },
+      {
+        title: "操作",
+        render: (item: A2tableType) => (
+          <Button size="small" type="text" onClick={() => setLookId(item.id)}>
+            查看
+          </Button>
+        ),
+      },
+    ];
+  }, []);
+
+  // 点击表格的查看
+  const [lookId, setLookId] = useState(0);
+
   return (
     <div className={styles.A3Stock}>
       <div className="pageTitle">库存清单</div>
@@ -86,7 +182,14 @@ function A3Stock() {
               style={{ width: 160 }}
               options={roomTree}
               placeholder="全部"
-              onChange={(e) => console.log(123, e)}
+              value={tableSelect.storageId}
+              onChange={(e) =>
+                setTableSelect({
+                  ...tableSelect,
+                  storageId: e as number[],
+                  pageNum: 1,
+                })
+              }
             />
           </div>
 
@@ -120,9 +223,9 @@ function A3Stock() {
       </div>
       {/* 表格主体 */}
       <div className="tableMain">
-        {/* <Table
+        <Table
           scroll={{ y: 625 }}
-          dataSource={A2TableList.list}
+          dataSource={A3TableList.list}
           columns={columns}
           rowKey="id"
           pagination={{
@@ -131,10 +234,10 @@ function A3Stock() {
             showSizeChanger: true,
             current: tableSelect.pageNum,
             pageSize: tableSelect.pageSize,
-            total: A2TableList.total,
+            total: A3TableList.total,
             onChange: paginationChange(),
           }}
-        /> */}
+        />
       </div>
 
       {/* 点击入库 出库 移库 */}
@@ -146,6 +249,9 @@ function A3Stock() {
           pageFlag={true}
         />
       ) : null}
+
+      {/* 点击表格的查看 */}
+      {lookId ? <B1Look goodsId={lookId} closeFu={() => setLookId(0)} /> : null}
     </div>
   );
 }

src/pages/A4Roomset/A4SonAdd/index.tsx

@@ -42,11 +42,11 @@ function A4SonAdd({ closeFu, parentId }: Props) {
   const columns = useMemo(() => {
     return [
       {
-        title: "库房名称",
+        title: "货架名称",
         dataIndex: "name",
       },
       {
-        title: "库房编号",
+        title: "货架编号",
         dataIndex: "num",
       },
       {

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

@@ -102,6 +102,32 @@
       height: calc(100% - 277px);
       background-color: #fff;
       border-radius: 10px;
+
+      
+      // 表格里面的库房位置
+      .A3RTableDZ {
+        .ant-cascader {
+
+          // pointer-events: none;
+          .ant-select-selector {
+            border: none;
+            padding: 0;
+          }
+
+          .ant-select-selection-item {
+            padding: 0;
+          }
+
+          .ant-select-clear {
+            opacity: 0;
+          }
+
+          .ant-select-arrow {
+            opacity: 0;
+          }
+        }
+      }
+
     }
 
     // 入库 出库 移库 信息

src/pages/B1Submit/B1Info/index.tsx

@@ -235,7 +235,44 @@ function B1Info({ closeFu, lookId, pageKey, upTableFu }: Props) {
 
   // 申请登记 和 申请注销的 表格操作 模块
   const listTableBtn = useMemo(() => {
-    return {
+    const arr: any[] = [];
+
+    if (["YK", "CK"].includes(info.type)) {
+      arr.push({
+        title: "库房位置",
+        render: (item: A2tableType) => {
+          let keyTxt: any =
+            info.type === "CK" && info.status <= 1
+              ? item.storageIds
+              : item.beforeStorageIds;
+
+          keyTxt = keyTxt
+            ? keyTxt.split(",").map((v: any) => Number(v))
+            : undefined;
+
+          return (
+            // 待完善 这里逻辑有问题
+            <div className="A3RTableDZ">
+              <Cascader
+                // 自定义字段
+                fieldNames={{
+                  label: "name",
+                  value: "id",
+                  children: "children",
+                }}
+                style={{ width: "100%" }}
+                options={roomTree}
+                placeholder=""
+                value={keyTxt}
+                onChange={(e) => console.log(e)}
+              />
+            </div>
+          );
+        },
+      });
+    }
+
+    arr.push({
       title: "操作",
       render: (item: A2tableType) => (
         <>
@@ -244,8 +281,10 @@ function B1Info({ closeFu, lookId, pageKey, upTableFu }: Props) {
           </Button>
         </>
       ),
-    };
-  }, []);
+    });
+
+    return arr;
+  }, [info.status, info.type, roomTree]);
 
   return (
     <div className={styles.B1Info}>

src/store/action/A3Stock.ts

@@ -8,9 +8,11 @@ export const A3_APIgetList = (data: any) => {
   return async (dispatch: AppDispatch) => {
     const res = await http.post("cms/storage/goodsList", data);
     if (res.code === 0) {
-      // dispatch({ type: "A4/getList", payload: res.data });
-      console.log(123,res);
-      
+      const obj = {
+        list: res.data.records,
+        total: res.data.total,
+      };
+      dispatch({ type: "A3/getList", payload: obj });
     }
   };
 };

src/store/reducer/A3Stock.ts

@@ -0,0 +1,26 @@
+import { A2tableType } from "@/types";
+
+// 初始化状态
+const initState = {
+  // 列表数据
+  tableInfo: {
+    list: [] as A2tableType[],
+    total: 0,
+  },
+};
+
+// 定义 action 类型
+type Props = {
+  type: "A3/getList";
+  payload: { list: A2tableType[]; total: number };
+};
+
+export default function Reducer(state = initState, action: Props) {
+  switch (action.type) {
+    // 获取列表数据
+    case "A3/getList":
+      return { ...state, tableInfo: action.payload };
+    default:
+      return state;
+  }
+}

src/store/reducer/index.ts

@@ -4,6 +4,7 @@ import { combineReducers } from "redux";
 // 导入 登录 模块的 reducer
 import A0Layout from "./layout";
 import A2Goods from "./A2Goods";
+import A3Stock from "./A3Stock";
 import A4Roomset from "./A4Roomset";
 import B1Submit from "./B1Submit";
 import B2Audit from "./B2Audit";
@@ -14,6 +15,7 @@ import C2Log from "./C2Log";
 const rootReducer = combineReducers({
   A0Layout,
   A2Goods,
+  A3Stock,
   A4Roomset,
   B1Submit,
   B2Audit,

src/types/api/A2Goods.d.ts

@@ -18,8 +18,10 @@ export type A2tableType ={
 	size: string;
 	source: string;
 	status: number;
-	storageIds: string;
 	storageStatus: number;
 	thumb: string;
 	updateTime: string;
+	// 库房位置
+	storageIds:string
+	beforeStorageIds:string
 }