カスケード式ドロップダウンメニューを追加するコード

frontend/src/components/right/MultiDropDown.vue

@@ -0,0 +1,79 @@
+<template>
+  <div v-bind="$attrs">
+    <q-field :label="displayName" labelColor="primary" stack-label lazy-rules="ondemand" ref="fieldRef">
+      <template v-slot:control>
+        <q-card flat class="full-width">
+          <q-card-actions vertical>
+            <q-btn color="grey-3" text-color="black" @click="() => { dgIsShow = true }">設定ドロップダウンメニュー</q-btn>
+          </q-card-actions>
+          <q-card-section class="text-caption">
+            <div v-if="data.dropDownApp?.name">
+              {{ `${data.sourceApp?.name} -> ${data.dropDownApp?.name}` }}
+            </div>
+            <div v-else>{{ placeholder }}</div>
+          </q-card-section>
+        </q-card>
+      </template>
+    </q-field>
+  </div>
+
+  <ShowDialog v-model:visible="dgIsShow" name="設定ドロップダウンメニュー" @close="closeDg" min-width="50vw" min-height="20vh" disableBtn>
+    <div class="q-mb-md q-ml-md q-mr-md">
+      <MultiDropDownBox v-model:model-value="data" :finishDialogHandler="finishDialogHandler" />
+    </div>
+  </ShowDialog>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, watchEffect } from 'vue';
+import ShowDialog from '../ShowDialog.vue';
+import MultiDropDownBox from '../MuiltDropDownBox.vue';
+
+export default defineComponent({
+  inheritAttrs: false,
+  name: 'MultiDropDown',
+  components: {
+    ShowDialog,
+    MultiDropDownBox
+  },
+  props: {
+    displayName: {
+      type: String,
+      default: '',
+    },
+    placeholder: {
+      type: String,
+      default: '',
+    },
+    modelValue: {
+      type: Object,
+      default: () => { ({}) }
+    },
+  },
+  setup(props, { emit }) {
+    const dgIsShow = ref(false);
+    const data = ref(props.modelValue);
+
+    const closeDg = (state: string) => {
+      dgIsShow.value = false;
+    };
+
+    const finishDialogHandler = (boxData) => {
+      data.value = boxData
+      dgIsShow.value = false
+      emit('update:modelValue', data.value);
+    }
+    
+    watchEffect(() => {
+      emit('update:modelValue', data.value);
+    });
+
+    return {
+      dgIsShow,
+      closeDg,
+      data,
+      finishDialogHandler,
+    };
+  }
+});
+</script>

frontend/src/components/right/PropertyList.vue

@@ -24,6 +24,7 @@ import NumInput from './NumInput.vue';
 import DataProcessing from './DataProcessing.vue';
 import DataMapping from './DataMapping.vue';
 import AppSelect from './AppSelect.vue';
+import MultiDropDown from './MultiDropDown.vue';
 import { IActionNode,IActionProperty,IProp } from 'src/types/ActionTypes';
 
 export default defineComponent({
@@ -41,7 +42,8 @@ export default defineComponent({
     NumInput,
     DataProcessing,
     DataMapping,
-    AppSelect
+    AppSelect,
+    MultiDropDown
   },
   props: {
     nodeProps: {