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,
isBridge: 1,
},
features:['extraFile'],
filters: [
{
filter() {
@ -189,6 +190,7 @@ export default OakComponent({
extension,
filename: 'unknown',
isBridge: this.isWechatUrlFn(file),
uploadState: 'success'
});
break;
case 'original':
@ -197,6 +199,7 @@ export default OakComponent({
extension,
filename: 'unknown',
isBridge: this.isWechatUrlFn(file),
uploadState: 'success'
});
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}>
{(renderImgs && renderImgs.length) ? (<>
<Row gutter={[4, 4]}>
{renderImgs.map((img) => <Col span={4}>
<ImgBox width={"100%"} bordered={true} mode="select" src={img.renderUrl} key={img.id} selected={selectedId === img.id} onClick={() => {
{renderImgs.map((img) => <Col span={4} key={img.id} >
<ImgBox width={"100%"} bordered={true} mode="select" src={img.renderUrl} selected={selectedId === img.id} onClick={() => {
if (selectedId === img.id) {
setSelectedId(-1);
}

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

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