up

src/pages/Goods/index.tsx

@@ -1,9 +1,32 @@
+import ImageLazy from "@/components/ImageLazy";
 import { RootState } from "@/store";
+import {
+  getGoodsList,
+  goodsDisplayAPI,
+  goodsRemoveAPI,
+} from "@/store/action/goods";
 import { GoodsTableSearch } from "@/types";
-import { Input, Select, DatePicker, Button } from "antd";
-import React, { useCallback, useEffect, useRef, useState } from "react";
-import { useSelector } from "react-redux";
+import history from "@/utils/history";
+import {
+  Input,
+  Select,
+  DatePicker,
+  Button,
+  Table,
+  Switch,
+  Popconfirm,
+  message,
+} from "antd";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { useDispatch, useSelector } from "react-redux";
 import { useLocation } from "react-router-dom";
+import GoodsAdd from "../GoodsAdd";
 import styles from "./index.module.scss";
 
 const { RangePicker } = DatePicker;
@@ -12,11 +35,23 @@ function Goods() {
   // 获取地址栏参数
   const location = useLocation();
 
+  const dispatch = useDispatch();
+
   const pageNumRef = useRef(1);
+  const pagePageRef = useRef(10);
+
+
+  // 点击新增或者编辑出来的页面
+  const [editPageShow,setEditPageShow] =useState(false)
 
   // 从仓库获取下拉列表数据
   const dictList = useSelector((state: RootState) => state.loginStore.dictList);
 
+  // 从仓库获取表格列表信息
+  const tableInfo = useSelector(
+    (state: RootState) => state.goodsReducer.tableInfo
+  );
+
   // 如果有参数 根据参数页码在次发送请求
   useEffect(() => {
     const urlParam = location.state || {};
@@ -45,7 +80,7 @@ function Goods() {
 
   // 封装发送请求的函数
 
-  const getList = useCallback(() => {
+  const getList = useCallback(async () => {
     const data = {
       ...tableSelect,
       topic: tableSelect.topic === -1 ? null : tableSelect.topic,
@@ -53,15 +88,14 @@ function Goods() {
 
       pageNum: pageNumRef.current,
     };
-    console.log("发送请求", data);
-
-    // dispatch(getObject1List(data));
-  }, [tableSelect]);
+    dispatch(getGoodsList(data));
+  }, [dispatch, tableSelect]);
 
   // 当前页码统一
   useEffect(() => {
     pageNumRef.current = tableSelect.pageNum;
-  }, [tableSelect.pageNum]);
+    pagePageRef.current = tableSelect.pageSize;
+  }, [tableSelect.pageNum, tableSelect.pageSize]);
 
   // 防止返回的时候发送了2次请求来对应页码
 
@@ -118,11 +152,10 @@ function Goods() {
   };
 
   // 点击重置
+  const [inputKey, setInputKey] = useState(1);
   const resetSelectFu = useCallback(() => {
-
     // 把2个输入框和时间选择器清空
-
-
+    setInputKey(Date.now());
     setTableSelect({
       name: "",
       num: "",
@@ -139,15 +172,160 @@ function Goods() {
     });
   }, []);
 
+  // 关于表格的数据
+
+  // 页码变化
+  const paginationChange = useCallback(
+    () => (pageNum: number, pageSize: number) => {
+      pageNumRef.current = pageNum;
+      pagePageRef.current = pageSize;
+      setTableSelect({ ...tableSelect, pageNum, pageSize });
+    },
+    [tableSelect]
+  );
+
+  // 切换表格中的启用停用状态
+  const isEnabledClickFu = useCallback(
+    async (val: boolean, id: number) => {
+      const isDisable = val ? 1 : 0;
+      const res: any = await goodsDisplayAPI(id, isDisable);
+      if (res.code === 0) getList();
+    },
+    [getList]
+  );
+
+  // 点击删除
+  const delTableFu = useCallback(
+    async (id: number) => {
+      const res: any = await goodsRemoveAPI(id);
+      if (res.code === 0) {
+        message.success("删除成功!");
+        getList();
+      }
+    },
+    [getList]
+  );
+
+  const columns = useMemo(() => {
+    return [
+      {
+        width: 80,
+        title: "序号",
+        render: (text: any, record: any, index: any) =>
+          index + 1 + (pageNumRef.current - 1) * pagePageRef.current,
+      },
+      {
+        title: "名称",
+        dataIndex: "name",
+      },
+      {
+        title: "登记编号",
+        dataIndex: "num",
+      },
+      {
+        title: "类别",
+        dataIndex: "dictTexture",
+      },
+      {
+        title: "年代",
+        dataIndex: "dictAge",
+      },
+      {
+        title: "级别",
+        dataIndex: "dictLevel",
+      },
+      {
+        title: "来源",
+        dataIndex: "dictSource",
+      },  
+      {
+        title: "简介",
+        render: (item: GoodsTableSearch) =>
+          item.description ? (
+            item.description.length >= 20 ? (
+              <span style={{ cursor: "pointer" }} title={item.description}>
+                {item.description.substring(0, 20) + "..."}
+              </span>
+            ) : (
+              item.description
+            )
+          ) : (
+            "（空）"
+          ),
+      },
+      {
+        title: "封面图",
+        render: (item: GoodsTableSearch) => (
+          <div className="tableImgAuto">
+            <ImageLazy width={80} height={80} src={item.thumb!} />
+          </div>
+        ),
+      },
+      {
+        title: "类型",
+        dataIndex: "dictSource",
+      },
+      {
+        title: "最近编辑时间",
+        dataIndex: "updateTime",
+      },
+      {
+        title: "展示状态",
+        render: (item: GoodsTableSearch) => (
+          <Switch
+            checkedChildren="启用"
+            unCheckedChildren="停用"
+            checked={item.display === 1}
+            onChange={(val) => isEnabledClickFu(val, item.id!)}
+          />
+        ),
+      },
+      {
+        title: "万物墙主题",
+        render: (item: GoodsTableSearch) =>
+          item.topic === 1 ? "珍品" : "精品",
+      },
+      {
+        title: "操作",
+        render: (item: GoodsTableSearch) => (
+          <>
+            <Button
+              size="small"
+              type="text"
+              onClick={() =>
+                history.push(
+                  `/goods/edit?k=${pageNumRef.current}&id=${item.id}`
+                )
+              }
+            >
+              编辑
+            </Button>
+            <Popconfirm
+              title="删除后无法恢复，是否删除?"
+              okText="删除"
+              cancelText="取消"
+              onConfirm={() => delTableFu(item.id!)}
+            >
+              <Button size="small" type="text" danger>
+                删除
+              </Button>
+            </Popconfirm>
+          </>
+        ),
+      },
+    ];
+  }, [delTableFu, isEnabledClickFu]);
+
   return (
     <div className={styles.Goods}>
       <div className="goodsTop">
         <div className="pageTitlt">馆藏管理</div>
         <div className="goodsSearchBox">
           <div className="goodsSearchBox1">
-            <div className="row">
+            <div className="row rowDom">
               <span>名称：</span>
               <Input
+                key={inputKey}
                 maxLength={10}
                 style={{ width: 150 }}
                 placeholder="请输入"
@@ -156,9 +334,10 @@ function Goods() {
               />
             </div>
 
-            <div className="row">
+            <div className="row rowDom">
               <span>登记编号：</span>
               <Input
+                key={inputKey}
                 maxLength={20}
                 style={{ width: 150 }}
                 placeholder="请输入"
@@ -218,9 +397,9 @@ function Goods() {
               />
             </div>
 
-            <div className="row">
+            <div className="row rowDom">
               <span>最近编辑日期：</span>
-              <RangePicker onChange={timeChange} />
+              <RangePicker key={inputKey} onChange={timeChange} />
             </div>
             <div className="row">
               <span>万物墙：</span>
@@ -258,11 +437,40 @@ function Goods() {
             <div className="row">
               <Button onClick={resetSelectFu}>重置</Button>{" "}
               &emsp;&emsp;&emsp;&emsp;
-              <Button type="primary">新增</Button>
+              <Button
+                type="primary"
+                onClick={() =>
+                  history.push(`/goods/edit?k=${pageNumRef.current}`)
+                }
+              >
+                新增
+              </Button>
             </div>
           </div>
         </div>
       </div>
+      {/* 表格主体 */}
+      <div className="tableBox">
+        <Table
+          scroll={{ y: 500 }}
+          dataSource={tableInfo.list}
+          columns={columns}
+          rowKey="id"
+          pagination={{
+            showQuickJumper: true,
+            position: ["bottomCenter"],
+            showSizeChanger: true,
+            current: tableSelect.pageNum,
+            pageSize: tableSelect.pageSize,
+            total: tableInfo.total,
+            onChange: paginationChange(),
+          }}
+        />
+      </div>
+
+          {/* 点击新增或者编辑出来的页面 */}
+          {editPageShow?<GoodsAdd />:null}
+
     </div>
   );
 }

src/pages/GoodsAdd/index.tsx

@@ -0,0 +1,589 @@
+import { RootState } from "@/store";
+import { GoodsTableSearch } from "@/types";
+import history, { urlParameter } from "@/utils/history";
+import { Button, Form, Input, message, Popconfirm, Radio, Select } from "antd";
+import TextArea from "antd/es/input/TextArea";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import {
+  PlusOutlined,
+  CloseCircleOutlined,
+  UploadOutlined,
+  PlayCircleOutlined,
+} from "@ant-design/icons";
+import { useDispatch, useSelector } from "react-redux";
+import { useLocation } from "react-router-dom";
+import styles from "./index.module.scss";
+import ImageLazy from "@/components/ImageLazy";
+import {
+  goodsDetailById,
+  goodsSaveAPI,
+  goodsUploadAPI,
+} from "@/store/action/goods";
+import { baseURL } from "@/utils/http";
+
+// 上传附件的进度条
+const UpAsyncLodingDom: any = document.querySelector("#UpAsyncLoding");
+const progressDom: any = document.querySelector("#progress");
+
+type Props ={
+  id:number
+}
+
+function GoodsAdd({id}:Props) {
+  const dispatch = useDispatch();
+
+  // 获取地址栏参数
+  const location = useLocation();
+  const urlParamRef = useRef<any>({});
+
+  const [id, SetId] = useState<any>(null);
+
+  useEffect(() => {
+    urlParamRef.current = urlParameter(location.search);
+    if (urlParamRef.current.id) SetId(Number(urlParamRef.current.id));
+    // console.log("地址栏参数", urlParamRef.current);
+  }, [location]);
+
+  // 从仓库获取下拉列表数据
+  const dictList = useSelector((state: RootState) => state.loginStore.dictList);
+
+  // 设置表单初始数据（区分编辑和新增）
+  const FormBoxRef = useRef<any>({});
+
+  const getInfoInAPIFu = useCallback(async (id: number) => {
+    const res = await goodsDetailById(id);
+    const data: GoodsTableSearch = res.data;
+    FormBoxRef.current.setFieldsValue(data);
+
+    setCover(data.thumb!);
+    setType(data.type!);
+
+    if (data.type === "model") setModelSrc(data.filePath!);
+    else if (data.type === "img")
+      setImgFile({ fileName: data.fileName!, filePath: data.filePath! });
+    else if (data.type === "audio")
+      setAudioFile({ fileName: data.fileName!, filePath: data.filePath! });
+    else if (data.type === "video")
+      setVideoFile({ fileName: data.fileName!, filePath: data.filePath! });
+
+    console.log("是编辑，在这里发请求拿数据", res);
+  }, []);
+
+  // 没有通过校验
+  const onFinishFailed = useCallback(() => {
+    // return message.warning("有表单不符号规则!");
+  }, []);
+
+  useEffect(() => {
+    if (id) getInfoInAPIFu(id);
+    else {
+      setDirCode(Date.now() + "");
+      FormBoxRef.current.setFieldsValue({
+        topic: 1,
+      });
+    }
+  }, [getInfoInAPIFu, id]);
+
+  // 上传的inputRef
+  const myInput = useRef<HTMLInputElement>(null);
+  const myInput2 = useRef<HTMLInputElement>(null);
+
+  // 封面图片
+  const [cover, setCover] = useState("");
+
+  // 文件类型
+  const [type, setType] = useState<"model" | "img" | "audio" | "video">(
+    "model"
+  );
+
+  // 文件的dirCode码
+  const [dirCode, setDirCode] = useState("");
+
+  // 模型的链接输入
+  const [modelSrc, setModelSrc] = useState("");
+
+  // 图片的附件信息
+  const [imgFile, setImgFile] = useState({ fileName: "", filePath: "" });
+
+  // 音频的附件信息
+  const [audioFile, setAudioFile] = useState({ fileName: "", filePath: "" });
+
+  // 视频的附件信息
+  const [videoFile, setVideoFile] = useState({ fileName: "", filePath: "" });
+
+  // 点击取消
+  const btnX = useCallback(() => {
+    history.push({
+      pathname: `/goods`,
+      state: { k: urlParamRef.current.k ? urlParamRef.current.k : "1" },
+    });
+  }, []);
+
+  // 通过校验点击确定
+  const onFinish = useCallback(
+    async (values: GoodsTableSearch) => {
+      if (cover === "") return message.warning("请上传封面图!");
+      if (type === "model" && modelSrc === "")
+        return message.warning("请输入模型的链接地址!");
+      if (type === "img" && imgFile.filePath === "")
+        return message.warning("请上传图片附件!");
+      if (type === "audio" && audioFile.filePath === "")
+        return message.warning("请上传音频附件!");
+      if (type === "video" && videoFile.filePath === "")
+        return message.warning("请上传视频附件!");
+
+      let fileArr = { fileName: "", filePath: "" };
+
+      if (type === "model") fileArr = { fileName: "", filePath: modelSrc };
+      else if (type === "img") fileArr = imgFile;
+      else if (type === "audio") fileArr = audioFile;
+      else if (type === "video") fileArr = videoFile;
+
+      const obj = {
+        ...values,
+        id: id ? id : null,
+        thumb: cover,
+        type: type,
+        ...fileArr,
+        dirCode: dirCode,
+      };
+
+      const res: any = await goodsSaveAPI(obj);
+
+      if (res.code === 0) {
+        message.success(id ? "编辑成功!" : "新增成功!");
+        btnX();
+      }
+
+      console.log("通过校验，点击确定", res);
+    },
+    [audioFile, btnX, cover, dirCode, id, imgFile, modelSrc, type, videoFile]
+  );
+
+  // 上传封面图
+  const handeUpPhoto = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files) {
+      // 拿到files信息
+      const filesInfo = e.target.files[0];
+      // 校验格式
+      const type = ["image/jpeg", "image/png"];
+      if (!type.includes(filesInfo.type)) {
+        e.target.value = "";
+        return message.warning("只支持jpg、png格式!");
+      }
+      // 校验大小
+      if (filesInfo.size > 10 * 1024 * 1024) {
+        e.target.value = "";
+        return message.warning("最大支持10M!");
+      }
+      // 创建FormData对象
+      const fd = new FormData();
+      // 把files添加进FormData对象（‘photo’为后端需要的字段）
+      fd.append("type", "thumb");
+      fd.append("dirCode", dirCode);
+      fd.append("file", filesInfo);
+
+      e.target.value = "";
+
+      const res: any = await goodsUploadAPI(fd);
+      if (res.code === 0) {
+        message.success("上传成功!");
+        setCover(res.data.filePath);
+      }
+      UpAsyncLodingDom.style.opacity = 0;
+      progressDom.style.width = "0%";
+    }
+  };
+
+  // 上传附件
+  const handeUpPhoto2 = useCallback(
+    async (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (e.target.files) {
+        // 拿到files信息
+        const filesInfo = e.target.files[0];
+
+        let anType = ["image/jpeg", "image/png", "image/gif"];
+        let anTit1 = "只支持png、jpg、gif和jpeg格式!";
+        let anTit2 = "最大支持20M!";
+        let anSize = 20 * 1024 * 1024;
+
+        if (type === "audio") {
+          anType = ["audio/mpeg"];
+          anTit1 = "只支持mp3格式!";
+          anTit2 = "最大支持10M!";
+          anSize = 10 * 1024 * 1024;
+        } else if (type === "video") {
+          anType = ["video/mp4"];
+          anTit1 = "只支持mp4格式!";
+          anTit2 = "最大支持500M!";
+          anSize = 500 * 1024 * 1024;
+        }
+
+        // 校验格式
+        if (!anType.includes(filesInfo.type)) {
+          e.target.value = "";
+          return message.warning(anTit1);
+        }
+        // 校验大小
+        if (filesInfo.size > anSize) {
+          e.target.value = "";
+          return message.warning(anTit2);
+        }
+        // 创建FormData对象
+        const fd = new FormData();
+        // 把files添加进FormData对象（‘photo’为后端需要的字段）
+        fd.append("type", type);
+        fd.append("file", filesInfo);
+
+        e.target.value = "";
+
+        const res: any = await goodsUploadAPI(fd);
+        if (res.code === 0) {
+          message.success("上传成功!");
+          if (type === "img") setImgFile(res.data);
+          else if (type === "audio") setAudioFile(res.data);
+          else if (type === "video") setVideoFile(res.data);
+        }
+        UpAsyncLodingDom.style.opacity = 0;
+        progressDom.style.width = "0%";
+      }
+    },
+    [type]
+  );
+
+  return (
+    <div className={styles.GoodsAdd}>
+      <div className="pageTitlt">{id ? "编辑" : "新增"}馆藏</div>
+      <div className="formBox">
+        <div className="formBoxSon">
+          <Form
+            ref={FormBoxRef}
+            name="basic"
+            labelCol={{ span: 4 }}
+            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="dictTexture"
+              rules={[{ required: true, message: "请选择类别!" }]}
+            >
+              <Select
+                placeholder="请选择"
+                style={{ width: 400 }}
+                options={dictList["texture"].slice(1)}
+              />
+            </Form.Item>
+
+            <Form.Item
+              label="万物墙主题"
+              name="topic"
+              rules={[{ required: true, message: "请选择万物墙主题!" }]}
+            >
+              <Select
+                placeholder="请选择"
+                style={{ width: 400 }}
+                options={[
+                  { label: "珍品", value: 1 },
+                  { label: "精品", value: 2 },
+                ]}
+              />
+            </Form.Item>
+
+            <Form.Item
+              label="年代"
+              name="dictAge"
+              rules={[{ required: true, message: "请选择年代!" }]}
+            >
+              <Select
+                placeholder="请选择"
+                style={{ width: 400 }}
+                options={dictList["age"].slice(1)}
+              />
+            </Form.Item>
+
+            <Form.Item
+              label="级别"
+              name="dictLevel"
+              rules={[{ required: true, message: "请选择级别!" }]}
+            >
+              <Select
+                placeholder="请选择"
+                style={{ width: 400 }}
+                options={dictList["level"].slice(1)}
+              />
+            </Form.Item>
+
+            <Form.Item
+              label="来源"
+              name="dictSource"
+              rules={[{ required: true, message: "请选择来源!" }]}
+            >
+              <Select
+                placeholder="请选择"
+                style={{ width: 400 }}
+                options={dictList["source"].slice(1)}
+              />
+            </Form.Item>
+
+            <Form.Item label="简历" name="description">
+              <TextArea
+                rows={3}
+                placeholder="请输入内容"
+                showCount
+                maxLength={200}
+              />
+            </Form.Item>
+            <input
+              id="upInput"
+              type="file"
+              accept=".png,.jpg,.jpeg"
+              ref={myInput}
+              onChange={(e) => handeUpPhoto(e)}
+            />
+            <input
+              id="upInput2"
+              type="file"
+              accept={
+                type === "img"
+                  ? ".gif,.png,.jpg,.jpeg"
+                  : type === "audio"
+                  ? ".mp3"
+                  : ".mp4"
+              }
+              ref={myInput2}
+              onChange={(e) => handeUpPhoto2(e)}
+            />
+
+            {/* 封面图片 */}
+
+            <div className="formRow">
+              <div className="fileBoxRow_tit">封面图：</div>
+              <div
+                hidden={cover !== ""}
+                className="fileBoxRow_up"
+                onClick={() => myInput.current?.click()}
+              >
+                <PlusOutlined />
+              </div>
+              <div className="fileBoxRow_r_img" hidden={cover === ""}>
+                {cover ? (
+                  <ImageLazy width={100} height={100} src={cover} />
+                ) : null}
+
+                <Popconfirm
+                  title="删除后无法恢复，是否删除?"
+                  okText="删除"
+                  cancelText="取消"
+                  onConfirm={() => setCover("")}
+                >
+                  <div className="clearCover">
+                    <CloseCircleOutlined />
+                  </div>
+                </Popconfirm>
+              </div>
+            </div>
+            <div className="fileBoxRow_r_tit">
+              格式要求：支持png、jpg和jpeg的图片格式；最大支持10M。
+            </div>
+
+            {/* 文件类型 */}
+            <div className="formRow2">
+              <div className="fileBoxRow_tit">文件类型：</div>
+              <Radio.Group
+                onChange={(e) => setType(e.target.value)}
+                value={type}
+              >
+                <Radio value="model">模型</Radio>
+                <Radio value="img">图片</Radio>
+                <Radio value="audio">音频</Radio>
+                <Radio value="video">视频</Radio>
+              </Radio.Group>
+            </div>
+
+            {/* 上传附件或模型地址输入 */}
+            <div className="upFileBox">
+              {/* 模型链接地址输入 */}
+              <div hidden={type !== "model"}>
+                <Input
+                  value={modelSrc}
+                  onChange={(e) =>
+                    setModelSrc(e.target.value.replace(/\s+/g, ""))
+                  }
+                  maxLength={100}
+                  showCount
+                  placeholder="请输入衔接地址"
+                />
+              </div>
+
+              {/* 上传附件图片 */}
+              <div hidden={type !== "img"}>
+                <div
+                  hidden={imgFile.filePath !== ""}
+                  className="fileBoxRow_up"
+                  onClick={() => myInput2.current?.click()}
+                >
+                  <PlusOutlined />
+                </div>
+                <div
+                  className="fileBoxRow_r_img"
+                  hidden={imgFile.filePath === ""}
+                >
+                  {imgFile.filePath ? (
+                    <ImageLazy
+                      width={100}
+                      height={100}
+                      src={imgFile.filePath}
+                    />
+                  ) : null}
+
+                  <Popconfirm
+                    title="删除后无法恢复，是否删除?"
+                    okText="删除"
+                    cancelText="取消"
+                    onConfirm={() => setImgFile({ fileName: "", filePath: "" })}
+                  >
+                    <div className="clearCover">
+                      <CloseCircleOutlined />
+                    </div>
+                  </Popconfirm>
+                </div>
+                <div className="fileBoxRow_r_tit">
+                  格式要求：支持png、jpg、gif和jpeg的图片格式；最大支持20M。
+                </div>
+              </div>
+
+              {/* 上传音频和视频 */}
+              <div hidden={type === "model" || type === "img"}>
+                <Button
+                  hidden={
+                    (type === "audio" && !!audioFile.filePath) ||
+                    (type === "video" && !!videoFile.filePath)
+                  }
+                  onClick={() => myInput2.current?.click()}
+                  icon={<UploadOutlined />}
+                >
+                  上传
+                </Button>
+
+                {type === "audio" ? (
+                  <div className="donUpFileBox">
+                    <div className="fileRowBox">
+                      <a
+                        href={baseURL + audioFile.filePath}
+                        download
+                        target="_blank"
+                        className="upSuccTxt"
+                        rel="noreferrer"
+                      >
+                        {audioFile.fileName}
+                      </a>
+
+                      <Popconfirm
+                        title="删除后无法恢复，是否删除?"
+                        okText="删除"
+                        cancelText="取消"
+                        onConfirm={() =>
+                          setAudioFile({ fileName: "", filePath: "" })
+                        }
+                      >
+                        <div
+                          className="clearCover"
+                          hidden={!audioFile.fileName}
+                        >
+                          <CloseCircleOutlined />
+                        </div>
+                      </Popconfirm>
+                    </div>
+
+                    <div className="fileBoxRow_r_tit">
+                      仅支持MP3格式的音频文件，大小不得超过10MB。
+                    </div>
+                  </div>
+                ) : type === "video" ? (
+                  <div className="donUpFileBox">
+                    <div className="fileRowBox">
+                      <div className="upSuccTxt">{videoFile.fileName}</div>
+                      <div
+                        className="clearCover"
+                        hidden={!videoFile.fileName}
+                        onClick={() =>
+                          dispatch({
+                            type: "login/lookVideo",
+                            payload: videoFile.filePath,
+                          })
+                        }
+                      >
+                        <PlayCircleOutlined />
+                      </div>
+
+                      <Popconfirm
+                        title="删除后无法恢复，是否删除?"
+                        okText="删除"
+                        cancelText="取消"
+                        onConfirm={() =>
+                          setVideoFile({ fileName: "", filePath: "" })
+                        }
+                      >
+                        <div
+                          className="clearCover"
+                          hidden={!videoFile.fileName}
+                        >
+                          <CloseCircleOutlined />
+                        </div>
+                      </Popconfirm>
+                    </div>
+
+                    <div className="fileBoxRow_r_tit">
+                      仅支持MP4格式的视频文件，大小不得超过500MB。
+                    </div>
+                  </div>
+                ) : null}
+              </div>
+            </div>
+
+            {/* 确定和取消按钮 */}
+            <br />
+            <Form.Item wrapperCol={{ offset: 10, span: 16 }}>
+              <Button type="primary" htmlType="submit">
+                提交
+              </Button>
+              &emsp;
+              <Popconfirm
+                title="放弃编辑后，信息将不会保存!"
+                okText="放弃"
+                cancelText="取消"
+                onConfirm={btnX}
+              >
+                <Button>取消</Button>
+              </Popconfirm>
+            </Form.Item>
+          </Form>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const MemoGoodsAdd = React.memo(GoodsAdd);
+
+export default MemoGoodsAdd;