sasp-admin 0.2.57

package/src/views/log/dblog/logdbGov.vue

@@ -0,0 +1,395 @@
+<!--数据库政府操作日志-->
+<template>
+    <el-container  class="top_contain" >
+        <!--查询条件 -->
+        <el-header  style="height: auto">
+            <div class="search-form-parent el-card">
+                <el-form inline :model="crud.searchForm" size="small"
+                         class="demo-form-inline"  @keyup.enter.native="crud.doSearch()" onSubmit="return false;">
+                    <el-row>
+                        <el-col :span="6">
+                            <el-form-item  label="操作时间"   >
+                                <el-date-picker   type="date" v-model="crud.searchForm.operationTimeQ"
+                                                  range-separator="至"
+                                                  start-placeholder="开始日期"
+                                                  end-placeholder="结束日期"
+                                                  style="width: 140px" >
+                                </el-date-picker> -
+                                <el-date-picker  type="date"  v-model="crud.searchForm.operationTimeZ"    style="width: 140px"  ></el-date-picker>
+                            </el-form-item>
+                        </el-col>
+
+                        <el-col :span="3">
+                            <el-form-item label="账号"  >
+                                <el-input   v-model="crud.searchForm.userAccount"  style="width: 120px"></el-input>
+                            </el-form-item>
+
+                        </el-col>
+                        <el-col :span="3">
+                            <el-form-item label="姓名">
+                                <el-input  v-model="crud.searchForm.userName"  style="width: 120px" ></el-input>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="5">
+                            <el-form-item label="表名"  >
+                                <el-input  v-model="crud.searchForm.operationTable"  style="width: 200px" ></el-input>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="6">
+                            <el-form-item label="SQL语句"  >
+                                <el-input  v-model="crud.searchForm.sqlParameter"  style="width: 300px"  ></el-input>
+                            </el-form-item>
+                        </el-col>
+
+                    </el-row>
+                    <!--换行显示-->
+                    <el-row>
+                        <el-col :span="4">
+                            <el-form-item label="参数"   >
+                                <el-input  v-model="crud.searchForm.parameter"  style="width: 200px" ></el-input>
+                            </el-form-item>
+                        </el-col>
+
+                        <el-col :span="10">
+                            <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-col>
+                        <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-row>
+                </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" width="150"></el-table-column>
+                        <el-table-column label="账号" prop="userAccount" align="center" width="150"></el-table-column>
+
+                        <el-table-column  label="姓名" prop="userName"   align="center" width="180" >
+                        </el-table-column>
+                        <el-table-column  label="操作时间" prop="operationTime"   align="center" width="180" >
+                        </el-table-column>
+
+                        <el-table-column  label="操作" prop="operationName"  align="center" width="120" >
+                        </el-table-column>
+
+                        <el-table-column  label="表名" prop="operationTable"  align="center" width="180" >
+                        </el-table-column>
+                        <el-table-column  label="SQL语句" prop="sqlParameter"   align="center"  >
+                            <template slot-scope="scope">
+                                <a href='javascript:void(0);' class="sqlStyle"  @click='showSqlDetail(scope.row)'>{{scope.row.sqlParameter}}</a>
+                            </template>
+                        </el-table-column>
+
+                        <el-table-column  label="IP" prop="clientIp"   align="center" width="180" >
+                        </el-table-column>
+                        <el-table-column  label="所在地区" prop="areaNames"   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>
+
+
+
+
+        <!--SQL 详情弹窗-->
+        <!--查看 通知-->
+        <el-dialog :close-on-click-modal=false title="查看操作日志信息" class="dialogStyle"     top="20vh" :visible.sync="operteSqlDetail" lock-scroll>
+            <el-form  :data="sqlRowsData" label-width="120px"
+                      style="width:95%;">
+                <el-form-item label="SQL语句:" >
+                    {{sqlRowsData.sqlParameter}}
+                </el-form-item>
+                <el-form-item label="参数" >
+                    <span style="word-break: break-word">
+                        {{sqlRowsData.parameter}}
+                    </span>
+                </el-form-item>
+
+            </el-form>
+        </el-dialog>
+
+
+    </el-container>
+</template>
+
+<script>
+
+
+    export default {
+        //接收传过来的数据
+        name:"logdb-gov",
+        show:true,
+        data() {
+            return {
+                releaseStatus:'1', //发布状态
+                releaseStatusDefault:'0',
+                conditionMap:{},
+                crud : new this.CrudUtil({
+                    vue: this,
+                    entityName:"operationLog",
+                    url:"operationLogController",
+                    noClearSearchColumns:["userType"],
+                    initNoSearch:true
+                }),
+                formInline: {
+                    user: '',
+                    region: ''
+                },
+                formTypeCityOptions:[],
+                formTypeAreaOptions:[],
+                formTypeStreetOptions:[],
+                formData:{
+                    id:"","orgName":"",'userAccount':"",'userName':"",'operationTime':"",'operationName':"", 'operationTable':"",
+                    "sqlParameter":"","clientIp":"","areaNames":""
+                    }, //弹出框初始值
+
+                operteSqlDetail:false, //弹窗默认隐藏
+                sqlRowsData:{}
+
+
+
+            }
+        },
+
+        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); //获取类型q
+
+
+                //地区查询 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}; //传入查询条件
+                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);
+            },
+
+
+            //打开SQL详情弹窗口
+            showSqlDetail(row){
+               // console.log("当前点击了",row.id);
+                let vm = this;
+                if(!row.id){ // 行数据id不存在
+                    vm.$message("数据异常，请重新加载页面！");
+                    return;
+                }
+                vm.sqlRowsData =  row;
+                vm.operteSqlDetail = true;
+
+            }
+
+        }
+    }
+
+</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;
+
+    }
+
+    .sqlStyle{
+        display: block;
+        color: #000000;
+
+    }
+
+    .dialogStyle{
+        font-size: 11px;
+
+    }
+
+</style>