Skip to content

Commit

Permalink
refactor: 后台抽离修改信息弹窗组件
Browse files Browse the repository at this point in the history
  • Loading branch information
@Mereithhh
Mereithhh committed Aug 30, 2022
1 parent 66e5796 commit 3838c48
Show file tree
Hide file tree
Showing 2 changed files with 156 additions and 138 deletions.
148 changes: 148 additions & 0 deletions packages/admin/src/components/UpdateModal/index.tsx
View file
@@ -0,0 +1,148 @@
import { getAllCategories, getTags, updateArticle, updateDraft } from '@/services/van-blog/api';
import { ModalForm, ProFormSelect, ProFormText } from '@ant-design/pro-form';
import { message } from 'antd';

export default function (props: {
currObj: any;
setLoading: any;
onFinish: any;
type: 'article' | 'draft' | 'about';
}) {
const { currObj, setLoading, type, onFinish } = props;
return (
<ModalForm
title="修改信息"
trigger={
<a key="button" type="link">
修改信息
</a>
}
width={450}
autoFocusFirstInput
submitTimeout={3000}
initialValues={currObj || {}}
onFinish={async (values) => {
if (!currObj || !currObj.id) {
return false;
}
setLoading(true);
if (type == 'article') {
await updateArticle(currObj?.id, values);
onFinish();
message.success('修改文章成功！');
setLoading(false);
} else if (type == 'draft') {
await updateDraft(currObj?.id, values);
onFinish();
message.success('修改草稿成功！');
setLoading(false);
} else {
return false;
}

return true;
}}
layout="horizontal"
labelCol={{ span: 6 }}
key="editForm"
// wrapperCol: { span: 14 },
>
<ProFormText
width="md"
required
id="title"
name="title"
label="文章标题"
placeholder="请输入标题"
rules={[{ required: true, message: '这是必填项' }]}
/>
<ProFormSelect
mode="tags"
tokenSeparators={[',']}
width="md"
name="tags"
label="标签"
placeholder="请选择或输入标签"
request={async () => {
const msg = await getTags();
return msg?.data?.map((item) => ({ label: item, value: item })) || [];
}}
/>
<ProFormSelect
width="md"
required
id="category"
name="category"
label="分类"
placeholder="请选择分类"
rules={[{ required: true, message: '这是必填项' }]}
request={async () => {
const { data: categories } = await getAllCategories();
return categories?.map((e) => {
return {
label: e,
value: e,
};
});
}}
/>
{type == 'article' && (
<>
<ProFormText
width="md"
id="top"
name="top"
label="置顶优先级"
placeholder="留空或0表示不置顶，其余数字越大表示优先级越高"
/>
<ProFormSelect
width="md"
name="private"
id="private"
label="是否加密"
placeholder="是否加密"
request={async () => {
return [
{
label: '否',
value: false,
},
{
label: '是',
value: true,
},
];
}}
/>
<ProFormText.Password
label="密码"
width="md"
id="password"
name="password"
placeholder="请输入密码"
dependencies={['private']}
/>
<ProFormSelect
width="md"
name="hidden"
id="hidden"
label="是否隐藏"
placeholder="是否隐藏"
request={async () => {
return [
{
label: '否',
value: false,
},
{
label: '是',
value: true,
},
];
}}
/>
</>
)}
</ModalForm>
);
}
146 changes: 8 additions & 138 deletions packages/admin/src/pages/Editor/index.jsx
View file
@@ -1,18 +1,16 @@
import Editor from '@/components/Editor';
import PublishDraftModal from '@/components/PublishDraftModal';
import Tags from '@/components/Tags';
import UpdateModal from '@/components/UpdateModal';
import {
getAbout,
getAllCategories,
getArticleById,
getDraftById,
getTags,
updateAbout,
updateArticle,
updateDraft,
} from '@/services/van-blog/api';
import { DownOutlined } from '@ant-design/icons';
import { ModalForm, ProFormSelect, ProFormText } from '@ant-design/pro-components';
import { PageContainer } from '@ant-design/pro-layout';
import { Button, Dropdown, Menu, message, Modal, Space, Tag } from 'antd';
import { debounce } from 'lodash';
Expand Down Expand Up @@ -138,142 +136,14 @@ export default function () {
},
type != 'about'
? {
key: 'updateBtn',
key: 'updateModalBtn',
label: (
<ModalForm
title="修改信息"
trigger={
<a key="button" type="link">
修改信息
</a>
}
width={450}
autoFocusFirstInput
submitTimeout={3000}
initialValues={currObj || {}}
onFinish={async (values) => {
if (!currObj || !currObj.id) {
return false;
}
setLoading(true);
if (type == 'article') {
await updateArticle(currObj?.id, values);
await fetchData();
message.success('修改文章成功！');
setLoading(false);
} else if (type == 'draft') {
await updateDraft(currObj?.id, values);
await fetchData();
message.success('修改草稿成功！');
setLoading(false);
} else {
return false;
}

return true;
}}
layout="horizontal"
labelCol={{ span: 6 }}
key="editForm"
// wrapperCol: { span: 14 },
>
<ProFormText
width="md"
required
id="title"
name="title"
label="文章标题"
placeholder="请输入标题"
rules={[{ required: true, message: '这是必填项' }]}
/>
<ProFormSelect
mode="tags"
tokenSeparators={[',']}
width="md"
name="tags"
label="标签"
placeholder="请选择或输入标签"
request={async () => {
const msg = await getTags();
return msg?.data?.map((item) => ({ label: item, value: item })) || [];
}}
/>
<ProFormSelect
width="md"
required
id="category"
name="category"
label="分类"
placeholder="请选择分类"
rules={[{ required: true, message: '这是必填项' }]}
request={async () => {
const { data: categories } = await getAllCategories();
return categories?.map((e) => {
return {
label: e,
value: e,
};
});
}}
/>
{type == 'article' && (
<>
<ProFormText
width="md"
id="top"
name="top"
label="置顶优先级"
placeholder="留空或0表示不置顶，其余数字越大表示优先级越高"
/>
<ProFormSelect
width="md"
name="private"
id="private"
label="是否加密"
placeholder="是否加密"
request={async () => {
return [
{
label: '否',
value: false,
},
{
label: '是',
value: true,
},
];
}}
/>
<ProFormText.Password
label="密码"
width="md"
id="password"
name="password"
placeholder="请输入密码"
dependencies={['private']}
/>
<ProFormSelect
width="md"
name="hidden"
id="hidden"
label="是否隐藏"
placeholder="是否隐藏"
request={async () => {
return [
{
label: '否',
value: false,
},
{
label: '是',
value: true,
},
];
}}
/>
</>
)}
</ModalForm>
<UpdateModal
onFinish={fetchData}
type={type}
currObj={currObj}
setLoading={setLoading}
/>
),
}
: null,
Expand Down

0 comments on commit 3838c48

Please sign in to comment.