From 24fa2e63f7c155c87457980e6c656f3891132a47 Mon Sep 17 00:00:00 2001
From: ludc
Date: 星期三, 14 八月 2024 16:28:26 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'
---
Source/plt-web/plt-web-ui/src/components/flow-cycle/components/ItemPanel.vue | 121 ++++++++++++++++++++++++++++++++++++++++
1 files changed, 121 insertions(+), 0 deletions(-)
diff --git a/Source/plt-web/plt-web-ui/src/components/flow-cycle/components/ItemPanel.vue b/Source/plt-web/plt-web-ui/src/components/flow-cycle/components/ItemPanel.vue
new file mode 100644
index 0000000..7a76262
--- /dev/null
+++ b/Source/plt-web/plt-web-ui/src/components/flow-cycle/components/ItemPanel.vue
@@ -0,0 +1,121 @@
+<template>
+ <div class="item_panel_box">
+ <el-input size="mini" placeholder="杈撳叆鍏抽敭瀛楄繘琛岃繃婊�" v-model="filterText">
+ </el-input>
+ <div class="box_item">
+ <item-panel class="item-panel" v-loading="loading">
+ <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 || '鑺傜偣'
+ }"
+ >
+ <template v-if="item.src">
+ <div class="item item-img">
+ <img :src="item.src" :alt="item.id" />
+ </div>
+ </template>
+ <template v-else>
+ <div :class="'item item-' + (item.shape || 'flow-rect')">
+ <span>{{ item.id }}</span>
+ </div>
+ </template>
+ </item>
+ </template>
+ </item-panel>
+ </div>
+ </div>
+</template>
+
+<script>
+import { Item, ItemPanel } from 'vue-flowchart-editor'
+// import { getPage } from '../../../api/omd/status'
+
+export default {
+ name: 'EditorItemPanel',
+ components: { ItemPanel, Item },
+ props: {
+ nodeItems:{
+ type:Array,
+ default:() => [],
+ }
+ },
+ data() {
+ return {
+ filterText: '',
+ loading: false,
+ }
+ },
+ created() {
+ this.loading = false
+
+ },
+ computed: {
+ filterNode() {
+ return this.nodeItems.filter(item => item.id.includes(this.filterText))
+ }
+ },
+}
+</script>
+
+<style lang="scss" scoped>
+.item-panel {
+ width: 210px;
+ height: 77vh;
+ text-align: center;
+ overflow-y: scroll;
+ display: flex;
+ flex-wrap: wrap; /* 鍏佽鎹㈣ */
+ justify-content: center; /* 灞呬腑瀵归綈椤圭洰 */
+ align-items: flex-start; /* 纭繚椤圭洰鍦ㄥ鍣ㄩ《閮ㄥ榻� */
+}
+
+.item {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 12px;
+ margin: 10px; /* 璁惧畾澶栬竟璺濅互纭繚椤圭洰闂存湁闂撮殧 */
+ user-select: none;
+}
+
+/* 椤圭洰绫诲瀷鐨勬牱寮� */
+.item-flow-rect {
+ width: 75px;
+ padding: 6px;
+ box-sizing: border-box;
+ border: 1px solid rgb(24, 144, 255);
+ background-color: rgba(24, 144, 255, 0.2);
+}
+
+.item-flow-circle {
+ width: 70px;
+ height: 70px;
+ border-radius: 60px;
+ border: 1px solid rgb(250, 140, 22);
+ background-color: rgba(250, 140, 22, 0.2);
+}
+
+.item-flow-rhombus {
+ width: 70px;
+ height: 70px;
+ border: 1px solid rgb(19, 194, 194);
+ background-color: rgba(19, 194, 194, 0.2);
+ transform: rotate(45deg);
+ margin: 25px auto;
+
+ span {
+ transform: rotate(-45deg);
+ }
+}
+
+.item-img {
+ max-width: 100px;
+}
+</style>
--
Gitblit v1.9.3