<template>
|
<div :class="{ 'nodeView':true, 'root': isRoot || !show, 'node-error-state': showError}">
|
<div v-if="show" @click="$emit('selected')" :class="{'node-body': true, 'error': showError}" >
|
<div>
|
<div class="node-body-header" :style="{'background-color': headerBgc}">
|
<i :class="headerIcon" style="margin-right: 5px" v-if="(headerIcon || '') !== ''"></i>
|
<ellipsis class="name" hover-tip :content="title"/>
|
<i class="el-icon-close" v-if="!isRoot && $store.state.diagramMode !== 'viewer'" style="float:right;" @click="$emit('delNode')"></i>
|
</div>
|
<div class="node-body-content">
|
<i :class="leftIcon" v-if="leftIcon"></i>
|
<span class="placeholder" v-if="(content || '').trim() === ''">{{placeholder}}</span>
|
<ellipsis :row="3" :content="content" v-else/>
|
<i class="el-icon-arrow-right" v-if="$store.state.diagramMode !== 'viewer'" ></i>
|
</div>
|
<div class="node-error" v-if="showError">
|
|
<el-tooltip effect="dark" :content="errorInfo" placement="top-start">
|
<i class="el-icon-warning-outline"></i>
|
</el-tooltip>
|
</div>
|
</div>
|
</div>
|
<div class="node-footer">
|
<div class="btn">
|
<insert-button v-show="$store.state.diagramMode !== 'viewer'" @insertNode="type => $emit('insertNode', type)"></insert-button>
|
|
</div>
|
|
</div>
|
</div>
|
</template>
|
<script>
|
import InsertButton from '@/views/common/InsertButton.vue'
|
|
|
export default {
|
name: "NodeView",
|
components: {InsertButton},
|
props:{
|
//是否为根节点
|
isRoot: {
|
type: Boolean,
|
default: false
|
},
|
//是否显示节点体
|
show: {
|
type: Boolean,
|
default: true
|
},
|
//节点内容区域文字
|
content: {
|
type: String,
|
default: ""
|
},
|
title:{
|
type: String,
|
default: "标题"
|
},
|
placeholder:{
|
type: String,
|
default: "请设置"
|
},
|
flowText:{
|
type: String,
|
default: ""
|
},
|
//节点体左侧图标
|
leftIcon: {
|
type: String,
|
default: undefined
|
},
|
//头部图标
|
headerIcon:{
|
type: String,
|
default: ''
|
},
|
//头部背景色
|
headerBgc:{
|
type: String,
|
default: '#576a95'
|
},
|
//是否显示错误状态
|
showError:{
|
type: Boolean,
|
default: false
|
},
|
errorInfo:{
|
type: String,
|
default: '无信息'
|
},
|
},
|
data() {
|
return {
|
}
|
},
|
|
|
created() {
|
},
|
methods: {}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.root{
|
&:before{
|
display: none !important;
|
}
|
}
|
.node-error-state{
|
&.node-body{
|
box-shadow: 0px 0px 5px 0px #F56C6C !important;
|
}
|
}
|
.nodeView{
|
display: flex;
|
align-items:center;
|
width: auto;
|
position: relative;
|
&:before{
|
content: '';
|
top: 50%;
|
left: 100%;
|
display: block;
|
width: 0;
|
height: 0;
|
|
border-style: solid;
|
border-color: #CACACA transparent transparent;
|
background: #F5F5F7;
|
border-top: 5px solid transparent;
|
border-bottom: 5px solid transparent;
|
border-left: 10px solid #CACACA; /* 左边界 */
|
|
}
|
.node-body{
|
width: 220px;
|
cursor: pointer;
|
max-height: 120px;
|
position: relative;
|
border-radius: 5px;
|
background-color: white;
|
box-shadow: 0px 0px 5px 0px #d8d8d8;
|
&:hover{
|
box-shadow: 0px 0px 3px 0px #1890FF;
|
.node-body-header {
|
.el-icon-close {
|
display: inline;
|
font-size: medium;
|
}
|
}
|
}
|
.node-body-header{
|
border-top-left-radius: 5px;
|
border-top-right-radius: 5px;
|
padding: 5px 15px;
|
color: white;
|
font-size: xx-small;
|
.el-icon-close{
|
display: none;
|
}
|
.name{
|
height: 14px;
|
width: 150px;
|
display: inline-block
|
}
|
}
|
.node-body-content{
|
padding: 18px;
|
color: #656363;
|
font-size: 14px;
|
i{
|
position: absolute;
|
top: 55%;
|
right: 5px;
|
font-size: medium;
|
}
|
.placeholder{
|
color: #8c8c8c;
|
}
|
}
|
.node-error{
|
position: absolute;
|
right: -40px;
|
top: 20px;
|
font-size: 25px;
|
color: #F56C6C;
|
}
|
}
|
|
.node-footer{
|
position: relative;
|
.btn{
|
width: 80px;
|
display: flex;
|
// padding: 20px 0 32px;
|
justify-content: center;
|
}
|
/deep/ .el-button{
|
height: 32px;
|
}
|
&::before{
|
content: "";
|
position: absolute;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
z-index: -1;
|
margin: auto;
|
width: 100%;
|
height: 2px;
|
background-color: #CACACA;
|
}
|
}
|
}
|
|
</style>
|
