当前位置：首页 > news >正文

ant design pro 如何去保存颜色

news 来源：原创 2024/9/21 1:30:57

上图

在这里插入图片描述

就是实现这样的效果

后端是这样的，这个颜色肯定是存到字符串里的
在这里插入图片描述
这是第一步

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;

 <ProFormColorPickername="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 (<ModalFormtitle={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 (<ModalFormtitle={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 }}><BasicFormbgColor={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;