76 lines
2.4 KiB
Vue
76 lines
2.4 KiB
Vue
<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 style="min-height: 100vh;">
|
|
<div class="q-pa-md">
|
|
<q-btn-dropdown split color="primary" label="ルール新規作成" size="lg">
|
|
<q-list>
|
|
<q-item v-for="action in actions" clickable v-close-popup @click="onItemClick" :key="action">
|
|
<q-item-section>
|
|
<q-item-label>{{ action }}</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-btn-dropdown>
|
|
</div>
|
|
<div class="q-pa-md">
|
|
<q-select v-model="model" :options="options" label="Standard"/>
|
|
<q-btn :label="model+'選択'" color="primary" @click="showDg()" />
|
|
<show-dialog v-model:visible="show" :name="model" @close="closeDg" width="400px">
|
|
<template v-if="model=='アプリ'">
|
|
<app-select-box ref="appDg" :name="model" type="single"></app-select-box>
|
|
</template>
|
|
<template v-if="model=='フィールド'">
|
|
<field-select ref="appDg" :name="model" type="multiple" :appId="1"></field-select>
|
|
</template>
|
|
<template v-if="model=='アクション'">
|
|
<action-select ref="appDg" :name="model" type="single"></action-select>
|
|
</template>
|
|
</show-dialog>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</q-page>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import ShowDialog from 'components/ShowDialog.vue';
|
|
import AppSelectBox from 'components/AppSelectBox.vue';
|
|
import FieldSelect from 'components/FieldSelect.vue';
|
|
import ActionSelect from 'components/ActionSelect.vue';
|
|
import { ref } from 'vue'
|
|
let show = ref(false);
|
|
let appDg = ref();
|
|
let model = ref('アプリ');
|
|
let options = ['アプリ','フィールド','アクション']
|
|
const showDg = () => {
|
|
show.value = true;
|
|
};
|
|
|
|
|
|
const closeDg = (val:string) => {
|
|
if (val == 'OK') {
|
|
alert(JSON.stringify(appDg.value.selected))
|
|
}
|
|
|
|
};
|
|
interface Props {
|
|
title: string;
|
|
actions: string[];
|
|
}
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
title: "ルールエディター",
|
|
actions: () => ["フィールド制御", "一覧画面", "その他"]
|
|
});
|
|
function onItemClick(evt: Event) {
|
|
return;
|
|
}
|
|
</script>
|