open-source/qinglong
1
0
Fork 0
mirror of https://github.com/whyour/qinglong.git synced 2025-05-25 08:26: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;
} }
} }

102
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
@ -247,56 +248,19 @@ const ViewCreateModal = ({
> >
{operationElement} {operationElement}
</Form.Item> </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;
}}
>
{() => {
const property = form.getFieldValue([
'filters',
index,
'property',
]) as 'status';
const operate = form.getFieldValue([
'filters',
name,
'operation',
]);
return (
<Form.Item <Form.Item
{...restField} {...restField}
name={[name, 'value']} name={[name, 'value']}
rules={[ rules={[{ required: true, message: '请输入内容' }]}
{ required: true, message: '请输入内容' },
]}
> >
{EOperation[operate] === 'select' ? ( {EOperation[filtersValue[name]['operation']] ===
statusElement(property) 'select' ? (
statusElement(filtersValue[name]['property'])
) : ( ) : (
<Input placeholder="请输入内容" /> <Input placeholder="请输入内容" />
)} )}
</Form.Item> </Form.Item>
); {name !== 0 && (
}}
</Form.Item>
{index !== 0 && (
<MinusCircleOutlined onClick={() => remove(name)} /> <MinusCircleOutlined onClick={() => remove(name)} />
)} )}
</Space> </Space>
@ -318,12 +282,49 @@ const ViewCreateModal = ({
</Form.List> </Form.List>
<Form.List name="sorts"> <Form.List name="sorts">
{(fields, { add, remove }) => ( {(fields, { add, remove }) => (
<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,
}}
>
<Button
type="primary"
size="small"
style={{
position: 'absolute',
top: '50%',
translate: '-50% -50%',
padding: '0 3px',
cursor: 'pointer',
}}
>
<> <>
{fields.map(({ key, name, ...restField }, index) => ( <span>{ViewFilterRelation[filterRelation]}</span>
</>
</Button>
</div>
)}
<div>
{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 }}
className="filter-item"
> >
<Space className="view-create-modal-sorts" align="baseline"> <Space className="view-create-modal-sorts" align="baseline">
<Form.Item <Form.Item
@ -331,7 +332,7 @@ const ViewCreateModal = ({
name={[name, 'property']} name={[name, 'property']}
rules={[{ required: true }]} rules={[{ required: true }]}
> >
{propertyElement(PROPERTIES, { width: 240 })} {propertyElement(PROPERTIES)}
</Form.Item> </Form.Item>
<Form.Item <Form.Item
{...restField} {...restField}
@ -350,7 +351,8 @@ const ViewCreateModal = ({
新增排序方式 新增排序方式
</a> </a>
</Form.Item> </Form.Item>
</> </div>
</div>
)} )}
</Form.List> </Form.List>
</Form> </Form>