条件設定関連No511,512障害修正

frontend/src/components/DynamicItemInput/DynamicItemInput.vue

@@ -2,13 +2,30 @@
     <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" autogrow>
+            <q-input ref="inputRef" v-if="!optionsRef|| optionsRef.length===0"
+                outlined dense debounce="200" @update:model-value="updateSharedText"
+                v-model="sharedText" :readonly="!canInputFlag" autogrow>
                 <template v-slot:append>
                     <q-btn flat round padding="none" icon="cancel" @click="clearSharedText" color="grey-6" />
                 </template>
             </q-input>
-
+            <q-select v-if="optionsRef && optionsRef.length>0"
+                        :model-value="sharedText"
+                        :options="optionsRef"
+                        clearable
+                        value-key="index"
+                        outlined
+                        dense
+                        use-input
+                        hide-selected
+                        input-debounce="10"
+                        fill-input
+                        @input-value="setValue"
+                        @clear="sharedText=null"
+                        hide-dropdown-icon
+                        :readonly="!canInputFlag"
+                        >
+            </q-select>
         </div>
 
         <div class="row q-gutter-sm">
@@ -34,18 +51,12 @@
 </template>
 
 <script lang="ts">
-import { ref, inject, watchEffect, defineComponent } from 'vue';
+import { ref, inject, watchEffect, defineComponent,PropType } 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;
-};
+import { IButtonConfig } from 'src/types/ComponentTypes';
 
 export default defineComponent({
     name: 'DynamicItemInput',
@@ -56,18 +67,21 @@ export default defineComponent({
         ShowDialog
     },
     props: {
-        // canInput: {
-        //     type: Boolean,
-        //     default: false
-        // },
+        canInput: {
+            type: Boolean,
+            default: false
+        },
         appId: {
             type: String,
         },
         selectedObject: {
             default: {}
         },
+        options:{
+          type:Array as PropType< string[]>
+        },
         buttonsConfig: {
-            type: Array as () => ButtonConfig[],
+            type: Array as PropType<IButtonConfig[]>,
             default: () => [
                 { label: 'フィールド', color: 'primary', type: 'FieldAdd' }
             ]
@@ -77,17 +91,18 @@ export default defineComponent({
         const filter = ref('');
         const dialogVisible = ref(false);
         const currentDialogName = ref('');
+        const selectedObjectRef = ref(props.selectedObject);
         const currentComponent = ref('FieldAdd');
         const sharedText = ref(props.selectedObject?.sharedText ?? '');
         const inputRef = ref();
-        const canInput = ref(true);
+        const canInputFlag = ref(props.canInput);
         const editable = ref(false);
 
-        const openDialog = (button: ButtonConfig) => {
+        const openDialog = (button: IButtonConfig) => {
             currentDialogName.value = button.label;
             currentComponent.value = button.type;
             dialogVisible.value = true;
-            editable.value = button.editable ?? true;
+            editable.value = canInputFlag.value;
         };
 
         const closeDialog = () => {
@@ -95,46 +110,51 @@ export default defineComponent({
         };
 
         const handleSelect = (value:any) => {
-            // 获取当前光标位置
-            // 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;
+              canInputFlag.value = editable.value;
             }
-            emit('update:selectedObject', { sharedText: sharedText.value, ...value });
+            selectedObjectRef.value={ sharedText: value._t, ...value };
+            sharedText.value = `${value._t}`;
+           // emit('update:selectedObject', { sharedText: sharedText.value, ...value });
             dialogVisible.value = false;
         };
 
         const clearSharedText = () => {
             sharedText.value = '';
-            canInput.value = true;
-            emit('update:selectedObject', {});
+            selectedObjectRef.value={};
+            canInputFlag.value = true;
+            // emit('update:selectedObject', {});
         }
         const updateSharedText = (value:string) => {
             sharedText.value = value;
-            emit('update:selectedObject', { ...props.selectedObject, sharedText: value,objectType:'text' });
+            selectedObjectRef.value= { sharedText: value,objectType:'text' }
+            // emit('update:selectedObject', { ...props.selectedObject, sharedText: value,objectType:'text' });
         }
+        const setValue=(value:string)=>{
+          sharedText.value = value;
+          if(selectedObjectRef.value.sharedText!==value){
+            selectedObjectRef.value= { sharedText: value,objectType:'text' }
+          }
+        }
+        const optionsRef=ref(props.options);
 
         return {
             filter,
             dialogVisible,
             currentDialogName,
             currentComponent,
-            canInput,
+            canInputFlag,
             openDialog,
             closeDialog,
             handleSelect,
             clearSharedText,
             updateSharedText,
+            setValue,
             sharedText,
-            inputRef
+            inputRef,
+            optionsRef,
+            selectedObjectRef
         };
     }
 });