add FlowEditorPage
This commit is contained in:
daitian
73
frontend/src/components/flowEditor/left/ControlPanel.vue
Normal file
73
frontend/src/components/flowEditor/left/ControlPanel.vue
Normal file
@@ -0,0 +1,73 @@
|
|||||||
|
<template>
|
||||||
|
<div class="q-py-md">
|
||||||
|
<q-list>
|
||||||
|
<q-expansion-item
|
||||||
|
group="somegroup"
|
||||||
|
label="レコードを追加画面"
|
||||||
|
default-opened
|
||||||
|
>
|
||||||
|
<q-card-section>
|
||||||
|
<q-checkbox v-model="setting.v1" label="追加画面表示した時" />
|
||||||
|
<q-checkbox v-model="setting.v2" label="保存をクリックした時" />
|
||||||
|
<q-checkbox v-model="setting.v3" label="保存成功した時" />
|
||||||
|
</q-card-section>
|
||||||
|
</q-expansion-item>
|
||||||
|
|
||||||
|
<q-expansion-item group="somegroup" label="レコード編集画面">
|
||||||
|
<q-card>
|
||||||
|
<q-card-section>
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem,
|
||||||
|
eius reprehenderit eos corrupti commodi magni quaerat ex numquam,
|
||||||
|
dolorum officiis modi facere maiores architecto suscipit iste
|
||||||
|
eveniet doloribus ullam aliquid.
|
||||||
|
</q-card-section>
|
||||||
|
</q-card>
|
||||||
|
</q-expansion-item>
|
||||||
|
|
||||||
|
<q-expansion-item group="somegroup" label="レコード詳細画面">
|
||||||
|
<q-card>
|
||||||
|
<q-card-section>
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem,
|
||||||
|
eius reprehenderit eos corrupti commodi magni quaerat ex numquam,
|
||||||
|
dolorum officiis modi facere maiores architecto suscipit iste
|
||||||
|
eveniet doloribus ullam aliquid.
|
||||||
|
</q-card-section>
|
||||||
|
</q-card>
|
||||||
|
</q-expansion-item>
|
||||||
|
|
||||||
|
<q-expansion-item group="somegroup" label="レコード一覧画面">
|
||||||
|
<q-card class="bg-teal-2">
|
||||||
|
<q-card-section>
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem,
|
||||||
|
eius reprehenderit eos corrupti commodi magni quaerat ex numquam,
|
||||||
|
dolorum officiis modi facere maiores architecto suscipit iste
|
||||||
|
eveniet doloribus ullam aliquid.
|
||||||
|
</q-card-section>
|
||||||
|
</q-card>
|
||||||
|
</q-expansion-item>
|
||||||
|
</q-list>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<q-btn @click="clear" label="clear"/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, Ref } from 'vue';
|
||||||
|
interface Setting {
|
||||||
|
v1: boolean;
|
||||||
|
v2: boolean;
|
||||||
|
v3: boolean;
|
||||||
|
}
|
||||||
|
const setting: Ref<Setting> = ref({
|
||||||
|
v1: true,
|
||||||
|
v2: true,
|
||||||
|
v3: false,
|
||||||
|
});
|
||||||
|
|
||||||
|
let clear = () => {
|
||||||
|
setting.value.v1 = false
|
||||||
|
setting.value.v2 = false
|
||||||
|
setting.value.v3 = false
|
||||||
|
}
|
||||||
|
</script>
|
||||||
36
frontend/src/components/flowEditor/left/ItemSelector.vue
Normal file
36
frontend/src/components/flowEditor/left/ItemSelector.vue
Normal file
@@ -0,0 +1,36 @@
|
|||||||
|
<template>
|
||||||
|
<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">{{title}}</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"
|
||||||
|
label="変 更"
|
||||||
|
dense
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
const title = ref('勤怠管理')
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="sass">
|
||||||
|
.ItemSelector
|
||||||
|
border: 0.15em solid rgba(#999, .4)
|
||||||
|
border-radius: 0.4em
|
||||||
|
</style>
|
||||||
@@ -62,6 +62,13 @@ const essentialLinks: EssentialLinkProps[] = [
|
|||||||
link: '/#/ruleEditor',
|
link: '/#/ruleEditor',
|
||||||
target:'_self'
|
target:'_self'
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
title: 'FlowEditor',
|
||||||
|
caption: 'FlowEditor',
|
||||||
|
icon: 'account_tree',
|
||||||
|
link: '/#/flowEditor',
|
||||||
|
target:'_self'
|
||||||
|
},
|
||||||
{
|
{
|
||||||
title:'',
|
title:'',
|
||||||
isSeparator:true
|
isSeparator:true
|
||||||
|
|||||||
37
frontend/src/pages/FlowEditorPage.vue
Normal file
37
frontend/src/pages/FlowEditorPage.vue
Normal file
@@ -0,0 +1,37 @@
|
|||||||
|
<template>
|
||||||
|
<q-page>
|
||||||
|
<div class="q-pa-md">
|
||||||
|
<div class="q-gutter-sm row items-start">
|
||||||
|
<q-breadcrumbs>
|
||||||
|
<q-breadcrumbs-el icon="home" to="/" />
|
||||||
|
<q-breadcrumbs-el :label="title" icon="rule" />
|
||||||
|
</q-breadcrumbs>
|
||||||
|
</div>
|
||||||
|
<div class="q-pa-md">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-3 column">
|
||||||
|
<ItemSelector />
|
||||||
|
<div class="col-auto"><ControlPanel /></div>
|
||||||
|
</div>
|
||||||
|
<!-- <div class="col">
|
||||||
|
|
||||||
|
</div> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</q-page>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import ItemSelector from 'components/flowEditor/left/ItemSelector.vue';
|
||||||
|
import ControlPanel from 'components/flowEditor/left/ControlPanel.vue';
|
||||||
|
interface FlowEditorPageProps {
|
||||||
|
title: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = withDefaults(defineProps<FlowEditorPageProps>(), {
|
||||||
|
title: 'FlowEditor',
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="sass"></style>
|
||||||
@@ -4,13 +4,21 @@ const routes: RouteRecordRaw[] = [
|
|||||||
{
|
{
|
||||||
path: '/',
|
path: '/',
|
||||||
component: () => import('layouts/MainLayout.vue'),
|
component: () => import('layouts/MainLayout.vue'),
|
||||||
children: [{ path: '', component: () => import('pages/IndexPage.vue') }],
|
children: [
|
||||||
},
|
{ path: '', component: () => import('pages/IndexPage.vue') },
|
||||||
{
|
{ path: 'ruleEditor', component: () => import('pages/RuleEditor.vue') },
|
||||||
path: '/ruleEditor/',
|
{ path: 'flowEditor', component: () => import('pages/FlowEditorPage.vue') }
|
||||||
component: () => import('layouts/MainLayout.vue'),
|
],
|
||||||
children: [{ path: '', component: () => import('pages/RuleEditor.vue') }],
|
|
||||||
},
|
},
|
||||||
|
// {
|
||||||
|
// path: '/ruleEditor/',
|
||||||
|
// component: () => import('layouts/MainLayout.vue'),
|
||||||
|
// children: [{ path: '', component: () => import('pages/RuleEditor.vue') }],
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// path: '/flowEditor/',
|
||||||
|
// component: () => import('layouts/FlowEditorPage.vue'),
|
||||||
|
// },
|
||||||
|
|
||||||
// Always leave this as last one,
|
// Always leave this as last one,
|
||||||
// but you can also remove it
|
// but you can also remove it
|
||||||
|
|||||||
Reference in New Issue
Block a user