条件エディタ追加

2024-01-22 10:52:55 +09:00
parent 276e5e9122
commit 5cd6d02f6e
29 changed files with 1209 additions and 382 deletions
--- a/frontend/src/components/ConditionEditor/ConditionObject.vue
+++ b/frontend/src/components/ConditionEditor/ConditionObject.vue
@@ -0,0 +1,79 @@
+<template>
+  <q-field v-model="selectedField" labelColor="primary" class="condition-object"
+          :clearable="isSelected" stack-label  :dense="true" :outlined="true" >
+    <template v-slot:control >
+      <q-chip  color="primary" text-color="white"  v-if="isSelected" :dense="true" class="selected-obj">
+        {{ selectedField.name }}
+      </q-chip>
+    </template>
+   <template v-slot:append>
+    <q-icon name="search" class="cursor-pointer"  @click="showDg"/>
+    </template>
+  </q-field>
+  <show-dialog v-model:visible="show" 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, ref ,watchEffect,computed} from 'vue';
+  import ShowDialog from '../ShowDialog.vue';
+  import FieldSelect from '../FieldSelect.vue';
+  import { useFlowEditorStore } from '../../stores/flowEditor';
+  export default defineComponent({
+    name: 'ConditionObject',
+    components: {
+      ShowDialog,
+      FieldSelect,
+    },
+    props: {
+      modelValue: {
+        type: Object,
+        default: null
+      },
+    },
+    setup(props, { emit }) {
+      const appDg = ref();
+      const show = ref(false);
+      const selectedField = ref(props.modelValue);
+      const store = useFlowEditorStore();
+      const isSelected = computed(()=>{
+        return selectedField.value!==null && typeof selectedField.value === 'object' && ('name' in selectedField.value)
+      });
+
+      const showDg = () => {
+        show.value = true;
+      };
+
+      const closeDg = (val:string) => {
+        if (val == 'OK') {
+          selectedField.value = appDg.value.selected[0];
+        }
+      };
+
+      watchEffect(() => {
+        emit('update:modelValue', selectedField.value);
+      });
+
+      return {
+        store,
+        appDg,
+        show,
+        showDg,
+        closeDg,
+        selectedField,
+        isSelected
+      };
+    }
+  });
+  </script>
+<style lang="scss">
+.condition-object{
+  min-width: 200px;
+  max-height: 40px;
+  padding: 2px;
+}
+.selected-obj{
+  margin: 0px;
+}
+</style>