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

update

Browse Source
This commit is contained in:
Mouriya
2024-04-22 22:05:39 +09:00
parent 99d3a01991
commit 1a48fb5b20
9 changed files with 436 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files

215
frontend/src/components/right/AppFieldSelect.vue
View File

@@ -0,0 +1,215 @@
<template>
<div class="q-my-md">
<q-card flat>
<q-card-section class="q-pa-none q-my-sm q-mr-md">
<!-- <div class=" q-my-none ">App Field Select</div> -->
<div class="row q-mb-xs">
<div class="text-primary q-mb-xs text-caption">{{ $props.displayName }}</div>
</div>
<div class="row">
<div class="col">
<div class="q-mb-xs">{{ selectAppInfo?.name || 'アプリ未選択' }}</div>
</div>
<div class="col-1">
<q-btn round flat size="sm" color="primary" icon="search" @click="showDg" />
</div>
</div>
</q-card-section>
<q-card-section class="q-pa-none q-ma-none">
<div class="" style="border: 1px solid rgba(0, 0, 0, 0.12)">
<div v-if="items.length !== 0 && !show">
<q-virtual-scroll style="max-height: 150px;" :items="items" separator v-slot="{ item, index }">
<q-item :key="index" dense>
<q-item-section>
<q-item-label>
{{ item.label }}
</q-item-label>
</q-item-section>
</q-item>
</q-virtual-scroll>
</div>
<div v-else class="row q-mt-lg">
</div>
</div>
</q-card-section>
<!-- <q-separator /> -->
<q-card-section class="q-px-none q-py-xs">
<div class="row">
<div class="text-grey text-caption
"> {{ $props.placeholder }}</div>
<!-- <q-btn flat color="grey" label="clear" @click="clear" /> -->
</div>
</q-card-section>
</q-card>
</div>
<show-dialog v-model:visible="show" name="フィールド一覧" @close="closeDg">
<div class="q-mx-md q-mb-lg">
<div class="q-mb-xs q-ml-md text-primary">アプリ選択</div>
<div class="q-pa-md row" style="border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 4px;">
<div v-if="!showSelectApp && selectAppInfo">{{ selectAppInfo?.name }}</div>
<q-space />
<div>
<q-btn outline dense label="選 択" padding="none sm" color="primary" @click="() => {
showSelectApp = true;
}"></q-btn>
</div>
</div>
</div>
<div v-if="!showSelectApp && selectAppInfo?.name">
<div>
<div class="row q-mb-md">
<!-- <div class="col"> -->
<div class="q-mb-xs q-ml-md text-primary">フィールド選択</div>
<!-- </div> -->
<q-space />
<!-- <div class="col"> -->
<div class="q-mr-md">
<q-input v-model="fieldFilter" type="text" label="フィールド検索" dense outlined />
</div>
</div>
<div class="row">
<field-select ref="appDg" name="フィールド" type="multiple" :updateSelects="updateItems"
:appId="selectAppInfo?.id" not_page :filter="fieldFilter"></field-select>
</div>
</div>
</div>
<div style="min-width: 45vw;" v-else>
</div>
</show-dialog>
<show-dialog v-model:visible="showSelectApp" name="アプリ選択" @close="closeDg">
<template v-slot:toolbar>
<q-input dense debounce="300" v-model="filter" placeholder="検索" clearable>
<template v-slot:before>
<q-icon name="search" />
</template>
</q-input>
</template>
<AppSelect ref="appDg" name="アプリ" type="single" :filter="filter"
:updateExternalSelectAppInfo=updateExternalSelectAppInfo></AppSelect>
</show-dialog>
</template>
<script lang="ts">
import { defineComponent, ref, watchEffect, computed } from 'vue';
import ShowDialog from '../ShowDialog.vue';
import FieldSelect from '../FieldSelect.vue';
import { useFlowEditorStore } from 'stores/flowEditor';
import AppSelect from '../AppSelect.vue';
interface IField {
name: string,
code: string,
type: string
}
interface ISelectFieldItem {
id: string | number,
name: string | null
}
export default defineComponent({
name: 'FieldInput',
components: {
ShowDialog,
FieldSelect,
AppSelect,
},
props: {
displayName: {
type: String,
default: '',
},
name: {
type: String,
default: '',
},
placeholder: {
type: String,
default: '',
},
modelValue: {
type: Object,
default: null
},
},
setup(props, { emit }) {
const appDg = ref();
const show = ref(false);
const showSelectApp = ref(false);
const items = ref<ISelectFieldItem[]>([]);
const selectedField = ref(props.modelValue);
const store = useFlowEditorStore();
const selectAppInfo = ref()
const isSelected = computed(() => {
return selectedField.value !== null && typeof selectedField.value === 'object' && ('name' in selectedField.value)
});
const showDg = () => {
show.value = true;
};
const clear = () => {
selectAppInfo.value = undefined
items.value = []
}
const closeDg = (val: string) => {
if (val == 'OK') {
selectedField.value = appDg.value.selected[0];
}
};
const updateExternalSelectAppInfo = (newAppinfo) => {
selectAppInfo.value = newAppinfo
}
const updateItems = (newItems) => {
items.value = newItems
}
// for (let i = 0; i < 10000; i++) {
// items.value.push({
// id: i,
// name: 'name ' + i
// })
// }
watchEffect(() => {
emit('update:modelValue', selectedField.value);
});
return {
store,
appDg,
show,
showDg,
closeDg,
selectedField,
showSelectApp,
isSelected,
items,
filter: ref(),
updateExternalSelectAppInfo,
selectAppInfo,
updateItems,
clear,
fieldFilter: ref()
};
}
});
</script>