temp-写不动了

src/assets/styles/base.css

@@ -202,3 +202,7 @@ textarea {
   border-radius: 10px;
   background: transparent;
 }
+.globalTit {
+  cursor: pointer;
+  color: var(--themeColor);
+}

src/assets/styles/base.less

@@ -273,4 +273,9 @@ textarea {
   -webkit-box-shadow: inset 0 0 5px transparent;
   border-radius: 10px;
   background: transparent;
+}
+
+.globalTit{
+  cursor: pointer;
+  color: var(--themeColor);
 }

src/pages/A2Goods/data.ts

@@ -60,6 +60,15 @@ export const statusTxtObj = {
   5: "已注销",
 };
 
+export const antdTagColorFObjIn={
+  0:'',
+  1:'',
+  2:'green',
+  3:'',
+  4:'magenta',
+  5:'magenta',
+}
+
 export const options3 = [
   {
     value: "",

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

@@ -0,0 +1,88 @@
+.B1Info {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: calc(100% + 3px);
+  background-color: #ecedf1;
+
+
+  :global {
+
+    .B1Iback {
+      position: absolute;
+      right: 24px;
+      top: 14px;
+    }
+
+    .B1ItopBox {
+      padding: 24px;
+      background-color: #fff;
+      border-radius: 10px;
+      .B1IBox {
+        margin-bottom: 10px;
+        display: flex;
+
+        .B1IRow {
+          display: flex;
+          margin-right: 30px;
+
+          &>div {
+            &:nth-of-type(1) {
+              font-weight: 700;
+            }
+            .ant-tag{
+              position: relative;
+              top: -2px;
+            }
+          }
+
+          &:last-child {
+            margin-right: 0;
+          }
+        }
+      }
+
+      .B1IBox2 {
+        padding-bottom: 10px;
+        border-bottom: 1px solid #999;
+
+        .B1IRow {
+          &>div {
+            &:nth-of-type(1) {
+              width: 70px;
+            }
+
+            &:nth-of-type(2) {
+              width: calc(100% - 70px);
+              height: 40px;
+              white-space: pre-wrap;
+              overflow-y: auto;
+            }
+          }
+        }
+      }
+
+    }
+
+    // 表格
+
+    .B1Itable {
+      margin-top: 15px;
+      height: calc(100% - 273px);
+      background-color: #fff;
+      border-radius: 10px;
+
+      .ant-table-body {
+        height: 438px;
+        overflow-y: auto !important;
+        overflow-y: overlay !important;
+
+        .ant-table-cell {
+          padding: 4px 6px !important;
+        }
+      }
+    }
+
+  }
+}

src/pages/B1Submit/B1Info/index.tsx

@@ -0,0 +1,216 @@
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import styles from "./index.module.scss";
+import { B1tableType } from "@/types";
+import { B1StatusObj, antdTagColorFObj } from "../data";
+import { Button, Popconfirm, Table, Tag } from "antd";
+import {
+  A2inTableType,
+  statusTxtObj,
+  storageStatusTxtObj,
+} from "@/pages/A2Goods/data";
+import ImageLazy from "@/components/ImageLazy";
+import { A2_APIgetInfo } from "@/store/action/B1Submit";
+import B1Look from "../B1Look";
+
+type Props = {
+  closeFu: () => void;
+  info: B1tableType;
+  pageKey: "我提交的" | "我审核的";
+};
+
+function B1Info({ closeFu, info, pageKey }: Props) {
+  const getInfoFu = useCallback(async (id: number) => {
+    const res = await A2_APIgetInfo(id);
+    if (res.code === 0) {
+      setTableList(res.data.child);
+    }
+  }, []);
+
+  useEffect(() => {
+    getInfoFu(info.id);
+  }, [getInfoFu, info.id]);
+
+  // 点击编辑
+  const editFu = useCallback(() => {}, []);
+
+  // 点击删除
+  const delFu = useCallback(() => {}, []);
+
+  // 点击撤回
+  const annulFu = useCallback(() => {}, []);
+
+  // 表格里面的查看信息
+  const [lookInfo, setLookInfo] = useState({} as A2inTableType);
+
+  // 能够出现的 按钮
+  const btnArr = useMemo(() => {
+    const btn1 = (
+      <Button type="primary" onClick={editFu}>
+        编辑
+      </Button>
+    );
+    const btn2 = (
+      <Popconfirm
+        title="删除后无法恢复，是否删除?"
+        okText="删除"
+        cancelText="取消"
+        onConfirm={delFu}
+      >
+        <Button danger onClick={editFu}>
+          删除
+        </Button>
+      </Popconfirm>
+    );
+    const btn3 = <Button onClick={annulFu}>撤回</Button>;
+
+    let res: React.ReactNode = "";
+
+    info.status === 0 ? (
+      (res = (
+        <>
+          {btn1}&emsp;
+          {btn2}
+        </>
+      ))
+    ) : info.status === 1 ? (
+      (res = btn3)
+    ) : info.status === 2 ? (
+      (res = btn1)
+    ) : (
+      <></>
+    );
+    return res;
+  }, [annulFu, delFu, editFu, info.status]);
+
+  //  表格信息
+  const [tableList, setTableList] = useState<A2inTableType[]>([]);
+
+  const columns = useMemo(() => {
+    return [
+      {
+        title: "缩略图",
+        render: (item: A2inTableType) => (
+          <div className="tableImgAuto">
+            <ImageLazy width={60} height={60} src={item.thumb} />
+          </div>
+        ),
+      },
+      {
+        title: "编号",
+        dataIndex: "num",
+      },
+      {
+        title: "名称",
+        dataIndex: "name",
+      },
+      {
+        title: "级别",
+        dataIndex: "dictLevel",
+      },
+      {
+        title: "藏品状态",
+        render: (item: A2inTableType) =>
+          Reflect.get(statusTxtObj, item.status) || "-",
+      },
+      {
+        title: "库存状态",
+        render: (item: A2inTableType) =>
+          Reflect.get(storageStatusTxtObj, item.storageStatus) || "-",
+      },
+      {
+        title: "备注",
+        render: (item: A2inTableType) => (
+          <>
+            <Button size="small" type="text" onClick={() => setLookInfo(item)}>
+              查看
+            </Button>
+          </>
+        ),
+      },
+    ];
+  }, []);
+
+  return (
+    <div className={styles.B1Info}>
+      {/* 右上角的返回 */}
+      <div className="B1Iback" onClick={closeFu}>
+        <Button>返回</Button>
+      </div>
+
+      <div className="B1ItopBox">
+        {/* 顶部信息 */}
+        <div className="B1IBox">
+          <div className="B1IRow">
+            <div>审批状态：</div>
+            <div>
+              <Tag color={Reflect.get(antdTagColorFObj, info.status)}>
+                {Reflect.get(B1StatusObj, info.status)}
+              </Tag>
+            </div>
+          </div>
+          <div className="B1IRow">
+            <div>订单编号：</div>
+            <div>{info.num}</div>
+          </div>
+          <div className="B1IRow">
+            <div>申请人：</div>
+            <div>{info.creatorName}</div>
+          </div>
+          <div className="B1IRow">
+            <div>申请时间：</div>
+            <div>{info.createTime}</div>
+          </div>
+        </div>
+        <div className="B1IBox B1IBox2">
+          <div className="B1IRow">
+            <div>申请说明：</div>
+            <div className="mySorrl">{info.description || "（空）"}</div>
+          </div>
+        </div>
+        <div className="B1IBox">
+          <div className="B1IRow">
+            <div>审批人：</div>
+            <div>{info.auditUser || "（空）"}</div>
+          </div>
+          <div className="B1IRow">
+            <div>审批时间：</div>
+            <div>{info.auditTime || "（空）"}</div>
+          </div>
+        </div>
+
+        <div className="B1IBox B1IBox2">
+          <div className="B1IRow">
+            <div>审批备注：</div>
+            <div className="mySorrl">{info.auditDesc || "（空）"}</div>
+          </div>
+        </div>
+
+        {/* 操作按钮 */}
+        <div className="B1IbtnArr">{btnArr}</div>
+      </div>
+
+      {/* 下面的表格 */}
+      <div className="B1Itable">
+        <Table
+          size="small"
+          scroll={{ y: 438 }}
+          dataSource={tableList}
+          columns={columns}
+          rowKey="id"
+          pagination={false}
+        />
+      </div>
+      {/* 点击表格里面的查看出来的页面 */}
+      {lookInfo.id ? (
+        <B1Look
+          info={lookInfo}
+          closeFu={() => setLookInfo({} as A2inTableType)}
+        />
+      ) : null}
+    </div>
+  );
+}
+
+const MemoB1Info = React.memo(B1Info);
+
+export default MemoB1Info;

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

@@ -0,0 +1,44 @@
+.B1Look{
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 10;
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+  border-radius: 10px;
+  padding: 24px;
+  :global{
+    .B1Ltop{
+      display: flex;
+      .B1Ltop1{
+        width: 270px;
+        height: 270px;
+        background-color: #aaaaaa;
+        margin-right: 15px;
+        img{
+          object-fit: contain !important;
+        }
+      }
+      .B1Ltop2{
+        width: calc(100% - 285px);
+        .B1Ltop2_1{
+          display: flex;
+          justify-content: space-between;
+          &>div{
+            display: flex;
+            align-items: center;
+            .B1Ltop2_1Name{
+              display: inline-block;
+              font-weight: 700;
+              font-size: 20px;
+            }
+          }
+        }
+        .B1Ltop2_2{
+
+        }
+      }
+    }
+  }
+}

src/pages/B1Submit/B1Look/index.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+import styles from "./index.module.scss";
+import {
+  A2inTableType,
+  antdTagColorFObjIn,
+  statusTxtObj,
+  storageStatusTxtObj,
+} from "@/pages/A2Goods/data";
+import { Button, Popover, Tag } from "antd";
+import ImageLazy from "@/components/ImageLazy";
+import { CaretDownOutlined } from "@ant-design/icons";
+
+type Props = {
+  info: A2inTableType;
+  closeFu: () => void;
+};
+
+function B1Look({ info, closeFu }: Props) {
+  return (
+    <div className={styles.B1Look}>
+      <div className="B1Ltop">
+        <div className="B1Ltop1">
+          <ImageLazy width={270} height={270} src={info.thumb} />
+        </div>
+        <div className="B1Ltop2">
+          <div className="B1Ltop2_1">
+            <div>
+              <span className="B1Ltop2_1Name">{info.name}</span>&emsp;
+              <Tag color={Reflect.get(antdTagColorFObjIn, info.status)}>
+                {Reflect.get(statusTxtObj, info.status)}
+              </Tag>
+              &emsp;
+              <Tag>
+                {Reflect.get(storageStatusTxtObj, info.storageStatus) || ""}
+                <> I 待完善货架</>
+              </Tag>
+            </div>
+            <div>
+              <Button type="primary">藏品日志</Button>&emsp;
+              <Popover placement="bottom" content={"666"}>
+                <Button type="primary">
+                  操作
+                  <CaretDownOutlined rev={undefined} />
+                </Button>
+              </Popover>&emsp;
+              <Button onClick={closeFu}>返回</Button>
+            </div>
+          </div>
+          <div className="B1Ltop2_2"></div>
+        </div>
+      </div>
+      <div className="B1Lfoll"></div>
+    </div>
+  );
+}
+
+const MemoB1Look = React.memo(B1Look);
+
+export default MemoB1Look;

src/pages/B1Submit/data.ts

@@ -0,0 +1,85 @@
+export type B1selectType = {
+  searchKey: string;
+  status: "" | 0 | 1 | 2 | 3;
+  type: "" | "DJ" | "RK" | "CK" | "ZX" | "YK" | "BJ";
+  pageSize: number;
+  pageNum: number;
+};
+
+export const B1options1 = [
+  {
+    value: "",
+    label: "全部",
+  },
+  {
+    value: 0,
+    label: "待提交",
+  },
+  {
+    value: 1,
+    label: "待审批",
+  },
+  {
+    value: 3,
+    label: "审核通过",
+  },
+  {
+    value: 2,
+    label: "审核驳回",
+  },
+];
+
+export const B1StatusObj = {
+  0: "待提交",
+  1: "待审批",
+  3: "审核通过",
+  2: "审核驳回",
+};
+
+export const B1options2 = [
+  {
+    value: "",
+    label: "全部",
+  },
+  {
+    value: "DJ",
+    label: "藏品登记",
+  },
+  {
+    value: "BJ",
+    label: "藏品编辑",
+  },
+  {
+    value: "ZX",
+    label: "藏品注销",
+  },
+  {
+    value: "RK",
+    label: "藏品入库",
+  },
+  {
+    value: "YK",
+    label: "藏品移库",
+  },
+  {
+    value: "CK",
+    label: "藏品出库",
+  },
+];
+
+export const B1TypeObj = {
+  DJ: "藏品登记",
+  BJ: "藏品编辑",
+  ZX: "藏品注销",
+  RK: "藏品入库",
+  YK: "藏品移库",
+  CK: "藏品出库",
+};
+
+export const antdTagColorFObj={
+  4:'',
+  3:'green',
+  2:'magenta',
+  1:'',
+  0:''
+}

src/pages/B1Submit/index.module.scss

@@ -1,5 +1,33 @@
 .B1Submit{
+  position: relative;
   :global{
-    
+    .B1top {
+      display: flex;
+      justify-content: space-between;
+      border-radius: 10px;
+      background-color: #fff;
+      padding: 15px 24px;
+
+      &>div {
+        display: flex;
+
+        .B1topRow {
+          margin-right: 20px;
+        }
+      }
+    }
+    .tableMain {
+      border-radius: 10px;
+      margin-top: 15px;
+      height: calc(100% - 75px);
+      background-color: #fff;
+
+      .ant-table-body {
+        height: 625px;
+        overflow-y: auto !important;
+        overflow-y: overlay !important;
+
+      }
+    }
   }
 }

src/pages/B1Submit/index.tsx

@@ -1,12 +1,220 @@
-import React from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import styles from "./index.module.scss";
- function B1Submit() {
-  
+import { Button, Input, Select, Table, Tooltip } from "antd";
+import { useDispatch, useSelector } from "react-redux";
+import {
+  B1StatusObj,
+  B1TypeObj,
+  B1options1,
+  B1options2,
+  B1selectType,
+} from "./data";
+import { B1_APIgetList } from "@/store/action/B1Submit";
+import { RootState } from "@/store";
+import { B1tableType } from "@/types";
+import { QuestionCircleOutlined } from "@ant-design/icons";
+import B1Info from "./B1Info";
+
+function B1Submit() {
+  const dispatch = useDispatch();
+
+  // 筛选和分页
+  const [tableSelect, setTableSelect] = useState<B1selectType>({
+    searchKey: "",
+    status: "",
+    type: "",
+    pageSize: 10,
+    pageNum: 1,
+  });
+
+  // 输入框的改变
+  const txtTimeRef = useRef(-1);
+  const txtChangeFu = useCallback(
+    (txt: string, key: "searchKey") => {
+      clearTimeout(txtTimeRef.current);
+      txtTimeRef.current = window.setTimeout(() => {
+        setTableSelect({ ...tableSelect, [key]: txt, pageNum: 1 });
+      }, 500);
+    },
+    [tableSelect]
+  );
+
+  // 发送接口的函数
+  const getListFu = useCallback(() => {
+    dispatch(B1_APIgetList(tableSelect));
+  }, [dispatch, tableSelect]);
+
+  useEffect(() => {
+    getListFu();
+  }, [getListFu]);
+
+  // 点击重置
+  const [inputKey, setInputKey] = useState(1);
+  const resetSelectFu = useCallback(() => {
+    // 把2个输入框和时间选择器清空
+    setInputKey(Date.now());
+    setTableSelect({
+      searchKey: "",
+      status: "",
+      type: "",
+      pageSize: 10,
+      pageNum: 1,
+    });
+  }, []);
+
+  const B1TableList = useSelector(
+    (state: RootState) => state.B1Submit.tableInfo
+  );
+
+  // 页码变化
+  const paginationChange = useCallback(
+    () => (pageNum: number, pageSize: number) => {
+      setTableSelect({ ...tableSelect, pageNum, pageSize });
+    },
+    [tableSelect]
+  );
+
+  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 || "（空）",
+      },
+      {
+        title: "操作",
+        render: (item: B1tableType) => (
+          <Button size="small" type="text" onClick={() => setLookInfo(item)}>
+            查看
+          </Button>
+        ),
+      },
+    ];
+  }, []);
+
+  // 点击查看打开的页面
+  const [lookInfo, setLookInfo] = useState({} as B1tableType);
+
   return (
     <div className={styles.B1Submit}>
-      <div className="pageTitle">我提交的</div>
+      <div className="pageTitle">
+        我提交的
+        {lookInfo.id
+          ? `/查看 - ${Reflect.get(B1TypeObj, lookInfo.type)}`
+          : null}
+      </div>
+      {/* 顶部筛选 */}
+      <div className="B1top">
+        {/* 左侧输入框 */}
+        <div className="B1top1">
+          <div className="B1topRow">
+            <span>搜索项：</span>
+            <Input
+              key={inputKey}
+              maxLength={10}
+              style={{ width: 248 }}
+              placeholder="请输入申请编号，最多10字"
+              allowClear
+              onChange={(e) => txtChangeFu(e.target.value, "searchKey")}
+            />
+          </div>
+
+          <div className="B1topRow">
+            <span>申请类型：</span>
+            <Select
+              style={{ width: 150 }}
+              value={tableSelect.type}
+              onChange={(e) =>
+                setTableSelect({ ...tableSelect, type: e, pageNum: 1 })
+              }
+              options={B1options2}
+            />
+          </div>
+
+          <div className="B1topRow">
+            <span>审批状态：</span>
+            <Select
+              style={{ width: 150 }}
+              value={tableSelect.status}
+              onChange={(e) =>
+                setTableSelect({ ...tableSelect, status: e, pageNum: 1 })
+              }
+              options={B1options1}
+            />
+          </div>
+        </div>
+        {/* 右侧按钮 */}
+        <div className="B1top2">
+          <Button onClick={resetSelectFu}>重置</Button>
+        </div>
+      </div>
+
+      {/* 表格主体 */}
+      <div className="tableMain">
+        <Table
+          scroll={{ y: 625 }}
+          dataSource={B1TableList.list}
+          columns={columns}
+          rowKey="id"
+          pagination={{
+            showQuickJumper: true,
+            position: ["bottomCenter"],
+            showSizeChanger: true,
+            current: tableSelect.pageNum,
+            pageSize: tableSelect.pageSize,
+            total: B1TableList.total,
+            onChange: paginationChange(),
+          }}
+        />
+      </div>
+      {lookInfo.id ? (
+        <B1Info
+          pageKey="我提交的"
+          closeFu={() => setLookInfo({} as B1tableType)}
+          info={lookInfo}
+        />
+      ) : null}
     </div>
-  )
+  );
 }
 
 const MemoB1Submit = React.memo(B1Submit);

src/store/action/B1Submit.ts

@@ -0,0 +1,27 @@
+import http from "@/utils/http";
+import { AppDispatch } from "..";
+
+/**
+ * 获取 我提交的列表
+ */
+export const B1_APIgetList = (data: any) => {
+  return async (dispatch: AppDispatch) => {
+    const res = await http.post("cms/my/audit/pageList", data);
+    if (res.code === 0) {
+      const obj = {
+        list: res.data.records,
+        total: res.data.total,
+      };
+      dispatch({ type: "B1/getList", payload: obj });
+    }
+  };
+};
+
+
+/**
+ * 获取详情
+ */
+export const A2_APIgetInfo = (id: number) => {
+  return http.get(`cms/my/order/detail/${id}`);
+};
+

src/store/reducer/B1Submit.ts

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

src/store/reducer/index.ts

@@ -4,12 +4,14 @@ import { combineReducers } from "redux";
 // 导入 登录 模块的 reducer
 import A0Layout from "./layout";
 import A2Goods from "./A2Goods";
+import B1Submit from "./B1Submit";
 import C2Log from "./C2Log";
 
 // 合并 reducer
 const rootReducer = combineReducers({
   A0Layout,
   A2Goods,
+  B1Submit,
   C2Log,
 });
 

src/types/api/B1Submit.d.ts

@@ -0,0 +1,17 @@
+export type B1tableType ={
+	auditDesc: string;
+	auditTime: string;
+	auditUser: string;
+	auditUserId: number;
+	createTime: string;
+	creatorId: number;
+	creatorName: string;
+	description: string;
+	goodsIds: string;
+	id: number;
+	num: string;
+	status: number;
+	storageIds: string;
+	type: string;
+	updateTime: string;
+}

src/types/index.d.ts

@@ -1,3 +1,4 @@
 export * from './api/layot'
 export * from './api/A2Goods'
+export * from './api/B1Submit'
 export * from './api/C2Log'