精华内容
下载资源
问答
  • vue页面引入另一个页面

    千次阅读 2020-11-12 10:42:20
    需求描述 ... 有单独的日志页面,该页面可以查看所有任务执行的日志记录 ...为了避免写重复代码,在定时任务页面的查看日志弹窗里引入日志页面 ...在任务页面引入日志页面 import lamlog from '@v

    需求描述

    • 定时任务管理页面,在页面里点击查看日志按钮,弹框显示该任务执行的日志
      在这里插入图片描述

    • 有单独的日志页面,该页面可以查看所有任务执行的日志记录
      在这里插入图片描述

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

    实现思路

    1. 日志页面要想被引入,首先要导出,所以要在export default里面添加name属性,引入的时候通过导出的name查找组件
    export default {
        name: 'lamlog'
    }
    
    1. 在任务页面引入日志页面,定义组件名
    import lamlog from '@views/page/job/lamlog.vue';
    export default {
        components: { lamlog }
    }
    
    1. 在任务页面使用日志页面组件
      注意: 上一步中的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. 点击任务页面的查看日志按钮时,需要传递任务编号参数到日志页面,这样才能过滤当前任务的日志

    (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>
    
    1. 任务页面
    <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一个页面引入另一个页面

    万次阅读 多人点赞 2018-11-12 14:46:30
    1.先写好一个demo页面 demo.vue &lt;template&gt; &lt;div&gt; &lt;h1&gt;11111&lt;/h1&gt; &lt;/div&gt; &lt;/template&gt; &lt;script&gt; ...

    1.先写好一个demo页面

    demo.vue
     <template>
      <div>
        <h1>11111</h1>
      </div>
     </template>
     <script>
        export default {}
     </script>
     <style scoped>
     </style>
    

    2.在写另一个页面

    <template>
      <div>
        <h1>2222</h1>
        <Demo></Demo>
      </div>
    </template>
    import demo from '@/xxx/xxx/demo.vue'  <!-- demo: 是别名  @/xxx/xxx/demo.vue: demo页面的路径,@是src  -->
    <script>
        export default {
          data () {
          return {},
          methods: {},
          mounted () {},
          components: {
            'Demo': demo  //将别名demo 变成 组件 Demo
          }
    }
    </script>
    <style scoped>
    </style>
    
    展开全文
  • VUE弹窗加载另一个VUE页面

    万次阅读 2020-04-03 17:12:23
    角色列表Uacter.vue页面,点击【菜单设置】按钮,弹出角色菜单MenuRole.vue页面,也就是说实现的是一个弹窗功能,只不过加载的vue页面 说来惭愧,这是我应用vue的第4天,好多东西都不知道,然后就是现学现用 首先...

    之前实现了一个功能VUE利用tree-transfer插件实现角色菜单动态设置

    在这个功能的基础上,进一步完善

    角色列表Uacter.vue页面,点击【菜单设置】按钮,弹出角色菜单MenuRole.vue页面,也就是说实现的是一个弹窗功能,只不过加载的vue页面

    说来惭愧,这是我应用vue的第4天,好多东西都不知道,然后就是现学现用

    首先肯定是找百度啊

    主要参考的列子:vue编辑、新增弹框(引用外部页面)

    但是按照上边这个方法,我的弹窗一直都没有显示出来,一个大的改动点是我Uacter.vue页面引用MenuRole时直接包裹在dialog里边

    菜单权限按钮:

    <el-button type="info" @click="handleClick3(scope.row.id)"   size="mini">菜单权限</el-button>

    引入MenuRole页面:

    <el-dialog  :visible.sync="menuRoleVisible" append-to-body>
        <menu-role v-if="menuRoleVisible" ref="menuRole"></menu-role>
    </el-dialog>

    编辑按钮触发方法:

       //设置菜单权限
        handleClick3(id){
            let roleId = id;
            this.menuRoleVisible = true;
            this.$nextTick(()=>{
                this.$refs.menuRole.dataInitialization(roleId);
           })
        }

    MenuRole.vue完整代码:

    <template>
        <div class="widget-content">
            <tree-transfer :title="title"
                           :from_data='fromData'
                           :to_data='toData'
                           :defaultProps="{label:'label',value:'id'}"
                           @addBtn='add'
                           @removeBtn='remove'
                           @change="changeMode"
                           :mode='mode' height='640px' filter openAll>
            </tree-transfer>
        <el-button type="primary" size="mini" @click="save" style="margin-left:30%;">保存</el-button>
        </div>
    </template>
    <script>
        import treeTransfer from 'el-tree-transfer' // 引入
        export default {
            components: {
                treeTransfer
            },
            data(){
                return{
                    roleId:"",
                    title:["已有菜单权限","可选菜单权限"],
                    mode: "transfer", // transfer addressList
                        fromData:[],
                        toData:[]
                }
            },
            methods:{
                //初始化数据
                dataInitialization(id){
                    let that = this;
                    that.roleId = id;
                    that.axios
                        .get(
                            "/qsmonitor/menu/getMenuByRole?roleId="+id
                        )
                        .then(res => {
                            that.fromData = res.data.data.fromData;
                            that.toData = res.data.data.toData;
                            console.info("this id ");
                            console.info(res);
                            that.$notify({
                                title: "成功",
                                message: res.data.message,
                                type: "success"
                            });
                        })
                        .catch(err => {
                            that.$notify.error({
                                title: "错误",
                                message: err
                            });
                            console.log(err);
                        });
                },
                // 切换模式 现有树形穿梭框模式transfer 和通讯录模式addressList
                changeMode() {
                    if (this.mode == "transfer") {
                        this.mode = "addressList";
                    } else {
                        this.mode = "transfer";
                    }
                },
                // 减少权限设置
                add(fromData,toData,obj){
                    this.fromData = fromData;
                    this.toData = toData;
                },
                // 增加权限设置
                remove(fromData,toData,obj){
                    this.fromData = fromData;
                    this.toData = toData;
                },
                save(){
                    let addIds = "";
                    this.fromData.forEach((item,i)=>{
                        addIds += item.id+",";
                    });
                    this.axios
                        .put(
                            "/qsmonitor/menu/setMenu?roleId="+this.roleId+"&addIds="+addIds
                        )
                        .then(res => {
                            if (res.data.data) {
                                this.loading = false;
                            }
                            this.dataInitialization(this.roleId);
                            this.$notify({
                                title: "成功",
                                message: res.data.message,
                                type: "success"
                            });
                        })
                        .catch(err => {
                            console.info(err);
                            this.$notify.error({
                                title: "错误",
                                message: "系统异常"
                            });
                            console.log(err);
                        });
                }
            }
        }
    </script>

    最终实现效果:

    后记:用这个tree-transfer插件真的完美解决了我的问题,而且不需要再去给左移、右移按钮添加事件。看别人实现的代码好像很顺利,但真的做起来的时候总会遇到各种bug,我就一点一点去改去测,方法有些笨,毕竟刚开始接触vue呢,但是感觉以我现在混迹后端的水平,vue我也就只能实现基本的功能,做不出很酷炫的效果,慢慢来吧

    展开全文
  • vue中菜单栏如何引入另一个页面

    千次阅读 2020-06-22 14:32:27
    vue中菜单栏如何引入另一个页面 1.在配置该页面的路由中,将配置children,把要引入的页面都放到children中: 2.配置锚点,引进的页面在那里写就在那块写锚点 页面什么时候展示,引入页面

    vue中菜单栏如何引入另一个页面

    1.在配置该页面的路由中,将配置children,把要引入的页面都放到children中:
    在这里插入图片描述
    2.配置锚点,引进的页面在那里写就在那块写锚点
    在这里插入图片描述
    页面什么时候展示,引入页面在这里插入图片描述
    在这里插入图片描述

    展开全文
  • vue页面引入组件的方法

    千次阅读 2020-06-04 20:46:09
    通常我们使用的是单个文件引入,...(1)这些被引入的文件放置在同一个文件下 (2)配置文件夹下的index.js 文件内容 index.js export { default as no1 } from './no_bac1.vue' export { default as no2 } from '.
  • vue页面引入视频(video.js)

    千次阅读 2020-05-08 14:25:56
    vue页面引入视频(video.js) 安装:npm install video.js 在main.js中引入 import Video from 'video.js' import 'video.js/dist/video-js.css' Vue.protupe.$video = Video 在某个页面中使用 <...
  • vue弹窗加载另一个外部vue页面

    千次阅读 2020-11-20 21:59:11
    在本页面引入另一个页面,这里不做过多的描述了,直接上代码 <!--添加--> <emp-add v-if="addDialogVisible" ref="empAdd"></emp-add> import empAdd from "../../components/emp/EmpAdd"; ...
  • Vue一个页面调用另一个页面的方法

    千次阅读 2021-03-21 22:47:08
    Vue项目,在一个页面中想调用另一个页面的方法,可以用下面两种方式 方式一 在当前页面引入被调用方法页面 <template> <BPage ref="bPage"/> </template> <scripts> import BPage from '....
  • vue—如何在一个页面调用另一个页面的方法一、建立中转站二、分别在两个页面引入该文件(注意路径)三、调用方代码四、被调用方代码 一、建立中转站 建立 util.js 中转站文件(任意位置,我是在/assets/js/util.js) ...
  • 在项目中实现: 1.首先同一个vue实例来调用两个方法。所以可以建立一个中转站。 建立 util.js 中转站文件(任意位置,我是在/assets/js...2.分别在两个页面引入该文件(注意路径) import Utils from '../../ass...
  • vue怎么将一个组件引入另一个组件?

    千次阅读 2018-05-21 21:08:00
    1.这里有两组件,需求是把newComponents.vue里面的东西引入到helloWorld里面 2.index.js里面的配置 3.newComponents里面的内容 4.怎么将newComponents引入到helloWorld呢? 5.页面展示 转载于:...
  • vue页面引入three.js创造3d动画场景

    千次阅读 多人点赞 2019-03-16 21:27:00
    vue中安装Three.js 近来无聊顺便研究一些关于3D图形化库。three.js是JavaScript编写的WebGL第三...若对创建vue工程有疑惑,可以参考我前面的博文:手把手教你利用脚手架搭建一个Vue工程,搭建好以后,我们开始引入th...
  • 1、建立一个中转站 2、然后在两个页面引入它,注意引入路径。 import Utils from './testutils.js' 3、调用方的写法 Utils.$emit('demo', 'msg') 4、被调用方的写法 mounted() { var that = ...
  • vue页面引入外部js文件遇到的问题

    千次阅读 2019-04-29 15:55:00
    问题vue文件中引入外部js文件的方法 //在vue文件中 <script> import * as funApi from '../../../publicJavaScript/publicFun.js';//这里如果有多方法的话也引用次就可以了 //import {test,test...
  • html页面引入vue

    千次阅读 2020-08-11 12:35:35
    基础环境 ①所需的基本ui组件 ...可以无需脚手架情况下对vue以脚手架形式编写vue文件,同时便捷了引入方式 基于Mui样例 index.html <!DOCTYPE html> <html> <head> <meta char.
  • vue文件引入一个js文件(公共函数)

    千次阅读 2019-01-15 16:56:56
    vue文件引入一个js文件欢迎使用Markdown编辑器 欢迎使用Markdown编辑器 写vue项目的时候,会遇到有公共的js函数需要提取出来 在好几个文件里引用,或者引入一个变量或者json。 我的做法是 新建一个js文件 // ...
  • vue页面引入其他vue组件

    千次阅读 2018-11-18 18:04:59
    下面举一个简单的例子帮助理解: test.vue: &lt;templete&gt; &lt;div class="test"&gt;&lt;/div&gt; &lt;/templete&gt; &lt;script&gt; expor...
  • 通常我们使用的是单个文件引入,但是这样就会有很多代码是重复的,怎样才能实现“按需“引入呢? ...”按需“引入个vue文件的写法:import {Header,Footer,Content} from '@/view/layout'; ...
  • 需要在展示页里调用顶部导航栏页里的方法,...可以看到需要同一个vue实例来调用两个方法。所以可以建立一个中转站。 首先在任意位置新建util.js文件,内容如下。 import Vue from 'vue' export default new Vu...
  • 遇到一个这样的问题,实际页面中用到dialog,并且引入了其他页面,当然这里用的vue + elementUI 如果想要引入页面在弹框每次弹出时进行初始化,如图: 但是dialog中子页面只会在父页面加载完后,第一次点击事件时...
  • html页面引入vue组件

    千次阅读 2020-09-08 11:30:13
    注意:要查看页面引入vue组件的效果不能直接在本地打开index.html,会有跨域问题,可以在本地配置一个nginx转发,再用浏览器访问http://localhost:port/index.html 1.创建my-component.vue <template> <...
  • vue页面引入外部js文件

    千次阅读 2019-01-24 15:30:39
    嗯,记录一下引入外部js的步骤,也方便以后查看~ 首先说明,我直接用到了该js中的东西(对象)。 将外部js放在static文件夹下 ... 在build =&gt; webpack.base.conf.js文件...在相应的页面引入 完成。直接用 ...
  • vue页面中如何引入视频播放

    万次阅读 2019-04-20 17:39:10
    前段时间在开发网站时遇见一个需求,需要在页面上播放视频,且可以实现快进暂停等功能。因为前段使用vue-cli搭建的vue工程,所以特意去搜索了vue中播放视频所要的一些插件,并实现功能,特意分享出来,帮助需要的...
  • 界面默认只能显示第2组件的值。 代码: //template中页面插入子组件 <span class="dataStatistics-title">车总数:</span> <DigitRoll class="digitRoll" :rollDigits="totalNumber"></...
  • vue引入其他网站页面

    千次阅读 2019-10-16 19:51:01
    以百度为例 因为代码比较简单 直接附上源码 <template> <Card shadow> <div style="min-height: 500px;width: 100%;"> <... id="iframeId" :src="url" framebor...
  • 1.被引入的路由组件: <template> <el-row :gutter="20" class="index"> <el-col :xs="4"> <div class="grid-content bg-purple-light">A</div> </el-col> <el-col :xs...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 81,880
精华内容 32,752
关键字:

vue页面引入另一个页面

vue 订阅