import {
|
computed,
|
ref,
|
defineComponent,
|
onUnmounted,
|
watch,
|
onMounted,
|
} from 'vue'
|
import styles from './Tools.module.scss'
|
import Icon from '@/components/Icon/Icon'
|
import { injectStore } from '../../core/store'
|
import { _t } from '@/libs/Language/Language'
|
|
export default defineComponent({
|
props: {
|
nodeData: {
|
type: Array,
|
default: () => [],
|
},
|
edgeData: {
|
type: Array,
|
default: () => [],
|
},
|
},
|
emits: ['dragstart', 'edgeClick'],
|
setup(props, ctx) {
|
const visible = ref(false)
|
const { selected } = injectStore()
|
let flag = false
|
const activeNames = ref<string[]>([])
|
const onClickBox = (event: MouseEvent | TouchEvent) => {
|
nodeData.value.forEach((item: any) => {
|
if (!activeNames.value.includes(item.group)) {
|
activeNames.value.push(item.group)
|
}
|
})
|
if (!flag) {
|
event.stopPropagation()
|
visible.value = !visible.value
|
}
|
}
|
const onTouchstart = (event: TouchEvent) => {
|
flag = true
|
visible.value = !visible.value
|
event.stopPropagation()
|
}
|
const onTouchstartBox = (event: TouchEvent) => {
|
event.stopPropagation()
|
}
|
const onClickEdge = (item: any) => {
|
selected.value = item.type === selected.value ? null : item.type
|
ctx.emit('edgeClick', selected.value)
|
}
|
const nodeData = computed(() => {
|
return props.nodeData || []
|
})
|
|
const nodeMap = computed(() => {
|
const nodeData = props.nodeData || []
|
const map: Record<string, any[]> = {}
|
nodeData.forEach((item: any) => {
|
map[item.group] = map[item.group] || []
|
map[item.group].push(item)
|
})
|
return map
|
})
|
|
const edgeData = computed(() => {
|
return props.edgeData || []
|
})
|
|
const onDragstart = (item: Record<string, any>, event: DragEvent) => {
|
ctx.emit('dragstart', item)
|
}
|
|
const onCollapseChange = (v: string) => {}
|
|
document.addEventListener('click', () => {
|
if (visible.value && !flag) {
|
visible.value = false
|
}
|
})
|
document.addEventListener('touchstart', () => {
|
if (visible.value) {
|
visible.value = false
|
}
|
})
|
|
onUnmounted(() => {
|
selected.value = null
|
})
|
|
// watch(nodeData, (data: any[]) => {
|
|
// })
|
|
return () => {
|
return (
|
<div>
|
{/* 工具箱 */}
|
<div class={[styles.tools]}>
|
<el-popover
|
placement="right-end"
|
width={365}
|
trigger="click"
|
popper-class={styles.popover}
|
visible={visible.value}
|
v-slots={{
|
reference: () => {
|
return (
|
<div
|
onClick={onClickBox}
|
onTouchstart={onTouchstart}
|
class={{
|
[styles.box]: true,
|
[styles.nodeBox]: true,
|
[styles.boxShow]: visible.value,
|
}}
|
>
|
<el-tooltip
|
class="box-item"
|
effect="dark"
|
content={_t('活动节点')}
|
placement="right"
|
>
|
<div
|
class={{
|
[styles.icon]: true,
|
[styles.selectNode]: visible.value,
|
}}
|
>
|
<Icon
|
class={styles.img}
|
icon="node1"
|
width={20}
|
height={20}
|
draggable={false}
|
></Icon>
|
</div>
|
</el-tooltip>
|
</div>
|
)
|
},
|
}}
|
>
|
<div
|
class={{
|
[styles.nodes]: true,
|
}}
|
onTouchstart={onTouchstartBox}
|
>
|
<el-collapse
|
v-model={activeNames.value}
|
onChange={onCollapseChange}
|
onClick={(event: Event) => event?.stopPropagation()}
|
style={{ width: 'calc(100% - 10px)', marginRight: '10px' }}
|
>
|
{Object.keys(nodeMap.value).map((key) => {
|
const nodes = nodeMap.value[key]
|
return (
|
<el-collapse-item title={key} name={key}>
|
<ul class={styles.ul}>
|
{nodes.map((item: any) => {
|
return (
|
<el-tooltip
|
class="box-item"
|
effect="dark"
|
content={item.description}
|
key={item.type}
|
placement="top"
|
>
|
<li
|
onDragstart={(event) =>
|
onDragstart(item, event)
|
}
|
draggable
|
class={styles.li}
|
>
|
{item.imageRef ? (
|
<Icon
|
class={styles.icon}
|
icon={item.imageRef}
|
width={15}
|
height={15}
|
></Icon>
|
) : null}
|
|
{item.name}
|
</li>
|
</el-tooltip>
|
)
|
})}
|
</ul>
|
</el-collapse-item>
|
)
|
})}
|
</el-collapse>
|
</div>
|
</el-popover>
|
|
{edgeData.value.map((item: any, index: number) => {
|
return (
|
<div
|
key={item.type}
|
onClick={() => onClickEdge(item)}
|
class={{
|
[styles.box]: true,
|
[styles.boxLi]: true,
|
[styles.boxShow]: selected.value === item.type,
|
}}
|
>
|
<el-tooltip
|
class="box-item"
|
effect="dark"
|
content={item.name}
|
placement="right"
|
>
|
<div
|
class={{
|
[styles.icon]: true,
|
[styles.selectNode]: selected.value === item.type,
|
}}
|
>
|
<Icon
|
// @ts-ignore
|
class={{
|
[styles.img]: true,
|
}}
|
draggable={false}
|
icon={item.imageRef}
|
width={20}
|
height={20}
|
></Icon>
|
</div>
|
</el-tooltip>
|
|
{/* <span>{item.name}</span> */}
|
</div>
|
)
|
})}
|
</div>
|
{/* 节点 */}
|
</div>
|
)
|
}
|
},
|
})
|
