62 lines
1.6 KiB
Vue
62 lines
1.6 KiB
Vue
<template>
|
|
<kuc-table :class-name.camel="['plugin-kuc-table']" :columns="columns" :data="modelValue" @change="changeRow"/>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { FieldsJoinMapping } from '@/types/model';
|
|
import { defineProps, defineEmits } from 'vue';
|
|
import { Dropdown } from 'kintone-ui-component/lib/dropdown';
|
|
|
|
const props = defineProps<{
|
|
connector: string;
|
|
modelValue: FieldsJoinMapping[];
|
|
}>();
|
|
|
|
const renderDropdown = (cellData: string) => {
|
|
const dropdown = new Dropdown({
|
|
items: [
|
|
{ label: 'John Brown', value: 'john' },
|
|
{ label: 'Steven Gerard', value: 'steven' },
|
|
],
|
|
value: cellData,
|
|
});
|
|
return dropdown;
|
|
};
|
|
const renderConnector = () => {
|
|
return props.connector;
|
|
};
|
|
|
|
const columns = [
|
|
{
|
|
title: '取得元アプリのフィールド',
|
|
field: 'leftField',
|
|
render: renderDropdown,
|
|
},
|
|
{
|
|
title: '',
|
|
field: 'connector',
|
|
render: renderConnector,
|
|
},
|
|
{
|
|
title: 'このアプリのフィールド',
|
|
field: 'rightField',
|
|
render: renderDropdown,
|
|
},
|
|
];
|
|
|
|
const leftFields = [] as kintone.fieldTypes.DropDown['Item'][];
|
|
const rightFields = [] as kintone.fieldTypes.DropDown['Item'][];
|
|
|
|
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>
|