Oak-Team
/
oak-general-business
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 38 Wiki Activity

资讯外部链接上传图片

This commit is contained in:
wangwenchen 2024-02-29 14:12:51 +08:00
parent 14c03fe143
commit 39fe9746e0
4 changed files with 133 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
es/components/extraFile/forUrl/index.js
View File

@ -21,6 +21,7 @@ export default OakComponent({
sort: 1, sort: 1,
isBridge: 1, isBridge: 1,
}, },
features:['extraFile'],
filters: [ filters: [
{ {
filter() { filter() {
@ -189,6 +190,7 @@ export default OakComponent({
extension, extension,
filename: 'unknown', filename: 'unknown',
isBridge: this.isWechatUrlFn(file), isBridge: this.isWechatUrlFn(file),
uploadState: 'success'
}); });
break; break;
case 'original': case 'original':
@ -197,6 +199,7 @@ export default OakComponent({
extension, extension,
filename: 'unknown', filename: 'unknown',
isBridge: this.isWechatUrlFn(file), isBridge: this.isWechatUrlFn(file),
uploadState: 'success'
}); });
break; break;
} }

4
es/components/extraFile/forUrl/web.js
View File

@ -47,8 +47,8 @@ export default function render(props) {
<Modal width={800} title={t('chooseImage')} open={isModalOpen1} onOk={() => onModal1Confirm(selectedId)} onCancel={closeModal1}> <Modal width={800} title={t('chooseImage')} open={isModalOpen1} onOk={() => onModal1Confirm(selectedId)} onCancel={closeModal1}>
{(renderImgs && renderImgs.length) ? (<> {(renderImgs && renderImgs.length) ? (<>
<Row gutter={[4, 4]}> <Row gutter={[4, 4]}>
{renderImgs.map((img) => <Col span={4}> {renderImgs.map((img) => <Col span={4} key={img.id} >
<ImgBox width={"100%"} bordered={true} mode="select" src={img.renderUrl} key={img.id} selected={selectedId === img.id} onClick={() => { <ImgBox width={"100%"} bordered={true} mode="select" src={img.renderUrl} selected={selectedId === img.id} onClick={() => {
if (selectedId === img.id) { if (selectedId === img.id) {
setSelectedId(-1); setSelectedId(-1);
} }

4
src/components/extraFile/forUrl/index.ts
View File

@ -28,6 +28,7 @@ export default OakComponent({
sort: 1, sort: 1,
isBridge: 1, isBridge: 1,
}, },
features: ['extraFile'],
filters: [ filters: [
{ {
filter() { filter() {
@ -199,6 +200,8 @@ export default OakComponent({
extension, extension,
filename: 'unknown', filename: 'unknown',
isBridge: this.isWechatUrlFn(file), isBridge: this.isWechatUrlFn(file),
uploadState: 'success'
}); });
break; break;
case 'original': case 'original':
@ -207,6 +210,7 @@ export default OakComponent({
extension, extension,
filename: 'unknown', filename: 'unknown',
isBridge: this.isWechatUrlFn(file), isBridge: this.isWechatUrlFn(file),
uploadState: 'success'
}); });
break; break;
} }

249
src/components/extraFile/forUrl/web.tsx
View File

@ -10,132 +10,131 @@ import ImgBox from "oak-frontend-base/es/components/imgBox";
type MethodsType = 'original' | 'url' | 'uploadLocalImg'; type MethodsType = 'original' | 'url' | 'uploadLocalImg';
export default function render( export default function render(
props: WebComponentProps< props: WebComponentProps<
EntityDict, EntityDict,
"extraFile", "extraFile",
true, true,
{ {
src: string; src: string;
bridgeUrl: string; bridgeUrl: string;
isModalOpen: boolean; isModalOpen: boolean;
isModalOpen1: boolean; isModalOpen1: boolean;
renderImgs: { renderUrl: string, originUrl: string, id: number }[]; renderImgs: { renderUrl: string, originUrl: string, id: number }[];
selectedId: number; selectedId: number;
}, },
{ {
onModalConfirm: (value: string) => void; onModalConfirm: (value: string) => void;
chooseMethod: (method: MethodsType) => void; chooseMethod: (method: MethodsType) => void;
closeModal1: () => void; closeModal1: () => void;
closeModal: () => void; closeModal: () => void;
onModal1Confirm: (value: number) => void; onModal1Confirm: (value: number) => void;
setSelectedId: (id: number) => void; setSelectedId: (id: number) => void;
} }
> >
) { ) {
const { const {
isModalOpen, isModalOpen,
isModalOpen1, isModalOpen1,
renderImgs, renderImgs,
src, src,
bridgeUrl, bridgeUrl,
selectedId, selectedId,
} = props.data; } = props.data;
const { t, onModalConfirm, chooseMethod, closeModal1, closeModal, onModal1Confirm, setSelectedId } = props.methods; const { t, onModalConfirm, chooseMethod, closeModal1, closeModal, onModal1Confirm, setSelectedId } = props.methods;
const methods: MethodsType[] = ['original', 'url', 'uploadLocalImg']; const methods: MethodsType[] = ['original', 'url', 'uploadLocalImg'];
const [form] = Form.useForm(); const [form] = Form.useForm();
const handleOk = () => { const handleOk = () => {
onModalConfirm(form.getFieldValue('url')); onModalConfirm(form.getFieldValue('url'));
form.setFieldValue('url', ''); form.setFieldValue('url', '');
closeModal(); closeModal();
}; };
return ( return (
<div className={Style.imgBox}> <div className={Style.imgBox}>
<Space direction="vertical" size={4}> <Space direction="vertical" size={4}>
<PlusOutlined /> <PlusOutlined />
<div>选择封面</div> <div>选择封面</div>
</Space> </Space>
<img id="previewImg" src={src} alt="previewImg" className={Style.previewImg} style={{ display: src ? 'inline-block' : 'none' }} /> <img id="previewImg" src={src} alt="previewImg" className={Style.previewImg} style={{ display: src ? 'inline-block' : 'none' }} />
<div className={Style.methodList}> <div className={Style.methodList}>
{methods && methods.map((ele) => ( {methods && methods.map((ele) => (
<div <div
className={Style.methodListItem} className={Style.methodListItem}
onClick={() => { onClick={() => {
chooseMethod(ele); chooseMethod(ele);
}} }}
> >
{t(ele)} {t(ele)}
</div> </div>
))} ))}
</div> </div>
<Modal <Modal
title={t('fillInImageLink')} title={t('fillInImageLink')}
open={isModalOpen} open={isModalOpen}
onOk={handleOk} onOk={handleOk}
onCancel={closeModal} onCancel={closeModal}
> >
<Form <Form
form={form} form={form}
className={Style.formMT} className={Style.formMT}
> >
<Form.Item <Form.Item
name="url" name="url"
rules={[ rules={[
{ {
required: true, required: true,
message: '外部链接不能为空', message: '外部链接不能为空',
}, },
{ {
pattern: /(http|https):\/\/(\w+:{0,1}\w*)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%!\-\/]))?/, pattern: /(http|https):\/\/(\w+:{0,1}\w*)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%!\-\/]))?/,
message: '请输入正确的外链', message: '请输入正确的外链',
} }
]} ]}
> >
<Input <Input
onChange={({ target: { value } }) => { onChange={({ target: { value } }) => {
form.setFieldValue('url', value); form.setFieldValue('url', value);
}} }}
placeholder='如：https://www.xxx.com' placeholder='如：https://www.xxx.com'
/> />
</Form.Item> </Form.Item>
</Form> </Form>
</Modal> </Modal>
<Modal <Modal
width={800} width={800}
title={t('chooseImage')} title={t('chooseImage')}
open={isModalOpen1} open={isModalOpen1}
onOk={() => onModal1Confirm(selectedId)} onOk={() => onModal1Confirm(selectedId)}
onCancel={closeModal1} onCancel={closeModal1}
> >
{(renderImgs && renderImgs.length) ? ( {(renderImgs && renderImgs.length > 0) ? (
<> <>
<Row gutter={[4, 4]}> <Row gutter={[4, 4]}>
{renderImgs.map((img: { renderUrl: string, originUrl: string, id: number }) => {renderImgs.map((img: { renderUrl: string, originUrl: string, id: number }, index) =>
<Col span={4}> <Col key={img.id} span={4}>
<ImgBox <ImgBox
width={"100%"} width={"100%"}
bordered={true} bordered={true}
mode="select" mode="select"
src={img.renderUrl} src={img.renderUrl}
key={img.id} selected={selectedId === img.id}
selected={selectedId === img.id} onClick={() => {
onClick={() => { if (selectedId === img.id) {
if (selectedId === img.id) { setSelectedId(-1);
setSelectedId(-1); } else {
} else { setSelectedId(img.id);
setSelectedId(img.id); }
} }}
}} />
/> </Col>
</Col> )}
)} </Row>
</Row> </>
</> ) : (
) : ( <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} /> )}
)} </Modal>
</Modal> </div>
</div> );
);
} }