データ・マッピング・コンポーネントの追加
This commit is contained in:
Mouriya
165
frontend/src/components/right/DataMapping.vue
Normal file
165
frontend/src/components/right/DataMapping.vue
Normal file
@@ -0,0 +1,165 @@
|
||||
<template>
|
||||
<div>
|
||||
<q-field :label="displayName" labelColor="primary" stack-label>
|
||||
<template v-slot:control>
|
||||
<q-card flat class="full-width">
|
||||
<q-card-actions vertical>
|
||||
<q-btn color="grey-3" text-color="black" @click="() => { dgIsShow = true }">クリックで設定</q-btn>
|
||||
</q-card-actions>
|
||||
<q-card-section class="text-caption">
|
||||
<div v-if="mappingObjectsInputDisplay && mappingObjectsInputDisplay.length > 0">
|
||||
<div v-for="(item) in mappingObjectsInputDisplay" :key="item">{{ item }}</div>
|
||||
</div>
|
||||
<div v-else>{{ placeholder }}</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</template>
|
||||
</q-field>
|
||||
<show-dialog v-model:visible="dgIsShow" name="DataMapping" @close="closeDg" min-width="50vw" min-height="60vh">
|
||||
|
||||
<div class="q-mx-md">
|
||||
<div class="row q-col-gutter-x-xs flex-center">
|
||||
<div class="col-5">
|
||||
<div class="q-mx-xs">From</div>
|
||||
</div>
|
||||
<div class="col-1">
|
||||
</div>
|
||||
<div class="col-5">
|
||||
<div class="q-mx-xs">To</div>
|
||||
</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">
|
||||
<ConditionObject v-model="item.from" />
|
||||
</div>
|
||||
<div class="col-1">
|
||||
</div>
|
||||
<div class="col-5">
|
||||
<q-field v-model="item.vName" type="text" outlined dense>
|
||||
<template v-slot:append>
|
||||
<q-icon name="search" class="cursor-pointer"
|
||||
@click="() => { mappingProps[index].to.isDialogVisible = true }" />
|
||||
</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}` }}
|
||||
</div>
|
||||
</template>
|
||||
</q-field>
|
||||
</div>
|
||||
<div class="col-1">
|
||||
<q-btn flat round dense icon="delete" size="sm" @click="() => deleteMappingObject(index)" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<show-dialog v-model:visible="mappingProps[index].to.isDialogVisible" name="フィールド一覧"
|
||||
@close="closeToDg" ref="fieldDlg">
|
||||
<AppFieldSelectBox v-model:selectedField="mappingProps[index].to" />
|
||||
</show-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</show-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { v4 as uuidv4 } from 'uuid';
|
||||
import { computed, defineComponent, reactive, ref, watchEffect } from 'vue';
|
||||
import ConditionObject from '../ConditionEditor/ConditionObject.vue';
|
||||
import ShowDialog from '../ShowDialog.vue';
|
||||
import AppFieldSelectBox from '../AppFieldSelectBox.vue';
|
||||
import IAppFields from './AppFieldSelect.vue';
|
||||
|
||||
type ValueType = {
|
||||
id: string;
|
||||
from: object;
|
||||
to: IAppFields & {
|
||||
isDialogVisible: boolean;
|
||||
};
|
||||
}
|
||||
|
||||
const defaultMappingProp = () => ({ id: uuidv4(), to: { app: {}, fields: [], isDialogVisible: false } });
|
||||
|
||||
export default defineComponent({
|
||||
name: 'DataMapping',
|
||||
inheritAttrs: false,
|
||||
components: {
|
||||
ShowDialog,
|
||||
ConditionObject,
|
||||
AppFieldSelectBox
|
||||
},
|
||||
props: {
|
||||
|
||||
displayName: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
modelValue: {
|
||||
type: Object as () => ValueType[],
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
|
||||
setup(props, { emit }) {
|
||||
const closeDg = () => {
|
||||
emit('update:modelValue', mappingProps
|
||||
);
|
||||
}
|
||||
|
||||
const closeToDg = () => {
|
||||
emit('update:modelValue', mappingProps
|
||||
);
|
||||
}
|
||||
|
||||
const mappingProps: ValueType[] = props.modelValue
|
||||
? props.modelValue
|
||||
: reactive([defaultMappingProp()]);
|
||||
|
||||
|
||||
const deleteMappingObject = (index: number) => mappingProps.length === 1
|
||||
? mappingProps.splice(0, mappingProps.length, defaultMappingProp())
|
||||
: mappingProps.splice(index, 1);
|
||||
|
||||
const mappingObjectsInputDisplay = computed(() =>
|
||||
mappingProps ?
|
||||
mappingProps
|
||||
.filter(item => item.from?.name && item.to.fields?.length > 0)
|
||||
.map(item => {
|
||||
const name = typeof item.from?.name === 'string'
|
||||
? item.from.name
|
||||
: item.from?.name.name;
|
||||
return `[${name}] - (${item.to.app?.name} : ${item.to.fields[0].label})`;
|
||||
})
|
||||
: []
|
||||
);
|
||||
//集計処理方法
|
||||
|
||||
watchEffect(() => {
|
||||
emit('update:modelValue', mappingProps);
|
||||
});
|
||||
return {
|
||||
uuidv4,
|
||||
dgIsShow: ref(false),
|
||||
closeDg,
|
||||
toDgIsShow: ref(false),
|
||||
closeToDg,
|
||||
mappingProps,
|
||||
addMappingObject: () => mappingProps.push(defaultMappingProp()),
|
||||
deleteMappingObject,
|
||||
mappingObjectsInputDisplay,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="scss"></style>
|
||||
@@ -22,6 +22,7 @@ import EventSetter from '../right/EventSetter.vue';
|
||||
import ColorPicker from './ColorPicker.vue';
|
||||
import NumInput from './NumInput.vue';
|
||||
import DataProcessing from './DataProcessing.vue';
|
||||
import DataMapping from './DataMapping.vue';
|
||||
import { IActionNode,IActionProperty,IProp } from 'src/types/ActionTypes';
|
||||
|
||||
export default defineComponent({
|
||||
@@ -37,7 +38,8 @@ export default defineComponent({
|
||||
EventSetter,
|
||||
ColorPicker,
|
||||
NumInput,
|
||||
DataProcessing
|
||||
DataProcessing,
|
||||
DataMapping
|
||||
},
|
||||
props: {
|
||||
nodeProps: {
|
||||
|
||||
Reference in New Issue
Block a user