175 lines
4.6 KiB
Vue
175 lines
4.6 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>
|
|
<q-separator vertical class="q-mr-xs" />
|
|
<q-btn
|
|
outline
|
|
class="q-py-sm"
|
|
padding="none md none sm"
|
|
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>
|
|
<p class="text-h6 q-pl-md">アクション選択</p>
|
|
<div>
|
|
<q-btn
|
|
label="アクション選択"
|
|
color="primary"
|
|
@click="showDg()"
|
|
v-if="addshow"
|
|
/>
|
|
<show-dialog
|
|
v-model:visible="show"
|
|
name="アクション"
|
|
@close="closeDg"
|
|
>
|
|
<action-select
|
|
ref="appDg"
|
|
name="アクション"
|
|
type="single"
|
|
></action-select>
|
|
</show-dialog>
|
|
</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 { computed, ref } from 'vue';
|
|
|
|
import ShowDialog from 'components/ShowDialog.vue';
|
|
import ActionSelect from 'components/ActionSelect.vue';
|
|
|
|
const show = ref(false);
|
|
const addshow = ref(true);
|
|
const appDg = ref();
|
|
|
|
interface FlowEditorPageProps {
|
|
actName: string;
|
|
flowNames: string[];
|
|
}
|
|
|
|
const props = withDefaults(defineProps<FlowEditorPageProps>(), {
|
|
actName: '勤怠管理 - 4',
|
|
flowNames: () => ['レコードを追加画面', '保存をクリックした時'],
|
|
});
|
|
const actName = computed(() => props.actName);
|
|
const flowNames = computed(() => props.flowNames);
|
|
|
|
const drawerLeft = ref(false);
|
|
|
|
|
|
const showDg = () => {
|
|
show.value = true;
|
|
};
|
|
|
|
const closeDg = (val: string) => {
|
|
if (val == 'OK') {
|
|
//alert(JSON.stringify(appDg.value.selected[0].content));
|
|
let oDiv1 = document.getElementById('action');
|
|
let oDiv2 = document.createElement('div');
|
|
oDiv2.setAttribute('class', 'action');
|
|
if (oDiv1 !== null) {
|
|
oDiv2.innerHTML = appDg.value.selected[0].content;
|
|
oDiv1?.append(oDiv2);
|
|
// let oAdd = oDiv2.getElementsByClassName('next')[0];
|
|
// oAdd.addEventListener('mouseenter', mouseenter);
|
|
// oAdd.addEventListener('mouseleave', mouseleave);
|
|
// let oDel = oDiv2.getElementsByClassName('del')[0];
|
|
// oDel.addEventListener('click', clickdel);
|
|
}
|
|
|
|
if (document.getElementsByClassName('action').length > 0) {
|
|
addshow.value = false;
|
|
}
|
|
};
|
|
};
|
|
|
|
|
|
</script>
|
|
|
|
<style lang="sass">
|
|
.ItemSelector
|
|
border: 0.15em solid rgba(#999, .4)
|
|
border-radius: 0.4em
|
|
</style>
|