<template>
|
<el-dialog
|
v-model="visible"
|
v-bind="$props"
|
:draggable="true"
|
:fullscreen="fullscreen"
|
:modal-class="footerDom ? '' : 'dialog-no-footer'"
|
>
|
<template #title>
|
<div class="header">
|
<app-svg-icon
|
class="icon"
|
:icon-class="fullscreen ? 'exit-fullscreen' : 'fullscreen'"
|
@click="fullscreen = !fullscreen"
|
/>
|
<div class="title">{{ $props.title }}</div>
|
</div>
|
</template>
|
<slot/>
|
<template #footer>
|
<div class="dialog-footer" v-if="footerDom">
|
<el-button @click="onClose()" icon="Close">{{ $t('components.dialog.DialogForm.cancel') }}
|
</el-button>
|
<el-button @click="onReset()" icon="RefreshRight">{{ $t('components.dialog.DialogForm.reset') }}</el-button>
|
<el-button type="primary" @click="onSubmit()" icon="DocumentAdd" v-loading="loading">
|
{{ $t('components.dialog.DialogForm.save') }}
|
</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</template>
|
|
<script setup>
|
|
import {context} from '@/hooks';
|
|
const {useForceUpdate} = context;
|
|
const props = defineProps({
|
title: {
|
type: String,
|
default: ''
|
},
|
width: {
|
type: Number,
|
default: 750
|
},
|
subClose: {
|
type: Function,
|
default: () => {
|
}
|
},
|
overflow: {
|
type: Boolean,
|
default: true
|
},
|
subReset: {
|
type: Function,
|
default: () => {
|
}
|
},
|
subSubmit: {
|
type: Function,
|
default: () => {
|
}
|
},
|
footerDom: {
|
type: Boolean,
|
default: true
|
}
|
});
|
|
const [$props, forceUpdate] = useForceUpdate(props);
|
|
const $forceUpdate = forceUpdate;
|
|
const fullscreen = ref(false)
|
|
const visible = ref(false);
|
|
const loading = ref(false);
|
|
const onClose = async () => {
|
props.subClose();
|
visible.value = false;
|
}
|
|
const onReset = async () => {
|
await props.subReset();
|
}
|
|
const onSubmit = async () => {
|
loading.value = true;
|
try {
|
await props.subSubmit();
|
visible.value = false;
|
} catch (e) {
|
|
} finally {
|
loading.value = false;
|
}
|
}
|
|
const onOpen = async () => {
|
fullscreen.value = false;
|
visible.value = true;
|
};
|
|
/**
|
* 暴露给父组件的参数和方法 (外部需要什么，都可以从这里暴露出去)
|
*/
|
defineExpose({
|
onOpen,
|
onClose,
|
$forceUpdate
|
});
|
|
</script>
|
|
<style lang='scss'>
|
.dialog-no-footer {
|
.el-dialog__footer {
|
display: none;
|
}
|
|
.el-dialog {
|
.el-dialog__footer {
|
height: 45px
|
}
|
|
.el-dialog__body {
|
max-height: calc(100vh - 170px) !important;;
|
overflow-y: auto;
|
}
|
}
|
|
.is-fullscreen {
|
--el-dialog-margin-top: 0 !important;
|
|
.el-dialog__body {
|
max-height: calc(100vh - 100px) !important;
|
}
|
|
}
|
}
|
</style>
|
|
|
<style lang='scss' scoped>
|
.header {
|
.title {
|
padding-left: 20px;
|
font-size: var(--el-font-size-extra-large);
|
color: var(--el-text-color-primary);
|
font-weight: 500;
|
}
|
|
display: flex;
|
align-items: center;
|
|
.icon {
|
font-size: 10px;
|
cursor: pointer;
|
position: absolute;
|
top: 15px;
|
left: 15px;
|
}
|
}
|
|
.dialog-footer {
|
position: absolute;
|
bottom: 15px;
|
right: 15px;
|
}
|
</style>
|
