データ追加&更新処理アクション修正完了

2024-07-12 19:05:15 +09:00
parent 0fda3d143c
commit e726843189
8 changed files with 169 additions and 106 deletions
--- a/frontend/src/components/right/AppFieldSelect.vue
+++ b/frontend/src/components/right/AppFieldSelect.vue
@@ -66,7 +66,8 @@ export interface IApp {
 export interface IField {
    name: string,
    code: string,
-    type: string
+    type: string,
+    label?:string
 }

 export interface IAppFields {
--- a/frontend/src/components/right/DataMapping.vue
+++ b/frontend/src/components/right/DataMapping.vue
@@ -18,7 +18,7 @@
        </q-field>
        <show-dialog v-model:visible="dgIsShow" name="データマッピング" @close="closeDg" min-width="55vw" min-height="60vh">

-            <div class="q-mx-none">
+            <div class="">
                <div class="row q-col-gutter-x-xs flex-center">
                    <div class="col-5">
                        <div class="q-mx-xs">ソース</div>
@@ -27,7 +27,7 @@
                    </div> -->
                    <div class="col-5">
                        <div class="row justify-between q-mr-md">
-                            <div class="">目標</div>
+                            <div class="">{{ sourceApp?.name }}</div>
                            <q-btn outline color="primary" size="xs" label="最新のフィールドを取得する"
                                @click="() => updateFields(sourceAppId!)" />
                        </div>
@@ -36,9 +36,9 @@
                        キー
                    </div>
                </div>
-                <q-virtual-scroll style="max-height: 65vh;" :items="mappingProps" separator v-slot="{ item, index }">
+                <q-virtual-scroll style="max-height: 60vh;" :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="row q-pa-sm q-col-gutter-x-md flex-center">
                        <div class="col-5">
                            <ConditionObject :config="config" v-model="item.from" :disabled="item.disabled"
                                :label="item.disabled ? '「Lookup」によってロックされる' : undefined" />
@@ -46,21 +46,23 @@
                        <!-- <div class="col-1">
                        </div> -->
                        <div class="col-5">
-                            <q-field v-model="item.vName" type="text" outlined dense :disable="item.disabled">
+                            <q-field v-model="item.vName" type="text" outlined dense :disable="item.disabled" >
                                <!-- <template v-slot:append>
                                    <q-icon name="search" class="cursor-pointer"
                                        @click="() => { mappingProps[index].to.isDialogVisible = true }" />
                                </template> -->
                                <template v-slot:control>
-                                    <div class="self-center full-width no-outline" tabindex="0"
+                                     <div class="self-center full-width no-outline" tabindex="0"
                                        v-if="item.to.app?.name && item.to.fields?.length > 0 && item.to.fields[0].label">
                                        {{ `${item.to.fields[0].label}` }}
-                                        <q-tooltip>
+                                        <span class="text-red" v-if="item.to.fields[0].required">*</span>
+                                        <q-tooltip class="bg-yellow-2 text-black shadow-4" >
                                            <div>アプリ : {{ item.to.app.name }}</div>
                                            <div>フィールドのコード : {{ item.to.fields[0].code }}</div>
                                            <div>フィールドのタイプ : {{ item.to.fields[0].type }}</div>
-                                            <div>フィールド : {{ item.to.fields[0] }}</div>
-                                            <div>フィールド : {{ item.isKey }}</div>
+                                            <div v-if="item.to.fields[0].required">必須項目</div>
+                                            <!-- <div>フィールド : {{ item.to.fields[0] }}</div>
+                                            <div>フィールド : {{ item.isKey }}</div> -->
                                        </q-tooltip>
                                    </div>
                                </template>
@@ -84,7 +86,7 @@
                </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="createWithNull" label="キーが存在しない場合は新規に作成され、存在する場合はデータが更新されます。" />
                </div>
            </div>
        </show-dialog>
@@ -123,7 +125,7 @@ type MappingValueType = {
    from: { sharedText?: string };
    to: {
        app?: IApp,
-        fields: (IField & { label?: string })[]
+        fields: IField[],
        isDialogVisible: boolean;
    };
    isKey: boolean;
@@ -164,7 +166,11 @@ export default defineComponent({
        onlySourceSelect: {
            type: Boolean,
            default: false
-        }
+        },
+        fieldTypes:{
+          type:Array,
+          default:()=>[]
+        },
    },

    setup(props, { emit }) {
@@ -266,6 +272,7 @@ export default defineComponent({
            config: {
                canInput: false,
                buttonsConfig: [
+                    { label: 'フィールド', color: 'primary', type: 'FieldAdd' },
                    { label: '変数', color: 'green', type: 'VariableAdd', editable: false },
                ]
            }
--- a/frontend/src/components/right/DataProcessing.vue
+++ b/frontend/src/components/right/DataProcessing.vue
@@ -40,7 +40,7 @@
            <div class="col-5">
              <ConditionObject v-model="item.field" />
            </div>
-            <div class="col-2">
+            <div class="col-2 q-pa-sm">
              <q-select v-model="item.logicalOperator" :options="logicalOperators"  outlined dense></q-select>
            </div>
            <div class="col-4">
@@ -78,14 +78,8 @@ type Props = {

 type ProcessingObjectType = {
  field?: {
-    name: string | {
-      name: string;
-    };
-    objectType: string;
-    type: string;
-    code: string;
-    label: string;
-    noLabel: boolean;
+    sharedText: string;
+    objectType: 'field';
  };
  logicalOperator?: string;
  vName?: string;
@@ -145,34 +139,54 @@ export default defineComponent({
    const actionName = props.context.find(element => element?.props?.name === 'displayName')

    const processingProps: ValueType = props.modelValue && props.modelValue.vars
-      ? props.modelValue
+      ? reactive(props.modelValue)
      : reactive({
        name: '',
        actionName: actionName?.props?.modelValue as string,
        displayName: '結果（戻り値）',
-        vars: [{ id: uuidv4() }]
+        vars: [
+        {
+          id: uuidv4(),
+          field:{
+            objectType:'field',
+            sharedText:''
+          }
+        }]
      });

    const closeDg = () => {
-      emit('update:modelValue', processingProps
-      );
+      emit('update:modelValue', processingProps);
    }

    const processingObjects = processingProps.vars;

-    const deleteProcessingObject = (index: number) => processingObjects.length === 1
-      ? processingObjects.splice(0, processingObjects.length, { id: uuidv4() })
-      : processingObjects.splice(index, 1);
-
+    const deleteProcessingObject = (index: number) => {
+      if(processingObjects.length >0){
+        processingObjects.splice(index, 1);
+      }
+      if(processingObjects.length===0){
+        addProcessingObject();
+      }
+    }
    const processingObjectsInputDisplay = computed(() =>
      processingObjects ?
        processingObjects
          .filter(item => item.field && item.logicalOperator && item.vName)
          .map(item => {
-            return`var(${processingProps.name}.${item.vName}) = ${item.field.sharedText}`
+            return`var(${processingProps.name}.${item.vName}) = ${item.field?.sharedText}`
          })
        : []
    );
+
+    const addProcessingObject=()=>{
+      processingObjects.push({
+        id: uuidv4(),
+        field:{
+          objectType:'field',
+          sharedText:''
+        }
+      });
+    }
    //集計処理方法
    const logicalOperators = ref([
      {
@@ -214,7 +228,7 @@ export default defineComponent({
      closeDg,
      processingObjects,
      processingProps,
-      addProcessingObject: () => processingObjects.push({ id: uuidv4() }),
+      addProcessingObject,
      deleteProcessingObject,
      logicalOperators,
      processingObjectsInputDisplay,