123 lines
3.1 KiB
Vue
123 lines
3.1 KiB
Vue
<template>
|
|
<div>
|
|
<div class="q-ma-md">
|
|
<div class="q-gutter-xs row items-start">
|
|
<q-breadcrumbs class="q-pt-xs q-mr-sm" active-color="black">
|
|
<q-breadcrumbs-el icon="home" />
|
|
<q-breadcrumbs-el :label="actName" />
|
|
<q-breadcrumbs-el
|
|
v-for="flowName in flowNames"
|
|
:key="flowName"
|
|
:label="flowName"
|
|
/>
|
|
|
|
<q-breadcrumbs-el :label="flowNames1" />
|
|
</q-breadcrumbs>
|
|
<q-separator vertical class="q-mr-xs" />
|
|
<q-btn
|
|
unelevated
|
|
class="q-py-sm"
|
|
padding="none md none sm"
|
|
color="blue-1"
|
|
text-color="primary"
|
|
size="md"
|
|
@click="drawerLeft = !drawerLeft"
|
|
label="変 更"
|
|
icon="expand_more"
|
|
dense
|
|
/>
|
|
|
|
<q-space />
|
|
<q-btn
|
|
class="q-px-sm q-mr-sm"
|
|
color="white"
|
|
size="sm"
|
|
text-color="black"
|
|
label="キャンセル"
|
|
dense
|
|
/>
|
|
|
|
<q-btn
|
|
class="q-px-sm"
|
|
color="primary"
|
|
size="sm"
|
|
label="保存する"
|
|
dense
|
|
/>
|
|
</div>
|
|
</div>
|
|
<q-layout
|
|
container
|
|
style="height: 91.5dvb"
|
|
class="shadow-2 rounded-borders"
|
|
>
|
|
<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-lg q-pa-sm">
|
|
<q-card-section>
|
|
<div class="flex-center">
|
|
<div class="row q-pl-md">
|
|
<p class="text-h6">アクション選択</p>
|
|
</div>
|
|
<ItemSelector :actName="actName" />
|
|
</div>
|
|
</q-card-section>
|
|
</div>
|
|
<q-separator />
|
|
<div class="q-mt-md q-pa-sm">
|
|
<q-card-section>
|
|
<p class="text-h6 q-pl-md q-mb-none">フロー選択</p>
|
|
<ControlPanel />
|
|
</q-card-section>
|
|
</div>
|
|
<q-separator />
|
|
<q-card-actions align="right">
|
|
<div class="q-pa-sm">
|
|
<q-btn
|
|
flat
|
|
color="primary"
|
|
size="md"
|
|
@click="drawerLeft = !drawerLeft"
|
|
label="ジャンプ"
|
|
dense
|
|
/>
|
|
</div>
|
|
</q-card-actions>
|
|
</q-drawer>
|
|
|
|
<FlowChartTest />
|
|
</q-layout>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import FlowChartTest from 'pages/FlowChartTest.vue';
|
|
import ControlPanel from 'components/flowEditor/left/ControlPanelC.vue';
|
|
import ItemSelector from 'components/flowEditor/left/ItemSelector.vue';
|
|
import { ref } from 'vue';
|
|
import { storeToRefs } from 'pinia';
|
|
import { useFlowEditorStore } from 'stores/flowEditor';
|
|
|
|
const actName = ref('勤怠管理 - 4');
|
|
const flowNames = ref(['レコードを追加画面', '保存をクリックした時']);
|
|
|
|
const drawerLeft = ref(false);
|
|
const store = useFlowEditorStore();
|
|
const { flowNames1 } = storeToRefs(store);
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
<style lang="sass"></style>
|