世界上最伟大的投资就是投资自己的教育
ant design pro 如何去保存颜色
随风发布于82 次阅读
上图
就是实现这样的效果
import mongoose, { Schema, Document } from 'mongoose';
interface IDiscountCard extends Document {
title: string;
subtitle: string;
image: string;
shopUrl: string;
bgColor: string;
}
const DiscountCardSchema: Schema = new Schema({
title: { type: String, required: true },
subtitle: { type: String, required: true },
image: { type: String, required: true },
shopUrl: { type: String, required: true },
bgColor: { type: String, required: true },
}, { timestamps: true });
const DiscountCard = mongoose.model<IDiscountCard>('DiscountCard', DiscountCardSchema);
export default DiscountCard;
<ProFormColorPicker
name="bgColor"
initialValue={bgColor}
label={intl.formatMessage({ id: 'background.color' })}
rules={[
{ required: true, message: intl.formatMessage({ id: 'background.color.required' }) },
]}
fieldProps={{
onChange: (color: any) => {
console.log('Color changed:', color.toHexString());
setBgColor(color.toHexString());
},
}}
/>
import { useIntl } from '@umijs/max';
import { ModalForm } from '@ant-design/pro-components';
import BasicForm from './BasicForm';
import { useState } from 'react';
import extractPathFromUrl from '@/utils/extractPathFromUrl';
import { message } from 'antd';
interface Props {
open: boolean;
onOpenChange: (visible: boolean) => void;
onFinish: (formData: any) => Promise<void>;
}
const Create: React.FC<Props> = (props) => {
const intl = useIntl();
const { open, onOpenChange, onFinish } = props;
const [imageUrl, setImageUrl] = useState<string | undefined>('');
const [bgColor, setBgColor] = useState<string>('#ffffff');
return (
<ModalForm
title={intl.formatMessage({ id: 'pages.searchTable.new' })}
width="50%"
open={open}
onOpenChange={onOpenChange}
modalProps={{
destroyOnClose: true,
maskClosable: false,
}}
onFinish={async (values) => {
// 确保在提交前已经上传了图片和资源
if (!imageUrl) {
message.error(intl.formatMessage({ id: 'message.error.imageUpload' }));
return;
}
// 将图片和资源URL添加到表单数据中
await onFinish({
...values,
image: extractPathFromUrl(imageUrl),
bgColor,
});
}}
>
<BasicForm setImageUrl={setImageUrl} setBgColor={setBgColor} newRecord />
</ModalForm>
);
};
export default Create;
import { useIntl } from '@umijs/max';
import React, { useEffect, useState } from 'react';
import BasicForm from './BasicForm';
import { ModalForm } from '@ant-design/pro-components';
import { Form, Input } from 'antd';
import extractPathFromUrl from '@/utils/extractPathFromUrl';
export type FormValueType = Partial<API.ItemData>;
export type UpdateFormProps = {
onCancel: (visible: boolean) => void;
onSubmit: (values: FormValueType) => Promise<void>;
updateModalOpen: boolean;
values: {
image?: string;
bgColor?: string;
} & Partial<API.ItemData>;
};
const UpdateForm: React.FC<UpdateFormProps> = (props) => {
const intl = useIntl();
const { updateModalOpen, onCancel, onSubmit, values } = props;
const [imageUrl, setImageUrl] = useState<string | undefined>('');
const [bgColor, setBgColor] = useState<string>(values.bgColor!);
useEffect(() => {
setImageUrl(values.image);
}, [values]);
return (
<ModalForm
title={intl.formatMessage({ id: 'pages.searchTable.change' })}
width="50%"
modalProps={{
destroyOnClose: true,
maskClosable: false,
}}
open={updateModalOpen}
onOpenChange={onCancel}
onFinish={async (values: any) => {
onSubmit({
...values,
image: extractPathFromUrl(imageUrl!),
bgColor
});
}}
initialValues={{ ...values }}
>
<BasicForm
bgColor={bgColor}
setBgColor={setBgColor}
setImageUrl={setImageUrl}
imageUrl={imageUrl} // 传递图片URL以显示已上传的图片
values={values}
/>
<Form.Item name="_id" label={false}>
<Input type="hidden" />
</Form.Item>
</ModalForm>
);
};
export default UpdateForm;
本站文章均为原创内容,如需转载请注明出处,谢谢。
0 条回复
暂无回复~~
© 汕尾市求知科技有限公司 | Rails365 Gitlab | 知乎 | b 站 | csdn
粤公网安备 44152102000088号 | 粤ICP备19038915号
Top