イベントに削除関数を追加し、即座に適用する
This commit is contained in:
Mouriya
@@ -1,48 +1,55 @@
|
||||
<template>
|
||||
<!-- <div class="q-pa-md q-gutter-sm"> -->
|
||||
<q-tree
|
||||
:nodes="store.eventTree.screens"
|
||||
node-key="eventId"
|
||||
children-key="events"
|
||||
no-connectors
|
||||
v-model:expanded="store.expandedScreen"
|
||||
:dense="true"
|
||||
:ref="tree"
|
||||
>
|
||||
<template v-slot:header-EVENT="prop">
|
||||
<div class="row col items-start no-wrap event-node" @click="onSelected(prop.node)">
|
||||
<q-icon v-if="prop.node.eventId"
|
||||
name="play_circle"
|
||||
:color="prop.node.hasFlow?'green':'grey'"
|
||||
size="16px" class="q-mr-sm">
|
||||
</q-icon>
|
||||
<div class="no-wrap" :class="selectedEvent && prop.node.eventId===selectedEvent.eventId?'selected-node':''">{{ prop.node.label }}</div>
|
||||
<q-space></q-space>
|
||||
<!-- <q-icon v-if="prop.node.hasFlow" name="delete" color="negative" size="16px" class="q-mr-sm"></q-icon> -->
|
||||
<q-tree :nodes="store.eventTree.screens" node-key="eventId" children-key="events" no-connectors
|
||||
v-model:expanded="store.expandedScreen" :dense="true" :ref="tree">
|
||||
<template v-slot:header-EVENT="prop">
|
||||
<div :ref="prop.node.eventId" class="row col items-center no-wrap event-node">
|
||||
<q-icon v-if="prop.node.eventId" name="play_circle" :color="prop.node.hasFlow ? 'green' : 'grey'" size="16px"
|
||||
class="q-mr-sm">
|
||||
</q-icon>
|
||||
<div class="no-wrap" @click="onSelected(prop.node)"
|
||||
:class="selectedEvent && prop.node.eventId === selectedEvent.eventId ? 'selected-node' : ''">{{
|
||||
prop.node.label }}</div>
|
||||
<q-space></q-space>
|
||||
<!-- <q-icon v-if="prop.node.hasFlow" name="delete" color="negative" size="16px" class="q-mr-sm"></q-icon> -->
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:header-CHANGE="prop">
|
||||
<div class="row col items-center no-wrap event-node">
|
||||
<div class="no-wrap">{{ prop.node.label }}</div>
|
||||
<q-space></q-space>
|
||||
<q-icon name="add_circle" color="primary" size="16px" class="q-mr-sm"
|
||||
@click="addChangeEvent(prop.node)"></q-icon>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:header-DELETABLE="prop">
|
||||
<div class="row col items-center event-node">
|
||||
<div class="row col items-center" @click="onSelected(prop.node)">
|
||||
<q-icon v-if="prop.node.eventId" name="play_circle" :color="prop.node.hasFlow ? 'green' : 'grey'" size="16px"
|
||||
class="q-mr-sm">
|
||||
</q-icon>
|
||||
<div>{{ prop.node.label }}</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:header-CHANGE="prop" >
|
||||
<div class="row col items-start no-wrap event-node" >
|
||||
<div class="no-wrap">{{ prop.node.label }}</div>
|
||||
<q-space></q-space>
|
||||
<q-icon name="add_circle" color="primary" size="16px" class="q-mr-sm" @click="addChangeEvent(prop.node)"></q-icon>
|
||||
<div>
|
||||
<q-btn class="q-mr-sm delete-btn" flat fab-mini icon="delete_forever" padding="none" color="negative"
|
||||
@click="deleteEvent(prop.node)"></q-btn>
|
||||
</div>
|
||||
</template>
|
||||
</q-tree>
|
||||
<show-dialog v-model:visible="showDialog" name="フィールド選択" @close="closeDg" widht="400px">
|
||||
<field-select ref="appDg" name="フィールド" type="single" :appId="store.appInfo?.appId"></field-select>
|
||||
</show-dialog>
|
||||
</div>
|
||||
</template>
|
||||
</q-tree>
|
||||
<show-dialog v-model:visible="showDialog" name="フィールド選択" @close="closeDg">
|
||||
<field-select ref="appDg" name="フィールド" type="single" :appId="store.appInfo?.appId"></field-select>
|
||||
</show-dialog>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, computed, ref } from 'vue';
|
||||
import { IKintoneEvent ,IKintoneEventGroup, IKintoneEventNode, kintoneEvent} from '../../types/KintoneEvents';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { QTree, useQuasar } from 'quasar';
|
||||
import { ActionFlow, RootAction } from 'src/types/ActionTypes';
|
||||
import { useFlowEditorStore } from 'stores/flowEditor';
|
||||
import { ActionFlow, ActionNode, RootAction } from 'src/types/ActionTypes';
|
||||
import ShowDialog from '../ShowDialog.vue';
|
||||
import { defineComponent, ref } from 'vue';
|
||||
import { IKintoneEvent, IKintoneEventGroup, IKintoneEventNode } from '../../types/KintoneEvents';
|
||||
import FieldSelect from '../FieldSelect.vue';
|
||||
import { QTree } from 'quasar';
|
||||
import ShowDialog from '../ShowDialog.vue';
|
||||
export default defineComponent({
|
||||
name: 'EventTree',
|
||||
components: {
|
||||
@@ -50,6 +57,7 @@ export default defineComponent({
|
||||
FieldSelect,
|
||||
},
|
||||
setup(props, context) {
|
||||
const $q = useQuasar();
|
||||
const appDg = ref();
|
||||
const store = useFlowEditorStore();
|
||||
const showDialog = ref(false);
|
||||
@@ -58,62 +66,79 @@ export default defineComponent({
|
||||
// const selectedFlow = store.currentFlow;
|
||||
|
||||
// const expanded=ref();
|
||||
const selectedEvent = ref<IKintoneEvent|null>(null);
|
||||
const selectedChangeEvent=ref<IKintoneEventGroup|null>(null);
|
||||
const isFieldChange = (node:IKintoneEventNode)=>{
|
||||
return node.header=='EVENT' && node.eventId.indexOf(".change.")>-1;
|
||||
const selectedEvent = ref<IKintoneEvent | null>(null);
|
||||
const selectedChangeEvent = ref<IKintoneEventGroup | null>(null);
|
||||
const isFieldChange = (node: IKintoneEventNode) => {
|
||||
return node.header == 'EVENT' && node.eventId.indexOf(".change.") > -1;
|
||||
}
|
||||
//フィールド値変更イベント追加
|
||||
const closeDg = (val:string) => {
|
||||
const closeDg = (val: string) => {
|
||||
if (val == 'OK') {
|
||||
if(!selectedChangeEvent.value){return;}
|
||||
if (!selectedChangeEvent.value) { return; }
|
||||
const field = appDg.value.selected[0];
|
||||
const eventid = `${selectedChangeEvent.value.eventId}.${field.code}`;
|
||||
if(store.eventTree.findEventById(eventid)){
|
||||
if (store.eventTree.findEventById(eventid)) {
|
||||
return;
|
||||
}
|
||||
selectedChangeEvent.value?.events.push(
|
||||
new kintoneEvent(
|
||||
field.label,
|
||||
eventid,
|
||||
selectedChangeEvent.value.eventId)
|
||||
);
|
||||
selectedChangeEvent.value?.events.push({
|
||||
eventId: eventid,
|
||||
label: field.name,
|
||||
parentId: selectedChangeEvent.value.eventId,
|
||||
header: 'DELETABLE'
|
||||
});
|
||||
tree.value?.expanded?.push(selectedChangeEvent.value.eventId);
|
||||
tree.value?.expandAll();
|
||||
}
|
||||
};
|
||||
const addChangeEvent=(node:IKintoneEventGroup)=>{
|
||||
if(store.appInfo===undefined){
|
||||
return;
|
||||
const addChangeEvent = (node: IKintoneEventGroup) => {
|
||||
if (store.appInfo === undefined) {
|
||||
return;
|
||||
}
|
||||
selectedChangeEvent.value=node;
|
||||
showDialog.value=true;
|
||||
selectedChangeEvent.value = node;
|
||||
showDialog.value = true;
|
||||
}
|
||||
const onSelected=(node:IKintoneEvent)=>{
|
||||
if(!node.eventId){
|
||||
return;
|
||||
}
|
||||
selectedEvent.value=node;
|
||||
if(store.appInfo===undefined){
|
||||
return;
|
||||
}
|
||||
const screen = store.eventTree.findEventById(node.parentId);
|
||||
let flow =store.findFlowByEventId(node.eventId);
|
||||
let screenName=screen!==null?screen.label:"";
|
||||
let nodeLabel = node.label;
|
||||
// if(isFieldChange(node)){
|
||||
// screenName=nodeLabel;
|
||||
// nodeLabel=`${node.label}の値を変更したとき`;
|
||||
// }
|
||||
if(flow!==undefined && flow!==null ){
|
||||
store.selectFlow(flow);
|
||||
}else{
|
||||
const root = new RootAction(node.eventId,screenName,nodeLabel)
|
||||
const flow =new ActionFlow(root);
|
||||
store.flows?.push(flow);
|
||||
store.selectFlow(flow);
|
||||
selectedEvent.value.flowData=flow;
|
||||
}
|
||||
|
||||
const deleteEvent = (node: IKintoneEvent) => {
|
||||
if (!node.eventId) {
|
||||
return;
|
||||
}
|
||||
store.deleteEvent(node);
|
||||
store.selectFlow(undefined)
|
||||
|
||||
$q.notify({
|
||||
type: 'positive',
|
||||
caption: "通知",
|
||||
message: `イベント ${node.label} 削除`
|
||||
})
|
||||
}
|
||||
|
||||
const onSelected = (node: IKintoneEvent) => {
|
||||
if (!node.eventId) {
|
||||
return;
|
||||
}
|
||||
selectedEvent.value = node;
|
||||
if (store.appInfo === undefined) {
|
||||
return;
|
||||
}
|
||||
const screen = store.eventTree.findEventById(node.parentId);
|
||||
|
||||
let flow = store.findFlowByEventId(node.eventId);
|
||||
let screenName = screen !== null ? screen.label : "";
|
||||
let nodeLabel = node.label;
|
||||
// if(isFieldChange(node)){
|
||||
// screenName=nodeLabel;
|
||||
// nodeLabel=`${node.label}の値を変更したとき`;
|
||||
// }
|
||||
|
||||
if (flow !== undefined && flow !== null) {
|
||||
store.selectFlow(flow);
|
||||
} else {
|
||||
const root = new RootAction(node.eventId, screenName, nodeLabel)
|
||||
const flow = new ActionFlow(root);
|
||||
store.flows?.push(flow);
|
||||
store.selectFlow(flow);
|
||||
selectedEvent.value.flowData = flow;
|
||||
}
|
||||
};
|
||||
return {
|
||||
// eventTree,
|
||||
@@ -125,6 +150,7 @@ export default defineComponent({
|
||||
onSelected,
|
||||
selectedEvent,
|
||||
addChangeEvent,
|
||||
deleteEvent,
|
||||
closeDg,
|
||||
store
|
||||
}
|
||||
@@ -132,20 +158,25 @@ export default defineComponent({
|
||||
});
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.nowrap{
|
||||
flex-wrap:nowarp;
|
||||
text-wrap:nowarp;
|
||||
.nowrap {
|
||||
flex-wrap: nowarp;
|
||||
text-wrap: nowarp;
|
||||
}
|
||||
.event-node{
|
||||
cursor:pointer;
|
||||
|
||||
.event-node {
|
||||
cursor: pointer;
|
||||
}
|
||||
.selected-node{
|
||||
|
||||
.selected-node {
|
||||
color: $primary;
|
||||
font-weight: bolder;
|
||||
}
|
||||
.event-node:hover{
|
||||
|
||||
.event-node:hover {
|
||||
background-color: $light-blue-1;
|
||||
}
|
||||
|
||||
.delete-btn {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user