feat: 文章或草稿支持批量导出markdown或批量删除操作 #296

Mereithhh · Jun 26, 2023 · 7dec2f8 · 7dec2f8
1 parent 32df7cd
commit 7dec2f8
Show file tree

Hide file tree

Showing 5 changed files with 108 additions and 3 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -9,7 +9,7 @@
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "[typescript]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
+    "editor.defaultFormatter": "vscode.typescript-language-features"
   },
   "[json]": {
     "editor.defaultFormatter": "vscode.json-language-features"

diff --git a/packages/admin/src/pages/Article/index.jsx b/packages/admin/src/pages/Article/index.jsx
@@ -1,9 +1,10 @@
 import ImportArticleModal from '@/components/ImportArticleModal';
 import NewArticleModal from '@/components/NewArticleModal';
 import { getArticlesByOption } from '@/services/van-blog/api';
+import {batchExport,batchDelete} from "@/services/van-blog/batch";
 import { useNum } from '@/services/van-blog/useNum';
 import { PageContainer, ProTable } from '@ant-design/pro-components';
-import { Button, message } from 'antd';
+import { Button, Space, message } from 'antd';
 import RcResizeObserver from 'rc-resize-observer';
 import { useMemo, useRef, useState } from 'react';
 import { history } from 'umi';
@@ -49,6 +50,25 @@ export default () => {
           columns={columns}
           actionRef={actionRef}
           cardBordered
+          rowSelection={{
+            fixed: true,
+            preserveSelectedRowKeys: true,
+          }}
+          tableAlertOptionRender={({ selectedRowKeys, onCleanSelected }) => {
+            return <Space>
+              <a onClick={async () => {
+                await batchDelete(selectedRowKeys)
+                message.success("批量删除成功！")
+                actionRef.current.reload()
+                onCleanSelected();
+              }}>批量删除</a>
+              <a onClick={() => {
+                batchExport(selectedRowKeys)
+                onCleanSelected();
+              }}>批量导出</a>
+              <a onClick={onCleanSelected}>取消选择</a>
+            </Space>
+          }}
           request={async (params = {}, sort, filter) => {
             const option = {};
             if (sort.createdAt) {

diff --git a/packages/admin/src/pages/Draft/index.jsx b/packages/admin/src/pages/Draft/index.jsx
@@ -7,7 +7,8 @@ import RcResizeObserver from 'rc-resize-observer';
 import { useMemo, useRef, useState } from 'react';
 import { history } from 'umi';
 import { columns, draftKeysObj, draftKeysObjSmall } from './columes';
-import { message } from 'antd';
+import { Button, Space, message } from 'antd';
+import {batchExport,batchDelete} from "@/services/van-blog/batch";
 export default () => {
   const actionRef = useRef();
   const [colKeys, setColKeys] = useState(draftKeysObj);
@@ -47,6 +48,25 @@ export default () => {
           columns={columns}
           actionRef={actionRef}
           cardBordered
+          rowSelection={{
+            fixed: true,
+            preserveSelectedRowKeys: true,
+          }}
+          tableAlertOptionRender={({ selectedRowKeys, onCleanSelected }) => {
+            return <Space>
+              <a onClick={async () => {
+                await batchDelete(selectedRowKeys,true)
+                message.success("批量删除成功！")
+                actionRef.current.reload()
+                onCleanSelected();
+              }}>批量删除</a>
+              <a onClick={() => {
+                batchExport(selectedRowKeys,true)
+                onCleanSelected();
+              }}>批量导出</a>
+              <a onClick={onCleanSelected}>取消选择</a>
+            </Space>
+          }}
           request={async (params = {}, sort, filter) => {
             const option = {};
             if (sort.createdAt) {

diff --git a/packages/admin/src/services/van-blog/batch.ts b/packages/admin/src/services/van-blog/batch.ts
@@ -0,0 +1,56 @@
+import { checkDemo } from "./check"
+import { parseObjToMarkdown } from "./parseMarkdownFile"
+import { getArticleById, deleteArticle, deleteDraft, getDraftById } from "./api"
+import { Modal } from "antd";
+
+// 批量操作
+export const batchDelete = (ids: string[],isDraft =false) => {
+  return new Promise((resolve, reject) => {
+    const result = checkDemo();
+    if (!result) {
+      reject();
+      return; 
+    }
+    Modal.confirm({
+      title: '确定要删除选中内容吗？',
+      content: '删除后无法恢复',
+      onOk: async () => {
+        let cnt = 0;
+        for (const id of ids) {
+          const fn = isDraft ? deleteDraft : deleteArticle;
+
+          fn(id).finally(()=>{
+            cnt = cnt + 1;
+            if (cnt >= ids.length) {
+              resolve(true);
+              return;
+            }
+          })
+        }
+      },
+    })
+  });
+
+
+}
+
+
+
+export const batchExport = async (ids: string[], isDraft= false) => {
+  for (const id of ids) {
+    await exportEachById(id, isDraft);
+  }
+}
+
+
+export const exportEachById = async (id: string,isDraft=false) => {
+  const fn = isDraft ? getDraftById : getArticleById;
+  const { data: obj } = await getArticleById(id);
+  const md = parseObjToMarkdown(obj);
+  const data = new Blob([md]);
+  const url = URL.createObjectURL(data);
+  const link = document.createElement('a');
+  link.href = url;
+  link.download = `${obj.title}.md`;
+  link.click();
+}
diff --git a/packages/admin/src/services/van-blog/check.ts b/packages/admin/src/services/van-blog/check.ts
@@ -0,0 +1,9 @@
+import { message } from "antd";
+
+export const checkDemo = () => {
+  if (location.hostname == 'blog-demo.mereith.com') {
+    message.warn('演示站禁止此操作！');
+    return false;
+  }
+  return true;
+}