99 lines
2.7 KiB
Vue
99 lines
2.7 KiB
Vue
<template>
|
|
<div>
|
|
<q-field :label="displayName" labelColor="primary" stack-label>
|
|
<template v-slot:control>
|
|
<q-card flat class="full-width">
|
|
<q-card-actions vertical>
|
|
<q-btn color="grey-3" text-color="black"
|
|
@click="() => { dgIsShow = true }">APP SELECT</q-btn>
|
|
</q-card-actions>
|
|
<q-card-section class="text-caption">
|
|
<div v-if="selectedField">
|
|
{{ selectedField.name }}
|
|
</div>
|
|
<div v-else>{{ placeholder }}</div>
|
|
</q-card-section>
|
|
</q-card>
|
|
</template>
|
|
</q-field>
|
|
</div>
|
|
|
|
<ShowDialog v-model:visible="dgIsShow" name="アプリ選択" @close="closeDg" min-width="50vw" min-height="50vh">
|
|
<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="appDg" name="アプリ" type="single" :filter="filter"></AppSelectBox>
|
|
</ShowDialog>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { computed, defineComponent, ref, watchEffect } from 'vue';
|
|
import ShowDialog from '../ShowDialog.vue';
|
|
import AppSelectBox from '../AppSelectBox.vue';
|
|
|
|
|
|
export default defineComponent({
|
|
inheritAttrs: false,
|
|
name: 'AppSelect',
|
|
components: {
|
|
ShowDialog,
|
|
AppSelectBox
|
|
},
|
|
props: {
|
|
context: {
|
|
type: Array<Props>,
|
|
default: '',
|
|
},
|
|
displayName: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
name: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
placeholder: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
modelValue: {
|
|
type: Object,
|
|
default: null
|
|
}
|
|
},
|
|
setup(props, { emit }) {
|
|
const appDg = ref()
|
|
const dgIsShow = ref(false)
|
|
const selectedField = ref()
|
|
const closeDg = (state: string) => {
|
|
dgIsShow.value = false;
|
|
if (state == 'OK') {
|
|
selectedField.value = appDg.value.selected[0];
|
|
}
|
|
};
|
|
|
|
|
|
|
|
// console.log(props);
|
|
|
|
|
|
|
|
watchEffect(() => {
|
|
emit('update:modelValue', { app: selectedField.value });
|
|
});
|
|
|
|
return {
|
|
filter: ref(''),
|
|
dgIsShow,
|
|
appDg,
|
|
closeDg,
|
|
selectedField
|
|
};
|
|
}
|
|
});
|
|
</script>
|