import React, { useState, useEffect } from 'react';
import style from './index.less';
import { EditOutlined, SettingTwoTone, PlusOutlined } from '@ant-design/icons';
import defaultImg from './img/default.png';
import Common from '@/utils/common';
import { getDataById, updateData, setDataProtect } from '@/services/resource';
import { Modal, notification, Upload } from 'antd';
const DetailUI = props => {
const [dataId, setDataId] = useState(undefined);
const [refresh, setRefresh] = useState(false);
const [thumbVisible, setThumbVisible] = useState(false);//編輯縮略圖彈窗的visible
const [sourceInfo, setSourceInfo] = useState(null);
const [previewVisible, setPreviewVisible] = useState(false);//預覽彈窗的visible
const [previewImage, setPreviewImage] = useState('');//預覽image的內容
//存放默認的圖片路徑
const [fileList, setFileList] = useState([{
uid: '-1',
name: 'thumb.png',
status: 'done',
thumbUrl: defaultImg,
}]);
useEffect(() => {
setDataId(Common.getParam());
}, []);
useEffect(() => {
getDataById({
id: dataId
}).then(res => {
if (res && res.Success) {
setSourceInfo(res.Data);
if (res.Data !== null) {
setChecked(res.Data.DeleteProtect);
//請求回來數據後更新filelist
setFileList([{
uid: '-1',
name: 'thumb.png',
status: 'done',
thumbUrl: res.Data.thumbnail == null || res.Data.thumbnail == "" ? defaultImg : res.Data.thumbnail,
}]);
}
}
})
}, [dataId, refresh]);
const saveData = data => {
updateData(data).then(res => {
if (res && res.Success) {
notification.success({
message: "保存成功"
});
setThumbVisible(false);
setRefresh(!refresh);
}
})
}
//預覽
const handlePreview = async file => {
setPreviewImage(file.url || file.thumbUrl);
setPreviewVisible(true);
};
//關閉預覽
const handleCancel = () => setPreviewVisible(false);
//文件列表發生變化
const handleChange = ({ fileList }) => {
// console.log(fileList)
setFileList(fileList)
};
//確定時更新數據
const handleThumbSubmit = () => {
let url = '';
if (fileList.length > 0) {
url = fileList[0].thumbUrl
}
let data = {
Id: dataId,
thumbnail: url,
}
saveData(data);
}
return (
<>
<div className={style.basic_info}>
<div className={style.top_menu}>
<div className={style.title}>基本信息</div>
<div className={style.modify_btn} onClick={() => setEditVisible(true)}>
<EditOutlined /> 點擊修改基本信息
</div>
</div>
<div className={style.divider}></div>
{
sourceInfo !== null
&&
<div className={style.content}>
<div className={style.thumb_div}>
<div className={style.thumb_img}>
<img src={sourceInfo.thumbnail == null || sourceInfo.thumbnail == "" ? defaultImg : sourceInfo.thumbnail} alt="default" />
<div className={style.thumb_edit} onClick={() => setThumbVisible(true)}>
<span className="icon iconfont"></span>
點擊編輯縮略圖
</div>
</div>
</div>
</div>
}
</div>
<Modal
destroyOnClose
maskClosable={false}
title="編輯資源縮略圖"
visible={thumbVisible}
onOk={() => handleThumbSubmit()}
onCancel={() => {
setThumbVisible(false)
}}
width={300}
bodyStyle={{
marginLeft: 70
}}
>
{
thumbVisible &&
<Upload
listType="picture-card"
fileList={fileList}
onPreview={handlePreview}
onChange={handleChange}
>
// 當有一個圖片文件時不顯示"加號",因爲縮略圖一般只有一張
{fileList.length >= 1 ? null : <PlusOutlined />}
</Upload>
}
</Modal>
<Modal visible={previewVisible} footer={null} onCancel={handleCancel}>
<img alt="預覽圖片" style={{ width: '100%' }} src={previewImage} />
</Modal>
</>
);
}
export default DetailUI;
antd design(4.x)中Upload應用------編輯縮略圖
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.