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

feat:lookup同期アクション

Browse Source
This commit is contained in:
maxiaozhe@alicorns.co.jp
2024-07-05 17:20:51 +09:00
parent c8f9cbda9a
commit 832d46d360
39 changed files with 2713 additions and 372 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -18,119 +18,68 @@
<q-separator />
<q-card-section class="q-pa-none q-ma-none">
<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>
<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>
</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>
<!-- <q-separator /> -->
</q-card-section>
<q-card-section class="q-px-none q-py-xs" v-if="selectedField.fields && selectedField.fields.length===0">
<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>
<!-- <q-btn flat color="grey" label="clear" @click="clear" /> -->
</div>
</q-card-section>
</q-card>
</div>
<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 && selectedField.app">{{ selectedField.app?.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 && selectedField.app?.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 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="fieldDlg" name="フィールド" :type="selectType"
:appId="selectedField.app?.id" not_page :filter="fieldFilter" :selectedFields="selectedField.fields" :fieldTypes="fieldTypes"></field-select>
</div>
</div>
</div>
<div style="min-width: 45vw;" v-else>
</div>
</show-dialog>
<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>
<q-icon name="search" />
</template>
</q-input>
</template>
<AppSelect ref="appDlg" name="アプリ" type="single" :filter="filter" ></AppSelect>
</div>
<show-dialog v-model:visible="show" name="フィールド一覧" @close="closeAFBox">
<AppFieldSelectBox v-model:selectedField="selectedField" :selectType="selectType" ref="afBox" :fieldTypes="fieldTypes"/>
</show-dialog>
</template>
<script lang="ts">
import { defineComponent, ref, watchEffect, computed } from 'vue';
import { defineComponent, ref, watchEffect } from 'vue';
import AppFieldSelectBox from '../AppFieldSelectBox.vue';
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
export interface IApp {
id: string,
name: string
}
interface IField {
export interface IField {
name: string,
code: string,
type: string
}
interface IAppFields{
app?:IApp,
fields:IField[]
export interface IAppFields {
app?: IApp,
fields: IField[]
}
export default defineComponent({
inheritAttrs:false,
inheritAttrs: false,
name: 'AppFieldSelect',
components: {
ShowDialog,
FieldSelect,
AppSelect,
AppFieldSelectBox
},
props: {
displayName: {
@@ -149,9 +98,9 @@ export default defineComponent({
type: Object,
default: null
},
selectType:{
type:String,
default:'single'
selectType: {
type: String,
default: 'single'
},
fieldTypes:{
type:Array,
@@ -159,69 +108,48 @@ export default defineComponent({
}
},
setup(props, { emit }) {
const appDlg = ref();
const fieldDlg = ref();
const show = ref(false);
const showSelectApp = ref(false);
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 afBox = ref();
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 isSelected = computed(() => {
return selectedField.value !== null && typeof selectedField.value === 'object' && ('app' in selectedField.value)
});
const showDg = () => {
show.value = true;
};
const clear = () => {
selectedField.value ={
fields:[]
} ;
selectedField.value = {
fields: []
};
}
const closeAppDlg = (val: string) => {
const removeField = (index: number) => {
selectedField.value.fields.splice(index, 1);
}
const closeAFBox = (val: string) => {
if (val == 'OK') {
selectedField.value.app = appDlg.value.selected[0];
selectedField.value.fields=[];
showSelectApp.value=false;
console.log(afBox.value);
selectedField.value = afBox.value.selField;
}
};
const closeFieldDialog=(val:string)=>{
if (val == 'OK') {
selectedField.value.fields = fieldDlg.value.selected;
}
};
const removeField=(index:number)=>{
selectedField.value.fields.splice(index,1);
}
watchEffect(() => {
emit('update:modelValue', selectedField.value);
});
return {
store,
appDlg,
fieldDlg,
afBox,
show,
showDg,
closeAppDlg,
closeFieldDialog,
showDg: () => { show.value = true },
selectedField,
showSelectApp,
isSelected,
filter: ref(),
clear,
fieldFilter: ref(),
removeField
removeField,
closeAFBox,
};
}
});