完成动态管理的发布、编辑、删除功能
This commit is contained in:
parent
d99cec76cf
commit
70d94f0d0c
|
@ -0,0 +1,574 @@
|
|||
import React, { useState, useEffect } from "react";
|
||||
import { Form, Input, Table, Image, Space, Button, Modal, message } from "antd";
|
||||
import baseRequest from "../../utils/baseRequest";
|
||||
import ImageUploader from "../../components/ImageUploader";
|
||||
import VideoUploader from "../../components/VideoUploader";
|
||||
|
||||
const CreateAndEditPostContent = (props) => {
|
||||
//表头
|
||||
const columns = [
|
||||
{
|
||||
title: "动态信息",
|
||||
dataIndex: "info",
|
||||
key: "info",
|
||||
render: (data) => (
|
||||
<div>
|
||||
<p>
|
||||
动态id:<span className="text-red-400">{data.id}</span>
|
||||
</p>
|
||||
<p>
|
||||
点赞:<span className="text-red-400">{data.like}</span>
|
||||
</p>
|
||||
<p>
|
||||
创建时间:<span className="text-red-400">{data.ct}</span>
|
||||
</p>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "动态文案",
|
||||
dataIndex: "content",
|
||||
key: "content",
|
||||
},
|
||||
{
|
||||
title: "媒体",
|
||||
dataIndex: "media",
|
||||
key: "media",
|
||||
render: (data) => (
|
||||
<div>
|
||||
{data?.images?.map((item, index) => (
|
||||
<Image
|
||||
key={index}
|
||||
src={item.urls[0]}
|
||||
width={150}
|
||||
style={{ marginBottom: 10 }}
|
||||
/>
|
||||
))}
|
||||
{data?.videos?.map((item, index) => (
|
||||
<video key={index} src={item.urls[0]} width={150} controls />
|
||||
))}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
dataIndex: "opeartion",
|
||||
key: "opeartion",
|
||||
render: (_, record) => (
|
||||
<div>
|
||||
<Space>
|
||||
<Space.Compact direction="vertical">
|
||||
<Button type="primary" onClick={() => onClickEdit(record)}>
|
||||
编辑
|
||||
</Button>
|
||||
<Button onClick={() => onClickDelete(record)}>删除</Button>
|
||||
</Space.Compact>
|
||||
</Space>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
//控制编辑modal是否出现
|
||||
const [isEditModalOpen, setIsEditModalOpen] = useState(false);
|
||||
|
||||
//modal打开时的默认值
|
||||
const [defaultValues, setDefaultValues] = useState({});
|
||||
const [defaultMedia, setDefaultMedia] = useState({});
|
||||
|
||||
//点击modal取消按钮
|
||||
const handleCancel = () => {
|
||||
setDefaultValues({});
|
||||
setDefaultMedia({});
|
||||
setEditImageId([]);
|
||||
setEditVideoId([]);
|
||||
setIsEditModalOpen(false);
|
||||
};
|
||||
|
||||
//点击编辑按钮
|
||||
const onClickEdit = (record) => {
|
||||
setDefaultValues(record);
|
||||
setDefaultMedia(record.media);
|
||||
setIsEditModalOpen(true);
|
||||
};
|
||||
|
||||
//保存上传的媒体id
|
||||
const [editImageId, setEditImageId] = useState([]);
|
||||
const [editVideoId, setEditVideoId] = useState([]);
|
||||
|
||||
//删除默认的媒体
|
||||
const handleDeleteMedia = (type, id) => {
|
||||
if (type === "video") {
|
||||
setDefaultMedia({
|
||||
...defaultMedia,
|
||||
video_ids: [],
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (type === "image") {
|
||||
setDefaultMedia({
|
||||
...defaultMedia,
|
||||
image_ids: defaultMedia.image_ids.filter((item) => item !== id),
|
||||
images: defaultMedia.images.filter((item) => item.id !== id),
|
||||
});
|
||||
return;
|
||||
}
|
||||
};
|
||||
|
||||
//点击确认提交更改动态
|
||||
const handleChange = async (value) => {
|
||||
const imageIds = [...defaultMedia.image_ids, ...editImageId];
|
||||
const videoIds = [...defaultMedia.video_ids, ...editVideoId];
|
||||
if (imageIds.length === 0 && videoIds.length === 0) {
|
||||
alert("图片或视频不可为空");
|
||||
return;
|
||||
}
|
||||
if (imageIds.length !== 0 && videoIds.length !== 0) {
|
||||
alert("不可同时上传图片和视频");
|
||||
return;
|
||||
}
|
||||
if (imageIds.length > 9) {
|
||||
alert("图片不可超过9张");
|
||||
return;
|
||||
}
|
||||
if (videoIds.length > 1) {
|
||||
alert("视频不可超过1个");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const base = baseRequest();
|
||||
const response = await fetch("/op/moment/update", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
id: defaultValues.info.id,
|
||||
text: value.content,
|
||||
media_component: {
|
||||
image_ids: imageIds,
|
||||
video_ids: videoIds,
|
||||
},
|
||||
...base,
|
||||
}),
|
||||
});
|
||||
const temData = await response.json();
|
||||
if (temData.ret === -1) {
|
||||
alert(temData.msg);
|
||||
return;
|
||||
}
|
||||
setShowData(
|
||||
showData.filter((item) => item.info.id !== defaultValues.info.id)
|
||||
);
|
||||
handleCancel();
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
|
||||
//点击删除按钮
|
||||
const onClickDelete = async (record) => {
|
||||
try {
|
||||
const base = baseRequest();
|
||||
const response = await fetch("/op/moment/delete", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
id: record.info.id,
|
||||
...base,
|
||||
}),
|
||||
});
|
||||
const temData = await response.json();
|
||||
console.log(temData);
|
||||
if (temData.ret === -1) {
|
||||
alert(temData.msg);
|
||||
return;
|
||||
}
|
||||
setShowData(showData.filter((item) => item.info.id !== record.info.id));
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
|
||||
//展示的数据
|
||||
const [showData, setShowData] = useState([]);
|
||||
|
||||
//获取数据
|
||||
const getData = async () => {
|
||||
try {
|
||||
const base = baseRequest();
|
||||
const response = await fetch("/op/moment/list", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
ct_upper_bound: Math.floor(new Date().getTime() / 1000),
|
||||
offset: 0,
|
||||
limit: 200,
|
||||
...base,
|
||||
}),
|
||||
});
|
||||
const temData = await response.json();
|
||||
if (temData.ret === -1) {
|
||||
alert(temData.msg);
|
||||
return;
|
||||
}
|
||||
//匹配表格格式
|
||||
const structedData = temData.data.list.map((item, index) => {
|
||||
return {
|
||||
key: index,
|
||||
info: {
|
||||
id: item.id,
|
||||
like: item.thumbs_up_num,
|
||||
ct: new Date(item.ct * 1000).toLocaleString(),
|
||||
},
|
||||
content: item.text,
|
||||
media: item.media_component,
|
||||
};
|
||||
});
|
||||
setShowData(structedData);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
useEffect(() => {
|
||||
getData();
|
||||
}, []);
|
||||
|
||||
//搜索
|
||||
const search = async (value) => {
|
||||
try {
|
||||
const base = baseRequest();
|
||||
const detailResponse = await fetch(`/op/streamer/list_ext_by_user_id`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
user_id: parseInt(value.userId, 10),
|
||||
...base,
|
||||
}),
|
||||
});
|
||||
const detailData = await detailResponse.json();
|
||||
if (detailData.ret === -1) {
|
||||
alert(detailData.msg);
|
||||
return;
|
||||
}
|
||||
const response = await fetch("/op/moment/list_by_mid", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
mid: detailData.data.streamer_ext.mid,
|
||||
...base,
|
||||
}),
|
||||
});
|
||||
const temData = await response.json();
|
||||
if (temData.ret === -1) {
|
||||
alert(temData.msg);
|
||||
return;
|
||||
}
|
||||
//匹配表格格式
|
||||
const structedData = temData.data.list.map((item, index) => {
|
||||
return {
|
||||
key: index,
|
||||
info: {
|
||||
id: item.id,
|
||||
like: item.thumbs_up_num,
|
||||
ct: new Date(item.ct * 1000).toLocaleString(),
|
||||
},
|
||||
content: item.text,
|
||||
media: item.media_component,
|
||||
};
|
||||
});
|
||||
setShowData(structedData);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
//表单提交失败
|
||||
const onFinishFailed = (errorInfo) => {
|
||||
console.log("Failed:", errorInfo);
|
||||
};
|
||||
|
||||
//控制创建动态modal是否出现
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
|
||||
//保存上传的媒体的id
|
||||
const [imageId, setImageId] = useState([]);
|
||||
const [videoId, setVideoId] = useState([]);
|
||||
|
||||
//在modal中搜索用户
|
||||
const [userInfo, setUserInfo] = useState();
|
||||
const modalSearch = async (value) => {
|
||||
try {
|
||||
const base = baseRequest();
|
||||
const response = await fetch(`/op/account/list_by_user_id`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
user_id: parseInt(value.userId, 10),
|
||||
...base,
|
||||
}),
|
||||
});
|
||||
const data = await response.json();
|
||||
if (data.ret === -1) {
|
||||
alert(data.msg);
|
||||
return;
|
||||
}
|
||||
setUserInfo(data.data.account);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
//选中用户
|
||||
const [selectedUser, setSelectedUser] = useState();
|
||||
const handleSelected = () => {
|
||||
if (selectedUser) {
|
||||
setSelectedUser();
|
||||
return;
|
||||
}
|
||||
setSelectedUser(userInfo.mid);
|
||||
};
|
||||
//提交创建动态
|
||||
const [form] = Form.useForm();
|
||||
const handleSubmit = async (value) => {
|
||||
if (!selectedUser) {
|
||||
alert("还未选中用户");
|
||||
return;
|
||||
}
|
||||
if (imageId.length === 0 && videoId.length === 0) {
|
||||
alert("图片或视频不可为空");
|
||||
return;
|
||||
}
|
||||
if (imageId.length !== 0 && videoId.length !== 0) {
|
||||
alert("不可同时上传图片和视频");
|
||||
return;
|
||||
}
|
||||
if (imageId.length > 9) {
|
||||
alert("图片不可超过9张");
|
||||
return;
|
||||
}
|
||||
if (videoId.length > 1) {
|
||||
alert("视频不可超过1个");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const base = baseRequest();
|
||||
const response = await fetch(`/op/moment/create`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
mid: selectedUser,
|
||||
status: 2,
|
||||
text: value.content,
|
||||
media_component: { image_ids: imageId, video_ids: videoId },
|
||||
...base,
|
||||
}),
|
||||
});
|
||||
const data = await response.json();
|
||||
if (data.ret === -1) {
|
||||
alert(data.msg);
|
||||
return;
|
||||
}
|
||||
message.success("发布成功");
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
|
||||
form.resetFields();
|
||||
setUserInfo();
|
||||
setSelectedUser();
|
||||
setIsModalOpen(false);
|
||||
setImageId([]);
|
||||
setVideoId([]);
|
||||
};
|
||||
//关闭弹窗
|
||||
const handleCancelModal = () => {
|
||||
form.resetFields();
|
||||
setUserInfo();
|
||||
setSelectedUser();
|
||||
setIsModalOpen(false);
|
||||
setImageId([]);
|
||||
setVideoId([]);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="mt-4" style={{ marginLeft: 20, marginRight: 20 }}>
|
||||
<Form name="search" onFinish={search} onFinishFailed={onFinishFailed}>
|
||||
<Space style={{ marginBottom: 20 }}>
|
||||
<Form.Item label="主播ID" name="userId" style={{ margin: 0 }}>
|
||||
<Input type="number" />
|
||||
</Form.Item>
|
||||
<Button type="primary" htmlType="submit">
|
||||
搜索
|
||||
</Button>
|
||||
</Space>
|
||||
</Form>
|
||||
<Button
|
||||
className="mb-4"
|
||||
type="primary"
|
||||
onClick={() => setIsModalOpen(true)}
|
||||
>
|
||||
创建动态
|
||||
</Button>
|
||||
<Form name="remarks">
|
||||
<Table
|
||||
columns={columns}
|
||||
dataSource={showData}
|
||||
pagination={{ pageSize: 20 }}
|
||||
scroll={{ y: window.innerHeight - 300 }}
|
||||
/>
|
||||
</Form>
|
||||
{/* 重复判断isModalOpen是为了重新渲染ImageUploader和VideoUploader组件 */}
|
||||
{isModalOpen && (
|
||||
<Modal footer={null} open={isModalOpen} onCancel={handleCancelModal}>
|
||||
<p className="text-sm text-red-400 font-bold">
|
||||
*请选中主播后再发布,并确保文案不为空,图片数不超过9,视频数不超过1,图片视频不同时存在
|
||||
</p>
|
||||
<Form name="modal_search" onFinish={modalSearch}>
|
||||
<Space style={{ marginBottom: 20 }}>
|
||||
<Form.Item label="ID" name="userId" style={{ margin: 0 }}>
|
||||
<Input type="number" />
|
||||
</Form.Item>
|
||||
<Button type="primary" htmlType="submit">
|
||||
搜索
|
||||
</Button>
|
||||
</Space>
|
||||
</Form>
|
||||
{userInfo && (
|
||||
<div
|
||||
className={`flex flex-row items-center p-2 rounded-xl ${
|
||||
selectedUser ? "bg-green-300" : "bg-gray-300"
|
||||
}`}
|
||||
>
|
||||
<Image
|
||||
src={userInfo?.avatar?.images[0].urls[0]}
|
||||
width={80}
|
||||
height={80}
|
||||
/>
|
||||
<div className="flex flex-col justify-center mx-4">
|
||||
<p className="text-lg font-bold">ID:{userInfo.user_id}</p>
|
||||
<p className="text-lg font-bold">昵称:{userInfo.name}</p>
|
||||
</div>
|
||||
<Button
|
||||
type={selectedUser ? "default" : "primary"}
|
||||
onClick={handleSelected}
|
||||
>
|
||||
{selectedUser ? "取消选中" : "选中用户"}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
<Form
|
||||
className="mt-4 flex flex-col"
|
||||
form={form}
|
||||
onFinish={handleSubmit}
|
||||
>
|
||||
<Space>
|
||||
<Form.Item
|
||||
label="文案"
|
||||
name="content"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: "请填写文案",
|
||||
},
|
||||
]}
|
||||
style={{ margin: 0 }}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
</Space>
|
||||
<ImageUploader setIds={setImageId} />
|
||||
<VideoUploader setIds={setVideoId} />
|
||||
<Button className="ml-8" type="primary" htmlType="submit">
|
||||
确认
|
||||
</Button>
|
||||
</Form>
|
||||
</Modal>
|
||||
)}
|
||||
{/* 编辑动态内容的弹窗,重复判断isEditModalOpen是为了重新渲染ImageUploader和VideoUploader组件 */}
|
||||
{isEditModalOpen && (
|
||||
<Modal footer={null} open={isEditModalOpen} onCancel={handleCancel}>
|
||||
<p className="text-sm text-red-400 font-bold">
|
||||
*请选中主播后再发布,并确保文案不为空,图片数不超过9,视频数不超过1,图片视频不同时存在
|
||||
</p>
|
||||
<Form className="mt-4 flex flex-col" onFinish={handleChange}>
|
||||
<Space>
|
||||
<Form.Item
|
||||
label="文案"
|
||||
name="content"
|
||||
initialValue={defaultValues.content}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: "请填写文案",
|
||||
},
|
||||
]}
|
||||
style={{ margin: 0 }}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
</Space>
|
||||
{defaultMedia.image_ids.length !== 0 && (
|
||||
<div className="flex flex-row flex-wrap gap-2 mt-4">
|
||||
{defaultMedia.images.map((item) => (
|
||||
<div key={item.urls[0]} className="relative">
|
||||
<Image src={item.urls[0]} width={100} />
|
||||
<Button
|
||||
className="absolute top-0 left-0 w-full"
|
||||
danger
|
||||
type="primary"
|
||||
onClick={() => handleDeleteMedia("image", item.id)}
|
||||
>
|
||||
删除
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{defaultMedia.video_ids.length !== 0 && (
|
||||
<div className="flex flex-row mt-4">
|
||||
<div className="relative">
|
||||
<video
|
||||
src={defaultMedia.videos[0].urls[0]}
|
||||
width={150}
|
||||
controls
|
||||
className="mr-auto"
|
||||
/>
|
||||
<Button
|
||||
className="absolute top-0 left-0 w-full"
|
||||
danger
|
||||
type="primary"
|
||||
onClick={() => handleDeleteMedia("video")}
|
||||
>
|
||||
删除
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<ImageUploader setIds={setEditImageId} />
|
||||
<VideoUploader setIds={setEditVideoId} />
|
||||
<Button className="ml-8" type="primary" htmlType="submit">
|
||||
确认
|
||||
</Button>
|
||||
</Form>
|
||||
</Modal>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default function CreateAndEditPost() {
|
||||
return <CreateAndEditPostContent />;
|
||||
}
|
|
@ -1,367 +0,0 @@
|
|||
import React, { useState, useEffect } from "react";
|
||||
import { Form, Input, Table, Image, Space, Button, Modal, message } from "antd";
|
||||
import baseRequest from "../../utils/baseRequest";
|
||||
import ImageUploader from "../../components/ImageUploader";
|
||||
import VideoUploader from "../../components/VideoUploader";
|
||||
|
||||
const CreatePostContent = (props) => {
|
||||
const { TextArea } = Input;
|
||||
//表头
|
||||
const columns = [
|
||||
{
|
||||
title: "动态信息",
|
||||
dataIndex: "info",
|
||||
key: "info",
|
||||
render: (data) => (
|
||||
<div>
|
||||
<p>
|
||||
动态id:<span className="text-red-400">{data.id}</span>
|
||||
</p>
|
||||
<p>
|
||||
创建时间:<span className="text-red-400">{data.ct}</span>
|
||||
</p>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "动态文案",
|
||||
dataIndex: "content",
|
||||
key: "content",
|
||||
},
|
||||
{
|
||||
title: "媒体",
|
||||
dataIndex: "media",
|
||||
key: "media",
|
||||
render: (data) => (
|
||||
<div>
|
||||
{data?.images?.map((item, index) => (
|
||||
<Image
|
||||
key={index}
|
||||
src={item.urls[0]}
|
||||
width={150}
|
||||
style={{ marginBottom: 10 }}
|
||||
/>
|
||||
))}
|
||||
{data?.videos?.map((item, index) => (
|
||||
<video key={index} src={item.urls[0]} width={150} controls />
|
||||
))}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
];
|
||||
//获取数据
|
||||
const [data, setData] = useState([]);
|
||||
// const [offset, setOffset] = useState(0);
|
||||
// const [more, setMore] = useState(1);
|
||||
// const getData = async () => {
|
||||
// if (!more) return;
|
||||
// try {
|
||||
// const base = baseRequest();
|
||||
// const response = await fetch("/op/image_audit_task/list", {
|
||||
// method: "POST",
|
||||
// headers: {
|
||||
// "Content-Type": "application/json",
|
||||
// },
|
||||
// body: JSON.stringify({
|
||||
// offset: offset,
|
||||
// limit: 20,
|
||||
// ...base,
|
||||
// }),
|
||||
// });
|
||||
// const temData = await response.json();
|
||||
// if (temData.ret === -1) {
|
||||
// alert(temData.msg);
|
||||
// return;
|
||||
// }
|
||||
// //匹配表格格式
|
||||
// const structedData = temData.data.list.map((item, index) => {
|
||||
// return {
|
||||
// key: index,
|
||||
// id: item.id,
|
||||
// newMedia: item?.audited_media?.images,
|
||||
// oldMedia: item?.old_media?.images,
|
||||
// info: item.image_audits,
|
||||
// submitTime: new Date(item.ct * 1000).toLocaleString(),
|
||||
// remarks: item.remarks,
|
||||
// others: {
|
||||
// id: item.id,
|
||||
// audited_media: item.audited_media,
|
||||
// associative_database: item.associative_database,
|
||||
// associative_table_name: item.associative_table_name,
|
||||
// associative_table_id: item.associative_table_id,
|
||||
// associative_table_column: item.associative_table_column,
|
||||
// },
|
||||
// };
|
||||
// });
|
||||
// setData([...data, ...structedData]);
|
||||
// setOffset(temData.data.offset);
|
||||
// setMore(temData.data.more);
|
||||
// } catch (error) {
|
||||
// console.error(error);
|
||||
// }
|
||||
// };
|
||||
// useEffect(() => {
|
||||
// getData();
|
||||
// }, []);
|
||||
|
||||
//展示的数据
|
||||
const [showData, setShowData] = useState([]);
|
||||
|
||||
//搜索
|
||||
const search = async (value) => {
|
||||
return;
|
||||
// try {
|
||||
// const base = baseRequest();
|
||||
// const response = await fetch("/op/moment/list_by_mid", {
|
||||
// method: "POST",
|
||||
// headers: {
|
||||
// "Content-Type": "application/json",
|
||||
// },
|
||||
// body: JSON.stringify({
|
||||
// mid: 1,
|
||||
// ...base,
|
||||
// }),
|
||||
// });
|
||||
// const temData = await response.json();
|
||||
// if (temData.ret === -1) {
|
||||
// alert(temData.msg);
|
||||
// return;
|
||||
// }
|
||||
// //匹配表格格式
|
||||
// const structedData = temData.data.list.map((item, index) => {
|
||||
// return {
|
||||
// key: index,
|
||||
// id: item.id,
|
||||
// newMedia: item?.audited_media?.images,
|
||||
// oldMedia: item?.old_media?.images,
|
||||
// info: item.image_audits,
|
||||
// submitTime: new Date(item.ct * 1000).toLocaleString(),
|
||||
// remarks: item.remarks,
|
||||
// others: {
|
||||
// id: item.id,
|
||||
// audited_media: item.audited_media,
|
||||
// associative_database: item.associative_database,
|
||||
// associative_table_name: item.associative_table_name,
|
||||
// associative_table_id: item.associative_table_id,
|
||||
// associative_table_column: item.associative_table_column,
|
||||
// },
|
||||
// };
|
||||
// });
|
||||
// setShowData([...showData, ...structedData]);
|
||||
// } catch (error) {
|
||||
// console.error(error);
|
||||
// }
|
||||
};
|
||||
//表单提交失败
|
||||
const onFinishFailed = (errorInfo) => {
|
||||
console.log("Failed:", errorInfo);
|
||||
};
|
||||
|
||||
//控制充值modal是否出现
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
|
||||
//保存上传的媒体的id
|
||||
const [imageId, setImageId] = useState([]);
|
||||
const [videoId, setVideoId] = useState([]);
|
||||
|
||||
//在modal中搜索用户
|
||||
const [userInfo, setUserInfo] = useState();
|
||||
const modalSearch = async (value) => {
|
||||
try {
|
||||
const base = baseRequest();
|
||||
const response = await fetch(`/op/account/list_by_user_id`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
user_id: parseInt(value.userId, 10),
|
||||
...base,
|
||||
}),
|
||||
});
|
||||
const data = await response.json();
|
||||
if (data.ret === -1) {
|
||||
alert(data.msg);
|
||||
return;
|
||||
}
|
||||
setUserInfo(data.data.account);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
//选中用户
|
||||
const [selectedUser, setSelectedUser] = useState();
|
||||
const handleSelected = () => {
|
||||
if (selectedUser) {
|
||||
setSelectedUser();
|
||||
return;
|
||||
}
|
||||
setSelectedUser(userInfo.mid);
|
||||
};
|
||||
//提交修改
|
||||
const [form] = Form.useForm();
|
||||
const handleSubmit = async (value) => {
|
||||
if (!selectedUser) {
|
||||
alert("还未选中用户");
|
||||
return;
|
||||
}
|
||||
if (imageId.length === 0 && videoId.length === 0) {
|
||||
alert("图片或视频不可为空");
|
||||
return;
|
||||
}
|
||||
if (imageId.length !== 0 && videoId.length !== 0) {
|
||||
alert("不可同时上传图片和视频");
|
||||
return;
|
||||
}
|
||||
if (imageId.length > 9) {
|
||||
alert("图片不可超过9张");
|
||||
return;
|
||||
}
|
||||
if (videoId.length > 1) {
|
||||
alert("视频不可超过1个");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const base = baseRequest();
|
||||
const response = await fetch(`/op/moment/create`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
mid: selectedUser,
|
||||
status: 2,
|
||||
text: value.content,
|
||||
media_component: { image_ids: imageId, video_ids: videoId },
|
||||
...base,
|
||||
}),
|
||||
});
|
||||
const data = await response.json();
|
||||
if (data.ret === -1) {
|
||||
alert(data.msg);
|
||||
return;
|
||||
}
|
||||
message.success("发布成功");
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
|
||||
form.resetFields();
|
||||
setUserInfo();
|
||||
setSelectedUser();
|
||||
setIsModalOpen(false);
|
||||
setImageId([]);
|
||||
setVideoId([]);
|
||||
};
|
||||
//关闭弹窗
|
||||
const handleCancelModal = () => {
|
||||
form.resetFields();
|
||||
setUserInfo();
|
||||
setSelectedUser();
|
||||
setIsModalOpen(false);
|
||||
setImageId([]);
|
||||
setVideoId([]);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="mt-4" style={{ marginLeft: 20, marginRight: 20 }}>
|
||||
<Form name="search" onFinish={search} onFinishFailed={onFinishFailed}>
|
||||
<Space style={{ marginBottom: 20 }}>
|
||||
<Form.Item label="ID" name="userId" style={{ margin: 0 }}>
|
||||
<Input type="number" />
|
||||
</Form.Item>
|
||||
<Button type="primary" htmlType="submit">
|
||||
搜索
|
||||
</Button>
|
||||
</Space>
|
||||
</Form>
|
||||
<Button
|
||||
className="mb-4"
|
||||
type="primary"
|
||||
onClick={() => setIsModalOpen(true)}
|
||||
>
|
||||
创建动态
|
||||
</Button>
|
||||
<Form name="remarks">
|
||||
<Table
|
||||
columns={columns}
|
||||
dataSource={showData}
|
||||
pagination={{ pageSize: 20 }}
|
||||
scroll={{ y: window.innerHeight - 300 }}
|
||||
/>
|
||||
</Form>
|
||||
{/* 重复判断isModalOpen是为了重新渲染ImageUploader和VideoUploader组件 */}
|
||||
{isModalOpen && (
|
||||
<Modal footer={null} open={isModalOpen} onCancel={handleCancelModal}>
|
||||
<p className="text-sm text-red-400 font-bold">
|
||||
*请选中主播后再发布,并确保文案不为空,图片数不超过9,视频数不超过1,图片视频不同时存在
|
||||
</p>
|
||||
<Form name="modal_search" onFinish={modalSearch}>
|
||||
<Space style={{ marginBottom: 20 }}>
|
||||
<Form.Item label="ID" name="userId" style={{ margin: 0 }}>
|
||||
<Input type="number" />
|
||||
</Form.Item>
|
||||
<Button type="primary" htmlType="submit">
|
||||
搜索
|
||||
</Button>
|
||||
</Space>
|
||||
</Form>
|
||||
{userInfo && (
|
||||
<div
|
||||
className={`flex flex-row items-center p-2 rounded-xl ${
|
||||
selectedUser ? "bg-green-300" : "bg-gray-300"
|
||||
}`}
|
||||
>
|
||||
<Image
|
||||
src={userInfo?.avatar?.images[0].urls[0]}
|
||||
width={80}
|
||||
height={80}
|
||||
/>
|
||||
<div className="flex flex-col justify-center mx-4">
|
||||
<p className="text-lg font-bold">ID:{userInfo.user_id}</p>
|
||||
<p className="text-lg font-bold">昵称:{userInfo.name}</p>
|
||||
</div>
|
||||
<Button
|
||||
type={selectedUser ? "default" : "primary"}
|
||||
onClick={handleSelected}
|
||||
>
|
||||
{selectedUser ? "取消选中" : "选中用户"}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
<Form
|
||||
className="mt-4 flex flex-col"
|
||||
form={form}
|
||||
onFinish={handleSubmit}
|
||||
>
|
||||
<Space>
|
||||
<Form.Item
|
||||
label="文案"
|
||||
name="content"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: "请填写文案",
|
||||
},
|
||||
]}
|
||||
style={{ margin: 0 }}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
</Space>
|
||||
<ImageUploader setIds={setImageId} />
|
||||
<VideoUploader setIds={setVideoId} />
|
||||
<Button className="ml-8" type="primary" htmlType="submit">
|
||||
确认
|
||||
</Button>
|
||||
</Form>
|
||||
</Modal>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default function CreatePost() {
|
||||
return <CreatePostContent />;
|
||||
}
|
|
@ -12,6 +12,7 @@ import {
|
|||
PoweroffOutlined,
|
||||
MoneyCollectOutlined,
|
||||
FileSearchOutlined,
|
||||
FormOutlined,
|
||||
} from "@ant-design/icons";
|
||||
import { Menu, Layout } from "antd";
|
||||
import { Outlet, useNavigate, useLocation } from "react-router-dom";
|
||||
|
@ -56,8 +57,8 @@ export default function Op() {
|
|||
getItem("网红资料", "streamerInformation"),
|
||||
// getItem("网红平台", "streamerPlatform"),
|
||||
]),
|
||||
getItem("动态管理", "postManagement", <ShopOutlined />, [
|
||||
getItem("发布", "createPost"),
|
||||
getItem("动态管理", "postManagement", <FormOutlined />, [
|
||||
getItem("发布与编辑", "createAndEditPost"),
|
||||
]),
|
||||
// getItem("用户管理", "userManagement", <UsergroupAddOutlined />),
|
||||
// getItem("订单管理", "orderManagement", <FileSearchOutlined />, [
|
||||
|
|
|
@ -209,8 +209,6 @@ const StreamerInformationContent = () => {
|
|||
{ label: "香港特别行政区", value: "香港特别行政区" },
|
||||
{ label: "澳门特别行政区", value: "澳门特别行政区" },
|
||||
];
|
||||
//modal中平台checkbox名称
|
||||
const platformList = ["抖音", "微博", "哔哩哔哩", "快手", "秘live"];
|
||||
//表头可见性表单的checkbox选项
|
||||
const showColumnsOptions = [
|
||||
{
|
||||
|
|
|
@ -15,7 +15,7 @@ import StreamerVerification from "../pages/StreamerVerification";
|
|||
import ImageMachineReview from "../pages/ImageMachineReview";
|
||||
import TextMachineReview from "../pages/TextMachineReview";
|
||||
import ManualRechargeAndWithdrawal from "../pages/ManualRechargeAndWithdrawal";
|
||||
import CreatePost from "../pages/CreatePost";
|
||||
import CreateAndEditPost from "../pages/CreateAndEditPost";
|
||||
|
||||
const routes = [
|
||||
{
|
||||
|
@ -87,8 +87,8 @@ const routes = [
|
|||
element: <ManualRechargeAndWithdrawal />,
|
||||
},
|
||||
{
|
||||
path: "createPost/*",
|
||||
element: <CreatePost />,
|
||||
path: "createAndEditPost/*",
|
||||
element: <CreateAndEditPost />,
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
Loading…
Reference in New Issue