update

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,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) => {