描述：父组件Form.vue 点击关联，弹出子组件importForm.vue 选中一条数据之后，点击确定按钮，关闭子组件importForm.vue，将子组件的内容显示在父组件Form.vue中

选中第一条数据，点击确定

                                                父组件对应的工作内容就有了

 父组件

父组件跳转子组件

 this.$refs.子组件.子组件中的方法的方法名(父组件给子组件方法传的参数)

<el-input v-model="dataForm.LineAppFormId" placeholder="请点击输入框进行关联" clearable
                :style='{ "width": "100%" }' readonly @click.native="openAppForm()">
</el-input>

/**
     * 弹出线路申请单关联界面
     */
    openAppForm() {
      // this.dataForm.LineAppFormId='';
      this.appFormVisible = true;
      this.$nextTick(() => {
        this.$refs.APPForm.sendParam(this.dataForm.LineAppFormId)
      })
    },

<APP-Form v-if="appFormVisible" ref="APPForm" @assignMent="assignMent" @func="hiddenAppForm"/>

import APPForm from './appForm'

export default {
  components: { APPForm, },

}


    /**
     * 勾选中的数据进行表单赋值
     */
    assignMent(param) {
      console.log('关联线路申请单关闭',param)
      this.appFormVisible = false;
      //线路申请单id
      this.dataForm.LineAppFormId = param.id;
      //工作内容
      this.dataForm.workContent = param.workContent;
    },
      hiddenAppForm(){
      this.appFormVisible = false;
    },

子组件

子组件给父组件

this.$emit('父组件中方法的方法名', 子组件给父组件传的参数);

 sendParam(id) {
            if (id != null && id != '') {
                this.checkedId = id;
            }
        },
        /**
         * 列表复选框选中change事件
         * @author fuzibo
         * @date 2023-03-08
         * @copyright 上海柒志科技有限公司
         */
        handleSelectionChange(val) {
            this.recordData = '';
            this.recordLenth = val.length;
            if (val.length > 1) {
                this.$message({
                    message: '只能关联一条申请单数据',
                    type: "error",
                    duration: 1000,
                });
                return;
            }
            //记录勾选的数据
            this.recordData = val[0];
            console.log('勾选的数据为>>>', val)
        },

        //确定关联线路申请单
        dataFormSubmit() {
            if (this.recordLenth > 1 || this.recordLenth == '') {
                this.$message({
                    message: '请关联一条申请单数据',
                    type: "error",
                    duration: 1000,
                });
                return;
            }
            this.visible = false;
            let data = this.recordData;
            //调用父组件进行传值
            this.$emit('assignMent', data);

        },

<template>
    <el-dialog :before-close="closeDialog" title="线路申请单" :close-on-click-modal="false" append-to-body
        :visible.sync="visible" class="JNPF-dialog JNPF-dialog_center" lock-scroll width="75%">
        <div class="JNPF-common-layout">
            <div class="JNPF-common-layout-center">
                <el-row class="JNPF-common-search-box" :gutter="16">
                    <el-form @submit.native.prevent>
                        <el-col :span="4">
                            <el-form-item label="变电站">
                                <el-select v-model="query.stationId" placeholder="请选择" clearable @change="stationNameChange"
                                    filterable>
                                    <el-option v-for="(item, index) in stationIdOptions" :key="index" :label="item.name"
                                        :value="item.id" :disabled="item.disabled"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item label="设备名称">
                              <el-input v-model="query.equipName" placeholder="请输入"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-form>
                </el-row>
                <div class="JNPF-common-layout-main JNPF-flex-main">

                    <JNPF-table ref="multipleTable" v-loading="listLoading" :data="list" @sort-change='sortChange' has-c
                        @selection-change="handleSelectionChange">
                        <el-table-column prop="voltageName" label="电压等级" min-width="50" align="center" />
                        <el-table-column prop="stationName" label="变电站" min-width="60" align="center" />
                        <el-table-column prop="equipName" label="回路" min-width="130" align="center" />
<!--                        <el-table-column prop="months" label="计划停电月份" min-width="70" align="center" />-->
                        <el-table-column label="开始日期" prop="workSTime" min-width="85" algin="center">
                            <template slot-scope="scope">
                                {{ scope.row.workSTime | toDate('yyyy-MM-dd HH:mm') }} {{ scope.row.beginTime }}
                            </template>
                        </el-table-column>
                        <el-table-column label="结束日期" prop="workETime" min-width="85" algin="center">
                            <template slot-scope="scope">
                                {{ scope.row.workETime | toDate('yyyy-MM-dd HH:mm') }} {{ scope.row.endTime }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="operateState" label="停电状态" min-width="80" align="center" />
                        <el-table-column prop="workContent" label="主要工作内容" min-width="300" align="left" />

                    </JNPF-table>
                    <pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize"
                        @pagination="initData" />
                </div>
            </div>

        </div>

        <span slot="footer" class="dialog-footer">
            <el-button @click="closeDialog()"> 取 消</el-button>
            <el-button type="primary" @click="dataFormSubmit()"> 确 定</el-button>
        </span>
    </el-dialog>
</template>
<script>
//业务后台接口api方法，js文件存放的api目录由开发人员进行调整
import { listStation, listEquip, listWeeklyPlan } from "@/api/qizCust/information/common/common"

export default {
    components: {},
    data() {
        return {
            visible: true,
            recordLenth: '',
            recordData: '',
            detailVisible: false,
            query: {
                stationId: undefined,
                equipName: undefined,
                equipId: undefined,
                workSTime: undefined,
            },
            treeProps: {
                children: 'children',
                label: 'fullName',
                value: 'id'
            },
            list: [],
            listLoading: true,
            total: 0,
            listQuery: {
                currentPage: 1,
                pageSize: 20,
                sort: "desc",
                sidx: "",
            },
            formVisible: false,
            exportBoxVisible: false,
            columnList: [
                { prop: 'voltageName', label: '电压等级' },
                { prop: 'stationId', label: '变电站' },
                { prop: 'equipId', label: '回路名称' },
                // { prop: 'months', label: '计划停电月份' },
                { prop: 'workSTime', label: '开始日期' },
                { prop: 'workETime', label: '结束日期' },
                { prop: 'operateState', label: '停电状态' },
                { prop: 'workContent', label: '主要工作内容' },
            ],
            stationIdOptions: [],
            stationIdProps: { "label": "fullName", "value": "id" },
            equipIdOptions: [],
            equipIdProps: { "label": "fullName", "value": "id" },
            checkedId: '',
        }
    },
    /**
       * 开启watch列表数据监听，自动勾选已选中的行数据
       */
    watch: {
        listLoading: {
            handler(val) {
                if (!val) {
                    this.$nextTick(() => {
                        this.list.forEach(row => {
                            if (this.checkedId === row.id) {
                                this.$refs.multipleTable.$refs.JNPFTable.toggleRowSelection(row, true)
                            }
                        })
                    })
                }
            },
            deep: true
        }
    },
    computed: {
        menuId() {
            return this.$route.meta.modelId || ''
        }
    },
    created() {
        //初始化列表数据
        this.initData()
    },
    methods: {
        sendParam(id) {
          console.log('关联表id',id)
            if (id != null && id != '') {
                this.checkedId = id;
            }

        },
        /**
   * 列表复选框选中change事件
   */
        handleSelectionChange(val) {
            this.recordData = '';
            this.recordLenth = val.length;
            if (val.length > 1) {
                this.$message({
                    message: '只能关联一条申请单数据',
                    type: "error",
                    duration: 1000,
                });
                return;
            }
            //记录勾选的数据
            this.recordData = val[0];
            console.log('勾选的数据为>>>', val)
        },
        //关闭线路申请单弹出框
        closeDialog() {
            this.visible = false;
            this.$emit('func', true);
        },

        //确定关联线路申请单
        dataFormSubmit() {
            if (this.recordLenth > 1 || this.recordLenth == '') {
                this.$message({
                    message: '请关联一条申请单数据',
                    type: "error",
                    duration: 1000,
                });
                return;
            }
            this.visible = false;
            let data = this.recordData;
            //调用父组件进行传值
            this.$emit('assignMent', data);

        },
        /**
* 打开详情表单页面
*/
        goDetail(id) {
            this.detailVisible = true
            this.$nextTick(() => {
                this.$refs.Detail.init(id)
            })
        },
        /**
         * 列表字段排序
         */
        sortChange({ column, prop, order }) {
            this.listQuery.sort = order == 'ascending' ? 'asc' : 'desc'
            this.listQuery.sidx = !order ? '' : prop
            this.initData()
        },
        /**
         * 初始化加载列表数据
         */
        initData() {
            this.listLoading = true;
            let _query = {
                ...this.listQuery,
                ...this.query,
                menuId: this.menuId
            };
          console.log('输入参数',_query)
            listWeeklyPlan(_query).then(res => {
                var _list = [];
                for (let i = 0; i < res.data.list.length; i++) {
                    let _data = res.data.list[i];
                    _list.push(_data)
                }
                this.list = _list
                this.total = res.data.pagination.total

                this.listLoading = false
            })
        },
        
        /**
         * 执行查询
         */
        search() {
            this.listQuery = {
                currentPage: 1,
                pageSize: 20,
                sort: "desc",
                sidx: "",
            }
            this.initData()
        },
        /**
         * 刷新列表数据
         */
        refresh(isrRefresh) {
            this.formVisible = false
            if (isrRefresh) this.reset()
        },
        /**
         * 重置查询条件
         */
        reset() {
            for (let key in this.query) {
                this.query[key] = undefined
            }
            this.search()
        }
    }
}
</script>