open-source/qinglong
1
0
Fork 0
mirror of https://github.com/whyour/qinglong.git synced 2025-05-24 15:43:24 +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 {
display: flex;
.ant-space-item:nth-child(2) {
.ant-space-item:nth-child(1) {
flex: 1;
}
}

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

@ -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>