From bf4a55dd2618027e3d95ce9b7e23ce911e21bf77 Mon Sep 17 00:00:00 2001 From: xue jiahao Date: Sun, 26 Jan 2025 21:48:54 +0800 Subject: [PATCH] fix bug --- vue-project/my-kintone-plugin/components.d.ts | 1 + .../basic/PluginTableConditionRow.vue | 4 +- .../basic/conditions/TableCondition.vue | 14 ++- .../basic/conditions/TableConditionValue.vue | 28 +++-- .../TableConditionValueDateTime.vue | 113 ++++++++++++++++++ .../my-kintone-plugin/src/js/conditions.ts | 82 +++++++++---- 6 files changed, 197 insertions(+), 45 deletions(-) create mode 100644 vue-project/my-kintone-plugin/src/components/basic/conditions/TableConditionValueDateTime.vue diff --git a/vue-project/my-kintone-plugin/components.d.ts b/vue-project/my-kintone-plugin/components.d.ts index 809b8ed..ac2c390 100644 --- a/vue-project/my-kintone-plugin/components.d.ts +++ b/vue-project/my-kintone-plugin/components.d.ts @@ -20,5 +20,6 @@ declare module 'vue' { TableCombobox: typeof import('./src/components/basic/TableCombobox.vue')['default'] 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'] } } 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 0d68184..be1bea7 100644 --- a/vue-project/my-kintone-plugin/src/components/basic/PluginTableConditionRow.vue +++ b/vue-project/my-kintone-plugin/src/components/basic/PluginTableConditionRow.vue @@ -59,7 +59,7 @@ const columns = reactive([ render: (cellData: string, rowData: WhereCondition) => { const container = document.createElement('div'); const vnode = h(TableCondition, { - modelValue: (search(props.modelValue, rowData.id) as WhereCondition)?.condition || '', + modelValue: computed(() => (search(props.modelValue, rowData.id) as WhereCondition)?.condition || ''), selectedAppData, id: rowData.id, whereConditions: props.modelValue, @@ -80,7 +80,7 @@ const columns = reactive([ render: (cellData: string, rowData: WhereCondition) => { const container = document.createElement('div'); const vnode = h(TableConditionValue, { - modelValue: (search(props.modelValue, rowData.id) as WhereCondition)?.data || '', + modelValue: computed(() => (search(props.modelValue, rowData.id) as WhereCondition)?.data || ''), selectedAppData, id: rowData.id, whereConditions: props.modelValue, 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 465de77..a89f436 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 @@ -14,10 +14,10 @@ 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, watch, ref } from 'vue'; +import { defineProps, defineEmits, computed, watch, ref, type Ref } from 'vue'; const props = defineProps<{ - modelValue: string; + modelValue: Ref; selectedAppData: CachedSelectedAppData; whereConditions: WhereCondition[]; id: string; @@ -33,14 +33,16 @@ const items = computed(() => ), ); -const value = ref(props.modelValue); +const value = ref(props.modelValue.value); watch( () => items, () => { - const option = items.value?.[0] || { value: '' }; - value.value = option.value; - updateValue({ detail: option }); + if (whereCondition.value?.condition === '') { + const option = items.value?.[0] || { value: '' }; + value.value = option.value; + updateValue({ detail: option }); + } }, { deep: true }, ); 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 21ecb83..15bc6f3 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,28 +1,29 @@ diff --git a/vue-project/my-kintone-plugin/src/js/conditions.ts b/vue-project/my-kintone-plugin/src/js/conditions.ts index 65f17d5..210bae2 100644 --- a/vue-project/my-kintone-plugin/src/js/conditions.ts +++ b/vue-project/my-kintone-plugin/src/js/conditions.ts @@ -5,35 +5,35 @@ import { getFieldObj } from './helper'; // conditionValue = '' | 'eq' | 'ne' // conditionItem = { value: 'eq', label: '=（等しい）', type: 'input', func: (a: string, b: string) => a === b } // = conditionMap[conditionValue] -export type ConditionValue = ""| "=" -| "!=" -| ">=" -| "<=" -| "<" -| ">" -| "like" -| "not like" -| "in" -| "not in"; +export type ConditionValue = '' | '=' | '!=' | '>=' | '<=' | '<' | '>' | 'like' | 'not like' | 'in' | 'not in'; type ConditionItem = { value: ConditionValue; label: string | ((field: OneOf) => string); - type: ComponentType; // | ((field: OneOf) => ComponentType); + type: ComponentType | ((field: OneOf) => ComponentType); }; export const conditionList: ConditionItem[] = [ - { value: '=', label: '=（等しい）', type: 'input' }, - { value: '!=', label: '≠ （等しくない）', type: 'input' }, - { value: '<=', label: (field) => isDateTimeType(field) ? '≦ （以前）' : '≦ （以下）', type: 'input' }, + { value: '=', label: '=（等しい）', type: (field) => dateTimeComponent[field.type] || 'input' }, + { value: '!=', label: '≠ （等しくない）', type: (field) => dateTimeComponent[field.type] || 'input' }, + { + value: '<=', + label: (field) => (isDateTimeType(field) ? '≦ （以前）' : '≦ （以下）'), + type: (field) => dateTimeComponent[field.type] || 'input', + }, { value: '<', label: '< （より前）', type: 'input' }, + { + value: '>=', + label: (field) => (isDateTimeType(field) ? '≧ （以降）' : '≧ （以上）'), + type: (field) => dateTimeComponent[field.type] || 'input', + }, { value: '>', label: '> （より後）', type: 'input' }, - { value: '>=', label: (field) => isDateTimeType(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' }, ]; + // search from conditionList // conditionItem = conditionMap[conditionValue] export const conditionMap: Record = conditionList.reduce( @@ -45,7 +45,7 @@ export const conditionMap: Record = conditionList ); type FieldConditions = Partial>; -const textCondition: ConditionValue[] = ['=', '!=', 'in', 'like','not like']; +const textCondition: ConditionValue[] = ['=', '!=', 'in', 'like', 'not like']; const numberCondition: ConditionValue[] = ['=', '!=', '<=', '>=']; const timeCondition: ConditionValue[] = ['=', '!=', '<=', '>=', '<', '>']; const containsCondition: ConditionValue[] = ['in', 'not in']; @@ -83,7 +83,7 @@ export const getAvailableCondition = (fieldCode: string, fieldsInfo: FieldsInfo, if (!fieldObj) return; const conditions = fieldConditions[fieldObj.type] || textCondition; // TODO a fallback here return conditions.map((condition) => { - const res = {...conditionMap[condition]} + const res = { ...conditionMap[condition] }; res.label = typeof res.label === 'function' ? res.label(fieldObj) : res.label; return res; }); @@ -99,19 +99,53 @@ const component = { export const isDateTimeType = (field: OneOf) => { return field.type in dateTimeComponent; -} +}; const dateTimeComponent: Partial> = { TIME: 'time', - DATE: 'date', - DATETIME: 'datetime', - CREATED_TIME: 'datetime', - UPDATED_TIME: 'datetime', -} + // DATE: 'date', + // DATETIME: 'datetime', + // CREATED_TIME: 'datetime', + // UPDATED_TIME: 'datetime', +}; export type ComponentType = keyof typeof component; export const getComponent = (value: ConditionValue, fieldObj: OneOf) => { - if (!value) return; + if (!value || !fieldObj) return; const condition = conditionMap[value].type; return component[typeof condition === 'function' ? condition(fieldObj) : condition]; }; + +type DateFuncItem = { + value: string; + label: string | ((isTime: boolean) => string); + condition?: 'datetime' | 'date'; + key: DateFuncKey; +}; + +export type DateFuncKey = '' | 'FROM_TODAY' | 'NOW' | 'TODAY' | 'THIS_WEEK' | 'THIS_MONTH'; + +export const dateFuncList: DateFuncItem[] = [ + { key: '', value: '%s', label: (isTime) => (isTime ? '日時を指定' : '日付を指定') }, + { key: 'FROM_TODAY', value: 'FROM_TODAY(%s)', label: '今日から' }, + { key: 'NOW', value: 'NOW()', label: '当時刻', condition: 'datetime' }, + { key: 'TODAY', value: 'TODAY()', label: '今日' }, + { key: 'THIS_WEEK', value: 'THIS_WEEK(%s)', label: '今週' }, + { key: 'THIS_MONTH', value: 'THIS_MONTH(%s)', label: '今月' }, +]; + +// search from dateFuncList +// DateFuncItem = dateFuncMap[DateFuncKey] +export const dateFuncMap: Record = dateFuncList.reduce( + (map, item) => { + map[item.key] = item; + return map; + }, + {} as Record, +); + +export const getDateFuncList = (hasTime: boolean) => { + return dateFuncList.filter((item) => { + return item.condition ? item.condition === (hasTime ? 'datetime' : 'date') : true; + }); +};