open-source/qinglong
1
0
Fork 0
mirror of https://github.com/whyour/qinglong.git synced 2025-05-23 23:06:06 +08:00
Code Issues Packages Projects Releases Wiki Activity

任务视图筛选条件增加条件关系

Browse Source
This commit is contained in:
whyour 2022-11-09 20:43:22 +08:00
parent 5efc3d2228
commit c72abd29ec
2 changed files with 88 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/pages/crontab/index.less
View File

@ -176,3 +176,9 @@ tr.drop-over-upward td {
padding-top: 10px; padding-top: 10px;
} }
} }
.view-filters-container.active {
.filter-item > div > .ant-form-item-control {
padding-left: 40px;
}
}

130
src/pages/crontab/viewCreateModal.tsx
View File

@ -164,57 +164,91 @@ const ViewCreateModal = ({
</Form.Item> </Form.Item>
<Form.List name="filters"> <Form.List name="filters">
{(fields, { add, remove }) => ( {(fields, { add, remove }) => (
<> <div style={{ position: 'relative' }} className={`view-filters-container ${fields.length > 1 ? 'active' : ''}`}>
{fields.map(({ key, name, ...restField }, index) => ( {
<Form.Item fields.length > 1 && (
label={index === 0 ? '筛选条件' : ''} <div
key={key} style={{
style={{ marginBottom: 0 }} position: 'absolute',
required width: 50,
> borderRadius: 10,
<Space className="view-create-modal-filters" align="baseline"> border: '1px solid rgb(190, 220, 255)',
<Form.Item borderRight: 'none',
{...restField} height: 56 * (fields.length - 1),
name={[name, 'property']} top: 46,
rules={[{ required: true }]} left: 15
}}
>
<Button
type="primary"
size="small"
style={{
position: 'absolute',
top: '50%',
translate: '-50% -50%',
padding: '0 5px',
}}
> >
{propertyElement(PROPERTIES, { width: 120 })} <>
</Form.Item> 或
<Form.Item </>
{...restField} </Button>
name={[name, 'operation']} </div>
rules={[{ required: true }]} )
> }
{operationElement} <div>
</Form.Item> {fields.map(({ key, name, ...restField }, index) => (
<Form.Item <Form.Item
{...restField} label={index === 0 ? '筛选条件' : ''}
name={[name, 'value']} key={key}
rules={[{ required: true, message: '请输入内容' }]} style={{ marginBottom: 0 }}
> required
{['In', 'Nin'].includes( className='filter-item'
form.getFieldValue(['filters', index, 'operation']), >
) ? ( <Space className="view-create-modal-filters" align="baseline">
statusElement <Form.Item
) : ( {...restField}
<Input placeholder="请输入内容" /> name={[name, 'property']}
rules={[{ required: true }]}
>
{propertyElement(PROPERTIES, { width: 120 })}
</Form.Item>
<Form.Item
{...restField}
name={[name, 'operation']}
rules={[{ required: true }]}
>
{operationElement}
</Form.Item>
<Form.Item
{...restField}
name={[name, 'value']}
rules={[{ required: true, message: '请输入内容' }]}
>
{['In', 'Nin'].includes(
form.getFieldValue(['filters', index, 'operation']),
) ? (
statusElement
) : (
<Input placeholder="请输入内容" />
)}
</Form.Item>
{index !== 0 && (
<MinusCircleOutlined onClick={() => remove(name)} />
)} )}
</Form.Item> </Space>
{index !== 0 && ( </Form.Item>
<MinusCircleOutlined onClick={() => remove(name)} /> ))}
)} <Form.Item>
</Space> <a
onClick={() => add({ property: 'command', operation: 'Reg' })}
>
<PlusOutlined />
新增筛选条件
</a>
</Form.Item> </Form.Item>
))} </div>
<Form.Item> </div>
<a
onClick={() => add({ property: 'command', operation: 'Reg' })}
>
<PlusOutlined />
新增筛选条件
</a>
</Form.Item>
</>
)} )}
</Form.List> </Form.List>
<Form.List name="sorts"> <Form.List name="sorts">