子组件跳转父组件

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

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

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

 父组件

父组件跳转子组件

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

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

/**
     * 弹出线路申请单关联界面
     */
    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);
 
        },

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