elementplus-vue-审核按钮-对话框(Dialog )

效果图:

代码:

<template>

<el-button type="success" @click="dialogVisible = true" :icon="Edit">审核</el-button>

<el-dialog

v-model="dialogVisible"

title="是否通过"

width="500"

align-center

>

<el-dialog

v-model="innerVisible"

width="500"

title="说明理由"

append-to-body

>

<!-- 新增不通过原因输入区域 -->

<div v-if="value === 'not_pass'" style="margin-top: 16px;">

<el-form>

<el-form-item label="不通过原因">

<el-input v-model="rejectReason" placeholder="请输入不通过原因"></el-input>

</el-form-item>

</el-form>

<!-- 新增不通过原因确认按钮 -->

<div class="dialog-footer" v-if="value === 'not_pass'">

<el-button @click="RejectReasonCancel">取消</el-button>

<el-button type="primary" @click="RejectReasonSubmit">确认并关闭</el-button>

</div>

</div>

</el-dialog>

<template #footer>

<div class="dialog-footer">

<el-select v-model="value" placeholder="请选择审核结果">

<el-option

v-for="item in options"

:key="item.value"

:label="item.label"

:value="item.value"

/>

</el-select>

<el-button @click="handleClose">取消</el-button>

<el-button type="primary" @click="handleSubmit">确定</el-button>

</div>

</template>

</el-dialog>

</template>

<script lang="ts" setup>

import { ElMessage, ElMessageBox } from 'element-plus'

import { Edit } from '@element-plus/icons-vue'

import { ref } from 'vue'

const dialogVisible = ref(false);

// 嵌套的对话框

const innerVisible = ref(false);

const value = ref('')

const rejectReason = ref('');

const RejectReasonSubmit = () => {

// 提交不通过原因的逻辑,这里仅为演示关闭对话框

ElMessage({

message: '不通过原因已记录',

type: 'success',

});

// 关闭内外两个对话框

innerVisible.value = false;

dialogVisible.value = false;

};

const RejectReasonCancel = () => {

innerVisible.value = false;

};

const handleClose =() =>{

ElMessage({

message:'取消操作',

type:'info'

})

dialogVisible.value = false;

};

const handleSubmit =() =>{

if(value.value ==='not_pass'){

innerVisible.value = true;

}else{

ElMessage({

message: '审核通过',

type:'success'

})

dialogVisible.value = false;

}

};

const options = [

{

value: 'pass',

label: '通过',

},

{

value: 'not_pass',

label: '不通过',

},

];

</script>

相关推荐
烛阴9 分钟前
武装你的Python“工具箱”:盘点10个你必须熟练掌握的核心方法
前端·python
sorryhc25 分钟前
如何设计一个架构良好的前端请求库?
前端·javascript·架构
Queen_sy32 分钟前
vue3 el-date-picker 日期选择器校验规则-选择日期范围不能超过七天
javascript·vue.js·elementui
lvchaoq1 小时前
react 修复403页面无法在首页跳转问题
前端·javascript·react.js
郝开1 小时前
6. React useState基础使用:useState修改状态的规则;useState修改对象状态的规则
前端·javascript·react.js
Codigger官方1 小时前
Linux 基金会牵头成立 React 基金会:前端开源生态迎来里程碑式变革
linux·前端·react.js
90后的晨仔1 小时前
🌟 Vue3 + Element Plus 表格开发实战:从数据映射到 UI 优化的五大技巧
前端
ObjectX前端实验室2 小时前
【图形编辑器架构】🧠 Figma 风格智能选择工具实现原理【猜测】
前端·react.js
天桥下的卖艺者2 小时前
R语言基于shiny开发随机森林预测模型交互式 Web 应用程序(应用程序)
前端·随机森林·r语言·shiny
技术钱2 小时前
vue3 两份json数据对比不同的页面给于颜色标识
前端·vue.js·json