Merge branch 'master' of https://dev.azure.com/alicorn-dev/deta-fetch-plugin/_git/deta-fetch-plugin

vue-project/my-kintone-plugin/components.d.ts

@@ -17,5 +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/condition/TableCombobox.vue')['default']
+    TableInput: typeof import('./src/components/basic/condition/TableInput.vue')['default']
   }
 }

vue-project/my-kintone-plugin/env.d.ts

@@ -1,2 +1,8 @@
 /// <reference types="vite/client" />
 /// <reference types="kintone" />
+
+declare module '*.vue' {
+  import { DefineComponent } from 'vue';
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}

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 { createEmptyJoinTable, loadApps, loadAppFieldsAndLayout, EMPTY_OPTION, getEmptyOnCondition } from '@/js/helper';
-import type { JoinTable, SavedData } from '@/types/model';
+import type { CachedData, FieldsInfo, JoinTable, SavedData } from '@/types/model';
-import type { KucSpinnerEl } from '@/types/my-kintone';
+import type { Spinner } from 'kintone-ui-component';
 
 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);
+const spinner = shallowRef<Spinner | 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 = [getEmptyOnCondition()];
     }
   },
 );

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" @change="selectTable" />
       </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,46 @@
 </template>
 
 <script setup lang="ts">
-import { fetchApps, fetchFields, getField, resetTable } from '@/js/helper';
+import { EMPTY_OPTION, getFieldsDropdownItems, getTableFieldsDropdownItems, loadAppFieldsAndLayout, resetConditions, resetTable } from '@/js/helper';
-import { types } from '@/js/kintone-rest-api-client';
+import { types, type Layout, type Properties } from '@/js/kintone-rest-api-client';
-import type { JoinTable, SavedData } from '@/types/model';
+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 { 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 apps = computed(() => cachedData.apps);
-const tables = ref([] as KucDropdownItem[]);
+const tableOptions = ref([EMPTY_OPTION]);
+const loading = ref(true);
 
-onMounted(async () => {
+const selectedAppData: CachedSelectedAppData = reactive({
-  apps.value = await fetchApps();
+  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) => {
+const selectTable = (e: KucEvent) => {
-  console.log(getField(e.detail.value));
+  resetConditions(props.table);
-}
+};
+
+watch(
+  () => !props.table.app || loading.value,
+  (val) => {
+    selectedAppData.loading = val;
+  },
+);
 
 const isJoinConditionShown = (table: JoinTable) => {
   return savedData.joinTables[0].id !== table.id;

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

@@ -1,81 +1,81 @@
 <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 type { WhereCondition } from '@/types/model';
+import { defineProps, defineEmits, inject, computed, ref, reactive, render, h, watch, onMounted } from 'vue';
-import { defineProps, defineEmits } from 'vue';
+import TableCombobox from './condition/TableCombobox.vue';
-import { Dropdown } from 'kintone-ui-component/lib/dropdown';
+import { getEmptyWhereCondition, getFieldsDropdownItems } from '@/js/helper';
+import { conditionList, getComponent, type ConditionValue } from '@/js/conditions';
 
 const props = defineProps<{
   modelValue: WhereCondition[];
-  disabled: boolean;
 }>();
 
-const renderDropdown = (cellData: string) => {
+const savedData = inject<SavedData>('savedData') as SavedData;
-  const dropdown = new Dropdown({
+const cachedData = inject<CachedData>('cachedData') as CachedData;
-    items: [
+const selectedAppData = inject<CachedSelectedAppData>('selectedAppData') as CachedSelectedAppData;
-      { label: 'John Brown', value: 'john' },
+const table = computed(() => selectedAppData.table.table);
-      { label: 'Steven Gerard', value: 'steven' },
-    ],
-    value: cellData,
-  });
-  return dropdown;
-};
-
-const renderCondition = (cellData: string) => {
-  const dropdown = new Dropdown({
-    items: [
-      { label: 'John Brown', value: 'john' },
-      { label: 'Steven Gerard', value: 'steven' },
-    ],
-    value: cellData,
-  });
-  return dropdown;
-};
-
-const renderDynamicData = (cellData: string) => {
-  const dropdown = new Dropdown({
-    items: [
-      { label: 'John Brown', value: 'john' },
-      { label: 'Steven Gerard', value: 'steven' },
-    ],
-    value: cellData,
-  });
-  return dropdown;
-};
 
 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>

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

@@ -1,63 +1,63 @@
 <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 type { FieldsJoinMapping } from '@/types/model';
+import { defineProps, defineEmits, inject, computed, ref, reactive, render, h, watch, onMounted } from 'vue';
-import { defineProps, defineEmits } from 'vue';
+import { getFieldsDropdownItems } from '@/js/helper';
-import { Dropdown } from 'kintone-ui-component/lib/dropdown';
+import TableCombobox from './condition/TableCombobox.vue';
 
 const props = defineProps<{
   connector: string;
   modelValue: FieldsJoinMapping[];
-  disabled: boolean;
 }>();
 
-const renderDropdown = (cellData: string) => {
+const cachedData = inject<CachedData>('cachedData') as CachedData;
-  const dropdown = new Dropdown({
+const selectedAppData = inject<CachedSelectedAppData>('selectedAppData') as CachedSelectedAppData;
-    items: [
+const table = computed(() => selectedAppData.table.table);
-      { label: 'John Brown', value: 'john' },
-      { label: 'Steven Gerard', value: 'steven' },
-    ],
-    value: cellData,
-  });
-  return dropdown;
-};
-const renderConnector = () => {
-  return props.connector;
-};
 
-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, undefined),
+        modelValue: '',
+        selectedAppData,
+        'onUpdate:modelValue': (newValue: string) => {
+          props.modelValue[rowIndex].rightField = newValue;
         },
-];
+      });
-
+      render(vnode, container);
-const leftFields = [] as KucDropdownItem[];
+      return container;
-const rightFields = [] as KucDropdownItem[];
+    },
-
+  },
-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>

vue-project/my-kintone-plugin/src/components/basic/condition/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>

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>

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];
+};

vue-project/my-kintone-plugin/src/js/helper.ts

@@ -1,67 +1,113 @@
-import type { JoinTable } from '@/types/model';
+import type { FieldsInfo, JoinTable, WhereCondition } from '@/types/model';
-import type { KucDropdownItem } from '@/types/my-kintone';
+import { client, isType, type OneOf, type App, type Layout } from './kintone-rest-api-client';
-import { client, isType, type App, type Properties, type OneOf } 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 {
+  return resetTable({ id, app: '' } as JoinTable);
-    id,
-    app: '',
-    table: '',
-    onConditions: [{ leftField: '', rightField: '' }],
-    fieldsMapping: [{ leftField: '', rightField: '' }],
-    whereConditions: [{ field: '', condition: condition.unset, data: '' }],
-  } as JoinTable;
 }
 
 export function resetTable(table: JoinTable) {
-  table.whereConditions = [{ field: '', condition: condition.unset, data: '' }];
+  table.table = '';
-  table.onConditions = [{ leftField: '', rightField: '' }];
+  return resetConditions(table);
-  table.fieldsMapping = [{ leftField: '', rightField: '' }];
+}
+
+export function resetConditions(table: JoinTable) {
+  table.onConditions = [getEmptyOnCondition()];
+  table.fieldsMapping = [getEmptyFieldsMapping()];
+  table.whereConditions = [getEmptyWhereCondition()];
+  return table;
 }
 
 const LIMIT = 100; // 每次请求的最大应用数量
-let allAppsCache: KucDropdownItem[] = [];
+export const loadApps = async (offset = 0, _apps: DropdownItem[] = []): Promise<DropdownItem[]> => {
-let allFieldsCache: Properties = {};
-export const fetchApps = async (offset = 0, _apps: KucDropdownItem[] = []): Promise<KucDropdownItem[]> => {
-  if (allAppsCache.length) return allAppsCache;
   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 + '）' })),
   ];
   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']) => {
+export const loadAppFieldsAndLayout = async (appId: string | number = kintone.app.getId() as number) => {
-  let properties = allFieldsCache;
+  return {
-  if (!allFieldsCache.length) {
+    fields: (await client.app.getFormFields({ app: appId })).properties,
-    properties = (await client.app.getFormFields({ app: appId })).properties;
+    layout: (await client.app.getFormLayout({ app: appId })).layout,
-    allFieldsCache = properties;
+  } as FieldsInfo;
+};
+
+export const getFieldsDropdownItems = (
+  { fields, layout }: FieldsInfo,
+  subTableCode?: string,
+  filterType?: OneOf['type'],
+) => {
+  // get used field codes
+  let fieldOrder: string[];
+  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);
   }
-  const labels = Object.keys(properties).reduce((acc, fieldCode) => {
+  // create labels
-    const field = properties[fieldCode];
+  return fieldOrder.reduce(
-    if (filter && !isType[filter](field)) return acc;
+    (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;
-  }, [] as KucDropdownItem[]);
+    },
-  return labels;
+    [EMPTY_OPTION],
+  );
 };
 
-export const getField = (fieldCode: string) => {
+export const getTableFieldsDropdownItems = ({ fields }: FieldsInfo, filterType?: OneOf['type']) => {
-  const field = allFieldsCache[fieldCode];
+  return Object.keys(fields).reduce(
-  if (isType.SUBTABLE(field)) {
+    (acc, fieldCode) => {
-    console.log(field.fields);
+      const field = fields[fieldCode];
-  }
+      if (filterType && !isType[filterType](field)) return acc;
-  return field;
+      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);
+// }

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 = [

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

@@ -1,4 +1,6 @@
-import { condition } from './helper';
+import type { ConditionValue } from '@/js/conditions';
+import type { Layout } from '@/js/kintone-rest-api-client';
+import type { DropdownItem } from 'kintone-ui-component';
 
 export interface FieldsJoinMapping {
   leftField: string;
@@ -7,7 +9,7 @@ export interface FieldsJoinMapping {
 
 export interface WhereCondition {
   field: string;
-  condition: (typeof condition)[keyof typeof condition];
+  condition: ConditionValue;
   data: string;
 }
 
@@ -25,3 +27,19 @@ export interface SavedData {
   buttonName: string;
   joinTables: JoinTable[];
 }
+
+export interface FieldsInfo {
+  fields: Properties;
+  layout: Layout;
+}
+
+export interface CachedData {
+  apps: DropdownItem[],
+  currentAppFields: FieldsInfo,
+}
+
+export interface CachedSelectedAppData {
+  appFields: FieldsInfo,
+  loading: boolean,
+  table: JoinTable,
+}

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;

vue-project/my-kintone-plugin/vite.config.ts

@@ -67,6 +67,7 @@ export default defineConfig({
     },
   },
   build: {
+    sourcemap: 'inline',
     rollupOptions: {
       input: {
         config: path.resolve(__dirname, 'index.html'),