feat(admin): add delete button in server entry image

pull/90/head
moonrailgun 2 years ago
parent fb13a3c928
commit 4d6fd451a1

@ -11,6 +11,7 @@ export const englishCustom = {
operateSuccess: 'Operate Success', operateSuccess: 'Operate Success',
operateFailed: 'Operate Failed', operateFailed: 'Operate Failed',
upload: 'Upload', upload: 'Upload',
delete: 'Delete',
}, },
menu: { menu: {
network: 'Tailchat Network', network: 'Tailchat Network',
@ -89,6 +90,7 @@ export const chineseCustom = {
operateSuccess: '操作成功', operateSuccess: '操作成功',
operateFailed: '操作失败', operateFailed: '操作失败',
upload: '上传', upload: '上传',
delete: '删除',
}, },
menu: { menu: {
network: 'Tailchat 网络', network: 'Tailchat 网络',

@ -1,13 +1,14 @@
import React, { PropsWithChildren } from 'react'; import React, { PropsWithChildren } from 'react';
import { request } from '../../request'; import { request } from '../../request';
import { useRequest } from 'ahooks'; import { useRequest } from 'ahooks';
import { CircularProgress, Box, Grid, Input } from '@mui/material'; import { CircularProgress, Box, Grid, Input, Button } from '@mui/material';
import { useTranslate, useNotify } from 'react-admin'; import { useTranslate, useNotify } from 'react-admin';
import DoneIcon from '@mui/icons-material/Done'; import DoneIcon from '@mui/icons-material/Done';
import ClearIcon from '@mui/icons-material/Clear'; import ClearIcon from '@mui/icons-material/Clear';
import { useEditValue } from '../../utils/hooks'; import { useEditValue } from '../../utils/hooks';
import { Image } from '../../components/Image'; import { Image } from '../../components/Image';
import LoadingButton from '@mui/lab/LoadingButton'; import LoadingButton from '@mui/lab/LoadingButton';
import DeleteIcon from '@mui/icons-material/Delete';
const SystemItem: React.FC< const SystemItem: React.FC<
PropsWithChildren<{ PropsWithChildren<{
@ -70,32 +71,41 @@ export const SystemConfig: React.FC = React.memo(() => {
const { const {
loading: loadingServerEntryImage, loading: loadingServerEntryImage,
run: handleUploadServerEntryImage, run: handleChangeServerEntryImage,
} = useRequest( } = useRequest(
async (file: File) => { async (file: File | null) => {
try { try {
const formdata = new FormData(); if (file) {
formdata.append('file', file); const formdata = new FormData();
formdata.append('file', file);
const { data } = await request.put('/file/upload', formdata, {
headers: { const { data } = await request.put('/file/upload', formdata, {
'Content-Type': 'multipart/form-data', headers: {
}, 'Content-Type': 'multipart/form-data',
}); },
});
const fileInfo = data.files[0];
const fileInfo = data.files[0];
if (!fileInfo) {
throw new Error('not get file'); if (!fileInfo) {
throw new Error('not get file');
}
const url = fileInfo.url;
await request.patch('/config/client', {
key: 'serverEntryImage',
value: url,
});
refresh();
} else {
// delete
await request.patch('/config/client', {
key: 'serverEntryImage',
value: '',
});
refresh();
} }
const url = fileInfo.url;
await request.patch('/config/client', {
key: 'serverEntryImage',
value: url,
});
refresh();
notify('custom.common.operateSuccess', { notify('custom.common.operateSuccess', {
type: 'info', type: 'info',
}); });
@ -163,20 +173,30 @@ export const SystemConfig: React.FC = React.memo(() => {
onChange={(e) => { onChange={(e) => {
const file = e.target.files[0]; const file = e.target.files[0];
if (file) { if (file) {
handleUploadServerEntryImage(file); handleChangeServerEntryImage(file);
} }
}} }}
/> />
</LoadingButton> </LoadingButton>
<div style={{ marginTop: 10 }}> {config?.serverEntryImage && (
{config?.serverEntryImage && ( <div style={{ marginTop: 10 }}>
<Image <div>
style={{ maxWidth: '100%', maxHeight: 360 }} <Image
src={config?.serverEntryImage} style={{ maxWidth: '100%', maxHeight: 360 }}
/> src={config?.serverEntryImage}
)} />
</div> </div>
<Button
variant="outlined"
startIcon={<DeleteIcon />}
onClick={() => handleChangeServerEntryImage(null)}
>
{translate('custom.common.delete')}
</Button>
</div>
)}
</div> </div>
</SystemItem> </SystemItem>
</Box> </Box>

Loading…
Cancel
Save