175 lines
10 KiB
JavaScript
175 lines
10 KiB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
import { useEffect, useState } from 'react';
|
|
import { Tooltip, Button, Space, Modal } from 'antd';
|
|
import { PlusOutlined, SwapOutlined, DeleteOutlined, DownloadOutlined } from '@ant-design/icons';
|
|
import Style from './web.module.less';
|
|
import "@wangeditor/editor/dist/css/style.css"; // 引入 css
|
|
import Preview from './preview';
|
|
import WechatMaterialLibrary from '../wechatMaterialLibrary';
|
|
import Text from './text';
|
|
const toolbarConfig = {
|
|
excludeKeys: [
|
|
"blockquote",
|
|
"fullScreen",
|
|
"headerSelect",
|
|
"|",
|
|
"bold",
|
|
"group-more-style",
|
|
"bgColor",
|
|
"bulletedList",
|
|
"numberedList",
|
|
"todo",
|
|
"group-image",
|
|
"group-video",
|
|
"insertTable",
|
|
"codeBlock",
|
|
],
|
|
}; // TS 语法
|
|
const types = [
|
|
{
|
|
key: 'text',
|
|
value: '文本',
|
|
},
|
|
{
|
|
key: 'image',
|
|
value: '图片',
|
|
},
|
|
{
|
|
key: 'video',
|
|
value: '视频',
|
|
},
|
|
{
|
|
key: 'voice',
|
|
value: '音频',
|
|
},
|
|
];
|
|
export default function Render(props) {
|
|
const { id, content, type, applicationId } = props.data;
|
|
const { t, save, changeType, updateItem, setMessage, getMaterialImgAndVoice, getMaterialVideo } = props.methods;
|
|
const [open, setOpen] = useState(false);
|
|
const [previewOpen, setPreviewOpen] = useState(false);
|
|
const [replyContent, setReplyContent] = useState({ text: '', image: '', video: '', voice: '' });
|
|
const [mediaUrl, setMediaUrl] = useState('');
|
|
const [onlyOne, setOnlyOne] = useState(false);
|
|
const getContent = async (value) => {
|
|
let updateData = {};
|
|
let contentKey = '';
|
|
switch (type) {
|
|
case 'text':
|
|
updateData = { content: { text: value } };
|
|
contentKey = 'text';
|
|
setReplyContent({ ...replyContent, [contentKey]: value });
|
|
break;
|
|
case 'image':
|
|
case 'voice':
|
|
updateData = { content: { mediaId: value } };
|
|
contentKey = type;
|
|
setReplyContent({ ...replyContent, [contentKey]: await getMaterialImgAndVoice(type, value) });
|
|
break;
|
|
case 'video':
|
|
const video = await getMaterialVideo(value);
|
|
updateData = { content: { title: video.title, description: video.description, mediaId: value } };
|
|
contentKey = 'video';
|
|
setReplyContent({ ...replyContent, [contentKey]: video.url });
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
updateItem(updateData, id);
|
|
};
|
|
const getMedia = (media) => {
|
|
setMediaUrl(media.media_id);
|
|
};
|
|
useEffect(() => {
|
|
const fetchData = async (id, type) => {
|
|
if (type === 'video') {
|
|
const video = await getMaterialVideo(id);
|
|
return video.url;
|
|
}
|
|
if (type === 'image' || type === 'voice') {
|
|
const url = await getMaterialImgAndVoice(type, id);
|
|
return url;
|
|
}
|
|
};
|
|
if (onlyOne) {
|
|
return;
|
|
}
|
|
else {
|
|
let contentKey = '';
|
|
if (type && type === 'text' && content && content.text) {
|
|
contentKey = 'text';
|
|
setReplyContent({ ...replyContent, [contentKey]: content.text });
|
|
setOnlyOne(true);
|
|
}
|
|
;
|
|
if (type && type !== 'text' && type !== 'video' && content && content.mediaId) {
|
|
switch (type) {
|
|
case 'image':
|
|
case 'voice':
|
|
contentKey = type;
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
setReplyContent({ ...replyContent, [contentKey]: fetchData(content.mediaId, type) });
|
|
setOnlyOne(true);
|
|
}
|
|
;
|
|
if (type && type === 'video' && content && content.mediaId) {
|
|
contentKey = type;
|
|
setReplyContent({ ...replyContent, [contentKey]: fetchData(content.mediaId, type) });
|
|
}
|
|
}
|
|
}, [type, content]);
|
|
return (_jsxs("div", { className: Style.container, children: [_jsx("div", { className: Style.typeBar, children: types.map((ele) => (_jsx("div", { className: Style.item, style: type === ele.key ? { color: '#1677FF' } : {}, onClick: () => {
|
|
changeType(ele.key);
|
|
}, children: ele.value }))) }), type !== 'text' ? (_jsxs("div", { className: Style.media, children: [type === 'image' && replyContent.image ? (_jsxs("div", { className: Style.imageMedia, children: [_jsx("div", { className: Style.imgCover, children: _jsx("img", { src: replyContent.image }) }), _jsxs("div", { className: Style.buttonGroup, children: [_jsx(Tooltip, { title: '编辑', placement: 'right', children: _jsx("div", { className: Style.buttonItem, onClick: () => {
|
|
setOpen(true);
|
|
}, children: _jsx(SwapOutlined, {}) }) }), _jsx(Tooltip, { title: '删除', placement: 'right', children: _jsx("div", { className: Style.buttonItem, onClick: () => {
|
|
updateItem({
|
|
url: '',
|
|
}, id);
|
|
setReplyContent({ ...replyContent, image: '' });
|
|
setMediaUrl('');
|
|
}, children: _jsx(DeleteOutlined, {}) }) })] })] })) : type === 'video' && replyContent.video ? (_jsxs("div", { className: Style.videoMedia, children: [_jsxs("a", { href: replyContent.video, download: true, style: { color: '#1677FF', cursor: 'pointer' }, children: [_jsx(DownloadOutlined, {}), "\u4E0B\u8F7D\u89C6\u9891\u7D20\u6750"] }), _jsxs("div", { className: Style.buttonGroup, children: [_jsx(Tooltip, { title: '编辑', placement: 'right', children: _jsx("div", { className: Style.buttonItem, onClick: () => {
|
|
setOpen(true);
|
|
}, children: _jsx(SwapOutlined, {}) }) }), _jsx(Tooltip, { title: '删除', placement: 'right', children: _jsx("div", { className: Style.buttonItem, onClick: () => {
|
|
updateItem({
|
|
url: '',
|
|
}, id);
|
|
setReplyContent({ ...replyContent, video: '' });
|
|
setMediaUrl('');
|
|
}, children: _jsx(DeleteOutlined, {}) }) })] })] })) : type === 'voice' && replyContent.voice ? (_jsxs("div", { className: Style.voiceMedia, children: [_jsxs("a", { href: replyContent.voice, download: true, style: { color: '#1677FF', cursor: 'pointer' }, children: [_jsx(DownloadOutlined, {}), "\u4E0B\u8F7D\u97F3\u9891\u7D20\u6750"] }), _jsxs("div", { className: Style.buttonGroup, children: [_jsx(Tooltip, { title: '编辑', placement: 'right', children: _jsx("div", { className: Style.buttonItem, onClick: () => {
|
|
setOpen(true);
|
|
}, children: _jsx(SwapOutlined, {}) }) }), _jsx(Tooltip, { title: '删除', placement: 'right', children: _jsx("div", { className: Style.buttonItem, onClick: () => {
|
|
updateItem({
|
|
url: '',
|
|
}, id);
|
|
setReplyContent({ ...replyContent, voice: '' });
|
|
setMediaUrl('');
|
|
}, children: _jsx(DeleteOutlined, {}) }) })] })] })) : (_jsx("div", { className: Style.addMedia, onClick: () => {
|
|
setOpen(true);
|
|
}, children: _jsxs("div", { className: Style.replyContent, children: [_jsx("div", { style: { display: 'flex', justifyContent: 'center' }, children: _jsx(PlusOutlined, { style: { fontSize: 36 } }) }), _jsx("div", { children: "\u4ECE\u7D20\u6750\u5E93\u4E2D\u9009\u62E9" })] }) })), _jsx(Modal, { open: open, footer: _jsxs(Space, { children: [_jsx(Button, { type: 'primary', onClick: () => {
|
|
getContent(mediaUrl);
|
|
setOpen(false);
|
|
}, disabled: mediaUrl ? false : true, children: "\u786E\u5B9A" }), _jsx(Button, { type: 'default', onClick: () => {
|
|
setOpen(false);
|
|
}, children: "\u53D6\u6D88" })] }), onCancel: () => {
|
|
setOpen(false);
|
|
}, destroyOnClose: true, width: 960, children: _jsx(WechatMaterialLibrary, { oakAutoUnmount: true, type: type, applicationId: applicationId, getMenuContent: getMedia }) })] })) : (_jsx("div", { className: Style.editor, children: _jsx(Text, { oakAutoUnmount: true, getContent: getContent, text: replyContent.text }) })), _jsx(Modal, { title: '\u5173\u6CE8\u516C\u4F17\u53F7\u81EA\u52A8\u56DE\u590D\u9884\u89C8', open: previewOpen, onCancel: () => setPreviewOpen(false), footer: null, width: 424, children: _jsx(Preview, { oakAutoUnmount: true, type: type, content: replyContent }) }), _jsxs(Space, { style: { display: 'flex', justifyContent: 'center', margin: 20 }, children: [_jsx(Button, { onClick: () => {
|
|
setPreviewOpen(true);
|
|
}, children: "\u9884\u89C8" }), _jsx(Button, { type: "primary", onClick: () => {
|
|
let updateData = {};
|
|
if ((replyContent.text && type === 'text') || (replyContent.image && type === 'image') || (replyContent.video && type === 'video') || (replyContent.voice && type === 'voice')) {
|
|
updateItem(updateData, id);
|
|
save();
|
|
}
|
|
else {
|
|
setMessage({
|
|
type: 'warning',
|
|
content: '回复内容不能为空'
|
|
});
|
|
}
|
|
}, children: "\u4FDD\u5B58" })] })] }));
|
|
}
|