vue页面引入另一个页面

需求描述定时任务管理页面，在页面里点击查看日志按钮，弹框显示该任务执行的日志有单独的日志页面，该页面可以查看所有任务执行的日志记录为了避免写重复代码，在定时任务页面的查看日志弹窗里引入日志页面实现思路日志页面要想被引入，首先要导出，所以要在export default里面添加name属性，引入的时候通过导出的name查找组件export default {name: 'lamlog'}在任务页面引

时遇倾城色

10747人浏览 · 2020-11-12 10:42:20

时遇倾城色 · 2020-11-12 10:42:20 发布

需求描述

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

实现思路

日志页面要想被引入，首先要导出，所以要在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-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>

任务页面

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^