損傷した部品

frontend/src/components/right/DataMapping.vue

@@ -18,28 +18,29 @@
         </q-field>
         <show-dialog v-model:visible="dgIsShow" name="データマッピング" @close="closeDg" min-width="50vw" min-height="60vh">
 
-            <div class="q-mx-md">
+            <div class="q-mx-none">
                 <div class="row q-col-gutter-x-xs flex-center">
-                    <div class="col-6">
+                    <div class="col-5">
                         <div class="q-mx-xs">ソース</div>
                     </div>
                     <!-- <div class="col-1">
                     </div> -->
-                    <div class="col-6">
+                    <div class="col-5">
                         <div class="q-mx-xs">目標</div>
                     </div>
-                    <!-- <div class="col-1"><q-btn flat round dense icon="add" size="sm" @click="addMappingObject" /> -->
+                    <div class="col-1">
-                    <!-- </div> -->
+                        キー
+                    </div>
                 </div>
-                <q-virtual-scroll style="max-height: 75vh;" :items="mappingProps" separator v-slot="{ item, index }">
+                <q-virtual-scroll style="max-height: 65vh;" :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">
+                        <div class="col-5">
                             <ConditionObject :config="config" v-model="item.from" />
                         </div>
                         <!-- <div class="col-1">
                         </div> -->
-                        <div class="col-6">
+                        <div class="col-5">
                             <q-field v-model="item.vName" type="text" outlined dense>
                                 <!-- <template v-slot:append>
                                     <q-icon name="search" class="cursor-pointer"
@@ -54,14 +55,16 @@
                                             <div>フィールドのコード : {{ item.to.fields[0].code }}</div>
                                             <div>フィールドのタイプ : {{ item.to.fields[0].type }}</div>
                                             <div>フィールド : {{ item.to.fields[0] }}</div>
+                                            <div>フィールド : {{ item.isKey }}</div>
                                         </q-tooltip>
                                     </div>
                                 </template>
                             </q-field>
                         </div>
-                        <!-- <div class="col-1">
+                        <div class="col-1">
-                            <q-btn flat round dense icon="delete" size="sm" @click="() => deleteMappingObject(index)" />
+                            <q-checkbox size="sm" v-model="item.isKey" />
-                        </div> -->
+                            <!-- <q-btn flat round dense icon="delete" size="sm" @click="() => deleteMappingObject(index)" /> -->
+                        </div>
                     </div>
 
                     <show-dialog v-model:visible="mappingProps[index].to.isDialogVisible" name="フィールド一覧"
@@ -74,6 +77,10 @@
                     </show-dialog>
                     <!-- </div> -->
                 </q-virtual-scroll>
+
+                <div class="q-mt-lg q-ml-md row ">
+                    <q-checkbox size="sm" v-model="createWithNull" label="目标が存在しない場合は新規作成し、存在する場合は更新する。" />
+                </div>
             </div>
         </show-dialog>
     </div>
@@ -100,12 +107,19 @@ type Props = {
         }
     }
 };
+
+type Value = {
+    data: ValueType[];
+    createWithNull: boolean;
+}
+
 type ValueType = {
     id: string;
     from: object;
     to: typeof IAppFields & {
         isDialogVisible: boolean;
     };
+    isKey: boolean;
 }
 
 
@@ -132,7 +146,7 @@ export default defineComponent({
             default: '',
         },
         modelValue: {
-            type: Object as () => ValueType[],
+            type: Object as () => Value,
         },
         placeholder: {
             type: String,
@@ -161,7 +175,9 @@ export default defineComponent({
             );
         }
 
-        const mappingProps = computed(() => props.modelValue ?? []);
+        const mappingProps = computed(() => props.modelValue?.data ?? []);
+
+        const createWithNull = computed(() => props.modelValue?.createWithNull)
 
         watch(() => sourceAppId.value, async (newId, oldId) => {
             if (!newId) return;
@@ -180,23 +196,28 @@ export default defineComponent({
                                 app: sourceApp.value,
                                 fields: [f],
                                 isDialogVisible: false
-                            }
+                            },
+                            isKey: true
                         }
                     })
             })
-            const modelValue = props.modelValue ?? [];
+            const modelValueData = props.modelValue?.data ?? [];
 
-            if (modelValue.length === 0 || newId !== oldId) {
+            const createWithNull = props.modelValue?.createWithNull ?? false
-                emit('update:modelValue', a);
+
+            if (modelValueData.length === 0 || newId !== oldId) {
+                // emit('update:modelValue', a);
+                emit('update:modelValue', { data: a, createWithNull: createWithNull });
                 return;
             }
-            const modelValueFieldNames = modelValue.map(item => item.to.fields[0].name);
+            const modelValueFieldNames = modelValueData.map(item => item.to.fields[0].name);
 
             const newFields = a.filter(field => !modelValueFieldNames.includes(field.to.fields[0].name));
 
-            const updatedModelValue = [...modelValue, ...newFields];
+            const updatedModelValue = [...modelValueData, ...newFields];
 
-            emit('update:modelValue', updatedModelValue);
+            emit('update:modelValue', { data: updatedModelValue, createWithNull: createWithNull });
+            // emit('update:modelValue', updatedModelValue);
         })
 
         console.log(mappingProps.value);
@@ -231,6 +252,7 @@ export default defineComponent({
             toDgIsShow: ref(false),
             closeToDg,
             mappingProps,
+            createWithNull,
             // addMappingObject: () => mappingProps.push(defaultMappingProp()),
             // deleteMappingObject,
             mappingObjectsInputDisplay,
@@ -240,7 +262,7 @@ export default defineComponent({
             config: {
                 canInput: false,
                 buttonsConfig: [
-                    { label: '変数', color: 'green', type: 'VariableAdd',editable:false },
+                    { label: '変数', color: 'green', type: 'VariableAdd', editable: false },
                 ]
             }
         };