ボタン配置改修
This commit is contained in:
@@ -3,11 +3,11 @@
|
|||||||
<q-tree :nodes="store.eventTree.screens" node-key="eventId" children-key="events" no-connectors
|
<q-tree :nodes="store.eventTree.screens" node-key="eventId" children-key="events" no-connectors
|
||||||
v-model:expanded="store.expandedScreen" :dense="true" :ref="tree">
|
v-model:expanded="store.expandedScreen" :dense="true" :ref="tree">
|
||||||
<template v-slot:header-EVENT="prop">
|
<template v-slot:header-EVENT="prop">
|
||||||
<div :ref="prop.node.eventId" class="row col items-center no-wrap event-node">
|
<div :ref="prop.node.eventId" class="row col items-center 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"
|
<q-icon v-if="prop.node.eventId" name="play_circle" :color="prop.node.hasFlow ? 'green' : 'grey'" size="16px"
|
||||||
class="q-mr-sm">
|
class="q-mr-sm">
|
||||||
</q-icon>
|
</q-icon>
|
||||||
<div class="no-wrap" @click="onSelected(prop.node)"
|
<div class="no-wrap"
|
||||||
:class="selectedEvent && prop.node.eventId === selectedEvent.eventId ? 'selected-node' : ''">{{
|
:class="selectedEvent && prop.node.eventId === selectedEvent.eventId ? 'selected-node' : ''">{{
|
||||||
prop.node.label }}</div>
|
prop.node.label }}</div>
|
||||||
<q-space></q-space>
|
<q-space></q-space>
|
||||||
@@ -15,25 +15,21 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<template v-slot:header-CHANGE="prop">
|
<template v-slot:header-CHANGE="prop">
|
||||||
<div class="row col items-center no-wrap event-node">
|
<div class="row col items-start no-wrap event-node">
|
||||||
<div class="no-wrap">{{ prop.node.label }}</div>
|
<div class="no-wrap"
|
||||||
|
:class="selectedEvent && prop.node.eventId === selectedEvent.eventId ? 'selected-node' : ''"
|
||||||
|
>{{ prop.node.label }}</div>
|
||||||
<q-space></q-space>
|
<q-space></q-space>
|
||||||
<q-icon name="add_circle" color="primary" size="16px" class="q-mr-sm"
|
<q-icon name="add_circle" color="primary" size="16px" class="q-mr-sm"
|
||||||
@click="addChangeEvent(prop.node)"></q-icon>
|
@click="addChangeEvent(prop.node)"></q-icon>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<template v-slot:header-DELETABLE="prop">
|
<template v-slot:header-DELETABLE="prop">
|
||||||
<div class="row col items-center event-node">
|
<div class="row col items-start event-node" @click="onSelected(prop.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 v-if="prop.node.eventId" name="play_circle" :color="prop.node.hasFlow ? 'green' : 'grey'" size="16px"
|
<div class="no-wrap" :class="selectedEvent && prop.node.eventId === selectedEvent.eventId ? 'selected-node' : ''" >{{ prop.node.label }}</div>
|
||||||
class="q-mr-sm">
|
<q-space></q-space>
|
||||||
</q-icon>
|
<q-icon name="delete_forever" color="negative" size="16px" @click="deleteEvent(prop.node)"></q-icon>
|
||||||
<div>{{ prop.node.label }}</div>
|
|
||||||
</div>
|
|
||||||
<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>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</q-tree>
|
</q-tree>
|
||||||
|
|||||||
@@ -61,12 +61,12 @@ export default defineComponent({
|
|||||||
if(store.eventTree.findEventById(addEventId)){
|
if(store.eventTree.findEventById(addEventId)){
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
customEvents.events.push(
|
customEvents.events.push({
|
||||||
new kintoneEvent(
|
eventId: addEventId,
|
||||||
displayName,
|
label: displayName,
|
||||||
addEventId,
|
parentId: customButtonId,
|
||||||
customButtonId)
|
header: 'DELETABLE'
|
||||||
);
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -113,19 +113,19 @@ export const useFlowEditorStore = defineStore('flowEditor', {
|
|||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
deleteEvent(event: IKintoneEvent) {
|
async deleteEvent(event: IKintoneEvent) {
|
||||||
const store = useFlowEditorStore();
|
const store = useFlowEditorStore();
|
||||||
if (event.flowData) {
|
if (event.flowData) {
|
||||||
const flow = event.flowData;
|
const flow = event.flowData;
|
||||||
if (flow.id === '') {
|
if (flow.id !== '') {
|
||||||
return;
|
await flowCtrl.DeleteFlow(flow.id)
|
||||||
|
if (this.flows) {
|
||||||
|
this.flows = this.flows.filter((f) => f.id !== flow.id);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
flowCtrl.DeleteFlow(flow.id)
|
|
||||||
eventTree.deleteEvent(event, store);
|
eventTree.deleteEvent(event, store);
|
||||||
if(this.flows){
|
}
|
||||||
this.flows = this.flows.filter((f) => f.id !== flow.id);
|
else {
|
||||||
}
|
|
||||||
} else {
|
|
||||||
eventTree.deleteEvent(event, store);
|
eventTree.deleteEvent(event, store);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -95,10 +95,7 @@ export class KintoneEventManager {
|
|||||||
const lastIndex = eventId.lastIndexOf('.');
|
const lastIndex = eventId.lastIndexOf('.');
|
||||||
const groupId = eventId.substring(0, lastIndex);
|
const groupId = eventId.substring(0, lastIndex);
|
||||||
const eventNode = this.findEventById(groupId);
|
const eventNode = this.findEventById(groupId);
|
||||||
if (
|
if (eventNode && (eventNode.header === 'EVENTGROUP' || eventNode.header === 'CHANGE')) {
|
||||||
eventNode &&
|
|
||||||
(eventNode.header === 'EVENTGROUP' || eventNode.header === 'CHANGE')
|
|
||||||
) {
|
|
||||||
const groupEvent = eventNode as kintoneEventGroup;
|
const groupEvent = eventNode as kintoneEventGroup;
|
||||||
|
|
||||||
const newEvent = {
|
const newEvent = {
|
||||||
|
|||||||
Reference in New Issue
Block a user