複数チェック追加

vue-project/my-kintone-plugin/src/components/basic/conditions/TableConditionValue.vue

@@ -22,23 +22,32 @@
   <table-condition-value-date-time
     v-else-if="type === 'datetime' || type === 'date'"
     :time="type === 'datetime'"
-    :value="modelValue.value"
+    :value="modelValue.value as string"
     @change="updateValue"
     :disabled="selectedAppData.loading == undefined ? false : selectedAppData.loading"
   />
+  <kuc-multi-choice
+    v-else-if="type=== 'kuc-multichoice'"
+    :value = "muiltValue"
+    :items = "multiChoiceItems"
+    :requiredIcon = "true"
+    @change="updateMuiltValue"
+    :disabled="selectedAppData.loading == undefined ? false : selectedAppData.loading"
+  ></kuc-multi-choice>
+  
 </template>
 
 <script setup lang="ts">
 import { getComponent } from '@/js/conditions';
-import { getFieldObj, search } from '@/js/helper';
+import { getFieldObj, isStringArray, search } from '@/js/helper';
 import { isType } from '@/js/kintone-rest-api-client';
-import type { CachedSelectedAppData, WhereCondition } from '@/types/model';
+import type { CachedSelectedAppData, StringValue, WhereCondition } from '@/types/model';
 import type { KucEvent } from '@/types/my-kintone';
-import type { ComboboxChangeEventDetail, TextInputEventDetail } from 'kintone-ui-component';
+import type { ComboboxChangeEventDetail, TextInputEventDetail,MultiChoiceChangeEventDetail } from 'kintone-ui-component';
-import { defineProps, defineEmits, computed, type Ref, inject, provide, ref } from 'vue';
+import { defineProps, defineEmits, computed, type Ref, inject, provide, ref, watch, watchEffect } from 'vue';
 
 const props = defineProps<{
-  modelValue: Ref<string>;
+  modelValue: Ref<StringValue>;
   selectedAppData: CachedSelectedAppData;
   whereConditions: WhereCondition[];
   id: string;
@@ -63,6 +72,24 @@ const placeholder = computed(() => {
   return '';
 });
 
+const multiChoiceItems = computed(()=>{
+  const field = getFieldObj(whereCondition.value ?.field || '', props.selectedAppData.appFields, '');
+  const items = [{
+    label:'--',
+    value:''
+  }];
+  if(field && "options" in field){
+    const opts =field.options; 
+    const muiltOpts = Object.values(opts).map(opt=>{
+      return {
+        label:opt.label,
+        value:opt.label
+      }
+    });
+    items.push(...muiltOpts);
+  }
+  return items;
+});
 
 const type = computed(() => {
   const field = getFieldObj(whereCondition.value?.field || '', props.selectedAppData.appFields, '');
@@ -72,7 +99,7 @@ const type = computed(() => {
 
 type EmitData = {
   obj?: WhereCondition;
-  value: string;
+  value: StringValue;
 };
 
 const emit = defineEmits<{
@@ -82,4 +109,18 @@ const emit = defineEmits<{
 const updateValue = (event: KucEvent<ComboboxChangeEventDetail | TextInputEventDetail>) => {
   emit('update:modelValue', { obj: whereCondition.value, value: event.detail.value || '' });
 };
+
+const muiltValue = ref(isStringArray(props.modelValue.value) ? props.modelValue.value : []);
+watchEffect(()=>{
+  const field = getFieldObj(whereCondition.value ?.field || '', props.selectedAppData.appFields, '');
+  const valueType = type.value;
+  if(field && "options" in field && valueType==='kuc-multichoice'){
+    muiltValue.value = isStringArray(props.modelValue.value) ? props.modelValue.value : [];
+  }
+});
+
+const updateMuiltValue = (event: KucEvent<MultiChoiceChangeEventDetail>) => {
+  let value = event.detail.value || [];
+  emit('update:modelValue',{ obj: whereCondition.value, value: event.detail.value ||[] } );
+};
 </script>

vue-project/my-kintone-plugin/src/js/KintoneIndexEventHandler.mobile.ts

@@ -1,4 +1,4 @@
-import type { FieldLayout, FieldsJoinMapping, JoinTable, Record, RecordForParameter, SavedData, WhereCondition } from "@/types/model";
+import type { FieldLayout, FieldsJoinMapping, JoinTable, Record, RecordForParameter, SavedData,StringValue, WhereCondition } from "@/types/model";
 import { type OneOf, isType } from "./field-types-mobile";
 import type { ConditionValue } from "./conditions";
 declare var KintoneRestAPIClient: typeof import("@kintone/rest-api-client").KintoneRestAPIClient;
@@ -24,7 +24,7 @@ export class KintoneIndexEventHandler {
     // ボタン追加
     if (document.getElementById('btn-data-fetch')) return;
     const kuc = Kucs['1.18.0'];
-    const button = new kuc.Button({
+    const button = new kuc.MobileButton({
       text: this.config.buttonName,
       type: "submit",
       id: 'btn-data-fetch',
@@ -149,22 +149,37 @@ export class KintoneIndexEventHandler {
         return condition; // 既存の条件をそのまま使用
     }
   }
-  private getConditionValue(field: OneOf, condition: ConditionValue, data: string): string {
+  /**
-    if (!data) return "";
+   * 条件比較値を変換する
+   * @param field 
+   * @param condition 
+   * @param value 
+   * @returns 
+   */
+  private getConditionValue(field: OneOf, condition: ConditionValue, value: StringValue): string {
+    if (!value) return "\"\"";
+    if(this.isStringArray(value)){
+      //マルチデータの場合
+      const items = (value as string[]).map(item => `"${item.trim()}"`);
+      return `(${items.join(",")})`;
+    }
+    const data = value as string;
     if (isType.NUMBER(field) || isType.RECORD_NUMBER(field)) {
       // For numbers, return as is
       return data;
     } else if (isType.DATE(field)) {
       // If field is DATE, format as "yyyy-MM-dd" unless it's a reserved function
-      if (/^\d{4}-\d{2}-\d{2}$/.test(data) || data.match(/^\w+\(.*\)$/)) {
+      if (/^\d{4}-\d{2}-\d{2}$/.test(data)){
         return `"${data}"`;
+      }else if(data.match(/^\w+\(.*\)$/)){
+        return data;
       }
       const date = new Date(data);
       return `"${date.toISOString().split('T')[0]}"`;
     } else if (isType.DATETIME(field) || isType.CREATED_TIME(field) || isType.UPDATED_TIME(field)) {
-      // If field is DATETIME, format as "yyyy-MM-ddTHH:mm:ssZ"
+      // 関数を使用する場合
       if (data.match(/^\w+\(.*\)$/)) {
-        return `"${data}"`;
+        return data;
       }
       const dateTime = new Date(data);
       return `"${dateTime.toISOString()}"`;
@@ -182,6 +197,12 @@ export class KintoneIndexEventHandler {
     }
   }
 
+  private isStringArray=(value:any)=>{
+    if(Array.isArray(value) && value.every(x=>typeof x ==='string')){
+      return true;
+    }
+    return false;
+  }
 
   /**
    * fieldからコードを取得する
@@ -262,7 +283,7 @@ export class KintoneIndexEventHandler {
       );
 
       // マッチ出来ない場合、LEFTの列のみ返す
-      if (!matchedRecords) {
+      if (!matchedRecords || matchedRecords.length==0) {
         joinedRecords.push(mainRecord);
       } else {
         matchedRecords.forEach((matchedRecord) => {

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

@@ -1,4 +1,4 @@
-import type { FieldLayout, FieldsJoinMapping, JoinTable, Record, RecordForParameter, SavedData, WhereCondition } from "@/types/model";
+import type { FieldLayout, FieldsJoinMapping, JoinTable, Record, RecordForParameter, SavedData, StringValue,WhereCondition } from "@/types/model";
 import { type OneOf, isType } from "./field-types";
 import type { ConditionValue } from "./conditions";
 declare var KintoneRestAPIClient: typeof import("@kintone/rest-api-client").KintoneRestAPIClient;
@@ -149,22 +149,30 @@ export class KintoneIndexEventHandler {
         return condition; // 既存の条件をそのまま使用
     }
   }
-  private getConditionValue(field: OneOf, condition: ConditionValue, data: string): string {
+  private getConditionValue(field: OneOf, condition: ConditionValue, value: StringValue): string {
-    if (!data) return "";
+    if (!value) return "\"\"";
+    if(this.isStringArray(value)){
+      //マルチデータの場合
+      const items = (value as string[]).map(item => `"${item.trim()}"`);
+      return `(${items.join(",")})`;
+    }
+    const data = value as string;
     if (isType.NUMBER(field) || isType.RECORD_NUMBER(field)) {
       // For numbers, return as is
       return data;
     } else if (isType.DATE(field)) {
       // If field is DATE, format as "yyyy-MM-dd" unless it's a reserved function
-      if (/^\d{4}-\d{2}-\d{2}$/.test(data) || data.match(/^\w+\(.*\)$/)) {
+      if (/^\d{4}-\d{2}-\d{2}$/.test(data)){
         return `"${data}"`;
+      }else if(data.match(/^\w+\(.*\)$/)){
+        return data;
       }
       const date = new Date(data);
       return `"${date.toISOString().split('T')[0]}"`;
     } else if (isType.DATETIME(field) || isType.CREATED_TIME(field) || isType.UPDATED_TIME(field)) {
       // If field is DATETIME, format as "yyyy-MM-ddTHH:mm:ssZ"
       if (data.match(/^\w+\(.*\)$/)) {
-        return `"${data}"`;
+        return data;
       }
       const dateTime = new Date(data);
       return `"${dateTime.toISOString()}"`;
@@ -182,6 +190,12 @@ export class KintoneIndexEventHandler {
     }
   }
 
+  private isStringArray=(value:any)=>{
+    if(Array.isArray(value) && value.every(x=>typeof x ==='string')){
+      return true;
+    }
+    return false;
+  }
 
   /**
    * fieldからコードを取得する
@@ -262,7 +276,7 @@ export class KintoneIndexEventHandler {
       );
 
       // マッチ出来ない場合、LEFTの列のみ返す
-      if (!matchedRecords) {
+      if (!matchedRecords || matchedRecords.length==0) {
         joinedRecords.push(mainRecord);
       } else {
         matchedRecords.forEach((matchedRecord) => {

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

@@ -30,8 +30,8 @@ export const conditionList: ConditionItem[] = [
   { value: '>', label: '> （より後）', type: (field) => dateTimeComponent[field.type] || 'input' },
   { value: 'like', label: '次のキーワードを含む', type: 'input' },
   { value: 'not like', label: '次のキーワードを含まない', type: 'input' },
-  { value: 'in', label: '次のいずれかを含む', type: 'input' },
+  { value: 'in', label: '次のいずれかを含む', type: (field)=>MultiChoiceComponent[field.type] || 'input' },
-  { value: 'not in', label: '次のいずれも含まない', type: 'input' },
+  { value: 'not in', label: '次のいずれも含まない', type: (field)=>MultiChoiceComponent[field.type] || 'input' },
 ];
 
 // search from conditionList
@@ -95,6 +95,7 @@ const component = {
   time: 'kuc-time',
   date: 'date',
   datetime: 'datetime',
+  multiChoice:'kuc-multichoice'
 };
 
 export const isDateTimeType = (field: OneOf) => {
@@ -109,6 +110,13 @@ const dateTimeComponent: Partial<Record<FieldType, ComponentType>> = {
   UPDATED_TIME: 'datetime',
 };
 
+const MultiChoiceComponent:Partial<Record<FieldType, ComponentType>> = {
+  CHECK_BOX: 'multiChoice',
+  DROP_DOWN: 'multiChoice',
+  RADIO_BUTTON: 'multiChoice',
+  MULTI_SELECT: 'multiChoice'
+};
+
 export type ComponentType = keyof typeof component;
 export const getComponent = (value: ConditionValue, fieldObj: OneOf) => {
   if (!value || !fieldObj) return;

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

@@ -213,3 +213,10 @@ export function getMeta(fields: Properties, subTableCode?: string ,allField?:boo
   }
   return meta;
 }
+
+export const isStringArray=(value:any)=>{
+  if(Array.isArray(value) && value.every(x=>typeof x ==='string')){
+    return true;
+  }
+  return false;
+}

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

@@ -14,7 +14,7 @@ export interface WhereCondition<FieldType = string> {
   id: string;
   field: FieldType;
   condition: ConditionValue;
-  data: string;
+  data: StringValue;
 }
 
 export interface JoinTable<FieldType = string> {
@@ -67,3 +67,5 @@ export type FieldLayout={
   type:string;
   code:string;
 }
+
+export type StringValue = string | string[];

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

@@ -26,6 +26,9 @@ function replaceKucTagsPlugin() {
             const keyPascal = key.split('-')
               .map(word => word.charAt(0).toUpperCase() + word.slice(1))
               .join('');
+            if(key==='multi-choice'){
+                key='multichoice';
+            }
             importScript += `import * as Kuc${keyPascal} from "kintone-ui-component/lib/${key}";`
           });
           importScript += '</script>';