自動採番アクション追加・ドメイン追加

frontend/src/components/right/FieldInput.vue

@@ -1,16 +1,29 @@
 <template>
-<q-input v-model="selectedField" :label="displayName" labelColor="" :placeholder="placeholder" clearable >
-<template v-slot:append>
+<q-field v-model="selectedField" :label="displayName" labelColor="primary"
+        :clearable="isSelected" stack-label :bottom-slots="!isSelected" >
+  <template v-slot:control >
+    <q-chip  color="primary" text-color="white"  v-if="isSelected">
+      {{ selectedField.name }}
+    </q-chip>
+  </template>
+  <!-- <template v-slot:hint v-if="isSelected">
+    <div> 項目コード：<q-chip  size="sm" outline color="secondary" text-color="white">{{selectedField.code}}</q-chip></div>
+  </template> -->
+  <template v-slot:hint v-if="!isSelected">
+    {{ placeholder }}
+  </template>
+
+  <template v-slot:append>
   <q-icon name="search" class="cursor-pointer"  @click="showDg"/>
-</template>
-</q-input>
+  </template>
+</q-field>
 <show-dialog v-model:visible="show" name="フィールド一覧" @close="closeDg">
   <field-select ref="appDg" name="フィールド" type="single" :appId="store.appInfo?.appId"></field-select>
 </show-dialog>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref ,watchEffect} from 'vue';
+import { defineComponent, ref ,watchEffect,computed} from 'vue';
 import ShowDialog from '../ShowDialog.vue';
 import FieldSelect from '../FieldSelect.vue';
 import { useFlowEditorStore } from 'stores/flowEditor';
@@ -29,10 +42,14 @@ export default defineComponent({
       type: String,
       default: '',
     },
-    modelValue: {
+    hint:{
       type: String,
       default: '',
     },
+    modelValue: {
+      type: Object,
+      default: null
+    },
   },
 
   setup(props, { emit }) {
@@ -40,6 +57,9 @@ export default defineComponent({
     const show = ref(false);
     const selectedField = ref(props.modelValue);
     const store = useFlowEditorStore();
+    const isSelected = computed(()=>{
+      return selectedField.value!==null && typeof selectedField.value === 'object' && ('name' in selectedField.value)
+    });
 
     const showDg = () => {
       show.value = true;
@@ -47,7 +67,7 @@ export default defineComponent({
 
     const closeDg = (val:string) => {
       if (val == 'OK') {
-        selectedField.value = appDg.value.selected[0].code;
+        selectedField.value = appDg.value.selected[0];
       }
     };
 
@@ -62,6 +82,7 @@ export default defineComponent({
       showDg,
       closeDg,
       selectedField,
+      isSelected
     };
   }
 });