Source/plt-web/plt-web-ui/src/components/flow-cycle/components/ItemPanel.vue

@@ -1,29 +1,32 @@
<template>
  <div class="item_panel_box">
    <el-input size="mini" placeholder="输入关键字进行过滤" v-model="filterText">
    <el-input v-model="filterText" placeholder="输入关键字进行过滤" size="mini">
    </el-input>
    <div class="box_item">
      <item-panel class="item-panel" v-loading="loading">
      <item-panel v-loading="loading" class="item-panel">
        <template v-for="(item, index) in nodeItems">
          <item
            :key="index"
            :type="item.type || 'node'"
            :size="item.size || '72*43'"
            :shape="item.shape || 'flow-rect'"
            :model="{
              // must have model property
              color: item.color || '#1890FF',
              label: item.id || '节点'
            }"
            :shape="item.shape || 'flow-rect'"
            :size="item.size || '72*43'"
            :type="item.type || 'node'"
          >
            <template v-if="item.src">
              <div class="item item-img">
                <img :src="item.src" :alt="item.id" />
                <img :alt="item.id" :src="item.src"/>
              </div>
            </template>
            <template v-else>
              <div :class="'item item-' + (item.shape || 'flow-rect')">
                <span>{{ item.id }}</span>
                <el-tooltip v-if="item.id.length > 9" :content="item.id" effect="light" placement="top">
                  <span class="spanValue">{{ item.id }}</span>
                </el-tooltip>
                <span v-else>{{ item.id }}</span>
              </div>
            </template>
          </item>
@@ -34,16 +37,16 @@
</template>

<script>
import { Item, ItemPanel } from 'vue-flowchart-editor'
import {Item, ItemPanel} from 'vue-flowchart-editor'
// import { getPage } from '../../../api/omd/status'

export default {
  name: 'EditorItemPanel',
  components: { ItemPanel, Item },
  components: {ItemPanel, Item},
  props: {
    nodeItems:{
      type:Array,
      default:() => [],
    nodeItems: {
      type: Array,
      default: () => [],
    }
  },
  data() {
@@ -66,7 +69,7 @@

<style lang="scss" scoped>
.item-panel {
  width: 100%;
  width: 210px;
  height: 77vh;
  text-align: center;
  overflow-y: scroll;
@@ -118,4 +121,10 @@
.item-img {
  max-width: 100px;
}

.spanValue {
  white-space: nowrap; // 防止换行
  overflow: hidden; //隐藏超出部分
  text-overflow: ellipsis; //显示省略号
}
</style>