ログの削除

# Conflicts:
#	plugin/kintone-addins/package.json
#	plugin/kintone-addins/vite.config.js

frontend/src/components/AppFieldSelectBox.vue

@@ -0,0 +1,128 @@
+<template>
+
+    <div class="q-mx-md q-mb-lg">
+        <div class="q-mb-xs q-ml-md text-primary">アプリ選択</div>
+
+        <div class="q-pa-md row" style="border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 4px;">
+            <div v-if="selField?.app && !showSelectApp">{{ selField?.app?.name }}</div>
+            <q-space />
+            <div>
+                <q-btn outline dense label="選 択" padding="none sm" color="primary" @click="() => {
+                    showSelectApp = true;
+                }"></q-btn>
+            </div>
+        </div>
+    </div>
+
+    <div v-if="!showSelectApp && selField?.app?.name">
+        <div>
+            <div class="row q-mb-md">
+                <!-- <div class="col"> -->
+                <div class="q-mb-xs q-ml-md text-primary">フィールド選択</div>
+                <!-- </div> -->
+                <q-space />
+                <!-- <div class="col"> -->
+                <div class="q-mr-md">
+                    <q-input dense debounce="300" v-model="fieldFilter" placeholder="フィールド検索" clearable>
+                        <template v-slot:before>
+                            <q-icon name="search" />
+                        </template>
+                    </q-input>
+                </div>
+            </div>
+            <div class="row">
+                <field-select ref="fieldDlg" name="フィールド" :type="selectType" :updateSelectFields="updateSelectFields"
+                    :appId="selField?.app?.id" not_page :filter="fieldFilter"
+                    :selectedFields="selField.fields"></field-select>
+            </div>
+        </div>
+    </div>
+    <div style="min-width: 45vw;" v-else>
+    </div>
+
+
+    <show-dialog v-model:visible="showSelectApp" name="アプリ選択">
+        <template v-slot:toolbar>
+            <q-input dense debounce="300" v-model="filter" placeholder="検索" clearable>
+                <template v-slot:before>
+                    <q-icon name="search" />
+                </template>
+            </q-input>
+        </template>
+
+        <AppSelectBox ref="appDlg" name="アプリ" type="single" :filter="filter"
+            :updateSelectApp="updateSelectApp"></AppSelectBox>
+    </show-dialog>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, watchEffect, computed, reactive } from 'vue';
+import ShowDialog from './ShowDialog.vue';
+import FieldSelect from './FieldSelect.vue';
+import AppSelectBox from './AppSelectBox.vue';
+interface IApp {
+    id: string,
+    name: string
+}
+interface IField {
+    name: string,
+    code: string,
+    type: string
+}
+
+interface IAppFields {
+    app?: IApp,
+    fields: IField[]
+}
+
+export default defineComponent({
+    inheritAttrs: false,
+    name: 'AppFieldSelectBox',
+    components: {
+        ShowDialog,
+        FieldSelect,
+        AppSelectBox,
+    },
+    props: {
+        selectedField: {
+            type: Object,
+            required: true
+        },
+        selectType: {
+            type: String,
+            default: 'single'
+        },
+
+    },
+    setup(props, { emit }) {
+        const showSelectApp = ref(false);
+        const selField = reactive(props.selectedField);
+
+        const isSelected = computed(() => {
+            return selField !== null && typeof selField === 'object' && ('app' in selField)
+        });
+
+        const updateSelectApp = (newAppinfo: IApp) => {
+            selField.app = newAppinfo
+        }
+        
+        const updateSelectFields = (newFields: IField[]) => {
+            selField.fields = newFields
+        }
+
+        watchEffect(() => {
+            emit('update:modelValue', selField);
+        });
+
+        return {
+            showSelectApp,
+            isSelected,
+            updateSelectApp,
+            filter: ref(),
+            updateSelectFields,
+            fieldFilter: ref(),
+            selField
+        };
+    }
+});
+</script>

frontend/src/components/AppSelectBox.vue

@@ -21,12 +21,12 @@ import { ref, onMounted, reactive, watchEffect } from 'vue'
 import { api } from 'boot/axios';
 
 export default {
-  name: 'AppSelect',
+  name: 'AppSelectBox',
   props: {
     name: String,
     type: String,
     filter: String,
-    updateExternalSelectAppInfo: {
+    updateSelectApp: {
       type: Function
     }
   },
@@ -42,8 +42,8 @@ export default {
     const selected = ref([])
 
     watchEffect(()=>{
-      if (selected.value && selected.value[0] && props.updateExternalSelectAppInfo) {
+      if (selected.value && selected.value[0] && props.updateSelectApp) {
-        props.updateExternalSelectAppInfo(selected.value[0])
+        props.updateSelectApp(selected.value[0])
       }
     });
     onMounted(() => {

frontend/src/components/ConditionEditor/ConditionObject.vue

@@ -1,20 +1,21 @@
 <template>
-  <q-field v-model="selectedObject" labelColor="primary" class="condition-object"
+  <q-field labelColor="primary" class="condition-object" :clearable="isSelected" stack-label :dense="true"
-          :clearable="isSelected" stack-label  :dense="true" :outlined="true" >
+    :outlined="true">
-    <template v-slot:control >
+    <template v-slot:control>
-      <q-chip  color="primary" text-color="white" v-if="isSelected && selectedObject.objectType==='field'" :dense="true" class="selected-obj">
+      <!-- <q-chip  color="primary" text-color="white" v-if="isSelected && selectedObject.objectType==='field'" :dense="true" class="selected-obj">
         {{ selectedObject.name }}
       </q-chip>
       <q-chip  color="info" text-color="white" v-if="isSelected && selectedObject.objectType==='variable'" :dense="true" class="selected-obj">
         {{ selectedObject.name.name }}
-      </q-chip>
+      </q-chip> -->
+      {{ selectedObject?.sharedText }}
     </template>
-   <template v-slot:append>
+    <template v-slot:append>
-    <q-icon name="search" class="cursor-pointer"  @click="showDg"/>
+      <q-icon name="search" class="cursor-pointer" @click="showDg" />
     </template>
   </q-field>
-  <show-dialog v-model:visible="show" name="設定項目一覧" @close="closeDg" min-width="400px">
+  <show-dialog v-model:visible="show" name="設定項目" @close="closeDg" min-width="400px">
-    <template v-slot:toolbar>
+    <!-- <template v-slot:toolbar>
         <q-input  dense debounce="200" v-model="filter" placeholder="検索" clearable>
           <template v-slot:before>
             <q-icon name="search" />
@@ -22,75 +23,101 @@
         </q-input>
     </template>
     <condition-objects ref="appDg" name="フィールド" type="single" :filter="filter" :appId="store.appInfo?.appId" :vars="vars"></condition-objects>
+  -->
+    <DynamicItemInput v-model:selectedObject="selectedObject" :canInput="config.canInput"
+      :buttonsConfig="config.buttonsConfig" :appId="store.appInfo?.appId" />
   </show-dialog>
-  </template>
+</template>
 
-  <script lang="ts">
+<script lang="ts">
-  import { defineComponent, reactive, ref ,watchEffect,computed} from 'vue';
+import { defineComponent, reactive, ref, watchEffect, computed } from 'vue';
-  import ShowDialog from '../ShowDialog.vue';
+import ShowDialog from '../ShowDialog.vue';
-  import ConditionObjects from '../ConditionObjects.vue';
+// import ConditionObjects from '../ConditionObjects.vue';
-  import { useFlowEditorStore } from '../../stores/flowEditor';
+import DynamicItemInput from '../DynamicItemInput/DynamicItemInput.vue';
-  import {IActionFlow,IActionNode,IActionVariable} from '../../types/ActionTypes';
+import { useFlowEditorStore } from '../../stores/flowEditor';
-  export default defineComponent({
+import { IActionFlow, IActionNode, IActionVariable } from '../../types/ActionTypes';
-    name: 'ConditionObject',
+export default defineComponent({
-    components: {
+  name: 'ConditionObject',
-      ShowDialog,
+  components: {
-      ConditionObjects
+    ShowDialog,
-    },
+    DynamicItemInput,
-    props: {
+    // ConditionObjects
-      modelValue: {
+  },
-        type: Object,
+  props: {
-        default: null
+    config: {
-      },
+      type: Object,
-    },
+      default: () => {
-    setup(props, { emit }) {
+        return {
-      const appDg = ref();
+          canInput: false,
-      const show = ref(false);
+          buttonsConfig: [
-      const selectedObject = ref(props.modelValue);
+            { label: 'フィールド', color: 'primary', type: 'FieldAdd' },
-      const store = useFlowEditorStore();
+            { label: '変数', color: 'green', type: 'VariableAdd' },
-      const isSelected = computed(()=>{
+          ]
-        return selectedObject.value!==null && typeof selectedObject.value === 'object' && ('name' in selectedObject.value)
+        };
-      });
-      let vars:IActionVariable[] =[];
-      if(store.currentFlow!==undefined && store.activeNode!==undefined ){
-        vars =store.currentFlow.getVarNames(store.activeNode);
       }
-      const filter=ref('');
+    },
-      const showDg = () => {
+    modelValue: {
-        show.value = true;
+      type: Object,
-      };
+      default: null
-
+    },
-      const closeDg = (val:string) => {
+  },
-        if (val == 'OK') {
+  setup(props, { emit }) {
-          selectedObject.value = appDg.value.selected[0];
+    // const appDg = ref();
-        }
+    const show = ref(false);
-      };
+    const selectedObject = ref(props.modelValue);
-
+    const store = useFlowEditorStore();
-      watchEffect(() => {
+    // const sharedText = ref(''); // 共享的文本状态
-        emit('update:modelValue', selectedObject.value);
+    const isSelected = computed(() => {
-      });
+      return selectedObject?.value?.sharedText !== '';
-
+    });
-      return {
+    // const isSelected = computed(()=>{
-        store,
+    //   return selectedObject.value!==null && typeof selectedObject.value === 'object' && ('name' in selectedObject.value)
-        appDg,
+    // });
-        show,
+    let vars: IActionVariable[] = [];
-        showDg,
+    if (store.currentFlow !== undefined && store.activeNode !== undefined) {
-        closeDg,
+      vars = store.currentFlow.getVarNames(store.activeNode);
-        selectedObject,
-        vars:reactive(vars),
-        isSelected,
-        filter
-      };
     }
-  });
+    // const filter=ref('');
-  </script>
+    const showDg = () => {
+      show.value = true;
+    };
+
+    const closeDg = (val: string) => {
+      if (val == 'OK') {
+        // selectedObject.value = appDg.value.selected[0];
+      }
+    };
+
+    watchEffect(() => {
+      emit('update:modelValue', selectedObject.value);
+    });
+
+    return {
+      store,
+      // appDg,
+      show,
+      showDg,
+      closeDg,
+      selectedObject,
+      vars: reactive(vars),
+      isSelected,
+      buttonsConfig: [
+        { label: 'フィールド', color: 'primary', type: 'FieldAdd' },
+        { label: '変数', color: 'green', type: 'VariableAdd' },
+      ]
+      // filter
+    };
+  }
+});
+</script>
 <style lang="scss">
-.condition-object{
+.condition-object {
   min-width: 200px;
   max-height: 40px;
   margin: 0 2px;
 }
-.selected-obj{
+
+.selected-obj {
   margin: 0 2px;
 }
 </style>

frontend/src/components/ConditionEditor/NodeCondition.vue

@@ -67,11 +67,13 @@
           <!-- condition -->
           <div @click.stop @keypress.stop v-else >
             <div class="row no-wrap items-center q-my-xs">
-              <ConditionObject v-bind="prop.node" v-model="prop.node.object" class="col-4"></ConditionObject>
+              <ConditionObject v-bind="prop.node" v-model="prop.node.object" :config="leftDynamicItemConfig" class="col-4"/>
               <q-select v-model="prop.node.operator" :options="operators"  class="operator" :outlined="true" :dense="true"></q-select>
-              <q-input v-if="!prop.node.object || !('options' in prop.node.object)"
+              <ConditionObject v-bind="prop.node" v-model="prop.node.value" :config="rightDynamicItemConfig" class="col-4"/>
+              <!-- <ConditionObject v-bind="prop.node" v-model="prop.node.object" class="col-4"/> -->
+              <!-- <q-input v-if="!prop.node.object || !('options' in prop.node.object)"
                         v-model="prop.node.value"
-                        class="condition-value" :outlined="true" :dense="true" ></q-input>
+                        class="condition-value" :outlined="true" :dense="true" ></q-input> -->
               <q-select v-if="prop.node.object && ('options' in prop.node.object)"
                         v-model="prop.node.value"
                         :options="objectValueOptions(prop.node.object.options)"
@@ -113,7 +115,7 @@ import { finished } from 'stream';
   </div>
 </template>
 <script lang="ts">
-import { defineComponent,ref,reactive, computed } from 'vue';
+import { defineComponent,ref,reactive, computed, inject } from 'vue';
 import { INode,ConditionTree,GroupNode,ConditionNode, LogicalOperator,Operator,NodeType } from '../../types/Conditions';
 import ConditionObject from './ConditionObject.vue';
 export default defineComponent( {
@@ -143,12 +145,9 @@ export default defineComponent( {
       return opts;
     });
 
+    const operator = inject('Operator')
     const operators =computed(()=>{
-      const opts=[];
+      return operator ? operator : Object.values(Operator);
-      for(const op in Operator){
-        opts.push(Operator[op as keyof typeof Operator]);
-      }
-      return opts;
     });
     const tree = reactive(props.conditionTree);
 
@@ -228,6 +227,8 @@ export default defineComponent( {
     // addCondition(tree.root);
 
     return {
+      leftDynamicItemConfig :inject('leftDynamicItemConfig'),
+      rightDynamicItemConfig:inject('rightDynamicItemConfig'),
       showingCondition,
       conditionString,
       tree,

frontend/src/components/DynamicItemInput/DynamicItemInput.vue

@@ -0,0 +1,141 @@
+<template>
+    <div class="q-mx-md" style="max-width: 600px;">
+        <!-- <q-card> -->
+        <div class="q-mb-md">
+            <q-input ref="inputRef" outlined dense debounce="200" @update:model-value="updateSharedText"
+                v-model="sharedText" :readonly="!canInput">
+                <template v-slot:append>
+                    <q-btn flat round padding="none" icon="cancel" @click="clearSharedText" color="grey-6" />
+                </template>
+            </q-input>
+
+        </div>
+
+        <div class="row q-gutter-sm">
+            <q-btn v-for="button in buttonsConfig" :key="button.type" :color="button.color" @mousedown.prevent
+                @click="openDialog(button)" size="sm">
+                {{ button.label }}
+            </q-btn>
+        </div>
+
+        <show-dialog v-model:visible="dialogVisible" :name="currentDialogName" @close="closeDialog" min-width="400px">
+            <template v-slot:toolbar>
+                <q-input dense debounce="200" v-model="filter" clearable>
+                    <template v-slot:before>
+                        <q-icon name="search" />
+                    </template>
+                </q-input>
+            </template>
+            <!-- asdf -->
+            <component :is="currentComponent" @select="handleSelect" :filter="filter" :appId="appId" />
+        </show-dialog>
+        <!-- </q-card> -->
+    </div>
+</template>
+
+<script lang="ts">
+import { ref, inject, watchEffect, defineComponent } from 'vue';
+import FieldAdd from './FieldAdd.vue';
+import VariableAdd from './VariableAdd.vue';
+// import FunctionAdd from './FunctionAdd.vue';
+import ShowDialog from '../ShowDialog.vue';
+
+type ButtonConfig = {
+    label: string;
+    color: string;
+    type: string;
+    editable: boolean;
+};
+
+export default defineComponent({
+    name: 'DynamicItemInput',
+    components: {
+        FieldAdd,
+        VariableAdd,
+        // FunctionAdd,
+        ShowDialog
+    },
+    props: {
+        // canInput: {
+        //     type: Boolean,
+        //     default: false
+        // },
+        appId: {
+            type: String,
+        },
+        selectedObject: {
+            default: {}
+        },
+        buttonsConfig: {
+            type: Array as () => ButtonConfig[],
+            default: () => [
+                { label: 'フィールド', color: 'primary', type: 'FieldAdd' }
+            ]
+        }
+    },
+    setup(props, { emit }) {
+        const filter = ref('');
+        const dialogVisible = ref(false);
+        const currentDialogName = ref('');
+        const currentComponent = ref('FieldAdd');
+        const sharedText = ref(props.selectedObject?.sharedText ?? '');
+        const inputRef = ref();
+        const canInput = ref(true);
+        const editable = ref(false);
+
+        const openDialog = (button: ButtonConfig) => {
+            currentDialogName.value = button.label;
+            currentComponent.value = button.type;
+            dialogVisible.value = true;
+            editable.value = button.editable ?? true;
+        };
+
+        const closeDialog = () => {
+            dialogVisible.value = false;
+        };
+
+        const handleSelect = (value) => {
+            // 获取当前光标位置
+            // const cursorPosition = inputRef.value.getNativeElement().selectionStart;
+            // if (cursorPosition === undefined || cursorPosition === 0) {
+            sharedText.value = `${value._t}`;
+            // } else {
+            //     const textBefore = sharedText.value.substring(0, cursorPosition);
+            //     const textAfter = sharedText.value.substring(cursorPosition);
+            //     sharedText.value = `${textBefore}${value._t}${textAfter}`;
+            // }
+            
+            if (value && value._t && (value._t as string).length > 0) {
+                canInput.value = editable.value;
+            }
+            emit('update:selectedObject', { sharedText: sharedText.value, ...value });
+            dialogVisible.value = false;
+        };
+
+        const clearSharedText = () => {
+            sharedText.value = '';
+            canInput.value = true;
+            emit('update:selectedObject', {});
+        }
+        const updateSharedText = (value) => {
+            sharedText.value = value;
+            emit('update:selectedObject', { ...props.selectedObject, sharedText: value });
+        }
+
+        return {
+            filter,
+            dialogVisible,
+            currentDialogName,
+            currentComponent,
+            canInput,
+            openDialog,
+            closeDialog,
+            handleSelect,
+            clearSharedText,
+            updateSharedText,
+            sharedText,
+            inputRef
+        };
+    }
+});
+</script>

frontend/src/components/DynamicItemInput/FieldAdd.vue

@@ -0,0 +1,41 @@
+<template>
+    <field-list v-model="selected" type="single" :filter="filter" :appId="sourceApp ? sourceApp : appId"
+        :fields="sourceFields" @update:modelValue="handleSelect" />
+</template>
+<script lang="ts">
+import { computed, inject, ref } from 'vue';
+import FieldList from '../FieldList.vue';
+export default {
+    name: 'FieldAdd',
+    components: {
+        FieldList,
+    },
+    props: {
+        appId: Number,
+        filter: String
+    },
+    setup(props, { emit }) {
+        const sourceFields = inject<Array<unknown>>('sourceFields')
+        const sourceApp = inject<number>('sourceApp')
+        const appId = computed(() => {
+            if (sourceFields || sourceApp) {
+                return sourceApp.value
+            } else {
+                return props.appId
+            }
+        });
+        return {
+            sourceFields,
+            sourceApp,
+            selected: ref([]),
+            handleSelect: (newSelection: any[]) => {
+                
+                if (newSelection.length > 0) {
+                    const v = newSelection[0]
+                    emit('select', { _t: `field(${appId.value},${v.name})`, ...v }); // 假设您只需要选择的第一个字段的名称
+                }
+            }
+        }
+    },
+}
+</script>

frontend/src/components/DynamicItemInput/VariableAdd.vue

@@ -0,0 +1,42 @@
+<template>
+    <variable-list v-model="selected" type="single" :vars="vars" :filter="filter" @update:modelValue="handleSelect" />
+</template>
+<script lang="ts">
+import { ref } from 'vue';
+import VariableList from '../VariableList.vue';
+import { useFlowEditorStore } from 'src/stores/flowEditor';
+import { IActionVariable } from 'src/types/ActionTypes';
+export default {
+    name: 'VariableAdd',
+    components: {
+        VariableList,
+    },
+    props: {
+        appId: Number,
+        filter: String
+    },
+    setup(props, { emit }) {
+        const store = useFlowEditorStore();
+        let vars: IActionVariable[] = [];
+        console.log(store.currentFlow !== undefined && store.activeNode !== undefined);
+        
+        if (store.currentFlow !== undefined && store.activeNode !== undefined) {
+            vars = store.currentFlow.getVarNames(store.activeNode);
+        }
+        return {
+            vars,
+            selected: ref([]),
+            handleSelect: (newSelection: any[]) => {
+                if (newSelection.length > 0) {
+                    const v = newSelection[0];
+                    let name = v.name
+                    if (typeof name === 'object') {
+                        name = name.name
+                    }
+                    emit('select', { _t: `var(${name})`, ...v }); // 假设您只需要选择的第一个字段的名称
+                }
+            }
+        }
+    },
+}
+</script>

frontend/src/components/FieldList.vue

@@ -30,9 +30,9 @@ export default {
       { name: 'code', label: 'フィールドコード', align: 'left', field: 'code', sortable: true },
       { name: 'type', label: 'フィールドタイプ', align: 'left', field: 'type', sortable: true }
     ]
-
+    
     const { state : rows, isReady: isLoaded, isLoading } = useAsyncState((args) => {
-      if (props.fields) {
+      if (props.fields && Object.keys(props.fields).length > 0) {
         return props.fields.map(f => ({ name: f.label, objectType: 'field', ...f }));
       } else {
         return api.get('api/v1/appfields', {

frontend/src/components/FieldSelect.vue

@@ -34,6 +34,9 @@ export default {
       default:()=>[]
     },
     filter: String,
+    updateSelectFields: {
+      type: Function
+    },
   },
   setup(props) {
     const isLoaded = ref(false);
@@ -69,6 +72,12 @@ export default {
       isLoaded.value = true;
     });
 
+    watchEffect(()=>{
+      if (selected.value && selected.value[0] && props.updateSelectFields) {
+        props.updateSelectFields(selected)
+      }
+    });
+
     return {
       columns,
       rows,

frontend/src/components/ShowDialog.vue

@@ -1,20 +1,17 @@
 <template>
   <!-- <div class="q-pa-md q-gutter-sm" > -->
     <q-dialog :model-value="visible" persistent bordered >
-      <q-card style="min-width: 40vw; max-width: 80vw; max-height: 95vh;" :style="cardStyle">
+      <q-card class="" style="min-width: 40vw; max-width: 80vw; max-height: 95vh;" :style="cardStyle">
         <q-toolbar class="bg-grey-4">
           <q-toolbar-title>{{ name }}</q-toolbar-title>
           <q-space></q-space>
           <slot name="toolbar"></slot>
           <q-btn flat round dense icon="close" @click="CloseDialogue('Cancel')" />
         </q-toolbar>
-        <q-card-section>
+        <q-card-section class="q-mt-md" :style="sectionStyle">
-          <!-- <div class="text-h6">{{ name }}</div> -->
-        </q-card-section>
-        <q-card-section class="q-pt-none" :style="sectionStyle">
          <slot></slot>
         </q-card-section>
-        <q-card-actions align="right" class="text-primary q-mt-lg">
+        <q-card-actions align="right" class="text-primary">
           <q-btn flat label="確定" v-close-popup @click="CloseDialogue('OK')" />
           <q-btn flat label="キャンセル" v-close-popup @click="CloseDialogue('Cancel')" />
         </q-card-actions>

frontend/src/components/VariableList.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="q-pa-md">
-    <q-table flat bordered row-key="id" :selection="type" :selected="modelValue"
+    <q-table flat bordered row-key="id" :selection="type" :selected="modelValue" :filter="filter"
       @update:selected="$emit('update:modelValue', $event)" :columns="columns" :rows="rows" />
   </div>
 </template>
@@ -19,7 +19,8 @@ export default {
       reqired: true,
       default: () => []
     },
-    modelValue: Array
+    modelValue: Array,
+    filter: String
   },
   emits: [
     'update:modelValue'

frontend/src/components/left/AppSelector.vue

@@ -30,7 +30,7 @@
           </template>
         </q-input>
       </template>
-      <AppSelect ref="appDg" name="アプリ" type="single" :filter="filter"></AppSelect>
+      <AppSelectBox ref="appDg" name="アプリ" type="single" :filter="filter"></AppSelectBox>
   </ShowDialog>
 </template>
 
@@ -38,7 +38,7 @@
 import { defineComponent,ref } from 'vue';
 import {AppInfo} from '../../types/ActionTypes'
 import ShowDialog from '../../components/ShowDialog.vue';
-import AppSelect from '../../components/AppSelect.vue';
+import AppSelectBox from '../../components/AppSelectBox.vue';
 import { useFlowEditorStore } from 'stores/flowEditor';
 import { useAuthStore } from 'src/stores/useAuthStore';
 export default defineComponent({
@@ -47,7 +47,7 @@ export default defineComponent({
     "appSelected"
   ],
   components:{
-    AppSelect,
+    AppSelectBox,
     ShowDialog
   },
   setup(props, context) {

frontend/src/components/right/AppFieldSelect.vue

@@ -18,119 +18,68 @@
             <q-separator />
             <q-card-section class="q-pa-none q-ma-none">
                 <div style="">
-                    <div v-if="selectedField.fields && selectedField.fields.length > 0 ">
+                    <div v-if="selectedField.fields && selectedField.fields.length > 0">
-                      <q-list bordered>
+                        <q-list bordered>
-                        <q-virtual-scroll style="max-height: 160px;" :items="selectedField.fields" separator v-slot="{ item, index }">
+                            <q-virtual-scroll style="max-height: 160px;" :items="selectedField.fields" separator
-                            <q-item :key="index" dense clickable >
+                                v-slot="{ item, index }">
-                                <q-item-section>
+                                <q-item :key="index" dense clickable>
+                                    <q-item-section>
                                         <q-item-label>
                                             {{ item.label }}
                                         </q-item-label>
-                                </q-item-section>
+                                    </q-item-section>
-                                <q-item-section side>
+                                    <q-item-section side>
-                                    <q-btn round flat size="sm" icon="clear" @click="removeField(index)" />
+                                        <q-btn round flat size="sm" icon="clear" @click="removeField(index)" />
-                                </q-item-section>
+                                    </q-item-section>
-                            </q-item>
+                                </q-item>
-                        </q-virtual-scroll>
+                            </q-virtual-scroll>
-                      </q-list>
+                        </q-list>
                     </div>
                     <!-- <div v-else class="row q-mt-lg">
                     </div> -->
                 </div>
                 <!-- <q-separator /> -->
             </q-card-section>
-            <q-card-section class="q-px-none q-py-xs" v-if="selectedField.fields && selectedField.fields.length===0">
+            <q-card-section class="q-px-none q-py-xs" v-if="selectedField.fields && selectedField.fields.length === 0">
                 <div class="row">
                     <div class="text-grey text-caption"> {{ $props.placeholder }}</div>
                     <!-- <q-btn flat color="grey" label="clear" @click="clear" /> -->
                 </div>
             </q-card-section>
         </q-card>
-     </div>
+    </div>
-
+    <show-dialog v-model:visible="show" name="フィールド一覧" @close="closeAFBox">
-    <show-dialog v-model:visible="show" name="フィールド一覧" @close="closeFieldDialog" ref="fieldDlg">
+        <AppFieldSelectBox v-model:selectedField="selectedField" :selectType="selectType" ref="afBox"/>
-
-        <div class="q-mx-md q-mb-lg">
-            <div class="q-mb-xs q-ml-md text-primary">アプリ選択</div>
-
-            <div class="q-pa-md row" style="border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 4px;">
-                <div v-if="!showSelectApp && selectedField.app">{{ selectedField.app?.name }}</div>
-                <q-space />
-                <div>
-                    <q-btn outline dense label="選 択" padding="none sm" color="primary" @click="() => {
-                        showSelectApp = true;
-                    }"></q-btn>
-                </div>
-            </div>
-        </div>
-
-        <div v-if="!showSelectApp && selectedField.app?.name">
-            <div>
-                <div class="row q-mb-md">
-                    <!-- <div class="col"> -->
-                    <div class="q-mb-xs q-ml-md text-primary">フィールド選択</div>
-                    <!-- </div> -->
-                    <q-space />
-                    <!-- <div class="col"> -->
-                    <div class="q-mr-md">
-                      <q-input dense debounce="300" v-model="fieldFilter" placeholder="フィールド検索" clearable>
-                          <template v-slot:before>
-                              <q-icon name="search" />
-                          </template>
-                      </q-input>
-                    </div>
-                </div>
-                <div class="row">
-                    <field-select ref="fieldDlg" name="フィールド" :type="selectType"
-                        :appId="selectedField.app?.id" not_page :filter="fieldFilter" :selectedFields="selectedField.fields" :fieldTypes="fieldTypes"></field-select>
-                </div>
-            </div>
-        </div>
-        <div style="min-width: 45vw;" v-else>
-        </div>
-
-    </show-dialog>
-
-    <show-dialog v-model:visible="showSelectApp" name="アプリ選択" @close="closeAppDlg">
-        <template v-slot:toolbar>
-            <q-input dense debounce="300" v-model="filter" placeholder="検索" clearable>
-                <template v-slot:before>
-                    <q-icon name="search" />
-                </template>
-            </q-input>
-        </template>
-        <AppSelect ref="appDlg" name="アプリ" type="single" :filter="filter" ></AppSelect>
     </show-dialog>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, watchEffect, computed } from 'vue';
+import { defineComponent, ref, watchEffect } from 'vue';
+import AppFieldSelectBox from '../AppFieldSelectBox.vue';
 import ShowDialog from '../ShowDialog.vue';
-import FieldSelect from '../FieldSelect.vue';
 import { useFlowEditorStore } from 'stores/flowEditor';
-import AppSelect from '../AppSelect.vue';
+
-interface IApp{
+export interface IApp {
-  id:string,
+    id: string,
-  name:string
+    name: string
 }
-interface IField {
+export interface IField {
     name: string,
     code: string,
     type: string
 }
 
-interface IAppFields{
+export interface IAppFields {
-   app?:IApp,
+    app?: IApp,
-   fields:IField[]
+    fields: IField[]
 }
 
 export default defineComponent({
-    inheritAttrs:false,
+    inheritAttrs: false,
     name: 'AppFieldSelect',
     components: {
         ShowDialog,
-        FieldSelect,
+        AppFieldSelectBox
-        AppSelect,
     },
     props: {
         displayName: {
@@ -149,79 +98,54 @@ export default defineComponent({
             type: Object,
             default: null
         },
-        selectType:{
+        selectType: {
-            type:String,
+            type: String,
-            default:'single'
+            default: 'single'
-        },
-        fieldTypes:{
-            type:Array,
-            default:()=>[]
         }
     },
     setup(props, { emit }) {
-        const appDlg = ref();
-        const fieldDlg = ref();
         const show = ref(false);
-        const showSelectApp = ref(false);
+        const afBox = ref();
-       const selectedField = ref<IAppFields>({
+        const selectedField = ref<IAppFields>({
-          app:undefined,
+            app: undefined,
-          fields:[]
+            fields: []
-       });
+        });
-       if(props.modelValue && "app" in props.modelValue && "fields" in props.modelValue){
+        if (props.modelValue && 'app' in props.modelValue && 'fields' in props.modelValue) {
-         selectedField.value=props.modelValue as IAppFields;
+            selectedField.value = props.modelValue as IAppFields;
-       }
+        }
         const store = useFlowEditorStore();
 
-        const isSelected = computed(() => {
-            return selectedField.value !== null && typeof selectedField.value === 'object' && ('app' in selectedField.value)
-        });
-
-        const showDg = () => {
-            show.value = true;
-        };
-
         const clear = () => {
-            selectedField.value ={
+            selectedField.value = {
-              fields:[]
+                fields: []
-            } ;
+            };
         }
 
-        const closeAppDlg = (val: string) => {
+        const removeField = (index: number) => {
+            selectedField.value.fields.splice(index, 1);
+        }
+
+        const closeAFBox = (val: string) => {
             if (val == 'OK') {
-                selectedField.value.app = appDlg.value.selected[0];
+                console.log(afBox.value);
-                selectedField.value.fields=[];
+                
-                showSelectApp.value=false;
+                selectedField.value = afBox.value.selField;
             }
         };
 
-        const closeFieldDialog=(val:string)=>{
-          if (val == 'OK') {
-                selectedField.value.fields = fieldDlg.value.selected;
-            }
-        };
-
-        const removeField=(index:number)=>{
-          selectedField.value.fields.splice(index,1);
-        }
         watchEffect(() => {
             emit('update:modelValue', selectedField.value);
         });
 
         return {
             store,
-            appDlg,
+            afBox,
-            fieldDlg,
             show,
-            showDg,
+            showDg: () => { show.value = true },
-            closeAppDlg,
-            closeFieldDialog,
             selectedField,
-            showSelectApp,
-            isSelected,
-            filter: ref(),
             clear,
-            fieldFilter: ref(),
+            removeField,
-            removeField
+            closeAFBox,
         };
     }
 });

frontend/src/components/right/AppSelect.vue

@@ -0,0 +1,93 @@
+<template>
+    <div>
+        <q-field :label="displayName" labelColor="primary" stack-label>
+            <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="selectedField.app.name">
+                            {{ selectedField.app.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="50vh">
+        <template v-slot:toolbar>
+            <q-input dense debounce="300" v-model="filter" placeholder="検索" clearable>
+                <template v-slot:before>
+                    <q-icon name="search" />
+                </template>
+            </q-input>
+        </template>
+        <AppSelectBox ref="appDg" name="アプリ" type="single" :filter="filter"></AppSelectBox>
+    </ShowDialog>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, reactive, ref, watchEffect } from 'vue';
+import ShowDialog from '../ShowDialog.vue';
+import AppSelectBox from '../AppSelectBox.vue';
+
+
+export default defineComponent({
+    inheritAttrs: false,
+    name: 'AppSelect',
+    components: {
+        ShowDialog,
+        AppSelectBox
+    },
+    props: {
+        context: {
+            type: Array<Props>,
+            default: '',
+        },
+        displayName: {
+            type: String,
+            default: '',
+        },
+        name: {
+            type: String,
+            default: '',
+        },
+        placeholder: {
+            type: String,
+            default: '',
+        },
+        modelValue: {
+            type: Object,
+            default: null
+        }
+    },
+    setup(props, { emit }) {
+        const appDg = ref()
+        const dgIsShow = ref(false)
+        const selectedField = props.modelValue && props.modelValue.app ? props.modelValue : reactive({app:{}});
+        const closeDg = (state: string) => {
+            dgIsShow.value = false;
+            if (state == 'OK') {
+                selectedField.app = appDg.value.selected[0];
+            }
+        };
+
+        console.log(selectedField);
+
+        watchEffect(() => {
+            emit('update:modelValue', selectedField);
+        });
+
+        return {
+            filter: ref(''),
+            dgIsShow,
+            appDg,
+            closeDg,
+            selectedField
+        };
+    }
+});
+</script>

frontend/src/components/right/ConditionInput.vue

@@ -4,7 +4,8 @@
       <template v-slot:control>
         <q-card flat class="full-width">
           <q-card-actions vertical>
-            <q-btn color="grey-3" text-color="black" @click="showDg()">クリックで設定：{{ isSetted ? '設定済み' : '未設定' }}</q-btn>
+            <q-btn color="grey-3" text-color="black" :disable="btnDisable" @click="showDg()">クリックで設定：{{ isSetted ?
+              '設定済み' : '未設定' }}</q-btn>
           </q-card-actions>
           <q-card-section class="text-caption">
             <div v-if="!isSetted">{{ placeholder }}</div>
@@ -20,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';
 
@@ -28,6 +29,10 @@ type Props = {
   props?: {
     name: string;
     modelValue?: {
+      app: {
+        id: string;
+        name: string;
+      },
       fields: {
         type: string;
         label: string;
@@ -37,6 +42,15 @@ type Props = {
   }
 };
 
+type InputConfg = {
+  canInput: boolean;
+  buttonsConfig: {
+    label: string;
+    color: string;
+    type: string;
+  }[]
+};
+
 
 export default defineComponent({
   name: 'FieldInput',
@@ -72,28 +86,71 @@ export default defineComponent({
     sourceType: {
       type: String,
       default: 'field'
+    },
+    onlySourceSelect: {
+      type: Boolean,
+      default: false
+    },
+    operatorList: {
+      type: Array,
+    },
+    inputConfig: {
+      type: Object,
+      default: () => ({
+        left: {
+          canInput: false,
+          buttonsConfig: [
+            { label: 'フィールド', color: 'primary', type: 'FieldAdd' },
+            { label: '変数', color: 'green', type: 'VariableAdd' },
+          ]
+        },
+        right: {
+          canInput: true,
+          buttonsConfig: [
+            { label: '変数', color: 'green', type: 'VariableAdd' },
+          ]
+        },
+      })
     }
   },
 
   setup(props, { emit }) {
     const source = props.context.find(element => element?.props?.name === 'sources')
-    
+
     if (source) {
-      if(props.sourceType === 'field'){
+      if (props.sourceType === 'field') {
-        provide('sourceFields', computed( () => source.props?.modelValue?.fields ?? []));
+        provide('sourceFields', computed(() => source.props?.modelValue?.fields ?? []));
-      } else if(props.sourceType === 'app'){
+      } else if (props.sourceType === 'app') {
-        console.log('sourceApp', source.props?.modelValue);
+        provide('sourceApp', computed(() => source.props?.modelValue?.app?.id));
-        provide('sourceApp', computed( () => source.props?.modelValue?.app?.id));
       }
     }
 
+    provide('leftDynamicItemConfig', props.inputConfig.left);
+    provide('rightDynamicItemConfig', props.inputConfig.right);
+    provide('Operator', props.operatorList);
+
+    const btnDisable = computed(() => {
+      const onlySourceSelect = props.onlySourceSelect;
+
+      if (!onlySourceSelect) {
+        return false;
+      }
+
+      if (props.sourceType === 'field') {
+        return source?.props?.modelValue?.fields?.length ?? 0 > 0;
+      } else if (props.sourceType === 'app') {
+        return source?.props?.modelValue?.app?.id ? false : true
+      }
+      return true;
+    })
+
     const appDg = ref();
     const show = ref(false);
     const tree = reactive(new ConditionTree());
     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);
     }
 
@@ -109,13 +166,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);
     });
@@ -127,7 +186,8 @@ export default defineComponent({
       showDg,
       onClosed,
       tree,
-      conditionString
+      conditionString,
+      btnDisable
     };
   }
 });

frontend/src/components/right/DataMapping.vue

@@ -0,0 +1,250 @@
+<template>
+    <div>
+        <q-field :label="displayName" labelColor="primary" stack-label>
+            <template v-slot:control>
+                <q-card flat class="full-width">
+                    <q-card-actions vertical>
+                        <q-btn color="grey-3" text-color="black" :disable="btnDisable"
+                            @click="() => { dgIsShow = true }">クリックで設定</q-btn>
+                    </q-card-actions>
+                    <q-card-section class="text-caption">
+                        <div v-if="mappingObjectsInputDisplay && mappingObjectsInputDisplay.length > 0">
+                            <div v-for="(item) in mappingObjectsInputDisplay" :key="item">{{ item }}</div>
+                        </div>
+                        <div v-else>{{ placeholder }}</div>
+                    </q-card-section>
+                </q-card>
+            </template>
+        </q-field>
+        <show-dialog v-model:visible="dgIsShow" name="データマッピング" @close="closeDg" min-width="50vw" min-height="60vh">
+
+            <div class="q-mx-md">
+                <div class="row q-col-gutter-x-xs flex-center">
+                    <div class="col-6">
+                        <div class="q-mx-xs">ソース</div>
+                    </div>
+                    <!-- <div class="col-1">
+                    </div> -->
+                    <div class="col-6">
+                        <div class="q-mx-xs">目標</div>
+                    </div>
+                    <!-- <div class="col-1"><q-btn flat round dense icon="add" size="sm" @click="addMappingObject" /> -->
+                    <!-- </div> -->
+                </div>
+                <q-virtual-scroll style="max-height: 75vh;" :items="mappingProps" separator v-slot="{ item, index }">
+                    <!-- <div class="q-my-sm" v-for="(item, index) in mappingProps" :key="item.id"> -->
+                    <div class="row q-my-md q-col-gutter-x-md flex-center">
+                        <div class="col-6">
+                            <ConditionObject :config="config" v-model="item.from" />
+                        </div>
+                        <!-- <div class="col-1">
+                        </div> -->
+                        <div class="col-6">
+                            <q-field v-model="item.vName" type="text" outlined dense>
+                                <!-- <template v-slot:append>
+                                    <q-icon name="search" class="cursor-pointer"
+                                        @click="() => { mappingProps[index].to.isDialogVisible = true }" />
+                                </template> -->
+                                <template v-slot:control>
+                                    <div class="self-center full-width no-outline" tabindex="0"
+                                        v-if="item.to.app?.name && item.to.fields?.length > 0 && item.to.fields[0].label">
+                                        {{ `${item.to.fields[0].label}` }}
+                                        <q-tooltip>
+                                            <div>アプリ : {{ item.to.app.name }}</div>
+                                            <div>フィールドのコード : {{ item.to.fields[0].code }}</div>
+                                            <div>フィールドのタイプ : {{ item.to.fields[0].type }}</div>
+                                            <div>フィールド : {{ item.to.fields[0] }}</div>
+                                        </q-tooltip>
+                                    </div>
+                                </template>
+                            </q-field>
+                        </div>
+                        <!-- <div class="col-1">
+                            <q-btn flat round dense icon="delete" size="sm" @click="() => deleteMappingObject(index)" />
+                        </div> -->
+                    </div>
+
+                    <show-dialog v-model:visible="mappingProps[index].to.isDialogVisible" name="フィールド一覧"
+                        @close="closeToDg" ref="fieldDlg">
+                        <FieldSelect v-if="onlySourceSelect" ref="fieldDlg" name="フィールド" :appId="sourceAppId" not_page
+                            :selectedFields="mappingProps[index].to.fields"
+                            :updateSelects="(fields) => { mappingProps[index].to.fields = fields; mappingProps[index].to.app = sourceApp }">
+                        </FieldSelect>
+                        <AppFieldSelectBox v-else v-model:selectedField="mappingProps[index].to" />
+                    </show-dialog>
+                    <!-- </div> -->
+                </q-virtual-scroll>
+            </div>
+        </show-dialog>
+    </div>
+</template>
+
+<script lang="ts">
+import { v4 as uuidv4 } from 'uuid';
+import { computed, defineComponent, watch, isRef, reactive, ref, watchEffect } from 'vue';
+import ConditionObject from '../ConditionEditor/ConditionObject.vue';
+import ShowDialog from '../ShowDialog.vue';
+import AppFieldSelectBox from '../AppFieldSelectBox.vue';
+import FieldSelect from '../FieldSelect.vue';
+import IAppFields from './AppFieldSelect.vue';
+import { api } from 'boot/axios';
+
+type Props = {
+    props?: {
+        name: string;
+        modelValue?: {
+            app: {
+                id: string;
+                name: string;
+            }
+        }
+    }
+};
+type ValueType = {
+    id: string;
+    from: object;
+    to: typeof IAppFields & {
+        isDialogVisible: boolean;
+    };
+}
+
+
+export default defineComponent({
+    name: 'DataMapping',
+    inheritAttrs: false,
+    components: {
+        ShowDialog,
+        ConditionObject,
+        AppFieldSelectBox,
+        FieldSelect
+    },
+    props: {
+        context: {
+            type: Array<Props>,
+            default: '',
+        },
+        displayName: {
+            type: String,
+            default: '',
+        },
+        name: {
+            type: String,
+            default: '',
+        },
+        modelValue: {
+            type: Object as () => ValueType[],
+        },
+        placeholder: {
+            type: String,
+            default: '',
+        },
+        onlySourceSelect: {
+            type: Boolean,
+            default: false
+        }
+    },
+
+    setup(props, { emit }) {
+        const source = props.context.find(element => element?.props?.name === 'sources')
+
+        const sourceApp = computed(() => source?.props?.modelValue?.app);
+
+        const sourceAppId = computed(() => sourceApp.value?.id);
+
+        const closeDg = () => {
+            emit('update:modelValue', mappingProps.value
+            );
+        }
+
+        const closeToDg = () => {
+            emit('update:modelValue', mappingProps.value
+            );
+        }
+
+        const mappingProps = computed(() => props.modelValue ?? []);
+
+        watch(() => sourceAppId.value, async (newId, oldId) => {
+            if (!newId) return;
+            const a = await api.get('api/v1/appfields', {
+                params: {
+                    app: newId
+                }
+            }).then(res => {
+                return Object.values(res.data.properties)
+                    .map(f => ({ name: f.label, objectType: 'field', ...f }))
+                    .map(f => {
+                        return {
+                            id: uuidv4(),
+                            from: {},
+                            to: {
+                                app: sourceApp.value,
+                                fields: [f],
+                                isDialogVisible: false
+                            }
+                        }
+                    })
+            })
+            const modelValue = props.modelValue ?? [];
+
+            if (modelValue.length === 0 || newId !== oldId) {
+                emit('update:modelValue', a);
+                return;
+            }
+            const modelValueFieldNames = modelValue.map(item => item.to.fields[0].name);
+
+            const newFields = a.filter(field => !modelValueFieldNames.includes(field.to.fields[0].name));
+
+            const updatedModelValue = [...modelValue, ...newFields];
+
+            emit('update:modelValue', updatedModelValue);
+        })
+
+        console.log(mappingProps.value);
+
+        // const deleteMappingObject = (index: number) => mappingProps.length === 1
+        //     ? mappingProps.splice(0, mappingProps.length, defaultMappingProp())
+        //     : mappingProps.splice(index, 1);
+
+        const mappingObjectsInputDisplay = computed(() =>
+            (mappingProps.value && Array.isArray(mappingProps.value)) ?
+                mappingProps.value
+                    .filter(item => item.from?.sharedText && item.to.fields?.length > 0)
+                    .map(item => {
+                        return `field(${item.to.app?.id},${item.to.fields[0].label}) = ${item.from.sharedText} `;
+                    })
+                : []
+        );
+
+
+
+        const btnDisable = computed(() => props.onlySourceSelect ? !(source?.props?.modelValue?.app?.id) : false);
+
+        //集計処理方法
+
+        watchEffect(() => {
+            emit('update:modelValue', mappingProps.value);
+        });
+        return {
+            uuidv4,
+            dgIsShow: ref(false),
+            closeDg,
+            toDgIsShow: ref(false),
+            closeToDg,
+            mappingProps,
+            // addMappingObject: () => mappingProps.push(defaultMappingProp()),
+            // deleteMappingObject,
+            mappingObjectsInputDisplay,
+            sourceApp,
+            sourceAppId,
+            btnDisable,
+            config: {
+                canInput: false,
+                buttonsConfig: [
+                    { label: '変数', color: 'green', type: 'VariableAdd',editable:false },
+                ]
+            }
+        };
+    },
+});
+</script>
+<style lang="scss"></style>

frontend/src/components/right/DataProcessing.vue

@@ -139,6 +139,7 @@ export default defineComponent({
         }
         return null;
       }));
+      provide('sourceApp', computed(() => source.props?.modelValue?.app?.id));
     }
 
     const actionName = props.context.find(element => element?.props?.name === 'displayName')
@@ -168,12 +169,7 @@ export default defineComponent({
         processingObjects
           .filter(item => item.field && item.logicalOperator && item.vName)
           .map(item => {
-            const name = typeof item.field?.name === 'string'
+            return`var(${processingProps.name}.${item.vName}) = ${item.field.sharedText}`
-              ? item.field.name
-              : item.field?.name.name;
-            return item.logicalOperator.operator!==''?
-                     `${processingProps.name}.${item.vName} = ${item.logicalOperator.operator}(${name})`
-                    :`${processingProps.name}.${item.vName} = ${name}`
           })
         : []
     );

frontend/src/components/right/PropertyList.vue

@@ -22,6 +22,8 @@ import EventSetter from '../right/EventSetter.vue';
 import ColorPicker from './ColorPicker.vue';
 import NumInput from './NumInput.vue';
 import DataProcessing from './DataProcessing.vue';
+import DataMapping from './DataMapping.vue';
+import AppSelect from './AppSelect.vue';
 import { IActionNode,IActionProperty,IProp } from 'src/types/ActionTypes';
 
 export default defineComponent({
@@ -37,7 +39,9 @@ export default defineComponent({
     EventSetter,
     ColorPicker,
     NumInput,
-    DataProcessing
+    DataProcessing,
+    DataMapping,
+    AppSelect
   },
   props: {
     nodeProps: {

frontend/src/pages/RuleEditor.vue

@@ -24,7 +24,7 @@
           <q-btn :label="model+'選択'" color="primary" @click="showDg()" />
           <show-dialog v-model:visible="show" :name="model" @close="closeDg" width="400px">
             <template v-if="model=='アプリ'">
-              <app-select ref="appDg" :name="model" type="single"></app-select>
+              <app-select-box ref="appDg" :name="model" type="single"></app-select-box>
             </template>
             <template v-if="model=='フィールド'">
               <field-select ref="appDg" :name="model" type="multiple" :appId="1"></field-select>
@@ -42,7 +42,7 @@
 
 <script setup lang="ts">
 import ShowDialog from 'components/ShowDialog.vue';
-import AppSelect from 'components/AppSelect.vue';
+import AppSelectBox from 'components/AppSelectBox.vue';
 import FieldSelect from 'components/FieldSelect.vue';
 import ActionSelect from 'components/ActionSelect.vue';
 import { ref } from 'vue'

frontend/src/types/Conditions.ts

@@ -74,6 +74,11 @@ export class GroupNode implements INode {
 
 }
 
+export type OperatorListItem = {
+  label: string;
+  value: string;
+}
+
 // 条件式ノード
 export class ConditionNode implements INode {
   index: number;
@@ -83,13 +88,13 @@ export class ConditionNode implements INode {
     return this.parent.logicalOperator;
   };
   object: any; // 比較元
-  operator: Operator; // 比較子
+  operator: Operator | OperatorListItem; // 比較子
   value: any;
   get header():string{
     return 'generic';
   }
 
-  constructor(object: any, operator: Operator, value: any, parent: GroupNode) {
+  constructor(object: any, operator: Operator | OperatorListItem, value: any, parent: GroupNode) {
     this.index=0;
     this.type = NodeType.Condition;
     this.object = object;
@@ -113,10 +118,12 @@ export class ConditionNode implements INode {
 export class ConditionTree {
   root: GroupNode;
   maxIndex:number;
+  queryString:string;
 
   constructor() {
     this.maxIndex=0;
     this.root = new GroupNode(LogicalOperator.AND, null);
+    this.queryString='';
   }
 
   // ノード追加
@@ -194,16 +201,53 @@ export class ConditionTree {
     } else {
       const condNode=node as ConditionNode;
       if (condNode.object && condNode.operator ) {
-        let value=condNode.value;
+        // let value=condNode.value;
-        if(value && typeof value ==='object' && ('label' in value)){
+        // if(value && typeof value ==='object' && ('label' in value)){
-            value =condNode.value.label;
+        //     value =condNode.value.label;
-        }
+        // }
-        return `${typeof condNode.object.name === 'object' ? condNode.object.name.name : condNode.object.name} ${condNode.operator} '${value}'`;
+        return `${condNode.object.sharedText} ${typeof condNode.operator === 'object' ? condNode.operator.label : condNode.operator} ${condNode.value.sharedText}`;
+        // return `${typeof condNode.object.name === 'object' ? condNode.object.name.name : condNode.object.name} ${typeof condNode.operator === 'object' ? condNode.operator.label : condNode.operator} '${value}'`;
       } else {
         return '';
       }
     }
   }
+
+  buildConditionQueryString(node:INode){
+    if (node.type !== NodeType.Condition) {
+      let conditionString = '';
+      if(node.type !== NodeType.Root){
+        conditionString = '(';
+      }
+      
+      const groupNode = node as GroupNode;
+      for (let i = 0; i < groupNode.children.length; i++) {
+        const childConditionString = this.buildConditionQueryString(groupNode.children[i]);
+        if (childConditionString !== '') {
+          conditionString += childConditionString;
+          if (i < groupNode.children.length - 1) {
+            conditionString += ` ${groupNode.logicalOperator.toLowerCase()} `;
+          }
+        }
+      }
+
+      if(node.type !== NodeType.Root){
+        conditionString += ')';
+      }
+      return conditionString;
+    } else {
+      const condNode=node as ConditionNode;
+      if (condNode.object && condNode.operator ) {
+        if (!condNode.object.code || !condNode.value.sharedText){
+          return '';
+        }
+        return `${condNode.object.code} ${typeof condNode.operator === 'object' ? condNode.operator.value : condNode.operator} "${condNode.value.sharedText}"`;
+      } else {
+        return '';
+      }
+    }
+  }
+
   /**
    *
    * @param node ノード移動
@@ -325,7 +369,7 @@ export class ConditionTree {
   }
 
   toJson():string{
-    return JSON.stringify(this.root, (key, value) => {
+    return JSON.stringify({queryString :this.queryString, ...this.root}, (key, value) => {
       if (key === 'parent') {
         return value ? value.type : null;
       }
@@ -333,4 +377,7 @@ export class ConditionTree {
     });
   }
 
+  setQuery(queryString:string){
+    this.queryString=queryString;
+  }
 }

plugin/kintone-addins/.env.dev

@@ -0,0 +1,2 @@
+VITE_SOURCE_MAP = inline
+VITE_PORT = 4173

plugin/kintone-addins/.env.production

@@ -0,0 +1,2 @@
+VITE_SOURCE_MAP = false
+VITE_PORT = 4173

plugin/kintone-addins/package.json

@@ -4,17 +4,25 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "tsc && set \"SOURCE_MAP=true\" && vite build && vite preview",
+    "dev": "run-p watch server ngrok",
-    "build": "tsc && vite build && xcopy dist\\*.js ..\\..\\backend\\Temp\\ /E /I /Y",
+    "watch": "vite build --watch --mode dev",
-    "build:linux": "tsc && vite build && cp -ur dist/*.js ../../backend/Temp",
+    "server": "vite dev --mode dev",
-    "build:dev": "tsc && set \"SOURCE_MAP=true\" && vite build && xcopy dist\\*.js ..\\..\\backend\\Temp\\ /E /I /Y",
+    "ngrok": "ngrok http 4173",
-    "preview": "vite preview",
+
-    "ngrok": "ngrok http http://localhost:4173/",
+    "build": "run-s b:production copy:windows",
-    "vite": "vite dev"
+    "build:dev": "run-s b:dev copy:windows",
+    "build:linux": "run-s b:production copy:linux",
+    "build:linux-dev": "run-s b:dev copy:linux",
+
+    "b:production": "vite build --mode production",
+    "b:dev": "vite build --mode dev",
+    "copy:windows": "xcopy dist\\*.js ..\\..\\backend\\Temp\\ /E /I /Y",
+    "copy:linux": "cp -ur dist/*.js ../../backend/Temp"
   },
   "devDependencies": {
     "@types/jquery": "^3.5.24",
     "@types/node": "^20.8.9",
+    "npm-run-all2": "^6.2.0",
     "sass": "^1.69.5",
     "typescript": "^5.0.2",
     "vite": "^4.4.5",

plugin/kintone-addins/src/actions/current-field-get.ts

@@ -0,0 +1,74 @@
+import {
+  IAction,
+  IActionResult,
+  IActionNode,
+  IActionProperty,
+  IContext,
+} from "../types/ActionTypes";
+import { actionAddins } from ".";
+
+
+interface Props {
+  displayName: string;
+  field: Field;
+  verName: VerName;
+}
+
+interface VerName {
+  name: string;
+}
+
+interface Field {
+  name: string;
+  type: string;
+  code: string;
+  label: string;
+  noLabel: boolean;
+  required: boolean;
+  minLength: string;
+  maxLength: string;
+  expression: string;
+  hideExpression: boolean;
+  unique: boolean;
+  defaultValue: string;
+}
+
+export class CurrentFieldGetAction implements IAction {
+  name: string;
+  actionProps: IActionProperty[];
+  currentFieldGetProps: Props;
+  constructor() {
+    this.name = "フィールドの値を取得する";
+    this.actionProps = [];
+    this.currentFieldGetProps = {} as Props;
+    this.register();
+  }
+
+  async process(
+    prop: IActionNode,
+    event: any,
+    context: IContext
+  ): Promise<IActionResult> {
+    this.currentFieldGetProps = prop.ActionValue as Props;
+    this.actionProps = prop.actionProps;
+
+    let result = {
+      canNext: true,
+      result: "",
+    } as IActionResult;
+    
+    try {
+      context.variables[this.currentFieldGetProps.verName.name] = context.record[this.currentFieldGetProps.field.code].value;
+    } catch (error) {
+      console.error("CurrentFieldGetAction error", error);
+      result.canNext = false;
+    }
+    return result;
+  }
+
+  register(): void {
+    actionAddins[this.name] = this;
+  }
+}
+
+new CurrentFieldGetAction();

plugin/kintone-addins/src/actions/data-mapping.ts

@@ -0,0 +1,166 @@
+import {
+  IAction,
+  IActionResult,
+  IActionNode,
+  IActionProperty,
+  IContext,
+} from "../types/ActionTypes";
+import { actionAddins } from ".";
+
+interface Props {
+  displayName: string;
+  sources: Sources;
+  dataMapping: DataMapping[];
+}
+
+interface DataMapping {
+  id: string;
+  from: From;
+  to: To;
+}
+
+interface To {
+  app: App;
+  fields: Field[];
+  isDialogVisible: boolean;
+}
+
+interface Field {
+  name: string;
+  type: string;
+  code: string;
+  label: string;
+  noLabel: boolean;
+  required: boolean;
+  minLength: string;
+  maxLength: string;
+  expression: string;
+  hideExpression: boolean;
+  unique: boolean;
+  defaultValue: string;
+}
+
+interface From {
+  sharedText: string;
+  _t: string;
+  id: string;
+  objectType: string;
+  name: Name;
+  actionName: string;
+  displayName: string;
+}
+
+interface Name {
+  name: string;
+}
+
+interface Sources {
+  app: App;
+}
+
+interface App {
+  id: string;
+  name: string;
+  description: string;
+  createdate: string;
+}
+
+export class DataMappingAction implements IAction {
+  name: string;
+  actionProps: IActionProperty[];
+  dataMappingProps: Props;
+  constructor() {
+    this.name = "データマッピング";
+    this.actionProps = [];
+    this.dataMappingProps = {} as Props;
+    this.register();
+  }
+
+  async process(
+    prop: IActionNode,
+    event: any,
+    context: IContext
+  ): Promise<IActionResult> {
+    this.actionProps = prop.actionProps;
+    this.dataMappingProps = prop.ActionValue as Props;
+    console.log(prop.ActionValue);
+
+    // this.initTypedActionProps();
+    let result = {
+      canNext: true,
+      result: "",
+    } as IActionResult;
+    try {
+      const record = this.dataMappingProps.dataMapping
+        .filter(
+          (item) =>
+            item.from.objectType === "variable" &&
+            item.from.name.name &&
+            item.to.app &&
+            item.to.fields &&
+            item.to.fields.length > 0
+        )
+        .reduce((accumulator, item) => {
+          return {...accumulator, [item.to.fields[0].code]: {
+            value: getValueByPath(context.variables, item.from.name.name),
+          }};
+      }, {});
+      if (record && Object.keys(record).length > 0) {
+        await kintone.api(kintone.api.url("/k/v1/record.json", true), "POST", {
+          app: this.dataMappingProps.sources.app.id,
+          record: record,
+        });
+      }
+    } catch (error) {
+      console.error("DataMappingAction error", error);
+      result.canNext = false;
+    }
+    console.log("dataMappingProps", this.dataMappingProps);
+
+    return result;
+  }
+
+  register(): void {
+    actionAddins[this.name] = this;
+  }
+}
+
+new DataMappingAction();
+
+const getValueByPath = (obj: any, path: string) => {
+  return path.split(".").reduce((o, k) => (o || {})[k], obj);
+};
+
+type Resp = { records: RespRecordType[] };
+
+type RespRecordType = {
+  [key: string]: {
+    type: string;
+    value: any;
+  };
+};
+
+type Result = {
+  type: string;
+  value: any[];
+};
+
+const selectData = async (appid: string, field: string): Promise<Result> => {
+  return kintone
+    .api(kintone.api.url("/k/v1/records", true), "GET", {
+      app: appid ?? kintone.app.getId(),
+      fields: [field],
+    })
+    .then((resp: Resp) => {
+      const result: Result = { type: "", value: [] };
+      resp.records.forEach((element) => {
+        for (const [key, value] of Object.entries(element)) {
+          if (result.type === "") {
+            result.type = value.type;
+          }
+          result.value.push(value.value);
+        }
+      });
+      return result;
+    });
+};

plugin/kintone-addins/src/actions/data-processing.ts

@@ -0,0 +1,374 @@
+import {
+  IAction,
+  IActionResult,
+  IActionNode,
+  IActionProperty,
+  IContext,
+} from "../types/ActionTypes";
+import { actionAddins } from ".";
+
+interface Props {
+  displayName: string;
+  sources: Sources;
+  condition: string;
+  conditionO: Condition;
+  verName: VerName;
+}
+
+interface Condition {
+  queryString: string;
+  index: number;
+  type: string;
+  children: Child[];
+  parent: null;
+  logicalOperator: string;
+}
+
+interface Child {
+  index: number;
+  type: string;
+  parent: string;
+  object: Object;
+  operator: ChildOperator;
+  value: Value;
+}
+
+interface Value {
+  sharedText: string;
+  _t: string;
+  objectType: string;
+  actionName: string;
+  displayName: string;
+  name: Name;
+}
+
+interface Name {
+  name: string;
+}
+
+interface ChildOperator {
+  label: string;
+  value: string;
+}
+
+interface Object {
+  sharedText: string;
+  _t: string;
+  name: string;
+  objectType: string;
+  type: string;
+  code: string;
+  label: string;
+  noLabel: boolean;
+  required: boolean;
+  minLength: string;
+  maxLength: string;
+  expression: string;
+  hideExpression: boolean;
+  unique: boolean;
+  defaultValue: string;
+}
+
+interface VerName {
+  name: string;
+  actionName: string;
+  displayName: string;
+  vars: Var[];
+}
+
+interface Var {
+  id: string;
+  field: Field2;
+  logicalOperator: LogicalOperator;
+  vName: string;
+}
+
+interface LogicalOperator {
+  operator: string;
+  label: string;
+}
+
+interface Field2 {
+  sharedText: string;
+  _t: string;
+  name: string;
+  objectType: string;
+  type: string;
+  code: string;
+  label: string;
+  noLabel: boolean;
+  required: boolean;
+  minLength: string;
+  maxLength: string;
+  expression: string;
+  hideExpression: boolean;
+  unique: boolean;
+  defaultValue: string;
+}
+
+interface Sources {
+  app: App;
+  fields: Field[];
+}
+
+interface Field {
+  name: string;
+  type: string;
+  code: string;
+  label: string;
+  noLabel: boolean;
+  required: boolean;
+  minLength: string;
+  maxLength: string;
+  expression: string;
+  hideExpression: boolean;
+  unique: boolean;
+  defaultValue: string;
+}
+
+interface App {
+  id: string;
+  name: string;
+  description: string;
+  createdate: string;
+}
+
+export class DataProcessingAction implements IAction {
+  name: string;
+  actionProps: IActionProperty[];
+  dataProcessingProps: Props | null;
+  constructor() {
+    this.name = "データ処理";
+    this.actionProps = [];
+    this.dataProcessingProps = null;
+    this.register();
+  }
+
+  async process(
+    nodes: IActionNode,
+    event: any,
+    context: IContext
+  ): Promise<IActionResult> {
+    this.actionProps = nodes.actionProps;
+    this.dataProcessingProps = nodes.ActionValue as Props;
+    this.dataProcessingProps.conditionO = JSON.parse(
+      this.dataProcessingProps.condition
+    );
+    let result = {
+      canNext: true,
+      result: "",
+    } as IActionResult;
+    try {
+      if (!this.dataProcessingProps) {
+        return result;
+      }
+
+      const data = await selectData(
+        varGet(
+          this.dataProcessingProps.conditionO.queryString,
+          context.variables
+        )
+      );
+      console.log("data ", data);
+
+      context.variables[this.dataProcessingProps.verName.name] =
+        this.dataProcessingProps.verName.vars.reduce((acc, f) => {
+          const v = calc(f, data);
+          if (v) {
+            acc[f.vName] = calc(f, data);
+          }
+          return acc;
+        }, {} as AnyObject);
+
+      console.log("context ", context);
+      return result;
+    } catch (error) {
+      console.error(error);
+      event.error = error;
+      return result;
+    }
+  }
+
+  register(): void {
+    actionAddins[this.name] = this;
+  }
+}
+
+new DataProcessingAction();
+
+const varGet = (str: string, vars: any) => {
+  console.log(str);
+
+  const regex = /var\((.*?)\)/g;
+  let match;
+  while ((match = regex.exec(str)) !== null) {
+    const varName = match[1];
+    if (varName in vars) {
+      str = str.replace(match[0], vars[varName]);
+    } else {
+      throw new Error(`変数${varName}が見つかりません`);
+    }
+  }
+  console.log(str);
+  return str;
+};
+
+const selectData = async (query?: string) => {
+  return kintone
+    .api(kintone.api.url("/k/v1/records", true), "GET", {
+      app: kintone.app.getId(),
+      query: query,
+    })
+    .then((resp: Resp) => {
+      const result: Result = {};
+      resp.records.forEach((element) => {
+        for (const [key, value] of Object.entries(element)) {
+          if (!result[key]) {
+            result[key] = { type: value.type, value: [] };
+          }
+          result[key].value.push(value.value);
+        }
+      });
+      return result;
+    });
+};
+
+type Resp = { records: RespRecordType[] };
+
+type RespRecordType = {
+  [key: string]: {
+    type: string;
+    value: any;
+  };
+};
+
+type Result = {
+  [key: string]: {
+    type: string;
+    value: any[];
+  };
+};
+
+type AnyObject = {
+  [key: string]: any;
+};
+
+const ERROR_TYPE = "ERROR_TYPE";
+
+const calc = (f: Var, result: Result) => {
+  const type = typeCheck(f.field.type);
+  if (!type) {
+    return ERROR_TYPE;
+  }
+
+  const fun =
+    calcFunc[
+      `${type}_${Operator[f.logicalOperator.operator as keyof typeof Operator]}`
+    ];
+  if (!fun) {
+    return ERROR_TYPE;
+  }
+  const values = result[f.field.code].value;
+  if (!values) {
+    return null;
+  }
+  return fun(values);
+};
+
+const typeCheck = (type: string) => {
+  switch (type) {
+    case "RECORD_NUMBER":
+    case "NUMBER":
+      return CalcType.NUMBER;
+    case "SINGLE_LINE_TEXT":
+    case "MULTI_LINE_TEXT":
+    case "RICH_TEXT":
+      return CalcType.STRING;
+    case "DATE":
+      return CalcType.DATE;
+    case "TIME":
+      return CalcType.TIME;
+    case "DATETIME":
+    case "UPDATED_TIME":
+      return CalcType.DATETIME;
+    default:
+      return null;
+  }
+};
+
+enum Operator {
+  SUM = "SUM",
+  AVG = "AVG",
+  MAX = "MAX",
+  MIN = "MIN",
+  COUNT = "COUNT",
+  FIRST = "FIRST",
+}
+
+enum CalcType {
+  NUMBER = "number",
+  STRING = "string",
+  DATE = "date",
+  TIME = "time",
+  DATETIME = "datetime",
+}
+
+const calcFunc: Record<string, (value: string[]) => string | null> = {
+  [`${CalcType.NUMBER}_${Operator.COUNT}`]: (value: string[]) =>
+    value.length.toString(),
+  [`${CalcType.STRING}_${Operator.COUNT}`]: (value: string[]) =>
+    value.length.toString(),
+  [`${CalcType.DATE}_${Operator.COUNT}`]: (value: string[]) =>
+    value.length.toString(),
+  [`${CalcType.TIME}_${Operator.COUNT}`]: (value: string[]) =>
+    value.length.toString(),
+  [`${CalcType.DATETIME}_${Operator.COUNT}`]: (value: string[]) =>
+    value.length.toString(),
+
+  [`${CalcType.NUMBER}_${Operator.SUM}`]: (value: string[]) =>
+    value.reduce((acc, v) => acc + Number(v), 0).toString(),
+  [`${CalcType.NUMBER}_${Operator.AVG}`]: (value: string[]) =>
+    (value.reduce((acc, v) => acc + Number(v), 0) / value.length).toString(),
+  [`${CalcType.NUMBER}_${Operator.MAX}`]: (value: string[]) =>
+    Math.max(...value.map(Number)).toString(),
+  [`${CalcType.NUMBER}_${Operator.MIN}`]: (value: string[]) =>
+    Math.min(...value.map(Number)).toString(),
+
+  [`${CalcType.STRING}_${Operator.SUM}`]: (value: string[]) => value.join(" "),
+
+  [`${CalcType.DATE}_${Operator.MAX}`]: (value: string[]) =>
+    value.reduce((maxDate, currentDate) =>
+      maxDate > currentDate ? maxDate : currentDate
+    ),
+
+  [`${CalcType.DATE}_${Operator.MIN}`]: (value: string[]) =>
+    value.reduce((minDate, currentDate) =>
+      minDate < currentDate ? minDate : currentDate
+    ),
+
+  [`${CalcType.TIME}_${Operator.MAX}`]: (value: string[]) =>
+    value.reduce((maxTime, currentTime) =>
+      maxTime > currentTime ? maxTime : currentTime
+    ),
+  [`${CalcType.TIME}_${Operator.MIN}`]: (value: string[]) =>
+    value.reduce((minTime, currentTime) =>
+      minTime < currentTime ? minTime : currentTime
+    ),
+
+  [`${CalcType.DATETIME}_${Operator.MAX}`]: (value: string[]) =>
+    value.reduce((maxDateTime, currentDateTime) =>
+      new Date(maxDateTime) > new Date(currentDateTime)
+        ? maxDateTime
+        : currentDateTime
+    ),
+
+  [`${CalcType.DATETIME}_${Operator.MIN}`]: (value: string[]) =>
+    value.reduce((minDateTime, currentDateTime) =>
+      new Date(minDateTime) < new Date(currentDateTime)
+        ? minDateTime
+        : currentDateTime
+    ),
+  [`${CalcType.STRING}_${Operator.FIRST}`]: (value: string[]) => {
+    return value[0];
+  },
+};

plugin/kintone-addins/src/types/action-process.ts

@@ -6,6 +6,9 @@ import '../actions/field-shown';
 import '../actions/error-show';
 import '../actions/button-add';
 import '../actions/condition-action';
+import '../actions/data-processing';
+import '../actions/data-mapping';
+import '../actions/current-field-get';
 import '../actions/regular-check';
 import '../actions/mail-check';
 import '../actions/counter-check';
@@ -49,7 +52,7 @@ export class ActionProcess{
             result = await action.process(nextAction,this.event,this.context);
            }
            let nextInput = '';
-           //outputPoints一㝤以上㝮場坈〝次㝮InputPoint㝯戻り値を設定㝙る
+           //outputPoints一つ以上の場合、次のInputPointは戻り値を設定する
            if(nextAction.outputPoints && nextAction.outputPoints.length>1){
              nextInput = result.result||'';
            }

plugin/kintone-addins/vite.config.js

@@ -1,26 +1,32 @@
 // vite.config.js
-import { defineConfig } from "vite";
+import { defineConfig, loadEnv } from "vite";
 import cssInjectedByJsPlugin from "vite-plugin-css-injected-by-js";
 import checker from "vite-plugin-checker";
 
-const sourcemap = process.env.SOURCE_MAP === "true";
+export default ({ mode }) => {
+  process.env = { ...process.env, ...loadEnv(mode, process.cwd()) };
 
-export default defineConfig({
+  return defineConfig({
-  plugins: [
+    plugins: [
-    checker({
+      checker({
-      typescript: true,
+        typescript: true,
-    }),
+      }),
-    cssInjectedByJsPlugin(),
+      cssInjectedByJsPlugin(),
-  ],
+    ],
-  build: {
+    build: {
-    cssCodeSplit: false,
+      cssCodeSplit: false,
-    rollupOptions: {
+      rollupOptions: {
-      input: "src/index.ts", // entry file
+        input: "src/index.ts", // entry file
-      output: {
+        output: {
-        entryFileNames: "alc_runtime.js",
+          entryFileNames: "alc_runtime.js",
-        // assetFileNames:'alc_kintone_style.css'
+          // assetFileNames:'alc_kintone_style.css'
+        },
       },
+      sourcemap: process.env.VITE_SOURCE_MAP,
     },
-    sourcemap: sourcemap,
+    server: {
-  },
+      port: process.env.VITE_PORT,
-});
+      // open: "/dist/alc_runtime.js",
+    },
+  });
+};