132 lines
3.9 KiB
Vue
132 lines
3.9 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="selField?.app && !showSelectApp">{{ selField?.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 && selField?.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" :updateSelectFields="updateSelectFields"
|
|
:appId="selField?.app?.id" not_page :filter="fieldFilter"
|
|
:selectedFields="selField.fields" :fieldTypes="fieldTypes"></field-select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="min-width: 45vw;" v-else>
|
|
</div>
|
|
|
|
|
|
<show-dialog v-model:visible="showSelectApp" name="アプリ選択">
|
|
<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>
|
|
|
|
<AppSelectBox ref="appDlg" name="アプリ" type="single" :filter="filter"
|
|
:updateSelectApp="updateSelectApp"></AppSelectBox>
|
|
</show-dialog>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, ref, watchEffect, computed, reactive } from 'vue';
|
|
import ShowDialog from './ShowDialog.vue';
|
|
import FieldSelect from './FieldSelect.vue';
|
|
import AppSelectBox from './AppSelectBox.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,
|
|
AppSelectBox,
|
|
},
|
|
props: {
|
|
selectedField: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
selectType: {
|
|
type: String,
|
|
default: 'single'
|
|
},
|
|
fieldTypes:{
|
|
type:Array,
|
|
default:()=>[]
|
|
}
|
|
},
|
|
setup(props, { emit }) {
|
|
const showSelectApp = ref(false);
|
|
const selField = reactive(props.selectedField);
|
|
|
|
const isSelected = computed(() => {
|
|
return selField !== null && typeof selField === 'object' && ('app' in selField)
|
|
});
|
|
|
|
const updateSelectApp = (newAppinfo: IApp) => {
|
|
selField.app = newAppinfo
|
|
}
|
|
|
|
const updateSelectFields = (newFields: IField[]) => {
|
|
selField.fields = newFields
|
|
}
|
|
|
|
watchEffect(() => {
|
|
emit('update:modelValue', selField);
|
|
});
|
|
|
|
return {
|
|
showSelectApp,
|
|
isSelected,
|
|
updateSelectApp,
|
|
filter: ref(),
|
|
updateSelectFields,
|
|
fieldFilter: ref(),
|
|
selField
|
|
};
|
|
}
|
|
});
|
|
</script>
|