添加标签功能

back/api/cron.ts

@@ -28,6 +28,7 @@ export default (app: Router) => {
         command: Joi.string().required(),
         schedule: Joi.string().required(),
         name: Joi.string().optional(),
+        labels: Joi.array().optional(),
       }),
     }),
     async (req: Request, res: Response, next: NextFunction) => {
@@ -83,6 +84,48 @@ export default (app: Router) => {
     },
   );
 
+  route.put(
+    '/removelabels',
+    celebrate({
+      body: Joi.object({
+        ids:Joi.array().items(Joi.string().required()),
+        labels:Joi.array().items(Joi.string().required()),
+      })
+    }),
+    async (req: Request, res: Response, next: NextFunction) => {
+      const logger: Logger = Container.get('logger');
+      try {
+        const cronService = Container.get(CronService);
+        const data = await cronService.removeLabels(req.body.ids,req.body.labels);
+        return res.send({ code: 200, data });
+      } catch (e) {
+        logger.error('🔥 error: %o', e);
+        return next(e);
+      }
+    },
+  );
+
+  route.put(
+    '/addlabels',
+    celebrate({
+      body: Joi.object({
+        ids:Joi.array().items(Joi.string().required()),
+        labels:Joi.array().items(Joi.string().required()),
+      })
+    }),
+    async (req: Request, res: Response, next: NextFunction) => {
+      const logger: Logger = Container.get('logger');
+      try {
+        const cronService = Container.get(CronService);
+        const data = await cronService.addLabels(req.body.ids,req.body.labels);
+        return res.send({ code: 200, data });
+      } catch (e) {
+        logger.error('🔥 error: %o', e);
+        return next(e);
+      }
+    },
+  );
+
   route.put(
     '/disable',
     celebrate({
@@ -143,6 +186,7 @@ export default (app: Router) => {
     '',
     celebrate({
       body: Joi.object({
+        labels: Joi.array().optional(),
         command: Joi.string().optional(),
         schedule: Joi.string().optional(),
         name: Joi.string().optional(),

back/data/cron.ts

@@ -12,6 +12,7 @@ export class Crontab {
   isDisabled?: 1 | 0;
   log_path?: string;
   isPinned?: 1 | 0;
+  labels: Array<string>;
 
   constructor(options: Crontab) {
     this.name = options.name;
@@ -29,6 +30,7 @@ export class Crontab {
     this.isDisabled = options.isDisabled || 0;
     this.log_path = options.log_path || '';
     this.isPinned = options.isPinned || 0;
+    this.labels = options.labels || [];
   }
 }
 

back/services/cron.ts

@@ -156,25 +156,69 @@ export default class CronService {
     });
   }
 
+  public async addLabels(ids: string[],labels: string[]){
+    return new Promise((resolve: any) => {
+      this.cronDb.update(
+        { _id: { $in: ids } },
+        { $addToSet: { labels: { $each: labels} } },
+        { multi: true },
+        async (err) => {
+          resolve();
+        },
+      );
+    });
+  }
+
+  public async removeLabels(ids: string[],labels: string[]){
+    return new Promise((resolve: any) => {
+      this.cronDb.update(
+        { _id: { $in: ids } },
+        { $pull: { labels: { $in: labels} } },
+        { multi: true },
+        async (err) => {
+          resolve();
+        },
+      );
+    });
+  }
+
   public async crontabs(searchText?: string): Promise<Crontab[]> {
     let query = {};
     if (searchText) {
-      const encodeText = encodeURIComponent(searchText);
+      const textArray = searchText.split(":");
-      const reg = new RegExp(`${searchText}|${encodeText}`, 'i');
+      switch (textArray[0]) {
-
+        case "name":
-      query = {
+          query = {name:createRegexp(textArray[1])};
-        $or: [
+          break;
-          {
+        case "command":
-            name: reg,
+          query = {command:createRegexp(textArray[1])};
-          },
+          break;
-          {
+        case "schedule":
-            command: reg,
+          query = {schedule:createRegexp(textArray[1])};
-          },
+          break;
-          {
+       case "label":
-            schedule: reg,
+          query = {labels:createRegexp(textArray[1])};
-          },
+          break;
-        ],
+        default:
-      };
+          const reg = createRegexp(searchText);
+          query = {
+            $or: [
+              {
+                name: reg,
+              },
+              {
+                command: reg,
+              },
+              {
+                schedule: reg,
+              },
+              {
+                labels: reg,
+              },
+            ],
+          };
+          break;
+      }
     }
     return new Promise((resolve) => {
       this.cronDb
@@ -184,6 +228,11 @@ export default class CronService {
           resolve(docs);
         });
     });
+    function createRegexp(text:string) :RegExp {
+      const encodeText = encodeURIComponent(text);
+      const reg = new RegExp(`${text}|${encodeText}`, 'i');
+      return reg;
+    }
   }
 
   public async get(_id: string): Promise<Crontab> {

src/pages/crontab/index.tsx

@@ -30,7 +30,7 @@ import {
 import config from '@/utils/config';
 import { PageContainer } from '@ant-design/pro-layout';
 import { request } from '@/utils/http';
-import CronModal from './modal';
+import CronModal,{CronLabelModal} from './modal';
 import CronLogModal from './logModal';
 import cron_parser from 'cron-parser';
 import { diffTime } from '@/utils/date';
@@ -275,6 +275,26 @@ const Crontab = ({ headerStyle, isPhone }: any) => {
         </>
       ),
     },
+    {
+      title: '标签',
+      key: 'labels',
+      dataIndex: 'labels',
+      align: 'center' as const,
+      width: 100,
+      render: (text: string, record: any) => (
+        <>
+          {record.labels?.map((label: string) => (
+            <Tag style={{
+              width: label.replace(/[^\x00-\xff]/g,"01").length < 5 ? 40:90,
+              overflow:'hidden',
+              textOverflow:'ellipsis',
+            }} 
+            color="blue" 
+            onClick={() => { onSearch(`label:${label}`) }}>{label}</Tag>
+          ))}
+        </>
+      ),
+    },
     {
       title: '操作',
       key: 'action',
@@ -325,6 +345,7 @@ const Crontab = ({ headerStyle, isPhone }: any) => {
   const [value, setValue] = useState<any[]>([]);
   const [loading, setLoading] = useState(true);
   const [isModalVisible, setIsModalVisible] = useState(false);
+  const [isLabelModalVisible, setisLabelModalVisible] = useState(false);
   const [editedCron, setEditedCron] = useState();
   const [searchText, setSearchText] = useState('');
   const [isLogModalVisible, setIsLogModalVisible] = useState(false);
@@ -853,6 +874,13 @@ const Crontab = ({ headerStyle, isPhone }: any) => {
           >
             批量取消置顶
           </Button>
+          <Button
+            type="primary"
+            onClick={() => setisLabelModalVisible(true)}
+            style={{ marginLeft: 8, marginRight: 8 }}
+          >
+            批量修改标签
+          </Button>
           <span style={{ marginLeft: 8 }}>
             已选择
             <a>{selectedRowIds?.length}</a>项
@@ -893,6 +921,16 @@ const Crontab = ({ headerStyle, isPhone }: any) => {
         handleCancel={handleCancel}
         cron={editedCron}
       />
+      <CronLabelModal
+        visible={isLabelModalVisible}
+        handleCancel={(needUpdate?: boolean) => {
+          setisLabelModalVisible(false);
+          if (needUpdate) {
+            getCrons();
+          }
+        }}
+        ids={selectedRowIds}
+      />
     </PageContainer>
   );
 };

src/pages/crontab/modal.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Modal, message, Input, Form } from 'antd';
+import { Modal, message, Input, Form, Button } from 'antd';
 import { request } from '@/utils/http';
 import config from '@/utils/config';
 import cronParse from 'cron-parser';
@@ -48,6 +48,9 @@ const CronModal = ({
         form
           .validateFields()
           .then((values) => {
+            if (typeof values.labels === "string") {
+              values.labels = values.labels.split(/,|，/);
+            }
             handleOk(values);
           })
           .catch((info) => {
@@ -66,6 +69,9 @@ const CronModal = ({
         <Form.Item name="name" label="名称">
           <Input placeholder="请输入任务名称" />
         </Form.Item>
+        <Form.Item name="labels" label="标签">
+          <Input placeholder="请输入任务标签" />
+        </Form.Item>
         <Form.Item
           name="command"
           label="命令"
@@ -100,4 +106,79 @@ const CronModal = ({
   );
 };
 
-export default CronModal;
+const CronLabelModal = ({
+  ids,
+  handleCancel,
+  visible,
+}: {
+  ids: Array<string>;
+  visible: boolean;
+  handleCancel: (needUpdate?: boolean) => void;
+}) => {
+  const [form] = Form.useForm();
+  const [loading, setLoading] = useState(false);
+
+  const update = async (action: string) => {
+    form
+      .validateFields()
+      .then(async (values) => {
+        if (typeof values.labels === "string") {
+          values.labels = values.labels.split(/,|，/);
+        }
+        setLoading(true);
+        const payload = { ids, labels: values.labels };
+        const { code, data } = await request.put(`${config.apiPrefix}crons/${action}`, {
+          data: payload,
+        });
+        if (code === 200) {
+          message.success(action === 'addLabels' ? '添加Labels成功' : '删除Labels成功');
+        } else {
+          message.error(data);
+        }
+        setLoading(false);
+        handleCancel(true);
+      })
+      .catch((info) => {
+        console.log('Validate Failed:', info);
+      });
+  }
+
+  useEffect(() => {
+    form.resetFields();
+  }, [ids, visible]);
+
+  const buttons = [
+    <Button onClick={() => handleCancel(false)} key="test">
+      取消
+    </Button>,
+    <Button type="primary" danger onClick={() => update('removelabels')}>
+      删除
+    </Button>,
+    <Button type="primary" onClick={() => update('addlabels')}>
+      添加
+    </Button>
+  ];
+
+  return (
+    <Modal
+      title='批量修改标签'
+      visible={visible}
+      footer={buttons}
+      forceRender
+      onCancel={() => handleCancel(false)}
+      confirmLoading={loading}
+    >
+      <Form
+        form={form}
+        layout="vertical"
+        name="form_in_label_modal"
+      >
+        <Form.Item name="labels" label="标签">
+          <Input placeholder="请输入任务标签" />
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+};
+
+export { CronModal as default, CronLabelModal }