支持定时任务视图筛选条件关系切换

src/components/iconfont.tsx

@@ -1,7 +1,7 @@
 import { createFromIconfontCN } from '@ant-design/icons';
 
 const IconFont = createFromIconfontCN({
-  scriptUrl: ['//at.alicdn.com/t/font_3354854_ds8pa06q1qa.js'],
+  scriptUrl: ['//at.alicdn.com/t/c/font_3354854_z0d9rbri1ci.js'],
 });
 
 export default IconFont;

src/pages/crontab/index.less

@@ -179,6 +179,6 @@ tr.drop-over-upward td {
 
 .view-filters-container.active {
   .filter-item > div > .ant-form-item-control {
-    padding-left: 40px;
+    margin-left: 40px;
   }
 }

src/pages/crontab/index.tsx

@@ -201,10 +201,10 @@ const Crontab = () => {
           >
             {record.last_execution_time
               ? new Date(record.last_execution_time * 1000)
-                .toLocaleString(language, {
-                  hour12: false,
-                })
-                .replace(' 24:', ' 00:')
+                  .toLocaleString(language, {
+                    hour12: false,
+                  })
+                  .replace(' 24:', ' 00:')
               : '-'}
           </span>
         );
@@ -387,7 +387,7 @@ const Crontab = () => {
   const [enabledCronViews, setEnabledCronViews] = useState<any[]>([]);
   const [moreMenuActive, setMoreMenuActive] = useState(false);
   const tableRef = useRef<any>();
-  const tableScrollHeight = useTableScrollHeight(tableRef)
+  const tableScrollHeight = useTableScrollHeight(tableRef);
 
   const goToScriptManager = (record: any) => {
     const cmd = record.command.split(' ') as string[];
@@ -414,10 +414,11 @@ const Crontab = () => {
   const getCrons = () => {
     setLoading(true);
     const { page, size, sorter, filters } = pageConf;
-    let url = `${config.apiPrefix
-      }crons?searchValue=${searchText}&page=${page}&size=${size}&filters=${JSON.stringify(
-        filters,
-      )}`;
+    let url = `${
+      config.apiPrefix
+    }crons?searchValue=${searchText}&page=${page}&size=${size}&filters=${JSON.stringify(
+      filters,
+    )}`;
     if (sorter && sorter.field) {
       url += `&sorter=${JSON.stringify({
         field: sorter.field,
@@ -428,6 +429,7 @@ const Crontab = () => {
       url += `&queryString=${JSON.stringify({
         filters: viewConf.filters,
         sorts: viewConf.sorts,
+        filterRelation: viewConf.filterRelation || 'and',
       })}`;
     }
     request
@@ -582,7 +584,8 @@ const Crontab = () => {
       onOk() {
         request
           .put(
-            `${config.apiPrefix}crons/${record.isDisabled === 1 ? 'enable' : 'disable'
+            `${config.apiPrefix}crons/${
+              record.isDisabled === 1 ? 'enable' : 'disable'
             }`,
             {
               data: [record.id],
@@ -625,7 +628,8 @@ const Crontab = () => {
       onOk() {
         request
           .put(
-            `${config.apiPrefix}crons/${record.isPinned === 1 ? 'unpin' : 'pin'
+            `${config.apiPrefix}crons/${
+              record.isPinned === 1 ? 'unpin' : 'pin'
             }`,
             {
               data: [record.id],
@@ -999,7 +1003,11 @@ const Crontab = () => {
       <div ref={tableRef}>
         {selectedRowIds.length > 0 && (
           <div style={{ marginBottom: 16 }}>
-            <Button type="primary" style={{ marginBottom: 5 }} onClick={delCrons}>
+            <Button
+              type="primary"
+              style={{ marginBottom: 5 }}
+              onClick={delCrons}
+            >
               批量删除
             </Button>
             <Button

src/pages/crontab/viewCreateModal.tsx

@@ -12,6 +12,7 @@ import {
 import { request } from '@/utils/http';
 import config from '@/utils/config';
 import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
+import IconFont from '@/components/iconfont';
 
 const PROPERTIES = [
   { name: '命令', value: 'command' },
@@ -42,6 +43,11 @@ const STATUS = [
   { name: '已禁用', value: 2 },
 ];
 
+enum ViewFilterRelation {
+  'and' = '且',
+  'or' = '或',
+}
+
 const ViewCreateModal = ({
   view,
   handleCancel,
@@ -53,10 +59,11 @@ const ViewCreateModal = ({
 }) => {
   const [form] = Form.useForm();
   const [loading, setLoading] = useState(false);
-  const [operationMap, setOperationMap] = useState<any>();
+  const [filterRelation, setFilterRelation] = useState<'and' | 'or'>('and');
 
   const handleOk = async (values: any) => {
     setLoading(true);
+    values.filterRelation = filterRelation;
     const method = view ? 'put' : 'post';
     try {
       const { code, data } = await request[method](
@@ -87,12 +94,7 @@ const ViewCreateModal = ({
   }, [view, visible]);
 
   const operationElement = (
-    <Select
-      style={{ width: 100 }}
-      onChange={() => {
-        setOperationMap({});
-      }}
-    >
+    <Select style={{ width: 100 }}>
       {OPERATIONS.map((x) => (
         <Select.Option key={x.name} value={x.value}>
           {x.name}
@@ -164,38 +166,48 @@ const ViewCreateModal = ({
         </Form.Item>
         <Form.List name="filters">
           {(fields, { add, remove }) => (
-            <div style={{ position: 'relative' }} className={`view-filters-container ${fields.length > 1 ? 'active' : ''}`}>
-              {
-                fields.length > 1 && (
-                  <div
+            <div
+              style={{ position: 'relative' }}
+              className={`view-filters-container ${
+                fields.length > 1 ? 'active' : ''
+              }`}
+            >
+              {fields.length > 1 && (
+                <div
+                  style={{
+                    position: 'absolute',
+                    width: 50,
+                    borderRadius: 10,
+                    border: '1px solid rgb(190, 220, 255)',
+                    borderRight: 'none',
+                    height: 56 * (fields.length - 1),
+                    top: 46,
+                    left: 15,
+                  }}
+                >
+                  <Button
+                    type="primary"
+                    size="small"
                     style={{
                       position: 'absolute',
-                      width: 50,
-                      borderRadius: 10,
-                      border: '1px solid rgb(190, 220, 255)',
-                      borderRight: 'none',
-                      height: 56 * (fields.length - 1),
-                      top: 46,
-                      left: 15
+                      top: '50%',
+                      translate: '-50% -50%',
+                      padding: '0 0 0 3px',
+                      cursor: 'pointer',
+                    }}
+                    onClick={() => {
+                      setFilterRelation(
+                        filterRelation === 'and' ? 'or' : 'and',
+                      );
                     }}
                   >
-                    <Button
-                      type="primary"
-                      size="small"
-                      style={{
-                        position: 'absolute',
-                        top: '50%',
-                        translate: '-50% -50%',
-                        padding: '0 5px',
-                      }}
-                    >
-                      <>
-                        或
-                      </>
-                    </Button>
-                  </div>
-                )
-              }
+                    <>
+                      <span>{ViewFilterRelation[filterRelation]}</span>
+                      <IconFont type="ql-icon-d-caret" />
+                    </>
+                  </Button>
+                </div>
+              )}
               <div>
                 {fields.map(({ key, name, ...restField }, index) => (
                   <Form.Item
@@ -203,9 +215,12 @@ const ViewCreateModal = ({
                     key={key}
                     style={{ marginBottom: 0 }}
                     required
-                    className='filter-item'
+                    className="filter-item"
                   >
-                    <Space className="view-create-modal-filters" align="baseline">
+                    <Space
+                      className="view-create-modal-filters"
+                      align="baseline"
+                    >
                       <Form.Item
                         {...restField}
                         name={[name, 'property']}
@@ -241,7 +256,9 @@ const ViewCreateModal = ({
                 ))}
                 <Form.Item>
                   <a
-                    onClick={() => add({ property: 'command', operation: 'Reg' })}
+                    onClick={() =>
+                      add({ property: 'command', operation: 'Reg' })
+                    }
                   >
                     <PlusOutlined />
                     新增筛选条件