forked from SmartBench/CMVR-IOT-UI
129 lines
3.0 KiB
Vue
129 lines
3.0 KiB
Vue
<!--
|
||
* 文件说明：节点分组容器并展示成员数量。
|
||
* 作用范围：仅服务于流程设计器模块。
|
||
-->
|
||
<template>
|
||
<div class="group__container">
|
||
<NodeTitle
|
||
:icon="group"
|
||
:nodeId="props.model.id"
|
||
:nodeProperties="props.properties"
|
||
:nodeName="props.properties?.name || '分组'"
|
||
nodeType="selectArea"
|
||
nodeDesc="组织相关流程节点"
|
||
@setNodeName="setNodeName"
|
||
/>
|
||
<div class="group-summary">
|
||
<span>分组区域</span>
|
||
<span class="group-summary__count">{{ props.childCount || 0 }} 个节点</span>
|
||
</div>
|
||
<div class="child__container">
|
||
<slot></slot>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script setup>
|
||
import { onMounted } from 'vue';
|
||
import NodeTitle from '../../components/NodeTitle.vue'
|
||
import group from '../../icon/group.svg'
|
||
|
||
const props = defineProps({
|
||
model: Object,
|
||
graphModel: Object,
|
||
properties: Object,
|
||
nowTime: Number,
|
||
childCount: Number,
|
||
});
|
||
|
||
const emits = defineEmits(["contentChange"]);
|
||
|
||
/**
|
||
* 设置 setNodeName 对应的数据或交互；作用范围仅限当前组件或模块。
|
||
* @param {*} name 名称或事件名称
|
||
*/
|
||
const setNodeName = (name) => {
|
||
const properties = lf.getProperties(props.model.id);
|
||
lf.setProperties(props.model.id, { ...properties, name });
|
||
emits("contentChange");
|
||
};
|
||
|
||
onMounted(() => {
|
||
if (props.properties?.action !== "NONE") {
|
||
lf.setProperties(props.model.id, { ...props.properties, action: "NONE" });
|
||
}
|
||
})
|
||
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.group__container {
|
||
width: 100%;
|
||
height: 100%;
|
||
background: rgba(255, 255, 255, 0.96);
|
||
padding: 16px;
|
||
cursor: default;
|
||
border-radius: 8px;
|
||
border: 1px solid #b8c5d8;
|
||
box-shadow: none;
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: relative;
|
||
box-sizing: border-box;
|
||
overflow: hidden;
|
||
transition: border-color 0.18s ease, box-shadow 0.18s ease;
|
||
|
||
&::before {
|
||
content: "";
|
||
width: 5px;
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
background: #64748b;
|
||
}
|
||
|
||
&:hover {
|
||
border-color: #8fa0b8;
|
||
box-shadow: 0 8px 24px rgba(31, 41, 55, 0.08);
|
||
}
|
||
|
||
.title {
|
||
height: 40px;
|
||
}
|
||
|
||
.group-summary {
|
||
display: flex;
|
||
height: 30px;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-top: 4px;
|
||
color: #475569;
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.group-summary__count {
|
||
padding: 2px 8px;
|
||
border: 1px solid #d9e0ea;
|
||
border-radius: 4px;
|
||
background: #f8fafc;
|
||
color: #64748b;
|
||
font-size: 12px;
|
||
font-weight: 400;
|
||
}
|
||
|
||
.child__container {
|
||
min-height: 80px;
|
||
flex: 1;
|
||
background-color: #f6f8fb;
|
||
background-image: radial-gradient(#d6dde8 0.7px, transparent 0.7px);
|
||
background-size: 16px 16px;
|
||
border: 1px dashed #aeb9c9;
|
||
border-radius: 6px;
|
||
}
|
||
|
||
.el-row {
|
||
align-items: end;
|
||
}
|
||
}
|
||
</style>
|