95 lines
2.5 KiB
Vue
95 lines
2.5 KiB
Vue
<template>
|
|
<div class="row app-box">
|
|
<q-icon
|
|
class="self-center q-ma-sm"
|
|
name="widgets"
|
|
color="grey-9"
|
|
style="font-size: 2em"
|
|
/>
|
|
<div class="col-7 self-center ellipsis">
|
|
<a :href="!store.appInfo?'':`${authStore.currentDomain.kintoneUrl}/k/${store.appInfo?.appId}`" target="_blank" title="Kiontoneへ">
|
|
{{ store.appInfo?.name }}
|
|
</a>
|
|
</div>
|
|
<div class="self-center">
|
|
<q-btn
|
|
outline
|
|
dense
|
|
label="変 更"
|
|
padding="none sm"
|
|
color="primary"
|
|
@click="showAppDialog"
|
|
></q-btn>
|
|
</div>
|
|
</div>
|
|
<ShowDialog v-model:visible="showSelectApp" 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>
|
|
<AppSelect ref="appDg" name="アプリ" type="single" :filter="filter"></AppSelect>
|
|
</ShowDialog>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent,ref } from 'vue';
|
|
import {AppInfo} from '../../types/ActionTypes'
|
|
import ShowDialog from '../../components/ShowDialog.vue';
|
|
import AppSelect from '../../components/AppSelect.vue';
|
|
import { useFlowEditorStore } from 'stores/flowEditor';
|
|
import { useAuthStore } from 'src/stores/useAuthStore';
|
|
export default defineComponent({
|
|
name: 'AppSelector',
|
|
emits:[
|
|
"appSelected"
|
|
],
|
|
components:{
|
|
AppSelect,
|
|
ShowDialog
|
|
},
|
|
setup(props, context) {
|
|
|
|
const store = useFlowEditorStore();
|
|
const authStore=useAuthStore();
|
|
const appDg = ref();
|
|
const showSelectApp=ref(false);
|
|
|
|
const closeDg=(val :any)=>{
|
|
showSelectApp.value=false;
|
|
console.log("Dialog closed->",val);
|
|
if (val == 'OK') {
|
|
const data = appDg.value.selected[0];
|
|
console.log(data);
|
|
const appInfo={
|
|
appId:data.id ,
|
|
name:data.name
|
|
};
|
|
store.setApp(appInfo);
|
|
store.loadFlow();
|
|
}
|
|
}
|
|
const showAppDialog=()=>{
|
|
showSelectApp.value=true;
|
|
}
|
|
return {
|
|
store,
|
|
authStore,
|
|
showSelectApp,
|
|
showAppDialog,
|
|
closeDg,
|
|
appDg,
|
|
filter:ref('')
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
<style lang="scss">
|
|
.app-box{
|
|
border-radius: 2px;
|
|
box-shadow: rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset,rgba(0, 0, 0, 0.3) 0px 0px 0px 1px;
|
|
}
|
|
</style>
|