fix bug for +/-

vue-project/my-kintone-plugin/src/components/basic/PluginTableConditionRow.vue

@@ -4,12 +4,13 @@
 
 <script setup lang="ts">
 import type { CachedData, CachedSelectedAppData, SavedData, WhereCondition } from '@/types/model';
-import { defineProps, inject, computed, render, h } from 'vue';
+import { defineProps, inject, computed, render, h, reactive } from 'vue';
 import TableCombobox from './TableCombobox.vue';
-import { getFieldsDropdownItems } from '@/js/helper';
+import { generateId, getFieldsDropdownItems, search } from '@/js/helper';
 import type { ConditionValue } from '@/js/conditions';
 import TableCondition from './conditions/TableCondition.vue';
 import TableConditionValue from './conditions/TableConditionValue.vue';
+import type { KucTableEvent } from '@/types/my-kintone';
 
 const props = defineProps<{
   modelValue: WhereCondition[];
@@ -20,23 +21,33 @@ const cachedData = inject<CachedData>('cachedData') as CachedData;
 const selectedAppData = inject<CachedSelectedAppData>('selectedAppData') as CachedSelectedAppData;
 const table = computed(() => selectedAppData.table.table);
 
-const columns = [
+const columns = reactive([
   {
     title: '取得元アプリのフィールド',
     field: 'field',
-    render: (cellData: string, rowData: any, rowIndex: number) => {
+    render: (cellData: string, rowData: WhereCondition) => {
+      if (!rowData.id) {
+        rowData.id = generateId();
+      }
       const container = document.createElement('div');
       const vnode = h(TableCombobox, {
-        items: computed(() => getFieldsDropdownItems(selectedAppData.appFields, {
-          subTableCode: table.value,
-          defaultLabel: 'すべてのレコード',
-        })),
-        modelValue: props.modelValue[rowIndex].field,
+        items: computed(() =>
+          getFieldsDropdownItems(selectedAppData.appFields, {
+            subTableCode: table.value,
+            defaultLabel: 'すべてのレコード',
+          }),
+        ),
+        modelValue: (search(props.modelValue, rowData.id) as WhereCondition)?.field || '',
         selectedAppData,
-        'onUpdate:modelValue': (newValue: string) => {
-          props.modelValue[rowIndex].field = newValue;
-          props.modelValue[rowIndex].condition = '';
-          props.modelValue[rowIndex].data = '';
+        dataList: props.modelValue,
+        id: rowData.id,
+        'onUpdate:modelValue': (data) => {
+          const obj = (data.obj as WhereCondition);
+          if (obj) {
+            obj.field = data.value;
+            obj.condition = '',
+            obj.data = '';
+          }
         },
       });
       render(vnode, container);
@@ -46,16 +57,18 @@ const columns = [
   {
     title: '',
     field: 'condition',
-    render: (cellData: string, rowData: any, rowIndex: number) => {
+    render: (cellData: string, rowData: WhereCondition) => {
       const container = document.createElement('div');
       const vnode = h(TableCondition, {
-        modelValue: props.modelValue[rowIndex].condition,
-        index: rowIndex,
+        modelValue: (search(props.modelValue, rowData.id) as WhereCondition)?.condition || '',
         selectedAppData,
+        id: rowData.id,
         whereConditions: props.modelValue,
-        'onUpdate:modelValue': (newValue: string) => {
-          props.modelValue[rowIndex].condition = newValue as ConditionValue;
-          props.modelValue[rowIndex].data = '';
+        'onUpdate:modelValue': ({obj, value}) => {
+          if (obj) {
+            obj.condition = value;
+            obj.data = '';
+          }
         },
       });
       render(vnode, container);
@@ -65,20 +78,21 @@ const columns = [
   {
     title: '',
     field: 'data',
-    render: (cellData: string, rowData: any, rowIndex: number) => {
+    render: (cellData: string, rowData: WhereCondition) => {
       const container = document.createElement('div');
       const vnode = h(TableConditionValue, {
-        modelValue: props.modelValue[rowIndex].data,
-        index: rowIndex,
+        modelValue: (search(props.modelValue, rowData.id) as WhereCondition)?.data || '',
         selectedAppData,
+        id: rowData.id,
         whereConditions: props.modelValue,
-        'onUpdate:modelValue': (newValue: string) => {
-          props.modelValue[rowIndex].data = newValue;
+        'onUpdate:modelValue': ({obj, value}) => {
+            obj && (obj.data = value);
         },
       });
       render(vnode, container);
       return container;
     },
   },
-];
+]);
+
 </script>