152 lines
4.5 KiB
Vue
152 lines
4.5 KiB
Vue
<template>
|
|
|
|
<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="selectedField?.app && !showSelectApp">{{ 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" :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 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"
|
|
: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 IApp {
|
|
id: string,
|
|
name: string
|
|
}
|
|
interface IField {
|
|
name: string,
|
|
code: string,
|
|
type: string
|
|
}
|
|
|
|
interface IAppFields {
|
|
app?: IApp,
|
|
fields: IField[]
|
|
}
|
|
|
|
export default defineComponent({
|
|
inheritAttrs: false,
|
|
name: 'AppFieldSelectBox',
|
|
components: {
|
|
ShowDialog,
|
|
FieldSelect,
|
|
AppSelect,
|
|
},
|
|
props: {
|
|
selectedField: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
selectType: {
|
|
type: String,
|
|
default: 'single'
|
|
},
|
|
|
|
},
|
|
setup(props, { emit }) {
|
|
const appDlg = ref();
|
|
const fieldDlg = ref();
|
|
const showSelectApp = ref(false);
|
|
const selectedField = props.selectedField;
|
|
console.log(props.selectedField);
|
|
|
|
const store = useFlowEditorStore();
|
|
|
|
const isSelected = computed(() => {
|
|
return selectedField !== null && typeof selectedField === 'object' && ('app' in selectedField)
|
|
});
|
|
|
|
|
|
const closeAppDlg = (val: string) => {
|
|
if (val == 'OK') {
|
|
selectedField.app = appDlg.value.selected[0];
|
|
selectedField.fields = [];
|
|
showSelectApp.value = false;
|
|
}
|
|
};
|
|
|
|
const closeFieldDialog = (val: string) => {
|
|
if (val == 'OK') {
|
|
selectedField.fields = fieldDlg.value.selected;
|
|
}
|
|
};
|
|
const updateExternalSelectAppInfo = (newAppinfo: IApp) => {
|
|
selectedField.app = newAppinfo
|
|
}
|
|
|
|
const updateItems = (newFields: IField[]) => {
|
|
selectedField.fields = newFields
|
|
}
|
|
|
|
watchEffect(() => {
|
|
emit('update:modelValue', selectedField);
|
|
});
|
|
|
|
return {
|
|
appDlg,
|
|
fieldDlg,
|
|
closeAppDlg,
|
|
closeFieldDialog,
|
|
showSelectApp,
|
|
isSelected,
|
|
updateExternalSelectAppInfo,
|
|
filter: ref(),
|
|
updateItems,
|
|
fieldFilter: ref(),
|
|
};
|
|
}
|
|
});
|
|
</script>
|