alicorn-dev/KintoneAppBuilder
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

flow editor assembly and modification

Browse Source
This commit is contained in:
dt
2023-09-13 16:13:30 +08:00
parent 59e6d33656
commit a0ecc2eee3
3 changed files with 69 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/components/flowEditor/left/ControlPanelC.vue
View File

@@ -1,12 +1,12 @@
<template> <template>
<div class="q-py-md"> <div class="q-py-md">
<q-tree :nodes="LeftDataBus.root" node-key="label"> <q-tree :nodes="LeftDataBus.root" node-key="label">
<template #header-rg="p"> <!-- <template #header-rg="p">
<ControlPanelTreeRadio <ControlPanelTreeRadio
:node="p.node" :node="p.node"
:dataBus="LeftDataBus" :dataBus="LeftDataBus"
></ControlPanelTreeRadio> ></ControlPanelTreeRadio>
</template> </template> -->
</q-tree> </q-tree>
</div> </div>
</template> </template>

8
frontend/src/components/flowEditor/left/ItemSelector.vue
View File

@@ -26,11 +26,7 @@
<script setup> <script setup>
import { ref } from 'vue'; import { ref } from 'vue';
const title = ref('勤怠管理')
</script> </script>
<style lang="sass">
.ItemSelector
border: 0.15em solid rgba(#999, .4)
border-radius: 0.4em
</style>

77
frontend/src/pages/FlowEditorPage.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<q-page> <div>
<div class="q-pa-md"> <div class="q-pa-md">
<div class="q-gutter-sm row items-start"> <div class="q-gutter-sm row items-start">
<q-breadcrumbs> <q-breadcrumbs>
@@ -7,31 +7,84 @@
<q-breadcrumbs-el :label="title" icon="rule" /> <q-breadcrumbs-el :label="title" icon="rule" />
</q-breadcrumbs> </q-breadcrumbs>
</div> </div>
<div class="q-pa-md"> </div>
<div class="row"> <q-layout
<div class="col-2 column"> container
<ItemSelector /> style="height: 91.5dvb"
<div class="col-auto"><ControlPanel /></div> class="shadow-2 rounded-borders"
</div> >
<!-- <div class="col"> <q-drawer side="left" overlay bordered v-model="drawerLeft">
<div class="q-pa-sm fixed-right">
<q-btn
flat
round
color="primary"
icon="close"
@click="drawerLeft = !drawerLeft"
/>
</div>
<div class="q-mt-md q-pa-sm">
<ControlPanel />
</div>
</q-drawer>
</div> --> <div class="q-mt-lg q-mx-lg">
<div class="row">
<div class="col-2">
<div class="ItemSelector q-pa-sm">
<div class="row">
<div class="col-auto">
<q-icon name="widgets" color="primary" size="2.5em" />
</div>
<div class="col flex">
<div class="q-pa-sm flex" style="align-items: center">
{{ actName }}
</div>
</div>
<div class="col-auto flex">
<div class="flex" style="align-items: center">
<q-btn
class="q-px-sm"
color="white"
size="sm"
text-color="black"
@click="drawerLeft = !drawerLeft"
label="変 更"
dense
/>
</div>
</div>
</div>
</div>
</div>
<div class="col"><FlowChartTest /></div>
</div> </div>
</div> </div>
</div> </q-layout>
</q-page> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import FlowChartTest from 'pages/FlowChartTest.vue';
import ItemSelector from 'components/flowEditor/left/ItemSelector.vue'; import ItemSelector from 'components/flowEditor/left/ItemSelector.vue';
import ControlPanel from 'components/flowEditor/left/ControlPanelC.vue'; import ControlPanel from 'components/flowEditor/left/ControlPanelC.vue';
import { computed, ref } from 'vue';
interface FlowEditorPageProps { interface FlowEditorPageProps {
title: string; title: string;
actName: string;
} }
const props = withDefaults(defineProps<FlowEditorPageProps>(), { const props = withDefaults(defineProps<FlowEditorPageProps>(), {
title: 'FlowEditor', title: 'FlowEditor',
actName: '勤怠管理',
}); });
const actName = computed(() => props.actName);
const drawerLeft = ref(false);
</script> </script>
<style lang="sass"></style> <style lang="sass">
.ItemSelector
border: 0.15em solid rgba(#999, .4)
border-radius: 0.4em
</style>