任务视图增加状态筛选

src/pages/crontab/viewCreateModal.tsx

@@ -17,19 +17,31 @@ const PROPERTIES = [
   { name: '命令', value: 'command' },
   { name: '名称', value: 'name' },
   { name: '定时规则', value: 'schedule' },
+  { name: '状态', value: 'status' },
 ];
 
 const OPERATIONS = [
   { name: '包含', value: 'Reg' },
   { name: '不包含', value: 'NotReg' },
-  // { name: '属于', value: 'In' },
-  // { name: '不属于', value: 'Nin' },
+  { name: '属于', value: 'In' },
+  { name: '不属于', value: 'Nin' },
   // { name: '等于', value: 'Eq' },
   // { name: '不等于', value: 'Ne' },
   // { name: '为空', value: 'IsNull' },
   // { name: '不为空', value: 'NotNull' },
 ];
 
+const SORTTYPES = [
+  { name: '顺序', value: 'ASC' },
+  { name: '倒序', value: 'DESC' },
+];
+
+const STATUS = [
+  { name: '运行中', value: 0 },
+  { name: '空闲中', value: 1 },
+  { name: '已禁用', value: 2 },
+];
+
 const ViewCreateModal = ({
   view,
   handleCancel,
@@ -37,10 +49,11 @@ const ViewCreateModal = ({
 }: {
   view?: any;
   visible: boolean;
-  handleCancel: (param?: string) => void;
+  handleCancel: (param?: any) => void;
 }) => {
   const [form] = Form.useForm();
   const [loading, setLoading] = useState(false);
+  const [operationMap, setOperationMap] = useState<any>();
 
   const handleOk = async (values: any) => {
     setLoading(true);
@@ -49,7 +62,7 @@ const ViewCreateModal = ({
       const { code, data } = await request[method](
         `${config.apiPrefix}crons/views`,
         {
-          data: values,
+          data: view ? { ...values, id: view.id } : values,
         },
       );
       if (code !== 200) {
@@ -63,14 +76,19 @@ const ViewCreateModal = ({
   };
 
   useEffect(() => {
-    form.resetFields();
-    form.setFieldsValue({
-      filters: [{ property: 'command', operation: 'Reg' }],
-    });
+    form.setFieldsValue(view || {});
+    if (!view) {
+      form.resetFields();
+    }
   }, [view, visible]);
 
   const operationElement = (
-    <Select style={{ width: 80 }}>
+    <Select
+      style={{ width: 100 }}
+      onChange={() => {
+        setOperationMap({});
+      }}
+    >
       {OPERATIONS.map((x) => (
         <Select.Option key={x.name} value={x.value}>
           {x.name}
@@ -79,9 +97,31 @@ const ViewCreateModal = ({
     </Select>
   );
 
-  const propertyElement = (
-    <Select style={{ width: 100 }}>
-      {PROPERTIES.map((x) => (
+  const propertyElement = (props: any) => {
+    return (
+      <Select style={{ width: 120 }}>
+        {props.map((x) => (
+          <Select.Option key={x.name} value={x.value}>
+            {x.name}
+          </Select.Option>
+        ))}
+      </Select>
+    );
+  };
+
+  const typeElement = (
+    <Select style={{ width: 120 }}>
+      {SORTTYPES.map((x) => (
+        <Select.Option key={x.name} value={x.value}>
+          {x.name}
+        </Select.Option>
+      ))}
+    </Select>
+  );
+
+  const statusElement = (
+    <Select mode="multiple" allowClear placeholder="请选择状态">
+      {STATUS.map((x) => (
         <Select.Option key={x.name} value={x.value}>
           {x.name}
         </Select.Option>
@@ -110,7 +150,7 @@ const ViewCreateModal = ({
       onCancel={() => handleCancel()}
       confirmLoading={loading}
     >
-      <Form form={form} layout="vertical" name="env_modal" initialValues={view}>
+      <Form form={form} layout="vertical" name="env_modal">
         <Form.Item
           name="name"
           label="视图名称"
@@ -134,7 +174,7 @@ const ViewCreateModal = ({
                       name={[name, 'property']}
                       rules={[{ required: true }]}
                     >
-                      {propertyElement}
+                      {propertyElement(PROPERTIES)}
                     </Form.Item>
                     <Form.Item
                       {...restField}
@@ -148,7 +188,13 @@ const ViewCreateModal = ({
                       name={[name, 'value']}
                       rules={[{ required: true, message: '请输入内容' }]}
                     >
-                      <Input />
+                      {['In', 'Nin'].includes(
+                        form.getFieldValue(['filters', index, 'operation']),
+                      ) ? (
+                        statusElement
+                      ) : (
+                        <Input placeholder="请输入内容" />
+                      )}
                     </Form.Item>
                     {index !== 0 && (
                       <MinusCircleOutlined onClick={() => remove(name)} />
@@ -159,9 +205,7 @@ const ViewCreateModal = ({
               <Form.Item>
                 <a
                   href="#"
-                  onClick={() =>
-                    add({ property: 'command', operation: 'Reg' })
-                  }
+                  onClick={() => add({ property: 'command', operation: 'Reg' })}
                 >
                   <PlusOutlined />
                   新增筛选条件
@@ -170,6 +214,49 @@ const ViewCreateModal = ({
             </>
           )}
         </Form.List>
+        <Form.List name="sorts">
+          {(fields, { add, remove }) => (
+            <>
+              {fields.map(({ key, name, ...restField }, index) => (
+                <Form.Item
+                  label={index === 0 ? '排序方式' : ''}
+                  required={true}
+                  key={key}
+                  style={{ marginBottom: 0 }}
+                >
+                  <Space className="view-create-modal-filters" align="baseline">
+                    <Form.Item
+                      {...restField}
+                      name={[name, 'property']}
+                      rules={[{ required: true }]}
+                    >
+                      {propertyElement(PROPERTIES)}
+                    </Form.Item>
+                    <Form.Item
+                      {...restField}
+                      name={[name, 'type']}
+                      rules={[{ required: true }]}
+                    >
+                      {typeElement}
+                    </Form.Item>
+                    {index !== 0 && (
+                      <MinusCircleOutlined onClick={() => remove(name)} />
+                    )}
+                  </Space>
+                </Form.Item>
+              ))}
+              <Form.Item>
+                <a
+                  href="#"
+                  onClick={() => add({ property: 'command', operation: 'ASC' })}
+                >
+                  <PlusOutlined />
+                  新增排序方式
+                </a>
+              </Form.Item>
+            </>
+          )}
+        </Form.List>
       </Form>
     </Modal>
   );