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
})
}