fix(plugin-workflow): fix some ux (#313)
* fix(plugin-workflow): fix some ux * style(plugin-workflow): optimize node remove button style
This commit is contained in:
parent
f45deaa351
commit
fefa1fc0c9
@ -263,6 +263,14 @@ export function Operand({
|
|||||||
display: flex;
|
display: flex;
|
||||||
gap: .5em;
|
gap: .5em;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
|
.ant-select,
|
||||||
|
.ant-cascader-picker,
|
||||||
|
.ant-picker,
|
||||||
|
.ant-input-number,
|
||||||
|
.ant-input-affix-wrapper{
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
`}>
|
`}>
|
||||||
<Cascader
|
<Cascader
|
||||||
allowClear={false}
|
allowClear={false}
|
||||||
@ -378,28 +386,24 @@ export const CollectionFieldset = observer(({ value, onChange, useProps }: any)
|
|||||||
<fieldset className={css`
|
<fieldset className={css`
|
||||||
margin-top: .5em;
|
margin-top: .5em;
|
||||||
|
|
||||||
.ant-formily-item{
|
> .ant-formily-item{
|
||||||
.ant-formily-item-label{
|
flex-direction: column;
|
||||||
line-height: 32px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ant-select,
|
> .ant-formily-item-label{
|
||||||
.ant-cascader-picker,
|
line-height: 32px;
|
||||||
.ant-picker,
|
|
||||||
.ant-input-number,
|
|
||||||
.ant-input-affix-wrapper{
|
|
||||||
width: auto;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
`}>
|
`}>
|
||||||
{fields.length
|
{fields.length
|
||||||
? fields.map(field => {
|
? fields
|
||||||
|
.filter(field => !field.hidden)
|
||||||
|
.map(field => {
|
||||||
const operand = typeof value[field.name] === 'string'
|
const operand = typeof value[field.name] === 'string'
|
||||||
? parseStringValue(value[field.name], VTypes)
|
? parseStringValue(value[field.name], VTypes)
|
||||||
: { type: 'constant', value: value[field.name] };
|
: { type: 'constant', value: value[field.name] };
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<FormItem label={compile(field.uiSchema?.title)}>
|
<FormItem label={compile(field.uiSchema?.title ?? field.name)} labelAlign="left">
|
||||||
<VariableTypesContext.Provider value={VTypes}>
|
<VariableTypesContext.Provider value={VTypes}>
|
||||||
<Operand
|
<Operand
|
||||||
value={operand}
|
value={operand}
|
||||||
|
@ -125,19 +125,26 @@ export function RemoveButton() {
|
|||||||
onNodeRemoved(node);
|
onNodeRemoved(node);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!nodes.find(item => item.upstream === current && item.branchIndex != null)) {
|
const hasBranches = !nodes.find(item => item.upstream === current && item.branchIndex != null);
|
||||||
return onOk();
|
const message = hasBranches
|
||||||
}
|
? '确定删除该节点吗?'
|
||||||
|
: '节点包含分支,将同时删除其所有分支下的子节点,确定继续?';
|
||||||
|
|
||||||
Modal.confirm({
|
Modal.confirm({
|
||||||
title: '删除分支',
|
title: '删除节点',
|
||||||
content: '节点包含分支,将同时删除其所有分支下的子节点,确定继续?',
|
content: message,
|
||||||
onOk
|
onOk
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Button type="text" shape="circle" icon={<DeleteOutlined />} onClick={onRemove} />
|
<Button
|
||||||
|
type="text"
|
||||||
|
shape="circle"
|
||||||
|
icon={<DeleteOutlined />}
|
||||||
|
onClick={onRemove}
|
||||||
|
className="workflow-node-remove-button"
|
||||||
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -193,6 +193,7 @@ export const workflowSchema: ISchema = {
|
|||||||
type: 'boolean',
|
type: 'boolean',
|
||||||
'x-component': 'CollectionField',
|
'x-component': 'CollectionField',
|
||||||
'x-read-pretty': true,
|
'x-read-pretty': true,
|
||||||
|
default: false
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@ -213,22 +214,22 @@ export const workflowSchema: ISchema = {
|
|||||||
title: '配置流程',
|
title: '配置流程',
|
||||||
'x-component': 'WorkflowLink'
|
'x-component': 'WorkflowLink'
|
||||||
},
|
},
|
||||||
executions: {
|
// executions: {
|
||||||
type: 'void',
|
// type: 'void',
|
||||||
title: '执行历史',
|
// title: '执行历史',
|
||||||
'x-component': 'Action.Link',
|
// 'x-component': 'Action.Link',
|
||||||
'x-component-props': {
|
// 'x-component-props': {
|
||||||
type: 'primary',
|
// type: 'primary',
|
||||||
},
|
// },
|
||||||
properties: {
|
// properties: {
|
||||||
drawer: {
|
// drawer: {
|
||||||
type: 'void',
|
// type: 'void',
|
||||||
title: '执行历史',
|
// title: '执行历史',
|
||||||
'x-component': 'Action.Drawer',
|
// 'x-component': 'Action.Drawer',
|
||||||
properties: executionSchema
|
// properties: executionSchema
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
},
|
// },
|
||||||
update: {
|
update: {
|
||||||
type: 'void',
|
type: 'void',
|
||||||
title: '{{ t("Edit") }}',
|
title: '{{ t("Edit") }}',
|
||||||
@ -279,18 +280,18 @@ export const workflowSchema: ISchema = {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
delete: {
|
// delete: {
|
||||||
type: 'void',
|
// type: 'void',
|
||||||
title: '{{ t("Delete") }}',
|
// title: '{{ t("Delete") }}',
|
||||||
'x-component': 'Action.Link',
|
// 'x-component': 'Action.Link',
|
||||||
'x-component-props': {
|
// 'x-component-props': {
|
||||||
confirm: {
|
// confirm: {
|
||||||
title: "{{t('Delete record')}}",
|
// title: "{{t('Delete record')}}",
|
||||||
content: "{{t('Are you sure you want to delete it?')}}",
|
// content: "{{t('Are you sure you want to delete it?')}}",
|
||||||
},
|
// },
|
||||||
useAction: '{{ cm.useDestroyActionAndRefreshCM }}',
|
// useAction: '{{ cm.useDestroyActionAndRefreshCM }}',
|
||||||
},
|
// },
|
||||||
},
|
// },
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -108,12 +108,29 @@ export const nodeCardClass = css`
|
|||||||
background: #fff;
|
background: #fff;
|
||||||
padding: 1em;
|
padding: 1em;
|
||||||
box-shadow: 0 .25em .5em rgba(0, 0, 0, .1);
|
box-shadow: 0 .25em .5em rgba(0, 0, 0, .1);
|
||||||
|
|
||||||
|
.workflow-node-remove-button{
|
||||||
|
position: absolute;
|
||||||
|
right: -.5em;
|
||||||
|
top: -.5em;
|
||||||
|
color: #999;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity .3s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover{
|
||||||
|
.workflow-node-remove-button{
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export const nodeHeaderClass = css`
|
export const nodeHeaderClass = css`
|
||||||
display: flex;
|
position: relative;
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export const nodeTitleClass = css`
|
export const nodeTitleClass = css`
|
||||||
|
Loading…
Reference in New Issue
Block a user