vue页面引入另一个页面

需求描述

• 定时任务管理页面，在页面里点击查看日志按钮，弹框显示该任务执行的日志
  

• 有单独的日志页面，该页面可以查看所有任务执行的日志记录
  

• 为了避免写重复代码，在定时任务页面的查看日志弹窗里引入日志页面

实现思路

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

export default {
    name: 'lamlog'
}

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

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

3. 在任务页面使用日志页面组件
   注意： 上一步中的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>

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

（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; 
},

完整代码

1. 日志页面

<template>
    <div>
        <system-table>
            <div slot="top">
                <el-form ref="form" :inline="true" label-width="100px">
                    <el-form-item label="开始时间">
                        <el-date-picker
                            v-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-pagination
                        background
                        layout="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>

2. 任务页面

<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-pagination
                        background
                        layout="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>