113 lines
3.5 KiB
Vue
113 lines
3.5 KiB
Vue
<template>
|
|
<div v-bind="$attrs">
|
|
<q-field :label="displayName" labelColor="primary" stack-label
|
|
:rules="rulesExp"
|
|
lazy-rules="ondemand"
|
|
v-model="selectedApp"
|
|
ref="fieldRef">
|
|
<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 }">アプリ選択</q-btn>
|
|
</q-card-actions>
|
|
<q-card-section class="text-caption">
|
|
<div v-if="selectedApp.app.name">
|
|
{{ selectedApp.app.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, reactive, 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: {
|
|
displayName: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
name: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
placeholder: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
modelValue: {
|
|
type: Object,
|
|
default: null
|
|
},
|
|
//例：[val=>!!val ||'入力してください']
|
|
rules: {
|
|
type: String,
|
|
default: undefined
|
|
},
|
|
required: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
requiredMessage: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
},
|
|
setup(props, { emit }) {
|
|
const appDg = ref();
|
|
const fieldRef=ref();
|
|
const dgIsShow = ref(false)
|
|
const selectedApp = props.modelValue && props.modelValue.app ? props.modelValue : reactive({app:{}});
|
|
const closeDg = (state: string) => {
|
|
dgIsShow.value = false;
|
|
if (state == 'OK') {
|
|
selectedApp.app = appDg.value.selected[0];
|
|
fieldRef.value.validate();
|
|
}
|
|
};
|
|
//ルール設定
|
|
const customExp = props.rules === undefined ? [] : eval(props.rules);
|
|
const errmsg = props.requiredMessage?props.requiredMessage:`${props.displayName}を選択してください。`;
|
|
const requiredExp = props.required ? [((val: any) => (!!val && !!val.app && !!val.app.name) || errmsg)] : [];
|
|
const rulesExp = [...requiredExp, ...customExp];
|
|
watchEffect(() => {
|
|
emit('update:modelValue', selectedApp);
|
|
});
|
|
|
|
return {
|
|
filter: ref(''),
|
|
dgIsShow,
|
|
appDg,
|
|
fieldRef,
|
|
closeDg,
|
|
selectedApp,
|
|
rulesExp
|
|
};
|
|
}
|
|
});
|
|
</script>
|