網站首頁 編程語言 正文
import {
Row,
Col,
Form,
Input,
Button,
Upload,
Spin,
DatePicker,
message,
Image,
Modal
} from 'antd';
import {
PlusOutlined, ExclamationCircleOutlined
} from '@ant-design/icons';
import React, { useState, useEffect, useRef } from 'react';
import moment from 'moment'
import PanelTitle from '@/components/PanelTitle'
import BraftEditor from 'braft-editor';
import { v4 as uuidv4 } from 'uuid';
import 'braft-editor/dist/index.css';
import UploadComponent from "./component";
import styles from './index.less';
import { GiftDetail, CreateGift, UpdateGift } from '@/services/pointsCenter';
const commonUploadUrl = requestUrl + '/api/common/CommonUpload';
import { requestUrl, getUploadFileType, MessageError, MessageSuccess } from '../../../utils/utils';
const dateFormat = 'YYYY/MM/DD';
const { RangePicker } = DatePicker;
const editGift = (props) => {
const { history, location } = props;
const { confirm } = Modal;
const [form] = Form.useForm();
const { query } = location;
const type = query.type || 'add';
const content = useRef('');
const [loading, setloading] = useState(false);
const [thumbnailImage, setThumbnailImageUrl] = useState('')//縮略圖
useEffect(() => {
if (!query.id) {
return;
}
// TODO:回顯禮品詳情
GiftDetail({ Id: query.id }).then(res => {
if (res) {
setThumbnailImageUrl(`${ATTACHMENT_URL}${res.ThumbnailUrl}`)//手動綁定縮略圖
let imagesData = []
res.Images.map((item) => {//處理多張圖片
let obj = {}
obj.id = item.Id
obj.uid = item.Id
obj.url = `${ATTACHMENT_URL}${item.DocumentPath}`
imagesData.push(obj)
return imagesData
})
console.log(res);
form.setFieldsValue({
Gift: res.GiftName,
RedemptionTime: [moment(res.StartTime), moment(res.EndTime)],
RequiredPoints: res.RequiredPoints,
RemainingUnit: res.RemainingUnit,
Order: res.Order,
Description: BraftEditor.createEditorState(res.Description),
Thumbnail: res.Thumbnail,//縮略圖手動綁定的！但這里要賦值，要不然 修改的時候 提交 會提示這里無值;修改回顯傳id給后臺
uploadPhoto: imagesData
});
}
})
}, [query.id]);
const layout = {
labelCol: { span: 4 },
wrapperCol: { span: 20 },
}
const uploadButton = (
<div className={styles.upImg2} >
<PlusOutlined />
<div>Upload</div>
</div>
);
const getBase64 = (img, callback) => {
const reader = new FileReader();
reader.readAsDataURL(img)
reader.addEventListener('load', () => callback(reader.result));
}
const EditorChange = (editorState) => {
//編輯器change 事件
content.current = editorState && editorState.toHTML();
};
const rulesObj = {
Gift: [
{
required: true,
message: `Please input Gift!`
},
{
validator(rule, text) {
if (text) {
if (text.length <= 200) {
return Promise.resolve();
} else {
return Promise.reject('The length of characters exceed the limit!');
}
} else {
return Promise.resolve();
}
}
}
],
Order: [
{
required: false,
validator(rule, text) {
if (text) {
const reg = /^[+]{0,1}(\d+)$/;
if (reg.test(text)) {
return Promise.resolve();
} else {
return Promise.reject('Please input positive integer!');
}
} else {
return Promise.resolve();
}
},
}
],
Thumbnail: [
{
required: true,
message: `Please upload Thmbnail!`,
}
],
Image: [
{
required: true,
message: `Please upload Image!`,
}
],
Description: [{
required: true,
message: `Please input Description!`,
}
],
RedemptionTime: [
{
required: true,
message: `Please select Redemption Time!`,
}
],
RequiredPoints: [
{
required: true,
message: `Please input Required Points!`,
}
],
RemainingUnit: [
{
required: true,
message: `Please input RemainingUnit!`
},
{
validator(rule, text) {
if (text) {
const reg = /^([1-9]\d*)?$/;
if (reg.test(text)) {
return Promise.resolve();
} else {
return Promise.reject('Please input positive integer!');
}
} else {
return Promise.resolve();
}
}
}
],
RequiredPoints: [
{
required: true,
message: `Please input Required Points!`,
},
{
validator(rule, text) {
if (text) {
const reg = /^([1-9]\d*)?$/;
if (reg.test(text)) {
return Promise.resolve();
} else {
return Promise.reject('Please input positive integer!');
}
} else {
return Promise.resolve();
}
}
}
],
}
// 禮品縮略圖
const ThumbnailUploading = {
showUploadList: false,
action: commonUploadUrl,
headers: {
SessionKey: `${localStorage.getItem('sk')}`,
},
name: "thumbnail",//發到后臺的文件name
// listType="picture-card"
className: "avatar-uploader",
// className="thumbnailImage",
accept: ".jpeg,.png,.jpg",
data: (file) => {
return {
UploadType: 1026,
Id: uuidv4(),
FileType: getUploadFileType(file),
};
},
beforeUpload: (file) => {
// setPageLoading(true);
const limitFileNameLen = 100;
return new Promise((resolve, reject) => {
if (file.name && file.name.length > limitFileNameLen) {
message.error('Please upload a file with a file name less than 100 characters');
return reject();
}
const limitM = 2;
const isLimit = file.size / 1024 / 1024 <= limitM;
if (!isLimit) {
message.error('The size exceeds the limit');
return reject();
}
return resolve();
});
},
/**
* 附件上傳
* @param info
*/
onChange: (info) => {
if (info.file.status === 'uploading') {
setloading(true);
return;
}
setloading(false);
if (info.file.status === 'done') {
getBase64(info.file.originFileObj, (resImageUrl) => {
const { response } = info.file;
if (response.DocumentId) {
form.setFieldsValue({
// TODO:傳給后端的圖片參數
Thumbnail: response.DocumentId,//調用傳圖片的接口CommonUpload 后，后端response 返回的id 又傳回給后臺（通過保存的接口）
});
setThumbnailImageUrl(`${ATTACHMENT_URL}${response.UploadPath}`);
} else {
message.error('Upload failed');
}
});
}
},
};
// 禮品image
const imageUploading = {
showUploadList: false,
action: commonUploadUrl,
headers: {
SessionKey: `${localStorage.getItem('sk')}`,
},
data: (file) => {
return {
UploadType: 1027,//后端定義的type
Id: uuidv4(),
FileType: getUploadFileType(file),
};
},
beforeUpload: (file) => {// 禮品image
console.log('你進來了');
// setPageLoading(true);
const limitFileNameLen = 100;
return new Promise((resolve, reject) => {
if (file.name && file.name.length > limitFileNameLen) {
message.error('Please upload a file with a file name less than 100 characters');
return reject();
}
const limitM = 2;
const isLimit = file.size / 1024 / 1024 <= limitM;
if (!isLimit) {
message.error('The size exceeds the limit');
return reject();
}
return resolve(isLimit);
});
},
/**
* 附件上傳
* @param info
*/
onChange: (info) => {// 禮品image
if (info.file.status === 'uploading') {
setloading(true);
return;
}
setloading(false);
if (info.file.status === 'done') {// 禮品image
getBase64(info.file.originFileObj, (resImageUrl) => {
const { response } = info.file;
if (response.DocumentId) {
form.setFieldsValue({
Image: response.DocumentId,//傳給后臺的info對象的id
});
} else {
message.error('Upload failed');
}
});
}
},
onPreview: (info) => {
// console.log(info)
}
};
//TODO:保存提交
const submitForm = () => {
form
.validateFields()
.then((values) => {
let DataArray = []
if (values.uploadPhoto) {//處理上傳多張圖片的值，數組對象轉成數組字符串
let newArray = values.uploadPhoto
newArray.map((item, index) => {
DataArray.push(item.id)
return DataArray
})
}
const postData = {
GiftName: values.Gift,
// StartTime: values.RedemptionTime?values.RedemptionTime[0].format('YYYY-MM-DD'):'',
StartTime: values.RedemptionTime[0].format('YYYY-MM-DD'),
EndTime: values.RedemptionTime[1].format('YYYY-MM-DD'),
Thumbnail: values.Thumbnail,
RequiredPoints: values.RequiredPoints,
RemainingUnit: values.RemainingUnit,
Order: values.Order,
Description: content.current,
Images: DataArray
}
if (query.id) {
//編輯Edit
postData.Id = query.id;//新增一個id鍵值對字段進postData中 傳入后端Edit接口
UpdateGift(postData).then((res) => {
if (!res) {
return;
}
if (res.ReturnCode === 1001) {
history.push({
pathname: '/admin/pointscenter/giftlist',
search: ``,
});
message.success('Edit Successfully')
// MessageSuccess(res)
} else {
MessageError(res);
// console.log('修改提交報錯');
}
});
} else {//Add
CreateGift(postData).then(res => {
if (!res) {
return;
}
if (res.ReturnCode === 1001) {
history.push({
pathname: '/admin/pointscenter/giftlist',
search: ``,
});
// MessageSuccess(res)
message.success('Add Successfully')
} else {
MessageError(res);
}
})
}
})
.catch((err) => { });
};
return (
<>
<Spin spinning={loading}>
<div className={styles.MaxBox}>
<PanelTitle title={`Gift List / ${type == 'edit' ? 'Edit' : 'Add'} Gift`} />
<div className={styles.boxTitle}>Content</div>
<Form
form={form}
{...layout}
>
<Row>
<Col span={12}>
<Form.Item
labelCol={{ span: 8, offset: 0 }}
wrapperCol={{ span: 12, offset: 0 }}
label="Gift"
name="Gift"
rules={rulesObj.Gift}
>
<Input></Input>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
labelCol={{ span: 8, offset: 0 }}
wrapperCol={{ span: 12, offset: 0 }}
label="Order"
name="Order"
rules={rulesObj.Order}
>
<Input></Input>
</Form.Item>
</Col>
<Col span={24}>
<Form.Item
className={styles.uploadImgItem}
label="Thumbnail"
name="Thumbnail"
rules={rulesObj.Thumbnail}
>
<Upload
className={styles.upImg2}
{...ThumbnailUploading}
>
{thumbnailImage ? <img src={thumbnailImage} className={styles.upImg} alt="Network error" /> : uploadButton}
</Upload>
<span className={styles.coverTips}>
建議尺寸300*300，支持jpg/jpeg、png格式圖片,小于2M
</span>
{/* TODO:縮略圖上傳 */}
</Form.Item>
</Col>
{/* TODO:禮品圖上傳 */}
<Col span={24}>
<Form.Item
className={styles.uploadImgItem}
label="Image"
name="uploadPhoto"http://用了預覽的組件,手動綁定圖片路徑,NONO！
rules={rulesObj.Image}
>
<UploadComponent />
</Form.Item>
</Col>
<Col span={24}>
<Form.Item
label="Description"
name="Description"
rules={rulesObj.Description}
labelCol={{ span: 4, offset: 0 }}
wrapperCol={{ span: 18, offset: 0 }}
>
<BraftEditor
// contentClassName={styles.content}
className={styles.myEditor}
onChange={EditorChange}
/>
</Form.Item>
</Col>
</Row>
<div className={styles.boxTitle}>Setting</div>
<Row>
<Col span={12}>
<Form.Item
labelCol={{ span: 8, offset: 0 }}
wrapperCol={{ span: 12, offset: 0 }}
label="Redemption Time"
name="RedemptionTime"
rules={rulesObj.RedemptionTime}
>
<RangePicker
placeholder={['From', 'To']}
format={dateFormat}
/>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
labelCol={{ span: 8, offset: 0 }}
wrapperCol={{ span: 12, offset: 0 }}
label="Required Points"
name="RequiredPoints"
rules={rulesObj.RequiredPoints}
>
<Input></Input>
</Form.Item>
</Col>
<Col span={24}>
<Form.Item
labelCol={{ span: 4, offset: 0 }}
wrapperCol={{ span: 6, offset: 0 }}
label="Remaining Unit"
name="RemainingUnit"
rules={rulesObj.RemainingUnit}
>
<Input></Input>
</Form.Item>
</Col>
</Row>
</Form>
<div
className={styles.BtnBox}
>
<Button
className={styles.backBtn}
type="primary"
onClick={() => {
confirm({
title: 'Content',
centered: true,
icon: <ExclamationCircleOutlined />,
content: 'Are you sure to back?',
okText: 'Yes',
cancelText: 'No',
onOk() {
history.go(-1);
},
onCancel() { },
});
}}
>
Back
</Button>
<Button
className={styles.saveBtn}
onClick={() => {
submitForm();
}}
style={{ marginLeft: '10px' }}
type="primary"
>
Save
</Button>
</div>
</div>
</Spin>
</>
);
};
export default editGift
原文鏈接：https://blog.csdn.net/zhangyubababa/article/details/122110573
相關推薦
- 2022-05-17 Servlet快速入門
- 2022-04-21 Ubuntu16.04系統搭建.Net?Core開發環境_實用技巧
- 2022-07-12 element表格循環校驗，確保數據不重復
- 2022-08-06 QT生成隨機驗證碼的方法_C 語言
- 2022-03-14 Maven項目中遇見的一些問題（maven項目報錯）
- 2022-12-08 C#調用C++?DLL?bool返回值始終為true的問題_C#教程
- 2022-03-14 命令刪除node_modules
- 2022-09-03 React實現輪播圖效果_React
- 最近更新
-
- window11 系統安裝 yarn
- 超詳細win安裝深度學習環境2025年最新版（
- Linux 中運行的top命令 怎么退出？
- MySQL 中decimal 的用法？ 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎操作-- 運算符，流程控制 Flo
- 1. Int 和Integer 的區別，Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權
- redisson分布式鎖中waittime的設
- maven:解決release錯誤：Artif
- restTemplate使用總結
- Spring Security之安全異常處理
- MybatisPlus優雅實現加密？
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務發現-Nac
- Spring Security之基于HttpR
- Redis 底層數據結構-簡單動態字符串（SD
- arthas操作spring被代理目標對象命令
- Spring中的單例模式應用詳解
- 聊聊消息隊列，發送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支
提供CDN加速