|
|
@@ -0,0 +1,737 @@
|
|
|
+import store, { RootState } from "@/store";
|
|
|
+import { Button, Checkbox, Form, Input, Popconfirm, Select } from "antd";
|
|
|
+import React, {
|
|
|
+ useCallback,
|
|
|
+ useEffect,
|
|
|
+ useMemo,
|
|
|
+ useRef,
|
|
|
+ useState,
|
|
|
+} from "react";
|
|
|
+import { 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 {
|
|
|
+ getGoodsInfoByIdAPI,
|
|
|
+ getGoodsSaveAPI,
|
|
|
+ goodsUploadAPI,
|
|
|
+} from "@/store/action/A3Goods";
|
|
|
+import { baseURL } from "@/utils/http";
|
|
|
+import { FileListType, GoodsTableType } from "@/types";
|
|
|
+import { domShowFu, progressDomFu } from "@/utils/domShow";
|
|
|
+
|
|
|
+type Props = {
|
|
|
+ id: number;
|
|
|
+ closeMoalFu: () => void;
|
|
|
+ addListFu: () => void;
|
|
|
+ editListFu: () => void;
|
|
|
+};
|
|
|
+
|
|
|
+function GoodsAdd({ id, closeMoalFu, addListFu, editListFu }: Props) {
|
|
|
+ // 上传附件的信息
|
|
|
+ const [fileList, setFileList] = useState({
|
|
|
+ model: {} as FileListType,
|
|
|
+ img: [] as FileListType[],
|
|
|
+ audio: {} as FileListType,
|
|
|
+ video: {} as FileListType,
|
|
|
+ });
|
|
|
+
|
|
|
+ // 表单的ref
|
|
|
+ const FormBoxRef = useRef<any>({});
|
|
|
+
|
|
|
+ // 文件的dirCode码
|
|
|
+ const [dirCode, setDirCode] = useState("");
|
|
|
+
|
|
|
+ const getInfoInAPIFu = useCallback(async (id: number) => {
|
|
|
+ const res = await getGoodsInfoByIdAPI(id);
|
|
|
+ FormBoxRef.current.setFieldsValue(res.data.entity);
|
|
|
+ setCover(res.data.entity.thumb);
|
|
|
+
|
|
|
+ if (res.data.entity.type) setTypeCheck(res.data.entity.type.split(","));
|
|
|
+
|
|
|
+ const data: FileListType[] = res.data.file;
|
|
|
+ const obj = {
|
|
|
+ model: {} as FileListType,
|
|
|
+ img: [] as FileListType[],
|
|
|
+ audio: {} as FileListType,
|
|
|
+ video: {} as FileListType,
|
|
|
+ };
|
|
|
+
|
|
|
+ data.forEach((v) => {
|
|
|
+ if (v.type === "img") obj.img.push(v);
|
|
|
+ else obj[v.type!] = v;
|
|
|
+ });
|
|
|
+ setFileList(obj);
|
|
|
+ setDirCode(res.data.entity.dirCode);
|
|
|
+ }, []);
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
+ if (id > 0) getInfoInAPIFu(id);
|
|
|
+ else {
|
|
|
+ setDirCode(Date.now() + "");
|
|
|
+ FormBoxRef.current.setFieldsValue({
|
|
|
+ topic: "不展示",
|
|
|
+ display: 1,
|
|
|
+ isBarrage: 0,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }, [getInfoInAPIFu, id]);
|
|
|
+
|
|
|
+ // 从仓库获取下拉列表数据
|
|
|
+ const dictList = useSelector(
|
|
|
+ (state: RootState) => state.layoutStore.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);
|
|
|
+ }
|
|
|
+ domShowFu("#UpAsyncLoding", false);
|
|
|
+ progressDomFu("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" },
|
|
|
+ ];
|
|
|
+ }, []);
|
|
|
+
|
|
|
+ // 附件信息的校验
|
|
|
+
|
|
|
+ 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(
|
|
|
+ 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 (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("dirCode", dirCode);
|
|
|
+ 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 });
|
|
|
+ }
|
|
|
+ domShowFu("#UpAsyncLoding", false);
|
|
|
+ progressDomFu("0%");
|
|
|
+ }
|
|
|
+ },
|
|
|
+ [dirCode, fileList, 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(
|
|
|
+ async (value: GoodsTableType) => {
|
|
|
+ console.log("通过校验，点击确定");
|
|
|
+ setCoverCheck(true);
|
|
|
+ setTypeOk(true);
|
|
|
+ if (typeCheck.length === 0 || cover === "" || fileCheckFu)
|
|
|
+ return MessageFu.warning("有表单不符号规则!");
|
|
|
+
|
|
|
+ const fileIds = [];
|
|
|
+ if (fileList.model.id && typeCheck.includes("model"))
|
|
|
+ fileIds.push(fileList.model.id);
|
|
|
+ if (fileList.audio.id && typeCheck.includes("audio"))
|
|
|
+ fileIds.push(fileList.audio.id);
|
|
|
+ if (fileList.video.id && typeCheck.includes("video"))
|
|
|
+ fileIds.push(fileList.video.id);
|
|
|
+ if (typeCheck.includes("img")) {
|
|
|
+ fileList.img.forEach((v) => {
|
|
|
+ if (v.id) fileIds.push(v.id);
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ const obj = {
|
|
|
+ ...value,
|
|
|
+ id: id > 0 ? id : null,
|
|
|
+ dirCode,
|
|
|
+ fileIds: fileIds.join(","),
|
|
|
+ thumb: cover,
|
|
|
+ type: typeCheck.join(","),
|
|
|
+ } as GoodsTableType;
|
|
|
+ const res = await getGoodsSaveAPI(obj);
|
|
|
+ if (res.code === 0) {
|
|
|
+ MessageFu.success(id > 0 ? "编辑成功!" : "新增成功!");
|
|
|
+ closeMoalFu();
|
|
|
+ if (id > 0) editListFu();
|
|
|
+ else addListFu();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ [
|
|
|
+ typeCheck,
|
|
|
+ cover,
|
|
|
+ fileCheckFu,
|
|
|
+ fileList.model.id,
|
|
|
+ fileList.audio.id,
|
|
|
+ fileList.video.id,
|
|
|
+ fileList.img,
|
|
|
+ id,
|
|
|
+ dirCode,
|
|
|
+ closeMoalFu,
|
|
|
+ editListFu,
|
|
|
+ addListFu,
|
|
|
+ ]
|
|
|
+ );
|
|
|
+
|
|
|
+ return (
|
|
|
+ <div className={styles.GoodsAdd}>
|
|
|
+ <div className="pageTitle">{id > 0 ? "编辑馆藏" : "新增馆藏"}</div>
|
|
|
+ <div className="main mySorrl">
|
|
|
+ <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="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="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.fileName}</div>
|
|
|
+ <div
|
|
|
+ className="clearCover"
|
|
|
+ hidden={!fileList.video.filePath}
|
|
|
+ onClick={() =>
|
|
|
+ store.dispatch({
|
|
|
+ type: "layout/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>
|
|
|
+
|
|
|
+ {/* 确定和取消按钮 */}
|
|
|
+ <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;
|
