|
|
|
@ -225,7 +225,29 @@
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="rightPanel">
|
|
|
|
|
<el-form :model="nodeAttrForm" label-width="auto" style="max-width: 600px" v-if="nodeAttrForm">
|
|
|
|
|
<el-collapse>
|
|
|
|
|
<el-collapse-item title="基础设置" name="1" v-if="Object.keys(nodeDataForm).length>0">
|
|
|
|
|
<el-form :model="nodeDataForm" label-width="auto" style="max-width: 600px">
|
|
|
|
|
<el-form-item label="x">
|
|
|
|
|
<el-input-number :precision="0" :step="1" v-model="nodeDataForm.position.x" style="width: 100%"
|
|
|
|
|
@change="updateNode(nodeAttrForm.id,nodeAttrForm,{ replace: true })" />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="y">
|
|
|
|
|
<el-input-number :precision="0" :step="1" v-model="nodeDataForm.position.y" style="width: 100%"
|
|
|
|
|
@change="updateNode(nodeAttrForm.id,nodeAttrForm,{ replace: true })" />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="宽度">
|
|
|
|
|
<el-input-number :precision="0" :step="1" v-model="nodeDataForm.dimensions.width" style="width: 100%"
|
|
|
|
|
@change="updateNode(nodeAttrForm.id,nodeAttrForm,{ replace: true })" />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="高度">
|
|
|
|
|
<el-input-number :precision="0" :step="1" v-model="nodeDataForm.dimensions.height" style="width: 100%"
|
|
|
|
|
@change="updateNode(nodeAttrForm.id,nodeAttrForm,{ replace: true })" />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
</el-collapse-item>
|
|
|
|
|
<el-collapse-item title="数据配置" name="2" v-if="Object.keys(nodeAttrForm).length>0">
|
|
|
|
|
<el-form :model="nodeAttrForm" label-width="auto" style="max-width: 600px">
|
|
|
|
|
<el-form-item label="默认内容" v-if="Object.keys(nodeAttrForm).includes('defaultInput')">
|
|
|
|
|
<el-input v-model="nodeAttrForm.defaultInput" style="width: 100%" />
|
|
|
|
|
</el-form-item>
|
|
|
|
@ -321,6 +343,15 @@
|
|
|
|
|
/>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
</el-collapse-item>
|
|
|
|
|
<el-collapse-item title="自定义配置" name="3" v-if="customDataForm">
|
|
|
|
|
<el-form :model="customDataForm" label-width="auto" style="max-width: 600px">
|
|
|
|
|
<el-form-item label="自定义内容">
|
|
|
|
|
<el-input type="textarea" v-model="customDataForm.option" style="width: 100%" />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
</el-collapse-item>
|
|
|
|
|
</el-collapse>
|
|
|
|
|
</div>
|
|
|
|
|
<el-dialog v-model="pageSettingVisible" title="页面设置" width="500">
|
|
|
|
|
<el-form :model="pageSettingForm">
|
|
|
|
@ -389,8 +420,10 @@ const { onDragStart, onDrop, onDragOver } = tool();
|
|
|
|
|
|
|
|
|
|
// flow内置方法
|
|
|
|
|
const {
|
|
|
|
|
addEdges
|
|
|
|
|
addEdges,
|
|
|
|
|
updateNode
|
|
|
|
|
} = useVueFlow();
|
|
|
|
|
console.log(updateNode);
|
|
|
|
|
|
|
|
|
|
const pageSettingVisible = ref(false);
|
|
|
|
|
const pageSettingForm = ref({});
|
|
|
|
@ -418,7 +451,9 @@ onMounted(async () => {
|
|
|
|
|
edges.value = JSON.parse(localStorage.getItem('EDGES') || '[]');
|
|
|
|
|
pageData.value = JSON.parse(localStorage.getItem('PAGEDATA'));
|
|
|
|
|
});
|
|
|
|
|
const customDataForm = ref({});
|
|
|
|
|
const nodeAttrForm = ref({});
|
|
|
|
|
const nodeDataForm = ref({});
|
|
|
|
|
const logEvent = async (eventname, event) => {
|
|
|
|
|
switch (eventname) {
|
|
|
|
|
case 'connect':
|
|
|
|
@ -437,15 +472,23 @@ const logEvent = async (eventname, event) => {
|
|
|
|
|
break;
|
|
|
|
|
case 'paneClick':
|
|
|
|
|
nodeAttrForm.value = {};
|
|
|
|
|
nodeDataForm.value = {};
|
|
|
|
|
customDataForm.value = {};
|
|
|
|
|
break;
|
|
|
|
|
case 'click':
|
|
|
|
|
nodeAttrForm.value = event.node.data.options;
|
|
|
|
|
nodeDataForm.value = event.node;
|
|
|
|
|
customDataForm.value = event.node.data.customData;
|
|
|
|
|
break;
|
|
|
|
|
case 'nodeDrag':
|
|
|
|
|
if (event.nodes.length === 1) {
|
|
|
|
|
nodeAttrForm.value = event.node.data.options;
|
|
|
|
|
nodeDataForm.value = event.node;
|
|
|
|
|
customDataForm.value = event.node.data.customData;
|
|
|
|
|
} else {
|
|
|
|
|
nodeAttrForm.value = {};
|
|
|
|
|
nodeDataForm.value = {};
|
|
|
|
|
customDataForm.value = {};
|
|
|
|
|
}
|
|
|
|
|
break;
|
|
|
|
|
case 'contextmenu':
|
|
|
|
|