<template>
|
<el-dialog
|
class="gd-dialog"
|
v-model="visible"
|
:title="'拒绝申请'"
|
@closed="visible = false"
|
destroy-on-close
|
width="550px"
|
align-center
|
:close-on-click-modal="false"
|
>
|
<div class="detail-container">
|
<div class="detail-cell-reject">
|
<span class="cell-label">拒绝原因：</span>
|
<el-input v-model="reasonForRejection" style="width: 380px" type="textarea" :rows="4" placeholder="请输入" />
|
</div>
|
</div>
|
<template #footer>
|
<el-button class="" color="#4C34FF" @click="handleConfirm">确认</el-button>
|
</template>
|
</el-dialog>
|
</template>
|
|
<script setup>
|
import { ref, watch } from 'vue'
|
import { ElMessage } from 'element-plus'
|
|
const props = defineProps({
|
modelValue: {
|
type: Boolean,
|
default: false,
|
},
|
})
|
|
const emit = defineEmits(['update:modelValue', 'confirm'])
|
|
const visible = ref(props.modelValue)
|
const reasonForRejection = ref('')
|
|
// 监听visible变化，同步到父组件
|
watch(
|
() => visible.value,
|
newVal => {
|
emit('update:modelValue', newVal)
|
}
|
)
|
|
// 监听父组件modelValue变化
|
watch(
|
() => props.modelValue,
|
newVal => {
|
visible.value = newVal
|
}
|
)
|
|
// 确认按钮点击事件
|
const handleConfirm = () => {
|
if (!reasonForRejection.value.trim()) {
|
return ElMessage.warning('请输入拒绝原因')
|
}
|
emit('confirm', reasonForRejection.value)
|
visible.value = false
|
reasonForRejection.value = ''
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.detail-cell-reject {
|
display: flex;
|
justify-content: flex-start;
|
}
|
</style>
|
