From 6aba3fc0653c37826af3d697fb74153407c7f61a Mon Sep 17 00:00:00 2001
From: xue jiahao <xuejiahao@alicorns.co.jp>
Date: Wed, 22 Jan 2025 13:57:33 +0800
Subject: [PATCH 1/2] Fix load apps

---
 vue-project/my-kintone-plugin/components.d.ts |  1 +
 .../src/components/Config.vue                 | 20 +++--
 .../src/components/basic/PluginTableArea.vue  | 50 ++++++-----
 .../basic/PluginTableConditionRow.vue         | 17 ++--
 .../basic/PluginTableConnectRow.vue           | 70 +++++++++------
 .../src/components/basic/TableCombobox.vue    | 24 ++++++
 .../my-kintone-plugin/src/js/helper.ts        | 85 +++++++++++++------
 .../src/js/kintone-rest-api-client.ts         |  1 +
 .../my-kintone-plugin/src/types/model.d.ts    | 21 ++++-
 vue-project/my-kintone-plugin/vite.config.ts  |  1 +
 10 files changed, 205 insertions(+), 85 deletions(-)
 create mode 100644 vue-project/my-kintone-plugin/src/components/basic/TableCombobox.vue

diff --git a/vue-project/my-kintone-plugin/components.d.ts b/vue-project/my-kintone-plugin/components.d.ts
index fb726aa..19c9f84 100644
--- a/vue-project/my-kintone-plugin/components.d.ts
+++ b/vue-project/my-kintone-plugin/components.d.ts
@@ -17,5 +17,6 @@ declare module 'vue' {
     PluginTableArea: typeof import('./src/components/basic/PluginTableArea.vue')['default']
     PluginTableConditionRow: typeof import('./src/components/basic/PluginTableConditionRow.vue')['default']
     PluginTableConnectRow: typeof import('./src/components/basic/PluginTableConnectRow.vue')['default']
+    TableCombobox: typeof import('./src/components/basic/TableCombobox.vue')['default']
   }
 }
diff --git a/vue-project/my-kintone-plugin/src/components/Config.vue b/vue-project/my-kintone-plugin/src/components/Config.vue
index 154ca55..3a5c1cb 100644
--- a/vue-project/my-kintone-plugin/src/components/Config.vue
+++ b/vue-project/my-kintone-plugin/src/components/Config.vue
@@ -18,9 +18,9 @@
   <kuc-spinner :container="mainArea" ref="spinner"></kuc-spinner>
 </template>
 <script setup lang="ts">
-import { createEmptyJoinTable, fetchApps } from '@/js/helper';
-import type { JoinTable, SavedData } from '@/types/model';
-import type { KucSpinnerEl } from '@/types/my-kintone';
+import { createEmptyJoinTable, loadApps, loadAppFieldsAndLayout, EMPTY_OPTION } from '@/js/helper';
+import type { CachedData, FieldsInfo, JoinTable, SavedData } from '@/types/model';
+import type { KucDropdownItem, KucSpinnerEl } from '@/types/my-kintone';
 
 import { onMounted, watch, provide, reactive, ref, shallowRef, nextTick } from 'vue';
 
@@ -31,19 +31,26 @@ const data: SavedData = reactive({
   joinTables: [] as JoinTable[],
 });
 
+const cachedData: CachedData = reactive({
+  apps: [EMPTY_OPTION],
+  currentAppFields: { fields: [], layout: [] } as FieldsInfo,
+});
+
 provide('savedData', data);
+provide('cachedData', cachedData);
 
 const mainArea = shallowRef<HTMLElement | null>(null);
 const spinner = shallowRef<KucSpinnerEl | null>(null);
 
 onMounted(async () => {
+  spinner.value?.close(); // 修复不自动挂载到节点的 bug
   const savedData = kintone.plugin.app.getConfig(props.pluginId);
   data.buttonName = savedData?.buttonName || '集約';
   data.joinTables = savedData?.joinTables ? JSON.parse(savedData.joinTables) : [createEmptyJoinTable()];
   nextTick(async () => {
-    spinner.value?.close(); // 修复不自动挂载到节点的 bug
     loading.value = true;
-    await fetchApps();
+    cachedData.apps = await loadApps();
+    cachedData.currentAppFields = await loadAppFieldsAndLayout();
     loading.value = false;
   });
 });
@@ -55,8 +62,9 @@ watch(loading, (load) => {
 watch(
   () => data.joinTables.length,
   (newLength) => {
+    console.log(data.joinTables);
     if (newLength === 1) {
-      data.joinTables[0].onConditions = [];
+      data.joinTables[0].onConditions = [{ leftField: '', rightField: '' }];
     }
   },
 );
diff --git a/vue-project/my-kintone-plugin/src/components/basic/PluginTableArea.vue b/vue-project/my-kintone-plugin/src/components/basic/PluginTableArea.vue
index 947f222..1d6691a 100644
--- a/vue-project/my-kintone-plugin/src/components/basic/PluginTableArea.vue
+++ b/vue-project/my-kintone-plugin/src/components/basic/PluginTableArea.vue
@@ -1,23 +1,23 @@
 <template>
   <plugin-row class="table-area flex-row border">
-    <div class="table-main-area ">
+    <div class="table-main-area">
       <plugin-row>
-        <plugin-dropdown :disabled="false" label="取得元アプリ" :items="apps" v-model="table.app" @change="selectApp"/>
+        <plugin-dropdown :disabled="false" label="取得元アプリ" :items="apps" v-model="table.app" @change="selectApp" />
       </plugin-row>
       <plugin-row>
-        <plugin-dropdown :disabled="!table.app" label="テーブル" :items="tables" v-model="table.table"  @change="select"/>
+        <plugin-dropdown :disabled="selectedAppData.loading" label="テーブル" :items="tableOptions" v-model="table.table" />
       </plugin-row>
       <plugin-row class="flex-row" v-if="isJoinConditionShown(table)">
         <plugin-label label="連結条件" />
-        <plugin-table-connect-row connector="=" :disabled="!table.app" v-model="table.onConditions" />
+        <plugin-table-connect-row connector="=" v-model="table.onConditions" />
       </plugin-row>
       <plugin-row class="flex-row">
         <plugin-label label="取得フィールド" />
-        <plugin-table-connect-row connector="→" :disabled="!table.app" v-model="table.fieldsMapping" />
+        <plugin-table-connect-row connector="→" v-model="table.fieldsMapping" />
       </plugin-row>
       <plugin-row class="flex-row">
         <plugin-label label="絞込条件" />
-        <plugin-table-condition-row :disabled="!table.app" v-model="table.whereConditions" />
+        <plugin-table-condition-row v-model="table.whereConditions" />
       </plugin-row>
     </div>
     <div class="table-action-area">
@@ -27,30 +27,42 @@
 </template>
 
 <script setup lang="ts">
-import { fetchApps, fetchFields, getField, resetTable } from '@/js/helper';
-import { types } from '@/js/kintone-rest-api-client';
-import type { JoinTable, SavedData } from '@/types/model';
+import { EMPTY_OPTION, getFieldsDropdownItems, getTableFieldsDropdownItems, loadAppFieldsAndLayout, resetTable } from '@/js/helper';
+import { types, type Layout, type Properties } from '@/js/kintone-rest-api-client';
+import type { CachedData, CachedSelectedAppData, FieldsInfo, JoinTable, SavedData } from '@/types/model';
 import type { KucDropdownItem, KucEvent } from '@/types/my-kintone';
-import { inject, onMounted, ref } from 'vue';
+import { computed, inject, onMounted, provide, reactive, ref, watch } from 'vue';
 
 const savedData = inject<SavedData>('savedData') as SavedData;
+const cachedData = inject<CachedData>('cachedData') as CachedData;
 
 const props = defineProps<{ table: JoinTable }>();
-const apps = ref([] as KucDropdownItem[]);
-const tables = ref([] as KucDropdownItem[]);
+const apps = computed(() => cachedData.apps);
+const tableOptions = ref([EMPTY_OPTION]);
+const loading = ref(true);
 
-onMounted(async () => {
-  apps.value = await fetchApps();
+const selectedAppData: CachedSelectedAppData = reactive({
+  appFields: { fields: [], layout: [] } as FieldsInfo,
+  table: props.table,
+  loading: false,
 });
+provide('selectedAppData', selectedAppData);
 
 const selectApp = async (e: KucEvent) => {
+  loading.value = true;
+  const fields = await loadAppFieldsAndLayout(e.detail.value);
+  tableOptions.value = getTableFieldsDropdownItems(fields, types.SUBTABLE);
   resetTable(props.table);
-  tables.value = await fetchFields(e.detail.value, types.SUBTABLE);
-}
+  selectedAppData.appFields = fields;
+  loading.value = false;
+};
 
-const select = async (e: KucEvent) => {
-  console.log(getField(e.detail.value));
-}
+watch(
+  () => !props.table.app || loading.value,
+  (val) => {
+    selectedAppData.loading = val;
+  },
+);
 
 const isJoinConditionShown = (table: JoinTable) => {
   return savedData.joinTables[0].id !== table.id;
diff --git a/vue-project/my-kintone-plugin/src/components/basic/PluginTableConditionRow.vue b/vue-project/my-kintone-plugin/src/components/basic/PluginTableConditionRow.vue
index c2f2823..78f5d26 100644
--- a/vue-project/my-kintone-plugin/src/components/basic/PluginTableConditionRow.vue
+++ b/vue-project/my-kintone-plugin/src/components/basic/PluginTableConditionRow.vue
@@ -4,17 +4,20 @@
 
 <script setup lang="ts">
 import type { KucDropdownItem } from '@/types/my-kintone';
-import type { WhereCondition } from '@/types/model';
-import { defineProps, defineEmits } from 'vue';
-import { Dropdown } from 'kintone-ui-component/lib/dropdown';
+import type { CachedData, CachedSelectedAppData, SavedData, WhereCondition } from '@/types/model';
+import { defineProps, defineEmits, inject } from 'vue';
+import { Combobox } from 'kintone-ui-component/lib/combobox';
 
 const props = defineProps<{
   modelValue: WhereCondition[];
-  disabled: boolean;
 }>();
 
+const savedData = inject<SavedData>('savedData') as SavedData;
+const cachedData = inject<CachedData>('cachedData') as CachedData;
+const selectedAppData = inject<CachedSelectedAppData>('selectedAppData') as CachedSelectedAppData;
+
 const renderDropdown = (cellData: string) => {
-  const dropdown = new Dropdown({
+  const dropdown = new Combobox({
     items: [
       { label: 'John Brown', value: 'john' },
       { label: 'Steven Gerard', value: 'steven' },
@@ -25,7 +28,7 @@ const renderDropdown = (cellData: string) => {
 };
 
 const renderCondition = (cellData: string) => {
-  const dropdown = new Dropdown({
+  const dropdown = new Combobox({
     items: [
       { label: 'John Brown', value: 'john' },
       { label: 'Steven Gerard', value: 'steven' },
@@ -36,7 +39,7 @@ const renderCondition = (cellData: string) => {
 };
 
 const renderDynamicData = (cellData: string) => {
-  const dropdown = new Dropdown({
+  const dropdown = new Combobox({
     items: [
       { label: 'John Brown', value: 'john' },
       { label: 'Steven Gerard', value: 'steven' },
diff --git a/vue-project/my-kintone-plugin/src/components/basic/PluginTableConnectRow.vue b/vue-project/my-kintone-plugin/src/components/basic/PluginTableConnectRow.vue
index 816550d..91fa0d3 100644
--- a/vue-project/my-kintone-plugin/src/components/basic/PluginTableConnectRow.vue
+++ b/vue-project/my-kintone-plugin/src/components/basic/PluginTableConnectRow.vue
@@ -1,60 +1,74 @@
 <template>
-  <kuc-table :class-name.camel="['plugin-kuc-table']" :columns="columns" :data="modelValue" @change="changeRow"/>
+  <kuc-table :class-name.camel="['plugin-kuc-table']" :columns="columns" :data="modelValue" @change="changeRow" />
 </template>
 
 <script setup lang="ts">
 import type { KucDropdownItem } from '@/types/my-kintone';
-import type { FieldsJoinMapping } from '@/types/model';
-import { defineProps, defineEmits } from 'vue';
-import { Dropdown } from 'kintone-ui-component/lib/dropdown';
+import type { CachedData, CachedSelectedAppData, SavedData, FieldsJoinMapping, FieldsInfo } from '@/types/model';
+import { defineProps, defineEmits, inject, computed, ref, reactive, render, h, watch, onMounted } from 'vue';
+import { Combobox } from 'kintone-ui-component/lib/combobox';
+import { getFieldsDropdownItems } from '@/js/helper';
+import TableCombobox from './TableCombobox.vue';
 
 const props = defineProps<{
   connector: string;
   modelValue: FieldsJoinMapping[];
-  disabled: boolean;
 }>();
 
-const renderDropdown = (cellData: string) => {
-  const dropdown = new Dropdown({
-    items: [
-      { label: 'John Brown', value: 'john' },
-      { label: 'Steven Gerard', value: 'steven' },
-    ],
-    value: cellData,
-  });
-  return dropdown;
-};
-const renderConnector = () => {
-  return props.connector;
-};
+const savedData = inject<SavedData>('savedData') as SavedData;
+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: 'leftField',
-    render: renderDropdown,
+    render: (cellData: string, rowData: any, rowIndex: number) => {
+      const container = document.createElement('div');
+      const vnode = h(TableCombobox, {
+        items: getFieldsDropdownItems(selectedAppData.appFields, table.value),
+        modelValue: '',
+        selectedAppData,
+        'onUpdate:modelValue': (newValue: string) => {
+          props.modelValue[rowIndex].leftField = newValue;
+        },
+      });
+      render(vnode, container);
+      return container;
+    },
   },
   {
     title: '',
     field: 'connector',
-    render: renderConnector,
+    render: () => {
+      return props.connector;
+    },
   },
   {
     title: 'このアプリのフィールド',
     field: 'rightField',
-    render: renderDropdown,
+    render: (cellData: string, rowData: any, rowIndex: number) => {
+      const container = document.createElement('div');
+      const vnode = h(TableCombobox, {
+        items: getFieldsDropdownItems(cachedData.currentAppFields, table.value),
+        modelValue: '',
+        selectedAppData,
+        'onUpdate:modelValue': (newValue: string) => {
+          props.modelValue[rowIndex].rightField = newValue;
+        },
+      });
+      render(vnode, container);
+      return container;
+    },
   },
-];
-
-const leftFields = [] as KucDropdownItem[];
-const rightFields = [] as KucDropdownItem[];
+]);
 
 const emit = defineEmits<{
   (e: 'update:modelValue', value: FieldsJoinMapping[]): void;
 }>();
 
-const changeRow = (item: FieldsJoinMapping, key: keyof FieldsJoinMapping, value: string) => {
-};
+const changeRow = (item: FieldsJoinMapping, key: keyof FieldsJoinMapping, value: string) => {};
 
 const changeField = (item: FieldsJoinMapping, key: keyof FieldsJoinMapping, value: string) => {
   item[key] = value;
diff --git a/vue-project/my-kintone-plugin/src/components/basic/TableCombobox.vue b/vue-project/my-kintone-plugin/src/components/basic/TableCombobox.vue
new file mode 100644
index 0000000..2d45c66
--- /dev/null
+++ b/vue-project/my-kintone-plugin/src/components/basic/TableCombobox.vue
@@ -0,0 +1,24 @@
+<template>
+  <kuc-combobox :items="items" :value="modelValue" @change="updateValue" :disabled="selectedAppData.loading == undefined ? false : selectedAppData.loading" />
+</template>
+
+<script setup lang="ts">
+import type { CachedData, CachedSelectedAppData, SavedData } from '@/types/model';
+import type { KucEvent } from '@/types/my-kintone';
+import type { DropdownItem } from 'kintone-ui-component';
+import { defineProps, defineEmits, ref, inject, watch, onMounted } from 'vue';
+
+const props = defineProps<{
+  items: DropdownItem[];
+  modelValue: string;
+  selectedAppData: CachedSelectedAppData;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void;
+}>();
+
+const updateValue = (event: KucEvent) => {
+  emit('update:modelValue', event.detail.value);
+};
+</script>
diff --git a/vue-project/my-kintone-plugin/src/js/helper.ts b/vue-project/my-kintone-plugin/src/js/helper.ts
index 22efbe1..4c3f092 100644
--- a/vue-project/my-kintone-plugin/src/js/helper.ts
+++ b/vue-project/my-kintone-plugin/src/js/helper.ts
@@ -1,6 +1,6 @@
-import type { JoinTable } from '@/types/model';
+import type { FieldsInfo, JoinTable } from '@/types/model';
 import type { KucDropdownItem } from '@/types/my-kintone';
-import { client, isType, type App, type Properties, type OneOf } from './kintone-rest-api-client';
+import { client, isType, type OneOf, type App, type Layout } from './kintone-rest-api-client';
 
 export const condition = {
   unset: '',
@@ -18,50 +18,87 @@ export function createEmptyJoinTable(id = Number(new Date())) {
 }
 
 export function resetTable(table: JoinTable) {
+  table.table = '';
   table.whereConditions = [{ field: '', condition: condition.unset, data: '' }];
   table.onConditions = [{ leftField: '', rightField: '' }];
   table.fieldsMapping = [{ leftField: '', rightField: '' }];
 }
 
+export const EMPTY_OPTION = {
+  value: "",
+  label: "--------",
+} as KucDropdownItem;
+
 const LIMIT = 100; // 每次请求的最大应用数量
-let allAppsCache: KucDropdownItem[] = [];
-let allFieldsCache: Properties = {};
-export const fetchApps = async (offset = 0, _apps: KucDropdownItem[] = []): Promise<KucDropdownItem[]> => {
-  if (allAppsCache.length) return allAppsCache;
+export const loadApps = async (offset = 0, _apps: KucDropdownItem[] = []): Promise<KucDropdownItem[]> => {
   const { apps } = await client.app.getApps({ limit: LIMIT, offset });
   const allApps: KucDropdownItem[] = [
     ..._apps,
     ...apps.map((app: App) => ({ value: app.appId, label: app.name + '（ID: ' + app.appId + '）' })),
   ];
   if (apps.length === LIMIT) {
-    return fetchApps(offset + LIMIT, allApps);
+    return loadApps(offset + LIMIT, allApps);
   }
-  allAppsCache = allApps.sort((a, b) => Number(b.value) - Number(a.value));
+  allApps.sort((a, b) => Number(b.value) - Number(a.value));
+  allApps.unshift(EMPTY_OPTION);
   return allApps;
 };
 
-export const fetchFields = async (appId: string, filter: OneOf['type']) => {
-  let properties = allFieldsCache;
-  if (!allFieldsCache.length) {
-    properties = (await client.app.getFormFields({ app: appId })).properties;
-    allFieldsCache = properties;
+export const loadAppFieldsAndLayout = async (appId: string | number = kintone.app.getId() as number) => {
+  return {
+    fields: (await client.app.getFormFields({ app: appId })).properties,
+    layout: (await client.app.getFormLayout({ app: appId })).layout,
+  } as FieldsInfo;
+};
+
+export const getFieldsDropdownItems = (
+  { fields, layout }: FieldsInfo,
+  subTable?: string,
+  filterType?: OneOf['type'],
+) => {
+  let fieldOrder: string[];
+  if (subTable) {
+    const subTableFields = layout.find((each) => each.type === 'SUBTABLE' && each.code === subTable) as any;
+    fieldOrder = subTableFields?.fields.map((field: { code: string }) => field.code) || [];
+  } else {
+    fieldOrder = extractNoSubTableFields(layout);
   }
-  const labels = Object.keys(properties).reduce((acc, fieldCode) => {
-    const field = properties[fieldCode];
-    if (filter && !isType[filter](field)) return acc;
+  return fieldOrder.reduce((acc, fieldCode) => {
+    const field = fields[fieldCode];
+    if (filterType && !isType[filterType](field)) return acc;
     acc.push({
       value: fieldCode,
       label: field.label + '（FC: ' + fieldCode + '）',
     });
     return acc;
-  }, [] as KucDropdownItem[]);
-  return labels;
+  }, [EMPTY_OPTION]);
 };
 
-export const getField = (fieldCode: string) => {
-  const field = allFieldsCache[fieldCode];
-  if (isType.SUBTABLE(field)) {
-    console.log(field.fields);
-  }
-  return field;
+export const getTableFieldsDropdownItems = ({ fields }: FieldsInfo, filterType?: OneOf['type']) => {
+  return Object.keys(fields).reduce((acc, fieldCode) => {
+    const field = fields[fieldCode];
+    if (filterType && !isType[filterType](field)) return acc;
+    acc.push({
+      value: fieldCode,
+      label: field.label + '（FC: ' + fieldCode + '）',
+    });
+    return acc;
+  }, [EMPTY_OPTION]);
 };
+
+const extractNoSubTableFields = (layout: Layout) => {
+  return layout.reduce((acc, each) => {
+    if (each.type === 'SUBTABLE') {
+      return acc;
+    } else if (each.type === 'ROW') {
+      acc.push(...each.fields.map((field: any) => field.code));
+    } else if (each.type === 'GROUP') {
+      acc.push(...extractNoSubTableFields(each.layout));
+    }
+    return acc;
+  }, [] as string[]);
+};
+
+// if (isType.SUBTABLE(field)) {
+//   console.log(field.fields);
+// }
diff --git a/vue-project/my-kintone-plugin/src/js/kintone-rest-api-client.ts b/vue-project/my-kintone-plugin/src/js/kintone-rest-api-client.ts
index 8e11435..cf59117 100644
--- a/vue-project/my-kintone-plugin/src/js/kintone-rest-api-client.ts
+++ b/vue-project/my-kintone-plugin/src/js/kintone-rest-api-client.ts
@@ -8,6 +8,7 @@ export type App = {
 };
 
 export type Properties = Awaited<ReturnType<typeof client.app.getFormFields>>['properties'];
+export type Layout = Awaited<ReturnType<typeof client.app.getFormLayout>>['layout'];
 export type OneOf = Properties[string];
 
 const typeNames = [
diff --git a/vue-project/my-kintone-plugin/src/types/model.d.ts b/vue-project/my-kintone-plugin/src/types/model.d.ts
index 035dab3..7ac164a 100644
--- a/vue-project/my-kintone-plugin/src/types/model.d.ts
+++ b/vue-project/my-kintone-plugin/src/types/model.d.ts
@@ -1,4 +1,7 @@
+import { Layout } from './../js/kintone-rest-api-client';
+import type { Layout } from '@/js/kintone-rest-api-client';
 import { condition } from './helper';
+import type { KucDropdownItem } from './my-kintone';
 
 export interface FieldsJoinMapping {
   leftField: string;
@@ -24,4 +27,20 @@ export interface JoinTable {
 export interface SavedData {
   buttonName: string;
   joinTables: JoinTable[];
-}
\ No newline at end of file
+}
+
+export interface FieldsInfo {
+  fields: Properties;
+  layout: Layout;
+}
+
+export interface CachedData {
+  apps: KucDropdownItem[],
+  currentAppFields: FieldsInfo,
+}
+
+export interface CachedSelectedAppData {
+  appFields: FieldsInfo,
+  loading: boolean,
+  table: JoinTable,
+}
diff --git a/vue-project/my-kintone-plugin/vite.config.ts b/vue-project/my-kintone-plugin/vite.config.ts
index 7c734d5..68449d1 100644
--- a/vue-project/my-kintone-plugin/vite.config.ts
+++ b/vue-project/my-kintone-plugin/vite.config.ts
@@ -66,6 +66,7 @@ export default defineConfig({
     },
   },
   build: {
+    sourcemap: 'inline',
     rollupOptions: {
       input: {
         config: path.resolve(__dirname, 'index.html'),

From 270940abca5307b0e0e517ae5aa233c67f8a5897 Mon Sep 17 00:00:00 2001
From: xue jiahao <xuejiahao@alicorns.co.jp>
Date: Wed, 22 Jan 2025 17:23:20 +0800
Subject: [PATCH 2/2] update

---
 vue-project/my-kintone-plugin/components.d.ts |   3 +-
 vue-project/my-kintone-plugin/env.d.ts        |   8 +-
 .../src/components/Config.vue                 |   8 +-
 .../src/components/basic/PluginTableArea.vue  |  10 +-
 .../basic/PluginTableConditionRow.vue         | 107 +++++++++---------
 .../basic/PluginTableConnectRow.vue           |  20 +---
 .../basic/{ => condition}/TableCombobox.vue   |   0
 .../components/basic/condition/TableInput.vue |  22 ++++
 .../my-kintone-plugin/src/js/conditions.ts    |  38 +++++++
 .../my-kintone-plugin/src/js/helper.ts        |  97 +++++++++-------
 .../my-kintone-plugin/src/types/model.d.ts    |   9 +-
 .../src/types/my-kintone.d.ts                 |  12 --
 12 files changed, 192 insertions(+), 142 deletions(-)
 rename vue-project/my-kintone-plugin/src/components/basic/{ => condition}/TableCombobox.vue (100%)
 create mode 100644 vue-project/my-kintone-plugin/src/components/basic/condition/TableInput.vue
 create mode 100644 vue-project/my-kintone-plugin/src/js/conditions.ts

diff --git a/vue-project/my-kintone-plugin/components.d.ts b/vue-project/my-kintone-plugin/components.d.ts
index 19c9f84..7455103 100644
--- a/vue-project/my-kintone-plugin/components.d.ts
+++ b/vue-project/my-kintone-plugin/components.d.ts
@@ -17,6 +17,7 @@ declare module 'vue' {
     PluginTableArea: typeof import('./src/components/basic/PluginTableArea.vue')['default']
     PluginTableConditionRow: typeof import('./src/components/basic/PluginTableConditionRow.vue')['default']
     PluginTableConnectRow: typeof import('./src/components/basic/PluginTableConnectRow.vue')['default']
-    TableCombobox: typeof import('./src/components/basic/TableCombobox.vue')['default']
+    TableCombobox: typeof import('./src/components/basic/condition/TableCombobox.vue')['default']
+    TableInput: typeof import('./src/components/basic/condition/TableInput.vue')['default']
   }
 }
diff --git a/vue-project/my-kintone-plugin/env.d.ts b/vue-project/my-kintone-plugin/env.d.ts
index 1a06ebe..528bb9b 100644
--- a/vue-project/my-kintone-plugin/env.d.ts
+++ b/vue-project/my-kintone-plugin/env.d.ts
@@ -1,2 +1,8 @@
 /// <reference types="vite/client" />
-/// <reference types="kintone" />
\ No newline at end of file
+/// <reference types="kintone" />
+
+declare module '*.vue' {
+  import { DefineComponent } from 'vue';
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}
diff --git a/vue-project/my-kintone-plugin/src/components/Config.vue b/vue-project/my-kintone-plugin/src/components/Config.vue
index 3a5c1cb..70c1be0 100644
--- a/vue-project/my-kintone-plugin/src/components/Config.vue
+++ b/vue-project/my-kintone-plugin/src/components/Config.vue
@@ -18,9 +18,9 @@
   <kuc-spinner :container="mainArea" ref="spinner"></kuc-spinner>
 </template>
 <script setup lang="ts">
-import { createEmptyJoinTable, loadApps, loadAppFieldsAndLayout, EMPTY_OPTION } from '@/js/helper';
+import { createEmptyJoinTable, loadApps, loadAppFieldsAndLayout, EMPTY_OPTION, getEmptyOnCondition } from '@/js/helper';
 import type { CachedData, FieldsInfo, JoinTable, SavedData } from '@/types/model';
-import type { KucDropdownItem, KucSpinnerEl } from '@/types/my-kintone';
+import type { Spinner } from 'kintone-ui-component';
 
 import { onMounted, watch, provide, reactive, ref, shallowRef, nextTick } from 'vue';
 
@@ -40,7 +40,7 @@ provide('savedData', data);
 provide('cachedData', cachedData);
 
 const mainArea = shallowRef<HTMLElement | null>(null);
-const spinner = shallowRef<KucSpinnerEl | null>(null);
+const spinner = shallowRef<Spinner | null>(null);
 
 onMounted(async () => {
   spinner.value?.close(); // 修复不自动挂载到节点的 bug
@@ -64,7 +64,7 @@ watch(
   (newLength) => {
     console.log(data.joinTables);
     if (newLength === 1) {
-      data.joinTables[0].onConditions = [{ leftField: '', rightField: '' }];
+      data.joinTables[0].onConditions = [getEmptyOnCondition()];
     }
   },
 );
diff --git a/vue-project/my-kintone-plugin/src/components/basic/PluginTableArea.vue b/vue-project/my-kintone-plugin/src/components/basic/PluginTableArea.vue
index 1d6691a..302676b 100644
--- a/vue-project/my-kintone-plugin/src/components/basic/PluginTableArea.vue
+++ b/vue-project/my-kintone-plugin/src/components/basic/PluginTableArea.vue
@@ -5,7 +5,7 @@
         <plugin-dropdown :disabled="false" label="取得元アプリ" :items="apps" v-model="table.app" @change="selectApp" />
       </plugin-row>
       <plugin-row>
-        <plugin-dropdown :disabled="selectedAppData.loading" label="テーブル" :items="tableOptions" v-model="table.table" />
+        <plugin-dropdown :disabled="selectedAppData.loading" label="テーブル" :items="tableOptions" v-model="table.table" @change="selectTable" />
       </plugin-row>
       <plugin-row class="flex-row" v-if="isJoinConditionShown(table)">
         <plugin-label label="連結条件" />
@@ -27,10 +27,10 @@
 </template>
 
 <script setup lang="ts">
-import { EMPTY_OPTION, getFieldsDropdownItems, getTableFieldsDropdownItems, loadAppFieldsAndLayout, resetTable } from '@/js/helper';
+import { EMPTY_OPTION, getFieldsDropdownItems, getTableFieldsDropdownItems, loadAppFieldsAndLayout, resetConditions, resetTable } from '@/js/helper';
 import { types, type Layout, type Properties } from '@/js/kintone-rest-api-client';
 import type { CachedData, CachedSelectedAppData, FieldsInfo, JoinTable, SavedData } from '@/types/model';
-import type { KucDropdownItem, KucEvent } from '@/types/my-kintone';
+import type { KucEvent } from '@/types/my-kintone';
 import { computed, inject, onMounted, provide, reactive, ref, watch } from 'vue';
 
 const savedData = inject<SavedData>('savedData') as SavedData;
@@ -57,6 +57,10 @@ const selectApp = async (e: KucEvent) => {
   loading.value = false;
 };
 
+const selectTable = (e: KucEvent) => {
+  resetConditions(props.table);
+};
+
 watch(
   () => !props.table.app || loading.value,
   (val) => {
diff --git a/vue-project/my-kintone-plugin/src/components/basic/PluginTableConditionRow.vue b/vue-project/my-kintone-plugin/src/components/basic/PluginTableConditionRow.vue
index 78f5d26..3c8c4c5 100644
--- a/vue-project/my-kintone-plugin/src/components/basic/PluginTableConditionRow.vue
+++ b/vue-project/my-kintone-plugin/src/components/basic/PluginTableConditionRow.vue
@@ -1,12 +1,13 @@
 <template>
-  <kuc-table :class-name.camel="['plugin-kuc-table']" :columns="columns" :data="modelValue" @change="changeRow"/>
+  <kuc-table :class-name.camel="['plugin-kuc-table']" :columns="columns" :data="modelValue" />
 </template>
 
 <script setup lang="ts">
-import type { KucDropdownItem } from '@/types/my-kintone';
 import type { CachedData, CachedSelectedAppData, SavedData, WhereCondition } from '@/types/model';
-import { defineProps, defineEmits, inject } from 'vue';
-import { Combobox } from 'kintone-ui-component/lib/combobox';
+import { defineProps, defineEmits, inject, computed, ref, reactive, render, h, watch, onMounted } from 'vue';
+import TableCombobox from './condition/TableCombobox.vue';
+import { getEmptyWhereCondition, getFieldsDropdownItems } from '@/js/helper';
+import { conditionList, getComponent, type ConditionValue } from '@/js/conditions';
 
 const props = defineProps<{
   modelValue: WhereCondition[];
@@ -15,70 +16,66 @@ const props = defineProps<{
 const savedData = inject<SavedData>('savedData') as SavedData;
 const cachedData = inject<CachedData>('cachedData') as CachedData;
 const selectedAppData = inject<CachedSelectedAppData>('selectedAppData') as CachedSelectedAppData;
-
-const renderDropdown = (cellData: string) => {
-  const dropdown = new Combobox({
-    items: [
-      { label: 'John Brown', value: 'john' },
-      { label: 'Steven Gerard', value: 'steven' },
-    ],
-    value: cellData,
-  });
-  return dropdown;
-};
-
-const renderCondition = (cellData: string) => {
-  const dropdown = new Combobox({
-    items: [
-      { label: 'John Brown', value: 'john' },
-      { label: 'Steven Gerard', value: 'steven' },
-    ],
-    value: cellData,
-  });
-  return dropdown;
-};
-
-const renderDynamicData = (cellData: string) => {
-  const dropdown = new Combobox({
-    items: [
-      { label: 'John Brown', value: 'john' },
-      { label: 'Steven Gerard', value: 'steven' },
-    ],
-    value: cellData,
-  });
-  return dropdown;
-};
+const table = computed(() => selectedAppData.table.table);
 
 const columns = [
   {
     title: '取得元アプリのフィールド',
     field: 'field',
-    render: renderDropdown,
+    render: (cellData: string, rowData: any, rowIndex: number) => {
+      const container = document.createElement('div');
+      const vnode = h(TableCombobox, {
+        items: getFieldsDropdownItems(selectedAppData.appFields, table.value),
+        modelValue: '',
+        selectedAppData,
+        'onUpdate:modelValue': (newValue: string) => {
+          const res = getEmptyWhereCondition();
+          res.field = newValue;
+          props.modelValue[rowIndex] = res;
+        },
+      });
+      render(vnode, container);
+      return container;
+    },
   },
   {
     title: '',
     field: 'condition',
-    render: renderCondition,
+    render: (cellData: string, rowData: any, rowIndex: number) => {
+      const container = document.createElement('div');
+      const vnode = h(TableCombobox, {
+        items: conditionList,
+        modelValue: '',
+        selectedAppData,
+        'onUpdate:modelValue': (newValue: string) => {
+          const field = props.modelValue[rowIndex].field;
+          const res = getEmptyWhereCondition();
+          res.field = field;
+          res.condition = newValue as ConditionValue;
+          props.modelValue[rowIndex] = res;
+        },
+      });
+      render(vnode, container);
+      return container;
+    },
   },
   {
     title: '',
     field: 'data',
-    render: renderDynamicData,
+    render: (cellData: string, rowData: any, rowIndex: number) => {
+      const vueComponent = getComponent(props.modelValue[rowIndex].condition);
+      if (!vueComponent) return cellData;
+      const container = document.createElement('div');
+      const vnode = h(vueComponent, {
+        modelValue: '',
+        selectedAppData,
+        'onUpdate:modelValue': (newValue: string) => {
+          props.modelValue[rowIndex].data = newValue;
+        },
+      });
+      render(vnode, container);
+      return container;
+    },
   },
 ];
-
-const leftFields = [] as KucDropdownItem[];
-const rightFields = [] as KucDropdownItem[];
-
-const emit = defineEmits<{
-  (e: 'update:modelValue', value: WhereCondition[]): void;
-}>();
-
-const changeRow = (item: WhereCondition, key: keyof WhereCondition, value: string) => {
-};
-
-const changeField = (item: WhereCondition, key: keyof WhereCondition, value: string) => {
-  item[key] = value;
-  emit('update:modelValue', props.modelValue);
-};
 </script>
diff --git a/vue-project/my-kintone-plugin/src/components/basic/PluginTableConnectRow.vue b/vue-project/my-kintone-plugin/src/components/basic/PluginTableConnectRow.vue
index 91fa0d3..309294a 100644
--- a/vue-project/my-kintone-plugin/src/components/basic/PluginTableConnectRow.vue
+++ b/vue-project/my-kintone-plugin/src/components/basic/PluginTableConnectRow.vue
@@ -1,21 +1,18 @@
 <template>
-  <kuc-table :class-name.camel="['plugin-kuc-table']" :columns="columns" :data="modelValue" @change="changeRow" />
+  <kuc-table :class-name.camel="['plugin-kuc-table']" :columns="columns" :data="modelValue" />
 </template>
 
 <script setup lang="ts">
-import type { KucDropdownItem } from '@/types/my-kintone';
 import type { CachedData, CachedSelectedAppData, SavedData, FieldsJoinMapping, FieldsInfo } from '@/types/model';
 import { defineProps, defineEmits, inject, computed, ref, reactive, render, h, watch, onMounted } from 'vue';
-import { Combobox } from 'kintone-ui-component/lib/combobox';
 import { getFieldsDropdownItems } from '@/js/helper';
-import TableCombobox from './TableCombobox.vue';
+import TableCombobox from './condition/TableCombobox.vue';
 
 const props = defineProps<{
   connector: string;
   modelValue: FieldsJoinMapping[];
 }>();
 
-const savedData = inject<SavedData>('savedData') as SavedData;
 const cachedData = inject<CachedData>('cachedData') as CachedData;
 const selectedAppData = inject<CachedSelectedAppData>('selectedAppData') as CachedSelectedAppData;
 const table = computed(() => selectedAppData.table.table);
@@ -51,7 +48,7 @@ const columns = reactive([
     render: (cellData: string, rowData: any, rowIndex: number) => {
       const container = document.createElement('div');
       const vnode = h(TableCombobox, {
-        items: getFieldsDropdownItems(cachedData.currentAppFields, table.value),
+        items: getFieldsDropdownItems(cachedData.currentAppFields, undefined),
         modelValue: '',
         selectedAppData,
         'onUpdate:modelValue': (newValue: string) => {
@@ -63,15 +60,4 @@ const columns = reactive([
     },
   },
 ]);
-
-const emit = defineEmits<{
-  (e: 'update:modelValue', value: FieldsJoinMapping[]): void;
-}>();
-
-const changeRow = (item: FieldsJoinMapping, key: keyof FieldsJoinMapping, value: string) => {};
-
-const changeField = (item: FieldsJoinMapping, key: keyof FieldsJoinMapping, value: string) => {
-  item[key] = value;
-  emit('update:modelValue', props.modelValue);
-};
 </script>
diff --git a/vue-project/my-kintone-plugin/src/components/basic/TableCombobox.vue b/vue-project/my-kintone-plugin/src/components/basic/condition/TableCombobox.vue
similarity index 100%
rename from vue-project/my-kintone-plugin/src/components/basic/TableCombobox.vue
rename to vue-project/my-kintone-plugin/src/components/basic/condition/TableCombobox.vue
diff --git a/vue-project/my-kintone-plugin/src/components/basic/condition/TableInput.vue b/vue-project/my-kintone-plugin/src/components/basic/condition/TableInput.vue
new file mode 100644
index 0000000..3437caf
--- /dev/null
+++ b/vue-project/my-kintone-plugin/src/components/basic/condition/TableInput.vue
@@ -0,0 +1,22 @@
+<template>
+  <kuc-text :value="modelValue" @change="updateValue" :disabled="selectedAppData.loading == undefined ? false : selectedAppData.loading" />
+</template>
+
+<script setup lang="ts">
+import type { CachedData, CachedSelectedAppData, SavedData } from '@/types/model';
+import type { KucEvent } from '@/types/my-kintone';
+import { defineProps, defineEmits, ref, inject, watch, onMounted } from 'vue';
+
+const props = defineProps<{
+  modelValue: string;
+  selectedAppData: CachedSelectedAppData;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void;
+}>();
+
+const updateValue = (event: KucEvent) => {
+  emit('update:modelValue', event.detail.value);
+};
+</script>
diff --git a/vue-project/my-kintone-plugin/src/js/conditions.ts b/vue-project/my-kintone-plugin/src/js/conditions.ts
new file mode 100644
index 0000000..a2e592a
--- /dev/null
+++ b/vue-project/my-kintone-plugin/src/js/conditions.ts
@@ -0,0 +1,38 @@
+import TableCombobox from '@/components/basic/condition/TableCombobox.vue';
+import TableInput from '@/components/basic/condition/TableInput.vue';
+
+const component = {
+  '': undefined,
+  input: TableInput,
+  select: TableCombobox,
+};
+export type ComponentType = keyof typeof component;
+
+export type ConditionValue = '' | 'eq' | 'ne';
+
+type ConditionItem = {
+  value: ConditionValue;
+  label: string;
+  type: ComponentType;
+  func: (a: string, b: string) => boolean;
+};
+
+export const conditionList: ConditionItem[] = [
+  { value: '', label: '--------', type: '', func: (a: string, b: string) => true },
+  { value: 'eq', label: '=（等しい）', type: 'input', func: (a: string, b: string) => a === b },
+  { value: 'ne', label: '≠ （等しくない）', type: 'input', func: (a: string, b: string) => a !== b },
+];
+
+// type ConditionItem = (typeof conditionList)[number];
+
+export const conditionMap: Record<ConditionValue, ConditionItem> = conditionList.reduce(
+  (map, item) => {
+    map[item.value] = item;
+    return map;
+  },
+  {} as Record<ConditionValue, ConditionItem>,
+);
+
+export const getComponent = (value: ConditionValue) => {
+  return component[conditionMap[value].type];
+};
diff --git a/vue-project/my-kintone-plugin/src/js/helper.ts b/vue-project/my-kintone-plugin/src/js/helper.ts
index 4c3f092..6647644 100644
--- a/vue-project/my-kintone-plugin/src/js/helper.ts
+++ b/vue-project/my-kintone-plugin/src/js/helper.ts
@@ -1,38 +1,37 @@
-import type { FieldsInfo, JoinTable } from '@/types/model';
-import type { KucDropdownItem } from '@/types/my-kintone';
+import type { FieldsInfo, JoinTable, WhereCondition } from '@/types/model';
 import { client, isType, type OneOf, type App, type Layout } from './kintone-rest-api-client';
+import type { DropdownItem } from 'kintone-ui-component';
+
+
+export const EMPTY_OPTION = {
+  value: '',
+  label: '--------',
+} as DropdownItem;
+
+export const getEmptyWhereCondition = () => ({ field: '', condition: '', data: '' } as WhereCondition);
+export const getEmptyOnCondition = () => ({ leftField: '', rightField: '' });
+export const getEmptyFieldsMapping = () => ({ leftField: '', rightField: '' });
 
-export const condition = {
-  unset: '',
-  eq: '=',
-};
 export function createEmptyJoinTable(id = Number(new Date())) {
-  return {
-    id,
-    app: '',
-    table: '',
-    onConditions: [{ leftField: '', rightField: '' }],
-    fieldsMapping: [{ leftField: '', rightField: '' }],
-    whereConditions: [{ field: '', condition: condition.unset, data: '' }],
-  } as JoinTable;
+  return resetTable({ id, app: '' } as JoinTable);
 }
 
 export function resetTable(table: JoinTable) {
   table.table = '';
-  table.whereConditions = [{ field: '', condition: condition.unset, data: '' }];
-  table.onConditions = [{ leftField: '', rightField: '' }];
-  table.fieldsMapping = [{ leftField: '', rightField: '' }];
+  return resetConditions(table);
 }
 
-export const EMPTY_OPTION = {
-  value: "",
-  label: "--------",
-} as KucDropdownItem;
+export function resetConditions(table: JoinTable) {
+  table.onConditions = [getEmptyOnCondition()];
+  table.fieldsMapping = [getEmptyFieldsMapping()];
+  table.whereConditions = [getEmptyWhereCondition()];
+  return table;
+}
 
 const LIMIT = 100; // 每次请求的最大应用数量
-export const loadApps = async (offset = 0, _apps: KucDropdownItem[] = []): Promise<KucDropdownItem[]> => {
+export const loadApps = async (offset = 0, _apps: DropdownItem[] = []): Promise<DropdownItem[]> => {
   const { apps } = await client.app.getApps({ limit: LIMIT, offset });
-  const allApps: KucDropdownItem[] = [
+  const allApps: DropdownItem[] = [
     ..._apps,
     ...apps.map((app: App) => ({ value: app.appId, label: app.name + '（ID: ' + app.appId + '）' })),
   ];
@@ -53,37 +52,47 @@ export const loadAppFieldsAndLayout = async (appId: string | number = kintone.ap
 
 export const getFieldsDropdownItems = (
   { fields, layout }: FieldsInfo,
-  subTable?: string,
+  subTableCode?: string,
   filterType?: OneOf['type'],
 ) => {
+  // get used field codes
   let fieldOrder: string[];
-  if (subTable) {
-    const subTableFields = layout.find((each) => each.type === 'SUBTABLE' && each.code === subTable) as any;
+  let fieldMap = fields;
+  if (subTableCode) {
+    const subTableFields = layout.find((each) => each.type === 'SUBTABLE' && each.code === subTableCode) as any;
     fieldOrder = subTableFields?.fields.map((field: { code: string }) => field.code) || [];
+    fieldMap = fieldMap[subTableCode].fields;
   } else {
     fieldOrder = extractNoSubTableFields(layout);
   }
-  return fieldOrder.reduce((acc, fieldCode) => {
-    const field = fields[fieldCode];
-    if (filterType && !isType[filterType](field)) return acc;
-    acc.push({
-      value: fieldCode,
-      label: field.label + '（FC: ' + fieldCode + '）',
-    });
-    return acc;
-  }, [EMPTY_OPTION]);
+  // create labels
+  return fieldOrder.reduce(
+    (acc, fieldCode) => {
+      const field = fieldMap[fieldCode];
+      if (!fieldCode || filterType && !isType[filterType](field)) return acc;
+      acc.push({
+        value: fieldCode,
+        label: field.label + '（FC: ' + fieldCode + '）',
+      });
+      return acc;
+    },
+    [EMPTY_OPTION],
+  );
 };
 
 export const getTableFieldsDropdownItems = ({ fields }: FieldsInfo, filterType?: OneOf['type']) => {
-  return Object.keys(fields).reduce((acc, fieldCode) => {
-    const field = fields[fieldCode];
-    if (filterType && !isType[filterType](field)) return acc;
-    acc.push({
-      value: fieldCode,
-      label: field.label + '（FC: ' + fieldCode + '）',
-    });
-    return acc;
-  }, [EMPTY_OPTION]);
+  return Object.keys(fields).reduce(
+    (acc, fieldCode) => {
+      const field = fields[fieldCode];
+      if (filterType && !isType[filterType](field)) return acc;
+      acc.push({
+        value: fieldCode,
+        label: field.label + '（FC: ' + fieldCode + '）',
+      });
+      return acc;
+    },
+    [EMPTY_OPTION],
+  );
 };
 
 const extractNoSubTableFields = (layout: Layout) => {
diff --git a/vue-project/my-kintone-plugin/src/types/model.d.ts b/vue-project/my-kintone-plugin/src/types/model.d.ts
index 7ac164a..c5cd67c 100644
--- a/vue-project/my-kintone-plugin/src/types/model.d.ts
+++ b/vue-project/my-kintone-plugin/src/types/model.d.ts
@@ -1,7 +1,6 @@
-import { Layout } from './../js/kintone-rest-api-client';
+import type { ConditionValue } from '@/js/conditions';
 import type { Layout } from '@/js/kintone-rest-api-client';
-import { condition } from './helper';
-import type { KucDropdownItem } from './my-kintone';
+import type { DropdownItem } from 'kintone-ui-component';
 
 export interface FieldsJoinMapping {
   leftField: string;
@@ -10,7 +9,7 @@ export interface FieldsJoinMapping {
 
 export interface WhereCondition {
   field: string;
-  condition: (typeof condition)[keyof typeof condition];
+  condition: ConditionValue;
   data: string;
 }
 
@@ -35,7 +34,7 @@ export interface FieldsInfo {
 }
 
 export interface CachedData {
-  apps: KucDropdownItem[],
+  apps: DropdownItem[],
   currentAppFields: FieldsInfo,
 }
 
diff --git a/vue-project/my-kintone-plugin/src/types/my-kintone.d.ts b/vue-project/my-kintone-plugin/src/types/my-kintone.d.ts
index 1c0d110..7e32aee 100644
--- a/vue-project/my-kintone-plugin/src/types/my-kintone.d.ts
+++ b/vue-project/my-kintone-plugin/src/types/my-kintone.d.ts
@@ -1,15 +1,3 @@
-// 组件相关
-export interface KucDropdownItem {
-  label: string;
-  value: string;
-  disabled?: boolean;
-}
-
-export interface KucSpinnerEl {
-  open: function;
-  close: function;
-}
-
 export interface KucEvent {
   detail: {
     value: string;