|
|
@@ -0,0 +1,737 @@
|
|
|
+import { RootState } from "@/store";
|
|
|
+import { Button, Checkbox, Form, Input, Popconfirm, Select } from "antd";
|
|
|
+import React, {
|
|
|
+ useCallback,
|
|
|
+ useEffect,
|
|
|
+ useMemo,
|
|
|
+ useRef,
|
|
|
+ useState,
|
|
|
+} from "react";
|
|
|
+import { useDispatch, useSelector } from "react-redux";
|
|
|
+import TextArea from "antd/es/input/TextArea";
|
|
|
+import styles from "./index.module.scss";
|
|
|
+import { MessageFu } from "@/utils/message";
|
|
|
+import ImageLazy from "@/components/ImageLazy";
|
|
|
+import classNames from "classnames";
|
|
|
+import {
|
|
|
+ PlusOutlined,
|
|
|
+ CloseCircleOutlined,
|
|
|
+ UploadOutlined,
|
|
|
+ CloseOutlined,
|
|
|
+ PlayCircleOutlined,
|
|
|
+} from "@ant-design/icons";
|
|
|
+import { goodsUploadAPI } from "@/store/action/B2Goods";
|
|
|
+import { baseURL } from "@/utils/http";
|
|
|
+
|
|
|
+type Props = {
|
|
|
+ id: number;
|
|
|
+ closeMoalFu: () => void;
|
|
|
+ upListFu: () => void;
|
|
|
+};
|
|
|
+
|
|
|
+// 上传附件的进度条
|
|
|
+const UpAsyncLodingDom: any = document.querySelector("#UpAsyncLoding");
|
|
|
+const progressDom: any = document.querySelector("#progress");
|
|
|
+
|
|
|
+function GoodsAdd({ id, closeMoalFu, upListFu }: Props) {
|
|
|
+ const dispatch = useDispatch();
|
|
|
+
|
|
|
+ // 表单的ref
|
|
|
+ const FormBoxRef = useRef<any>({});
|
|
|
+
|
|
|
+ // 文件的dirCode码
|
|
|
+ const [dirCode, setDirCode] = useState("");
|
|
|
+
|
|
|
+ const getInfoInAPIFu = useCallback(async (id: number) => {
|
|
|
+ // const res = await getUserInfoByIdAPI(id);
|
|
|
+ // FormBoxRef.current.setFieldsValue(res.data);
|
|
|
+ console.log("是编辑，在这里发请求拿数据");
|
|
|
+ // setDirCode(data.dirCode!);
|
|
|
+ }, []);
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
+ if (id > 0) getInfoInAPIFu(id);
|
|
|
+ else {
|
|
|
+ setDirCode(Date.now() + "");
|
|
|
+ FormBoxRef.current.setFieldsValue({ topic: 3, display: 1 ,aaaaa:0});
|
|
|
+ }
|
|
|
+ }, [getInfoInAPIFu, id]);
|
|
|
+
|
|
|
+ // 从仓库获取下拉列表数据
|
|
|
+ const dictList = useSelector((state: RootState) => state.loginStore.dictList);
|
|
|
+
|
|
|
+ // 上传封面图的ref
|
|
|
+ const [coverCheck, setCoverCheck] = useState(false);
|
|
|
+ const [cover, setCover] = useState("");
|
|
|
+ const myInput = useRef<HTMLInputElement>(null);
|
|
|
+
|
|
|
+ // 上传封面图
|
|
|
+ const handeUpPhoto = useCallback(
|
|
|
+ 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 MessageFu.warning("只支持jpg、png格式!");
|
|
|
+ }
|
|
|
+ // 校验大小
|
|
|
+ if (filesInfo.size > 20 * 1024 * 1024) {
|
|
|
+ e.target.value = "";
|
|
|
+ return MessageFu.warning("最大支持20M!");
|
|
|
+ }
|
|
|
+ // 创建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) {
|
|
|
+ MessageFu.success("上传成功!");
|
|
|
+ setCover(res.data.filePath);
|
|
|
+ }
|
|
|
+ UpAsyncLodingDom.style.opacity = 0;
|
|
|
+ progressDom.style.width = "0%";
|
|
|
+ }
|
|
|
+ },
|
|
|
+ [dirCode]
|
|
|
+ );
|
|
|
+
|
|
|
+ // 选中附件类型
|
|
|
+ const [typeCheck, setTypeCheck] = useState<any>([]);
|
|
|
+ const [typeOk, setTypeOk] = useState(false);
|
|
|
+
|
|
|
+ const typeCheckArr = useMemo(() => {
|
|
|
+ return [
|
|
|
+ { label: "模型", value: "model" },
|
|
|
+ { label: "图片", value: "img" },
|
|
|
+ { label: "音频", value: "audio" },
|
|
|
+ { label: "视频", value: "video" },
|
|
|
+ ];
|
|
|
+ }, []);
|
|
|
+
|
|
|
+ type FileListType = {
|
|
|
+ fileName?: string;
|
|
|
+ filePath?: string;
|
|
|
+ id?: number;
|
|
|
+ };
|
|
|
+
|
|
|
+ // 上传附件的信息
|
|
|
+ const [fileList, setFileList] = useState({
|
|
|
+ model: {} as FileListType,
|
|
|
+ img: [] as FileListType[],
|
|
|
+ audio: {} as FileListType,
|
|
|
+ video: {} as FileListType,
|
|
|
+ });
|
|
|
+
|
|
|
+ // 附件信息的校验
|
|
|
+
|
|
|
+ const fileCheckFu = useMemo(() => {
|
|
|
+ let flag = false;
|
|
|
+ if (typeCheck.length === 0) flag = true;
|
|
|
+ if (typeCheck.includes("model") && !fileList.model.id) flag = true;
|
|
|
+ if (typeCheck.includes("img") && fileList.img.length === 0) flag = true;
|
|
|
+ if (typeCheck.includes("audio") && !fileList.audio.id) flag = true;
|
|
|
+ if (typeCheck.includes("video") && !fileList.video.id) flag = true;
|
|
|
+ return flag;
|
|
|
+ }, [fileList, typeCheck]);
|
|
|
+
|
|
|
+ // 点击上传附件按钮
|
|
|
+ const myInput2 = useRef<HTMLInputElement>(null);
|
|
|
+
|
|
|
+ const [fileOneType, setFileOneType] = useState("");
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
+ if (fileOneType) myInput2.current?.click();
|
|
|
+ }, [fileOneType]);
|
|
|
+
|
|
|
+ const upFileFu = useCallback((type: string) => {
|
|
|
+ setFileOneType("");
|
|
|
+ window.setTimeout(() => {
|
|
|
+ setFileOneType(type);
|
|
|
+ }, 100);
|
|
|
+ }, []);
|
|
|
+
|
|
|
+ // 上传附件的处理函数
|
|
|
+ const handeUpPhoto2 = useCallback(
|
|
|
+ (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 (fileOneType === "audio") {
|
|
|
+ anType = ["audio/mpeg"];
|
|
|
+ anTit1 = "只支持mp3格式!";
|
|
|
+ anTit2 = "最大支持10M!";
|
|
|
+ anSize = 10 * 1024 * 1024;
|
|
|
+ } else if (fileOneType === "video") {
|
|
|
+ anType = ["video/mp4"];
|
|
|
+ anTit1 = "只支持mp4格式!";
|
|
|
+ anTit2 = "最大支持500M!";
|
|
|
+ anSize = 500 * 1024 * 1024;
|
|
|
+ } else if (fileOneType === "model") {
|
|
|
+ anType = [""];
|
|
|
+ anTit1 = "只支持4dage格式!";
|
|
|
+ anTit2 = "最大支持500M!";
|
|
|
+ anSize = 500 * 1024 * 1024;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 校验格式
|
|
|
+ if (fileOneType !== "model") {
|
|
|
+ if (!anType.includes(filesInfo.type)) {
|
|
|
+ e.target.value = "";
|
|
|
+ return MessageFu.warning(anTit1);
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (!filesInfo.name.includes(".4dage")) {
|
|
|
+ e.target.value = "";
|
|
|
+ return MessageFu.warning(anTit1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 校验大小
|
|
|
+ if (filesInfo.size > anSize) {
|
|
|
+ e.target.value = "";
|
|
|
+ return MessageFu.warning(anTit2);
|
|
|
+ }
|
|
|
+ // 创建FormData对象
|
|
|
+ const fd = new FormData();
|
|
|
+ // 把files添加进FormData对象（‘photo’为后端需要的字段）
|
|
|
+ fd.append("type", fileOneType);
|
|
|
+ fd.append("file", filesInfo);
|
|
|
+
|
|
|
+ e.target.value = "";
|
|
|
+
|
|
|
+ // const res: any = await goodsUploadAPI(fd);
|
|
|
+ // if (res.code === 0) {
|
|
|
+ // MessageFu.success("上传成功!");
|
|
|
+ // if (fileOneType === "img")
|
|
|
+ // setFileList({ ...fileList, img: [res.data, ...fileList.img] });
|
|
|
+ // else setFileList({ ...fileList, [fileOneType]: res.data });
|
|
|
+
|
|
|
+ // }
|
|
|
+ UpAsyncLodingDom.style.opacity = 0;
|
|
|
+ progressDom.style.width = "0%";
|
|
|
+ }
|
|
|
+ },
|
|
|
+ [fileOneType]
|
|
|
+ );
|
|
|
+
|
|
|
+ // 附件图片的拖动
|
|
|
+ const [dragImg, setDragImg] = useState<any>(null);
|
|
|
+
|
|
|
+ const handleDragOver = useCallback(
|
|
|
+ (e: React.DragEvent<HTMLDivElement>, item: FileListType) => {
|
|
|
+ e.dataTransfer.dropEffect = "move";
|
|
|
+ },
|
|
|
+ []
|
|
|
+ );
|
|
|
+
|
|
|
+ const handleDragEnter = useCallback(
|
|
|
+ (e: React.DragEvent<HTMLDivElement>, item: FileListType) => {
|
|
|
+ e.dataTransfer.effectAllowed = "move";
|
|
|
+ if (item === dragImg) return;
|
|
|
+ const newItems = [...fileList.img]; //拷贝一份数据进行交换操作。
|
|
|
+ const src = newItems.indexOf(dragImg); //获取数组下标
|
|
|
+ const dst = newItems.indexOf(item);
|
|
|
+ newItems.splice(dst, 0, ...newItems.splice(src, 1)); //交换位置
|
|
|
+ setFileList({ ...fileList, img: newItems });
|
|
|
+ },
|
|
|
+ [dragImg, fileList]
|
|
|
+ );
|
|
|
+
|
|
|
+ // 删除某一张图片
|
|
|
+ const delImgListFu = useCallback(
|
|
|
+ (id: number) => {
|
|
|
+ const newItems = fileList.img.filter((v) => v.id !== id);
|
|
|
+ setFileList({ ...fileList, img: newItems });
|
|
|
+ },
|
|
|
+ [fileList]
|
|
|
+ );
|
|
|
+
|
|
|
+ // 没有通过校验
|
|
|
+ const onFinishFailed = useCallback(() => {
|
|
|
+ setCoverCheck(true);
|
|
|
+ setTypeOk(true);
|
|
|
+ return MessageFu.warning("有表单不符号规则!");
|
|
|
+ }, []);
|
|
|
+
|
|
|
+ // 通过校验点击确定
|
|
|
+ const onFinish = useCallback(() => {
|
|
|
+ console.log("通过校验，点击确定");
|
|
|
+ setCoverCheck(true);
|
|
|
+ setTypeOk(true);
|
|
|
+ if (typeCheck.length === 0) return MessageFu.warning("有表单不符号规则!");;
|
|
|
+ if (cover === "") return MessageFu.warning("有表单不符号规则!");;
|
|
|
+ }, [cover, typeCheck.length]);
|
|
|
+
|
|
|
+ return (
|
|
|
+ <div className={styles.GoodsAdd}>
|
|
|
+ <div className="main">
|
|
|
+ <Form
|
|
|
+ ref={FormBoxRef}
|
|
|
+ name="basic"
|
|
|
+ labelCol={{ span: 3 }}
|
|
|
+ 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={25} showCount placeholder="请输入内容" />
|
|
|
+ </Form.Item>
|
|
|
+
|
|
|
+ <Form.Item
|
|
|
+ label="登记编号"
|
|
|
+ name="num"
|
|
|
+ getValueFromEvent={(e) => e.target.value.replace(/\s+/g, "")}
|
|
|
+ >
|
|
|
+ <Input maxLength={25} 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="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="topic"
|
|
|
+ rules={[{ required: true, message: "请选择万物墙主题!" }]}
|
|
|
+ >
|
|
|
+ <Select
|
|
|
+ placeholder="请选择"
|
|
|
+ style={{ width: 400 }}
|
|
|
+ options={[
|
|
|
+ { value: 1, label: "战争" },
|
|
|
+ { value: 2, label: "生活" },
|
|
|
+ { value: 3, label: "不展示" },
|
|
|
+ ]}
|
|
|
+ />
|
|
|
+ </Form.Item>
|
|
|
+
|
|
|
+ <Form.Item
|
|
|
+ label="简介"
|
|
|
+ name="description"
|
|
|
+ getValueFromEvent={(e) => e.target.value.trim()}
|
|
|
+ >
|
|
|
+ <TextArea
|
|
|
+ rows={4}
|
|
|
+ placeholder="请输入内容"
|
|
|
+ showCount
|
|
|
+ maxLength={200}
|
|
|
+ />
|
|
|
+ </Form.Item>
|
|
|
+
|
|
|
+ {/* -----上传封面图片 */}
|
|
|
+ <div className="myformBox myformBox0">
|
|
|
+ <input
|
|
|
+ id="upInput"
|
|
|
+ type="file"
|
|
|
+ accept=".png,.jpg,.jpeg"
|
|
|
+ ref={myInput}
|
|
|
+ onChange={(e) => handeUpPhoto(e)}
|
|
|
+ />
|
|
|
+ <input
|
|
|
+ id="upInput2"
|
|
|
+ type="file"
|
|
|
+ accept={
|
|
|
+ fileOneType === "img"
|
|
|
+ ? ".gif,.png,.jpg,.jpeg"
|
|
|
+ : fileOneType === "audio"
|
|
|
+ ? ".mp3"
|
|
|
+ : fileOneType === "model"
|
|
|
+ ? ".4dage"
|
|
|
+ : ".mp4"
|
|
|
+ }
|
|
|
+ ref={myInput2}
|
|
|
+ onChange={(e) => handeUpPhoto2(e)}
|
|
|
+ />
|
|
|
+ <div className="label">
|
|
|
+ <span>*</span> 封面图：
|
|
|
+ </div>
|
|
|
+ <div className="fileBoxRow_r">
|
|
|
+ <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 className="fileBoxRow_r_tit">
|
|
|
+ 支持png、jpg和jpeg的图片格式；最大支持20M。
|
|
|
+ <br />
|
|
|
+ <div
|
|
|
+ className={classNames(
|
|
|
+ "noUpThumb",
|
|
|
+ !cover && coverCheck ? "noUpThumbAc" : ""
|
|
|
+ )}
|
|
|
+ >
|
|
|
+ 请上传封面图!
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {/* 选中文件类型和上传附件 */}
|
|
|
+ <div className="myformBox">
|
|
|
+ <div className="label">
|
|
|
+ <span>*</span> 文件类型：
|
|
|
+ </div>
|
|
|
+ <div className="myformBoxR">
|
|
|
+ <Checkbox.Group
|
|
|
+ options={typeCheckArr}
|
|
|
+ value={typeCheck}
|
|
|
+ onChange={(e) => setTypeCheck(e)}
|
|
|
+ // onChange={(e) => console.log(e)}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {/* -----------模型上传 */}
|
|
|
+ <div
|
|
|
+ className="myformBox myformBox2"
|
|
|
+ hidden={!typeCheck.includes("model")}
|
|
|
+ >
|
|
|
+ <div className="label">
|
|
|
+ <span>*</span> 模型：
|
|
|
+ </div>
|
|
|
+ {fileList.model.id ? (
|
|
|
+ <div className="fileInfo">
|
|
|
+ <a
|
|
|
+ href={baseURL + fileList.model.filePath}
|
|
|
+ download
|
|
|
+ target="_blank"
|
|
|
+ className="upSuccTxt"
|
|
|
+ rel="noreferrer"
|
|
|
+ >
|
|
|
+ {fileList.model.fileName}
|
|
|
+ </a>
|
|
|
+
|
|
|
+ <Popconfirm
|
|
|
+ title="删除后无法恢复，是否删除?"
|
|
|
+ okText="删除"
|
|
|
+ cancelText="取消"
|
|
|
+ onConfirm={() => setFileList({ ...fileList, model: {} })}
|
|
|
+ >
|
|
|
+ <div className="clearCover">
|
|
|
+ <CloseCircleOutlined />
|
|
|
+ </div>
|
|
|
+ </Popconfirm>
|
|
|
+ </div>
|
|
|
+ ) : (
|
|
|
+ <>
|
|
|
+ <Button
|
|
|
+ onClick={() => upFileFu("model")}
|
|
|
+ icon={<UploadOutlined />}
|
|
|
+ >
|
|
|
+ 上传
|
|
|
+ </Button>
|
|
|
+
|
|
|
+ <div className="fileTit">
|
|
|
+ 仅支持4dage格式的模型文件，大小不能超过500M。
|
|
|
+ </div>
|
|
|
+ </>
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {/* -----------图片上传 */}
|
|
|
+ <div
|
|
|
+ className="myformBox myformBox3"
|
|
|
+ hidden={!typeCheck.includes("img")}
|
|
|
+ >
|
|
|
+ <div className="label">
|
|
|
+ <span>*</span> 图片：
|
|
|
+ </div>
|
|
|
+ <>
|
|
|
+ <div className="fileBoxRow_r">
|
|
|
+ <div className="upImgBox">
|
|
|
+ <div
|
|
|
+ hidden={!!fileList.img.length && fileList.img.length >= 9}
|
|
|
+ className="fileBoxRow_up"
|
|
|
+ onClick={() => upFileFu("img")}
|
|
|
+ >
|
|
|
+ <PlusOutlined />
|
|
|
+ </div>
|
|
|
+ {fileList.img.map((v) => (
|
|
|
+ <div
|
|
|
+ className="fileBoxRow_r_img"
|
|
|
+ key={v.id}
|
|
|
+ draggable="true"
|
|
|
+ onDragStart={() => setDragImg(v)}
|
|
|
+ onDragOver={(e) => handleDragOver(e, v)}
|
|
|
+ onDragEnter={(e) => handleDragEnter(e, v)}
|
|
|
+ onDragEnd={() => setDragImg(null)}
|
|
|
+ >
|
|
|
+ {v.filePath ? (
|
|
|
+ <ImageLazy
|
|
|
+ noLook={dragImg ? true : false}
|
|
|
+ width={100}
|
|
|
+ height={100}
|
|
|
+ src={v.filePath}
|
|
|
+ />
|
|
|
+ ) : null}
|
|
|
+
|
|
|
+ <Popconfirm
|
|
|
+ title="删除后无法恢复，是否删除?"
|
|
|
+ okText="删除"
|
|
|
+ cancelText="取消"
|
|
|
+ onConfirm={() => delImgListFu(v.id!)}
|
|
|
+ >
|
|
|
+ <div className="clearCover">
|
|
|
+ <CloseOutlined />
|
|
|
+ </div>
|
|
|
+ </Popconfirm>
|
|
|
+ </div>
|
|
|
+ ))}
|
|
|
+ </div>
|
|
|
+ <div className="fileTit">
|
|
|
+ {fileList.img.length && fileList.img.length >= 2 ? (
|
|
|
+ <>
|
|
|
+ 按住鼠标可拖动图片调整顺序。
|
|
|
+ <br />
|
|
|
+ </>
|
|
|
+ ) : null}
|
|
|
+ 支持png、jpg、gif和jpeg的图片格式；最大支持20M；最多支持9张。
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {/* -----------音频上传 */}
|
|
|
+ <div
|
|
|
+ className="myformBox myformBox2"
|
|
|
+ hidden={!typeCheck.includes("audio")}
|
|
|
+ >
|
|
|
+ <div className="label">
|
|
|
+ <span>*</span> 音频：
|
|
|
+ </div>
|
|
|
+ {fileList.audio.id ? (
|
|
|
+ <div className="fileInfo">
|
|
|
+ <a
|
|
|
+ href={baseURL + fileList.audio.filePath}
|
|
|
+ download
|
|
|
+ target="_blank"
|
|
|
+ className="upSuccTxt"
|
|
|
+ rel="noreferrer"
|
|
|
+ >
|
|
|
+ {fileList.audio.fileName}
|
|
|
+ </a>
|
|
|
+
|
|
|
+ <Popconfirm
|
|
|
+ title="删除后无法恢复，是否删除?"
|
|
|
+ okText="删除"
|
|
|
+ cancelText="取消"
|
|
|
+ onConfirm={() => setFileList({ ...fileList, audio: {} })}
|
|
|
+ >
|
|
|
+ <div className="clearCover">
|
|
|
+ <CloseCircleOutlined />
|
|
|
+ </div>
|
|
|
+ </Popconfirm>
|
|
|
+ </div>
|
|
|
+ ) : (
|
|
|
+ <>
|
|
|
+ <Button
|
|
|
+ onClick={() => upFileFu("audio")}
|
|
|
+ icon={<UploadOutlined />}
|
|
|
+ >
|
|
|
+ 上传
|
|
|
+ </Button>
|
|
|
+
|
|
|
+ <div className="fileTit">
|
|
|
+ 仅支持MP3格式的音频文件，大小不得超过10MB。
|
|
|
+ </div>
|
|
|
+ </>
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {/* -----------视频上传 */}
|
|
|
+ <div
|
|
|
+ className="myformBox myformBox2"
|
|
|
+ hidden={!typeCheck.includes("video")}
|
|
|
+ >
|
|
|
+ <div className="label">
|
|
|
+ <span>*</span> 视频：
|
|
|
+ </div>
|
|
|
+ {fileList.video.id ? (
|
|
|
+ <div className="fileInfo">
|
|
|
+ <div className="upSuccTxt">{fileList.video.filePath}</div>
|
|
|
+ <div
|
|
|
+ className="clearCover"
|
|
|
+ hidden={!fileList.video.filePath}
|
|
|
+ onClick={() =>
|
|
|
+ dispatch({
|
|
|
+ type: "login/lookVideo",
|
|
|
+ payload: fileList.video.filePath,
|
|
|
+ })
|
|
|
+ }
|
|
|
+ >
|
|
|
+ <PlayCircleOutlined />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <Popconfirm
|
|
|
+ title="删除后无法恢复，是否删除?"
|
|
|
+ okText="删除"
|
|
|
+ cancelText="取消"
|
|
|
+ onConfirm={() => setFileList({ ...fileList, video: {} })}
|
|
|
+ >
|
|
|
+ <div className="clearCover">
|
|
|
+ <CloseCircleOutlined />
|
|
|
+ </div>
|
|
|
+ </Popconfirm>
|
|
|
+ </div>
|
|
|
+ ) : (
|
|
|
+ <>
|
|
|
+ <Button
|
|
|
+ onClick={() => upFileFu("video")}
|
|
|
+ icon={<UploadOutlined />}
|
|
|
+ >
|
|
|
+ 上传
|
|
|
+ </Button>
|
|
|
+
|
|
|
+ <div className="fileTit">
|
|
|
+ 仅支持MP4格式的视频文件，大小不得超过500MB。
|
|
|
+ </div>
|
|
|
+ </>
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div
|
|
|
+ className={classNames(
|
|
|
+ "noUpThumb noUpThumb2",
|
|
|
+ fileCheckFu && typeOk ? "noUpThumbAc" : ""
|
|
|
+ )}
|
|
|
+ >
|
|
|
+ 请至少选择一个文件类型，并上传对应附件!
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ <Form.Item
|
|
|
+ label="展示状态"
|
|
|
+ name="display"
|
|
|
+ rules={[{ required: true, message: "请选择展示状态!" }]}
|
|
|
+ >
|
|
|
+ <Select
|
|
|
+ placeholder="请选择"
|
|
|
+ style={{ width: 400 }}
|
|
|
+ options={[
|
|
|
+ { value: 1, label: "展示" },
|
|
|
+ { value: 0, label: "不展示" },
|
|
|
+ ]}
|
|
|
+ />
|
|
|
+ </Form.Item>
|
|
|
+
|
|
|
+ <Form.Item
|
|
|
+ label="弹幕留言"
|
|
|
+ name="aaaaa"
|
|
|
+ rules={[{ required: true, message: "请选择弹幕留言!" }]}
|
|
|
+ >
|
|
|
+ <Select
|
|
|
+ placeholder="请选择"
|
|
|
+ style={{ width: 400 }}
|
|
|
+ options={[
|
|
|
+ { value: 1, label: "开启" },
|
|
|
+ { value: 0, label: "关闭" },
|
|
|
+ ]}
|
|
|
+ />
|
|
|
+ </Form.Item>
|
|
|
+
|
|
|
+ {/* 确定和取消按钮 */}
|
|
|
+ <br />
|
|
|
+ <Form.Item wrapperCol={{ offset: 9, span: 16 }}>
|
|
|
+ <Button type="primary" htmlType="submit">
|
|
|
+ 提交
|
|
|
+ </Button>
|
|
|
+  
|
|
|
+ <Popconfirm
|
|
|
+ title="放弃编辑后，信息将不会保存!"
|
|
|
+ okText="放弃"
|
|
|
+ cancelText="取消"
|
|
|
+ onConfirm={closeMoalFu}
|
|
|
+ >
|
|
|
+ <Button>取消</Button>
|
|
|
+ </Popconfirm>
|
|
|
+ </Form.Item>
|
|
|
+ </Form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+}
|
|
|
+
|
|
|
+const MemoGoodsAdd = React.memo(GoodsAdd);
|
|
|
+
|
|
|
+export default MemoGoodsAdd;
|
