vue3封装表单组件（三）01封装el-dialog组件的传值-radio单选框、form表单之defineEmits、defineProps的使用

vue3封装表单组件（三）01封装el-dialog组件的传值-radio单选框、form表单之defineEmits、defineProps的使用

效果

方式一：常规写法

index.vue

<template> <div class="about"> <el-button type="primary" @click="examine">审核对话框</el-button> <el-dialog v-model="dialogVisible" title="审批" width="35%" :before-close="handleClose"> <el-form ref="emamineformRef" label-width="100px" :model="examineData"> <el-form-item label="审核结果：" prop="processState"> <el-radio-group v-model="examineData.processState"> <el-radio :label="4">通过</el-radio> <el-radio :label="5">不通过</el-radio> <el-radio :label="2">返回修改</el-radio> </el-radio-group> </el-form-item> <el-form-item label="意见：" size="normal" prop="opinion"> <el-input v-model="examineData.opinion" placeholder="请输入意见" :autosize="{minRows:3,maxRows:4}" maxlength="200" show-word-limit type="textarea" @change=""></el-input> </el-form-item> </el-form> <template #footer> <span class="dialog-footer"> <el-button @click="dialogVisible = false">取消</el-button> <el-button type="primary" @click="examineEvent"> 确认 </el-button> </span> </template> </el-dialog> </div> </template> <script lang="ts" setup> import { reactive, ref } from 'vue' import { approval } from '@/api/couny' import examineDialog from '@/components/examineDialog' import { ElMessage, ElMessageBox } from 'element-plus' const examineData = ref({ opinion:'', processState:'' }) const dialogVisible = ref(false) const handleClose = (done: () => void) => { ElMessageBox.confirm('确定关闭当前对话框?') .then(() => { done() }) .catch(() => { // catch error }) } const examine = () =>{ const tableDataSelectList = [1] if(tableDataSelectList.length === 0){ ElMessage.error(`请勾选审核项`) }else{ dialogVisible.value = true } } const examineEvent =async()=>{ await approval(examineData.value).then((res:any)=>{ if(res.code === 200){ ElMessage({ type:'success', message:'操作成功！' }) // onload()//刷新表格 }else{ ElMessage({type:'error',message:res.data.msg}) } }) } </script> <style scoped> .about { width: 500px; } </style> 

方式二：封装写法

1、页面

index.vue

<template> <div class="about"> <el-button type="primary" @click="examine">审核对话框</el-button> <examineDialog v-model:is-show="dialogVisible" @examine-save="examineEvent"></examineDialog> </div> </template> <script lang="ts" setup> import { reactive, ref } from 'vue' import { approval } from '@/api/couny' import examineDialog from '@/components/examineDialog' import { ElMessage, ElMessageBox } from 'element-plus' const dialogVisible = ref(false) const examine = () =>{ const tableDataSelectList = [1] if(tableDataSelectList.length === 0){ ElMessage.error(`请勾选审核项`) }else{ dialogVisible.value = true } } const examineEvent =(data:any) =>{ console.log('传回的组件数据',data); // const idList =ref([]) // selectTable.value.forEach((item)=>{ // idList.value.push(item.id) // }) // ids = idList.value data.ids = [1,2] // approval(data).then((res:any)=>{ // const {success} =res // if(success){ // onload() // 刷新表格 ElMessage.success('审核成功') dialogVisible.value = false // } // }) } </script> <style scoped> .about { width: 500px; } </style> 

引用组件

2、组件

src\components\examineDialog.vue

<template> <div> <el-dialog v-model="dialogShow" title="审批" width="35%" align-center @close="closeDialog"> <el-form ref="emamineformRef" label-width="100px" :model="formInlineAudit"> <el-form-item prop="approve"> <template #label> <span style="width:100px;text-align:right">审核结果：</span> </template> <el-radio-group v-model="formInlineAudit.approve"> <el-radio :label="'4'">通过</el-radio> <el-radio :label="'5'">不通过</el-radio> <el-radio :label="'2'">返回修改</el-radio> </el-radio-group> </el-form-item> <el-form-item size="normal" prop="advice"> <template #label> <span style="width:100px;text-align:right">审核意见：</span> </template> <el-input v-model="formInlineAudit.advice" placeholder="请输入意见" :autosize="{ minRows: 3, maxRows: 4 }" maxlength="200" show-word-limit type="textarea" ></el-input> </el-form-item> </el-form> <template #footer> <span class="dialog-footer"> <el-button @click="dialogVisible = false">取消</el-button> <el-button type="primary" @click="examineSubmit"> 确认 </el-button> </span> </template> </el-dialog> </div> </template> <script lang="ts" setup> import { computed } from '@vue/reactivity'; import { ref } from 'vue' const formInlineAudit = ref({ approve:'4', advice:'', ids:[] }) const props = defineProps({ isShow:{ type:Boolean, default:()=>{ false } } }) const emit = defineEmits(['update:isShow','examineSave']) const dialogShow = computed({ get:()=>props.isShow, set:(value)=>{ emit('update:isShow',value) } }) const closeDialog = () =>{ formInlineAudit.value.advice='', formInlineAudit.value.ids = [], dialogShow.value = false } const examineSubmit = () =>{ emit('examineSave',formInlineAudit.value) } </script> 

引用接口

3、接口

src\api\couny.js

// import request from '@/utils/request' const url = '/thingsgrid-science' //枚举值查询--写法一 export const queryId = (id)=>{ 
    return request({ 
    url:`${ 
     url}/dict/queryDictById`, method:'post', data }) } // 获取表格数据 -- 写法二 export function getList(params){ 
    return request({ 
    url:'api/thingsgrid-system/dept/lazy-list', method:'get', params, }) } // 删除数据 -- 写法三 export function remove (params){ 
    return request({ 
    url:'api/thingsgrid-system/dept/remove', method:'post', params, }) } // 牵头单位组织树列表 export const getUnits = (data)=>{ 
    return request({ 
    url:`${ 
     url}/unit/getUnits`, method:'post', data }) } // 审核 export const approval =(data)=>{ 
    return request({ 
    url:`${ 
     url}/mediumExam/approval`, method:'post', data }) } 

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/10750.html