CMVR-BID/src/views/flow/nodes/common/selectAreaNode.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>