From 843db5f10c7eea759bf7ef2aea3e3e80d30fd6e4 Mon Sep 17 00:00:00 2001
From: Mouriya <mouriya@bu.edu>
Date: Thu, 19 Sep 2024 22:12:30 +0900
Subject: [PATCH] =?UTF-8?q?=E3=83=AC=E3=82=A4=E3=82=A2=E3=82=A6=E3=83=88?=
 =?UTF-8?q?=E3=82=92=E6=94=B9=E5=96=84=E3=81=97=E3=80=81=E3=83=89=E3=83=AD?=
 =?UTF-8?q?=E3=83=83=E3=83=97=E3=83=80=E3=82=A6=E3=83=B3=E3=81=AE=E5=AF=BE?=
 =?UTF-8?q?=E8=B1=A1=E3=82=92=E3=82=AF=E3=83=AA=E3=82=A2=E3=81=99=E3=82=8B?=
 =?UTF-8?q?=E3=83=9C=E3=82=BF=E3=83=B3=E3=82=92=E8=BF=BD=E5=8A=A0=E3=81=99?=
 =?UTF-8?q?=E3=82=8B=E3=80=81=E5=90=8C=E3=81=98=E5=80=A4=E3=81=AE=E3=83=A9?=
 =?UTF-8?q?=E3=83=99=E3=83=AB=E3=82=92=E6=8C=81=E3=81=A4=E5=AF=BE=E8=B1=A1?=
 =?UTF-8?q?=E8=A6=81=E7=B4=A0=E3=81=AE=E9=81=B8=E6=8A=9E=E3=82=92=E8=A8=B1?=
 =?UTF-8?q?=E5=8F=AF=E3=81=97=E3=81=AA=E3=81=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/CascadingDropDownBox.vue   | 36 ++++++++++++-------
 1 file changed, 23 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/CascadingDropDownBox.vue b/frontend/src/components/CascadingDropDownBox.vue
index 75346df..5e508a1 100644
--- a/frontend/src/components/CascadingDropDownBox.vue
+++ b/frontend/src/components/CascadingDropDownBox.vue
@@ -23,8 +23,7 @@
           <q-separator class="q-mt-md" />
           <div class="q-my-md row justify-between items-center">
             データソースにフィールドを設定する :
-            <q-btn icon="add" size="sm" padding="xs" outline color="primary"
-              @click="addRow" />
+            <q-btn icon="add" size="sm" padding="xs" outline color="primary" @click="addRow" />
           </div>
           <q-virtual-scroll style="max-height: 13.5rem;" :items="data.fieldList" separator v-slot="{ item, index }">
             <div class="row justify-between items-center q-my-md">
@@ -55,18 +54,29 @@
 
       <q-step :name="2" title="ドロップダウンコンポーネントの設定" icon="multiple_stop" active-icon="multiple_stop"
         done-icon="multiple_stop" :done="step > 2">
-        <div class="row q-pa-sm q-col-gutter-x-md flex-center">
-          <div class="col-5">データソース</div>
-          <div class="col-5">ドロップダウン選択</div>
-          <div class="col-2"></div>
+        <div class="row q-pa-sm q-col-gutter-x-sm flex-center">
+          <div class="col-grow row q-col-gutter-x-sm">
+            <div class="col-6">データソース</div>
+            <div class="col-6">ドロップダウン選択</div>
+          </div>
+          <div class="col-auto">
+            <div style="width: 88px; height: 1px;"></div>
+          </div>
         </div>
-        <div v-for="(item) in data.fieldList" :key="item.id" class="row q-pa-sm q-col-gutter-x-md flex-center">
-          <div class="col-5">{{ item.source.name }}</div>
-          <div class="col-5">{{ item.dropDown?.name }}</div>
-          <div class="col-2">
+        <div v-for="(item) in data.fieldList" :key="item.id" class="row q-pa-sm q-col-gutter-x-sm flex-center">
+          <div class="col-grow row q-col-gutter-x-sm">
+
+            <div class="col-6">{{ item.source.name }}</div>
+            <div class="col-6">{{ item.dropDown?.name }}</div>
+          </div>
+          <div class="col-auto">
             <div class="row justify-end">
-              <q-btn outline dense label="変更" padding="xs sm" color="primary"
-                @click="() => showFieldDialog(item, 'dropDown')" />
+              <q-btn-group outline>
+                <q-btn outline dense label="変更" padding="xs sm" color="primary"
+                  @click="() => showFieldDialog(item, 'dropDown')" />
+                <q-btn outline dense label="消去" padding="xs sm" color="primary"
+                  @click="() => item.dropDown = undefined" />
+              </q-btn-group>
             </div>
           </div>
         </div>
@@ -193,7 +203,7 @@ export default defineComponent({
     const updateSelectField = (f: any, item: any, index: number, keyName: 'source' | 'dropDown') => {
       const [selected] = f.value;
       const isDuplicate = data.fieldList.some((field, idx) =>
-        idx !== index && field[keyName]?.code === selected.code
+        idx !== index && (field[keyName]?.code === selected.code || field[keyName]?.label === selected.label)
       );
 
       if (isDuplicate) {