vue3 encapsulates the form component (3) 01 encapsulates the value passing of the el-dialog component - the use of radio radio button, defineEmits and defineProps of the form form

vue3 encapsulates the form component (3) 01 encapsulates the value passing of the el-dialog component - the use of radio radio button, defineEmits and defineProps of the form form

Effect

Method 1: Conventional writing method

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>

Method 2: Encapsulation writing method

1. Page

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>

Reference component

2. Components

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>

Reference interface

3. Interface

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