add field types

vue-project/my-kintone-plugin/src/components/Config.vue

@@ -19,7 +19,8 @@
 </template>
 <script setup lang="ts">
 import { createEmptyJoinTable, loadApps, loadAppFieldsAndLayout, EMPTY_OPTION, getEmptyOnCondition } from '@/js/helper';
-import type { CachedData, FieldsInfo, SavedData } from '@/types/model';
+import { isType, type OneOf } from '@/js/kintone-rest-api-client';
+import type { CachedData, FieldsInfo, JoinTable, SavedData } from '@/types/model';
 import type { Spinner } from 'kintone-ui-component';
 
 import { onMounted, watch, provide, reactive, ref, shallowRef, nextTick } from 'vue';
@@ -49,8 +50,8 @@ onMounted(async () => {
     loading.value = true;
     cachedData.apps = await loadApps();
     cachedData.currentAppFields = await loadAppFieldsAndLayout();
-    if (savedData?.joinTables) {
-      data.joinTables = JSON.parse(savedData.joinTables); //TODO JSON;
+    if (savedData?.joinTablesForConfig) {
+      data.joinTables = JSON.parse(savedData.joinTablesForConfig);
     }
     data.buttonName = savedData?.buttonName || '集約';
     loading.value = false;
@@ -71,9 +72,47 @@ watch(
 );
 
 function save() {
+  const currentAppMeta = cachedData.currentAppFields.fields;
+  const convertJoinTables = JSON.parse(JSON.stringify(data.joinTables)) as JoinTable<OneOf | string>[];
+  convertJoinTables.forEach((item) => {
+    let meta = item.meta;
+    if (!meta) {
+      return;
+    }
+    if (item.table) {
+      const table = meta[item.table];
+      if (isType.SUBTABLE(table)) {
+        meta = table.fields;
+      }
+    }
+
+    // Process onConditions
+    item.onConditions.forEach((condition) => {
+      condition.leftField = meta[condition.leftField as string] || condition.leftField;
+      condition.rightField = currentAppMeta[condition.rightField as string] || condition.rightField;
+    });
+
+    // Process fieldsMapping
+    item.fieldsMapping.forEach((mapping) => {
+      mapping.leftField = meta[mapping.leftField as string] || mapping.leftField;
+      mapping.rightField = currentAppMeta[mapping.rightField as string] || mapping.rightField;
+    });
+
+    // Process whereConditions
+    item.whereConditions.forEach((condition) => {
+      condition.field = meta[condition.field as string] || condition.field;
+    });
+    delete item.meta;
+  });
+
+  data.joinTables.forEach((item) => {
+    delete item.meta;
+  });
+
   kintone.plugin.app.setConfig({
     buttonName: data.buttonName,
-    joinTables: JSON.stringify(data.joinTables || []),
+    joinTables: JSON.stringify(convertJoinTables),
+    joinTablesForConfig: JSON.stringify(data.joinTables || []),
   });
 }
 

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

@@ -85,6 +85,7 @@ watch(
     const fields = await loadAppFieldsAndLayout(newVal);
     tableOptions.value = getTableFieldsDropdownItems(fields, types.SUBTABLE);
     selectedAppData.appFields = fields;
+    props.table.meta = fields.fields;
     !!oldVal && resetTable(props.table);
     loading.value = false;
   },

vue-project/my-kintone-plugin/src/types/model.d.ts

@@ -2,26 +2,27 @@ import type { ConditionValue } from '@/js/conditions';
 import type { Layout, Properties } from '@/js/kintone-rest-api-client';
 import type { DropdownItem } from 'kintone-ui-component';
 
-export interface FieldsJoinMapping {
+export interface FieldsJoinMapping<FieldType = string> {
   id: string;
-  leftField: string;
-  rightField: string;
+  leftField: FieldType;
+  rightField: FieldType;
 }
 
-export interface WhereCondition {
+export interface WhereCondition<FieldType = string> {
   id: string;
-  field: string;
+  field: FieldType;
   condition: ConditionValue;
   data: string;
 }
 
-export interface JoinTable {
+export interface JoinTable<FieldType = string> {
   id: string;
   app: string;   // 取得元アプリ
   table: string; // テーブル
-  onConditions: FieldsJoinMapping[];  // 連結条件
-  fieldsMapping: FieldsJoinMapping[]; // 取得フィールド
-  whereConditions: WhereCondition[];  // 絞込条件
+  onConditions: FieldsJoinMapping<FieldType>[];  // 連結条件
+  fieldsMapping: FieldsJoinMapping<FieldType>[]; // 取得フィールド
+  whereConditions: WhereCondition<FieldType>[];  // 絞込条件
+  meta?: Properties;
 }
 
 // 存储的数据格式