UA 操作事件管理 国际化

he wei

2023-04-21 432c463982477f8c7c8667958a34949d1956a377

UA 操作事件管理 国际化

 src/assets/js/const/const_operation.js

@@ -1,128 +1,112 @@
export default {
    types: [
        {
            label: '全部',
            label: 'All',
            value: 0,
        },
        {
            label: "系统级事件",
            label: "SystemLevelEvent",
            value: 1,
            children: [
                {
                    label: '登录系统',
                    label: 'LoginSystem',
                    value: 1,
                },
                {
                    label: '登出系统',
                    label: 'LogoutSystem',
                    value: 2,
                },
                {
                    label: '增加',
                    label: 'Add',
                    value: 3,
                },
                {
                    label: '更改',
                    label: 'Modify',
                    value: 4,
                },
                {
                    label: '删除',
                    label: 'Delete',
                    value: 5
                },
                {
                    label: "越权访问",
                    label: "UnauthorizedAccess",
                    value: 20,
                },
                {
                    label: "调用异常",
                    label: "InvokeExceptions",
                    value: 21,
                },
                {
                    label: "登录失败",
                    label: "LoginFailure",
                    value: 31,
                },
                {
                    label: "配置更改",
                    label: "ConfigurationChange",
                    value: 32,
                },
                {
                    label: "密码修改",
                    label: "PasswordModify",
                    value: 33,
                },
                {
                    label: "超时登录",
                    label: "TimeoutLogin",
                    value: 34,
                },
            ]
        },
        {
            label: "机房业务级事件",
            label: "EquipmentRoomBusinessLevelEvents",
            value: 2,
            children: [
                {
                    label: '增加',
                    label: 'Add',
                    value: 3,
                },
                {
                    label: '更改',
                    label: 'Modify',
                    value: 4,
                },
                {
                    label: '删除',
                    label: 'Delete',
                    value: 5
                },
            ]
        },
        {
            label: "电源业务级事件",
            label: "PowerBusinessLevelEvents",
            value: 3,
            children: [
                {
                    label: '增加',
                    label: 'Add',
                    value: 3,
                },
                {
                    label: '更改',
                    label: 'Modify',
                    value: 4,
                },
                {
                    label: '删除',
                    label: 'Delete',
                    value: 5
                },
            ]
        },
        {
            label: "其他业务级事件",
            label: "OtherBusinessLevelEvents",
            value: 4,
            children: [
                {
                    label: '增加',
                    label: 'Add',
                    value: 3,
                },
                {
                    label: '更改',
                    label: 'Modify',
                    value: 4,
                },
                {
                    label: '删除',
                    label: 'Delete',
                    value: 5
                },
            ]
        }
        // {
        //     label: '设置',
        //     value: 6
        // },
        // {
        //     label: '取消',
        //     value: 7
        // },
        // {
        //     label: '启动',
        //     value: 8
        // },
        // {
        //     label: '结束',
        //     value: 9
        // },
    ]
}

 src/assets/js/i18n/base.js

@@ -23,6 +23,7 @@
      failMsg: '操作失败',
      delete: '删除',
      edit: '编辑',
      SearchFailed: '查询失败',
    },
  },
  US: {
@@ -49,6 +50,7 @@
      failMsg: 'Operation Failed!',
      delete: 'Delete',
      edit: 'Edit',
      SearchFailed: 'Search Failed!',
    },
  }
}

 src/assets/js/i18n/const_operation.js

New file
@@ -0,0 +1,40 @@
export default {
  messages: {
    CN: {
      All: '全部',
      SystemLevelEvent: "系统级事件",
      LoginSystem: '登录系统',
      LogoutSystem: '登出系统',
      Add: '增加',
      Modify: '更改',
      Delete: '删除',
      UnauthorizedAccess: "越权访问",
      InvokeExceptions: "调用异常",
      LoginFailure: "登录失败",
      ConfigurationChange: "配置更改",
      PasswordModify: "密码修改",
      TimeoutLogin: "超时登录",
      EquipmentRoomBusinessLevelEvents: "机房业务级事件",
      PowerBusinessLevelEvents: "电源业务级事件",
      OtherBusinessLevelEvents: "其他业务级事件",
    },
    US: {
      All: 'All',
      SystemLevelEvent: "System Level Event",
      LoginSystem: 'Login System',
      LogoutSystem: 'Logout System',
      Add: 'Add',
      Modify: 'Modify',
      Delete: 'Delete',
      UnauthorizedAccess: "Unauthorized Access",
      InvokeExceptions: "Invoke Exceptions",
      LoginFailure: "Login Failure",
      ConfigurationChange: "Configuration Change",
      PasswordModify: "Password Modify",
      TimeoutLogin: "Timeout Login",
      EquipmentRoomBusinessLevelEvents: "Equipment Room Business Level Events",
      PowerBusinessLevelEvents: "Power Business Level Events",
      OtherBusinessLevelEvents: "Other Business Level Events",
    }
  }
}

 src/views/userMager/i18n/operationRecord.js

New file
@@ -0,0 +1,26 @@
export default {
  messages: {
    CN: {
      operatorName: '操作人姓名',
      All: '全部',
      OperationType: '操作类型',
      OperationRecordTime: '操作记录时间段',
      UserID: '用户ID',
      OperationTime: '操作时间',
      TerminalIP: '终端IP',
      OperationEvent: '操作事件',
      OperationRecord: '操作记录',
    },
    US: {
      operatorName: 'Operator Name',
      All: 'All',
      OperationType: 'Operation Type',
      OperationRecordTime: 'Operation Record Time',
      UserID: 'User ID',
      OperationTime: 'Operation Time',
      TerminalIP: 'Terminal IP',
      OperationEvent: 'Operation Event',
      OperationRecord: 'Operation Record',
    }
  }
}

 src/views/userMager/operationRecord.vue

@@ -1,276 +1,252 @@
<template>
    <!-- 操作记录查询 -->
    <flex-layout :loading="loading">
        <div class="table-layout filter-box-table" slot="header">
            <div class="table-row">
                <div class="table-cell text-right">操作人姓名：</div>
                <div class="table-cell">
                    <el-select v-model="formObj.czrxm" size="small" placeholder="请选择操作人姓名" class="select_box">
                        <el-option :value="null" label="全部"></el-option>
                        <el-option
                        v-for="item in czrxmList"
                        :key="item.id"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div class="table-cell text-right">操作类型：</div>
                <div class="table-cell">
                  <el-cascader
                    class="select_box"
                    size="small"
                    v-model="czlx"
                    :options="czlxList"
                    @change="changeCzLx"></el-cascader>
<!--                    <el-select  size="small" placeholder="请选择操作类型" class="select_box">-->
<!--                        <el-option-->
<!--                        v-for="item in czlxList"-->
<!--                        :key="item.value"-->
<!--                        :label="item.label"-->
<!--                        :value="item.value">-->
<!--                        </el-option>-->
<!--                    </el-select>-->
                </div>
                <div class="table-cell text-right">操作记录时间段：</div>
                <div class="table-cell">
                    <el-date-picker v-model="formObj.startDrsj" size="small" class="time_box" :picker-options="pickerOptions0" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"> </el-date-picker>
                    - <el-date-picker v-model="formObj.endDrsj" size="small" class="time_box" :picker-options="pickerOptions1" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"> </el-date-picker>
                </div>
            </div>
  <!-- 操作记录查询 -->
  <flex-layout :loading="loading">
    <div class="table-layout filter-box-table" slot="header">
      <div class="table-row">
        <div class="table-cell text-right">{{ $t('operatorName') }}:</div>
        <div class="table-cell">
          <el-select v-model="formObj.czrxm" size="small" :placeholder="$t('form.selectMsg')" class="select_box">
            <el-option :value="null" :label="$t('All')"></el-option>
            <el-option v-for="item in czrxmList" :key="item.id" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="flex-page-content">
            <el-table
              stripe
              size="mini"
              header-row-class-name="header-primary"
              height="100%"
              :data="userList">
                <el-table-column prop="uid" align="center" label="用户ID"></el-table-column>
                <el-table-column prop="uname" align="center" label="操作人姓名"></el-table-column>
                <el-table-column prop="uOprateType" align="center" label="操作类型"></el-table-column>
                <el-table-column prop="uOprateDay" align="center" label="操作时间"></el-table-column>
                <el-table-column prop="uTerminalIp" align="center" label="终端IP"></el-table-column>
                <el-table-column prop="uOprateMsg" align="center" :show-overflow-tooltip="true" label="操作事件"></el-table-column>
            </el-table>
        <div class="table-cell text-right">{{ $t('OperationType') }}:</div>
        <div class="table-cell">
          <el-cascader class="select_box" size="small" v-model="czlx" :options="czlxList"
            @change="changeCzLx">
          </el-cascader>
        </div>
        <div class="flex-page-footer" slot="footer">
            <div class="el-pagination-btns">
                <el-button type="primary" @click="queryData" round size="mini" icon="el-icon-search">查询</el-button>
                <el-button type="primary" round size="mini" icon="el-icon-wallet" @click="exportFile">导出</el-button>
            </div>
            <el-pagination size="mini" @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="formObj.currentPage"
            :page-sizes="[10, 20, 30, 50, 100]"
            :page-size="formObj.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalNum"></el-pagination>
        <div class="table-cell text-right">{{ $t('OperationRecordTime') }}:</div>
        <div class="table-cell">
          <el-date-picker v-model="formObj.startDrsj" size="small" class="time_box" :picker-options="pickerOptions0"
            type="date" :placeholder="$t('form.selectDate')" value-format=" yyyy-MM-dd"> </el-date-picker>
          - <el-date-picker v-model="formObj.endDrsj" size="small" class="time_box" :picker-options="pickerOptions1"
            type="date" :placeholder="$t('form.selectDate')" value-format="yyyy-MM-dd"> </el-date-picker>
        </div>
    </flex-layout>
      </div>
    </div>
    <div class="flex-page-content">
      <el-table stripe size="mini" header-row-class-name="header-primary" height="100%" :data="userList">
        <el-table-column prop="uid" align="center" :label="$t('UserID')"></el-table-column>
        <el-table-column prop="uname" align="center" :label="$t('operatorName')"></el-table-column>
        <el-table-column prop="uOprateType" align="center" :label="$t('OperationType')"></el-table-column>
        <el-table-column prop="uOprateDay" align="center" :label="$t('OperationTime')"></el-table-column>
        <el-table-column prop="uTerminalIp" align="center" :label="$t('TerminalIP')"></el-table-column>
        <el-table-column prop="uOprateMsg" align="center" :show-overflow-tooltip="true"
          :label="$t('OperationEvent')"></el-table-column>
      </el-table>
    </div>
    <div class="flex-page-footer" slot="footer">
      <div class="el-pagination-btns">
        <el-button type="primary" @click="queryData" round size="mini" icon="el-icon-search">{{ $t('operate.search')
        }}</el-button>
        <el-button type="primary" round size="mini" icon="el-icon-wallet" @click="exportFile">{{ $t('operate.export')
        }}</el-button>
      </div>
      <el-pagination size="mini" @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="formObj.currentPage" :page-sizes="[10, 20, 30, 50, 100]" :page-size="formObj.pagesize"
        layout="total, sizes, prev, pager, next, jumper" :total="totalNum"></el-pagination>
    </div>
  </flex-layout>
</template>

<script>
import { const_operation } from '../../assets/js/const'
// 引入导出表格
import {
    export_json_to_excel
  export_json_to_excel
} from '../../assets/js/excel/Export2Excel.js'
import { userLogPage,getUserAll } from './apis/apis'
import { userLogPage, getUserAll } from './apis/apis'
import i18n from './i18n/operationRecord';
import { createI18nOption } from '@/assets/js/tools/i18n';
import i18nConstOperation from '@/assets/js/i18n/const_operation';
const i18nMixin = createI18nOption(i18n, [[i18nConstOperation, 'const']]);
export default {
    name:"operationRecord",
    data() {
        let thistime = new Date();
        let yy = thistime.getFullYear();
        let MM = thistime.getMonth()+1;
        let dd = thistime.getDate();
        let day1 = yy + '-' + MM + '-' + dd;
        let date = new Date();
        let startDrsj = date.getTime() - 1*24*3600*1000;
        let permitGroup = sessionStorage.getItem("userPowerGroup");
        return {
            loading: false,
            permitGroup: permitGroup,
            czlx:null,
            userList:[],//列表数据
            czrxmList:[],
            czlxList:[],
            formObj:{
                czrxm:null,
                czlx:null,
                eventType: null,
                startDrsj: new Date(startDrsj).format('yyyy-MM-dd'),
                endDrsj: day1,
                currentPage:1,
                pagesize:20,
            },
            totalNum:0,
            pickerOptions0: {
                    disabledDate: (time) => {
                        let vm = this;
                        if (vm.formObj.endDrsj) {
                            return new Date(time.getTime()) > new Date(vm.formObj.endDrsj);
                        } else {
                            // return time.getTime() > Date.now();
                        }
                    }
                },
                pickerOptions1: {
                    disabledDate: (time) => {
                        return new Date(time.getTime()+24*60*60*1000) < new Date(this.formObj.startDrsj);
                    }
                },
        }
    },
    components:{

    },
    created() {
        let vm = this;
        let permitGroup = this.permitGroup;
            vm.czlxList = const_operation.types.filter((item, key)=>{
          if(key==1 && permitGroup == 5) {
            return false;
          }else {
            return true;
  name: "operationRecord",
  mixins: [i18nMixin],
  data() {
    let thistime = new Date();
    let yy = thistime.getFullYear();
    let MM = thistime.getMonth() + 1;
    let dd = thistime.getDate();
    let day1 = yy + '-' + MM + '-' + dd;
    let date = new Date();
    let startDrsj = date.getTime() - 1 * 24 * 3600 * 1000;
    let permitGroup = sessionStorage.getItem("userPowerGroup");
    return {
      loading: false,
      permitGroup: permitGroup,
      czlx: [0],
      userList: [],//列表数据
      czrxmList: [],
      // czlxList: [],
      formObj: {
        czrxm: null,
        czlx: 0,
        eventType: null,
        startDrsj: new Date(startDrsj).format('yyyy-MM-dd'),
        endDrsj: day1,
        currentPage: 1,
        pagesize: 20,
      },
      totalNum: 0,
      pickerOptions0: {
        disabledDate: (time) => {
          let vm = this;
          if (vm.formObj.endDrsj) {
            return new Date(time.getTime()) > new Date(vm.formObj.endDrsj);
          } else {
            // return time.getTime() > Date.now();
          }
        });
    },
    mounted() {
        let vm = this;

        this.queryData();
        this.searchUser();
    },
    methods: {
        // 导出表格
        exportFile() {
            let tHeader  = ['用户ID','操作人姓名','操作类型','操作时间','终端IP','操作事件'];
            let filterVal = ['uid','uname','uOprateType','uOprateDay','uTerminalIp','uOprateMsg'];
            let list = this.userList;
            let excelData = this.formatJson(filterVal, list);
            export_json_to_excel(tHeader, excelData, "操作记录");
        },
        formatJson(filterVal, jsonData) {
            return jsonData.map(v => filterVal.map(j => v[j]));
        },
        // 显示条数改变时
        handleSizeChange(val) {
            this.formObj.pagesize = val;
            this.queryData();
        },
        // 翻页
        handleCurrentChange(val) {
            this.formObj.currentPage = val;
            this.queryData();
        },
        searchUser() {
            // 查询所有用户
            getUserAll().then(res=>{
                let rs = res.data;
                let data = [];
                if(rs.code == 1) {
                    data = rs.data.map(item=>{
                        return {
                            label: item.uname,
                            value: item.uid,
                            id: item.uid
                        };
                    });
                }
                this.czrxmList = data;
            }).catch(error=>{
                console.log(error);
            })
        },
        // 查询列表数据
        queryData:function(){
            let vm = this;
            vm.loading = true;
            if(vm.formObj.startDrsj ==''|| vm.formObj.endDrsj ==''){
                return false
            }
            // let searchParams = {
            //     page:{
            //         pageCurr:vm.formObj.currentPage,
            //         pageSize:vm.formObj.pagesize
            //     },
            //     uinf:{
            //         uname:vm.formObj.czrxm
            //     },
            //     ulog:{
            //         uOprateDay:vm.formObj.startDrsj + ' 00:00:00',
            //         uOprateDay1:vm.formObj.endDrsj + ' 23:59:59',
            //         uOprateType: vm.formObj.czlx,
            //         eventType: vm.formObj.eventType
            //     }
            // };
            let params = {
                pageNum:vm.formObj.currentPage,
                pageSize:vm.formObj.pagesize
            }
            let data = {
                operationTime:vm.formObj.startDrsj + ' 00:00:00',
                operationTime2:vm.formObj.endDrsj + ' 23:59:59',
                operationType:vm.formObj.czlx,
                eventType: vm.formObj.eventType,
                uid:vm.formObj.czrxm
            }
            userLogPage(params,data).then(res=>{
                // 关闭等待框
                vm.loading = false;
                let rs = res.data;
                let arrList = [];
                if(rs.code == 1) {
                    arrList = rs.data.list.map(item=>{
                        return {
                            uid: item.uid,
                            uOprateDay :item.operationTime,
                            uOprateMsg:item.operationMsg,
                            uOprateType:item.operationTypeStr, //this.getOprateText(item.uOprateType),
                            uTerminalIp:item.terminalIp,
                            uname:item.uname
                        }
                    });
                    vm.totalNum = rs.data.total;

                }else {
                    vm.totalNum = 0;
                }
                vm.userList = arrList;
            }).catch(error=>{
                console.log(error);
                // 关闭等待框
                vm.loading = false;
                vm.$layer.msg('查询失败');
            });
        },
        // getOprateText(type) {
        //     let czlxList = this.czlxList[1].children;
        //     let result = "未知";
        //     for(let i=0; i<czlxList.length; i++) {
        //         let czlx = czlxList[i];
        //         if(czlx.value == type) {
        //             result = czlx.label;
        //         }
        //     }
        //     return result;
        // },
      changeCzLx(value) {

        if(value.length == 1) {
          this.formObj.czlx = 0;
          this.formObj.eventType = 0;
        }else {
          this.formObj.czlx = value[1];
          this.formObj.eventType = value[0];
        }
      }
    },
    computed: {
        userLabel() {
            return "全部（共"+this.czrxmList.length+"个）";
      },
      pickerOptions1: {
        disabledDate: (time) => {
          return new Date(time.getTime() + 24 * 60 * 60 * 1000) < new Date(this.formObj.startDrsj);
        }
      },
    }
  },
  components: {

  },
  computed: {
    czlxList() {
      let permitGroup = this.permitGroup;
      return JSON.parse(JSON.stringify(const_operation)).types.map((v) => {
        v.label = this.$t('const.' + v.label);
        if (v.children) {
          v.children.map((item) => {
            item.label = this.$t('const.' + item.label);
            return item;
          });
        }
        return v;
      }).filter((item, key) => {
        if (key == 1 && permitGroup == 5) {
          return false;
        } else {
          return true;
        }
      });
    }
  },
  created() {
    // let vm = this;
    // let permitGroup = this.permitGroup;
    // vm.czlxList = const_operation.types.filter((item, key) => {
    //   if (key == 1 && permitGroup == 5) {
    //     return false;
    //   } else {
    //     return true;
    //   }
    // });
  },
  mounted() {
    let vm = this;

    this.queryData();
    this.searchUser();
  },
  methods: {
    // 导出表格
    exportFile() {
      let tHeader = ['UserID', 'operatorName', 'OperationType', 'OperationTime', 'TerminalIP', 'OperationEvent'].map(v => this.$t(v));
      let filterVal = ['uid', 'uname', 'uOprateType', 'uOprateDay', 'uTerminalIp', 'uOprateMsg'];
      let list = this.userList;
      let excelData = this.formatJson(filterVal, list);
      export_json_to_excel(tHeader, excelData, this.$t('OperationRecord'));
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]));
    },
    // 显示条数改变时
    handleSizeChange(val) {
      this.formObj.pagesize = val;
      this.queryData();
    },
    // 翻页
    handleCurrentChange(val) {
      this.formObj.currentPage = val;
      this.queryData();
    },
    searchUser() {
      // 查询所有用户
      getUserAll().then(res => {
        let rs = res.data;
        let data = [];
        if (rs.code == 1) {
          data = rs.data.map(item => {
            return {
              label: item.uname,
              value: item.uid,
              id: item.uid
            };
          });
        }
        this.czrxmList = data;
      }).catch(error => {
        console.log(error);
      })
    },
    // 查询列表数据
    queryData: function () {
      let vm = this;
      vm.loading = true;
      if (vm.formObj.startDrsj == '' || vm.formObj.endDrsj == '') {
        return false
      }
      let params = {
        pageNum: vm.formObj.currentPage,
        pageSize: vm.formObj.pagesize
      }
      let data = {
        operationTime: vm.formObj.startDrsj + ' 00:00:00',
        operationTime2: vm.formObj.endDrsj + ' 23:59:59',
        operationType: vm.formObj.czlx,
        eventType: vm.formObj.eventType,
        uid: vm.formObj.czrxm
      }
      userLogPage(params, data).then(res => {
        // 关闭等待框
        vm.loading = false;
        let rs = res.data;
        let arrList = [];
        if (rs.code == 1) {
          arrList = rs.data.list.map(item => {
            return {
              uid: item.uid,
              uOprateDay: item.operationTime,
              uOprateMsg: item.operationMsg,
              uOprateType: item.operationTypeStr, //this.getOprateText(item.uOprateType),
              uTerminalIp: item.terminalIp,
              uname: item.uname
            }
          });
          vm.totalNum = rs.data.total;

        } else {
          vm.totalNum = 0;
        }
        vm.userList = arrList;
      }).catch(error => {
        console.log(error);
        // 关闭等待框
        vm.loading = false;
        vm.$layer.msg(this.$t('operate.SearchFailed'));
      });
    },
    changeCzLx(value) {
      if (value.length == 1) {
        this.formObj.czlx = 0;
        this.formObj.eventType = 0;
      } else {
        this.formObj.czlx = value[1];
        this.formObj.eventType = value[0];
      }
    }
  },
}
</script>

@@ -278,6 +254,4 @@
.select_box.el-cascader {
  width: 100%;
}
</style>


</style>