CMVR-IOT-UI/src/views/flow/components/NodeTitle.vue

<template>
    <div class="title__container">
        <div class="title">
        <div class="left">
            <img :src="icon" alt="">
            <div class="text__container">
            <div class="text__title" v-if="showTextTitle">
                <span class="text">{{ nodeName }}</span>
                <el-icon class="editIcon" @click="showTextTitle = false"><EditPen /></el-icon>
            </div>
            <div class="input_name_container" v-else>
                <el-input v-model="nodeName" />
                <el-button class="input_name_select" circle size="small" @click="confirmNodeName">
                <el-icon><Select /></el-icon>
                </el-button>
                <el-button class="input_name_closeBold" circle size="small" @click="cancelNodeName">
                <el-icon><CloseBold /></el-icon>
                </el-button>
            </div>
            </div>
        </div>
        <div class="right">
            <el-button circle size="small" @click="deleteNode">
            <el-icon><Delete /></el-icon>
            </el-button>
        </div>
        </div>
        <div class="subTitle">{{ props.nodeDesc }}</div>
    </div>
</template>
<script setup lang="js">
import { ref } from 'vue'
import { EditPen, Select, CloseBold, Delete } from '@element-plus/icons-vue'
import { ElMessageBox } from 'element-plus'

const props = defineProps({
    icon: {
        type: String,
        default: ''
    },
    nodeId: {
        type: String,
        default: ''
    },
    nodeProperties: {
        type: Object,
        default: () => {}
    },
    nodeDesc: {
        type: String,
        default: ''
    },
    nodeName: {
      type: String,
      default: ''
    },
    nodeType: {
      type: String,
      default: ''
    }
})

const showTextTitle = ref(true)
const nodeName = ref(props.nodeProperties.name || props.nodeName)

const confirmNodeName = () => {
  const properties = lf.getProperties(props.nodeId)
  lf.setProperties(props.nodeId, {
    ...properties,
    name: nodeName.value
  })
  showTextTitle.value = true
}

const cancelNodeName = () => {
  nodeName.value = props.nodeProperties?.name || props.nodeName
  showTextTitle.value = true
}

const deleteNode = () => {
  ElMessageBox.confirm(
    '是否删除该节点?',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      if (props.nodeType === 'selectArea') {
        const children = lf.getNodeModelById(props.nodeId).children
        lf.getNodeModelById(props.nodeId).children = []
        children.forEach(item => {
          lf.getNodeModelById(item).draggable = true
        })
      }
      lf.deleteNode(props.nodeId);
    })
}
</script>
<style lang="scss" scoped>
.title__container {
    .title {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .left {
        display: flex;

        img {
          width: 24px;
          height: 24px;
        }

        .text__container {
          .text__title {
            display: flex;
            align-items: center;

            .text {
              font-size: 16px;
              font-weight: bold;
              margin: 0 12px;
            }

            .editIcon {
              cursor: pointer;
            }
          }

          .input_name_container {
            display: flex;
            align-items: center;

            .el-input {
              margin-left: 12px;
            }

            .input_name_select {
              color: #00b42a;
              margin-left: 4px;
              border: none;
            }

            .input_name_closeBold {
              color: #f53f3f;
              margin-left: 4px;
              border: none;
            }
          }
        }
      }

      .right {
        cursor: pointer;

        .el-button {
          border: none;
        }
      }
    }

    .subTitle {
      color: #737a87;
      font-size: 12px;
      margin: 8px 0;
    }
  }
</style>