sasp-admin 0.2.57

package/src/views/log/loginlog/logManageDevOrSup.vue

@@ -0,0 +1,357 @@
+<template>
+    <el-container  class="top_contain" >
+        <!--查询条件 -->
+        <el-header  style="height: auto">
+            <div class="search-form-parent el-card">
+                <el-form :inline="true" :model="crud.searchForm" size="small" onSubmit="return false;"
+                         class="demo-form-inline"  @keyup.enter.native="crud.doSearch()" >
+                        <el-form-item  label="登录时间"   >
+                            <el-date-picker   type="date" v-model="crud.searchForm.loginTimeQ"
+                                              range-separator="至"
+                                              start-placeholder="开始日期"
+                                              end-placeholder="结束日期"
+                                              style="width: 140px" >
+
+                            </el-date-picker> -
+                            <el-date-picker  type="date"  v-model="crud.searchForm.loginTimeZ"    style="width: 140px"  ></el-date-picker>
+
+                        </el-form-item>
+
+                        <el-form-item label="账号"   style="margin-left: 20px">
+                            <el-input   v-model="crud.searchForm.userAccount"  style="width:120px" ></el-input>
+                        </el-form-item>
+                    <el-form-item label="姓名"  style="margin-left: 20px">
+                        <el-input  v-model="crud.searchForm.userName"  style="width: 120px" ></el-input>
+                    </el-form-item>
+
+                    <el-form-item label="所在地区"   label-position="right"  style="margin-left: 20px" >
+                        <el-select v-model="crud.searchForm.city"  style="width: 150px"  @change="formTypeChangeCity">
+                            <el-option
+                                    v-for="item in formTypeCityOptions"
+                                    :key="item.id"
+                                    :label="item.dataName"
+                                    :value="item.id"
+                                    >
+                            </el-option>
+                        </el-select>-
+                        <el-select  v-model="crud.searchForm.area"   style="width: 150px"  @change="formTypeChangeArea" >
+                            <el-option
+                                    v-for="item in formTypeAreaOptions"
+                                    :key="item.id"
+                                    :label="item.dataName"
+                                    :value="item.id"
+                                  >
+                            </el-option>
+                        </el-select>-
+                        <el-select  v-model="crud.searchForm.street"  style="width: 150px" >
+                            <el-option
+                                    v-for="item in formTypeStreetOptions"
+                                    :key="item.id"
+                                    :label="item.dataName"
+                                    :value="item.id">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+
+
+                    <el-form-item>
+                        <el-button   type="primary" icon="el-icon-search" @click="crud.doSearch()">查询</el-button>
+                        <el-button  icon="el-icon-close" @click="crud.resetSearch()">清空</el-button>
+                    </el-form-item>
+
+
+                </el-form>
+            </div>
+        </el-header>
+
+        <!--查询体 列表展示-->
+        <el-main  id="tableMain" style="height: 100%">
+            <el-container style="height:100%" class="table-list-container">
+                <!--列表-->
+                <el-main style="height: 100%;" ref="tableMain" >
+                    <el-table :data="crud.dataStore.records" :ref="crud.tableRef" stripe border height="100%"  style="width: 100%;">
+                        <el-table-column type="index" label=" " align="center" width="60"></el-table-column>
+                        <el-table-column label="单位及部门" prop="orgName" align="center"></el-table-column>
+                        <el-table-column label="账号" prop="userAccount" align="center"  width="200"  ></el-table-column>
+                        <el-table-column  label="姓名" prop="userName"   align="center" width="180" >
+                        </el-table-column>
+                        <el-table-column  label="登录时间" prop="loginTime" :formatter="viewDateFormat"  align="center" width="180" >
+                        </el-table-column>
+                        <el-table-column  label="时长" prop="totalTime"  align="center" width="180" >
+                        </el-table-column>
+                        <el-table-column  label="登录IP" prop="clientIp"   align="center" width="180" >
+                        </el-table-column>
+
+                    </el-table>
+                </el-main>
+            </el-container>
+        </el-main>
+
+        <!--底部分页-->
+        <el-footer>
+            <el-pagination
+                    :ref="crud.pageRef"
+                    :page-sizes="crud.pageSizes"
+                    :page-size="crud.pageSize"
+                    :current-page="crud.page"
+                    :total="crud.dataStore.total"
+                    @size-change="crud.sizeChange()"
+                    @current-change="crud.currentPage()"
+                    layout="total, sizes, prev, pager, next, jumper">
+            </el-pagination>
+        </el-footer>
+
+
+    </el-container>
+</template>
+
+<script>
+
+
+    export default {
+        //接收传过来的数据
+        name:"log-manage-devorsup",
+        show:true,
+        data() {
+            return {
+                releaseStatus:'1', //发布状态
+                releaseStatusDefault:'0',
+                conditionMap:{},
+                crud : new this.CrudUtil({
+                    vue: this,
+                    entityName:"loginLog",
+                    url:"loginLogController",
+                    noClearSearchColumns:["userType","sort","order"],
+                    initNoSearch:true
+                }),
+                formInline: {
+                    user: '',
+                    region: ''
+                },
+                formTypeCityOptions:[],
+                formTypeAreaOptions:[],
+                formTypeStreetOptions:[],
+                formData:{
+                    id:"", 'orgName':"",'userAccount':"",'userName':"",'loginTime':"",'totalTime':"", 'clientIp':""
+                    }, //弹出框初始值
+
+                //日期选择框
+                pickerOptions2: {
+                    shortcuts: [{
+                        text: '最近一周',
+                        onClick(picker) {
+                            const end = new Date();
+                            const start = new Date();
+                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+                            picker.$emit('pick', [start, end]);
+                        }
+                    }, {
+                        text: '最近一个月',
+                        onClick(picker) {
+                            const end = new Date();
+                            const start = new Date();
+                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+                            picker.$emit('pick', [start, end]);
+                        }
+                    }, {
+                        text: '最近三个月',
+                        onClick(picker) {
+                            const end = new Date();
+                            const start = new Date();
+                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+                            picker.$emit('pick', [start, end]);
+                        }
+                    }]
+                },
+
+
+            }
+        },
+
+
+        created(){
+            let vm = this;
+            this.initData();
+
+        },
+        watch: {
+                //监听日期表单变化
+            'crud.searchForm.city'(){
+                this.$set(this.crud.searchForm,"area","");
+            },
+            'crud.searchForm.area'(){
+                this.$set(this.crud.formData,"street","");
+            }
+
+        },
+        methods: {
+            //当城市变化时 获取地区
+            formTypeChangeCity(){
+                let vm = this;
+                vm.formTypeAreaOptions = []; //重新置空
+                let {city} = vm.crud.searchForm;
+                 vm.axios.post(vm.api.data.getDataByType, {"typeId":"522eb83216004493b0e0eb729c564941",
+                                            "parentId":city}).then(function (ret) {
+                    vm.formTypeAreaOptions = ret.data;
+                });
+            },
+            //当地区发生变化时候，查询街道
+            formTypeChangeArea(){
+                let vm = this;
+                vm.formTypeStreetOptions = []; //重新置空
+                let {area} = vm.crud.searchForm;
+                vm.axios.post(vm.api.data.getDataByType, {"typeId":"522eb83216004493b0e0eb729c564941",
+                    "parentId":area}).then(function (ret) {
+                    vm.formTypeStreetOptions = ret.data;
+                });
+            },
+
+            //初始化数据加载
+            initData(){
+                let vm = this;
+                let urlParam = window.location.href; //从URL中获取日志类型
+                let userType  =  urlParam.slice(urlParam.indexOf('=')+1,urlParam.length); //获取类型
+
+                //初始化下拉菜单地区
+                //下拉框数据
+                //地区查询 typeId="522eb83216004493b0e0eb729c564941"
+                vm.axios.post(vm.api.data.getDataByType, {"typeId":"522eb83216004493b0e0eb729c564941",
+                                "parentId":"57c615c7031c4759be0cc166340d1bed"}).then(function (ret) {
+                    vm.formTypeCityOptions = ret.data;
+                });
+                //查询当前系统用户id
+                vm.crud.searchForm = {"userType":userType,"sort":"l","order":"1"}; //传入查询条件
+                vm.crud.search(); //出发查询条件
+            },
+
+            //重置查询条件
+            resetSearch() {
+                let vm = this;
+                let crud = vm.crud;
+                let objData = {};
+                let searchForm = crud.searchForm;
+                crud.noClearSearchColumns && crud.noClearSearchColumns.forEach(function (key) {
+                    objData[key] = searchForm[key];
+                });
+                objData["page"] = "1";
+                crud.searchForm = Object.assign({}, objData);
+                crud.search(vm.checkSelectedMsg);
+            },
+
+
+            //日期格式化
+            viewDateFormat(value, time) {
+                let d =  new Date(value.createTime);
+                let fmt = "yyyy-MM-dd HH:mm:ss";
+                if (d) {
+                    let date = new Date(d);
+                    let o = {
+                        "M+": date.getMonth() + 1,                 //月份
+                        "d+": date.getDate(),                    //日
+                        "H+": date.getHours(),                   //小时
+                        "m+": date.getMinutes(),                 //分
+                        "s+": date.getSeconds(),                 //秒
+                        "q+": Math.floor((date.getMonth() + 3) / 3), //季度
+                        "S": date.getMilliseconds()             //毫秒
+                    };
+                    if (/(y+)/.test(fmt))
+                        fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
+                    for (let k in o)
+                        if (new RegExp("(" + k + ")").test(fmt))
+                            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
+                } else {
+                    fmt = '无';
+                }
+                return fmt;
+            }
+        }
+    }
+
+</script>
+
+<style scoped>
+    legend{
+        font-size: 14px;
+    }
+    .button_header{
+        position: absolute;
+        height: 60px!important;
+        text-align: center;
+        line-height: 60px;
+        bottom: 0;
+        border-top: 1px solid #f2f2f2;
+        background-color: white;
+        margin: auto;
+        width: 100%;
+        right: 0;
+        z-index: 99;
+    }
+    .control_box{
+        padding-right: 100px;
+        position: relative;
+    }
+    .control_box_zero{
+        padding-right: 0;
+        position: relative;
+    }
+    .operate_div{
+        position: absolute;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        margin: auto;
+        width: 100px;
+    }
+    .operate_div i{
+        /*margin-right: 20px;*/
+        cursor: pointer;
+        width: 30px;
+        height: 30px;
+        padding-top: 15px;
+        padding-left: 15px;
+        float: left;
+    }
+    .top_contain{
+        height: 100%;
+        /*border-radius:8px;*/
+        overflow-y: hidden;
+
+
+    }
+    .top_contain::-webkit-scrollbar{
+        width: 0;
+    }
+</style>
+<style>
+    .black .el-form-item__label{
+        color: black;
+    }
+    .green .el-form-item__label{
+        color: #27B5C3;
+    }
+    .settingClass{
+        width: 100%;
+        height: 40px;
+        position: relative;
+    }
+    .settingClass span{
+        position: absolute;
+        top:0;left:0;
+        right: 0;bottom: 0;
+        margin: auto;line-height: 40px;
+    }
+    .receiveObjNameLeft{
+        float: left;
+        width: 90%;
+    }
+    .receiveObjNameRight{
+        position: absolute;
+        float: right;
+        width: 10%;
+        top: 5px;
+        margin-left: 4px;
+        button:5px;
+
+    }
+
+</style>