130 lines
3.1 KiB
Vue
130 lines
3.1 KiB
Vue
<template>
|
|
<el-popover :visible="visible" placement="bottom-start" title="添加流程节点" width="306">
|
|
<div class="node-select">
|
|
<div @click="addApprovalNode">
|
|
<el-icon style="color:rgb(255, 148, 62);">
|
|
<Coordinate/>
|
|
</el-icon>
|
|
<span>审批人</span>
|
|
</div>
|
|
<div @click="addCcNode">
|
|
<el-icon style="color:rgb(50, 150, 250);">
|
|
<Promotion/>
|
|
</el-icon>
|
|
<span>抄送人</span>
|
|
</div>
|
|
<div @click="addConditionsNode">
|
|
<el-icon style="color:rgb(21, 188, 131);">
|
|
<Share/>
|
|
</el-icon>
|
|
<span>条件分支</span>
|
|
</div>
|
|
<div @click="addConcurrentsNode">
|
|
<el-icon style="color:#718dff;">
|
|
<Operation/>
|
|
</el-icon>
|
|
<span>并行分支</span>
|
|
</div>
|
|
<div @click="addDelayNode">
|
|
<el-icon style="color:#f25643;">
|
|
<Clock/>
|
|
</el-icon>
|
|
<span>延迟等待</span>
|
|
</div>
|
|
<!-- <div @click="addTriggerNode">-->
|
|
<!-- <el-icon style="color:#15BC83;">-->
|
|
<!-- <SetUp/>-->
|
|
<!-- </el-icon>-->
|
|
<!-- <span>触发器</span>-->
|
|
<!-- </div>-->
|
|
</div>
|
|
<template #reference>
|
|
<!-- <el-button :icon="Plus" slot="reference" type="primary" @click="visible = !visible" size="small"-->
|
|
<!-- circle></el-button>-->
|
|
<el-icon @click="visible = !visible" color="#fff" style="background-color:#2E7CF0;border-radius: 50%;cursor: pointer" ><Plus /></el-icon>
|
|
</template>
|
|
</el-popover>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {Plus, Clock, SetUp, Operation, Share, Promotion, Coordinate} from '@element-plus/icons-vue'
|
|
const emit = defineEmits(['insertNode'])
|
|
const visible = ref(false)
|
|
|
|
onMounted(() => {
|
|
document.addEventListener('click', nullBlockClick)
|
|
})
|
|
/**
|
|
* 点击空白处, 清除选项选中状态
|
|
*/
|
|
const nullBlockClick = (e) => {
|
|
if(!(e.target.tagName==='svg'||e.target.tagName==='path')){
|
|
disVisible()
|
|
}
|
|
}
|
|
const addApprovalNode = () => {
|
|
emit('insertNode', "APPROVAL")
|
|
disVisible()
|
|
}
|
|
|
|
const addCcNode = () => {
|
|
emit('insertNode', "CC")
|
|
disVisible()
|
|
}
|
|
const addDelayNode = () => {
|
|
emit('insertNode', "DELAY")
|
|
disVisible()
|
|
}
|
|
const addConditionsNode = () => {
|
|
emit('insertNode', "CONDITIONS")
|
|
disVisible()
|
|
}
|
|
const addConcurrentsNode = () => {
|
|
emit('insertNode', "CONCURRENTS")
|
|
disVisible()
|
|
}
|
|
const addTriggerNode = () => {
|
|
emit('insertNode', "TRIGGER")
|
|
disVisible()
|
|
}
|
|
|
|
const disVisible = () =>{
|
|
visible.value = false
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.node-select {
|
|
div {
|
|
display: inline-block;
|
|
margin: 5px 5px;
|
|
cursor: pointer;
|
|
padding: 10px 15px;
|
|
border: 1px solid #F8F9F9;
|
|
background-color: #F8F9F9;
|
|
border-radius: 10px;
|
|
width: 130px;
|
|
line-height: 7px;
|
|
position: relative;
|
|
|
|
span {
|
|
position: absolute;
|
|
left: 65px;
|
|
top: 18px;
|
|
}
|
|
|
|
&:hover {
|
|
background-color: #fff;
|
|
box-shadow: 0 0 8px 2px #d6d6d6;
|
|
}
|
|
|
|
i {
|
|
font-size: 25px;
|
|
padding: 5px;
|
|
border: 1px solid #dedfdf;
|
|
border-radius: 14px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|