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

ユーザーが手動でフィールドリストを追加または削除する必要はなくなり、プログラムが自動的にアプリのすべてのフィールドに対してリストを作成します。

Browse Source
This commit is contained in:
Mouriya
2024-06-17 03:18:52 +09:00
parent e2a625ba12
commit 0e8d1957a3
1 changed files with 82 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
frontend/src/components/right/DataMapping.vue
View File

@@ -20,41 +20,48 @@
<div class="q-mx-md">
<div class="row q-col-gutter-x-xs flex-center">
<div class="col-5">
<div class="col-6">
<div class="q-mx-xs">ソース</div>
</div>
<div class="col-1">
</div>
<div class="col-5">
<!-- <div class="col-1">
</div> -->
<div class="col-6">
<div class="q-mx-xs">目標</div>
</div>
<div class="col-1"><q-btn flat round dense icon="add" size="sm" @click="addMappingObject" />
</div>
<!-- <div class="col-1"><q-btn flat round dense icon="add" size="sm" @click="addMappingObject" /> -->
<!-- </div> -->
</div>
<div class="q-my-sm" v-for="(item, index) in mappingProps" :key="item.id">
<div class="row q-col-gutter-x-xs flex-center">
<div class="col-5">
<q-virtual-scroll style="max-height: 75vh;" :items="mappingProps" separator v-slot="{ item, index }">
<!-- <div class="q-my-sm" v-for="(item, index) in mappingProps" :key="item.id"> -->
<div class="row q-my-md q-col-gutter-x-md flex-center">
<div class="col-6">
<ConditionObject :config="config" v-model="item.from" />
</div>
<div class="col-1">
</div>
<div class="col-5">
<!-- <div class="col-1">
</div> -->
<div class="col-6">
<q-field v-model="item.vName" type="text" outlined dense>
<template v-slot:append>
<!-- <template v-slot:append>
<q-icon name="search" class="cursor-pointer"
@click="() => { mappingProps[index].to.isDialogVisible = true }" />
</template>
</template> -->
<template v-slot:control>
<div class="self-center full-width no-outline" tabindex="0"
v-if="item.to.app?.name && item.to.fields?.length > 0 && item.to.fields[0].label">
{{ `${item.to.app?.name} : ${item.to.fields[0].label}` }}
{{ `${item.to.fields[0].label}` }}
<q-tooltip>
<div>アプリ : {{ item.to.app.name }}</div>
<div>フィールドのコード : {{ item.to.fields[0].code }}</div>
<div>フィールドのタイプ : {{ item.to.fields[0].type }}</div>
<!-- <div>フィールドのタイプ : {{ item.to.fields[0] }}</div> -->
</q-tooltip>
</div>
</template>
</q-field>
</div>
<div class="col-1">
<!-- <div class="col-1">
<q-btn flat round dense icon="delete" size="sm" @click="() => deleteMappingObject(index)" />
</div>
</div> -->
</div>
<show-dialog v-model:visible="mappingProps[index].to.isDialogVisible" name="フィールド一覧"
@@ -65,7 +72,8 @@
</FieldSelect>
<AppFieldSelectBox v-else v-model:selectedField="mappingProps[index].to" />
</show-dialog>
</div>
<!-- </div> -->
</q-virtual-scroll>
</div>
</show-dialog>
</div>
@@ -73,12 +81,13 @@
<script lang="ts">
import { v4 as uuidv4 } from 'uuid';
import { computed, defineComponent, reactive, ref, watchEffect } from 'vue';
import { computed, defineComponent, watch, isRef, reactive, ref, watchEffect } from 'vue';
import ConditionObject from '../ConditionEditor/ConditionObject.vue';
import ShowDialog from '../ShowDialog.vue';
import AppFieldSelectBox from '../AppFieldSelectBox.vue';
import FieldSelect from '../FieldSelect.vue';
import IAppFields from './AppFieldSelect.vue';
import { api } from 'boot/axios';
type Props = {
props?: {
@@ -99,7 +108,6 @@ type ValueType = {
};
}
const defaultMappingProp = () => ({ id: uuidv4(), from: {}, to: { app: {}, fields: [], isDialogVisible: false } });
export default defineComponent({
name: 'DataMapping',
@@ -137,28 +145,69 @@ export default defineComponent({
},
setup(props, { emit }) {
const source = props.context.find(element => element?.props?.name === 'sources')
const sourceApp = computed(() => source?.props?.modelValue?.app);
const sourceAppId = computed(() => sourceApp.value?.id);
const closeDg = () => {
emit('update:modelValue', mappingProps
emit('update:modelValue', mappingProps.value
);
}
const closeToDg = () => {
emit('update:modelValue', mappingProps
emit('update:modelValue', mappingProps.value
);
}
const mappingProps: ValueType[] = props.modelValue
? props.modelValue
: reactive([defaultMappingProp()]);
const mappingProps = computed(() => props.modelValue ?? []);
watch(() => sourceAppId.value, async (newId, oldId) => {
if (!newId) return;
const a = await api.get('api/v1/appfields', {
params: {
app: newId
}
}).then(res => {
return Object.values(res.data.properties)
.map(f => ({ name: f.label, objectType: 'field', ...f }))
.map(f => {
return {
id: uuidv4(),
from: {},
to: {
app: sourceApp.value,
fields: [f],
isDialogVisible: false
}
}
})
})
const modelValue = props.modelValue ?? [];
const deleteMappingObject = (index: number) => mappingProps.length === 1
? mappingProps.splice(0, mappingProps.length, defaultMappingProp())
: mappingProps.splice(index, 1);
if (modelValue.length === 0 || newId !== oldId) {
emit('update:modelValue', a);
return;
}
const modelValueFieldNames = modelValue.map(item => item.to.fields[0].name);
const newFields = a.filter(field => !modelValueFieldNames.includes(field.to.fields[0].name));
const updatedModelValue = [...modelValue, ...newFields];
emit('update:modelValue', updatedModelValue);
})
console.log(mappingProps.value);
// const deleteMappingObject = (index: number) => mappingProps.length === 1
// ? mappingProps.splice(0, mappingProps.length, defaultMappingProp())
// : mappingProps.splice(index, 1);
const mappingObjectsInputDisplay = computed(() =>
mappingProps ?
mappingProps
(mappingProps.value && Array.isArray(mappingProps.value)) ?
mappingProps.value
.filter(item => item.from?.sharedText && item.to.fields?.length > 0)
.map(item => {
return `field(${item.to.app?.id},${item.to.fields[0].label}) = ${item.from.sharedText} `;
@@ -166,18 +215,14 @@ export default defineComponent({
: []
);
const source = props.context.find(element => element?.props?.name === 'sources')
const sourceApp = computed(() => source?.props?.modelValue?.app);
const sourceAppId = computed(() => sourceApp.value?.id);
const btnDisable = computed(() => props.onlySourceSelect ? !(source?.props?.modelValue?.app?.id) : false);
//集計処理方法
watchEffect(() => {
emit('update:modelValue', mappingProps);
emit('update:modelValue', mappingProps.value);
});
return {
uuidv4,
@@ -186,8 +231,8 @@ export default defineComponent({
toDgIsShow: ref(false),
closeToDg,
mappingProps,
addMappingObject: () => mappingProps.push(defaultMappingProp()),
deleteMappingObject,
// addMappingObject: () => mappingProps.push(defaultMappingProp()),
// deleteMappingObject,
mappingObjectsInputDisplay,
sourceApp,
sourceAppId,