複数チェック追加

This commit is contained in:
2025-01-31 17:09:21 +09:00
parent c585013611
commit a3595b1368
7 changed files with 121 additions and 25 deletions

View File

@@ -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 { defineProps, defineEmits, computed, type Ref, inject, provide, ref } from 'vue';
import type { ComboboxChangeEventDetail, TextInputEventDetail,MultiChoiceChangeEventDetail } from 'kintone-ui-component';
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>

View File

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

View File

@@ -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 {
if (!data) return "";
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 +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) => {

View File

@@ -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: 'not in', label: '次のいずれも含まない', type: 'input' },
{ value: 'in', label: '次のいずれかを含む', type: (field)=>MultiChoiceComponent[field.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;

View File

@@ -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;
}

View File

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

View File

@@ -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>';