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

アプリからフィールド選択UI追加

Browse Source
This commit is contained in:
maxiaozhe@alicorns.co.jp
2024-04-25 09:46:34 +09:00
parent 1a48fb5b20
commit 0de33f04bc
6 changed files with 106 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,7 +2,6 @@
<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">
@@ -10,54 +9,53 @@
</div>
<div class="row">
<div class="col">
<div class="q-mb-xs">{{ selectAppInfo?.name || 'アプリ未選択' }}</div>
<div class="q-mb-xs">{{ selectedField.app?.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-separator />
<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>
<div style="">
<div v-if="selectedField.fields && selectedField.fields.length > 0 ">
<q-list bordered>
<q-virtual-scroll style="max-height: 160px;" :items="selectedField.fields" separator v-slot="{ item, index }">
<q-item :key="index" dense clickable >
<q-item-section>
<q-item-label>
{{ item.label }}
</q-item-label>
</q-item-section>
<q-item-section side>
<q-btn round flat size="sm" icon="clear" @click="removeField(index)" />
</q-item-section>
</q-item>
</q-virtual-scroll>
</q-list>
</div>
<div v-else class="row q-mt-lg">
</div>
<!-- <div v-else class="row q-mt-lg">
</div> -->
</div>
<!-- <q-separator /> -->
</q-card-section>
<!-- <q-separator /> -->
<q-card-section class="q-px-none q-py-xs">
<q-card-section class="q-px-none q-py-xs" v-if="selectedField.fields && selectedField.fields.length===0">
<div class="row">
<div class="text-grey text-caption
"> {{ $props.placeholder }}</div>
<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>
</div>
<show-dialog v-model:visible="show" name="フィールド一覧" @close="closeDg">
<show-dialog v-model:visible="show" name="フィールド一覧" @close="closeFieldDialog" ref="fieldDlg">
<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>
<div v-if="!showSelectApp && selectedField.app">{{ selectedField.app?.name }}</div>
<q-space />
<div>
<q-btn outline dense label="選 択" padding="none sm" color="primary" @click="() => {
@@ -67,7 +65,7 @@
</div>
</div>
<div v-if="!showSelectApp && selectAppInfo?.name">
<div v-if="!showSelectApp && selectedField.app?.name">
<div>
<div class="row q-mb-md">
<!-- <div class="col"> -->
@@ -76,23 +74,25 @@
<q-space />
<!-- <div class="col"> -->
<div class="q-mr-md">
<q-input v-model="fieldFilter" type="text" label="フィールド検索" dense outlined />
<q-input dense debounce="300" v-model="fieldFilter" placeholder="フィールド検索" clearable>
<template v-slot:before>
<q-icon name="search" />
</template>
</q-input>
</div>
</div>
<div class="row">
<field-select ref="appDg" name="フィールド" type="multiple" :updateSelects="updateItems"
:appId="selectAppInfo?.id" not_page :filter="fieldFilter"></field-select>
<field-select ref="fieldDlg" name="フィールド" type="multiple" :updateSelects="updateItems"
:appId="selectedField.app?.id" not_page :filter="fieldFilter" :selectedFields="selectedField.fields"></field-select>
</div>
</div>
</div>
<div style="min-width: 45vw;" v-else>
</div>
</show-dialog>
<show-dialog v-model:visible="showSelectApp" name="アプリ選択" @close="closeDg">
<show-dialog v-model:visible="showSelectApp" name="アプリ選択" @close="closeAppDlg">
<template v-slot:toolbar>
<q-input dense debounce="300" v-model="filter" placeholder="検索" clearable>
<template v-slot:before>
@@ -101,8 +101,8 @@
</q-input>
</template>
<AppSelect ref="appDg" name="アプリ" type="single" :filter="filter"
:updateExternalSelectAppInfo=updateExternalSelectAppInfo></AppSelect>
<AppSelect ref="appDlg" name="アプリ" type="single" :filter="filter"
:updateExternalSelectAppInfo="updateExternalSelectAppInfo"></AppSelect>
</show-dialog>
</template>
@@ -112,15 +112,21 @@ import ShowDialog from '../ShowDialog.vue';
import FieldSelect from '../FieldSelect.vue';
import { useFlowEditorStore } from 'stores/flowEditor';
import AppSelect from '../AppSelect.vue';
interface IApp{
id:string,
name:string
}
interface IField {
name: string,
code: string,
type: string
}
interface ISelectFieldItem {
id: string | number,
name: string | null
interface IAppFields{
app?:IApp,
fields:IField[]
}
export default defineComponent({
name: 'FieldInput',
components: {
@@ -149,15 +155,21 @@ export default defineComponent({
},
setup(props, { emit }) {
const appDg = ref();
const appDlg = ref();
const fieldDlg = ref();
const show = ref(false);
const showSelectApp = ref(false);
const items = ref<ISelectFieldItem[]>([]);
const selectedField = ref(props.modelValue);
const selectedField = ref<IAppFields>({
app:undefined,
fields:[]
});
if(props.modelValue && "app" in props.modelValue && "fields" in props.modelValue){
selectedField.value=props.modelValue as IAppFields;
}
const store = useFlowEditorStore();
const selectAppInfo = ref()
const isSelected = computed(() => {
return selectedField.value !== null && typeof selectedField.value === 'object' && ('name' in selectedField.value)
return selectedField.value !== null && typeof selectedField.value === 'object' && ('app' in selectedField.value)
});
const showDg = () => {
@@ -165,51 +177,57 @@ export default defineComponent({
};
const clear = () => {
selectAppInfo.value = undefined
items.value = []
selectedField.value ={
fields:[]
} ;
}
const closeDg = (val: string) => {
const closeAppDlg = (val: string) => {
if (val == 'OK') {
selectedField.value = appDg.value.selected[0];
selectedField.value.app = appDlg.value.selected[0];
selectedField.value.fields=[];
showSelectApp.value=false;
}
};
const updateExternalSelectAppInfo = (newAppinfo) => {
selectAppInfo.value = newAppinfo
const closeFieldDialog=(val:string)=>{
if (val == 'OK') {
selectedField.value.fields = fieldDlg.value.selected;
}
};
const updateExternalSelectAppInfo = (newAppinfo:IApp) => {
// selectedField.value.app = newAppinfo
}
const updateItems = (newItems) => {
items.value = newItems
const updateItems = (newFields:IField[]) => {
// selectedField.value.fields = newFields
}
// for (let i = 0; i < 10000; i++) {
// items.value.push({
// id: i,
// name: 'name ' + i
// })
// }
const removeField=(index:number)=>{
selectedField.value.fields.splice(index,1);
}
watchEffect(() => {
emit('update:modelValue', selectedField.value);
});
return {
store,
appDg,
appDlg,
fieldDlg,
show,
showDg,
closeDg,
closeAppDlg,
closeFieldDialog,
selectedField,
showSelectApp,
isSelected,
items,
filter: ref(),
updateExternalSelectAppInfo,
selectAppInfo,
filter: ref(),
updateItems,
clear,
fieldFilter: ref()
fieldFilter: ref(),
removeField
};
}
});
</script>
</script>