diff --git a/vue-project/my-kintone-plugin/components.d.ts b/vue-project/my-kintone-plugin/components.d.ts index ac2c390..f901491 100644 --- a/vue-project/my-kintone-plugin/components.d.ts +++ b/vue-project/my-kintone-plugin/components.d.ts @@ -7,7 +7,9 @@ export {} /* prettier-ignore */ declare module 'vue' { export interface GlobalComponents { + CellInput: typeof import('./src/components/basic/conditions/CellInput.vue')['default'] Config: typeof import('./src/components/Config.vue')['default'] + ErrorDialog: typeof import('./src/components/basic/ErrorDialog.vue')['default'] PluginDropdown: typeof import('./src/components/basic/PluginDropdown.vue')['default'] PluginInput: typeof import('./src/components/basic/PluginInput.vue')['default'] PluginLabel: typeof import('./src/components/basic/PluginLabel.vue')['default'] @@ -21,5 +23,6 @@ declare module 'vue' { TableCondition: typeof import('./src/components/basic/conditions/TableCondition.vue')['default'] TableConditionValue: typeof import('./src/components/basic/conditions/TableConditionValue.vue')['default'] TableConditionValueDateTime: typeof import('./src/components/basic/conditions/TableConditionValueDateTime.vue')['default'] + TableConditionValueMultiInput: typeof import('./src/components/basic/conditions/TableConditionValueMultiInput.vue')['default'] } } diff --git a/vue-project/my-kintone-plugin/src/components/Config.vue b/vue-project/my-kintone-plugin/src/components/Config.vue index d3cbd62..8519e6c 100644 --- a/vue-project/my-kintone-plugin/src/components/Config.vue +++ b/vue-project/my-kintone-plugin/src/components/Config.vue @@ -3,7 +3,7 @@

{{ $t('config.desc') }}

- +
@@ -16,6 +16,7 @@ + + \ No newline at end of file diff --git a/vue-project/my-kintone-plugin/src/components/basic/PluginTableArea.vue b/vue-project/my-kintone-plugin/src/components/basic/PluginTableArea.vue index a577d1f..b434d2f 100644 --- a/vue-project/my-kintone-plugin/src/components/basic/PluginTableArea.vue +++ b/vue-project/my-kintone-plugin/src/components/basic/PluginTableArea.vue @@ -24,7 +24,8 @@ - +
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 2cbe201..8669102 100644 --- a/vue-project/my-kintone-plugin/src/components/basic/PluginTableConditionRow.vue +++ b/vue-project/my-kintone-plugin/src/components/basic/PluginTableConditionRow.vue @@ -1,10 +1,13 @@ + \ No newline at end of file diff --git a/vue-project/my-kintone-plugin/src/components/basic/conditions/TableConditionValue.vue b/vue-project/my-kintone-plugin/src/components/basic/conditions/TableConditionValue.vue index c1fe3a4..5cec981 100644 --- a/vue-project/my-kintone-plugin/src/components/basic/conditions/TableConditionValue.vue +++ b/vue-project/my-kintone-plugin/src/components/basic/conditions/TableConditionValue.vue @@ -1,6 +1,6 @@ @@ -43,7 +49,7 @@ import { getFieldObj, isStringArray, search } from '@/js/helper'; import { isType } from '@/js/kintone-rest-api-client'; import type { CachedSelectedAppData, StringValue, WhereCondition } from '@/types/model'; import type { KucEvent } from '@/types/my-kintone'; -import type { ComboboxChangeEventDetail, TextInputEventDetail,MultiChoiceChangeEventDetail } from 'kintone-ui-component'; +import type { ComboboxChangeEventDetail, TextInputEventDetail,MultiChoiceChangeEventDetail, TableChangeEventDetail } from 'kintone-ui-component'; import { defineProps, defineEmits, computed, type Ref, inject, provide, ref, watch, watchEffect } from 'vue'; const props = defineProps<{ @@ -91,10 +97,10 @@ const multiChoiceItems = computed(()=>{ return items; }); -const type = computed(() => { +const valueType = computed(() => { const field = getFieldObj(whereCondition.value?.field || '', props.selectedAppData.appFields, ''); - const type = getComponent(whereCondition.value?.condition || '', field) - return type; + const vtype = getComponent(whereCondition.value?.condition || '', field) + return vtype; }); type EmitData = { @@ -111,11 +117,24 @@ const updateValue = (event: KucEventprops.modelValue, + ()=>{ + const field = getFieldObj(whereCondition.value ?.field || '', props.selectedAppData.appFields, ''); + const vType = valueType.value; + const moduleValue = props.modelValue.value; + if(field && "options" in field && (vType==='kuc-multichoice' )){ + muiltValue.value = isStringArray(moduleValue) ? moduleValue : []; + } +}); + +const muiltInput = ref(isStringArray(props.modelValue.value) ? props.modelValue.value as string[] : ["",""]); 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 vType = valueType.value; + const moduleValue = props.modelValue.value; + if( vType==='multi-input'){ + muiltInput.value = isStringArray(moduleValue) ? moduleValue as string[] : ["",""]; } }); @@ -123,4 +142,10 @@ const updateMuiltValue = (event: KucEvent) => { let value = event.detail.value || []; emit('update:modelValue',{ obj: whereCondition.value, value: event.detail.value ||[] } ); }; + +const updateTableValue =(event: KucEvent)=>{ + let value = event.detail || ["",""]; + muiltInput.value = value; + emit('update:modelValue',{ obj: whereCondition.value, value: value } ); +} diff --git a/vue-project/my-kintone-plugin/src/components/basic/conditions/TableConditionValueMultiInput.vue b/vue-project/my-kintone-plugin/src/components/basic/conditions/TableConditionValueMultiInput.vue new file mode 100644 index 0000000..4dd0e4b --- /dev/null +++ b/vue-project/my-kintone-plugin/src/components/basic/conditions/TableConditionValueMultiInput.vue @@ -0,0 +1,85 @@ + + + + + \ No newline at end of file diff --git a/vue-project/my-kintone-plugin/src/css/config.css b/vue-project/my-kintone-plugin/src/css/config.css index aefc51b..95bc622 100644 --- a/vue-project/my-kintone-plugin/src/css/config.css +++ b/vue-project/my-kintone-plugin/src/css/config.css @@ -238,4 +238,12 @@ } .from-today-input.input.error { margin-bottom: 20px; +} +.table-option td { + padding: 1px; + margin: 0; + border: none; +} +.dialog-action-bar{ + text-align: right; } \ No newline at end of file diff --git a/vue-project/my-kintone-plugin/src/js/conditions.ts b/vue-project/my-kintone-plugin/src/js/conditions.ts index 9a0506d..b418ca6 100644 --- a/vue-project/my-kintone-plugin/src/js/conditions.ts +++ b/vue-project/my-kintone-plugin/src/js/conditions.ts @@ -31,7 +31,7 @@ export const conditionList: ConditionItem[] = [ { value: 'like', label: '次のキーワードを含む', type: 'input' }, { value: 'not like', label: '次のキーワードを含まない', type: 'input' }, { value: 'in', label: '次のいずれかを含む', type: (field)=>MultiChoiceComponent[field.type] || 'input' }, - { value: 'not in', label: '次のいずれも含まない', type: (field)=>MultiChoiceComponent[field.type] || 'input' }, + { value: 'not in', label: '次のいずれも含まない', type: (field)=>MultiChoiceComponent[field.type] || 'input' }, ]; // search from conditionList @@ -95,7 +95,8 @@ const component = { time: 'kuc-time', date: 'date', datetime: 'datetime', - multiChoice:'kuc-multichoice' + multiChoice:'kuc-multichoice', + multiInput :"multi-input" }; export const isDateTimeType = (field: OneOf) => { @@ -114,9 +115,12 @@ const MultiChoiceComponent:Partial> = { CHECK_BOX: 'multiChoice', DROP_DOWN: 'multiChoice', RADIO_BUTTON: 'multiChoice', - MULTI_SELECT: 'multiChoice' + MULTI_SELECT: 'multiChoice', + SINGLE_LINE_TEXT : 'multiInput', + LINK : 'multiInput' }; + export type ComponentType = keyof typeof component; export const getComponent = (value: ConditionValue, fieldObj: OneOf) => { if (!value || !fieldObj) return;