alicorn-dev/data-fetch-plugin
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
薛家豪
2025-01-22 17:23:20 +08:00
parent 6aba3fc065
commit 270940abca
12 changed files with 192 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
vue-project/my-kintone-plugin/components.d.ts vendored
View File

@@ -17,6 +17,7 @@ declare module 'vue' {
PluginTableArea: typeof import('./src/components/basic/PluginTableArea.vue')['default']
PluginTableConditionRow: typeof import('./src/components/basic/PluginTableConditionRow.vue')['default']
PluginTableConnectRow: typeof import('./src/components/basic/PluginTableConnectRow.vue')['default']
TableCombobox: typeof import('./src/components/basic/TableCombobox.vue')['default']
TableCombobox: typeof import('./src/components/basic/condition/TableCombobox.vue')['default']
TableInput: typeof import('./src/components/basic/condition/TableInput.vue')['default']
}
}

8
vue-project/my-kintone-plugin/env.d.ts vendored
View File

@@ -1,2 +1,8 @@
/// <reference types="vite/client" />
/// <reference types="kintone" />
/// <reference types="kintone" />
declare module '*.vue' {
import { DefineComponent } from 'vue';
const component: DefineComponent<{}, {}, any>;
export default component;
}

8
vue-project/my-kintone-plugin/src/components/Config.vue
View File

@@ -18,9 +18,9 @@
<kuc-spinner :container="mainArea" ref="spinner"></kuc-spinner>
</template>
<script setup lang="ts">
import { createEmptyJoinTable, loadApps, loadAppFieldsAndLayout, EMPTY_OPTION } from '@/js/helper';
import { createEmptyJoinTable, loadApps, loadAppFieldsAndLayout, EMPTY_OPTION, getEmptyOnCondition } from '@/js/helper';
import type { CachedData, FieldsInfo, JoinTable, SavedData } from '@/types/model';
import type { KucDropdownItem, KucSpinnerEl } from '@/types/my-kintone';
import type { Spinner } from 'kintone-ui-component';
import { onMounted, watch, provide, reactive, ref, shallowRef, nextTick } from 'vue';
@@ -40,7 +40,7 @@ provide('savedData', data);
provide('cachedData', cachedData);
const mainArea = shallowRef<HTMLElement | null>(null);
const spinner = shallowRef<KucSpinnerEl | null>(null);
const spinner = shallowRef<Spinner | null>(null);
onMounted(async () => {
spinner.value?.close(); // 修复不自动挂载到节点的 bug
@@ -64,7 +64,7 @@ watch(
(newLength) => {
console.log(data.joinTables);
if (newLength === 1) {
data.joinTables[0].onConditions = [{ leftField: '', rightField: '' }];
data.joinTables[0].onConditions = [getEmptyOnCondition()];
}
},
);

10
vue-project/my-kintone-plugin/src/components/basic/PluginTableArea.vue
View File

@@ -5,7 +5,7 @@
<plugin-dropdown :disabled="false" label="取得元アプリ" :items="apps" v-model="table.app" @change="selectApp" />
</plugin-row>
<plugin-row>
<plugin-dropdown :disabled="selectedAppData.loading" label="テーブル" :items="tableOptions" v-model="table.table" />
<plugin-dropdown :disabled="selectedAppData.loading" label="テーブル" :items="tableOptions" v-model="table.table" @change="selectTable" />
</plugin-row>
<plugin-row class="flex-row" v-if="isJoinConditionShown(table)">
<plugin-label label="連結条件" />
@@ -27,10 +27,10 @@
</template>
<script setup lang="ts">
import { EMPTY_OPTION, getFieldsDropdownItems, getTableFieldsDropdownItems, loadAppFieldsAndLayout, resetTable } from '@/js/helper';
import { EMPTY_OPTION, getFieldsDropdownItems, getTableFieldsDropdownItems, loadAppFieldsAndLayout, resetConditions, resetTable } from '@/js/helper';
import { types, type Layout, type Properties } from '@/js/kintone-rest-api-client';
import type { CachedData, CachedSelectedAppData, FieldsInfo, JoinTable, SavedData } from '@/types/model';
import type { KucDropdownItem, KucEvent } from '@/types/my-kintone';
import type { KucEvent } from '@/types/my-kintone';
import { computed, inject, onMounted, provide, reactive, ref, watch } from 'vue';
const savedData = inject<SavedData>('savedData') as SavedData;
@@ -57,6 +57,10 @@ const selectApp = async (e: KucEvent) => {
loading.value = false;
};
const selectTable = (e: KucEvent) => {
resetConditions(props.table);
};
watch(
() => !props.table.app || loading.value,
(val) => {

107
vue-project/my-kintone-plugin/src/components/basic/PluginTableConditionRow.vue
View File

@@ -1,12 +1,13 @@
<template>
<kuc-table :class-name.camel="['plugin-kuc-table']" :columns="columns" :data="modelValue" @change="changeRow"/>
<kuc-table :class-name.camel="['plugin-kuc-table']" :columns="columns" :data="modelValue" />
</template>
<script setup lang="ts">
import type { KucDropdownItem } from '@/types/my-kintone';
import type { CachedData, CachedSelectedAppData, SavedData, WhereCondition } from '@/types/model';
import { defineProps, defineEmits, inject } from 'vue';
import { Combobox } from 'kintone-ui-component/lib/combobox';
import { defineProps, defineEmits, inject, computed, ref, reactive, render, h, watch, onMounted } from 'vue';
import TableCombobox from './condition/TableCombobox.vue';
import { getEmptyWhereCondition, getFieldsDropdownItems } from '@/js/helper';
import { conditionList, getComponent, type ConditionValue } from '@/js/conditions';
const props = defineProps<{
modelValue: WhereCondition[];
@@ -15,70 +16,66 @@ const props = defineProps<{
const savedData = inject<SavedData>('savedData') as SavedData;
const cachedData = inject<CachedData>('cachedData') as CachedData;
const selectedAppData = inject<CachedSelectedAppData>('selectedAppData') as CachedSelectedAppData;
const renderDropdown = (cellData: string) => {
const dropdown = new Combobox({
items: [
{ label: 'John Brown', value: 'john' },
{ label: 'Steven Gerard', value: 'steven' },
],
value: cellData,
});
return dropdown;
};
const renderCondition = (cellData: string) => {
const dropdown = new Combobox({
items: [
{ label: 'John Brown', value: 'john' },
{ label: 'Steven Gerard', value: 'steven' },
],
value: cellData,
});
return dropdown;
};
const renderDynamicData = (cellData: string) => {
const dropdown = new Combobox({
items: [
{ label: 'John Brown', value: 'john' },
{ label: 'Steven Gerard', value: 'steven' },
],
value: cellData,
});
return dropdown;
};
const table = computed(() => selectedAppData.table.table);
const columns = [
{
title: '取得元アプリのフィールド',
field: 'field',
render: renderDropdown,
render: (cellData: string, rowData: any, rowIndex: number) => {
const container = document.createElement('div');
const vnode = h(TableCombobox, {
items: getFieldsDropdownItems(selectedAppData.appFields, table.value),
modelValue: '',
selectedAppData,
'onUpdate:modelValue': (newValue: string) => {
const res = getEmptyWhereCondition();
res.field = newValue;
props.modelValue[rowIndex] = res;
},
});
render(vnode, container);
return container;
},
},
{
title: '',
field: 'condition',
render: renderCondition,
render: (cellData: string, rowData: any, rowIndex: number) => {
const container = document.createElement('div');
const vnode = h(TableCombobox, {
items: conditionList,
modelValue: '',
selectedAppData,
'onUpdate:modelValue': (newValue: string) => {
const field = props.modelValue[rowIndex].field;
const res = getEmptyWhereCondition();
res.field = field;
res.condition = newValue as ConditionValue;
props.modelValue[rowIndex] = res;
},
});
render(vnode, container);
return container;
},
},
{
title: '',
field: 'data',
render: renderDynamicData,
render: (cellData: string, rowData: any, rowIndex: number) => {
const vueComponent = getComponent(props.modelValue[rowIndex].condition);
if (!vueComponent) return cellData;
const container = document.createElement('div');
const vnode = h(vueComponent, {
modelValue: '',
selectedAppData,
'onUpdate:modelValue': (newValue: string) => {
props.modelValue[rowIndex].data = newValue;
},
});
render(vnode, container);
return container;
},
},
];
const leftFields = [] as KucDropdownItem[];
const rightFields = [] as KucDropdownItem[];
const emit = defineEmits<{
(e: 'update:modelValue', value: WhereCondition[]): void;
}>();
const changeRow = (item: WhereCondition, key: keyof WhereCondition, value: string) => {
};
const changeField = (item: WhereCondition, key: keyof WhereCondition, value: string) => {
item[key] = value;
emit('update:modelValue', props.modelValue);
};
</script>

20
vue-project/my-kintone-plugin/src/components/basic/PluginTableConnectRow.vue
View File

@@ -1,21 +1,18 @@
<template>
<kuc-table :class-name.camel="['plugin-kuc-table']" :columns="columns" :data="modelValue" @change="changeRow" />
<kuc-table :class-name.camel="['plugin-kuc-table']" :columns="columns" :data="modelValue" />
</template>
<script setup lang="ts">
import type { KucDropdownItem } from '@/types/my-kintone';
import type { CachedData, CachedSelectedAppData, SavedData, FieldsJoinMapping, FieldsInfo } from '@/types/model';
import { defineProps, defineEmits, inject, computed, ref, reactive, render, h, watch, onMounted } from 'vue';
import { Combobox } from 'kintone-ui-component/lib/combobox';
import { getFieldsDropdownItems } from '@/js/helper';
import TableCombobox from './TableCombobox.vue';
import TableCombobox from './condition/TableCombobox.vue';
const props = defineProps<{
connector: string;
modelValue: FieldsJoinMapping[];
}>();
const savedData = inject<SavedData>('savedData') as SavedData;
const cachedData = inject<CachedData>('cachedData') as CachedData;
const selectedAppData = inject<CachedSelectedAppData>('selectedAppData') as CachedSelectedAppData;
const table = computed(() => selectedAppData.table.table);
@@ -51,7 +48,7 @@ const columns = reactive([
render: (cellData: string, rowData: any, rowIndex: number) => {
const container = document.createElement('div');
const vnode = h(TableCombobox, {
items: getFieldsDropdownItems(cachedData.currentAppFields, table.value),
items: getFieldsDropdownItems(cachedData.currentAppFields, undefined),
modelValue: '',
selectedAppData,
'onUpdate:modelValue': (newValue: string) => {
@@ -63,15 +60,4 @@ const columns = reactive([
},
},
]);
const emit = defineEmits<{
(e: 'update:modelValue', value: FieldsJoinMapping[]): void;
}>();
const changeRow = (item: FieldsJoinMapping, key: keyof FieldsJoinMapping, value: string) => {};
const changeField = (item: FieldsJoinMapping, key: keyof FieldsJoinMapping, value: string) => {
item[key] = value;
emit('update:modelValue', props.modelValue);
};
</script>

0
vue-project/my-kintone-plugin/src/components/basic/TableCombobox.vue → vue-project/my-kintone-plugin/src/components/basic/condition/TableCombobox.vue
View File

22
vue-project/my-kintone-plugin/src/components/basic/condition/TableInput.vue Normal file
View File

@@ -0,0 +1,22 @@
<template>
<kuc-text :value="modelValue" @change="updateValue" :disabled="selectedAppData.loading == undefined ? false : selectedAppData.loading" />
</template>
<script setup lang="ts">
import type { CachedData, CachedSelectedAppData, SavedData } from '@/types/model';
import type { KucEvent } from '@/types/my-kintone';
import { defineProps, defineEmits, ref, inject, watch, onMounted } from 'vue';
const props = defineProps<{
modelValue: string;
selectedAppData: CachedSelectedAppData;
}>();
const emit = defineEmits<{
(e: 'update:modelValue', value: string): void;
}>();
const updateValue = (event: KucEvent) => {
emit('update:modelValue', event.detail.value);
};
</script>

38
vue-project/my-kintone-plugin/src/js/conditions.ts Normal file
View File

@@ -0,0 +1,38 @@
import TableCombobox from '@/components/basic/condition/TableCombobox.vue';
import TableInput from '@/components/basic/condition/TableInput.vue';
const component = {
'': undefined,
input: TableInput,
select: TableCombobox,
};
export type ComponentType = keyof typeof component;
export type ConditionValue = '' | 'eq' | 'ne';
type ConditionItem = {
value: ConditionValue;
label: string;
type: ComponentType;
func: (a: string, b: string) => boolean;
};
export const conditionList: ConditionItem[] = [
{ value: '', label: '--------', type: '', func: (a: string, b: string) => true },
{ value: 'eq', label: '=（等しい）', type: 'input', func: (a: string, b: string) => a === b },
{ value: 'ne', label: '≠ （等しくない）', type: 'input', func: (a: string, b: string) => a !== b },
];
// type ConditionItem = (typeof conditionList)[number];
export const conditionMap: Record<ConditionValue, ConditionItem> = conditionList.reduce(
(map, item) => {
map[item.value] = item;
return map;
},
{} as Record<ConditionValue, ConditionItem>,
);
export const getComponent = (value: ConditionValue) => {
return component[conditionMap[value].type];
};

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

@@ -1,38 +1,37 @@
import type { FieldsInfo, JoinTable } from '@/types/model';
import type { KucDropdownItem } from '@/types/my-kintone';
import type { FieldsInfo, JoinTable, WhereCondition } from '@/types/model';
import { client, isType, type OneOf, type App, type Layout } from './kintone-rest-api-client';
import type { DropdownItem } from 'kintone-ui-component';
export const EMPTY_OPTION = {
value: '',
label: '--------',
} as DropdownItem;
export const getEmptyWhereCondition = () => ({ field: '', condition: '', data: '' } as WhereCondition);
export const getEmptyOnCondition = () => ({ leftField: '', rightField: '' });
export const getEmptyFieldsMapping = () => ({ leftField: '', rightField: '' });
export const condition = {
unset: '',
eq: '=',
};
export function createEmptyJoinTable(id = Number(new Date())) {
return {
id,
app: '',
table: '',
onConditions: [{ leftField: '', rightField: '' }],
fieldsMapping: [{ leftField: '', rightField: '' }],
whereConditions: [{ field: '', condition: condition.unset, data: '' }],
} as JoinTable;
return resetTable({ id, app: '' } as JoinTable);
}
export function resetTable(table: JoinTable) {
table.table = '';
table.whereConditions = [{ field: '', condition: condition.unset, data: '' }];
table.onConditions = [{ leftField: '', rightField: '' }];
table.fieldsMapping = [{ leftField: '', rightField: '' }];
return resetConditions(table);
}
export const EMPTY_OPTION = {
value: "",
label: "--------",
} as KucDropdownItem;
export function resetConditions(table: JoinTable) {
table.onConditions = [getEmptyOnCondition()];
table.fieldsMapping = [getEmptyFieldsMapping()];
table.whereConditions = [getEmptyWhereCondition()];
return table;
}
const LIMIT = 100; // 每次请求的最大应用数量
export const loadApps = async (offset = 0, _apps: KucDropdownItem[] = []): Promise<KucDropdownItem[]> => {
export const loadApps = async (offset = 0, _apps: DropdownItem[] = []): Promise<DropdownItem[]> => {
const { apps } = await client.app.getApps({ limit: LIMIT, offset });
const allApps: KucDropdownItem[] = [
const allApps: DropdownItem[] = [
..._apps,
...apps.map((app: App) => ({ value: app.appId, label: app.name + '（ID: ' + app.appId + '）' })),
];
@@ -53,37 +52,47 @@ export const loadAppFieldsAndLayout = async (appId: string | number = kintone.ap
export const getFieldsDropdownItems = (
{ fields, layout }: FieldsInfo,
subTable?: string,
subTableCode?: string,
filterType?: OneOf['type'],
) => {
// get used field codes
let fieldOrder: string[];
if (subTable) {
const subTableFields = layout.find((each) => each.type === 'SUBTABLE' && each.code === subTable) as any;
let fieldMap = fields;
if (subTableCode) {
const subTableFields = layout.find((each) => each.type === 'SUBTABLE' && each.code === subTableCode) as any;
fieldOrder = subTableFields?.fields.map((field: { code: string }) => field.code) || [];
fieldMap = fieldMap[subTableCode].fields;
} else {
fieldOrder = extractNoSubTableFields(layout);
}
return fieldOrder.reduce((acc, fieldCode) => {
const field = fields[fieldCode];
if (filterType && !isType[filterType](field)) return acc;
acc.push({
value: fieldCode,
label: field.label + '（FC: ' + fieldCode + '）',
});
return acc;
}, [EMPTY_OPTION]);
// create labels
return fieldOrder.reduce(
(acc, fieldCode) => {
const field = fieldMap[fieldCode];
if (!fieldCode || filterType && !isType[filterType](field)) return acc;
acc.push({
value: fieldCode,
label: field.label + '（FC: ' + fieldCode + '）',
});
return acc;
},
[EMPTY_OPTION],
);
};
export const getTableFieldsDropdownItems = ({ fields }: FieldsInfo, filterType?: OneOf['type']) => {
return Object.keys(fields).reduce((acc, fieldCode) => {
const field = fields[fieldCode];
if (filterType && !isType[filterType](field)) return acc;
acc.push({
value: fieldCode,
label: field.label + '（FC: ' + fieldCode + '）',
});
return acc;
}, [EMPTY_OPTION]);
return Object.keys(fields).reduce(
(acc, fieldCode) => {
const field = fields[fieldCode];
if (filterType && !isType[filterType](field)) return acc;
acc.push({
value: fieldCode,
label: field.label + '（FC: ' + fieldCode + '）',
});
return acc;
},
[EMPTY_OPTION],
);
};
const extractNoSubTableFields = (layout: Layout) => {

9
vue-project/my-kintone-plugin/src/types/model.d.ts vendored
View File

@@ -1,7 +1,6 @@
import { Layout } from './../js/kintone-rest-api-client';
import type { ConditionValue } from '@/js/conditions';
import type { Layout } from '@/js/kintone-rest-api-client';
import { condition } from './helper';
import type { KucDropdownItem } from './my-kintone';
import type { DropdownItem } from 'kintone-ui-component';
export interface FieldsJoinMapping {
leftField: string;
@@ -10,7 +9,7 @@ export interface FieldsJoinMapping {
export interface WhereCondition {
field: string;
condition: (typeof condition)[keyof typeof condition];
condition: ConditionValue;
data: string;
}
@@ -35,7 +34,7 @@ export interface FieldsInfo {
}
export interface CachedData {
apps: KucDropdownItem[],
apps: DropdownItem[],
currentAppFields: FieldsInfo,
}

12
vue-project/my-kintone-plugin/src/types/my-kintone.d.ts vendored
View File

@@ -1,15 +1,3 @@
// 组件相关
export interface KucDropdownItem {
label: string;
value: string;
disabled?: boolean;
}
export interface KucSpinnerEl {
open: function;
close: function;
}
export interface KucEvent {
detail: {
value: string;