vue页面引入另一个页面

需求描述

定时任务管理页面，在页面里点击查看日志按钮，弹框显示该任务执行的日志
有单独的日志页面，该页面可以查看所有任务执行的日志记录
为了避免写重复代码，在定时任务页面的查看日志弹窗里引入日志页面

实现思路

日志页面要想被引入，首先要导出，所以要在export default里面添加name属性，引入的时候通过导出的name查找组件

export default {name: 'lamlog'
}

在任务页面引入日志页面，定义组件名

import lamlog from '@views/page/job/lamlog.vue';
export default {components: { lamlog }
}

在任务页面使用日志页面组件
注意：上一步中的components的名字和使用时组件的关系，如果components名字为lamLog，则组件名字为lam-log或者lamLog，即 < lam-log >或< lamLog >

<div v-if="showLog"><el-dialog title="任务执行记录" :visible="showLog" width="1200px" :before-close="doCloseLog"><lamlog /> <!--日志页面组件--></el-dialog>
</div>

点击任务页面的查看日志按钮时，需要传递任务编号参数到日志页面，这样才能过滤当前任务的日志

（1）日志页面配置props传值

type为参数类型
default为参数默认值，参数类型为object时，default默认值需要用函数的方法指定
required表示参数是否必传，因为当前页面需要使用，所以required为false

export default {props: {query: {type: Object,default: function () {let obj = {pageNum: 1,numPerPage: 10,dateFrom: '',dateTo: '',jobId: ''};return obj;}}}
}

（2）任务页面传递参数，参数在点击查看按钮时生成。

<!--在组件中传参-->
<lamlog :query="queryLog" />//参数对象
queryLog:{jobId: '',pageNum: 1,numPerPage: 10,
},
//点击查看日志按钮，传递item对象
doShowLog(item) {this.showLog = true;//传参对象内容this.queryLog.jobId = item.jobId;
},

完整代码

日志页面

<template><div><system-table><div slot="top"><el-form ref="form" :inline="true" label-width="100px"><el-form-item label="开始时间"><el-date-pickerv-model="query.dateFrom"type="datetime"value-format="yyyy-MM-dd HH:mm:ss"placeholder="选择日期"/></el-form-item><el-form-item label="结束时间"><el-date-picker v-model="query.dateTo" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期" /></el-form-item><el-form-item label="任务编号"><el-input v-model.trim="query.jobId" style="width: 200px" /></el-form-item><el-button @click="queryList" style="margin-left: 20px" type="primary">查询</el-button></el-form></div><div slot="body"><el-table border ref="table" align="center" :data="data.rows" style="width: 100%"><el-table-column align="right" type="index" label="序号" width="50" /><el-table-column align="left" prop="jobId" label="任务编号" width="70" /><el-table-column align="left" prop="scheduledBy" label="调度实例" width="150" /><el-table-column align="left" prop="triggerTime" label="任务提交时间" width="150"/><el-table-column align="left" prop="executeTime" label="任务执行时间" width="150"/><el-table-column align="left" prop="used" label="耗时" width="50" /><el-table-column align="left" label="是否预警" prop="alermId" width="100" /><el-table-column align="left" prop="jobResult" label="执行结果"  /></el-table><!--分页组件--><div v-if="data.total" class="pagination"><el-paginationbackgroundlayout="total,pager,jumper,sizes":current-page="query.pageNum":page-sizes="[10, 25, 50]":page-size="query.numPerPage":total="data.total"@current-change="handlePageChange"@size-change="handleSizeChange"></el-pagination></div></div></system-table></div>
</template><script>
import { deleteKey, deepClone } from '@/utils';
import MIXIN from '@views/mixin/button';
import { queryLamLogPaging } from '@/api/log';
export default {name: 'lamlog',props: {query: {type: Object,default: function () {let obj = {pageNum: 1,numPerPage: 10,dateFrom: '',dateTo: '',jobId: ''};return obj;},required: false}},mixins: [MIXIN],data() {return {data: {total: 0,rows: []}};},methods: {async getList(num) {let postObj = this.query;let info = await queryLamLogPaging(postObj);if (info.resCode == '0') {this.data = {total: info.data.total,rows: info.data.records || []};}},async getNoticeList() {let postObj = this.query;let info = await queryListPaging(postObj);if (info.resCode == '0') {this.data = {total: info.data.total,rows: info.data.records || []};}},queryList() {this.query.pageNum = 1;this.getList(1);},handlePageChange(num) {this.query.pageNum = num;this.getList(num);},handleSizeChange(num) {this.query.pageNum = 1;this.query.numPerPage = num;this.getList(num);}},mounted() {this.getList();}
};
</script>
<style>
</style>

任务页面

<template><div><system-table><div slot="top"><el-form ref="form" :inline="true" label-width="80px"><el-form-item label="任务名称"><el-input style="width: 200px" v-model.trim="query.jobCron"></el-input></el-form-item><el-form-item label="ip"><el-input style="width: 200px" v-model.trim="query.jobName"></el-input></el-form-item></el-form></div><div slot="search"><el-button @click="queryList" type="primary">查询</el-button><el-button @click="clearSearch" type="warning">清除</el-button></div><div slot="action"><el-button @click="doAdd" type="primary">添加</el-button></div><div slot="body"><el-table border ref="table" align="center" :data="data.rows" style="width: 100%"><el-table-column align="right" type="index" label="序号" width="50" /><el-table-column align="left" prop="jobId" label="任务编号" /><el-table-column align="left" prop="jobName" label="任务名称" /><el-table-column align="left" prop="appCode" label="应用定义" /><el-table-column align="left" prop="jobCron" label="cron表达式" /><el-table-column align="left" prop="jobParams" label="任务参数" /><el-table-column align="left" prop="enabled" label="任务状态"><template slot-scope="scope">{{ statusObj[scope.row.enabled] }}</template></el-table-column><el-table-column label="操作" width="300" align="center" fixed="right"><template slot-scope="scope"><el-button @click="doShowLog(scope.row)" type="primary">查看日志</el-button></template></el-table-column></el-table><!--分页组件--><div v-if="data.total" class="pagination"><el-paginationbackgroundlayout="total,pager,jumper,sizes":current-page="query.pageNum":page-sizes="[10, 25, 50]":page-size="query.numPerPage":total="data.total"@current-change="handlePageChange"@size-change="handleSizeChange"></el-pagination></div></div></system-table><div v-if="showLog"><el-dialog title="任务执行记录" :visible="showLog" width="1200px" :before-close="doCloseLog"><lamlog :query="queryLog" /></el-dialog></div></div>
</template><script>
import { deleteKey, deepClone } from '@/utils';
import MIXIN from '@views/mixin/button';
import { queryListPaging } from '@/api/job';
import lamlog from '@views/page/job/lamlog.vue';
export default {mixins: [MIXIN],components: { lamlog },data() {return {queryLog: {jobId: '',pageNum: 1,numPerPage: 10},showLog: false,query: {jobName: '',jobCron: '',pageNum: 1,numPerPage: 10,typeId: ''},statusObj: {1: '开启',0: '关闭'},data: {total: 0,rows: []}};},methods: {doCloseLog() {this.showLog = false;},doShowLog(item) {this.showLog = true;this.queryLog.jobId = item.jobId;},clearSearch() {this.query.jobName = '';this.query.jobId = '';},async getList(num) {let postObj = deleteKey(this.query);let info = await queryListPaging(postObj);if (info.resCode == '0') {this.data = {total: info.data.total,rows: info.data.records || []};}},queryList() {this.query.pageNum = 1;this.getList(1);},handlePageChange(num) {this.query.pageNum = num;this.getList(num);},handleSizeChange(num) {this.query.pageNum = 1;this.query.numPerPage = num;this.getList(num);}},mounted() {this.getList();}
};
</script>
<style>
</style>

vue页面引入另一个页面相关推荐

一个页面引入另一个页面
action代码片段 public String execute() {String ret = super.execute();if (RETURN_LIST.equals(ret)) {retur ...
从一个页跳到另一个页面，另一个页面检查第一个页面的信息。
任务:从一个页跳到另一个页面,另一个页面检查第一个页面的信息. 1.文件组成:w1.aspx(此页面从w1 class 继承而来),w1.aspx.cs(此文件中定义了class: w1) w2.as ...
如何将一个HTML页面嵌套另一个页面中
如何将一个HTML页面嵌套另一个页面中这个在做网页中常要用到,有些通用的内容可集中放在一个页面文件中,其它要用到这些内容的页面只需要包含(引用)这个通用文件即可.这样便于维护,如果有很多网页,当通用 ...
【大华摄像机hls拉流vue使用videojs展示一个页面多个视频同时播放】
前言主要参考https://blog.csdn.net/qq_39923762/article/details/89149715?spm=1001.2014.3001.5506 我们的项目是在大华摄 ...
HTML页面引入另一个HTML页面，比如各个页面引入通用的网站头部、尾部、导航栏
1. 使用HTML的link标签import另一个HTML页面 1.1 在HTML页面的<head>标签内使用<link>标签引入另一个HTML页面("centerH ...
一个JSP页面引入另一个JSP页面
JSP文件中引入另一个JSP JSP include 指令 JSP include 动作静态导入与动态导入 1.什么是静态导入 2.什么是动态导入总结指令与动作: 静态导入和动态导入区别附:当 ...
iframe和iframe实现页面内嵌套一个页面（jsp）
相信刚学习javaweb的同学都十分好奇页面上点击一个按钮下面就显示一个页面,点击不同的导航栏按钮,下方就会显示不同内容,这就用到了iframe标签的src属性.下面就给大家介绍一下iframe的使用 ...
python爬虫如何从一个页面进入另一个页面-Python爬虫如何获取页面内所有URL链接？本文详解...
如何获取一个页面内所有URL链接?在Python中可以使用urllib对网页进行爬取,然后利用Beautiful Soup对爬取的页面进行解析,提取出所有的URL. 什么是Beautiful Soup ...
JSP页面如何从一个页面传递一个参数到另外一个页面
(1).一种是重定向跳转,超连<a>就是一种重定向跳转,这样的跳转request对象是传不到下一个页面的,下一个页面得到的request对象是一个新的对象,而不是上一个页面传过来的就得不到 ...

vue页面引入另一个页面

需求描述

实现思路

完整代码

vue页面引入另一个页面相关推荐

最新文章

热门文章