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>

相关推荐

  1. uViw Dialog 对话框

    2024-03-29 04:14:02       38 阅读
  2. Compose | UI组件(八) | Dialog - 对话框

    2024-03-29 04:14:02       30 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-03-29 04:14:02       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-03-29 04:14:02       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-03-29 04:14:02       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-03-29 04:14:02       20 阅读

热门阅读

  1. 蓝桥集训之小国王

    2024-03-29 04:14:02       19 阅读
  2. 数据仓库——无事实的事实表

    2024-03-29 04:14:02       20 阅读
  3. 31-4 命令执行漏洞 - RCE原理

    2024-03-29 04:14:02       20 阅读
  4. Day29:学习SpringCloud

    2024-03-29 04:14:02       21 阅读
  5. 学会这10个Python脚本来完成你的日常任务

    2024-03-29 04:14:02       19 阅读
  6. 突然断电导致git损坏修复

    2024-03-29 04:14:02       19 阅读
  7. 算法日记————对顶堆(4道题)

    2024-03-29 04:14:02       18 阅读
  8. go env 命令详解

    2024-03-29 04:14:02       18 阅读
  9. MongoDB聚合运算符:$isArray

    2024-03-29 04:14:02       18 阅读