Browse Source
* add dag menu * add dag menu click event * workflow online edit not allowed3.0.0/version-upgrade
Devosend
3 years ago
committed by
GitHub
11 changed files with 395 additions and 10 deletions
@ -0,0 +1,163 @@
|
||||
/* |
||||
* Licensed to the Apache Software Foundation (ASF) under one or more |
||||
* contributor license agreements. See the NOTICE file distributed with |
||||
* this work for additional information regarding copyright ownership. |
||||
* The ASF licenses this file to You under the Apache License, Version 2.0 |
||||
* (the "License"); you may not use this file except in compliance with |
||||
* the License. You may obtain a copy of the License at |
||||
* |
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
* |
||||
* Unless required by applicable law or agreed to in writing, software |
||||
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
* See the License for the specific language governing permissions and |
||||
* limitations under the License. |
||||
*/ |
||||
|
||||
import { genTaskCodeList } from '@/service/modules/task-definition' |
||||
import type { Cell } from '@antv/x6' |
||||
import { |
||||
defineComponent, |
||||
onMounted, |
||||
PropType, |
||||
inject, |
||||
ref, |
||||
computed |
||||
} from 'vue' |
||||
import { useI18n } from 'vue-i18n' |
||||
import { useRoute } from 'vue-router' |
||||
import styles from './menu.module.scss' |
||||
import { uuid } from '@/utils/common' |
||||
|
||||
const props = { |
||||
cell: { |
||||
type: Object as PropType<Cell>, |
||||
require: true |
||||
}, |
||||
visible: { |
||||
type: Boolean as PropType<boolean>, |
||||
default: true |
||||
}, |
||||
left: { |
||||
type: Number as PropType<number>, |
||||
default: 0 |
||||
}, |
||||
top: { |
||||
type: Number as PropType<number>, |
||||
default: 0 |
||||
}, |
||||
releaseState: { |
||||
type: String as PropType<string>, |
||||
default: 'OFFLINE' |
||||
} |
||||
} |
||||
|
||||
export default defineComponent({ |
||||
name: 'dag-context-menu', |
||||
props, |
||||
emits: ['hide', 'start', 'edit', 'copyTask', 'removeTasks'], |
||||
setup(props, ctx) { |
||||
const graph = inject('graph', ref()) |
||||
const route = useRoute() |
||||
const projectCode = Number(route.params.projectCode) |
||||
|
||||
const startAvailable = computed( |
||||
() => |
||||
route.name === 'workflow-definition-detail' && |
||||
props.releaseState !== 'NOT_RELEASE' |
||||
) |
||||
|
||||
const hide = () => { |
||||
ctx.emit('hide', false) |
||||
} |
||||
|
||||
const startRunning = () => { |
||||
ctx.emit('start') |
||||
} |
||||
|
||||
const handleEdit = () => { |
||||
ctx.emit('edit', Number(props.cell?.id)) |
||||
} |
||||
|
||||
const handleCopy = () => { |
||||
const genNums = 1 |
||||
const type = props.cell?.data.taskType |
||||
const taskName = uuid(props.cell?.data.taskName + '_') |
||||
const targetCode = Number(props.cell?.id) |
||||
|
||||
genTaskCodeList(genNums, projectCode).then((res) => { |
||||
const [code] = res |
||||
ctx.emit('copyTask', taskName, code, targetCode, type, { |
||||
x: props.left + 100, |
||||
y: props.top + 100 |
||||
}) |
||||
}) |
||||
} |
||||
|
||||
const handleDelete = () => { |
||||
graph.value?.removeCell(props.cell) |
||||
ctx.emit('removeTasks', [Number(props.cell?.id)]) |
||||
} |
||||
|
||||
onMounted(() => { |
||||
document.addEventListener('click', () => { |
||||
hide() |
||||
}) |
||||
}) |
||||
|
||||
return { |
||||
startAvailable, |
||||
startRunning, |
||||
handleEdit, |
||||
handleCopy, |
||||
handleDelete |
||||
} |
||||
}, |
||||
render() { |
||||
const { t } = useI18n() |
||||
|
||||
return ( |
||||
this.visible && ( |
||||
<div |
||||
class={styles['dag-context-menu']} |
||||
style={{ left: `${this.left}px`, top: `${this.top}px` }} |
||||
> |
||||
<div |
||||
class={`${styles['menu-item']} ${ |
||||
!this.startAvailable ? styles['disabled'] : '' |
||||
} `}
|
||||
onClick={this.startRunning} |
||||
> |
||||
{t('project.node.start')} |
||||
</div> |
||||
<div |
||||
class={`${styles['menu-item']} ${ |
||||
this.releaseState === 'ONLINE' ? styles['disabled'] : '' |
||||
} `}
|
||||
onClick={this.handleEdit} |
||||
> |
||||
{t('project.node.edit')} |
||||
</div> |
||||
<div |
||||
class={`${styles['menu-item']} ${ |
||||
this.releaseState === 'ONLINE' ? styles['disabled'] : '' |
||||
} `}
|
||||
onClick={this.handleCopy} |
||||
> |
||||
{t('project.node.copy')} |
||||
</div> |
||||
<div |
||||
class={`${styles['menu-item']} ${ |
||||
this.releaseState === 'ONLINE' ? styles['disabled'] : '' |
||||
} `}
|
||||
onClick={this.handleDelete} |
||||
> |
||||
{t('project.node.delete')} |
||||
</div> |
||||
{/* TODO: view log */} |
||||
</div> |
||||
) |
||||
) |
||||
} |
||||
}) |
||||
@ -0,0 +1,43 @@
|
||||
/* |
||||
* Licensed to the Apache Software Foundation (ASF) under one or more |
||||
* contributor license agreements. See the NOTICE file distributed with |
||||
* this work for additional information regarding copyright ownership. |
||||
* The ASF licenses this file to You under the Apache License, Version 2.0 |
||||
* (the "License"); you may not use this file except in compliance with |
||||
* the License. You may obtain a copy of the License at |
||||
* |
||||
* http://www.apache.org/licenses/LICENSE-2.0 |
||||
* |
||||
* Unless required by applicable law or agreed to in writing, software |
||||
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
* See the License for the specific language governing permissions and |
||||
* limitations under the License. |
||||
*/ |
||||
|
||||
.dag-context-menu{ |
||||
position: fixed; |
||||
left: 0; |
||||
top: 0; |
||||
width: 100px; |
||||
background-color: #ffffff; |
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.12); |
||||
|
||||
.menu-item{ |
||||
padding: 5px 10px; |
||||
border-bottom: solid 1px #f2f3f7; |
||||
cursor: pointer; |
||||
color: rgb(89, 89, 89); |
||||
font-size: 12px; |
||||
|
||||
&:hover:not(.disabled){ |
||||
color: #262626; |
||||
background-color: #f5f5f5; |
||||
} |
||||
|
||||
&.disabled{ |
||||
cursor: not-allowed; |
||||
color: rgba(89, 89, 89, .4); |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,75 @@
|
||||
/* |
||||
* Licensed to the Apache Software Foundation (ASF) under one or more |
||||
* contributor license agreements. See the NOTICE file distributed with |
||||
* this work for additional information regarding copyright ownership. |
||||
* The ASF licenses this file to You under the Apache License, Version 2.0 |
||||
* (the "License"); you may not use this file except in compliance with |
||||
* the License. You may obtain a copy of the License at |
||||
* |
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
* |
||||
* Unless required by applicable law or agreed to in writing, software |
||||
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
* See the License for the specific language governing permissions and |
||||
* limitations under the License. |
||||
*/ |
||||
|
||||
import type { Ref } from 'vue' |
||||
import { onMounted, ref } from 'vue' |
||||
import type { Graph, Cell } from '@antv/x6' |
||||
|
||||
interface Options { |
||||
graph: Ref<Graph | undefined> |
||||
} |
||||
|
||||
/** |
||||
* Get position of the right-clicked Cell. |
||||
*/ |
||||
export function useNodeMenu(options: Options) { |
||||
const { graph } = options |
||||
const startModalShow = ref(false) |
||||
const menuVisible = ref(false) |
||||
const pageX = ref() |
||||
const pageY = ref() |
||||
const menuCell = ref<Cell>() |
||||
|
||||
const menuHide = () => { |
||||
menuVisible.value = false |
||||
|
||||
// unlock scroller
|
||||
graph.value?.unlockScroller() |
||||
} |
||||
|
||||
const menuStart = () => { |
||||
startModalShow.value = true |
||||
} |
||||
|
||||
onMounted(() => { |
||||
if (graph.value) { |
||||
// contextmenu
|
||||
graph.value.on('node:contextmenu', ({ cell, x, y }) => { |
||||
menuCell.value = cell |
||||
const data = graph.value?.localToPage(x, y) |
||||
pageX.value = data?.x |
||||
pageY.value = data?.y |
||||
|
||||
// show menu
|
||||
menuVisible.value = true |
||||
|
||||
// lock scroller
|
||||
graph.value?.lockScroller() |
||||
}) |
||||
} |
||||
}) |
||||
|
||||
return { |
||||
pageX, |
||||
pageY, |
||||
startModalShow, |
||||
menuVisible, |
||||
menuCell, |
||||
menuHide, |
||||
menuStart |
||||
} |
||||
} |
||||
Loading…
Reference in new issue