alicorn-dev/KintoneAppBuilder
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ボタンクリックイベント対応

Browse Source
This commit is contained in:
maxiaozhe@alicorns.co.jp
2024-03-01 22:47:37 +09:00
parent 72608a8ffd
commit 03904a4e35
19 changed files with 676 additions and 1419 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
frontend/src/components/left/EventTree.vue
View File

@@ -2,13 +2,14 @@
<!-- <div class="q-pa-md q-gutter-sm"> -->
<q-tree
:nodes="store.eventTree.screens"
node-key="label"
node-key="eventId"
children-key="events"
no-connectors
v-model:expanded="store.expandedScreen"
:dense="true"
:ref="tree"
>
<template v-slot:default-header="prop">
<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"
@@ -16,27 +17,78 @@
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> -->
</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>
</template>
</q-tree>
<!-- </div> -->
<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>
</template>
<script lang="ts">
import { defineComponent, computed, ref } from 'vue';
import { IKintoneEvent } from '../../types/KintoneEvents';
import { IKintoneEvent ,IKintoneEventGroup, IKintoneEventNode, kintoneEvent} from '../../types/KintoneEvents';
import { storeToRefs } from 'pinia';
import { useFlowEditorStore } from 'stores/flowEditor';
import { ActionFlow, ActionNode, RootAction } from 'src/types/ActionTypes';
import ShowDialog from '../ShowDialog.vue';
import FieldSelect from '../FieldSelect.vue';
import { QTree } from 'quasar';
export default defineComponent({
name: 'EventTree',
components: {
ShowDialog,
FieldSelect,
},
setup(props, context) {
const appDg = ref();
const store = useFlowEditorStore();
const showDialog = ref(false);
const tree = ref<QTree>();
// const eventTree=ref(kintoneEvents);
// 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 closeDg = (val:string) => {
if (val == 'OK') {
if(!selectedChangeEvent.value){return;}
const field = appDg.value.selected[0];
const eventid = `${selectedChangeEvent.value.eventId}.${field.code}`;
if(store.eventTree.findEventById(eventid)){
return;
}
selectedChangeEvent.value?.events.push(
new kintoneEvent(
field.label,
eventid,
selectedChangeEvent.value.eventId)
);
tree.value?.expanded?.push(selectedChangeEvent.value.eventId);
tree.value?.expandAll();
}
};
const addChangeEvent=(node:IKintoneEventGroup)=>{
if(store.appInfo===undefined){
return;
}
selectedChangeEvent.value=node;
showDialog.value=true;
}
const onSelected=(node:IKintoneEvent)=>{
if(!node.eventId){
return;
@@ -45,24 +97,35 @@ export default defineComponent({
if(store.appInfo===undefined){
return;
}
const screen = store.eventTree.findScreen(node.eventId);
const screen = store.eventTree.findEventById(node.parentId);
let flow =store.findFlowByEventId(node.eventId);
const screenName=screen!==null?screen.label:"";
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,node.label)
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,
// expanded,
appDg,
tree,
showDialog,
isFieldChange,
onSelected,
selectedEvent,
addChangeEvent,
closeDg,
store
}
}
@@ -83,4 +146,6 @@ export default defineComponent({
.event-node:hover{
background-color: $light-blue-1;
}
</style>

44
frontend/src/components/right/ActionProperty.vue
View File

@@ -1,25 +1,27 @@
<template>
<div>
<div v-for="(item, index) in componentData" :key="index">
<component :is="item.component" v-bind="item.props" v-model="item.props.modelValue"></component>
<component :is="item.component" v-bind="item.props" :connectProps="connectProps" v-model="item.props.modelValue"></component>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { defineComponent,computed } from 'vue';
import InputText from '../right/InputText.vue';
import SelectBox from '../right/SelectBox.vue';
import DatePicker from '../right/DatePicker.vue';
import FieldInput from '../right/FieldInput.vue';
import EventSetter from '../right/EventSetter.vue';
import { IActionProperty, IProp } from 'src/types/ActionTypes';
export default defineComponent({
name: 'ActionProperty',
components: {
InputText,
SelectBox,
DatePicker,
FieldInput
FieldInput,
EventSetter
},
props: {
jsonData: {
@@ -31,27 +33,43 @@ export default defineComponent({
required: false,
}
},
computed: {
componentData() {
return this.jsonData.elements.map((element: any) => {
if(this.jsonValue != undefined )
setup(props){
const componentData=computed<Array<IActionProperty>>(()=>{
return props.jsonData.elements.map((element: any) => {
if(props.jsonValue != undefined )
{
if(this.jsonValue.hasOwnProperty(element.props.name))
if(props.jsonValue.hasOwnProperty(element.props.name))
{
element.props.modelValue = this.jsonValue[element.props.name];
element.props.modelValue = props.jsonValue[element.props.name];
}
else
{
element.props.modelValue = '';
}
}
return {
component: element.component,
props: element.props,
};
});
},
},
});
const connectProps=(props:IProp)=>{
const connProps:any={};
if(props && "connectProps" in props && props.connectProps!=undefined){
for(let connProp of props.connectProps){
let targetProp = componentData.value.find((prop)=>prop.props.name===connProp.propName);
if(targetProp){
connProps[connProp.key]=targetProp;
}
}
}
return connProps;
}
return{
componentData,
connectProps
}
}
});
</script>

80
frontend/src/components/right/EventSetter.vue Normal file
View File

@@ -0,0 +1,80 @@
<template>
<q-input :label="displayName" v-model="inputValue" label-color="primary" :placeholder="placeholder" stack-label>
<template v-slot:append>
<q-btn round dense flat icon="add" @click="addButtonEvent()" />
</template>
</q-input>
</template>
<script lang="ts">
import { defineComponent,ref,watchEffect } from 'vue';
import { useFlowEditorStore } from '../../stores/flowEditor';
import { IKintoneEventGroup,kintoneEvent } from 'src/types/KintoneEvents';
export default defineComponent({
name: 'EventSetter',
props: {
displayName:{
type: String,
default: '',
},
name:{
type: String,
default: '',
},
placeholder: {
type: String,
default: '',
},
hint:{
type: String,
default: '',
},
modelValue: {
type: String,
default: '',
},
connectProps:{
type:Object,
default:undefined
}
},
setup(props , { emit }) {
const inputValue = ref(props.modelValue);
const store = useFlowEditorStore();
const addButtonEvent=()=>{
const eventId =store.currentFlow?.getRoot()?.name;
if(eventId===undefined){return;}
let displayName = inputValue.value;
if(props.connectProps!==undefined && "displayName" in props.connectProps){
displayName =props.connectProps["displayName"].props.modelValue;
}
const customButtonId=`${eventId}.customButtonClick`;
const findedEvent = store.eventTree.findEventById(customButtonId);
if(findedEvent && "events" in findedEvent){
const customEvents = findedEvent as IKintoneEventGroup;
const addEventId = customButtonId+"." + inputValue.value;
if(store.eventTree.findEventById(addEventId)){
return;
}
customEvents.events.push(
new kintoneEvent(
displayName,
addEventId,
customButtonId)
);
}
}
watchEffect(() => {
emit('update:modelValue', inputValue.value);
});
return {
inputValue,
addButtonEvent
};
},
});
</script>

25
frontend/src/components/right/PropertyList.vue
View File

@@ -1,7 +1,7 @@
<template>
<div>
<div v-for="(item, index) in properties" :key="index" >
<component :is="item.component" v-bind="item.props" v-model="item.props.modelValue"></component>
<component :is="item.component" v-bind="item.props" :connectProps="connectProps(item.props)" v-model="item.props.modelValue"></component>
</div>
</div>
</template>
@@ -17,7 +17,8 @@ import DatePicker from '../right/DatePicker.vue';
import FieldInput from '../right/FieldInput.vue';
import MuiltInputText from '../right/MuiltInputText.vue';
import ConditionInput from '../right/ConditionInput.vue';
import { IActionNode,IActionProperty } from 'src/types/ActionTypes';
import EventSetter from '../right/EventSetter.vue';
import { IActionNode,IActionProperty,IProp } from 'src/types/ActionTypes';
export default defineComponent({
name: 'PropertyList',
@@ -27,7 +28,8 @@ export default defineComponent({
DatePicker,
FieldInput,
MuiltInputText,
ConditionInput
ConditionInput,
EventSetter
},
props: {
nodeProps: {
@@ -40,9 +42,22 @@ export default defineComponent({
}
},
setup(props, context) {
const properties=ref(props.nodeProps)
const properties=ref(props.nodeProps);
const connectProps=(props:IProp)=>{
const connProps:any={};
if(props && "connectProps" in props && props.connectProps!=undefined){
for(let connProp of props.connectProps){
let targetProp = properties.value.find((prop)=>prop.props.name===connProp.propName);
if(targetProp){
connProps[connProp.key]=targetProp;
}
}
}
return connProps;
}
return {
properties
properties,
connectProps
}
}
});