98 lines
3.3 KiB
Vue
98 lines
3.3 KiB
Vue
<template>
|
|
<kuc-table className='plugin-kuc-table condition-table' :columns="columns" :data="modelValue" />
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { CachedData, CachedSelectedAppData, SavedData, WhereCondition } from '@/types/model';
|
|
import { defineProps, inject, computed, render, h, reactive } from 'vue';
|
|
import TableCombobox from './TableCombobox.vue';
|
|
import { generateId, getFieldsDropdownItems, search } from '@/js/helper';
|
|
import TableCondition from './conditions/TableCondition.vue';
|
|
import TableConditionValue from './conditions/TableConditionValue.vue';
|
|
|
|
const props = defineProps<{
|
|
modelValue: WhereCondition[];
|
|
}>();
|
|
|
|
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);
|
|
|
|
const canSave = inject<(canSave: boolean) => void>('canSave') as (canSave: boolean) => void;
|
|
|
|
const columns = reactive([
|
|
{
|
|
title: '取得元アプリのフィールド',
|
|
field: 'field',
|
|
render: (cellData: string, rowData: WhereCondition) => {
|
|
if (!rowData.id) {
|
|
rowData.id = generateId();
|
|
}
|
|
const container = document.createElement('div');
|
|
const vnode = h(TableCombobox, {
|
|
items: computed(() =>
|
|
getFieldsDropdownItems(selectedAppData.appFields, {
|
|
subTableCode: '', //table.value,
|
|
baseFilter: undefined,
|
|
defaultLabel: 'すべてのレコード',
|
|
}),
|
|
),
|
|
modelValue: computed(() => (search(props.modelValue, rowData.id) as WhereCondition)?.field || ''),
|
|
selectedAppData,
|
|
dataList: props.modelValue,
|
|
id: rowData.id,
|
|
'onUpdate:modelValue': (data) => {
|
|
const obj = (data.obj as WhereCondition);
|
|
if (obj) {
|
|
obj.field = data.value;
|
|
obj.condition = '',
|
|
obj.data = '';
|
|
}
|
|
},
|
|
});
|
|
render(vnode, container);
|
|
return container;
|
|
},
|
|
},
|
|
{
|
|
title: '',
|
|
field: 'condition',
|
|
render: (cellData: string, rowData: WhereCondition) => {
|
|
const container = document.createElement('div');
|
|
const vnode = h(TableCondition, {
|
|
modelValue: computed(() => (search(props.modelValue, rowData.id) as WhereCondition)?.condition || ''),
|
|
selectedAppData,
|
|
id: rowData.id,
|
|
whereConditions: props.modelValue,
|
|
'onUpdate:modelValue': ({obj, value}) => {
|
|
obj && (obj.condition = value);
|
|
},
|
|
});
|
|
render(vnode, container);
|
|
return container;
|
|
},
|
|
},
|
|
{
|
|
title: '',
|
|
field: 'data',
|
|
render: (cellData: string, rowData: WhereCondition) => {
|
|
const container = document.createElement('div');
|
|
const vnode = h(TableConditionValue, {
|
|
modelValue: computed(() => (search(props.modelValue, rowData.id) as WhereCondition)?.data || ''),
|
|
selectedAppData,
|
|
canSave,
|
|
id: rowData.id,
|
|
whereConditions: props.modelValue,
|
|
'onUpdate:modelValue': ({obj, value}) => {
|
|
obj && (obj.data = value);
|
|
},
|
|
});
|
|
render(vnode, container);
|
|
return container;
|
|
},
|
|
},
|
|
]);
|
|
|
|
</script>
|