vue3封装表单组件（三）02封装el-dialog组件的传值-select选择框、input输入框之查询、重置的使用 & vue3中父子传值的使用步骤

vue3封装表单组件（三）02封装el-dialog组件的传值-select选择框、input输入框之查询、重置的使用 & vue3中父子传值的使用步骤

效果

1、弹框表格-初始页面

2、弹框表格-内容

3、弹框选中内容后，主页表格增加行数

代码

1、页面代码

index.vue

<template>
    <div>
        <h3>科研攻关团队信息</h3>
        <el-button type="primary" @click="examine()">添加科研攻关团队</el-button>
        <div style="margin: 20px;width: 80%;">
            <el-table :data="tableData"  stripe style="width: 100%">
                <el-table-column label="序号" type="index" width="160"></el-table-column>
                <el-table-column prop="teamName" label="名称" width="180">
                </el-table-column>
                <el-table-column prop="teamUnitName" label="所在单位" width="180">
                </el-table-column>
                <el-table-column v-if="route.query.type ==='view'" label="操作" width="150">
                    <template #default="scope">
                        <el-button type="primary" size="default" @click="handleDelete(scope.$index,scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <SelectLab :list="tableData"  :show="showDialogLab" @emit-close="showDialogLab=false" @emit-select="selectLabOk">
        </SelectLab>
    </div>
</template>
<script lang="ts" setup>
import { ref ,reactive,computed} from 'vue'
import SelectLab from '@/components/SelectLab'
import { useRoute,useRouter } from 'vue-router'
import { ElMessage, ElMessageBox, tagEmits } from 'element-plus'

const route = useRoute()
const router = useRouter()
console.log(route.query.type);

let tableData = ref([{
    labId:11,
    teamName: '科技实验室',
    teamUnitName: '集团总部',
}, {
    labId:12,
    teamName: '电力实验室',
    teamUnitName: '北京总部',
}, {
    labId:13,
    teamName: '基建实验室',
    teamUnitName: '昌平分公司',
}, {
    labId:14,
    teamName: '输电实验室',
    teamUnitName: '河北分公司',
}])
const showDialogLab = ref(false)
// view-详情页 'add'-新增页  'edit'-编辑页
const examine =()=>{
    showDialogLab.value = true
    
}

const selectLabOk = (val:any) => {
    console.log(val);
    tableData.value = [...tableData.value,...val]
    
}

const handleDelete =(index:Number,row:any)=>{
    tableData.value.splice(index,1)
}

const handleClose = (done: () => void) => {
  ElMessageBox.confirm('确定关闭当前对话框?')
    .then(() => {
      done()
    })
    .catch(() => {
      // catch error
    })
}
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>

2、封装组件

src\components\SelectLab.vue

<template>
    <!-- title="选择科研攻关团队" -->
    <el-dialog v-model="showDia" :title="title" width="80%" @close="close()">
        <div style="display:flex">
            <div style="flex:9">
                <el-form ref="formRef" :inline="true"  :model="form">
                    <el-form-item label="名称："  prop="labName">
                        <el-input v-model="form.labName" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="所在单位：" prop="labUnitName">
                        <el-input v-model="form.labUnitName" placeholder="请输入"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div style="flex:2">
                <el-button type="primary" size="default" @click="query">查询</el-button>
                <el-button type="primary" size="default" @click="resetForm ()">重置</el-button>
            </div>
        </div>
        <div>
            <el-table ref="tableRef" :data="tableData" stripe style="width: 100%" @selection-change="selectChange">
                <el-table-column type="selection" width="160"></el-table-column>
                <el-table-column label="序号" type="index" width="160"></el-table-column>
                <el-table-column prop="teamName" label="名称" width="180">
                </el-table-column>
                <el-table-column prop="teamUnitName" label="所在单位" width="180">
                </el-table-column>
            </el-table>
        </div>
        <div class="pagin-bottom">
            <el-pagination :currentPage="form.pageNumber" layout="total, sizes, prev, pager, next, jumper"
                :page-sizes="[10, 20, 30, 40]" :total="total" @current-change="changePageNum"
                @size-change="changePageSize" />
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" @click="okSelect()">
                    确定
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script lang="ts" setup>
/**
 * 组件引用方式：
 * 1、导入组件： import SelectLab from '@/components/SelectLab'
 * 2、组件引用： <SelectLab :list="tableData"  :show="showDialogLab" @emit-close="showDialogLab=false" @emit-select="selectLabOk">
 * 3、参数说明： ①  :selected 是传入数据  :select="[]" 已废弃
 *              ②  :show 是控制组件显示关闭的变量
 *              ③  @emit-close 关闭弹框事件，即showDialogLab=false
 *              ④  @emit-select  确定事件，接受传出的数据，接收一个参数
 */
import { ref, reactive, computed, watch, unref  } from 'vue'
// import { getLabsV2 } from '@/api/couny'
import { ElMessage } from 'element-plus'
const formRef = ref(null)
let tableRef = ref(null)
const tableData = ref([{
    labId: 1,
    teamName: '科技实验室',
    teamUnitName: '集团总部',
}, {
    labId: 2,
    teamName: '电力实验室',
    teamUnitName: '北京总部',
}, {
    labId: 3,
    teamName: '基建实验室',
    teamUnitName: '昌平分公司',
}, {
    labId: 4,
    teamName: '输电实验室',
    teamUnitName: '河北分公司',
}])

// 监听方法
const emits = defineEmits(['emit-select', 'emit-close', 'update:show'])
// 传入参数，包含：已选的数据，显示属性
const props = defineProps({
    // 外部带入的已选择的数据，用来回显打勾 todo 暂未处理该变量
    show: {
        type: Boolean,
        default() {
            return false
        }
    },
    list: {
        type: Array,
        default() {
            return []
        }
    },
    title:{
        type:String,
        default(){
            return '选择科研攻关团队'
        }
    }
})
const thisSelected = ref([])
let showDia = computed({
    get: () => props.show,
    set: (val: any) => emits('update:show', val)
})
// 仅在显示时加载数据
watch(showDia, async () => {
    console.log('showDia',showDia);
    if (showDia.value) {
        thisSelected.value = []
        query()
    }
})

const form = reactive({
    labName: '',
    labUnitName: '',
    pageSize: 10,
    pageNumber: 1,
})
const total = ref(0)

// 每页数量改变
const changePageSize = (val: any) => {
    form.pageSize = val
    query()
}
// 页码改变
const changePageNum = (val: any) => {
    form.pageNumber = val
    query()
}

// 选择数据
const selectChange = (val: any) => {

    console.log('选择数据', val);

    thisSelected.value = val
}

// 请求查询
const query = async () => {
    tableRef.value!.clearSelection()
    // await getLabsV2(form).then((res:any)=>{
    //     tableData.value = res.data.data
    //     total.value = res.data.total
    // })
}

// 重置
const resetForm = () =>{
    const a = unref(formRef)
    a.resetFields()
    // console.log(formRef.value);
    // formRef.value.resetFields()
}

// 相同元素
const isSame = (arr1: any, arr2: any) => {
    return arr1.filter((item: any) => {
        return arr2.some((i: any) => item.labId == i.labId)
    })
}

// 确定选择，传出数据，关闭事件
const okSelect = () => {
    if (isSame(props.list, thisSelected.value).length > 0) {
        ElMessage({
            type: 'error',
            message: '存在同一实验室，请重新选择！',
        })
    } else {
        emits('emit-select', thisSelected.value)
        console.log('biao', props.list)
        emits('emit-close', false)
    }
}

// 关闭事件
const close = () => {
    emits('emit-close', false)
}
</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
    })
}

// 立项管理-实验室/可研攻关团队
export const getLabsV2 =(data)=>{
    
    
    return request({
    
    
        url:`${
      
      url}/unit/getLabsV2`,
        method:'post',
        data
    })
}