From 62ec4b84fcf7e1ceeb36ace1d45fe7cc184d6694 Mon Sep 17 00:00:00 2001
From: xue jiahao <xuejiahao@alicorns.co.jp>
Date: Sun, 26 Jan 2025 01:11:38 +0800
Subject: [PATCH] finish join/mapping

---
 .../basic/PluginTableConditionRow.vue         |   4 +-
 .../basic/PluginTableConnectRow.vue           |  12 +-
 .../src/components/basic/TableCombobox.vue    |   1 +
 .../basic/conditions/TableCondition.vue       |  24 ++-
 .../my-kintone-plugin/src/css/config.css      |   4 +-
 .../my-kintone-plugin/src/js/conditions.ts    |  12 +-
 vue-project/my-kintone-plugin/src/js/join.ts  | 134 ++++++++++------
 .../my-kintone-plugin/src/js/mapping.ts       | 144 ++++++------------
 .../src/types/my-kintone.d.ts                 |  22 +--
 9 files changed, 178 insertions(+), 179 deletions(-)

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 982f3a3..0d68184 100644
--- a/vue-project/my-kintone-plugin/src/components/basic/PluginTableConditionRow.vue
+++ b/vue-project/my-kintone-plugin/src/components/basic/PluginTableConditionRow.vue
@@ -17,7 +17,7 @@ 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 table = computed(() => selectedAppData.table.table);
+// const table = computed(() => selectedAppData.table.table);
 
 const columns = reactive([
   {
@@ -31,7 +31,7 @@ const columns = reactive([
       const vnode = h(TableCombobox, {
         items: computed(() =>
           getFieldsDropdownItems(selectedAppData.appFields, {
-            subTableCode: table.value,
+            subTableCode: '', //table.value,
             baseFilter: undefined,
             defaultLabel: 'すべてのレコード',
           }),
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 5d85f76..7e3c2c8 100644
--- a/vue-project/my-kintone-plugin/src/components/basic/PluginTableConnectRow.vue
+++ b/vue-project/my-kintone-plugin/src/components/basic/PluginTableConnectRow.vue
@@ -6,7 +6,7 @@
 import type { CachedData, CachedSelectedAppData, FieldsJoinMapping, WhereCondition } from '@/types/model';
 import { defineProps, inject, computed, reactive, render, h } from 'vue';
 import { generateId, getFieldObj, getFieldsDropdownItems, search } from '@/js/helper';
-import { getLeftAvailableJoinType, getRightAvailableJoinType, isForceDisable } from '@/js/join';
+import { getLeftAvailableJoinType, getRightAvailableJoinType, isLeftJoinForceDisable, isRightJoinForceDisable,  } from '@/js/join';
 import { getLeftAvailableMappingType, getRightAvailableMappingType } from '@/js/mapping';
 import TableCombobox from './TableCombobox.vue';
 import { type FieldType, type OneOf } from '@/js/kintone-rest-api-client';
@@ -23,10 +23,12 @@ const table = computed(() => selectedAppData.table.table);
 
 const filterFunc = {
   connect: {
+    subTable: table,
     left: (right?: OneOf | '') => getLeftAvailableJoinType(right),
     right: (left?: OneOf | '') => getRightAvailableJoinType(left),
   },
   mapping: {
+    subTable: computed(() => ''),
     left: (right?: OneOf | '') => getLeftAvailableMappingType(right),
     right: (left?: OneOf | '') => getRightAvailableMappingType(left),
   },
@@ -45,11 +47,11 @@ const columns = reactive([
         items: computed(() => {
           const dependFilterField = getField('rightField', rowData.id);
           return getFieldsDropdownItems(selectedAppData.appFields, {
-            subTableCode: table.value,
+            subTableCode: filterFunc[props.type].subTable.value,
             baseFilter: filterFunc[props.type].left() as FieldType[],
             filterType: filterFunc[props.type].left(dependFilterField),
             dependFilterField,
-            defaultDisableCallback: isForceDisable,
+            defaultDisableCallback: isLeftJoinForceDisable,
           });
         }),
         modelValue: computed(() => (search(props.modelValue, rowData.id) as FieldsJoinMapping)?.leftField || ''),
@@ -89,7 +91,7 @@ const columns = reactive([
             baseFilter: filterFunc[props.type].right() as FieldType[],
             filterType: filterFunc[props.type].right(dependFilterField),
             dependFilterField,
-            defaultDisableCallback: isForceDisable,
+            defaultDisableCallback: props.type === 'connect' ? isRightJoinForceDisable : undefined,
           });
         }),
         modelValue: computed(() => (search(props.modelValue, rowData.id) as FieldsJoinMapping)?.rightField || ''),
@@ -112,7 +114,7 @@ function getField(key: 'leftField' | 'rightField', id: string) {
   const dataRow = search(props.modelValue, id) as FieldsJoinMapping | undefined;
   const fieldCode = dataRow ? dataRow[key] || '' : '';
   const targetFieldMap = key === 'leftField' ? selectedAppData.appFields : cachedData.currentAppFields;
-  const targetTable = key === 'leftField' ? table.value : '';
+  const targetTable = key === 'leftField' ? filterFunc[props.type].subTable.value : '';
   return getFieldObj(fieldCode, targetFieldMap, targetTable);
 }
 </script>
diff --git a/vue-project/my-kintone-plugin/src/components/basic/TableCombobox.vue b/vue-project/my-kintone-plugin/src/components/basic/TableCombobox.vue
index b4bd8f4..bb09780 100644
--- a/vue-project/my-kintone-plugin/src/components/basic/TableCombobox.vue
+++ b/vue-project/my-kintone-plugin/src/components/basic/TableCombobox.vue
@@ -1,5 +1,6 @@
 <template>
   <kuc-combobox
+    className="kuc-text-input"
     :items="items.value"
     :value="modelValue.value"
     @change="updateValue"
diff --git a/vue-project/my-kintone-plugin/src/components/basic/conditions/TableCondition.vue b/vue-project/my-kintone-plugin/src/components/basic/conditions/TableCondition.vue
index 9f4043f..465de77 100644
--- a/vue-project/my-kintone-plugin/src/components/basic/conditions/TableCondition.vue
+++ b/vue-project/my-kintone-plugin/src/components/basic/conditions/TableCondition.vue
@@ -2,7 +2,7 @@
   <kuc-combobox
     v-if="items?.length"
     :items="items"
-    :value="modelValue"
+    :value="value"
     @change="updateValue"
     :disabled="selectedAppData.loading == undefined ? false : selectedAppData.loading"
   />
@@ -14,7 +14,7 @@ import { search } from '@/js/helper';
 import type { CachedSelectedAppData, WhereCondition } from '@/types/model';
 import type { KucEvent } from '@/types/my-kintone';
 import type { ComboboxChangeEventDetail } from 'kintone-ui-component';
-import { defineProps, defineEmits, computed } from 'vue';
+import { defineProps, defineEmits, computed, watch, ref } from 'vue';
 
 const props = defineProps<{
   modelValue: string;
@@ -25,7 +25,25 @@ const props = defineProps<{
 
 const whereCondition = computed(() => search(props.whereConditions, props.id) as WhereCondition | undefined);
 
-const items = computed(() => getAvailableCondition(whereCondition.value?.field || '', props.selectedAppData.appFields, props.selectedAppData.table.table));
+const items = computed(() =>
+  getAvailableCondition(
+    whereCondition.value?.field || '',
+    props.selectedAppData.appFields,
+    props.selectedAppData.table.table,
+  ),
+);
+
+const value = ref(props.modelValue);
+
+watch(
+  () => items,
+  () => {
+    const option = items.value?.[0] || { value: '' };
+    value.value = option.value;
+    updateValue({ detail: option });
+  },
+  { deep: true },
+);
 
 type EmitData = {
   obj?: WhereCondition;
diff --git a/vue-project/my-kintone-plugin/src/css/config.css b/vue-project/my-kintone-plugin/src/css/config.css
index bc9cfb3..8d70c90 100644
--- a/vue-project/my-kintone-plugin/src/css/config.css
+++ b/vue-project/my-kintone-plugin/src/css/config.css
@@ -11,7 +11,7 @@
 /* config 页面 */
 #app {
   width: 60vw;
-  min-width: 920px;
+  min-width: 940px;
 }
 
 /* 最上面的说明 */
@@ -27,7 +27,7 @@
 /* laebl input 单行的情况 */
 .flex-row .kintoneplugin-label {
   margin: 0;
-  width: 10em;
+  width: 8.5em;
 }
 
 /* 遮罩 */
diff --git a/vue-project/my-kintone-plugin/src/js/conditions.ts b/vue-project/my-kintone-plugin/src/js/conditions.ts
index 0ffd963..1bf9302 100644
--- a/vue-project/my-kintone-plugin/src/js/conditions.ts
+++ b/vue-project/my-kintone-plugin/src/js/conditions.ts
@@ -11,14 +11,12 @@ 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 },
-  { value: 'test', label: 'test combobox', type: 'select', func: (a: string, b: string) => a < b },
+  { value: 'eq', label: '=（等しい）', type: 'input' },
+  { value: 'ne', label: '≠ （等しくない）', type: 'input' },
+  { value: 'test', label: 'test combobox', type: 'select' },
 ];
 
 // search from conditionList
@@ -42,9 +40,9 @@ const fieldConditions: FieldConditions = {
 // fieldCode -> conditionList: ConditionItem[]
 export const getAvailableCondition = (fieldCode: string, fieldsInfo: FieldsInfo, subTableCode: string | '') => {
   if (!fieldCode || !fieldsInfo.fields) return;
-  const fieldObj = getFieldObj(fieldCode, fieldsInfo, subTableCode);
+  const fieldObj = getFieldObj(fieldCode, fieldsInfo, '');
   if (!fieldObj) return;
-  const conditions = fieldConditions[fieldObj.type] || [];
+  const conditions = fieldConditions[fieldObj.type] || ['eq']; // TODO a mock here
   return conditions.map((condition) => conditionMap[condition]);
 };
 
diff --git a/vue-project/my-kintone-plugin/src/js/join.ts b/vue-project/my-kintone-plugin/src/js/join.ts
index 8a2160e..0e6f3bc 100644
--- a/vue-project/my-kintone-plugin/src/js/join.ts
+++ b/vue-project/my-kintone-plugin/src/js/join.ts
@@ -1,99 +1,135 @@
-import type { CalcType, LinkType } from '@/types/my-kintone';
+import type { CalcType, LinkProtocolType } from '@/types/my-kintone';
 import { isType, type FieldType, type OneOf } from './kintone-rest-api-client';
+import { KintoneFormFieldProperty } from '@kintone/rest-api-client';
 
-export function isForceDisable(field: OneOf) {
+export function isLeftJoinForceDisable(field: OneOf) {
   if (isType.CALC(field)) {
     return field.format === 'DAY_HOUR_MINUTE' || field.format === 'HOUR_MINUTE';
   }
   return false;
 }
 
+export function isRightJoinForceDisable(field: OneOf) {
+  if (isLookup(field)) {
+    return true;
+  }
+  return false;
+}
+
 export type SpecialType<T = string, F = any> = {
   type: T;
   format: F;
-  check: (field: OneOf, depField?: OneOf) => boolean;
+  check: (checkField: OneOf, selectedField?: OneOf) => boolean;
 };
 
 // LEFT
-export type LeftCalcJoinType = SpecialType<'CALC_JOIN_FOR_LEFT', Record<CalcType, FieldType[]>>;
+// LEFT - lookup
+export type LookupTypeL2R = SpecialType<'LOOKUP_FROM_LEFT', FieldType[]>;
+export const forMayLookup = (format: FieldType[]): LookupTypeL2R => {
+  return {
+    type: 'LOOKUP_FROM_LEFT',
+    format,
+    check: function (checkField: OneOf, selectedLeftField?: OneOf) {
+      if (isLookup(checkField) && selectedLeftField) {
+        return isLookup(selectedLeftField) ? checkField.type === selectedLeftField.type : false;
+      }
+      return !!this.format?.find((e) => e === checkField.type);
+    },
+  };
+};
 
-export const calcJoinType: LeftCalcJoinType = {
-  type: 'CALC_JOIN_FOR_LEFT',
+export const mayLookupText = forMayLookup(['SINGLE_LINE_TEXT']);
+export const mayLookupNumber = forMayLookup(['NUMBER']);
+export const mayLookupTextNumber = forMayLookup(['SINGLE_LINE_TEXT', 'NUMBER']);
+
+// LEFT - calc
+export type CalcTypeL2R = SpecialType<'CALC_FROM_LEFT', Record<CalcType, Array<FieldType | LookupTypeL2R>>>;
+
+export const leftCalcType: CalcTypeL2R = {
+  type: 'CALC_FROM_LEFT',
   format: {
-    NUMBER: ['SINGLE_LINE_TEXT', 'NUMBER'],
-    NUMBER_DIGIT: ['SINGLE_LINE_TEXT', 'NUMBER'],
+    NUMBER: [mayLookupTextNumber],
+    NUMBER_DIGIT: [mayLookupTextNumber],
     DATE: ['DATE'],
     TIME: ['TIME'],
     DATETIME: ['DATETIME'],
     HOUR_MINUTE: [],
     DAY_HOUR_MINUTE: [],
   },
-  check: function (field: OneOf, rightField?: OneOf) {
-    let allowed: FieldType[] = [];
-    if (rightField && isType.CALC(rightField)) {
-      allowed = this.format[rightField.format];
+  check: function (checkField: OneOf, selectedLeftField?: OneOf) {
+    let allowed: Array<FieldType | LookupTypeL2R> = [];
+    if (selectedLeftField && isType.CALC(selectedLeftField)) {
+      allowed = this.format[selectedLeftField.format];
     }
-    if (field && isType.CALC(field)) {
-      return !!allowed.find((e) => e === field.format);
-    }
-    return false;
+    return !!allowed.find((e) => {
+      if (isSpecialType(e) && isLookupFromLeft(e)) {
+        return e.check(checkField, selectedLeftField);
+      }
+      return e === checkField.type;
+    });
   },
 };
 
-export type LinkJoinType = SpecialType<'LINK_JOIN', Record<LinkType, LinkType[]>>;
+// LEFT - link
+export type LinkType = SpecialType<'LINK', Record<LinkProtocolType, LinkProtocolType[]>>;
 
-// 入力値の種別が同じ場合のみ
-export const linkJoinType: LinkJoinType = {
-  type: 'LINK_JOIN',
+export const linkType: LinkType = {
+  type: 'LINK',
   format: {
+    // 入力値の種別が同じ場合のみ
     WEB: ['WEB'],
     CALL: ['CALL'],
     MAIL: ['MAIL'],
   },
-  check: function (field: OneOf, dependField?: OneOf) {
-    let allowed: LinkType[] = [];
-    if (dependField && isType.LINK(dependField)) {
-      allowed = this.format[dependField.protocol];
+  check: function (checkField: OneOf, selectedField?: OneOf) {
+    let allowed: LinkProtocolType[] = [];
+    if (selectedField && isType.LINK(selectedField)) {
+      allowed = this.format[selectedField.protocol];
     }
-    if (field && isType.LINK(field)) {
-      return !!allowed.find((e) => e === field.protocol);
+    if (checkField && isType.LINK(checkField)) {
+      return !!allowed.find((e) => e === checkField.protocol);
     }
     return false;
   },
 };
 
+// LEFT - rule
+export type AvailableRight = FieldType | CalcTypeL2R | LinkType | LookupTypeL2R;
 const availableLeftJoinType = {
-  SINGLE_LINE_TEXT: ['SINGLE_LINE_TEXT'],
-  NUMBER: ['NUMBER'],
-  CALC: [calcJoinType],
+  SINGLE_LINE_TEXT: [mayLookupText],
+  NUMBER: [mayLookupNumber],
+  CALC: [leftCalcType],
   DATE: ['DATE'],
   TIME: ['TIME'],
   DATETIME: ['DATETIME'],
-  LINK: [linkJoinType],
-} as Record<FieldType, Array<FieldType | LeftCalcJoinType | LinkJoinType>>;
+  LINK: [linkType],
+} as Record<FieldType, AvailableRight[]>;
 
-// RIGHT
-export type RightCalcJoinType = SpecialType<'CALC_JOIN_FOR_RIGHT', CalcType[]>;
+// RIGHT - calc
+export type CalcTypeR2L = SpecialType<'CALC_FROM_RIGHT', CalcType[]>;
 
-export const forCalc = (format: CalcType[]): RightCalcJoinType => {
+export const forCalc = (format: CalcType[]): CalcTypeR2L => {
   return {
-    type: 'CALC_JOIN_FOR_RIGHT',
+    type: 'CALC_FROM_RIGHT',
     format,
-    check: function (field: OneOf, leftField?: OneOf) {
-      return isType.CALC(field) && !!this.format?.find((e) => e === field.format);
+    check: function (checkField: OneOf, selectedRightField?: OneOf) {
+      return isType.CALC(checkField) && !!this.format?.find((e) => e === checkField.format);
     },
   };
 };
 
+// RIGHT - rule
+export type AvailableLeft = FieldType | CalcTypeR2L | LinkType;
 const availableRightJoinType = {
   SINGLE_LINE_TEXT: ['SINGLE_LINE_TEXT', forCalc(['NUMBER', 'NUMBER_DIGIT'])],
   NUMBER: ['NUMBER', forCalc(['NUMBER', 'NUMBER_DIGIT'])],
   DATE: ['DATE', forCalc(['DATE'])],
   TIME: ['TIME', forCalc(['TIME'])],
   DATETIME: ['DATETIME', forCalc(['DATETIME'])],
-  LINK: [linkJoinType],
-} as Record<FieldType, Array<FieldType | RightCalcJoinType | LinkJoinType>>;
+  LINK: [linkType],
+} as Record<FieldType, AvailableLeft[]>;
 
+// methods
 // undefined means all
 export function getRightAvailableJoinType(left?: OneOf | '') {
   if (left === undefined) {
@@ -114,14 +150,22 @@ export function isSpecialType(obj: FieldType | SpecialType): obj is SpecialType
   return typeof obj === 'object' && !Array.isArray(obj) && 'type' in obj;
 }
 
-export function isLinkJoinType(obj: SpecialType): obj is LinkJoinType {
-  return obj.type === 'LINK_JOIN';
+export function isLookupFromLeft(obj: SpecialType): obj is LookupTypeL2R {
+  return obj.type === 'LOOKUP_FROM_LEFT';
 }
 
-export function isLeftCalcJoinType(obj: SpecialType): obj is LeftCalcJoinType {
-  return obj.type === 'CALC_JOIN_FOR_LEFT';
+export function isLinkType(obj: SpecialType): obj is LinkType {
+  return obj.type === 'LINK';
 }
 
-export function isRightCalcJoinType(obj: SpecialType): obj is RightCalcJoinType {
-  return obj.type === 'CALC_JOIN_FOR_RIGHT';
+export function isCalcFromLeft(obj: SpecialType): obj is CalcTypeL2R {
+  return obj.type === 'CALC_FROM_LEFT';
+}
+
+export function isCalcFromRight(obj: SpecialType): obj is CalcTypeR2L {
+  return obj.type === 'CALC_FROM_RIGHT';
+}
+
+export function isLookup(field: OneOf): field is KintoneFormFieldProperty.Lookup {
+  return 'lookup' in field;
 }
diff --git a/vue-project/my-kintone-plugin/src/js/mapping.ts b/vue-project/my-kintone-plugin/src/js/mapping.ts
index 819ebdd..96bc6d1 100644
--- a/vue-project/my-kintone-plugin/src/js/mapping.ts
+++ b/vue-project/my-kintone-plugin/src/js/mapping.ts
@@ -1,75 +1,26 @@
-import type { CalcType, LinkType, SelectType } from '@/types/my-kintone';
-import { isType, type FieldType, type OneOf } from './kintone-rest-api-client';
-import { calcJoinType, linkJoinType, type SpecialType, isSpecialType } from './join';
-import { KintoneFormFieldProperty } from '@kintone/rest-api-client';
-
-// LEFT
-export type LeftLookupMappingType = SpecialType<'LOOKUP_MAPPING_FOR_LEFT', FieldType[]>;
-
-export const lookupMappingType = (format: FieldType[]): LeftLookupMappingType => {
-  return {
-    type: 'LOOKUP_MAPPING_FOR_LEFT',
-    format,
-    check: function (field: OneOf, rightField?: OneOf) {
-      if (rightField && isLookup(rightField) && !isLookup(field)) {
-        return false;
-      }
-      return !!this.format?.find((e) => e === field.type);
-    },
-  };
-};
-
-const mayLookupText = lookupMappingType(['SINGLE_LINE_TEXT']);
-const mayLookupNumber = lookupMappingType(['NUMBER']);
-
-export type LeftCalcMappingType = SpecialType<
-  'CALC_MAPPING_FOR_LEFT',
-  Record<CalcType, Array<FieldType | LeftLookupMappingType>>
->;
-
-// same as join
-export const calcMappingType: LeftCalcMappingType = {
-  type: 'CALC_MAPPING_FOR_LEFT',
-  format: {
-    NUMBER: [mayLookupText, mayLookupNumber],
-    NUMBER_DIGIT: [mayLookupText, mayLookupNumber],
-    DATE: ['DATE'],
-    TIME: ['TIME'],
-    DATETIME: ['DATETIME'],
-    HOUR_MINUTE: [],
-    DAY_HOUR_MINUTE: [],
-  },
-  check: function (field: OneOf, rightField?: OneOf) {
-    let allowed: Array<FieldType | LeftLookupMappingType> = [];
-    if (rightField && isType.CALC(rightField)) {
-      allowed = this.format[rightField.format];
-    }
-    if (field && isType.CALC(field)) {
-      return !!allowed.find((e) => {
-        if (isSpecialType(e) && isLeftLookupMappingType(e)) {
-          return e.check(field, rightField);
-        }
-        return e === field.format
-      });
-    }
-    return false;
-  },
-};
-
-export type LinkMappingType = SpecialType<'LINK_MAPPING', Record<LinkType, LinkType[]>>;
-
-// same as join
-export const linkMappingType = {
-  ...linkJoinType,
-  type: 'LINK_MAPPING',
-} as LinkMappingType;
+import { type FieldType, type OneOf } from './kintone-rest-api-client';
+import {
+  leftCalcType,
+  linkType,
+  type SpecialType,
+  mayLookupTextNumber,
+  mayLookupText,
+  type AvailableRight,
+  type AvailableLeft,
+  isLookup,
+  forCalc,
+  type CalcTypeR2L,
+  isSpecialType,
+} from './join';
+import type { SelectType } from '@/types/my-kintone';
 
+// LEFT - rule
 const availableLeftMappingType = {
   SINGLE_LINE_TEXT: [mayLookupText],
   MULTI_LINE_TEXT: ['MULTI_LINE_TEXT'],
   RICH_TEXT: ['RICH_TEXT'],
-  NUMBER: [mayLookupNumber, mayLookupText],
-  CALC: [calcMappingType],
+  NUMBER: [mayLookupTextNumber],
+  CALC: [leftCalcType],
   RADIO_BUTTON: ['RADIO_BUTTON'],
   CHECK_BOX: ['CHECK_BOX'],
   MULTI_SELECT: ['MULTI_SELECT'], // TODO 带选项字段报错
@@ -80,45 +31,43 @@ const availableLeftMappingType = {
   DATE: ['DATE', 'DATETIME'],
   TIME: ['TIME'],
   DATETIME: ['DATETIME'],
-  LINK: [linkMappingType, mayLookupText],
+  LINK: [linkType, mayLookupText],
   //LOOKUP
-  RECORD_NUMBER: [mayLookupText, mayLookupNumber],
+  RECORD_NUMBER: [mayLookupTextNumber],
   CREATOR: ['USER_SELECT'],
   CREATED_TIME: ['DATETIME'],
   MODIFIER: ['USER_SELECT'],
   UPDATED_TIME: ['DATETIME'],
-} as Record<FieldType, Array<FieldType | LeftCalcMappingType | LinkMappingType | LeftLookupMappingType>>;
+} as Record<FieldType, AvailableRight[]>;
 
 // RIGHT
-export type RightCalcMappingType = SpecialType<'CALC_MAPPING_FOR_RIGHT', CalcType[]>;
-export type RightLookupMappingType = SpecialType<'LOOKUP_MAPPING_FOR_RIGHT', FieldType[]>;
+export type LookupTypeR2L = SpecialType<'LOOKUP_FROM_RIGHT', Array<FieldType | CalcTypeR2L>>;
 
-export const forCalc = (format: CalcType[]): RightCalcMappingType => {
+export const isSameLookupOr = (format: Array<FieldType | CalcTypeR2L>): LookupTypeR2L => {
   return {
-    type: 'CALC_MAPPING_FOR_RIGHT',
+    type: 'LOOKUP_FROM_RIGHT',
     format,
-    check: function (field: OneOf, leftField?: OneOf) {
-      return isType.CALC(field) && !!this.format?.find((e) => e === field.format);
-    },
-  };
-};
-
-export const forLookup = (format: FieldType[]): RightLookupMappingType => {
-  return {
-    type: 'LOOKUP_MAPPING_FOR_RIGHT',
-    format,
-    check: function (field: OneOf, leftField?: OneOf) {
-      if (!isLookup(field)) return false;
-      return !!this.format?.find((e) => e === field.type);
+    check: function (checkField: OneOf, selectedRightField?: OneOf) {
+      if (selectedRightField && isLookup(selectedRightField)) {
+        return isLookup(checkField) ? checkField.type === selectedRightField.type : false;
+      }
+      return !!this.format?.find((e) => {
+        if (isSpecialType(e)) {
+          return e.check(checkField, selectedRightField);
+        }
+        return e === checkField.type;
+      });
     },
   };
 };
 
 const availableRightMappingType = {
-  SINGLE_LINE_TEXT: ['SINGLE_LINE_TEXT', 'NUMBER', forCalc(['NUMBER', 'NUMBER_DIGIT']), 'LINK', 'RECORD_NUMBER'],
+  SINGLE_LINE_TEXT: [
+    isSameLookupOr(['SINGLE_LINE_TEXT', 'NUMBER', forCalc(['NUMBER', 'NUMBER_DIGIT']), 'LINK', 'RECORD_NUMBER']),
+  ],
   MULTI_LINE_TEXT: ['MULTI_LINE_TEXT'],
   RICH_TEXT: ['RICH_TEXT'],
-  NUMBER: ['NUMBER', forCalc(['NUMBER', 'NUMBER_DIGIT']), forLookup(['NUMBER']), 'RECORD_NUMBER'],
+  NUMBER: [isSameLookupOr(['NUMBER', forCalc(['NUMBER', 'NUMBER_DIGIT']), 'RECORD_NUMBER'])],
   RADIO_BUTTON: ['RADIO_BUTTON'],
   CHECK_BOX: ['CHECK_BOX'],
   MULTI_SELECT: ['MULTI_SELECT'], // TODO 带选项字段报错
@@ -129,9 +78,10 @@ const availableRightMappingType = {
   DATE: ['DATE', forCalc(['DATE'])],
   TIME: ['TIME', forCalc(['TIME'])],
   DATETIME: ['DATE', 'DATETIME', forCalc(['DATETIME']), 'CREATED_TIME', 'UPDATED_TIME'],
-  LINK: [linkMappingType],
-} as Record<FieldType, Array<FieldType | RightCalcMappingType | RightLookupMappingType | LinkMappingType>>;
+  LINK: [linkType],
+} as Record<FieldType, Array<AvailableLeft | LookupTypeR2L>>;
 
+// methods
 // undefined means all
 export function getRightAvailableMappingType(left?: OneOf | '') {
   if (left === undefined) {
@@ -148,14 +98,6 @@ export function getLeftAvailableMappingType(right?: OneOf | '') {
   return right ? availableRightMappingType[right.type] : [];
 }
 
-export function isLeftLookupMappingType(obj: SpecialType): obj is LeftLookupMappingType {
-  return obj.type === 'LOOKUP_MAPPING_FOR_LEFT';
+export function isSelectType(field: OneOf): field is SelectType {
+  return 'options' in field;
 }
-
-export function isLookup(field: OneOf): field is KintoneFormFieldProperty.Lookup {
-  return 'lookup' in field;
-}
-
-// export function isSelectType(field: OneOf): field is SelectType {
-//   return 'options' in field;
-// }
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 0017371..5522815 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,20 +1,14 @@
+import { KintoneFormFieldProperty } from '@kintone/rest-api-client';
+
 export interface KucEvent<T> {
   detail: T;
 }
 
 export type CalcType = 'NUMBER' | 'NUMBER_DIGIT' | 'DATETIME' | 'DATE' | 'TIME' | 'HOUR_MINUTE' | 'DAY_HOUR_MINUTE';
-export type LinkType = 'WEB' | 'CALL' | 'MAIL';
+export type LinkProtocolType = 'WEB' | 'CALL' | 'MAIL';
 
-type Options = {
-  [optionName: string]: {
-      label: string;
-      index: string;
-  };
-};
-
-export type SelectType = {
-  type: 'CHECK_BOX' | 'RADIO_BUTTON' | 'DROP_DOWN' | 'MULTI_SELECT';
-  code: string;
-  label: string;
-  options: Options;
-};
+export type SelectType =
+  | KintoneFormFieldProperty.CheckBox
+  | KintoneFormFieldProperty.RadioButton
+  | KintoneFormFieldProperty.DropDown
+  | KintoneFormFieldProperty.MultiSelect;