From af22f6e6031165b015156740e895348a0ab42c6d Mon Sep 17 00:00:00 2001
From: "xiaozhe.ma" <xiaozhe.ma@jp.ricoh.com>
Date: Thu, 22 Aug 2024 17:15:49 +0900
Subject: [PATCH] =?UTF-8?q?=E5=B1=9E=E6=80=A7UI=EF=BC=88=E3=83=97=E3=83=AD?=
 =?UTF-8?q?=E3=83=91=E3=83=86=E3=82=A3=EF=BC=89=E3=81=AB=E3=83=81=E3=82=A7?=
 =?UTF-8?q?=E3=83=83=E3=82=AF=E3=83=AB=E3=83=BC=E3=83=AB=E8=A8=AD=E5=AE=9A?=
 =?UTF-8?q?=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ConditionEditor/ConditionEditor.vue       |  12 +-
 .../src/components/right/AppFieldSelect.vue   | 272 +++++++++---------
 frontend/src/components/right/AppSelect.vue   |  51 ++--
 .../src/components/right/ConditionInput.vue   |   6 +-
 frontend/src/components/right/DataMapping.vue |  90 ++++--
 .../src/components/right/DataProcessing.vue   |  38 ++-
 frontend/src/components/right/DatePicker.vue  |  22 +-
 frontend/src/components/right/EventSetter.vue |  26 +-
 frontend/src/components/right/FieldInput.vue  |  25 +-
 frontend/src/components/right/InputText.vue   |  16 +-
 .../src/components/right/MuiltInputText.vue   |  26 +-
 .../src/components/right/MultiFieldInput.vue  |   0
 frontend/src/components/right/NumInput.vue    |  29 +-
 .../src/components/right/PropertyPanel.vue    |  27 +-
 frontend/src/components/right/SelectBox.vue   |  26 +-
 frontend/src/pages/FlowChart.vue              |   8 +-
 frontend/src/stores/flowEditor.ts             |  18 +-
 frontend/src/types/Conditions.ts              |   7 +-
 18 files changed, 468 insertions(+), 231 deletions(-)
 delete mode 100644 frontend/src/components/right/MultiFieldInput.vue

diff --git a/frontend/src/components/ConditionEditor/ConditionEditor.vue b/frontend/src/components/ConditionEditor/ConditionEditor.vue
index eef9401..567f4c6 100644
--- a/frontend/src/components/ConditionEditor/ConditionEditor.vue
+++ b/frontend/src/components/ConditionEditor/ConditionEditor.vue
@@ -52,12 +52,12 @@ import { useQuasar } from 'quasar';
       const tree = ref(props.conditionTree);
       const closeDg = (val:string) => {
         if (val == 'OK') {
-          if(tree.value.root.children.length===0){
-            $q.notify({
-              type: 'negative',
-              message: `条件式を設定してください。`
-            });
-         }
+        //   if(tree.value.root.children.length===0){
+        //     $q.notify({
+        //       type: 'negative',
+        //       message: `条件式を設定してください。`
+        //     });
+        //  }
           context.emit("update:conditionTree",tree.value);
         }
         showflg.value=false;
diff --git a/frontend/src/components/right/AppFieldSelect.vue b/frontend/src/components/right/AppFieldSelect.vue
index aa9e448..4895a4f 100644
--- a/frontend/src/components/right/AppFieldSelect.vue
+++ b/frontend/src/components/right/AppFieldSelect.vue
@@ -1,157 +1,165 @@
 <template>
-    <div class="q-my-md" v-bind="$attrs">
-        <q-card flat>
-            <q-card-section class="q-pa-none q-my-sm q-mr-md">
-                <!-- <div class=" q-my-none ">App Field Select</div> -->
-                <div class="row q-mb-xs">
-                    <div class="text-primary q-mb-xs text-caption">{{ $props.displayName }}</div>
-                </div>
-                <div class="row">
-                    <div class="col">
-                        <div class="q-mb-xs">{{ selectedField.app?.name || '未選択' }}</div>
-                    </div>
-                    <div class="col-1">
-                        <q-btn round flat size="sm" color="primary" icon="search" @click="showDg" />
-                    </div>
-                </div>
-            </q-card-section>
-            <q-separator />
-            <q-card-section class="q-pa-none q-ma-none">
-                <div style="">
-                    <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-item-section>
-                                        <q-item-label>
-                                            {{ item.label }}
-                                        </q-item-label>
-                                    </q-item-section>
-                                    <q-item-section side>
-                                        <q-btn round flat size="sm" icon="clear" @click="removeField(index)" />
-                                    </q-item-section>
-                                </q-item>
-                            </q-virtual-scroll>
-                        </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">
-                <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 class="q-my-md" v-bind="$attrs">
+    <q-field v-model="selectedField" :label="displayName" labelColor="primary" :clearable="isSelected" stack-label
+      :rules="rulesExp" lazy-rules="ondemand" @clear="clear" ref="fieldRef">
+      <template v-slot:control>
+        {{ isSelected ? selectedField.app?.name : "(未選択)" }}
+      </template>
+      <template v-slot:hint v-if="!isSelected">
+        {{ placeholder }}
+      </template>
+      <template v-slot:append>
+        <q-icon name="search" class="cursor-pointer" color="primary" @click="showDg" />
+      </template>
+    </q-field>
+    <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-item-section>
+              <q-item-label>
+                {{ item.label }}
+              </q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <q-btn round flat size="sm" icon="clear" @click="removeField(index)" />
+            </q-item-section>
+          </q-item>
+        </q-virtual-scroll>
+      </q-list>
     </div>
     <show-dialog v-model:visible="show" name="フィールド一覧" @close="closeAFBox">
-        <AppFieldSelectBox v-model:selectedField="selectedField" :selectType="selectType" ref="afBox" :fieldTypes="fieldTypes"/>
+      <AppFieldSelectBox v-model:selectedField="selectedField" :selectType="selectType" ref="afBox"
+        :fieldTypes="fieldTypes" />
     </show-dialog>
+  </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, watchEffect } from 'vue';
+import { computed, defineComponent, ref, watchEffect } from 'vue';
 import AppFieldSelectBox from '../AppFieldSelectBox.vue';
 import ShowDialog from '../ShowDialog.vue';
 import { useFlowEditorStore } from 'stores/flowEditor';
 
 export interface IApp {
-    id: string,
-    name: string
+  id: string,
+  name: string
 }
 export interface IField {
-    name: string,
-    code: string,
-    type: string,
-    label?:string
+  name: string,
+  code: string,
+  type: string,
+  label?: string
 }
 
 export interface IAppFields {
-    app?: IApp,
-    fields: IField[]
+  app?: IApp,
+  fields: IField[]
 }
 
 export default defineComponent({
-    inheritAttrs: false,
-    name: 'AppFieldSelect',
-    components: {
-        ShowDialog,
-        AppFieldSelectBox
+  inheritAttrs: false,
+  name: 'AppFieldSelect2',
+  components: {
+    ShowDialog,
+    AppFieldSelectBox
+  },
+  props: {
+    displayName: {
+      type: String,
+      default: '',
     },
-    props: {
-        displayName: {
-            type: String,
-            default: '',
-        },
-        name: {
-            type: String,
-            default: '',
-        },
-        placeholder: {
-            type: String,
-            default: '',
-        },
-        modelValue: {
-            type: Object,
-            default: null
-        },
-        selectType: {
-            type: String,
-            default: 'single'
-        },
-        fieldTypes:{
-            type:Array,
-            default:()=>[]
-        }
+    name: {
+      type: String,
+      default: '',
     },
-    setup(props, { emit }) {
-        const show = ref(false);
-        const afBox = ref();
-        const selectedField = ref<IAppFields>({
-            app: undefined,
-            fields: []
-        });
-        if (props.modelValue && 'app' in props.modelValue && 'fields' in props.modelValue) {
-            selectedField.value = props.modelValue as IAppFields;
-        }
-        const store = useFlowEditorStore();
-
-        const clear = () => {
-            selectedField.value = {
-                fields: []
-            };
-        }
-
-        const removeField = (index: number) => {
-            selectedField.value.fields.splice(index, 1);
-        }
-
-        const closeAFBox = (val: string) => {
-            if (val == 'OK') {
-                console.log(afBox.value);
-
-                selectedField.value = afBox.value.selField;
-            }
-        };
-
-        watchEffect(() => {
-            emit('update:modelValue', selectedField.value);
-        });
-
-        return {
-            store,
-            afBox,
-            show,
-            showDg: () => { show.value = true },
-            selectedField,
-            clear,
-            removeField,
-            closeAFBox,
-        };
+    placeholder: {
+      type: String,
+      default: '',
+    },
+    modelValue: {
+      type: Object,
+      default: null
+    },
+    selectType: {
+      type: String,
+      default: 'single'
+    },
+    fieldTypes: {
+      type: Array,
+      default: () => []
+    },
+    //例：[val=>!!val ||'入力してください']
+    rules: {
+      type: String,
+      default: undefined
+    },
+    required: {
+      type: Boolean,
+      default: false
+    },
+    requiredMessage: {
+      type: String,
+      default: ''
     }
+  },
+  setup(props, { emit }) {
+    const show = ref(false);
+    const afBox = ref();
+    const fieldRef = ref();
+    const selectedField = ref<IAppFields>({
+      app: undefined,
+      fields: []
+    });
+    if (props.modelValue && 'app' in props.modelValue && 'fields' in props.modelValue) {
+      selectedField.value = props.modelValue as IAppFields;
+    }
+    const store = useFlowEditorStore();
+
+    const clear = () => {
+      selectedField.value = {
+        fields: []
+      };
+    }
+
+    const removeField = (index: number) => {
+      selectedField.value.fields.splice(index, 1);
+    }
+
+    const closeAFBox = (val: string) => {
+      if (val == 'OK') {
+        console.log(afBox.value);
+        selectedField.value = afBox.value.selField;
+        fieldRef.value.validate();
+      }
+    };
+
+    const isSelected = computed(() => {
+      return !!selectedField.value.app
+    });
+
+    const customExp = props.rules === undefined ? [] : eval(props.rules);
+    const errmsg = props.requiredMessage?props.requiredMessage:`${props.displayName}が必須です。`;
+    const requiredExp = props.required ? [((val: any) => (val && val.app && val.fields && val.fields.length > 0) || errmsg)] : [];
+    const rulesExp = [...requiredExp, ...customExp];
+
+    watchEffect(() => {
+      emit('update:modelValue', selectedField.value);
+    });
+
+    return {
+      store,
+      afBox,
+      show,
+      showDg: () => { show.value = true },
+      selectedField,
+      clear,
+      removeField,
+      closeAFBox,
+      isSelected,
+      rulesExp,
+      fieldRef
+    };
+  }
 });
 </script>
diff --git a/frontend/src/components/right/AppSelect.vue b/frontend/src/components/right/AppSelect.vue
index 75300c7..396facd 100644
--- a/frontend/src/components/right/AppSelect.vue
+++ b/frontend/src/components/right/AppSelect.vue
@@ -1,14 +1,18 @@
 <template>
-    <div>
-        <q-field :label="displayName" labelColor="primary" stack-label>
+    <div v-bind="$attrs">
+        <q-field :label="displayName" labelColor="primary" stack-label
+        :rules="rulesExp"
+        lazy-rules="ondemand"
+        v-model="selectedApp"
+        ref="fieldRef">
             <template v-slot:control>
                 <q-card flat class="full-width">
                     <q-card-actions vertical>
                         <q-btn color="grey-3" text-color="black" @click="() => { dgIsShow = true }">アプリ選択</q-btn>
                     </q-card-actions>
                     <q-card-section class="text-caption">
-                        <div v-if="selectedField.app.name">
-                            {{ selectedField.app.name }}
+                        <div v-if="selectedApp.app.name">
+                            {{ selectedApp.app.name }}
                         </div>
                         <div v-else>{{ placeholder }}</div>
                     </q-card-section>
@@ -43,10 +47,6 @@ export default defineComponent({
         AppSelectBox
     },
     props: {
-        context: {
-            type: Array<Props>,
-            default: '',
-        },
         displayName: {
             type: String,
             default: '',
@@ -62,31 +62,50 @@ export default defineComponent({
         modelValue: {
             type: Object,
             default: null
+        },
+        //例：[val=>!!val ||'入力してください']
+        rules: {
+          type: String,
+          default: undefined
+        },
+        required: {
+          type: Boolean,
+          default: false
+        },
+        requiredMessage: {
+          type: String,
+          default: ''
         }
     },
     setup(props, { emit }) {
-        const appDg = ref()
+        const appDg = ref();
+        const fieldRef=ref();
         const dgIsShow = ref(false)
-        const selectedField = props.modelValue && props.modelValue.app ? props.modelValue : reactive({app:{}});
+        const selectedApp = 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];
+                selectedApp.app = appDg.value.selected[0];
+                fieldRef.value.validate();
             }
         };
-
-        console.log(selectedField);
-
+        //ルール設定
+        const customExp = props.rules === undefined ? [] : eval(props.rules);
+        const errmsg = props.requiredMessage?props.requiredMessage:`${props.displayName}を選択してください。`;
+        const requiredExp = props.required ? [((val: any) => (!!val && !!val.app && !!val.app.name) || errmsg)] : [];
+        const rulesExp = [...requiredExp, ...customExp];
         watchEffect(() => {
-            emit('update:modelValue', selectedField);
+            emit('update:modelValue', selectedApp);
         });
 
         return {
             filter: ref(''),
             dgIsShow,
             appDg,
+            fieldRef,
             closeDg,
-            selectedField
+            selectedApp,
+            rulesExp
         };
     }
 });
diff --git a/frontend/src/components/right/ConditionInput.vue b/frontend/src/components/right/ConditionInput.vue
index c8fbef2..264eacc 100644
--- a/frontend/src/components/right/ConditionInput.vue
+++ b/frontend/src/components/right/ConditionInput.vue
@@ -23,9 +23,6 @@ import { ConditionNode, ConditionTree, Operator, OperatorListItem } from 'app/sr
 import { computed, defineComponent, provide, reactive, ref, watchEffect } from 'vue';
 import ConditionEditor from '../ConditionEditor/ConditionEditor.vue';
 import { IActionProperty } from 'src/types/ActionTypes';
-import {  } from 'src/types/';
-
-
 
 export default defineComponent({
   name: 'FieldInput',
@@ -132,7 +129,8 @@ export default defineComponent({
     const isSetted = ref(props.modelValue && props.modelValue !== '');
 
     const conditionString = computed(() => {
-      return tree.buildConditionString(tree.root);
+      const condiStr= tree.buildConditionString(tree.root);
+      return condiStr==='()'?'(条件なし)':condiStr;
     });
 
     const showDg = () => {
diff --git a/frontend/src/components/right/DataMapping.vue b/frontend/src/components/right/DataMapping.vue
index 3633f0a..1747a42 100644
--- a/frontend/src/components/right/DataMapping.vue
+++ b/frontend/src/components/right/DataMapping.vue
@@ -1,6 +1,10 @@
 <template>
-    <div>
-        <q-field :label="displayName" labelColor="primary" stack-label>
+    <div class="q-my-md" v-bind="$attrs">
+        <q-field :label="displayName" labelColor="primary" stack-label
+          v-model="mappingProps"
+          :rules="rulesExp"
+          ref="fieldRef"
+        >
             <template v-slot:control>
                 <q-card flat class="full-width">
                     <q-card-actions vertical>
@@ -17,7 +21,6 @@
             </template>
         </q-field>
         <show-dialog v-model:visible="dgIsShow" name="データマッピング" @close="closeDg" min-width="55vw" min-height="60vh">
-
             <div class="">
                 <div class="row q-col-gutter-x-xs flex-center">
                     <div class="col-5">
@@ -36,7 +39,7 @@
                         キー
                     </div>
                 </div>
-                <q-virtual-scroll style="max-height: 60vh;" :items="mappingProps" separator v-slot="{ item, index }">
+                <q-virtual-scroll style="max-height: 60vh;" :items="mappingProps.data" separator v-slot="{ item, index }">
                     <!-- <div class="q-my-sm" v-for="(item, index) in mappingProps" :key="item.id"> -->
                     <div class="row q-pa-sm q-col-gutter-x-md flex-center">
                         <div class="col-5">
@@ -74,19 +77,19 @@
                         </div>
                     </div>
 
-                    <show-dialog v-model:visible="mappingProps[index].to.isDialogVisible" name="フィールド一覧"
+                    <show-dialog v-model:visible="mappingProps.data[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 }">
+                            :selectedFields="mappingProps.data[index].to.fields"
+                            :updateSelects="(fields) => { mappingProps.data[index].to.fields = fields; mappingProps.data[index].to.app = sourceApp }">
                         </FieldSelect>
-                        <AppFieldSelectBox v-else v-model:selectedField="mappingProps[index].to" />
+                        <AppFieldSelectBox v-else v-model:selectedField="mappingProps.data[index].to" />
                     </show-dialog>
                     <!-- </div> -->
                 </q-virtual-scroll>
 
                 <div class="q-mt-lg q-ml-md row ">
-                    <q-checkbox size="sm" v-model="createWithNull" label="キーが存在しない場合は新規に作成され、存在する場合はデータが更新されます。" />
+                    <q-checkbox size="sm" v-model="mappingProps.createWithNull" label="キーが存在しない場合は新規に作成され、存在する場合はデータが更新されます。" />
                 </div>
             </div>
         </show-dialog>
@@ -115,12 +118,12 @@ type ContextProps = {
     }
 };
 
-type CurrentModelValueType = {
-    data: MappingValueType[];
+interface IMappingSetting {
+    data: IMappingValueType[];
     createWithNull: boolean;
 }
 
-type MappingValueType = {
+interface IMappingValueType {
     id: string;
     from: { sharedText?: string };
     to: {
@@ -157,7 +160,7 @@ export default defineComponent({
             default: '',
         },
         modelValue: {
-            type: Object as () => CurrentModelValueType,
+            type: Object as () => IMappingSetting,
         },
         placeholder: {
             type: String,
@@ -171,27 +174,60 @@ export default defineComponent({
           type:Array,
           default:()=>[]
         },
+        //例：[val=>!!val ||'入力してください']
+        rules: {
+          type: String,
+          default: undefined
+        },
+        required: {
+          type: Boolean,
+          default: false
+        },
+        requiredMessage: {
+          type: String,
+          default: ''
+        }
     },
-
     setup(props, { emit }) {
+        const fieldRef=ref();
         const source = props.context.find(element => element?.props?.name === 'sources')
 
         const sourceApp = computed(() => source?.props?.modelValue?.app);
 
         const sourceAppId = computed(() => sourceApp.value?.id);
 
+         //ルール設定
+        const checkMapping = (val:IMappingSetting)=>{
+          if(!val || !val.data){
+            return false;
+          }
+          console.log(val);
+          const mappingDatas = val.data.filter(item=>item.from?.sharedText && item.to.fields?.length > 0);
+          return mappingDatas.length>0;
+        }
+        const customExp = props.rules === undefined ? [] : eval(props.rules);
+        const errmsg = props.requiredMessage?props.requiredMessage:`${props.displayName}を選択してください。`;
+        const requiredExp = props.required ? [((val: any) => checkMapping(val) || errmsg)] : [];
+        const rulesExp = [...requiredExp, ...customExp];
+
+        // const mappingProps = ref(props.modelValue?.data ?? []);
+
+        // const createWithNull = ref(props.modelValue?.createWithNull ?? false);
+
+        const mappingProps = reactive<IMappingSetting>({
+          data:props.modelValue?.data ?? [],
+          createWithNull:props.modelValue?.createWithNull ?? false
+        });
+
         const closeDg = () => {
-            emit('update:modelValue', { data: mappingProps.value, createWithNull: createWithNull.value });
+          fieldRef.value.validate();
+          emit('update:modelValue',mappingProps);
         }
 
         const closeToDg = () => {
-            emit('update:modelValue', { data: mappingProps.value, createWithNull: createWithNull.value });
+          emit('update:modelValue',mappingProps);
         }
 
-        const mappingProps = ref(props.modelValue?.data ?? []);
-
-        const createWithNull = ref(props.modelValue?.createWithNull ?? false)
-
         // 外部ソースコンポーネントの appid をリッスンし、変更されたときに現在のコンポーネントを更新します
         watch(() => sourceAppId.value, async (newId,) => {
             if (!newId) return;
@@ -210,7 +246,7 @@ export default defineComponent({
                     .map(f => ({ name: f.label, objectType: 'field', ...f }))
                     .map(f => {
                         // 更新前の値を求める
-                        const beforeData = mappingProps.value.find(m => m.to.fields[0].code === f.code)
+                        const beforeData = mappingProps.data.find(m => m.to.fields[0].code === f.code)
                         return {
                             id: uuidv4(),
                             from: beforeData?.from ?? {}, // 以前のデータを入力します
@@ -235,12 +271,12 @@ export default defineComponent({
                 ktAppFields.filter(f => lookupFixedField.includes(f.to.fields[0].code)).forEach(f => f.disabled = true)
             }
 
-            mappingProps.value = ktAppFields
+            mappingProps.data = ktAppFields
         }
 
         const mappingObjectsInputDisplay = computed(() =>
-            (mappingProps.value && Array.isArray(mappingProps.value)) ?
-                mappingProps.value
+            (mappingProps.data && Array.isArray(mappingProps.data)) ?
+                mappingProps.data
                     .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} `;
@@ -251,17 +287,17 @@ export default defineComponent({
         const btnDisable = computed(() => props.onlySourceSelect ? !(source?.props?.modelValue?.app?.id) : false);
 
         watchEffect(() => {
-            emit('update:modelValue', { data: mappingProps.value, createWithNull: createWithNull.value });
+            emit('update:modelValue', mappingProps);
         });
 
         return {
             uuidv4,
             dgIsShow: ref(false),
+            fieldRef,
             closeDg,
             toDgIsShow: ref(false),
             closeToDg,
             mappingProps,
-            createWithNull,
             updateFields,
             // addMappingObject: () => mappingProps.push(defaultMappingProp()),
             // deleteMappingObject,
@@ -269,6 +305,8 @@ export default defineComponent({
             sourceApp,
             sourceAppId,
             btnDisable,
+            rulesExp,
+            checkMapping,
             config: {
                 canInput: false,
                 buttonsConfig: [
diff --git a/frontend/src/components/right/DataProcessing.vue b/frontend/src/components/right/DataProcessing.vue
index 00f973a..5a44818 100644
--- a/frontend/src/components/right/DataProcessing.vue
+++ b/frontend/src/components/right/DataProcessing.vue
@@ -1,6 +1,11 @@
 <template>
   <div>
-    <q-field :label="displayName" labelColor="primary" stack-label>
+    <q-field :label="displayName" labelColor="primary" stack-label
+    v-model="processingProps"
+    :rules="rulesExp"
+    lazy-rules="ondemand"
+    ref="fieldRef"
+    >
       <template v-slot:control>
         <q-card flat class="full-width">
           <q-card-actions vertical>
@@ -120,9 +125,19 @@ export default defineComponent({
       type: String,
       default: '',
     },
+    //例：[val=>!!val ||'入力してください']
+    rules: {
+      type: String,
+      default: undefined
+    },
+    required: {
+      type: Boolean,
+      default: false
+    }
   },
 
   setup(props, { emit }) {
+    const fieldRef=ref();
     const source = props.context.find(element => element?.props?.name === 'sources')
 
     if (source) {
@@ -155,6 +170,7 @@ export default defineComponent({
       });
 
     const closeDg = () => {
+      fieldRef.value.validate();
       emit('update:modelValue', processingProps);
     }
 
@@ -218,6 +234,24 @@ export default defineComponent({
         "label": "最初の値"
       }
     ]);
+    const checkInput=(val:ValueType)=>{
+      if(!val){
+        return false;
+      }
+      if(!val.name){
+        return "集計結果の変数名を入力してください";
+      }
+      if(!val.vars || val.vars.length==0){
+        return "集計処理を設定してください";
+      }
+      if(val.vars.some((x)=>!x.vName)){
+        return "集計結果変数名を入力してください";
+      }
+      return true;
+    }
+    const customExp = props.rules === undefined ? [] : eval(props.rules);
+    const requiredExp = props.required ? [(val: any) => checkInput(val)] : [];
+    const rulesExp = [...requiredExp, ...customExp];
 
     watchEffect(() => {
       emit('update:modelValue', processingProps);
@@ -232,6 +266,8 @@ export default defineComponent({
       deleteProcessingObject,
       logicalOperators,
       processingObjectsInputDisplay,
+      rulesExp,
+      fieldRef
     };
   },
 });
diff --git a/frontend/src/components/right/DatePicker.vue b/frontend/src/components/right/DatePicker.vue
index eeeff6b..f66a26c 100644
--- a/frontend/src/components/right/DatePicker.vue
+++ b/frontend/src/components/right/DatePicker.vue
@@ -1,6 +1,6 @@
 <template>
   <div v-bind="$attrs">
-    <q-input v-model="selectedDate" :label="displayName" :placeholder="placeholder" label-color="primary" mask="date" :rules="['date']" stack-label>
+    <q-input v-model="selectedDate" :label="displayName" :placeholder="placeholder" label-color="primary" mask="date" :rules="rulesExp" stack-label>
       <template v-slot:append>
         <q-icon name="event" class="cursor-pointer">
           <q-popup-proxy cover transition-show="scale" transition-hide="scale">
@@ -43,16 +43,32 @@ export default defineComponent({
       type: String,
       default: '',
     },
+    //例：[val=>!!val ||'入力してください']
+    rules: {
+      type: String,
+      default: undefined
+    },
+    required:{
+      type:Boolean,
+      default:false
+    },
+    requiredMessage: {
+      type: String,
+      default: ''
+    }
   },
   setup(props, { emit }) {
     const selectedDate = ref(props.modelValue);
-
+    const customExp = props.rules === undefined ? [] : eval(props.rules);
+    const requiredExp = props.required?[((val:any)=>!!val||`${props.displayName}が必須です。`),'date']:['date'];
+    const rulesExp=[...requiredExp,...customExp];
     watchEffect(() => {
       emit('update:modelValue', selectedDate.value);
     });
 
     return {
-      selectedDate
+      selectedDate,
+      rulesExp
     };
   }
 });
diff --git a/frontend/src/components/right/EventSetter.vue b/frontend/src/components/right/EventSetter.vue
index 25a90d5..b9f8f2c 100644
--- a/frontend/src/components/right/EventSetter.vue
+++ b/frontend/src/components/right/EventSetter.vue
@@ -1,6 +1,9 @@
 <template>
   <div v-bind="$attrs">
-    <q-input :label="displayName" v-model="inputValue" label-color="primary" :placeholder="placeholder" stack-label>
+    <q-input :label="displayName" v-model="inputValue" label-color="primary"
+    :placeholder="placeholder"
+    :rules="rulesExp"
+    stack-label>
       <template v-slot:append>
         <q-btn round dense flat icon="add" @click="addButtonEvent()" />
       </template>
@@ -40,12 +43,29 @@ export default defineComponent({
     connectProps:{
       type:Object,
       default:undefined
+    },
+    //例：[val=>!!val ||'入力してください']
+    rules: {
+      type: String,
+      default: undefined
+    },
+    required:{
+      type:Boolean,
+      default:false
+    },
+    requiredMessage: {
+      type: String,
+      default: ''
     }
   },
 
   setup(props , { emit }) {
     const inputValue = ref(props.modelValue);
     const store = useFlowEditorStore();
+    const customExp = props.rules === undefined ? [] : eval(props.rules);
+    const errmsg = props.requiredMessage?props.requiredMessage:`${props.displayName}を入力してください。`;
+    const requiredExp = props.required ? [((val: any) => !!val || errmsg)] : [];
+    const rulesExp = [...requiredExp, ...customExp];
     const addButtonEvent=()=>{
       const eventId =store.currentFlow?.getRoot()?.name;
       if(eventId===undefined){return;}
@@ -69,14 +89,14 @@ export default defineComponent({
         });
       }
     }
-
     watchEffect(() => {
       emit('update:modelValue', inputValue.value);
     });
 
     return {
       inputValue,
-      addButtonEvent
+      addButtonEvent,
+      rulesExp
     };
   },
 });
diff --git a/frontend/src/components/right/FieldInput.vue b/frontend/src/components/right/FieldInput.vue
index 1457677..0d20cb4 100644
--- a/frontend/src/components/right/FieldInput.vue
+++ b/frontend/src/components/right/FieldInput.vue
@@ -1,7 +1,9 @@
 <template>
   <div v-bind="$attrs">
     <q-field v-model="selectedField" :label="displayName" labelColor="primary" :clearable="isSelected" stack-label
-      :bottom-slots="!isSelected">
+      :bottom-slots="!isSelected"
+      :rules="rulesExp"
+    >
       <template v-slot:control>
         <q-chip color="primary" text-color="white" v-if="isSelected">
           {{ selectedField.name }}
@@ -74,6 +76,19 @@ export default defineComponent({
       type: Object,
       default: null
     },
+    //例：[val=>!!val ||'入力してください']
+    rules: {
+      type: String,
+      default: undefined
+    },
+    required: {
+      type: Boolean,
+      default: false
+    },
+    requiredMessage: {
+      type: String,
+      default: ''
+    }
   },
 
   setup(props, { emit }) {
@@ -85,6 +100,11 @@ export default defineComponent({
     const isSelected = computed(() => {
       return selectedField.value !== null && typeof selectedField.value === 'object' && ('name' in selectedField.value)
     });
+    //ルール設定
+    const customExp = props.rules === undefined ? [] : eval(props.rules);
+    const errmsg = props.requiredMessage?props.requiredMessage:`${props.displayName}が必須です。`;
+    const requiredExp = props.required ? [((val: any) => (!!val && typeof val==='object' && !!val.name) || errmsg)] : [];
+    const rulesExp = [...requiredExp, ...customExp];
 
     const showDg = () => {
       show.value = true;
@@ -109,7 +129,8 @@ export default defineComponent({
       selectedField,
       isSelected,
       filter:ref(''),
-      selectedFields
+      selectedFields,
+      rulesExp
     };
   }
 });
diff --git a/frontend/src/components/right/InputText.vue b/frontend/src/components/right/InputText.vue
index cb6ee83..fb1678a 100644
--- a/frontend/src/components/right/InputText.vue
+++ b/frontend/src/components/right/InputText.vue
@@ -14,7 +14,6 @@
 </template>
 
 <script lang="ts">
-import { kMaxLength } from 'buffer';
 import { defineComponent, ref, watchEffect, computed } from 'vue';
 
 export default defineComponent({
@@ -50,8 +49,16 @@ export default defineComponent({
       type: String,
       default: undefined
     },
+    required:{
+      type:Boolean,
+      default:false
+    },
+    requiredMessage: {
+      type: String,
+      default: ''
+    },
     modelValue: {
-      // type: Any,
+      type: null as any,
       default: '',
     },
   },
@@ -75,8 +82,11 @@ export default defineComponent({
       },
     });
     // const inputValue = ref(props.modelValue);
-    const rulesExp = props.rules === undefined ? null : eval(props.rules);
 
+    const customExp = props.rules === undefined ? [] : eval(props.rules);
+    const errmsg = props.requiredMessage?props.requiredMessage:`${props.displayName}が必須です。`;
+    const requiredExp = props.required?[((val:any)=>!!val || errmsg )]:[];
+    const rulesExp=[...requiredExp,...customExp];
     // const finalValue = computed(() => {
     // return props.name !== 'verName' ? inputValue.value : {
     // name: inputValue.value,
diff --git a/frontend/src/components/right/MuiltInputText.vue b/frontend/src/components/right/MuiltInputText.vue
index ce8b6c9..9039dc3 100644
--- a/frontend/src/components/right/MuiltInputText.vue
+++ b/frontend/src/components/right/MuiltInputText.vue
@@ -1,7 +1,10 @@
 <template>
   <div v-bind="$attrs">
-    <q-input :label="displayName" label-color="primary" v-model="inputValue" :placeholder="placeholder" autogrow
-      stack-label />
+    <q-input :label="displayName" label-color="primary" v-model="inputValue"
+    :placeholder="placeholder"
+    :rules="rulesExp"
+    autogrow
+    stack-label />
   </div>
 </template>
 
@@ -32,17 +35,34 @@ export default defineComponent({
       type: String,
       default: '',
     },
+    //例：[val=>!!val ||'入力してください']
+    rules: {
+      type: String,
+      default: undefined
+    },
+    required:{
+      type:Boolean,
+      default:false
+    },
+    requiredMessage: {
+      type: String,
+      default: ''
+    },
   },
 
   setup(props, { emit }) {
     const inputValue = ref(props.modelValue);
-
+    const customExp = props.rules === undefined ? [] : eval(props.rules);
+    const errmsg = props.requiredMessage?props.requiredMessage:`${props.displayName}が必須です。`;
+    const requiredExp = props.required?[((val:any)=>!!val || errmsg )]:[];
+    const rulesExp=[...requiredExp,...customExp];
     watchEffect(() => {
       emit('update:modelValue', inputValue.value);
     });
 
     return {
       inputValue,
+      rulesExp
     };
   },
 });
diff --git a/frontend/src/components/right/MultiFieldInput.vue b/frontend/src/components/right/MultiFieldInput.vue
deleted file mode 100644
index e69de29..0000000
diff --git a/frontend/src/components/right/NumInput.vue b/frontend/src/components/right/NumInput.vue
index 6a1957f..9e65b91 100644
--- a/frontend/src/components/right/NumInput.vue
+++ b/frontend/src/components/right/NumInput.vue
@@ -49,6 +49,14 @@ export default defineComponent({
       type:String,
       default:undefined
     },
+    required:{
+      type:Boolean,
+      default:false
+    },
+    requiredMessage: {
+      type: String,
+      default: ''
+    },
     modelValue: {
       type: [Number , String],
       default: undefined
@@ -57,23 +65,10 @@ export default defineComponent({
 
   setup(props, { emit }) {
     const numValue = ref(props.modelValue);
-    const rulesExp = props.rules===undefined?null : eval(props.rules);
-    const isError = computed(()=>{
-      const val = numValue.value;
-      if (val === undefined) {
-        return false;
-      }
-      const numVal = typeof val === "string" ? parseInt(val) : val;
-      // Ensure parsed value is a valid number
-      if (isNaN(numVal)) {
-        return true;
-      }
-      // Check against min and max boundaries, if defined
-      if ((props.min !== undefined && numVal < props.min) || (props.max !== undefined && numVal > props.max)) {
-        return true;
-      }
-      return false;
-    });
+    const customExp = props.rules === undefined ? [] : eval(props.rules);
+    const errmsg = props.requiredMessage?props.requiredMessage:`${props.displayName}が必須です。`;
+    const requiredExp = props.required?[((val:any)=>!!val || errmsg )]:[];
+    const rulesExp=[...requiredExp,...customExp];
 
     watchEffect(()=>{
       emit("update:modelValue",numValue.value);
diff --git a/frontend/src/components/right/PropertyPanel.vue b/frontend/src/components/right/PropertyPanel.vue
index 401bab3..a5fca22 100644
--- a/frontend/src/components/right/PropertyPanel.vue
+++ b/frontend/src/components/right/PropertyPanel.vue
@@ -11,6 +11,7 @@
          elevated
          overlay
        >
+       <q-form  @submit="save" autocomplete="off" class="full-height">
         <q-card class="column" style="max-width: 300px;min-height: 100%">
          <q-card-section>
            <div class="text-h6">{{ actionNode?.subTitle }}：設定</div>
@@ -21,16 +22,17 @@
 
          <q-card-actions align="right" class="bg-white text-teal">
             <q-btn flat label="キャンセル" @click="cancel"  outline dense padding="none sm" color="primary"/>
-            <q-btn flat label="更新" @click="save" outline dense padding="none sm" color="primary" />
+            <q-btn flat label="更新" type="submit" outline dense padding="none sm" color="primary" />
          </q-card-actions>
        </q-card>
+      </q-form>
    </q-drawer>
    </div>
  </template>
  <script lang="ts">
  import {  ref,defineComponent, PropType ,watchEffect} from 'vue'
  import PropertyList from 'components/right/PropertyList.vue';
-import { IActionNode } from 'src/types/ActionTypes';
+import { IActionNode, IActionProperty } from 'src/types/ActionTypes';
  export default defineComponent({
   name: 'PropertyPanel',
   components: {
@@ -47,14 +49,28 @@ import { IActionNode } from 'src/types/ActionTypes';
     }
   },
   emits: [
-    'update:drawerRight'
+    'update:drawerRight',
+    'saveActionProps'
   ],
   setup(props,{emit}) {
     const showPanel =ref(props.drawerRight);
-    const actionProps =ref(props.actionNode?.actionProps);
+
+    const cloneProps = (actionProps:IActionProperty[]):IActionProperty[]|null=>{
+        if(!actionProps){
+          return null;
+        }
+        const json=JSON.stringify(actionProps);
+        return JSON.parse(json);
+    }
+
+    const actionProps =ref(cloneProps(props.actionNode?.actionProps));
+
     watchEffect(() => {
+      if(showPanel.value!==undefined){
+        showPanel.value = props.drawerRight;
+      }
       showPanel.value = props.drawerRight;
-      actionProps.value= props.actionNode?.actionProps;
+      actionProps.value= cloneProps(props.actionNode?.actionProps);
     });
 
     const cancel = async() =>{
@@ -64,6 +80,7 @@ import { IActionNode } from 'src/types/ActionTypes';
 
     const save = async () =>{
       showPanel.value=false;
+      emit('saveActionProps', actionProps.value);
       emit('update:drawerRight',false )
     }
 
diff --git a/frontend/src/components/right/SelectBox.vue b/frontend/src/components/right/SelectBox.vue
index 4cb25a5..09c5b76 100644
--- a/frontend/src/components/right/SelectBox.vue
+++ b/frontend/src/components/right/SelectBox.vue
@@ -1,6 +1,9 @@
 <template>
   <div v-bind="$attrs">
-  <q-select v-model="selectedValue" :use-chips="multiple" :label="displayName" label-color="primary" :options="options" stack-label
+  <q-select v-model="selectedValue" :use-chips="multiple" :label="displayName" label-color="primary"
+  :options="options"
+  stack-label
+  :rules="rulesExp"
   :multiple="multiple"/>
 </div>
 </template>
@@ -32,6 +35,19 @@ export default defineComponent({
       type: [Array,String],
       default: null,
     },
+    //例：[val=>!!val ||'入力してください']
+    rules: {
+      type: String,
+      default: undefined
+    },
+    required:{
+      type:Boolean,
+      default:false
+    },
+    requiredMessage: {
+      type: String,
+      default: ''
+    },
   },
   setup(props, { emit }) {
     const selectedValue = ref(props.modelValue);
@@ -41,10 +57,14 @@ export default defineComponent({
     watchEffect(() => {
       emit('update:modelValue', selectedValue.value);
     });
-
+    const customExp = props.rules === undefined ? [] : eval(props.rules);
+    const errmsg = props.requiredMessage?props.requiredMessage:`${props.displayName}を選択してください。`;
+    const requiredExp = props.required?[((val:any)=>!!val || errmsg )]:[];
+    const rulesExp=[...requiredExp,...customExp];
     return {
       selectedValue,
-      multiple
+      multiple,
+      rulesExp
     };
   },
 });
diff --git a/frontend/src/pages/FlowChart.vue b/frontend/src/pages/FlowChart.vue
index 7904a3a..37b5484 100644
--- a/frontend/src/pages/FlowChart.vue
+++ b/frontend/src/pages/FlowChart.vue
@@ -31,7 +31,7 @@
             @deleteNode="onDeleteNode" @deleteAllNextNodes="onDeleteAllNextNodes" @copyFlow="onCopyFlow"></node-item>
         </div>
       </div>
-      <PropertyPanel :actionNode="store.activeNode" v-model:drawerRight="drawerRight"></PropertyPanel>
+      <PropertyPanel :actionNode="store.activeNode" v-model:drawerRight="drawerRight" @save-action-props="onSaveActionProps"></PropertyPanel>
     </q-layout>
     <ShowDialog v-model:visible="showAddAction" name="アクション" @close="closeDg" min-width="500px" min-height="500px">
       <template v-slot:toolbar>
@@ -193,6 +193,12 @@ const onDeploy = async () => {
   return;
 }
 
+const onSaveActionProps=(props:IActionProperty[])=>{
+  if(store.activeNode){
+      store.activeNode.actionProps=props;
+  }
+};
+
 const onSaveFlow = async () => {
   const targetFlow = store.selectedFlow;
   if (targetFlow === undefined) {
diff --git a/frontend/src/stores/flowEditor.ts b/frontend/src/stores/flowEditor.ts
index abced04..3eb23f6 100644
--- a/frontend/src/stores/flowEditor.ts
+++ b/frontend/src/stores/flowEditor.ts
@@ -11,7 +11,7 @@ export interface FlowEditorState {
   activeNode: IActionNode | undefined;
   eventTree: KintoneEventManager;
   selectedEvent: IKintoneEvent | undefined;
-  expandedScreen: any[];
+  expandedScreen: string[];
 }
 const flowCtrl = new FlowCtrl();
 const eventTree = new KintoneEventManager();
@@ -62,6 +62,10 @@ export const useFlowEditorStore = defineStore('flowEditor', {
     },
     selectFlow(flow: IActionFlow | undefined) {
       this.selectedFlow = flow;
+      if(flow!==undefined){
+        const eventId = flow.getRoot()?.name;
+        this.selectedEvent=this.eventTree.findEventById(eventId) as IKintoneEvent;
+      }
     },
     setActiveNode(node: IActionNode) {
       this.activeNode = node;
@@ -84,15 +88,23 @@ export const useFlowEditorStore = defineStore('flowEditor', {
       if (actionFlows === undefined || actionFlows.length === 0) {
         this.flows = [];
         this.selectedFlow = undefined;
+        this.expandedScreen =[];
         return;
       }
       this.setFlows(actionFlows);
       if (actionFlows && actionFlows.length > 0) {
         this.selectFlow(actionFlows[0]);
       }
-      const expandNames = actionFlows.map((flow) => flow.getRoot()?.title);
+      const expandEventIds = actionFlows.map((flow) => flow.getRoot()?.name);
+      const expandScreens:string[]=[];
+      expandEventIds.forEach((eventid)=>{
+        const eventNode=this.eventTree.findEventById(eventid||'');
+        if(eventNode){
+          expandScreens.push(eventNode.parentId);
+        }
+      });
       // const expandName =actionFlows[0].getRoot()?.title;
-      this.expandedScreen = expandNames;
+      this.expandedScreen = expandScreens;
     },
     /**
      * フローをDBに保存及び更新する
diff --git a/frontend/src/types/Conditions.ts b/frontend/src/types/Conditions.ts
index 8ded786..c8b9a6d 100644
--- a/frontend/src/types/Conditions.ts
+++ b/frontend/src/types/Conditions.ts
@@ -200,12 +200,13 @@ export class ConditionTree {
       return conditionString;
     } else {
       const condNode=node as ConditionNode;
-      if (condNode.object && condNode.operator ) {
+      if (condNode.object && condNode.object.sharedText && condNode.operator ) {
         // 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}`;
+        const rightVal = condNode.value.sharedText || '""';
+        return `${condNode.object.sharedText} ${typeof condNode.operator === 'object' ? condNode.operator.label : condNode.operator} ${rightVal}`;
         // 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 '';
@@ -219,7 +220,7 @@ export class ConditionTree {
       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]);