upp

src/pages/A2Goods/index.tsx

@@ -211,6 +211,7 @@ function A2Goods() {
             申请登记
           </Button>
           &emsp;
+          {/* 待完善 */}
           <Button type="primary">申请注销</Button>
         </div>
       </div>

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

@@ -0,0 +1,22 @@
+.A4AddModal {
+  :global {
+    .ant-modal-close {
+      display: none;
+    }
+
+    .ant-modal {
+      width: 800px !important;
+
+      .ant-modal-body {
+        border-top: 1px solid #ccc;
+        padding-top: 20px;
+      }
+
+      .A4Abtn {
+        text-align: center;
+      }
+
+    }
+
+  }
+}

src/pages/A4Roomset/A4AddModal/index.tsx

@@ -0,0 +1,119 @@
+import React, { useCallback, useEffect, useMemo, useRef } from "react";
+import styles from "./index.module.scss";
+import { Button, Form, FormInstance, Input, Modal, Popconfirm } from "antd";
+import { A4addInfoType } from "../data";
+import { A4_APIadd, A4_APIgetInfo } from "@/store/action/A4Roomset";
+import TextArea from "antd/es/input/TextArea";
+import { MessageFu } from "@/utils/message";
+
+type Props = {
+  addInfo: A4addInfoType;
+  closeFu: () => void;
+  upTableFu: () => void;
+};
+
+function A4AddModal({ addInfo, closeFu, upTableFu }: Props) {
+  const getInfoFu = useCallback(async (id: number) => {
+    const res = await A4_APIgetInfo(id);
+    if (res.code === 0) {
+      FormBoxRef.current?.setFieldsValue(res.data);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (addInfo.txt === "编辑") getInfoFu(addInfo.id);
+  }, [addInfo, getInfoFu]);
+
+  const titleTxt = useMemo(() => {
+    return addInfo.txt + (addInfo.level === 1 ? "库房" : "货架");
+  }, [addInfo.level, addInfo.txt]);
+
+  // 表单的ref
+  const FormBoxRef = useRef<FormInstance>(null);
+
+  // 没有通过校验
+  const onFinishFailed = useCallback(() => {}, []);
+
+  // 通过校验点击确定
+  const onFinish = useCallback(
+    async (value: any) => {
+      const obj = {
+        ...value,
+        id: addInfo.txt === "编辑" ? addInfo.id : null,
+        level: addInfo.level,
+        parentId: addInfo.parentId,
+      };
+      const res = await A4_APIadd(obj);
+      if (res.code === 0) {
+        MessageFu.success(titleTxt + "成功!");
+        upTableFu();
+        closeFu();
+      }
+    },
+    [addInfo, titleTxt, upTableFu, closeFu]
+  );
+
+  return (
+    <Modal
+      wrapClassName={styles.A4AddModal}
+      open={true}
+      title={titleTxt}
+      footer={
+        [] // 设置footer为空，去掉 取消 确定默认按钮
+      }
+    >
+      <Form
+        scrollToFirstError={true}
+        ref={FormBoxRef}
+        labelCol={{ span: 2 }}
+        name="basic"
+        onFinish={onFinish}
+        onFinishFailed={onFinishFailed}
+        autoComplete="off"
+      >
+        <Form.Item
+          label="名称"
+          name="name"
+          rules={[{ required: true, message: "请输入名称!" }]}
+          getValueFromEvent={(e) => e.target.value.replace(/\s+/g, "")}
+        >
+          <Input maxLength={20} showCount placeholder="请输入内容" />
+        </Form.Item>
+
+        <Form.Item
+          label="编号"
+          name="num"
+          rules={[{ required: true, message: "请输入内容!" }]}
+          getValueFromEvent={(e) => e.target.value.replace(/\s+/g, "")}
+        >
+          <Input maxLength={20} showCount placeholder="请输入内容" />
+        </Form.Item>
+
+        <Form.Item label="备注" name="description">
+          <TextArea placeholder="请输入内容" showCount maxLength={200} />
+        </Form.Item>
+
+        <br />
+        <Form.Item className="A4Abtn">
+          <Button type="primary" htmlType="submit">
+            提交
+          </Button>
+          &emsp;
+          <Popconfirm
+            title="放弃编辑后，信息将不会保存!"
+            okText="放弃"
+            cancelText="取消"
+            onConfirm={closeFu}
+            okButtonProps={{ loading: false }}
+          >
+            <Button>取消</Button>
+          </Popconfirm>
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+}
+
+const MemoA4AddModal = React.memo(A4AddModal);
+
+export default MemoA4AddModal;

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

@@ -0,0 +1,42 @@
+.A4SonAdd {
+  :global {
+    .ant-modal-close {
+      display: none;
+    }
+
+    .ant-modal {
+      width: 800px !important;
+      position: relative;
+
+      .A4SaddBtn{
+        position: absolute;
+        top: 15px;
+        right: 20px;
+      }
+
+      .ant-modal-body {
+        border-top: 1px solid #ccc;
+        padding-top: 20px;
+        margin-top: 20px;
+      }
+
+      .A4Sbtn {
+        margin-top: 20px;
+        text-align: center;
+      }
+
+      .ant-table-body {
+        height: 400px;
+        overflow-y: auto !important;
+        overflow-y: overlay !important;
+        // .ant-table-cell{
+        //   padding: 8px;
+        // }
+      }
+      .ant-table-cell {
+        text-align: center !important;
+      }
+    }
+
+  }
+}

src/pages/A4Roomset/A4SonAdd/index.tsx

@@ -0,0 +1,159 @@
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import styles from "./index.module.scss";
+import { Button, Modal, Popconfirm, Table } from "antd";
+import { A4_APIdel, A4_APIgetListSon } from "@/store/action/A4Roomset";
+import { A4tableType } from "@/types";
+import { A4addInfoType } from "../data";
+import { MessageFu } from "@/utils/message";
+import A4AddModal from "../A4AddModal";
+
+type Props = {
+  closeFu: () => void;
+  parentId: number;
+};
+
+function A4SonAdd({ closeFu, parentId }: Props) {
+  // 表格数据
+  const [list, setList] = useState<A4tableType[]>([]);
+
+  const getListFu = useCallback(async () => {
+    const res = await A4_APIgetListSon(parentId);
+    if (res.code === 0) {
+      setList(res.data);
+    }
+  }, [parentId]);
+
+  useEffect(() => {
+    getListFu();
+  }, [getListFu]);
+
+  // 点击删除
+  const delFu = useCallback(
+    async (id: number) => {
+      const res = await A4_APIdel(id);
+      if (res.code === 0) {
+        MessageFu.success("删除成功!");
+        getListFu();
+      }
+    },
+    [getListFu]
+  );
+
+  const columns = useMemo(() => {
+    return [
+      {
+        title: "库房名称",
+        dataIndex: "name",
+      },
+      {
+        title: "库房编号",
+        dataIndex: "num",
+      },
+      {
+        title: "备注",
+        render: (item: A4tableType) =>
+          item.description ? (
+            item.description.length >= 20 ? (
+              <span style={{ cursor: "pointer" }} title={item.description}>
+                {item.description.substring(0, 20) + "..."}
+              </span>
+            ) : (
+              item.description
+            )
+          ) : (
+            "（空）"
+          ),
+      },
+      {
+        title: "操作",
+        render: (_: any, item: A4tableType, index: number) => (
+          <>
+            <Button
+              size="small"
+              type="text"
+              onClick={() =>
+                setAddInfo({
+                  id: item.id,
+                  level: 2,
+                  txt: "编辑",
+                  parentId,
+                })
+              }
+            >
+              编辑
+            </Button>
+            {index !== 0 ? (
+              <Popconfirm
+                title="删除后无法恢复，是否删除?"
+                okText="删除"
+                cancelText="取消"
+                onConfirm={() => delFu(item.id)}
+              >
+                <Button size="small" type="text" danger>
+                  删除
+                </Button>
+              </Popconfirm>
+            ) : null}
+          </>
+        ),
+      },
+    ];
+  }, [delFu, parentId]);
+
+  // 新增和编辑
+  const [addInfo, setAddInfo] = useState<A4addInfoType>({
+    id: 0,
+    level: 2,
+    txt: "",
+  });
+
+  return (
+    <Modal
+      wrapClassName={styles.A4SonAdd}
+      open={true}
+      title="货架管理"
+      footer={
+        [] // 设置footer为空，去掉 取消 确定默认按钮
+      }
+    >
+      {/* 新增按钮 */}
+      <div className="A4SaddBtn">
+        <Button
+          type="primary"
+          onClick={() => {
+            if (list.length >= 10)
+              return MessageFu.warning("最多创建10个货架!");
+            setAddInfo({ id: -1, level: 2, txt: "新增", parentId });
+          }}
+        >
+          新增
+        </Button>
+      </div>
+
+      <Table
+        size="small"
+        scroll={{ y: 400 }}
+        dataSource={list}
+        columns={columns}
+        rowKey="id"
+        pagination={false}
+      />
+      <div className="A4Sbtn" onClick={closeFu}>
+        <Button>关闭</Button>
+      </div>
+
+      {/* 新增和编辑的弹窗 */}
+      {addInfo.id ? (
+        <A4AddModal
+          addInfo={addInfo}
+          closeFu={() => setAddInfo({ id: 0, level: 2, txt: "" })}
+          upTableFu={getListFu}
+        />
+      ) : null}
+    </Modal>
+  );
+}
+
+const MemoA4SonAdd = React.memo(A4SonAdd);
+
+export default MemoA4SonAdd;

src/pages/A4Roomset/data.ts

@@ -0,0 +1,6 @@
+export type A4addInfoType ={
+  id:number
+  parentId?:number
+  level:1|2
+  txt:'新增'|'编辑'|''
+}

src/pages/A4Roomset/index.module.scss

@@ -1,5 +1,35 @@
 .A4Roomset{
-  :global{
-    
+  :global {
+    .A4top {
+      display: flex;
+      justify-content: space-between;
+      border-radius: 10px;
+      background-color: #fff;
+      padding: 15px 24px;
+
+      &>div {
+        display: flex;
+
+        .A4topRow {
+          margin-right: 20px;
+        }
+      }
+    }
+
+    .tableMain {
+      border-radius: 10px;
+      margin-top: 15px;
+      height: calc(100% - 75px);
+      background-color: #fff;
+
+      .ant-table-body {
+        height: 675px;
+        overflow-y: auto !important;
+        overflow-y: overlay !important;
+        // .ant-table-cell{
+        //   padding: 8px;
+        // }
+      }
+    }
   }
 }

src/pages/A4Roomset/index.tsx

@@ -1,12 +1,223 @@
-import React from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import styles from "./index.module.scss";
- function A4Roomset() {
-  
+import { Button, Input, Popconfirm, Table } from "antd";
+import { useDispatch, useSelector } from "react-redux";
+import { MessageFu } from "@/utils/message";
+import { A4_APIdel, A4_APIgetList } from "@/store/action/A4Roomset";
+import { RootState } from "@/store";
+import { A4tableType } from "@/types";
+import { A4addInfoType } from "./data";
+import A4AddModal from "./A4AddModal";
+import A4SonAdd from "./A4SonAdd";
+function A4Roomset() {
+  const dispatch = useDispatch();
+
+  // 筛选和分页
+  const [tableSelect, setTableSelect] = useState({
+    searchKey: "",
+  });
+
+  // 发送接口的函数
+  const getListFu = useCallback(() => {
+    dispatch(A4_APIgetList(tableSelect));
+  }, [dispatch, tableSelect]);
+
+  useEffect(() => {
+    getListFu();
+  }, [getListFu]);
+
+  // 输入框的改变
+  const txtTimeRef = useRef(-1);
+  const txtChangeFu = useCallback(
+    (txt: string, key: "searchKey") => {
+      clearTimeout(txtTimeRef.current);
+      txtTimeRef.current = window.setTimeout(() => {
+        setTableSelect({ ...tableSelect, [key]: txt });
+      }, 500);
+    },
+    [tableSelect]
+  );
+
+  // 点击重置
+  const [inputKey, setInputKey] = useState(1);
+  const resetSelectFu = useCallback(() => {
+    // 把2个输入框和时间选择器清空
+    setInputKey(Date.now());
+    setTableSelect({
+      searchKey: "",
+    });
+  }, []);
+
+  const A2TableList = useSelector(
+    (state: RootState) => state.A4Roomset.tableInfo
+  );
+
+  // 点击删除
+  const delFu = useCallback(
+    async (id: number) => {
+      const res = await A4_APIdel(id);
+      if (res.code === 0) {
+        MessageFu.success("删除成功!");
+        getListFu();
+      }
+    },
+    [getListFu]
+  );
+
+  const columns = useMemo(() => {
+    return [
+      {
+        title: "库房名称",
+        dataIndex: "name",
+      },
+      {
+        title: "库房编号",
+        dataIndex: "num",
+      },
+      {
+        title: "货架数量",
+        render: (item: A4tableType) => (item.pcs ? item.pcs : 0),
+      },
+      {
+        title: "备注",
+        render: (item: A4tableType) =>
+          item.description ? (
+            item.description.length >= 50 ? (
+              <span style={{ cursor: "pointer" }} title={item.description}>
+                {item.description.substring(0, 50) + "..."}
+              </span>
+            ) : (
+              item.description
+            )
+          ) : (
+            "（空）"
+          ),
+      },
+      {
+        title: "操作",
+        render: (item: A4tableType) => (
+          <>
+            <Button
+              size="small"
+              type="text"
+              onClick={() =>
+                setAddInfo({
+                  id: item.id,
+                  level: 1,
+                  txt: "编辑",
+                })
+              }
+            >
+              编辑
+            </Button>
+            <Button size="small" type="text" onClick={() => setSonId(item.id)}>
+              货架管理
+            </Button>
+
+            {item.id !== 1 ? (
+              <Popconfirm
+                title="删除后无法恢复，是否删除?"
+                okText="删除"
+                cancelText="取消"
+                onConfirm={() => delFu(item.id)}
+              >
+                <Button size="small" type="text" danger>
+                  删除
+                </Button>
+              </Popconfirm>
+            ) : null}
+          </>
+        ),
+      },
+    ];
+  }, [delFu]);
+
+  // 新增和编辑
+  const [addInfo, setAddInfo] = useState<A4addInfoType>({
+    id: 0,
+    level: 1,
+    txt: "",
+  });
+
+  // 货架管理
+  const [sonId, setSonId] = useState(0);
+
   return (
     <div className={styles.A4Roomset}>
       <div className="pageTitle">库房设置</div>
+
+      {/* 顶部筛选 */}
+      <div className="A4top">
+        {/* 左侧输入框 */}
+        <div className="A4top1">
+          <div className="A4topRow">
+            <span>搜索项：</span>
+            <Input
+              key={inputKey}
+              maxLength={10}
+              style={{ width: 240 }}
+              placeholder="请输入库房编号，最多10字"
+              allowClear
+              onChange={(e) => txtChangeFu(e.target.value, "searchKey")}
+            />
+          </div>
+        </div>
+        {/* 右侧按钮 */}
+        <div className="A4top2">
+          <Button onClick={resetSelectFu}>重置</Button>&emsp;
+          <Button
+            type="primary"
+            onClick={() => {
+              if (A2TableList.length >= 20)
+                return MessageFu.warning("最多创建20个库房!");
+              setAddInfo({ id: -1, level: 1, txt: "新增" });
+            }}
+          >
+            新增
+          </Button>
+        </div>
+      </div>
+
+      {/* 表格主体 */}
+      <div className="tableMain">
+        <Table
+          // 不用展示 子结构表格
+          expandable={{ childrenColumnName: "my" }}
+          scroll={{ y: 675 }}
+          dataSource={A2TableList}
+          columns={columns}
+          rowKey="id"
+          pagination={false}
+        />
+      </div>
+
+      {/* 新增和编辑的弹窗 */}
+      {addInfo.id ? (
+        <A4AddModal
+          addInfo={addInfo}
+          closeFu={() => setAddInfo({ id: 0, level: 1, txt: "" })}
+          upTableFu={getListFu}
+        />
+      ) : null}
+
+      {/* 点击 货架管理出来的页面*/}
+      {sonId ? (
+        <A4SonAdd
+          parentId={sonId}
+          closeFu={() => {
+            getListFu();
+            setSonId(0);
+          }}
+        />
+      ) : null}
     </div>
-  )
+  );
 }
 
 const MemoA4Roomset = React.memo(A4Roomset);

src/pages/B1Submit/B1Look/B1Log.tsx

@@ -1,7 +1,11 @@
-import React, { useCallback, useEffect } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import styles from "./index.module.scss";
-import { Button, Modal } from "antd";
+import { Button, Modal, Table, Tooltip } from "antd";
 import { A2_APIgetLogList } from "@/store/action/B1Submit";
+import { B1tableType } from "@/types";
+import { B1StatusObj, B1TypeObj } from "../data";
+import { QuestionCircleOutlined } from "@ant-design/icons";
+
 
 type Props = {
   logId: number;
@@ -9,10 +13,12 @@ type Props = {
 };
 
 function B1Log({ logId, closeFu }: Props) {
+  const [list, setList] = useState<B1tableType[]>([]);
+
   const getListFu = useCallback(async (id: number) => {
     const res = await A2_APIgetLogList(id);
     if (res.code === 0) {
-      console.log(123, res);
+      setList(res.data);
     }
   }, []);
 
@@ -20,7 +26,48 @@ function B1Log({ logId, closeFu }: Props) {
     getListFu(logId);
   }, [getListFu, logId]);
 
-// 待完善
+ const columns =useMemo(()=>{
+  return[
+    {
+      title: "类型",
+      render: (item: B1tableType) => Reflect.get(B1TypeObj, item.type),
+    },
+    {
+      title: "编号",
+      dataIndex: "num",
+    },
+    {
+      title: "发起时间",
+      dataIndex: "createTime",
+    },
+    {
+      title: "发起人员",
+      dataIndex: "creatorName",
+    },
+    {
+      title: "审批状态",
+      render: (item: B1tableType) => (
+        <>
+          {Reflect.get(B1StatusObj, item.status)}
+          <span className="globalTit" hidden={!item.auditDesc}>
+            <Tooltip title={item.auditDesc}>
+              &nbsp;
+              <QuestionCircleOutlined rev={undefined} />
+            </Tooltip>
+          </span>
+        </>
+      ),
+    },
+    {
+      title: "审批时间",
+      render: (item: B1tableType) => item.auditTime || "（空）",
+    },
+    {
+      title: "审批人员",
+      render: (item: B1tableType) => item.auditUser || "（空）",
+    },
+  ]
+ },[])
 
   return (
     <Modal
@@ -32,6 +79,16 @@ function B1Log({ logId, closeFu }: Props) {
       }
     >
       <div className="B1Lmain">
+
+      <Table
+        size="small"
+        scroll={{ y: 400 }}
+        dataSource={list}
+        columns={columns}
+        rowKey="id"
+        pagination={false}
+      />
+
         <div className="B1Lbtn">
           <Button onClick={closeFu}>关闭</Button>
         </div>

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

@@ -147,13 +147,27 @@
     }
 
     .ant-modal {
-      width: 800px !important;
+      width: 1200px !important;
     }
 
-    .B1Lmain{
+    .B1Lmain {
       padding-top: 10px;
       border-top: 1px solid #ccc;
-      .B1Lbtn{
+
+      .ant-table-body {
+        height: 400px;
+        overflow-y: auto !important;
+        overflow-y: overlay !important;
+        // .ant-table-cell{
+        //   padding: 8px;
+        // }
+      }
+
+      .ant-table-cell {
+        text-align: center !important;
+      }
+
+      .B1Lbtn {
         margin-top: 20px;
         text-align: center;
       }

src/pages/B1Submit/B1Look/index.tsx

@@ -187,7 +187,6 @@ function B1Look({ closeFu, goodsId }: Props) {
               </Tag>
             </div>
             <div>
-              {/* 待完善 */}
               <Button type="primary" onClick={() => setLogId(goodsId)}>
                 藏品日志
               </Button>

src/store/action/A4Roomset.ts

@@ -0,0 +1,42 @@
+import http from "@/utils/http";
+import { AppDispatch } from "..";
+
+/**
+ * 获取库房设置外层列表
+ */
+export const A4_APIgetList = (data: any) => {
+  return async (dispatch: AppDispatch) => {
+    const res = await http.post("cms/storage/getList", data);
+    if (res.code === 0) {
+      dispatch({ type: "A4/getList", payload: res.data });
+    }
+  };
+};
+
+/**
+ * 获取里面的列表
+ */
+export const A4_APIgetListSon = (parentId: number) => {
+  return http.post("cms/storage/getList", { parentId });
+};
+
+/**
+ * 删除列表
+ */
+export const A4_APIdel = (id: number) => {
+  return http.get(`cms/storage/remove/${id}`);
+};
+
+/**
+ * 通过id获取详情
+ */
+export const A4_APIgetInfo = (id: number) => {
+  return http.get(`cms/storage/detail/${id}`);
+};
+
+/**
+ * 新增/编辑
+ */
+export const A4_APIadd = (data: any) => {
+  return http.post("cms/storage/save", data);
+};

src/store/reducer/A4Roomset.ts

@@ -0,0 +1,23 @@
+import { A4tableType } from "@/types";
+
+// 初始化状态
+const initState = {
+  // 列表数据
+  tableInfo: [] as A4tableType[],
+};
+
+// 定义 action 类型
+type Props = {
+  type: "A4/getList";
+  payload: A4tableType[];
+};
+
+export default function Reducer(state = initState, action: Props) {
+  switch (action.type) {
+    // 获取列表数据
+    case "A4/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 A4Roomset from "./A4Roomset";
 import B1Submit from "./B1Submit";
 import B2Audit from "./B2Audit";
 import C1User from "./C1User";
@@ -13,6 +14,7 @@ import C2Log from "./C2Log";
 const rootReducer = combineReducers({
   A0Layout,
   A2Goods,
+  A4Roomset,
   B1Submit,
   B2Audit,
   C1User,

src/types/api/A4Roomset.d.ts

@@ -0,0 +1,8 @@
+export type A4tableType= {
+	description: string;
+	id: number;
+	name: string;
+	num: string;
+  level:1|2
+	pcs:number
+}

src/types/index.d.ts

@@ -1,5 +1,6 @@
 export * from './api/layot'
 export * from './api/A2Goods'
+export * from './api/A4Roomset'
 export * from './api/B1Submit'
 export * from './api/C1User'
 export * from './api/C2Log'