子组件跳转父组件

描述：父组件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;//线路申请单idthis.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 = truethis.$nextTick(() => {this.$refs.Detail.init(id)})},/*** 列表字段排序*/sortChange({ column, prop, order }) {this.listQuery.sort = order == 'ascending' ? 'asc' : 'desc'this.listQuery.sidx = !order ? '' : propthis.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 = _listthis.total = res.data.pagination.totalthis.listLoading = false})},/*** 执行查询*/search() {this.listQuery = {currentPage: 1,pageSize: 20,sort: "desc",sidx: "",}this.initData()},/*** 刷新列表数据*/refresh(isrRefresh) {this.formVisible = falseif (isrRefresh) this.reset()},/*** 重置查询条件*/reset() {for (let key in this.query) {this.query[key] = undefined}this.search()}}
}
</script>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/130575.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【深度学习】Chinese-CLIP 使用教程，图文检索，跨模态检索，零样本图片分类

【深度学习】Chinese-CLIP 使用教程，图文检索，跨模态检索，零样本图片分类

代码&#xff1a;https://github.com/OFA-Sys/Chinese-CLIP/blob/master/deployment.md 文章目录 安装环境和onnx推理转换所有模型为onnx测试所有onnx模型的脚本onnx cpu方式执行docker镜像 安装环境和onnx推理 安装环境&#xff0c;下载权重放置到指定目录&#xff0c;进行on…
阅读更多...
Kubernetes革命：云原生时代的应用编排和自动化

Kubernetes革命：云原生时代的应用编排和自动化

文章目录 什么是Kubernetes以及为何它备受欢迎&#xff1f;云原生应用和K8s的关系Kubernetes的核心概念&#xff1a;Pods、Services、ReplicaSets等部署、扩展和管理应用程序的自动化容器编排的演进&#xff1a;Docker到Kubernetes实际用例&#xff1a;企业如何受益于K8s的应用…
阅读更多...
相机坐标系之间的转换

相机坐标系之间的转换

一、坐标系之间的转换 一个有4个坐标系&#xff1a;图像坐标系、像素坐标系、相机坐标系、世界坐标系。 1.图像坐标系和像素坐标系之间的转换 图像坐标系和像素坐标系在同一个平面&#xff0c;利用平面坐标系之间的转换关系可以之知道两个坐标系变换的公式&#xff0c;并且该…
阅读更多...
MFC文本输出学习

MFC文本输出学习

void CTxttstView::OnDraw(CDC* pDC) {CTxttstDoc* pDoc GetDocument();ASSERT_VALID(pDoc);// TODO: add draw code for native data hereCString str1;pDC->SetBkColor(RGB(0,0,0));pDC->TextOut(50, 50, "一段文字");pDC->SetBkColor(RGB(255,255,255))…
阅读更多...
关于 打开虚拟机出现“...由VMware产品创建，但该产品与此版VMwareWorkstateion不兼容，因此无法使用” 的解决方法

关于 打开虚拟机出现“...由VMware产品创建，但该产品与此版VMwareWorkstateion不兼容，因此无法使用” 的解决方法

文为原创文章&#xff0c;转载请注明原文出处 本文章博客地址&#xff1a;https://hpzwl.blog.csdn.net/article/details/133678951 红胖子(红模仿)的博文大全&#xff1a;开发技术集合&#xff08;包含Qt实用技术、树莓派、三维、OpenCV、OpenGL、ffmpeg、OSG、单片机、软硬结…
阅读更多...
超低延时直播技术演进之路-进化篇

超低延时直播技术演进之路-进化篇

一、概述 网络基础设施升级、音视频传输技术迭代、WebRTC 开源等因素&#xff0c;驱动音视频服务时延逐渐降低&#xff0c;使超低延时直播技术成为炙手可热的研究方向。实时音视频业务在消费互联网领域蓬勃发展&#xff0c;并逐渐向产业互联网领域加速渗透。经历了行业第一轮的…
阅读更多...
图的应用：关键路径 ← PPT

图的应用：关键路径 ← PPT

阅读更多...
Spark 9：Spark 新特性

Spark 9：Spark 新特性

Spark 3.0 新特性 Adaptive Query Execution 自适应查询(SparkSQL) 由于缺乏或者不准确的数据统计信息(元数据)和对成本的错误估算(执行计划调度)导致生成的初始执行计划不理想&#xff0c;在Spark3.x版本提供Adaptive Query Execution自适应查询技术&#xff0c;通过在”运行…
阅读更多...
Kafka集群架构设计原理详解

Kafka集群架构设计原理详解

从 Zookeeper 数据理解 Kafka 集群工作机制 这一部分主要是理解 Kafka 的服务端重要原理。但是 Kafka 为了保证高吞吐&#xff0c;高性能&#xff0c;高可扩展的三高架构&#xff0c;很多具体设计都是相当复杂的。如果直接跳进去学习研究&#xff0c;很快就会晕头转向。所以&am…
阅读更多...
SpringBoot 对接 MinIO 实现文件上传下载删除

SpringBoot 对接 MinIO 实现文件上传下载删除

前言 MinIO 是一个开源的对象存储服务器&#xff0c;它可以存储大容量非结构化的数据&#xff0c;例如图片、音频、视频、日志文件、备份数据和容器/虚拟机镜像等。 Spring Boot 与 MinIO 的整合可以方便地实现文件的上传和下载等功能 在实际应用中&#xff0c;Spring Boot …
阅读更多...
再获深交所认可，Smartbi实力领跑金融BI赛道

再获深交所认可，Smartbi实力领跑金融BI赛道

“十四五”规划中提到&#xff0c;健全具有高度适应性、竞争力、普惠性的现代金融体系&#xff0c;构建有效支撑实体经济的体制机制。《证券期货业科技发展“十四五”规划》作为指导证券期货业科技发展的纲领性文件&#xff0c; 秉承国家“十四五”规划的数字化发展理念&#x…
阅读更多...
flutter开发实战-Universal Links配置及flutter微信分享实现

flutter开发实战-Universal Links配置及flutter微信分享实现

flutter开发实战-Universal Links配置及flutter微信分享实现 在最近开发中碰到了需要实现微信分享&#xff0c;在iOS端需要配置UniversalLink&#xff0c;在分享使用fluwx插件来实现微信分享功能。 一、配置UniversalLink 1.1、什么是UniversalLink Universal link 是Apple…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023