同一组件中的两个组件可合并可拆分之el-dialog组件div组件的拆分即融合

<!--
  **作者：dingwangjun
  **描述：首页质控整改记录单
  **描述：同一组件中的两个组件可合并可拆分
  **描述：el-dialog组件和<div id="targetDiv">组件
-->
<template>
    <div class="zkZgRecordList">
        <el-dialog title="首页整改单"
                   width="850px"
                   append-to-body
                   v-model="zkZgJldVisible"
                   :close-on-click-modal="false"
                   custom-class="el-dialog-center-auto">
            <div id="sourceDiv"></div>
        </el-dialog>
        <!--同一组件中的两个组件可合并可拆分-->
        <div id="targetDiv">
            <div style="width: 800px;padding: 10px;">
                <span class="tag_pat_div_font">基础信息</span>
                <div style="padding: 5px;">
                    <el-form ref="form" label-width="120px" class="theme-el-form">
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="首页质控员" label-width="120px">
                                    2023-12-04 10:45
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="" label-width="120px"></el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="" label-width="120px"></el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="首页质控员" label-width="120px">
                                    2023-12-04 10:45
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="医生病历质控员" label-width="120px">
                                    2023-12-04 10:45
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="护士病历质控员" label-width="120px">
                                    2023-12-04 10:45
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="质控类别" label-width="120px">
                                    2023-12-04 10:45
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="整改期限" label-width="120px">
                                    2023-12-04 10:45
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="" label-width="120px"></el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
                <span class="tag_pat_div_font">首页整改单</span>
                <div style="padding: 5px;">
                    <el-form ref="form" label-width="120px" class="theme-el-form">
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="首页质控评分" label-width="120px">
                                    95
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="首页整改医师" label-width="120px">
                                    医师A、医师B、医师C
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="抄送管理者" label-width="120px">
                                    医师A、医师B、医师C
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
                <el-table border class="theme-el-table" :data="zgdList" :height="250">
                    <el-table-column type="index" width="100" label="序号" align="center"></el-table-column>
                    <el-table-column prop="wslx" label="文书类型" width="150" align="center" show-overflow-tooltip/>
                    <el-table-column prop="xmmc" label="评分项名称" min-width="100" align="center" show-overflow-tooltip/>
                    <el-table-column prop="kf" label="扣分" width="100" align="center" show-overflow-tooltip/>
                    <el-table-column prop="zgks" label="整改科室" width="150" align="center" show-overflow-tooltip/>
                </el-table>
            </div>
        </div>
    </div>
</template>
<script>
    import { mapGetters } from 'vuex'
    import { warnMsg } from '@/utils/msgBox'
    export default {
        props: {

        },
        data() {
            return {
                zkZgJldVisible: false,
                zgdList: [
                    {wslx: '住院病案首页',xmmc: '联系人关系',kf: '0.65',zgks: '感染科'},
                    {wslx: '住院病案首页',xmmc: '联系人证件',kf: '0.25',zgks: '心理科'},
                ],
            }
        },
        computed: {
            ...mapGetters(['user'])
        },
        mounted(){

        },
        methods: {
            onInit(flag){
                if(flag=='1'){
                    // el-dialog弹框式打开
                    this.zkZgJldVisible = true
                    this.$nextTick(()=>{
                        let sourceDiv = document.getElementById("sourceDiv")
                        let targetDiv = document.getElementById("targetDiv")
                        sourceDiv.innerHTML = targetDiv.innerHTML
                    })
                }else {
                    // 嵌入式组件页面嵌入显示的是<div id="targetDiv">
                    this.zkZgJldVisible = false
                }
            },
        }
    }
</script>