277 lines
8.0 KiB
Vue
277 lines
8.0 KiB
Vue
<template>
|
|
<div :class="{'node': true, 'root': isRoot || !show, 'node-error-state': showError}">
|
|
<div v-if="show" @click="emit('selected')" :class="{'node-body': true, 'error': showError}">
|
|
<div class="node-body-header" :style="{'background-color': headerBgc}">
|
|
<el-icon v-if="headerIcon" size="20">
|
|
<component :is="headerIcon"/>
|
|
</el-icon>
|
|
<ellipsis class="name" hover-tip :content="title"/>
|
|
<el-icon v-if="!isRoot && designState" size="20" style="float:right;" @click="emit('delNode')">
|
|
<Close/>
|
|
</el-icon>
|
|
</div>
|
|
<div class="node-body-content">
|
|
<el-icon v-if="leftIcon">
|
|
<component :is="leftIcon"/>
|
|
</el-icon>
|
|
<template v-if="selectUser.show && mode === 'view'">
|
|
<div class="avatar_button">
|
|
<avatar-ellipsis :row="3" v-if="userInfo.length > 0" :user-info="userInfo"/>
|
|
<el-button type="primary" :icon="Plus" circle/>
|
|
</div>
|
|
</template>
|
|
<template v-else-if="showAvatar">
|
|
<span class="placeholder" v-if="userInfo.length === 0">{{ placeholder }}</span>
|
|
<avatar-ellipsis :row="3" :user-info="userInfo" v-else/>
|
|
</template>
|
|
<template v-else>
|
|
<span class="placeholder" v-if="(content || '').trim() === ''">{{ placeholder }}</span>
|
|
<ellipsis :row="3" :content="content" v-else/>
|
|
</template>
|
|
</div>
|
|
<div class="node-error" v-if="showError">
|
|
<el-tooltip effect="dark" :content="errorInfo" placement="top-start">
|
|
<el-icon>
|
|
<Warning/>
|
|
</el-icon>
|
|
</el-tooltip>
|
|
</div>
|
|
</div>
|
|
<div class="node-footer">
|
|
<div v-if="merge" class="branch-merge">
|
|
<svg-icon name="fenzhi" :class-name="'fen-icon'"/>
|
|
<!-- <img data-v-1e7b1da5=""-->
|
|
<!-- src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAABXlJREFUeF7tmm2IVGUUx3/nLkQUqxmkpAVhSPUllZX8EEGhvVgZQWCU6wcpsqi2mXtnoaBwoqLCufeO9oJYUJQiFZWlZPQCfYiIXkylstTyS1oWWeYWCe6cuLsz7t3r3Ll3du6907oz35bnPM9z/r895zznmWeECf6RCa6fDoBOBExwAp0UmOAB0CmCnRTopECbCZi2nivK1CMD7FpXlH+ydqctKZBz9QyjwkqFG4HzfKK/0gpvl/ulmBWIzAHkVmlRDFY2EihwwLFkRhYQxgzAtHW2CpcBc4CpOsg26eK7yVPYVFwu/9ZzPufq2VLhQBxhAk85lvSF2Y5l/3prjQlAvqR3IjwJTKqz6DeGssQuyLfBsbyjz6PcFgeAZyOwzLFk/QnrjHH/RACYtj6ncHuUCDWYXs7Lz367XEn3inB+1NzauMLGsiW3+u1b2b9lAH22LuiCD2IJED5yTbmiZpt3dAbKT7Hmjhjtdi25oPZnK/uH7dtUCpi2vqVwQ1wRWuHhWkW3StpTEb6IO3fIThhwTemuzWll/0QA5G39FTgrtghhs2vKELA7inra6d38HXvusOEnriWXHo+iFvZvGUDfap3VdYzdzQgIHmd5W7cBc2Ovoax1C3KXZ5/E/i3VgCQciNMD+J1Ug55yXjxo7QfgOdFKCvjyeL/C9MgoEBa5przrt0ti/+C+mRVB/8amrWsU7m2Ql/c5lqwJjre9CDZ1DMFnriXzw0SatvZW4FqBW6o2vwGvCGxyLPmw3rym9g8cwy0XQV8Ix2qEgH0C1ziWNCyceVu1uvZrriVLGqVGsainHO7mRyDynlCvEWupCI7Kxcat6BFg+OwW9ohyfSMIcQF44v/sZovAlRH1I7QVTwyAt1Cjy8hfh9hYvepGQogDoI74HYbSXzHwusTYl7FEAURVcdPWN+NAiAJQTzzCda4p+6N8iDPe1CkQZ8FAtY+E0AhA2uKHszTlT1QkhAHIQnwmAKr1IjQS6gHISnxmABpBCALIUnymAMIgKHxf6wMmH6E3cNTtSLLgZXoKNOgAR6UDyqyq7esKk3znfOriM48AXzc5AmGE1EFgWvXPTMS3DcAJ6TA6XDIT31YAoRCEc5JqcuKc8Kn3AVFO+E4BryvJVHzbI8BzwAdgi2vJ4ihgSY//nyIg8jqctPi2RYBp61wV5qsyR2BFVdhBhBe0wtdisNU15VAagoNrZh4BOVsfFcVCODVUoLBn6E2hIBvShpApgLyt3nvhRXFFCWxwLOmNaz8Wu8wA5G31ntQWNOukwD2OJc80Oy+ufSYAciVdJsJLcZ0K2nV1MbuUk51jnd9oXuoACmW9eHCQj49/T+j3RtiJslPgFxXmoVxe11nhPdeUq8clANPWPoXVQef9D6e1saEHVINHUBYF7Q1lnl2QL5OGkHoE5G19GRhVyBQ+L1tyST0xoa/Iygq3IOvGI4BdwIWjHBeecE15IExM3tYfgJmBOetcU2o9Q2IcsoiAw8Gf0qhyU7kgb4QCcPRTlNGvSspmtzD81J7kJ30AJX0fYeHo2seLjiXLG0TA78CZ/nGFB8uWPJakeG+t9AE4+jjK/XGLWtgTusBix5It4w5ArqRLRTjhl14IW40KD/kre66ki0R4p57IrgozS/2yb9wByDvqhbKX07Xv/oIavMfOP6pFb0pdgcqrbkFuTlp8JingbRIaBfEUHUOYltbtMPUaUNNo2rpeYWk8zSNWqvSmeSvMDIAnybT1boWnY0I4aigL7YJ4bXRqn0wBeCqG7gYVVqFcFapKWXt0gP5nizKQmvLqwpkDqAkaanmhB4MelOkI27XCDjHY7pqyN23htfXbBiArgVH7dABEETrZxzsRcLL/h6P0/Qc1qphfvB2K3wAAAABJRU5ErkJggg=="-->
|
|
<!-- alt="">-->
|
|
</div>
|
|
<div class="btn">
|
|
<insert-button v-if="designState" @insertNode="type => emit('insertNode', type)"/>
|
|
</div>
|
|
</div>
|
|
<!-- <user-picker v-if="selectUser.show" title="请选择系统用户" :multiple="selectUser.multiple" ref="userPicker"-->
|
|
<!-- :selected="_userInfo"-->
|
|
<!-- @ok="selectedUser"/>-->
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import InsertButton from '../common/InsertButton.vue'
|
|
import Ellipsis from '../common/Ellipsis.vue'
|
|
import AvatarEllipsis from '../common/AvatarEllipsis.vue'
|
|
import SvgIcon from '@/components/svgIcon/index.vue'
|
|
import {Close, Warning, Plus} from '@element-plus/icons-vue'
|
|
|
|
const emit = defineEmits(['insertNode'])
|
|
const props = defineProps({
|
|
//是否为根节点
|
|
isRoot: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
nodeId: {
|
|
type: String,
|
|
default: () => {
|
|
return "";
|
|
}
|
|
},
|
|
//是否显示节点体
|
|
show: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
//是否显示节点体
|
|
merge: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
//节点内容区域文字
|
|
content: {
|
|
type: String,
|
|
default: ""
|
|
},
|
|
//节点内容区域文字
|
|
userInfo: {
|
|
type: Array,
|
|
default() {
|
|
return []
|
|
}
|
|
},
|
|
//节点内容区域文字
|
|
showAvatar: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
selectUser: {
|
|
type: Object,
|
|
default() {
|
|
return {
|
|
show: false,
|
|
multiple: false,
|
|
}
|
|
}
|
|
},
|
|
title: {
|
|
type: String,
|
|
default: "标题"
|
|
},
|
|
placeholder: {
|
|
type: String,
|
|
default: "请设置"
|
|
},
|
|
//节点体左侧图标
|
|
leftIcon: {
|
|
type: Object,
|
|
default: null
|
|
},
|
|
//头部图标
|
|
headerIcon: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
//头部背景色
|
|
headerBgc: {
|
|
type: String,
|
|
default: '#576a95'
|
|
},
|
|
//是否显示错误状态
|
|
showError: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
errorInfo: {
|
|
type: String,
|
|
default: '无信息'
|
|
},
|
|
mode: {
|
|
type: String,
|
|
default: 'design'
|
|
}
|
|
})
|
|
|
|
const designState = computed(() => {
|
|
return props.mode === 'design'
|
|
})
|
|
|
|
|
|
const init = () => {
|
|
// let userInfo = this.$store.state.selectUserMap.get(this.nodeId);
|
|
// if (userInfo){
|
|
// let userInfoList = []
|
|
// for (let val of userInfo) {
|
|
// let userInfo = {
|
|
// id: val.id,
|
|
// name: val.name,
|
|
// avatar: val.avatar,
|
|
// }
|
|
// userInfoList.push(userInfo)
|
|
// }
|
|
// // this._userInfo = userInfoList
|
|
// }
|
|
}
|
|
|
|
// init()
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
.root {
|
|
&:before {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
.node {
|
|
padding: 0 50px;
|
|
//width: 220px;
|
|
width: 320px;
|
|
position: relative;
|
|
|
|
&:before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -9px;
|
|
left: 50%;
|
|
-webkit-transform: translateX(-50%);
|
|
transform: translateX(-50%);
|
|
width: 0;
|
|
border-style: solid;
|
|
border-width: 8px 6px 4px;
|
|
border-color: #000000 transparent transparent;
|
|
background: #ffffff;
|
|
}
|
|
|
|
.node-body {
|
|
cursor: pointer;
|
|
min-height: 63px;
|
|
position: relative;
|
|
border-radius: 5px;
|
|
background-color: white;
|
|
box-shadow: 0px 0px 5px 0px #d8d8d8;
|
|
|
|
&:hover {
|
|
box-shadow: 0px 0px 3px 0px;
|
|
|
|
.node-body-header {
|
|
.el-icon-close {
|
|
display: inline;
|
|
font-size: medium;
|
|
}
|
|
}
|
|
}
|
|
|
|
.node-body-header {
|
|
text-align: center;
|
|
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;
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
|
|
.node-body-content {
|
|
padding: 18px;
|
|
color: #656363;
|
|
font-size: 14px;
|
|
|
|
.avatar_button {
|
|
//float: left;
|
|
display: flex;
|
|
//flex: 1;
|
|
flex-wrap: wrap;
|
|
|
|
button {
|
|
margin-top: 3px;
|
|
height: 40px;
|
|
//flex-shrink: 0;
|
|
//flex-grow: 0;
|
|
}
|
|
}
|
|
|
|
i {
|
|
position: absolute;
|
|
top: 55%;
|
|
right: 5px;
|
|
font-size: medium;
|
|
}
|
|
|
|
.placeholder {
|
|
color: #8c8c8c;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
</style>
|