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

修复删除视图筛选条件

Browse Source
This commit is contained in:
whyour 2023-03-20 23:00:13 +08:00
parent 8a225e9beb
commit 710746809b
2 changed files with 85 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -155,7 +155,7 @@
.view-create-modal-sorts { .view-create-modal-sorts {
display: flex; display: flex;
.ant-space-item:nth-child(2) { .ant-space-item:nth-child(1) {
flex: 1; flex: 1;
} }
} }

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

@ -70,6 +70,7 @@ const ViewCreateModal = ({
const [form] = Form.useForm(); const [form] = Form.useForm();
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [filterRelation, setFilterRelation] = useState<'and' | 'or'>('and'); const [filterRelation, setFilterRelation] = useState<'and' | 'or'>('and');
const filtersValue = Form.useWatch('filters', form);
const handleOk = async (values: any) => { const handleOk = async (values: any) => {
setLoading(true); setLoading(true);
@ -126,7 +127,7 @@ const ViewCreateModal = ({
}; };
const typeElement = ( const typeElement = (
<Select> <Select style={{ width: 80 }}>
{SORTTYPES.map((x) => ( {SORTTYPES.map((x) => (
<Select.Option key={x.name} value={x.value}> <Select.Option key={x.name} value={x.value}>
{x.name} {x.name}
@ -204,7 +205,7 @@ const ViewCreateModal = ({
position: 'absolute', position: 'absolute',
top: '50%', top: '50%',
translate: '-50% -50%', translate: '-50% -50%',
padding: '0 0 0 3px', padding: '0 3px',
cursor: 'pointer', cursor: 'pointer',
}} }}
onClick={() => { onClick={() => {
@ -221,9 +222,9 @@ const ViewCreateModal = ({
</div> </div>
)} )}
<div> <div>
{fields.map(({ key, name, ...restField }, index) => ( {fields.map(({ key, name, ...restField }) => (
<Form.Item <Form.Item
label={index === 0 ? '筛选条件' : ''} label={name === 0 ? '筛选条件' : ''}
key={key} key={key}
style={{ marginBottom: 0 }} style={{ marginBottom: 0 }}
required required
@ -248,55 +249,18 @@ const ViewCreateModal = ({
{operationElement} {operationElement}
</Form.Item> </Form.Item>
<Form.Item <Form.Item
noStyle {...restField}
shouldUpdate={(prevValues, nextValues) => { name={[name, 'value']}
const preOperation = rules={[{ required: true, message: '请输入内容' }]}
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;
}}
> >
{() => { {EOperation[filtersValue[name]['operation']] ===
const property = form.getFieldValue([ 'select' ? (
'filters', statusElement(filtersValue[name]['property'])
index, ) : (
'property', <Input placeholder="请输入内容" />
]) 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>
);
}}
</Form.Item> </Form.Item>
{index !== 0 && ( {name !== 0 && (
<MinusCircleOutlined onClick={() => remove(name)} /> <MinusCircleOutlined onClick={() => remove(name)} />
)} )}
</Space> </Space>
@ -318,39 +282,77 @@ const ViewCreateModal = ({
</Form.List> </Form.List>
<Form.List name="sorts"> <Form.List name="sorts">
{(fields, { add, remove }) => ( {(fields, { add, remove }) => (
<> <div
{fields.map(({ key, name, ...restField }, index) => ( style={{ position: 'relative' }}
<Form.Item className={`view-filters-container ${
label={index === 0 ? '排序方式' : ''} fields.length > 1 ? 'active' : ''
key={key} }`}
style={{ marginBottom: 0 }} >
{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"> <Button
<Form.Item type="primary"
{...restField} size="small"
name={[name, 'property']} style={{
rules={[{ required: true }]} position: 'absolute',
> top: '50%',
{propertyElement(PROPERTIES, { width: 240 })} translate: '-50% -50%',
</Form.Item> padding: '0 3px',
<Form.Item cursor: 'pointer',
{...restField} }}
name={[name, 'type']} >
rules={[{ required: true }]} <>
> <span>{ViewFilterRelation[filterRelation]}</span>
{typeElement} </>
</Form.Item> </Button>
<MinusCircleOutlined onClick={() => remove(name)} /> </div>
</Space> )}
<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>
))} </div>
<Form.Item> </div>
<a onClick={() => add({ property: 'command', type: 'ASC' })}>
<PlusOutlined />
新增排序方式
</a>
</Form.Item>
</>
)} )}
</Form.List> </Form.List>
</Form> </Form>