From 710746809b462f3d336dbd65c6e02ad3f3b94ce8 Mon Sep 17 00:00:00 2001
From: whyour <imwhyour@gmail.com>
Date: Mon, 20 Mar 2023 23:00:13 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=88=A0=E9=99=A4=E8=A7=86?=
 =?UTF-8?q?=E5=9B=BE=E7=AD=9B=E9=80=89=E6=9D=A1=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/crontab/index.less          |   2 +-
 src/pages/crontab/viewCreateModal.tsx | 166 +++++++++++++-------------
 2 files changed, 85 insertions(+), 83 deletions(-)

diff --git a/src/pages/crontab/index.less b/src/pages/crontab/index.less
index 6e2d5598..47e103b9 100644
--- a/src/pages/crontab/index.less
+++ b/src/pages/crontab/index.less
@@ -155,7 +155,7 @@
 .view-create-modal-sorts {
   display: flex;
 
-  .ant-space-item:nth-child(2) {
+  .ant-space-item:nth-child(1) {
     flex: 1;
   }
 }
diff --git a/src/pages/crontab/viewCreateModal.tsx b/src/pages/crontab/viewCreateModal.tsx
index ac798772..27696b2c 100644
--- a/src/pages/crontab/viewCreateModal.tsx
+++ b/src/pages/crontab/viewCreateModal.tsx
@@ -70,6 +70,7 @@ const ViewCreateModal = ({
   const [form] = Form.useForm();
   const [loading, setLoading] = useState(false);
   const [filterRelation, setFilterRelation] = useState<'and' | 'or'>('and');
+  const filtersValue = Form.useWatch('filters', form);
 
   const handleOk = async (values: any) => {
     setLoading(true);
@@ -126,7 +127,7 @@ const ViewCreateModal = ({
   };
 
   const typeElement = (
-    <Select>
+    <Select style={{ width: 80 }}>
       {SORTTYPES.map((x) => (
         <Select.Option key={x.name} value={x.value}>
           {x.name}
@@ -204,7 +205,7 @@ const ViewCreateModal = ({
                       position: 'absolute',
                       top: '50%',
                       translate: '-50% -50%',
-                      padding: '0 0 0 3px',
+                      padding: '0 3px',
                       cursor: 'pointer',
                     }}
                     onClick={() => {
@@ -221,9 +222,9 @@ const ViewCreateModal = ({
                 </div>
               )}
               <div>
-                {fields.map(({ key, name, ...restField }, index) => (
+                {fields.map(({ key, name, ...restField }) => (
                   <Form.Item
-                    label={index === 0 ? '筛选条件' : ''}
+                    label={name === 0 ? '筛选条件' : ''}
                     key={key}
                     style={{ marginBottom: 0 }}
                     required
@@ -248,55 +249,18 @@ const ViewCreateModal = ({
                         {operationElement}
                       </Form.Item>
                       <Form.Item
-                        noStyle
-                        shouldUpdate={(prevValues, nextValues) => {
-                          const preOperation =
-                            EOperation[
-                              get(prevValues, ['filters', name, 'operation'])
-                            ];
-                          const nextOperation =
-                            EOperation[
-                              get(nextValues, ['filters', name, 'operation'])
-                            ];
-                          const flag = preOperation !== nextOperation;
-                          if (flag) {
-                            form.setFieldValue(
-                              ['filters', name, 'value'],
-                              nextOperation === 'select' ? [] : '',
-                            );
-                          }
-                          return flag;
-                        }}
+                        {...restField}
+                        name={[name, 'value']}
+                        rules={[{ required: true, message: '请输入内容' }]}
                       >
-                        {() => {
-                          const property = form.getFieldValue([
-                            'filters',
-                            index,
-                            'property',
-                          ]) as 'status';
-                          const operate = form.getFieldValue([
-                            'filters',
-                            name,
-                            'operation',
-                          ]);
-                          return (
-                            <Form.Item
-                              {...restField}
-                              name={[name, 'value']}
-                              rules={[
-                                { required: true, message: '请输入内容' },
-                              ]}
-                            >
-                              {EOperation[operate] === 'select' ? (
-                                statusElement(property)
-                              ) : (
-                                <Input placeholder="请输入内容" />
-                              )}
-                            </Form.Item>
-                          );
-                        }}
+                        {EOperation[filtersValue[name]['operation']] ===
+                        'select' ? (
+                          statusElement(filtersValue[name]['property'])
+                        ) : (
+                          <Input placeholder="请输入内容" />
+                        )}
                       </Form.Item>
-                      {index !== 0 && (
+                      {name !== 0 && (
                         <MinusCircleOutlined onClick={() => remove(name)} />
                       )}
                     </Space>
@@ -318,39 +282,77 @@ const ViewCreateModal = ({
         </Form.List>
         <Form.List name="sorts">
           {(fields, { add, remove }) => (
-            <>
-              {fields.map(({ key, name, ...restField }, index) => (
-                <Form.Item
-                  label={index === 0 ? '排序方式' : ''}
-                  key={key}
-                  style={{ marginBottom: 0 }}
+            <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,
+                  }}
                 >
-                  <Space className="view-create-modal-sorts" align="baseline">
-                    <Form.Item
-                      {...restField}
-                      name={[name, 'property']}
-                      rules={[{ required: true }]}
-                    >
-                      {propertyElement(PROPERTIES, { width: 240 })}
-                    </Form.Item>
-                    <Form.Item
-                      {...restField}
-                      name={[name, 'type']}
-                      rules={[{ required: true }]}
-                    >
-                      {typeElement}
-                    </Form.Item>
-                    <MinusCircleOutlined onClick={() => remove(name)} />
-                  </Space>
+                  <Button
+                    type="primary"
+                    size="small"
+                    style={{
+                      position: 'absolute',
+                      top: '50%',
+                      translate: '-50% -50%',
+                      padding: '0 3px',
+                      cursor: 'pointer',
+                    }}
+                  >
+                    <>
+                      <span>{ViewFilterRelation[filterRelation]}</span>
+                    </>
+                  </Button>
+                </div>
+              )}
+              <div>
+                {fields.map(({ key, name, ...restField }) => (
+                  <Form.Item
+                    label={name === 0 ? '排序方式' : ''}
+                    key={key}
+                    style={{ marginBottom: 0 }}
+                    className="filter-item"
+                  >
+                    <Space className="view-create-modal-sorts" 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>
+                      <MinusCircleOutlined onClick={() => remove(name)} />
+                    </Space>
+                  </Form.Item>
+                ))}
+                <Form.Item>
+                  <a onClick={() => add({ property: 'command', type: 'ASC' })}>
+                    <PlusOutlined />
+                    新增排序方式
+                  </a>
                 </Form.Item>
-              ))}
-              <Form.Item>
-                <a onClick={() => add({ property: 'command', type: 'ASC' })}>
-                  <PlusOutlined />
-                  新增排序方式
-                </a>
-              </Form.Item>
-            </>
+              </div>
+            </div>
           )}
         </Form.List>
       </Form>