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

Merge branch 'feature/data-update' into dev

Browse Source
This commit is contained in:
xiaozhe.ma
2024-07-11 23:22:50 +09:00
parent c87cff4181 14287b6948
commit a85a3683f2
8 changed files with 393 additions and 313 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/src/components/ConditionEditor/ConditionObject.vue
View File

@@ -1,6 +1,6 @@
<template>
<q-field labelColor="primary" class="condition-object" :clearable="isSelected" stack-label :dense="true"
:outlined="true">
<q-field labelColor="primary" class="condition-object" dense outlined :label="label" :disable="disabled"
:clearable="isSelected">
<template v-slot:control>
<!-- <q-chip color="primary" text-color="white" v-if="isSelected && selectedObject.objectType==='field'" :dense="true" class="selected-obj">
{{ selectedObject.name }}
@@ -44,6 +44,14 @@ export default defineComponent({
// ConditionObjects
},
props: {
disabled: {
type: Boolean,
default: false
},
label: {
type: String,
default: undefined
},
config: {
type: Object,
default: () => {

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

@@ -16,31 +16,37 @@
</q-card>
</template>
</q-field>
<show-dialog v-model:visible="dgIsShow" name="データマッピング" @close="closeDg" min-width="50vw" min-height="60vh">
<show-dialog v-model:visible="dgIsShow" name="データマッピング" @close="closeDg" min-width="55vw" min-height="60vh">
<div class="q-mx-md">
<div class="q-mx-none">
<div class="row q-col-gutter-x-xs flex-center">
<div class="col-6">
<div class="col-5">
<div class="q-mx-xs">ソース</div>
</div>
<!-- <div class="col-1">
</div> -->
<div class="col-6">
<div class="q-mx-xs">目標</div>
<div class="col-5">
<div class="row justify-between q-mr-md">
<div class="">目標</div>
<q-btn outline color="primary" size="xs" label="最新のフィールドを取得する"
@click="() => updateFields(sourceAppId!)" />
</div>
</div>
<div class="col-1 q-pl-sm">
キー
</div>
<!-- <div class="col-1"><q-btn flat round dense icon="add" size="sm" @click="addMappingObject" /> -->
<!-- </div> -->
</div>
<q-virtual-scroll style="max-height: 75vh;" :items="mappingProps" separator v-slot="{ item, index }">
<q-virtual-scroll style="max-height: 65vh;" :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 class="col-5">
<ConditionObject :config="config" v-model="item.from" :disabled="item.disabled"
:label="item.disabled ? '「Lookup」によってロックされる' : undefined" />
</div>
<!-- <div class="col-1">
</div> -->
<div class="col-6">
<q-field v-model="item.vName" type="text" outlined dense>
<div class="col-5">
<q-field v-model="item.vName" type="text" outlined dense :disable="item.disabled">
<!-- <template v-slot:append>
<q-icon name="search" class="cursor-pointer"
@click="() => { mappingProps[index].to.isDialogVisible = true }" />
@@ -54,14 +60,16 @@
<div>フィールドのコード : {{ item.to.fields[0].code }}</div>
<div>フィールドのタイプ : {{ item.to.fields[0].type }}</div>
<div>フィールド : {{ item.to.fields[0] }}</div>
<div>フィールド : {{ item.isKey }}</div>
</q-tooltip>
</div>
</template>
</q-field>
</div>
<!-- <div class="col-1">
<q-btn flat round dense icon="delete" size="sm" @click="() => deleteMappingObject(index)" />
</div> -->
<div class="col-1">
<q-checkbox size="sm" v-model="item.isKey" :disable="item.disabled" />
<!-- <q-btn flat round dense icon="delete" size="sm" @click="() => deleteMappingObject(index)" /> -->
</div>
</div>
<show-dialog v-model:visible="mappingProps[index].to.isDialogVisible" name="フィールド一覧"
@@ -74,6 +82,10 @@
</show-dialog>
<!-- </div> -->
</q-virtual-scroll>
<div class="q-mt-lg q-ml-md row ">
<q-checkbox size="sm" v-model="createWithNull" label="目标が存在しない場合は新規作成し、存在する場合は更新する。" />
</div>
</div>
</show-dialog>
</div>
@@ -86,10 +98,10 @@ 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 { IApp, IField } from './AppFieldSelect.vue';
import { api } from 'boot/axios';
type Props = {
type ContextProps = {
props?: {
name: string;
modelValue?: {
@@ -100,14 +112,25 @@ type Props = {
}
}
};
type ValueType = {
id: string;
from: object;
to: typeof IAppFields & {
isDialogVisible: boolean;
};
type CurrentModelValueType = {
data: MappingValueType[];
createWithNull: boolean;
}
type MappingValueType = {
id: string;
from: { sharedText?: string };
to: {
app?: IApp,
fields: (IField & { label?: string })[]
isDialogVisible: boolean;
};
isKey: boolean;
disabled: boolean;
}
const blackListLabelName = ['レコード番号', '作業者', '更新者', '更新日時', '作成日時', '作成者']
export default defineComponent({
name: 'DataMapping',
@@ -120,7 +143,7 @@ export default defineComponent({
},
props: {
context: {
type: Array<Props>,
type: Array<ContextProps>,
default: '',
},
displayName: {
@@ -132,7 +155,7 @@ export default defineComponent({
default: '',
},
modelValue: {
type: Object as () => ValueType[],
type: Object as () => CurrentModelValueType,
},
placeholder: {
type: String,
@@ -152,58 +175,62 @@ export default defineComponent({
const sourceAppId = computed(() => sourceApp.value?.id);
const closeDg = () => {
emit('update:modelValue', mappingProps.value
);
emit('update:modelValue', { data: mappingProps.value, createWithNull: createWithNull.value });
}
const closeToDg = () => {
emit('update:modelValue', mappingProps.value
);
emit('update:modelValue', { data: mappingProps.value, createWithNull: createWithNull.value });
}
const mappingProps = computed(() => props.modelValue ?? []);
const mappingProps = ref(props.modelValue?.data ?? []);
watch(() => sourceAppId.value, async (newId, oldId) => {
const createWithNull = ref(props.modelValue?.createWithNull ?? false)
// 外部ソースコンポーネントの appid をリッスンし、変更されたときに現在のコンポーネントを更新します
watch(() => sourceAppId.value, async (newId,) => {
if (!newId) return;
const a = await api.get('api/v1/appfields', {
updateFields(newId)
})
const updateFields = async (sourceAppId: string) => {
const ktAppFields = await api.get('api/v1/appfields', {
params: {
app: newId
app: sourceAppId
}
}).then(res => {
return Object.values(res.data.properties)
// kintoneのデフォルトの非表示フィールドフィルタリング
.filter(f => !blackListLabelName.find(label => f.label === label))
.map(f => ({ name: f.label, objectType: 'field', ...f }))
.map(f => {
// 更新前の値を求める
const beforeData = mappingProps.value.find(m => m.to.fields[0].code === f.code)
return {
id: uuidv4(),
from: {},
from: beforeData?.from ?? {}, // 以前のデータを入力します
to: {
app: sourceApp.value,
fields: [f],
isDialogVisible: false
}
},
isKey: beforeData?.isKey ?? false, // 以前のデータを入力します
disabled: false
}
})
})
const modelValue = props.modelValue ?? [];
if (modelValue.length === 0 || newId !== oldId) {
emit('update:modelValue', a);
return;
// 「ルックアップ」によってロックされているフィールドを検索する
const lookupFixedField = ktAppFields
.filter(field => field.to.fields[0].lookup !== undefined)
.flatMap(field => field.to.fields[0].lookup.fieldMappings.map((m) => m.field))
// 「ルックアップ」でロックされたビューコンポーネントを非対話型に設定します
if (lookupFixedField.length > 0) {
ktAppFields.filter(f => lookupFixedField.includes(f.to.fields[0].code)).forEach(f => f.disabled = true)
}
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);
mappingProps.value = ktAppFields
}
const mappingObjectsInputDisplay = computed(() =>
(mappingProps.value && Array.isArray(mappingProps.value)) ?
@@ -215,15 +242,12 @@ export default defineComponent({
: []
);
const btnDisable = computed(() => props.onlySourceSelect ? !(source?.props?.modelValue?.app?.id) : false);
//集計処理方法
watchEffect(() => {
emit('update:modelValue', mappingProps.value);
emit('update:modelValue', { data: mappingProps.value, createWithNull: createWithNull.value });
});
return {
uuidv4,
dgIsShow: ref(false),
@@ -231,6 +255,8 @@ export default defineComponent({
toDgIsShow: ref(false),
closeToDg,
mappingProps,
createWithNull,
updateFields,
// addMappingObject: () => mappingProps.push(defaultMappingProp()),
// deleteMappingObject,
mappingObjectsInputDisplay,
@@ -240,11 +266,12 @@ export default defineComponent({
config: {
canInput: false,
buttonsConfig: [
{ label: '変数', color: 'green', type: 'VariableAdd',editable:false },
{ label: '変数', color: 'green', type: 'VariableAdd', editable: false },
]
}
};
},
});
</script>
<style lang="scss"></style>