You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
130 lines
2.6 KiB
130 lines
2.6 KiB
<!-- 用于审核通过、驳回的对话框 -->
|
|
<template>
|
|
<!-- close-on-click-modal="false" 禁止点击遮罩层关闭对话框 -->
|
|
<el-dialog
|
|
v-model="visible"
|
|
:width="width"
|
|
:close-on-click-modal="false"
|
|
:style="{
|
|
backgroundImage: `url(${BackgroundSvg})`,
|
|
backgroundSize: 'cover',
|
|
backgroundPosition: 'center',
|
|
height: '400px'
|
|
}"
|
|
@close="handleClose">
|
|
|
|
<div class="confirm-content">
|
|
将要{{ message }}
|
|
<br>
|
|
</div>
|
|
|
|
<template #footer>
|
|
<div class="dialog-footer-button">
|
|
<el-button round class="custom-large-button" @click="handleCancel">
|
|
取消
|
|
</el-button>
|
|
<el-button round class="custom-large-button" type="primary" @click="handleConfirm">
|
|
确定
|
|
</el-button>
|
|
</div>
|
|
</template>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, watch } from 'vue'
|
|
import BackgroundSvg from '@/assets/SvgIcons/promptBackground.svg'
|
|
|
|
// 组件属性
|
|
const props = defineProps({
|
|
// 是否显示对话框
|
|
modelValue: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
// 对话框宽度
|
|
width: {
|
|
type: String,
|
|
default: '700px'
|
|
},
|
|
// 消息内容
|
|
message: {
|
|
type: String,
|
|
default: '通过该记录！'
|
|
}
|
|
})
|
|
|
|
// 组件事件
|
|
const emit = defineEmits(['update:modelValue', 'confirm', 'cancel', 'close'])
|
|
|
|
// 内部可见性状态
|
|
const visible = ref(false)
|
|
|
|
// 监听外部modelValue变化
|
|
watch(() => props.modelValue, (newVal) => {
|
|
visible.value = newVal
|
|
})
|
|
|
|
// 监听内部visible变化，同步到外部
|
|
watch(visible, (newVal) => {
|
|
emit('update:modelValue', newVal)
|
|
})
|
|
|
|
// 确认按钮点击事件
|
|
const handleConfirm = () => {
|
|
emit('confirm')
|
|
visible.value = false
|
|
}
|
|
|
|
// 取消按钮点击事件
|
|
const handleCancel = () => {
|
|
emit('cancel')
|
|
visible.value = false
|
|
}
|
|
|
|
// 对话框关闭事件
|
|
const handleClose = () => {
|
|
emit('close')
|
|
visible.value = false
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
/* 将要**的样式 */
|
|
.confirm-content {
|
|
text-align: center;
|
|
font-size: 40px;
|
|
font-weight: bold;
|
|
color: #333;
|
|
line-height: 1.5;
|
|
padding: 20px;
|
|
position: absolute;
|
|
top: 57%;
|
|
left: 53%;
|
|
transform: translate(-50%, -50%);
|
|
width: 100%;
|
|
}
|
|
/* 确认取消按钮组样式 */
|
|
.dialog-footer-button {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
display: flex;
|
|
justify-content: center;
|
|
font-size: 50px;
|
|
gap: 10px;
|
|
height: 60px;
|
|
margin-top: 20px;
|
|
position: absolute;
|
|
top: 70%;
|
|
left: 30%;
|
|
}
|
|
/* 确认取消按钮样式 */
|
|
.custom-large-button {
|
|
font-size: 20px !important;
|
|
height: 40px !important;
|
|
min-width: 40px !important;
|
|
padding: 0 40px !important;
|
|
}
|
|
</style>
|