ログの削除

スペルミスの修正
APPフィールドコンポーネントのバグ修正
2024-07-01 04:08:28 +09:00 · 2024-07-01 04:07:53 +09:00 · 2024-07-01 03:53:49 +09:00 · 2024-06-17 15:22:10 +09:00 · 2024-06-17 15:20:32 +09:00 · 2024-06-17 15:19:36 +09:00
28 changed files with 1677 additions and 281 deletions
--- a/frontend/src/components/AppFieldSelectBox.vue
+++ b/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>
--- a/frontend/src/components/AppSelectBox.vue
+++ b/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) {
-        props.updateExternalSelectAppInfo(selected.value[0])
+      if (selected.value && selected.value[0] && props.updateSelectApp) {
+        props.updateSelectApp(selected.value[0])
      }
    });
    onMounted(() => {
--- a/frontend/src/components/ConditionEditor/ConditionObject.vue
+++ b/frontend/src/components/ConditionEditor/ConditionObject.vue
@@ -1,20 +1,21 @@
 <template>
-  <q-field v-model="selectedObject" 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 && selectedObject.objectType==='field'" :dense="true" class="selected-obj">
+  <q-field 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 && 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>
-    <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">
-    <template v-slot:toolbar>
+  <show-dialog v-model:visible="show" name="設定項目" @close="closeDg" min-width="400px">
+    <!-- <template v-slot:toolbar>
        <q-input  dense debounce="200" v-model="filter" placeholder="検索" clearable>
          <template v-slot:before>
            <q-icon name="search" />
@@ -22,47 +23,68 @@
        </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">
-  import { defineComponent, reactive, ref ,watchEffect,computed} from 'vue';
-  import ShowDialog from '../ShowDialog.vue';
-  import ConditionObjects from '../ConditionObjects.vue';
-  import { useFlowEditorStore } from '../../stores/flowEditor';
-  import {IActionFlow,IActionNode,IActionVariable} from '../../types/ActionTypes';
-  export default defineComponent({
+<script lang="ts">
+import { defineComponent, reactive, ref, watchEffect, computed } from 'vue';
+import ShowDialog from '../ShowDialog.vue';
+// import ConditionObjects from '../ConditionObjects.vue';
+import DynamicItemInput from '../DynamicItemInput/DynamicItemInput.vue';
+import { useFlowEditorStore } from '../../stores/flowEditor';
+import { IActionFlow, IActionNode, IActionVariable } from '../../types/ActionTypes';
+export default defineComponent({
  name: 'ConditionObject',
  components: {
    ShowDialog,
-      ConditionObjects
+    DynamicItemInput,
+    // ConditionObjects
  },
  props: {
+    config: {
+      type: Object,
+      default: () => {
+        return {
+          canInput: false,
+          buttonsConfig: [
+            { label: 'フィールド', color: 'primary', type: 'FieldAdd' },
+            { label: '変数', color: 'green', type: 'VariableAdd' },
+          ]
+        };
+      }
+    },
    modelValue: {
      type: Object,
      default: null
    },
  },
  setup(props, { emit }) {
-      const appDg = ref();
+    // const appDg = ref();
    const show = ref(false);
    const selectedObject = ref(props.modelValue);
    const store = useFlowEditorStore();
-      const isSelected = computed(()=>{
-        return selectedObject.value!==null && typeof selectedObject.value === 'object' && ('name' in selectedObject.value)
+    // const sharedText = ref(''); // 共享的文本状态
+    const isSelected = computed(() => {
+      return selectedObject?.value?.sharedText !== '';
    });
-      let vars:IActionVariable[] =[];
-      if(store.currentFlow!==undefined && store.activeNode!==undefined ){
-        vars =store.currentFlow.getVarNames(store.activeNode);
+    // 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 filter=ref('');
    const showDg = () => {
      show.value = true;
    };

-      const closeDg = (val:string) => {
+    const closeDg = (val: string) => {
      if (val == 'OK') {
-          selectedObject.value = appDg.value.selected[0];
+        // selectedObject.value = appDg.value.selected[0];
      }
    };

@@ -72,25 +94,30 @@

    return {
      store,
-        appDg,
+      // appDg,
      show,
      showDg,
      closeDg,
      selectedObject,
-        vars:reactive(vars),
+      vars: reactive(vars),
      isSelected,
-        filter
+      buttonsConfig: [
+        { label: 'フィールド', color: 'primary', type: 'FieldAdd' },
+        { label: '変数', color: 'green', type: 'VariableAdd' },
+      ]
+      // filter
    };
  }
-  });
-  </script>
+});
+</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>
--- a/frontend/src/components/ConditionEditor/NodeCondition.vue
+++ b/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=[];
-      for(const op in Operator){
-        opts.push(Operator[op as keyof typeof Operator]);
-      }
-      return opts;
+      return operator ? operator : Object.values(Operator);
    });
    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,
--- a/frontend/src/components/DynamicItemInput/DynamicItemInput.vue
+++ b/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>
--- a/frontend/src/components/DynamicItemInput/FieldAdd.vue
+++ b/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>
--- a/frontend/src/components/DynamicItemInput/VariableAdd.vue
+++ b/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>
--- a/frontend/src/components/FieldList.vue
+++ b/frontend/src/components/FieldList.vue
@@ -32,7 +32,7 @@ export default {
    ]
    
    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', {
--- a/frontend/src/components/FieldSelect.vue
+++ b/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,
--- a/frontend/src/components/ShowDialog.vue
+++ b/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>
-          <!-- <div class="text-h6">{{ name }}</div> -->
-        </q-card-section>
-        <q-card-section class="q-pt-none" :style="sectionStyle">
+        <q-card-section class="q-mt-md" :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>
--- a/frontend/src/components/VariableList.vue
+++ b/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'
--- a/frontend/src/components/left/AppSelector.vue
+++ b/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) {
--- a/frontend/src/components/right/AppFieldSelect.vue
+++ b/frontend/src/components/right/AppFieldSelect.vue
@@ -18,10 +18,11 @@
            <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-virtual-scroll style="max-height: 160px;" :items="selectedField.fields" separator v-slot="{ item, index }">
-                            <q-item :key="index" dense clickable >
+                            <q-virtual-scroll style="max-height: 160px;" :items="selectedField.fields" separator
+                                v-slot="{ item, index }">
+                                <q-item :key="index" dense clickable>
                                    <q-item-section>
                                        <q-item-label>
                                            {{ item.label }}
@@ -39,7 +40,7 @@
                </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" /> -->
@@ -47,90 +48,38 @@
            </q-card-section>
        </q-card>
    </div>
-
-    <show-dialog v-model:visible="show" name="フィールド一覧" @close="closeFieldDialog" ref="fieldDlg">
-
-        <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 v-model:visible="show" name="フィールド一覧" @close="closeAFBox">
+        <AppFieldSelectBox v-model:selectedField="selectedField" :selectType="selectType" ref="afBox"/>
    </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{
-  id:string,
-  name:string
+
+export interface IApp {
+    id: string,
+    name: string
 }
-interface IField {
+export interface IField {
    name: string,
    code: string,
    type: string
 }

-interface IAppFields{
-   app?:IApp,
-   fields:IField[]
+export interface IAppFields {
+    app?: IApp,
+    fields: IField[]
 }

 export default defineComponent({
-    inheritAttrs:false,
+    inheritAttrs: false,
    name: 'AppFieldSelect',
    components: {
        ShowDialog,
-        FieldSelect,
-        AppSelect,
+        AppFieldSelectBox
    },
    props: {
        displayName: {
@@ -149,79 +98,54 @@ export default defineComponent({
            type: Object,
            default: null
        },
-        selectType:{
-            type:String,
-            default:'single'
-        },
-        fieldTypes:{
-            type:Array,
-            default:()=>[]
+        selectType: {
+            type: String,
+            default: 'single'
        }
    },
    setup(props, { emit }) {
-        const appDlg = ref();
-        const fieldDlg = ref();
        const show = ref(false);
-        const showSelectApp = ref(false);
+        const afBox = ref();
        const selectedField = ref<IAppFields>({
-          app:undefined,
-          fields:[]
+            app: undefined,
+            fields: []
        });
-       if(props.modelValue && "app" in props.modelValue && "fields" in props.modelValue){
-         selectedField.value=props.modelValue as IAppFields;
+        if (props.modelValue && 'app' in props.modelValue && 'fields' in props.modelValue) {
+            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 ={
-              fields:[]
-            } ;
+            selectedField.value = {
+                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];
-                selectedField.value.fields=[];
-                showSelectApp.value=false;
+                console.log(afBox.value);
+                
+                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,
-            fieldDlg,
+            afBox,
            show,
-            showDg,
-            closeAppDlg,
-            closeFieldDialog,
+            showDg: () => { show.value = true },
            selectedField,
-            showSelectApp,
-            isSelected,
-            filter: ref(),
            clear,
-            fieldFilter: ref(),
-            removeField
+            removeField,
+            closeAFBox,
        };
    }
 });
--- a/frontend/src/components/right/AppSelect.vue
+++ b/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>
--- a/frontend/src/components/right/ConditionInput.vue
+++ b/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,6 +86,31 @@ 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' },
+          ]
+        },
+      })
    }
  },

@@ -79,21 +118,39 @@ export default defineComponent({
    const source = props.context.find(element => element?.props?.name === 'sources')

    if (source) {
-      if(props.sourceType === 'field'){
-        provide('sourceFields', computed( () => source.props?.modelValue?.fields ?? []));
-      } else if(props.sourceType === 'app'){
-        console.log('sourceApp', source.props?.modelValue);
-        provide('sourceApp', computed( () => source.props?.modelValue?.app?.id));
+      if (props.sourceType === 'field') {
+        provide('sourceFields', computed(() => source.props?.modelValue?.fields ?? []));
+      } else if (props.sourceType === 'app') {
+        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
    };
  }
 });
--- a/frontend/src/components/right/DataMapping.vue
+++ b/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>
--- a/frontend/src/components/right/DataProcessing.vue
+++ b/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'
-              ? item.field.name
-              : item.field?.name.name;
-            return item.logicalOperator.operator!==''?
-                     `${processingProps.name}.${item.vName} = ${item.logicalOperator.operator}(${name})`
-                    :`${processingProps.name}.${item.vName} = ${name}`
+            return`var(${processingProps.name}.${item.vName}) = ${item.field.sharedText}`
          })
        : []
    );
--- a/frontend/src/components/right/PropertyList.vue
+++ b/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: {
--- a/frontend/src/pages/RuleEditor.vue
+++ b/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'
--- a/frontend/src/types/Conditions.ts
+++ b/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;
-        if(value && typeof value ==='object' && ('label' in value)){
-            value =condNode.value.label;
-        }
-        return `${typeof condNode.object.name === 'object' ? condNode.object.name.name : condNode.object.name} ${condNode.operator} '${value}'`;
+        // let value=condNode.value;
+        // if(value && typeof value ==='object' && ('label' in value)){
+        //     value =condNode.value.label;
+        // }
+        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;
+  }
 }
--- a/plugin/kintone-addins/.env.dev
+++ b/plugin/kintone-addins/.env.dev
@@ -0,0 +1,2 @@
+VITE_SOURCE_MAP = inline
+VITE_PORT = 4173
--- a/plugin/kintone-addins/.env.production
+++ b/plugin/kintone-addins/.env.production
@@ -0,0 +1,2 @@
+VITE_SOURCE_MAP = false
+VITE_PORT = 4173
--- a/plugin/kintone-addins/package.json
+++ b/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",
-    "build": "tsc && vite build && xcopy dist\\*.js ..\\..\\backend\\Temp\\ /E /I /Y",
-    "build:linux": "tsc && vite build && cp -ur dist/*.js ../../backend/Temp",
-    "build:dev": "tsc && set \"SOURCE_MAP=true\" && vite build && xcopy dist\\*.js ..\\..\\backend\\Temp\\ /E /I /Y",
-    "preview": "vite preview",
-    "ngrok": "ngrok http http://localhost:4173/",
-    "vite": "vite dev"
+    "dev": "run-p watch server ngrok",
+    "watch": "vite build --watch --mode dev",
+    "server": "vite dev --mode dev",
+    "ngrok": "ngrok http 4173",
+
+    "build": "run-s b:production copy:windows",
+    "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",
--- a/plugin/kintone-addins/src/actions/current-field-get.ts
+++ b/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();
--- a/plugin/kintone-addins/src/actions/data-mapping.ts
+++ b/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;
+    });
+};
--- a/plugin/kintone-addins/src/actions/data-processing.ts
+++ b/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];
+  },
+};
--- a/plugin/kintone-addins/src/types/action-process.ts
+++ b/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||'';
           }
--- a/plugin/kintone-addins/vite.config.js
+++ b/plugin/kintone-addins/vite.config.js
@@ -1,11 +1,12 @@
 // 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: [
      checker({
        typescript: true,
@@ -21,6 +22,11 @@ export default defineConfig({
          // assetFileNames:'alc_kintone_style.css'
        },
      },
-    sourcemap: sourcemap,
+      sourcemap: process.env.VITE_SOURCE_MAP,
    },
-});
+    server: {
+      port: process.env.VITE_PORT,
+      // open: "/dist/alc_runtime.js",
+    },
+  });
+};
Author	SHA1	Message	Date
Mouriya	9d2217f8e1	ログの削除	2024-07-01 04:08:28 +09:00
Mouriya	704aab9265	スペルミスの修正	2024-07-01 04:07:53 +09:00
Mouriya	046ef4cb9f	APPフィールドコンポーネントのバグ修正	2024-07-01 03:53:49 +09:00
Mouriya	d2f271e3cd	エントリーを追加するときにデータを統合する	2024-06-17 15:22:10 +09:00
Mouriya	5fdb23d6d5	フィールドの生のjsonをビューに直接表示する。	2024-06-17 15:20:32 +09:00
Mouriya	734adf9a1e	空リストの修正	2024-06-17 15:19:36 +09:00
Mouriya	0e8d1957a3	ユーザーが手動でフィールドリストを追加または削除する必要はなくなり、プログラムが自動的にアプリのすべてのフィールドに対してリストを作成します。	2024-06-17 03:18:52 +09:00
Mouriya	e2a625ba12	入力ボックスの入力可否の設定を削除し、特定のボタン入力後に入力ボックスの入力可否に変更する。	2024-06-17 03:16:26 +09:00
Mouriya	eb89b3f8a6	Merge commit '26a685b872daa65a069ad8c39ef4b973c8e25022' into feature-data-mapping	2024-06-17 00:48:01 +09:00
Mouriya	343f97234a	バグ修正：json文字列フェッチの問題	2024-06-10 12:34:01 +09:00
Mouriya	04f28a3be5	新しい統合されたフィールド入力、すべての関連部品の一致修正. フィールドの値を取得するに新しいアクションを追加	2024-06-10 06:10:32 +09:00
Tian Dai	63099eda8b	Merge branch 'plugin-infar-vite' of ssh.dev.azure.com:v3/alicorn-dev/KintoneAppBuilder/KintoneAppBuilder into feature-data-mapping	2024-06-04 17:49:32 +09:00
Tian Dai	65d89b0462	Windowsのオペレーティングシステムの権限問題のため、Viteの自動URLオープン機能を無効にしました	2024-06-04 17:48:39 +09:00
Tian Dai	c6ded099fa	vite devとvite serverはエイリアスではなく、置き換え可能で、問題を修正しました。	2024-06-04 17:41:09 +09:00
Tian Dai	c072233593	Merge branch 'plugin-infar-vite' into feature-data-mapping # Conflicts: # plugin/kintone-addins/package.json # plugin/kintone-addins/vite.config.js	2024-06-04 17:21:43 +09:00
Tian Dai	4e296c1555	npm-run-all2を全オペレーティング・システムと依存性管理のサポートに置き換える。ラン・スクリプトをより組み合わせ可能なものに再編成する。プロジェクトの dotenv サポートを提供する。	2024-06-04 16:16:36 +09:00
maxiaozhe@alicorns.co.jp	016fcaab29	feat:データマッピングアクション変更	2024-06-03 17:39:39 +09:00
Mouriya	bebc1ec9fa	フィックス	2024-06-03 08:10:23 +09:00
Mouriya	f71c3d2123	挿入専用のデータ・マッピング・プラグインを追加	2024-06-03 08:08:06 +09:00
Mouriya	d79ce8d06b	データ収集プラグインの追加	2024-06-03 07:08:04 +09:00
Mouriya	fc9c3a5e81	条件演算子をカスタマイズし、kintoneクエリ文字列に変換することができます。	2024-06-03 07:07:20 +09:00
Mouriya	6df72a1ae3	Merge commit '372dbe50f7254ed3142a85dac58e624fce695aa7' into feature-data-mapping	2024-06-03 02:16:50 +09:00
Mouriya	372dbe50f7	HTTPサーバーのホットリロード機能を追加。	2024-06-03 02:08:37 +09:00
Mouriya	68fde6d490	Merge commit 'b25c17ab53a848f5692f113c6c3c1177e310d87f' into feature-data-mapping	2024-06-03 00:41:01 +09:00
Mouriya	c398dee21e	誤ったmodelValueの使用法の修正	2024-05-27 19:52:16 +09:00
Mouriya	f2ab310b6d	Merge commit 'a6cf95b76d56841e7a5d545c8f0835e44cf4dafc' into feature-data-mapping	2024-05-27 19:27:44 +09:00
Mouriya	ca0f24465b	外部アプリセレクタコンポーネントがある場合、このコンポーネントはアプリを選択せずにフィールドを選択できる。	2024-05-27 19:04:21 +09:00
Mouriya	3cc4b65460	アプリ選択コンポーネントがある場合、アプリまたはフィールドが選択されるまで、それらを無効にすることができる。	2024-05-27 19:03:08 +09:00
Mouriya	a6cf95b76d	新しいアプリ選択コンポーネント	2024-05-27 18:45:34 +09:00
Mouriya	484ab9fdae	ファイル名とコンポーネント名を変更し、コンポーネントとして使用できるようにする。	2024-05-27 18:44:36 +09:00
Mouriya	78bba2502f	データ・マッピング・コンポーネントの追加	2024-05-25 07:01:58 +09:00
Mouriya	c78b3cb5c0	AppFieldSelectコンポーネントは、パブリック部分をAppFieldSelectBoxとして抽出する。	2024-05-25 07:01:38 +09:00