158 lines
4.2 KiB
Vue
158 lines
4.2 KiB
Vue
<template>
|
|
<q-dialog ref="dialog" v-model="active" @hide="onHide">
|
|
<slot></slot>
|
|
|
|
<div v-show="alertType" class="column bg-white">
|
|
<div class="header row">
|
|
<div class="caption col row items-center q-ml-md">
|
|
<q-icon v-show="caption" class="text-warning q-mr-sm" name="las la-exclamation-circle" size="28px"></q-icon>
|
|
<div v-html="caption"></div>
|
|
</div>
|
|
<div class="close-icon column justify-center items-center">
|
|
<q-btn flat round dense v-close-popup>
|
|
<q-icon name="la la-times" size="18px"></q-icon>
|
|
</q-btn>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col q-mx-md">
|
|
<div v-html="message"></div>
|
|
</div>
|
|
|
|
<div class="buttons row justify-end q-pa-md">
|
|
<q-btn class="q-px-md" dense no-caps @click="okClick" v-close-popup>OK</q-btn>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-show="confirmType" class="column bg-white">
|
|
<div class="header row">
|
|
<div class="caption col row items-center q-ml-md">
|
|
<q-icon v-show="caption" class="text-warning q-mr-sm" name="las la-exclamation-circle" size="28px"></q-icon>
|
|
<div v-html="caption"></div>
|
|
</div>
|
|
<div class="close-icon column justify-center items-center">
|
|
<q-btn flat round dense v-close-popup>
|
|
<q-icon name="la la-times" size="18px"></q-icon>
|
|
</q-btn>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col q-mx-md">
|
|
<div v-html="message"></div>
|
|
</div>
|
|
|
|
<div class="buttons row justify-end q-pa-md">
|
|
<q-btn class="q-px-md q-ml-sm" dense no-caps v-close-popup>Отмена</q-btn>
|
|
<q-btn class="q-px-md q-ml-sm" color="primary" dense no-caps @click="okClick" v-close-popup>OK</q-btn>
|
|
</div>
|
|
</div>
|
|
</q-dialog>
|
|
</template>
|
|
|
|
<script>
|
|
//-----------------------------------------------------------------------------
|
|
import Vue from 'vue';
|
|
import Component from 'vue-class-component';
|
|
|
|
//import * as utils from '../../share/utils';
|
|
|
|
export default @Component({
|
|
})
|
|
class StdDialog extends Vue {
|
|
caption = '';
|
|
message = '';
|
|
active = false;
|
|
alertType = false;
|
|
confirmType = false;
|
|
|
|
created() {
|
|
if (this.$root.addKeyHook) {
|
|
this.$root.addKeyHook(this.keyHook);
|
|
}
|
|
}
|
|
|
|
init(message, caption) {
|
|
this.caption = caption;
|
|
this.message = message;
|
|
|
|
this.ok = false;
|
|
this.alertType = false;
|
|
this.confirmType = false;
|
|
}
|
|
|
|
onHide() {
|
|
if (this.hideTrigger) {
|
|
this.hideTrigger();
|
|
this.hideTrigger = null;
|
|
}
|
|
}
|
|
|
|
okClick() {
|
|
this.ok = true;
|
|
}
|
|
|
|
alert(message, caption) {
|
|
return new Promise((resolve) => {
|
|
this.init(message, caption);
|
|
|
|
this.hideTrigger = () => {
|
|
if (this.ok) {
|
|
resolve(true);
|
|
} else {
|
|
resolve(false);
|
|
}
|
|
};
|
|
|
|
this.alertType = true;
|
|
this.active = true;
|
|
});
|
|
}
|
|
|
|
confirm(message, caption) {
|
|
return new Promise((resolve) => {
|
|
this.init(message, caption);
|
|
|
|
this.hideTrigger = () => {
|
|
if (this.ok) {
|
|
resolve(true);
|
|
} else {
|
|
resolve(false);
|
|
}
|
|
};
|
|
|
|
this.confirmType = true;
|
|
this.active = true;
|
|
});
|
|
}
|
|
|
|
keyHook(event) {
|
|
if (this.active && event.code == 'Enter') {
|
|
this.okClick();
|
|
this.$refs.dialog.hide();
|
|
event.stopPropagation();
|
|
event.preventDefault();
|
|
}
|
|
}
|
|
}
|
|
//-----------------------------------------------------------------------------
|
|
</script>
|
|
|
|
<style scoped>
|
|
.header {
|
|
height: 50px;
|
|
}
|
|
|
|
.caption {
|
|
font-size: 110%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.close-icon {
|
|
width: 50px;
|
|
}
|
|
|
|
.buttons {
|
|
height: 60px;
|
|
}
|
|
|
|
</style> |