diff --git a/vue-project/data-fetch-plugin/components.d.ts b/vue-project/data-fetch-plugin/components.d.ts index f901491..c5d97d9 100644 --- a/vue-project/data-fetch-plugin/components.d.ts +++ b/vue-project/data-fetch-plugin/components.d.ts @@ -7,7 +7,6 @@ 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'] diff --git a/vue-project/data-fetch-plugin/src/components/basic/PluginTableArea.vue b/vue-project/data-fetch-plugin/src/components/basic/PluginTableArea.vue index b434d2f..22c880b 100644 --- a/vue-project/data-fetch-plugin/src/components/basic/PluginTableArea.vue +++ b/vue-project/data-fetch-plugin/src/components/basic/PluginTableArea.vue @@ -24,8 +24,7 @@ - +
diff --git a/vue-project/data-fetch-plugin/src/components/basic/PluginTableConditionRow.vue b/vue-project/data-fetch-plugin/src/components/basic/PluginTableConditionRow.vue index 0b3a621..4f63e9e 100644 --- a/vue-project/data-fetch-plugin/src/components/basic/PluginTableConditionRow.vue +++ b/vue-project/data-fetch-plugin/src/components/basic/PluginTableConditionRow.vue @@ -1,8 +1,5 @@ diff --git a/vue-project/data-fetch-plugin/src/components/basic/conditions/CellInput.vue b/vue-project/data-fetch-plugin/src/components/basic/conditions/CellInput.vue deleted file mode 100644 index 32357d6..0000000 --- a/vue-project/data-fetch-plugin/src/components/basic/conditions/CellInput.vue +++ /dev/null @@ -1,22 +0,0 @@ - - - - \ No newline at end of file diff --git a/vue-project/data-fetch-plugin/src/components/basic/conditions/TableConditionValue.vue b/vue-project/data-fetch-plugin/src/components/basic/conditions/TableConditionValue.vue index 16c43f2..d7ab320 100644 --- a/vue-project/data-fetch-plugin/src/components/basic/conditions/TableConditionValue.vue +++ b/vue-project/data-fetch-plugin/src/components/basic/conditions/TableConditionValue.vue @@ -27,29 +27,32 @@ :disabled="selectedAppData.loading == undefined ? false : selectedAppData.loading" /> diff --git a/vue-project/data-fetch-plugin/src/components/basic/conditions/TableConditionValueMultiInput.vue b/vue-project/data-fetch-plugin/src/components/basic/conditions/TableConditionValueMultiInput.vue index 148b309..c1ff786 100644 --- a/vue-project/data-fetch-plugin/src/components/basic/conditions/TableConditionValueMultiInput.vue +++ b/vue-project/data-fetch-plugin/src/components/basic/conditions/TableConditionValueMultiInput.vue @@ -1,82 +1,45 @@ + - - - - \ No newline at end of file + diff --git a/vue-project/data-fetch-plugin/src/css/config.css b/vue-project/data-fetch-plugin/src/css/config.css index 1bda6ab..93500ec 100644 --- a/vue-project/data-fetch-plugin/src/css/config.css +++ b/vue-project/data-fetch-plugin/src/css/config.css @@ -62,11 +62,14 @@ border-right: 1px solid #e3e7e8; padding-top: 24px; } +.table-area { + border-bottom: none; +} .footer-row { padding: 24px 0; margin-bottom: 32px; text-align: right; - border-top: none; + /* border-top: none; */ } /* 底部按钮空间 */ @@ -141,10 +144,14 @@ .plugin-kuc-table > table > tbody > tr > td:first-child { border-left-color: #e3e7e8; } -.plugin-kuc-table > table > tbody > tr > .kuc-table-1-18-0__table__body__row__action { +.plugin-kuc-table > table > tbody > tr > td[class$="table__body__row__action"] { height: 55px; align-items: center; } +.table-option > table > tbody > tr > td[class$="table__body__row__action"] { + height: 40px; + align-items: center; +} .plugin-kuc-table:not(.condition-table) > table > tbody > tr > td:nth-child(2) { --kuc-table-header-1-width: 30px; text-align: center; diff --git a/vue-project/data-fetch-plugin/src/js/conditions.ts b/vue-project/data-fetch-plugin/src/js/conditions.ts index 1307428..73f4496 100644 --- a/vue-project/data-fetch-plugin/src/js/conditions.ts +++ b/vue-project/data-fetch-plugin/src/js/conditions.ts @@ -14,24 +14,32 @@ type ConditionItem = { }; export const conditionList: ConditionItem[] = [ - { value: '=', label: '=(等しい)', type: (field) => dateTimeComponent[field.type] || 'input' }, - { value: '!=', label: '≠ (等しくない)', type: (field) => dateTimeComponent[field.type] || 'input' }, + { value: '=', label: '=(等しい)', type: (field) => dateTimeComponentMap[field.type] || 'input' }, + { value: '!=', label: '≠ (等しくない)', type: (field) => dateTimeComponentMap[field.type] || 'input' }, { value: '<=', label: (field) => (isDateTimeType(field) ? '≦ (以前)' : '≦ (以下)'), - type: (field) => dateTimeComponent[field.type] || 'input', + type: (field) => dateTimeComponentMap[field.type] || 'input', }, - { value: '<', label: '< (より前)', type: (field) => dateTimeComponent[field.type] || 'input' }, + { value: '<', label: '< (より前)', type: (field) => dateTimeComponentMap[field.type] || 'input' }, { value: '>=', label: (field) => (isDateTimeType(field) ? '≧ (以降)' : '≧ (以上)'), - type: (field) => dateTimeComponent[field.type] || 'input', + type: (field) => dateTimeComponentMap[field.type] || 'input', }, - { value: '>', label: '> (より後)', type: (field) => dateTimeComponent[field.type] || 'input' }, + { value: '>', label: '> (より後)', type: (field) => dateTimeComponentMap[field.type] || 'input' }, { 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: 'in', + label: (field) => (isMultiInputType(field) ? '次のいずれかと等しい' : '次のいずれかを含む'), + type: (field) => multiValueComponentMap[field.type] || 'input', + }, + { + value: 'not in', + label: (field) => (isMultiInputType(field) ? '次のいずれとも等しくない' : '次のいずれも含まない'), + type: (field) => multiValueComponentMap[field.type] || 'input', + }, ]; // search from conditionList @@ -89,21 +97,35 @@ export const getAvailableCondition = (fieldCode: string, fieldsInfo: FieldsInfo, }); }; -const component = { - input: 'kuc-text', - select: 'kuc-combobox', +const dateTimeComponent = { time: 'kuc-time', date: 'date', datetime: 'datetime', +} as const; + +export const multiValueComponent = { multiChoice: 'kuc-multichoice', multiInput: 'multi-input', +} as const; + +const component = { + input: 'kuc-text', + select: 'kuc-combobox', + ...dateTimeComponent, + ...multiValueComponent, +} as const; + +export type ComponentType = keyof typeof component; + +const isDateTimeType = (field: OneOf) => { + return field.type in dateTimeComponentMap; }; -export const isDateTimeType = (field: OneOf) => { - return field.type in dateTimeComponent; +const isMultiInputType = (field: OneOf) => { + return multiValueComponentMap[field.type] === 'multiInput'; }; -const dateTimeComponent: Partial> = { +const dateTimeComponentMap: Partial> = { TIME: 'time', DATE: 'date', DATETIME: 'datetime', @@ -111,7 +133,7 @@ const dateTimeComponent: Partial> = { UPDATED_TIME: 'datetime', }; -const MultiChoiceComponent: Partial> = { +const multiValueComponentMap: Partial> = { CHECK_BOX: 'multiChoice', DROP_DOWN: 'multiChoice', RADIO_BUTTON: 'multiChoice', @@ -120,7 +142,6 @@ const MultiChoiceComponent: Partial> = { LINK: 'multiInput', }; -export type ComponentType = keyof typeof component; export const getComponent = (value: ConditionValue, fieldObj: OneOf) => { if (!value || !fieldObj) return; const condition = conditionMap[value].type;