xins
/
hwmom-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改看板配置项

Browse Source
master
suixy 2 weeks ago
parent b647cf3409
commit a3c7bcdc4a
10 changed files with 591 additions and 79 deletions
Show Stats Download Patch File Download Diff File

173
src/views/boardGenerate/index.vue
Unescape Escape View File

@ -408,6 +408,21 @@
</template>
<div class="moduleText">菜单</div>
</el-card>
<el-card class="moduleCard" shadow="never" :draggable="true"
@dragstart="onDragStart($event, 'tree')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
:body-style="{padding:'4px 0'}">
<template #header>
<div style="width: 100%;height: 100%;text-align: center">
<svg t="1768964556223" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="4878" width="30" height="30">
<path
d="M554.666667 682.666667h85.333333v128h-213.333333v-128h85.333333v-128H256v128h85.333333v128H128v-128h85.333333v-170.666667h298.666667V384h-85.333333V256h213.333333v128h-85.333333v128h298.666666v170.666667h85.333334v128h-213.333334v-128h85.333334v-128h-256v128z m42.666666-384h-128v42.666666h128V298.666667zM298.666667 725.333333H170.666667v42.666667h128v-42.666667z m597.333333 0h-128v42.666667h128v-42.666667z m-298.666667 0h-128v42.666667h128v-42.666667z"
fill="#444444" p-id="4879"></path>
</svg>
</div>
</template>
<div class="moduleText">树状图</div>
</el-card>
</div>
</el-popover>
</div>
@ -492,99 +507,99 @@
>
<Background :size="1" :gap="20" pattern-color="#BDBDBD" style="background-color: #000" />
<template #node-area="areaNodeProps">
<AreaNode v-bind="areaNodeProps" :pageData="pageData" @resize="(e) => handleResizeStop(e, areaNodeProps)" />
<template #node-area="props">
<AreaNode v-bind="props" :pageData="pageData" @resize="(e) => handleResizeStop(e, props)" />
</template>
<template #node-customBoard="customBoardNodeProps">
<CustomBoardNode v-bind="customBoardNodeProps" :inputData="getInputData(customBoardNodeProps.id)"
@resize="(e) => handleResizeStop(e, customBoardNodeProps)" />
<template #node-customBoard="props">
<CustomBoardNode v-bind="props" :inputData="getInputData(props.id)"
@resize="(e) => handleResizeStop(e, props)" />
</template>
<template #node-customData="customDataNodeProps">
<CustomDataNode v-bind="customDataNodeProps" :inputData="getInputData(customDataNodeProps.id)"
@resize="(e) => handleResizeStop(e, customDataNodeProps)" />
<template #node-customData="props">
<CustomDataNode v-bind="props" :inputData="getInputData(props.id)"
@resize="(e) => handleResizeStop(e, props)" />
</template>
<template #node-line="lineNodeProps">
<LineNode v-bind="lineNodeProps" :inputData="getInputData(lineNodeProps.id)"
@resize="(e) => handleResizeStop(e, lineNodeProps)" />
<template #node-line="props">
<LineNode v-bind="props" :inputData="getInputData(props.id)"
@resize="(e) => handleResizeStop(e, props)" />
</template>
<template #node-multiLines="multiLinesNodeProps">
<MultiLinesNode v-bind="multiLinesNodeProps" :inputData="getInputData(multiLinesNodeProps.id)"
@resize="(e) => handleResizeStop(e, multiLinesNodeProps)" />
<template #node-multiLines="props">
<MultiLinesNode v-bind="props" :inputData="getInputData(props.id)"
@resize="(e) => handleResizeStop(e, props)" />
</template>
<template #node-curve="curveNodeProps">
<CurveNode v-bind="curveNodeProps" :inputData="getInputData(curveNodeProps.id)"
@resize="(e) => handleResizeStop(e, curveNodeProps)" />
<template #node-curve="props">
<CurveNode v-bind="props" :inputData="getInputData(props.id)"
@resize="(e) => handleResizeStop(e, props)" />
</template>
<template #node-multiCurves="multiCurvesNodeProps">
<MultiCurvesNode v-bind="multiCurvesNodeProps" :inputData="getInputData(multiCurvesNodeProps.id)"
@resize="(e) => handleResizeStop(e, multiCurvesNodeProps)" />
<template #node-multiCurves="props">
<MultiCurvesNode v-bind="props" :inputData="getInputData(props.id)"
@resize="(e) => handleResizeStop(e, props)" />
</template>
<template #node-lineBar="lineBarNodeProps">
<LineBarNode v-bind="lineBarNodeProps" :inputData="getInputData(lineBarNodeProps.id)"
@resize="(e) => handleResizeStop(e, lineBarNodeProps)" />
<template #node-lineBar="props">
<LineBarNode v-bind="props" :inputData="getInputData(props.id)"
@resize="(e) => handleResizeStop(e, props)" />
</template>
<template #node-bar="barNodeProps">
<BarNode v-bind="barNodeProps" :inputData="getInputData(barNodeProps.id)"
@resize="(e) => handleResizeStop(e, barNodeProps)" />
<template #node-bar="props">
<BarNode v-bind="props" :inputData="getInputData(props.id)"
@resize="(e) => handleResizeStop(e, props)" />
</template>
<template #node-backgroundBar="backgroundBarNodeProps">
<BackgroundBarNode v-bind="backgroundBarNodeProps" :inputData="getInputData(backgroundBarNodeProps.id)"
@resize="(e) => handleResizeStop(e, backgroundBarNodeProps)" />
<template #node-backgroundBar="props">
<BackgroundBarNode v-bind="props" :inputData="getInputData(props.id)"
@resize="(e) => handleResizeStop(e, props)" />
</template>
<template #node-multiBars="multiBarsNodeProps">
<MultiBarsNode v-bind="multiBarsNodeProps" :inputData="getInputData(multiBarsNodeProps.id)"
@resize="(e) => handleResizeStop(e, multiBarsNodeProps)" />
<template #node-multiBars="props">
<MultiBarsNode v-bind="props" :inputData="getInputData(props.id)"
@resize="(e) => handleResizeStop(e, props)" />
</template>
<template #node-pie="pieNodeProps">
<PieNode v-bind="pieNodeProps" :inputData="getInputData(pieNodeProps.id)"
@resize="(e) => handleResizeStop(e, pieNodeProps)" />
<template #node-pie="props">
<PieNode v-bind="props" :inputData="getInputData(props.id)"
@resize="(e) => handleResizeStop(e, props)" />
</template>
<template #node-annular="annularNodeProps">
<AnnularNode v-bind="annularNodeProps" :inputData="getInputData(annularNodeProps.id)"
@resize="(e) => handleResizeStop(e, annularNodeProps)" />
<template #node-annular="props">
<AnnularNode v-bind="props" :inputData="getInputData(props.id)"
@resize="(e) => handleResizeStop(e, props)" />
</template>
<template #node-radar="radarNodeProps">
<RadarNode v-bind="radarNodeProps" :inputData="getInputData(radarNodeProps.id)"
@resize="(e) => handleResizeStop(e, radarNodeProps)" />
<template #node-radar="props">
<RadarNode v-bind="props" :inputData="getInputData(props.id)"
@resize="(e) => handleResizeStop(e, props)" />
</template>
<template #node-dashboard="dashboardNodeProps">
<DashboardNode v-bind="dashboardNodeProps" :inputData="getInputData(dashboardNodeProps.id)"
@resize="(e) => handleResizeStop(e, dashboardNodeProps)" />
<template #node-dashboard="props">
<DashboardNode v-bind="props" :inputData="getInputData(props.id)"
@resize="(e) => handleResizeStop(e, props)" />
</template>
<template #node-nightingaleRoseDiagram="nightingaleRoseDiagramNodeProps">
<NightingaleRoseDiagramNode v-bind="nightingaleRoseDiagramNodeProps"
:inputData="getInputData(nightingaleRoseDiagramNodeProps.id)"
@resize="(e) => handleResizeStop(e, nightingaleRoseDiagramNodeProps)" />
<template #node-props="props">
<NightingaleRoseDiagramNode v-bind="props"
:inputData="getInputData(props.id)"
@resize="(e) => handleResizeStop(e, props)" />
</template>
<template #node-carousel="carouselNodeProps">
<CarouselNode v-bind="carouselNodeProps" :inputData="getInputData(carouselNodeProps.id)"
@resize="(e) => handleResizeStop(e, carouselNodeProps)" />
<template #node-carousel="props">
<CarouselNode v-bind="props" :inputData="getInputData(props.id)"
@resize="(e) => handleResizeStop(e, props)" />
</template>
<template #node-data="dataNodeProps">
<DataNode v-bind="dataNodeProps" :inputData="getInputData(dataNodeProps.id)"
@resize="(e) => handleResizeStop(e, dataNodeProps)" />
<template #node-data="props">
<DataNode v-bind="props" :inputData="getInputData(props.id)"
@resize="(e) => handleResizeStop(e, props)" />
</template>
<template #node-text="textNodeProps">
<TextNode v-bind="textNodeProps" :inputData="getInputData(textNodeProps.id)"
@resize="(e) => handleResizeStop(e, textNodeProps)" />
<template #node-text="props">
<TextNode v-bind="props" :inputData="getInputData(props.id)"
@resize="(e) => handleResizeStop(e, props)" />
</template>
<template #node-img="imgNodeProps">
@ -627,9 +642,9 @@
@resize="(e) => handleResizeStop(e, selectNodeProps)" />
</template>
<template #node-time="timeNodeProps">
<TimeNode v-bind="timeNodeProps" :inputData="getInputData(timeNodeProps.id)"
@resize="(e) => handleResizeStop(e, timeNodeProps)" />
<template #node-time="props">
<TimeNode v-bind="props" :inputData="getInputData(props.id)"
@resize="(e) => handleResizeStop(e, props)" />
</template>
<template #node-map="mapNodeProps">
@ -662,9 +677,13 @@
@resize="(e) => handleResizeStop(e, paginationNodeProps)" />
</template>
<template #node-menu="menuNodeProps">
<MenuNode v-bind="menuNodeProps" :inputData="getInputData(menuNodeProps.id)"
@resize="(e) => handleResizeStop(e, menuNodeProps)" />
<template #node-menu="props">
<MenuNode v-bind="props" :inputData="getInputData(props.id)"
@resize="(e) => handleResizeStop(e, props)" />
</template>
<template #node-tree="props">
<TreeNode v-bind="props" :inputData="getInputData(props.id)"
@resize="(e) => handleResizeStop(e, props)" />
</template>
</VueFlow>
</FlowRuler>
@ -988,6 +1007,12 @@
<el-form-item label="输出字段名" v-if="Object.keys(nodeAttrForm).includes('field')">
<el-input v-model="nodeAttrForm.field" />
</el-form-item>
<el-form-item label="菜单显示字段名" v-if="Object.keys(nodeAttrForm).includes('menuField')">
<el-input v-model="nodeAttrForm.menuField" />
</el-form-item>
<el-form-item label="菜单唯一字段名" v-if="Object.keys(nodeAttrForm).includes('activeField')">
<el-input v-model="nodeAttrForm.activeField" />
</el-form-item>
<el-form-item label="每页个数字段" v-if="Object.keys(nodeAttrForm).includes('pageSizeField')">
<el-input v-model="nodeAttrForm.pageSizeField" />
</el-form-item>
@ -1037,6 +1062,9 @@
<el-form-item label="文字颜色" v-if="Object.keys(nodeAttrForm).includes('color')">
<el-color-picker v-model="nodeAttrForm.color" show-alpha />
</el-form-item>
<el-form-item label="选中文字颜色" v-if="Object.keys(nodeAttrForm).includes('activeColor')">
<el-color-picker v-model="nodeAttrForm.activeColor" show-alpha />
</el-form-item>
<el-form-item label="背景颜色" v-if="Object.keys(nodeAttrForm).includes('backgroundColor')">
<el-color-picker v-model="nodeAttrForm.backgroundColor" show-alpha />
</el-form-item>
@ -1282,6 +1310,14 @@
<el-form-item label="数字数量" v-if="Object.keys(nodeAttrForm).includes('numQuantity')">
<el-input-number :min="1" :controls="false" v-model="nodeAttrForm.numQuantity" autocomplete="off" />
</el-form-item>
<el-form-item label="树设置" v-if="Object.keys(nodeAttrForm).includes('treeOptions')">
<el-button class="optionsBtn" plain @click="treeOptionsVisible = true">
配置树
</el-button>
</el-form-item>
<el-form-item label="层级数量" v-if="Object.keys(nodeAttrForm).includes('level')">
<el-input-number :min="1" :controls="false" v-model="nodeAttrForm.level" autocomplete="off" />
</el-form-item>
<el-form-item label="js脚本设置">
<el-input type="textarea" v-model="nodeAttrForm.JScript" style="width: 100%" />
</el-form-item>
@ -1581,6 +1617,9 @@
</div>
</template>
</el-dialog>
<el-dialog v-model="treeOptionsVisible" title="树设置" fullscreen>
<TreeOption :data="nodeAttrForm.treeOptions" :level="nodeAttrForm.level"/>
</el-dialog>
</div>
</template>
<script setup>
@ -1659,6 +1698,8 @@ import ButtonNode from '@/views/boardGenerate/nodes/form/buttonNode.vue';
import SelectNode from '@/views/boardGenerate/nodes/form/selectNode.vue';
import MenuNode from './nodes/advancedComponents/menuNode.vue'
import TreeNode from './nodes/advancedComponents/tree/index.vue';
import TreeOption from './nodes/advancedComponents/tree/option.vue';
import TimeNode from '@/views/boardGenerate/nodes/form/timeNode.vue';
import TableNode from '@/views/boardGenerate/nodes/form/tableNode.vue';
@ -1811,6 +1852,7 @@ const pageSettingVisible = ref(false);
const tableCellOptionsVisible = ref(false);
const cellOptionsVisible = ref(false);
const tableOptionsVisible = ref(false);
const treeOptionsVisible = ref(false);
const tableClassOptionsVisible = ref(false);
const swiperOptionsVisible = ref(false);
const mapOptionsVisible = ref(false);
@ -2480,7 +2522,10 @@ const setText = (value, row, formula) => {
}
</style>
<style>
.vue-flow__handle {
width: 1vw;
height: 1vw;
}
</style>

60
src/views/boardGenerate/nodes/advancedComponents/menuItem.vue
Unescape Escape View File

@ -0,0 +1,60 @@
<template>
<!-- 有子菜单 -->
<el-sub-menu
v-if="hasChildren"
:index="`${item.id}`"
>
<template #title>
<div :style="{color:props.active === item.id ? (props.data?.options?.activeColor || '#ffd04b') :(props.data?.options?.color || '#fff')}" style="width: 100%" @click.stop="activeItem(item.id)">{{ item[props.data?.options?.menuField || 'locationAlias'] }}</div>
</template>
<MenuItem
v-for="(child,index) in item.children"
:key="index"
:item="child"
:data="props.data"
:active="props.active"
/>
</el-sub-menu>
<!-- 普通菜单 -->
<el-menu-item
v-else
:index="`${item.id}`"
>
<div :style="{color:props.active === item.id ? (props.data?.options?.activeColor || '#ffd04b') :(props.data?.options?.color || '#fff')}" style="width: 100%" @click.stop="activeItem(item.id)">{{ item[props.data?.options?.menuField || 'locationAlias'] }}</div>
</el-menu-item>
</template>
<script setup>
import { computed } from 'vue';
import { inject } from 'vue'
defineOptions({
name: 'MenuItem'
});
const props = defineProps({
item: {
type: Object,
required: true
},
data: {
type: Object,
required: true
},
active:{
type: Number ,
required: true
}
});
const hasChildren = computed(() => {
return props.item.children && props.item.children.length > 0;
});
const onSelect = inject('onSelect')
const activeItem = (id) =>{
onSelect(id)
}
</script>

34
src/views/boardGenerate/nodes/advancedComponents/menuNode.vue
Unescape Escape View File

@ -7,25 +7,28 @@
<div class="custom-node"
:style="{textAlign:props.data.options.align,width:props.dimensions.width*props.ratioWidth+'px',lineHeight:props.dimensions.height*props.ratioHeight+'px',height:props.dimensions.height*props.ratioHeight+'px',pointerEvents:props.isView?'auto': 'none'}">
<el-menu active-text-color="#ffd04b" background-color="#062852" class="el-menu-vertical-demo" default-active="2" text-color="#fff">
<template v-for="(i, index) in props.inputData?.data" :key="i.id">
<el-sub-menu :index="index">
<template #title>
<span>{{ i.locationAlias }}</span>
</template>
<el-menu-item @click="scrollToId(ii.id)" v-for="ii in i.children">{{ ii.locationAlias }}</el-menu-item>
</el-sub-menu>
</template>
<el-menu ref="menuRef" background-color="#062852" class="el-menu-vertical-demo" :text-color="props.data.options.color || '#fff'">
<MenuItem
v-for="(item) in props.inputData?.data"
:data="props.data"
:index="`${item.id}`"
:key="item.id"
:item="item"
:active="active"
/>
</el-menu>
</div>
<Handle v-if="!props.isView" :id="`${props.id}.-t`" type="target" :position="Position.Left" />
<Handle v-if="!props.isView" :id="`${props.id}.-s`" type="source" :position="Position.Right" />
</div>
</template>
<script setup>
import { defineEmits, defineProps, ref } from 'vue';
import { NodeResizer } from '@vue-flow/node-resizer';
import { Handle, Position } from '@vue-flow/core';
import MenuItem from './menuItem.vue'
import { provide } from 'vue'
const props = defineProps({
ratioWidth: {
@ -67,15 +70,26 @@ const props = defineProps({
required: true
}
});
const emit = defineEmits(['resize']);
const menuRef = ref()
const active =ref(0)
const resize = (e) => {
emit('resize', e, props.id);
};
const onSelect = (item) => {
active.value = item
props.data.outputData[props.data.options.field] = item;
}
provide('onSelect', onSelect)
</script>
<style scoped>
.custom-node {
position: absolute;
overflow-y: auto;
}
:deep(.el-menu){
border: none;
}
</style>

72
src/views/boardGenerate/nodes/advancedComponents/tree/index.vue
Unescape Escape View File

@ -0,0 +1,72 @@
<template>
<div
:style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px'}">
<NodeResizer @resizeEnd="(e) => $emit('resize', e)" color="#fff" v-if="!props.isView && !props.isHideHandle && props.selected"
@resize="resize" />
<div class="custom-node"
:style="{textAlign:props.data.options.align,width:props.dimensions.width*props.ratioWidth+'px',lineHeight:props.dimensions.height*props.ratioHeight+'px',height:props.dimensions.height*props.ratioHeight+'px',pointerEvents:props.isView?'auto': 'none'}">
<span
:style="{color:props.data.options.color,fontSize:props.dimensions.height*props.ratioHeight+'px'}">{{ props.inputData?.text || props.data.options.text
}}</span>
</div>
<Handle v-if="!props.isView" :id="`${props.id}.-t`" type="target" :position="Position.Left" />
</div>
</template>
<script setup>
import { defineEmits, defineProps, ref } from 'vue';
import { NodeResizer } from '@vue-flow/node-resizer';
import { Handle, Position } from '@vue-flow/core';
const props = defineProps({
ratioWidth: {
type: Number,
required: false,
default: 1
},
ratioHeight: {
type: Number,
required: false,
default: 1
},
isView: {
type: Boolean,
required: false
},
inputData: {
type: Object,
required: false
},
id: {
type: String,
required: true
},
isHideHandle: {
type: Boolean,
required: false
},
selected: {
type: Boolean,
required: false
},
data: {
type: Object,
required: true
},
dimensions: {
type: Object,
required: true
}
});
const emit = defineEmits(['resize']);
const resize = (e) => {
emit('resize', e, props.id);
};
</script>
<style scoped>
.custom-node {
position: absolute;
}
</style>

76
src/views/boardGenerate/nodes/advancedComponents/tree/nodes/item.vue
Unescape Escape View File

@ -0,0 +1,76 @@
<template>
<div
:style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px'}">
<NodeResizer handleStyle="width:10px;height:10px;border-radius:50%" @resizeEnd="(e) => $emit('resize', e)" color="#000" v-if="!props.isView && !props.isHideHandle && props.selected"
@resize="resize" />
<div class="custom-node"
:style="{width:props.dimensions.width*props.ratioWidth+'px',height:props.dimensions.height*props.ratioHeight+'px',pointerEvents:props.isView?'auto': 'none'}">
<div style="width: 100%; height: 100%;border: 1px solid #ccc">
{{ !props.isView && !props.isHideHandle && props.selected}}
{{props.dimensions}}
</div>
</div>
<Handle v-show="false" :id="`${props.id}.-t`" type="target" :position="Position.Right" />
</div>
</template>
<script setup>
import { defineEmits, defineProps, ref } from 'vue';
import { NodeResizer } from '@vue-flow/node-resizer';
import { Handle, Position } from '@vue-flow/core';
const props = defineProps({
ratioWidth: {
type: Number,
required: false,
default: 1
},
ratioHeight: {
type: Number,
required: false,
default: 1
},
isView: {
type: Boolean,
required: false
},
inputData: {
type: Object,
required: false
},
id: {
type: String,
required: true
},
isHideHandle: {
type: Boolean,
required: false
},
selected: {
type: Boolean,
required: false
},
data: {
type: Object,
required: true
},
dimensions: {
type: Object,
required: true
}
});
const emit = defineEmits(['resize']);
const resize = (e) => {
emit('resize', e, props.id);
};
watch(()=>props.dimensions,() => {
console.log(JSON.stringify(props.dimensions));
})
</script>
<style scoped>
.custom-node {
//position: absolute;
}
</style>

168
src/views/boardGenerate/nodes/advancedComponents/tree/option.vue
Unescape Escape View File

@ -0,0 +1,168 @@
<template>
<div style="height: calc(90vh - 111px - 30px);position: relative;">
<el-card class="moduleCard" shadow="never" :draggable="true"
@dragstart="onDragStart($event, 'itemNode')" :style="{display:'inline-block',margin:'0 4px 4px 0'}"
:body-style="{padding:'4px 0'}">
<template #header>
<div style="width: 100%;height: 100%;text-align: center">
<svg t="1768964556223" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="4878" width="30" height="30">
<path
d="M554.666667 682.666667h85.333333v128h-213.333333v-128h85.333333v-128H256v128h85.333333v128H128v-128h85.333333v-170.666667h298.666667V384h-85.333333V256h213.333333v128h-85.333333v128h298.666666v170.666667h85.333334v128h-213.333334v-128h85.333334v-128h-256v128z m42.666666-384h-128v42.666666h128V298.666667zM298.666667 725.333333H170.666667v42.666667h128v-42.666667z m597.333333 0h-128v42.666667h128v-42.666667z m-298.666667 0h-128v42.666667h128v-42.666667z"
fill="#444444" p-id="4879"></path>
</svg>
</div>
</template>
<div class="moduleText">文字</div>
</el-card>
<div class="content" @drop="onDrop">
<VueFlow
:min-zoom="0.01"
:zoomOnScroll="false"
:panOnDrag="false"
ref="flowRef"
v-model:nodes="nodes"
v-model:edges="edges"
fit-view-on-init
@dragover="onDragOver"
default-marker-color="#409EFF"
@connect="logEvent('connect', $event)"
@node-click="logEvent('click', $event)"
@pane-click="logEvent('paneClick', $event)"
@node-drag-start="logEvent('nodeDrag', $event)"
@node-contextMenu="logEvent('contextmenu', $event)"
>
<Background :size="1" :gap="20" pattern-color="#000" style="background-color: #fff" />
<template #node-itemNode="props">
<Item v-bind="props" @resize="(e) => handleResizeStop(e, props)"/>
</template>
</VueFlow>
</div>
</div>
</template>
<script setup>
import { defineEmits, defineProps, ref } from 'vue';
import { MarkerType, useVueFlow, VueFlow } from '@vue-flow/core';
import tool from './tool.js';
import { Background } from '@vue-flow/background';
import Item from './nodes/item.vue';
import AreaNode from '@/views/print/nodes/areaNode.vue';
const { onDragStart, onDrop, onDragOver } = tool();
const {
addEdges,
updateNode,
removeNodes,
addNodes
} = useVueFlow();
const flowRef = ref();
const props = defineProps({
data: {
type: Object,
required: true
},
level: {
type: Number,
required: true
}
});
const nodes = ref([]);
const edges = ref([]);
const logEvent = async (eventname, event) => {
switch (eventname) {
case 'connect':
if (!edges.value.some(r => r.id === `${event.source}---${event.target}`)) {
addEdges({
id: `${event.source}---${event.target}`,
source: event.source,
target: event.target,
type: 'bezier',
animated: true,
markerEnd: MarkerType.ArrowClosed,
sourceHandle: event.sourceHandle,
style: { stroke: '#409EFF' }
});
}
break;
case 'paneClick':
break;
case 'click':
break;
case 'nodeDrag':
break;
case 'contextmenu':
}
};
const gridSize = 200;
const handleResizeStop = (event, node) => {
if (event.altKey) return;
const snappedWidth = Math.round(node.width / gridSize) * gridSize;
const snappedHeight = Math.round(node.height / gridSize) * gridSize;
updateNode(node.id, {
style: {
width: `${snappedWidth}px`,
height: `${snappedHeight}px`
}
});
};
onMounted(async () => {
flowRef.value.setTransform({
x: 0,
y: 0,
zoom: 1
});
await nextTick();
nodes.value = [];
await nextTick();
addNodes({
id: `item1`,
type: 'itemNode',
draggable:false,
position: {
x: 0,
y: 200
},
dimensions: { 'width': 300, 'height': 200 },
data: {}
});
setTimeout(() => {
console.log(JSON.stringify(nodes.value));
}, 1000);
});
watch(() => nodes.value, () => {
console.log(JSON.stringify(nodes.value));
}, { deep: true });
</script>
<style lang="less" scoped>
.levelItem {
display: inline-block;
border: 1px solid #ccc;
}
.line {
display: inline-block;
width: 30px;
height: 1px;
background-color: #409eff;
vertical-align: top;
}
.content {
width: calc(100% - 100px);
height: 100%;
position: absolute;
//top: 50%;
left: 100px;
top: 0;
//transform: translateY(-50%);
vertical-align: top;
}
</style>

69
src/views/boardGenerate/nodes/advancedComponents/tree/tool.js
Unescape Escape View File

@ -0,0 +1,69 @@
import { useVueFlow } from '@vue-flow/core';
import { v4 as uuidv4 } from 'uuid';
const getId = ( ) => {
return `${uuidv4().replaceAll('-', '_')}`;
};
const getNodeSize = (e) => {
return { width: 100, height: 100 };
};
const tool = () => {
const nodeType = ref('');
const { addNodes, screenToFlowCoordinate, onNodesInitialized, updateNode } = useVueFlow();
const onDragStart = (event, type, data) => {
if (event.dataTransfer) {
event.dataTransfer.setData('application/vueflow', type);
event.dataTransfer.effectAllowed = 'move';
}
nodeType.value = type;
document.addEventListener('drop', onDragEnd);
};
const onDragEnd = () => {
nodeType.value = null;
document.removeEventListener('drop', onDragEnd);
};
const onDrop = (event) => {
const dimensions = getNodeSize();
const position = screenToFlowCoordinate({
x: event.clientX, y: event.clientY
});
const nodeId = getId( );
const newNode = {
id: nodeId,
draggable: true,
type: nodeType.value,
dimensions,
position,
data: { options: {} }
};
const { off } = onNodesInitialized(() => {
updateNode(nodeId, (node) => ({
position: { x: node.position.x - node.dimensions.width / 2, y: node.position.y - node.dimensions.height / 2 }
}));
off();
});
addNodes(newNode);
};
const onDragOver = (event) => {
event.preventDefault();
if (event.dataTransfer) {
event.dataTransfer.dropEffect = 'move';
}
};
return {
onDragStart, onDragEnd, onDrop, onDragOver
};
};
export default tool;

12
src/views/boardGenerate/tool.js
Unescape Escape View File

@ -359,7 +359,9 @@ const getOption = (e) => {
field: '', color: '#fff',fontSize: 22,number: 123,numQuantity:3, backgroundColor: 'rgba(180, 180, 180, 0.2)', isBorder: true, borderColor: '#fff'
};
} else if (e === 'menu') {
return { text: '文字', align: '', color: '#fff' };
return { menuField: '', activeField: '', field: '', color: '#fff', activeColor: '#ffd04b' };
} else if (e === 'tree') {
return { level: 2,treeOptions:[] };
} else {
return {};
}
@ -383,8 +385,12 @@ const getNodeSize = (e) => {
return { width: 300, height: 300 };
} else if (e === 'map') {
return { width: 100, height: 30 };
} else if (e === 'menu') {
return { width: 200, height: 800 };
} else if (e === 'scrollTable' || e === 'table') {
return { width: 500, height: 300 };
} else if (e === 'tree') {
return { width: 800, height: 800 };
} else {
return { width: 100, height: 100 };
}
@ -414,9 +420,7 @@ const nameEnum = {
icon: '图标',
video: '视频',
timeline: '时间线',
digitalFlop: '数字翻牌器',
scrollTable: '滚动表格',
background: '背景'
digitalFlop: '数字翻牌器', scrollTable: '滚动表格', background: '背景', tree: '树状图'
};
const tool = () => {
const nodeType = ref('');

5
src/views/boardGenerate/view.vue
Unescape Escape View File

@ -138,6 +138,10 @@
<DigitalFlopNode :ratioWidth="ratioWidth" :ratioHeight="ratioHeight" :isView="true"
:inputData=getInputData(i.id) v-bind="i"></DigitalFlopNode>
</template>
<template v-if="i.type === 'menu'">
<MenuNode :ratioWidth="ratioWidth" :ratioHeight="ratioHeight" :isView="true"
:inputData=getInputData(i.id) v-bind="i"></MenuNode>
</template>
</div>
</div>
@ -183,6 +187,7 @@ import CarouselNode from './nodes/board/carouselNode.vue';
import StaticDataNode from './nodes/data/staticDataNode.vue';
import TableNode from './nodes/form/tableNode.vue';
import ScrollTableNode from './nodes/form/scrollTableNode.vue';
import MenuNode from './nodes/advancedComponents/menuNode.vue'
import { getBoardApi } from '@/views/boardGenerate/api/boardList';
const router = useRouter();

1
src/views/print/index.vue
Unescape Escape View File

@ -615,7 +615,6 @@ const setPage = (type, width, height) => {
};
const zoomChange = (e) => {
console.log(flowRef.value.autoPanSpeed);
flowRef.value.viewport.x = 0;
flowRef.value.viewport.y = 0;
let num = zoom.value;

Write Preview
Loading…
Cancel
Save