条件演算子をカスタマイズし、kintoneクエリ文字列に変換することができます。

frontend/src/components/right/ConditionInput.vue

@@ -21,7 +21,7 @@
 
 
 <script lang="ts">
-import { ConditionNode, ConditionTree, Operator } from 'app/src/types/Conditions';
+import { ConditionNode, ConditionTree, Operator, OperatorListItem } from 'app/src/types/Conditions';
 import { computed, defineComponent, provide, reactive, ref, watchEffect } from 'vue';
 import ConditionEditor from '../ConditionEditor/ConditionEditor.vue';
 
@@ -81,6 +81,9 @@ export default defineComponent({
     onlySourceSelect: {
       type: Boolean,
       default: false
+    },
+    operatorList: {
+      type: Array,
     }
   },
 
@@ -95,6 +98,8 @@ export default defineComponent({
       }
     }
 
+    provide('Operator', props.operatorList);
+
     const btnDisable = computed(() => {
       const onlySourceSelect = props.onlySourceSelect;
 
@@ -116,7 +121,7 @@ export default defineComponent({
     if (props.modelValue && props.modelValue !== '') {
       tree.fromJson(props.modelValue);
     } else {
-      const newNode = new ConditionNode({}, Operator.Equal, '', tree.root);
+      const newNode = new ConditionNode({}, (props.operatorList && props.operatorList.length > 0) ? props.operatorList[0] as OperatorListItem : Operator.Equal, '', tree.root);
       tree.addNode(tree.root, newNode);
     }
 
@@ -132,13 +137,15 @@ export default defineComponent({
 
     const onClosed = (val: string) => {
       if (val == 'OK') {
-        const conditionJson = tree.toJson();
         isSetted.value = true;
+        tree.setQuery(tree.buildConditionQueryString(tree.root));
+        const conditionJson = tree.toJson();
         emit('update:modelValue', conditionJson);
       }
     };
 
     watchEffect(() => {
+      tree.setQuery(tree.buildConditionQueryString(tree.root));
       const conditionJson = tree.toJson();
       emit('update:modelValue', conditionJson);
     });