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

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/ConditionEditor/ConditionObject.vue
+++ b/frontend/src/components/ConditionEditor/ConditionObject.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="q-pa-md">
+  <div class="q-pa-sm">
    <q-field labelColor="primary" class="condition-object" dense outlined :label="label" :disable="disabled"
      :clearable="isSelected">
      <template v-slot:control>
@@ -10,7 +10,6 @@
          {{ selectedObject.name.name }}
        </q-chip>
        <div v-if="isSelected && selectedObject.objectType==='text'">{{ selectedObject?.sharedText }}</div>
-
      </template>
      <template v-slot:append>
        <q-icon name="search" class="cursor-pointer" @click="showDg" />
@@ -81,7 +80,7 @@ export default defineComponent({
    const store = useFlowEditorStore();
    // const sharedText = ref(''); // 共享的文本状态
    const isSelected = computed(() => {
-      return selectedObject?.value?.sharedText !== '';
+      return selectedObject.value?.sharedText !== '';
    });
    // const isSelected = computed(()=>{
    //   return selectedObject.value!==null && typeof selectedObject.value === 'object' && ('name' in selectedObject.value)
--- a/frontend/src/components/ConditionEditor/NodeCondition.vue
+++ b/frontend/src/components/ConditionEditor/NodeCondition.vue
@@ -68,7 +68,7 @@
          <div @click.stop @keypress.stop v-else >
            <div class="row no-wrap items-center q-my-xs">
              <ConditionObject v-bind="prop.node" v-model="prop.node.object" :config="leftDynamicItemConfig" class="col-4"/>
-              <q-select v-model="prop.node.operator" :options="operators"  class="operator" :outlined="true" :dense="true"></q-select>
+              <q-select  v-model="prop.node.operator" :options="operators"  class="operator" :outlined="true" :dense="true"></q-select>
              <ConditionObject v-bind="prop.node" v-model="prop.node.value" :config="rightDynamicItemConfig" class="col-4"/>
              <!-- <ConditionObject v-bind="prop.node" v-model="prop.node.object" class="col-4"/> -->
              <!-- <q-input v-if="!prop.node.object || !('options' in prop.node.object)"
@@ -263,7 +263,8 @@ export default defineComponent( {
 .operator{
  min-width: 150px;
  max-height: 40px;
-  margin: 0 2px;
+  margin-left: 12px;
+
  text-align: center;
  font-size: 12pt;
 }
--- a/frontend/src/components/DynamicItemInput/DynamicItemInput.vue
+++ b/frontend/src/components/DynamicItemInput/DynamicItemInput.vue
@@ -3,7 +3,7 @@
        <!-- <q-card> -->
        <div class="q-mb-md">
            <q-input ref="inputRef" outlined dense debounce="200" @update:model-value="updateSharedText"
-                v-model="sharedText" :readonly="!canInput">
+                v-model="sharedText" :readonly="!canInput" autogrow>
                <template v-slot:append>
                    <q-btn flat round padding="none" icon="cancel" @click="clearSharedText" color="grey-6" />
                </template>
--- 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,