CN-34 feat：添加操作日志列表页面

2021-06-17 16:56:50 +08:00
parent 19090ceae6
commit 50e1d8f04b
18 changed files with 332 additions and 38 deletions
--- a/src/App.vue
+++ b/src/App.vue
@@ -13,12 +13,12 @@ export default {
    get(`${process.env.BASE_URL}config.json?Timestamp=${new Date().getTime()}`).then(config => {
      axios.defaults.baseURL = config.baseUrl
    })
-    //处理刷新后  $dayJs的时区变为默认的问题
+    // 处理刷新后  $dayJs的时区变为默认的问题
    const timezone = localStorage.getItem('cn-sys-timezone') || ''
-    if (timezone){
-      $dayJs.tz.setDefault(timezone)
+    if (timezone) {
+      window.$dayJs.tz.setDefault(timezone)
    } else {
-      $dayJs.tz.setDefault()
+      window.$dayJs.tz.setDefault()
    }
  }

--- a/src/components/common/pagination.vue
+++ b/src/components/common/pagination.vue
@@ -104,7 +104,7 @@
 </template>

 <script>
-import {defaultPageSize} from '@/utils/constants'
+import { defaultPageSize } from '@/utils/constants'

 export default {
  name: 'pagination',
@@ -234,7 +234,7 @@ export default {
      immediate: true,
      deep: true,
      handler (n, o) {
-          // console.log(n)
+        // console.log(n)
      }
    }
  }
--- a/src/components/rightBox/settings/RoleBox.vue
+++ b/src/components/rightBox/settings/RoleBox.vue
@@ -24,7 +24,7 @@
              <button type="button" class="nz-btn nz-btn-size-small-new nz-btn-style-light-new option-btn" @click="selectAllOrNone" :class="{'btn-active':selectAllFlag}"><span ><i class="nz-icon nz-icon-delete"></i></span></button>
            </div>-->
            <el-tree :data="menus" :default-expand-all="expandAllFlag" :props="{label:labelFormatter}"  @check-change="selectChange" class="tree-border" node-key="id" ref="menuTree" show-checkbox id="role-box-input-menus">
-              <template #default="{ node, data }">
+              <template #default="{ data }">
              <span>
                <i v-if="data.type == '1'" class="el-icon-menu"></i>
                <i v-if="data.type == '2'" class="el-icon-edit"></i>
@@ -48,8 +48,8 @@
 </template>

 <script>
-  import rightBoxMixin from '@/mixins/rightBox'
-  import { get, post, put } from '@/utils/http'
+import rightBoxMixin from '@/mixins/rightBox'
+import { get, post, put } from '@/utils/http'
 export default {
  name: 'userBox',
  mixins: [rightBoxMixin],
--- a/src/components/rightBox/settings/UserBox.vue
+++ b/src/components/rightBox/settings/UserBox.vue
@@ -86,7 +86,6 @@

 <script>
 import rightBoxMixin from '@/mixins/rightBox'
-import { onMounted } from "vue";
 import { get, post, put } from '@/utils/http'
 export default {
  name: 'UserBox',
@@ -144,7 +143,7 @@ export default {
  },
  setup () {
  },
-  mounted() {
+  mounted () {
    this.getRoleData()
  },
  methods: {
@@ -190,8 +189,8 @@ export default {
        }
      })
    },
-   getRoleData (){
-     get('sys/role?pageSize=-1').then(response => {
+    getRoleData () {
+      get('sys/role?pageSize=-1').then(response => {
        if (response.code === 200) {
          this.roleData = response.data.list
        }
@@ -204,7 +203,7 @@ export default {
      immediate: true,
      handler (n) {
        this.editObject = JSON.parse(JSON.stringify(n))
-        if ( !this.editObject.roleIds && this.editObject.roles ) {
+        if (!this.editObject.roleIds && this.editObject.roles) {
          this.editObject.roleIds = this.editObject.roles[0].id
        }
      }
--- a/src/components/table/settings/OperationLogTable.vue
+++ b/src/components/table/settings/OperationLogTable.vue
@@ -0,0 +1,130 @@
+<template>
+  <el-table
+    id="roleTable"
+    ref="dataTable"
+    :data="tableData"
+    :height="height"
+    border
+    class="no-operation"
+    @header-dragend="dragend"
+    @sort-change="tableDataSort"
+    @selection-change="selectionChange"
+  >
+    <el-table-column
+      :resizable="false"
+      align="center"
+      type="selection"
+      width="55">
+    </el-table-column>
+    <el-table-column
+      v-for="(item, index) in customTableTitle"
+      :key="`col-${index}`"
+      :fixed="item.fixed"
+      :label="item.label"
+      :min-width="`${item.minWidth}`"
+      :prop="item.prop"
+      :resizable="true"
+      :sort-orders="['ascending', 'descending']"
+      :width="`${item.width}`"
+      class="data-column"
+    >
+      <template #header>
+        <span class="data-column__span">{{item.label}}</span>
+        <div class="col-resize-area"></div>
+      </template>
+      <template  #default="scope">
+        <span v-if="item.prop === 'time'">
+                {{scope.row[item.prop]}} ms
+              </span>
+        <span v-else-if="item.prop === 'username'">{{formatUsername(scope.row)}}</span>
+        <span v-else-if="item.prop === 'ctime'">{{utcTimeToSysTime(scope.row[item.prop])}}</span>
+        <span v-else>{{scope.row[item.prop]}}</span>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+import table from '@/mixins/table'
+export default {
+  name: 'roleTable',
+  mixins: [table],
+  data () {
+    return {
+      tableTitle: [
+        {
+          label: this.$t('config.operationlog.id'),
+          prop: 'id',
+          show: true,
+          width: 80
+        }, {
+          label: this.$t('config.operationlog.username'),
+          prop: 'username',
+          show: true
+        },
+        {
+          label: this.$t('config.operationlog.ip'),
+          prop: 'ip',
+          show: true
+        },
+        {
+          label: this.$t('config.operationlog.operation'),
+          prop: 'operation',
+          show: true
+        },
+        {
+          label: this.$t('config.operationlog.type'),
+          prop: 'type',
+          show: true
+        },
+        {
+          label: this.$t('config.operationlog.state'),
+          prop: 'state',
+          show: true
+        },
+        // {
+        //   label: this.$t('config.operationlog.userId'),
+        //   prop: 'userId',
+        //   show: false,
+        // },
+        {
+          label: this.$t('config.operationlog.operaId'),
+          prop: 'operaId',
+          show: false
+        },
+        {
+          label: this.$t('config.operationlog.createDate'),
+          prop: 'ctime',
+          show: true
+        },
+        {
+          label: this.$t('config.operationlog.time'),
+          prop: 'time',
+          show: false
+        },
+        {
+          label: this.$t('config.operationlog.params'),
+          prop: 'params',
+          show: false
+        },
+        {
+          label: this.$t('config.operationlog.response'),
+          prop: 'response',
+          show: false
+        }
+      ]
+    }
+  },
+  methods: {
+    formatUsername (row) {
+      if (row.username) {
+        return row.username
+      } else if (row.operation === 'login' && !row.username) { // 如果是登录 且登录失败
+        return JSON.parse(row.params).username
+      } else {
+        return '-'
+      }
+    }
+  }
+}
+</script>
--- a/src/components/table/settings/RoleTable.vue
+++ b/src/components/table/settings/RoleTable.vue
@@ -75,8 +75,7 @@
 </template>

 <script>
-  import table from '@/mixins/table'
-  import { put } from '@/utils/http'
+import table from '@/mixins/table'
 export default {
  name: 'roleTable',
  mixins: [table],
@@ -88,12 +87,12 @@ export default {
          prop: 'id',
          show: true,
          width: 80,
-          sortable:'custom'
+          sortable: 'custom'
        }, {
          label: this.$t('config.roles.name'),
          prop: 'name',
          show: true,
-          sortable:'custom'
+          sortable: 'custom'
        }, {
          label: this.$t('overall.remark'),
          prop: 'remark',
--- a/src/components/table/settings/UserTable.vue
+++ b/src/components/table/settings/UserTable.vue
@@ -42,6 +42,7 @@
        </template>
        <template v-else-if="item.prop === 'status'">
          <el-switch
+                  v-if="scope.row.id"
                  v-model="scope.row.status"
                  :active-color="theme.themeColor"
                  active-value="1"
--- a/src/i18n/cn.js
+++ b/src/i18n/cn.js
@@ -257,7 +257,7 @@ const cn = {
        unknown: 'unknown'
      },
      response: '响应'
-    },
+    }
  }
 }

--- a/src/i18n/en.js
+++ b/src/i18n/en.js
@@ -258,7 +258,7 @@ const en = {
        login: 'login',
        logout: 'logout'
      }
-    },
-  },
+    }
+  }
 }
 export default en
--- a/src/mixins/common.js
+++ b/src/mixins/common.js
@@ -3,7 +3,7 @@ import { hasButton } from '@/permission'
 export default {
  data () {
    return {
-      dayJs: $dayJs,
+      dayJs: window.$dayJs,
      blockOperation: {
        save: false,
        import: false,
@@ -37,6 +37,20 @@ export default {
        refresh: false,
        query: false
      }
+    },
+    // 时间相关
+    utcTimeToSysTime (str) { // utc 0 到系统设置的时区
+      let date = ''
+      if (isNaN(str)) {
+        date = window.$dayJs(str).valueOf() + localStorage.getItem('timezone-local-offset') * 60 * 60 * 1000
+      } else {
+        date = str
+      }
+      date = window.$dayJs.tz(date).format('YYYY-MM-DD HH:mm:ss')
+      return date
+    },
+    utcTimeToLocalhost (str) { // 系统设置的时区 到 utc 0
+      return str
    }
  }
 }
--- a/src/mixins/dataList.js
+++ b/src/mixins/dataList.js
@@ -4,7 +4,7 @@ import { get, del } from '@/utils/http'
 import { ref } from 'vue'
 import pagination from '@/components/common/pagination'
 export default {
-  components:{
+  components: {
    pagination
  },
  data () {
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -21,6 +21,10 @@ const routes = [
      {
        path: '/roles',
        component: () => import('@/views/settings/Roles')
+      },
+      {
+        path: '/operationLog',
+        component: () => import('@/views/settings/OperationLog')
      }
    ]
  }
--- a/src/store/modules/user.js
+++ b/src/store/modules/user.js
@@ -2,10 +2,9 @@ import { post } from '@/utils/http'
 import router from '@/router'
 import { sortByOrderNum, getWelcomeMenu } from '@/permission'
 import dayjs from 'dayjs'
-import utc from 'dayjs/plugin/utc' // dependent on utc plugin
+import utc from 'dayjs/plugin/utc'
+import { ElMessage } from 'element-plus' // dependent on utc plugin
 dayjs.extend(utc)
-import bus from '@/utils/bus'
-import { ElMessage } from 'element-plus'

 const user = {
  state () {
@@ -45,14 +44,15 @@ const user = {
  actions: {
    loginSuccess (store, res) {
      // res.data.timezone = 'America/New_York'
-      $dayJs.tz.setDefault(res.data.timezone)
+      window.$dayJs.tz.setDefault(res.data.timezone)
      sessionStorage.setItem('cn-token', res.data.token)
      localStorage.setItem('cn-sys-name', res.data.systemName)
      if (res.systemLogo) {
        localStorage.setItem('cn-sys-logo', res.data.systemLogo)
      }
      localStorage.setItem('cn-sys-timezone', res.data.timezone)
-      localStorage.setItem('timezone-offset', dayjs.tz().utcOffset()/60)
+      localStorage.setItem('timezone-offset', dayjs.tz().utcOffset() / 60)
+      localStorage.setItem('timezone-local-offset', dayjs().utcOffset() / 60)
      post('/sys/user/permissions', { token: res.data.token }).then(res => {
        const menuList = sortByOrderNum(res.data.menus)
        store.commit('setMenuList', menuList)
--- a/src/views/settings/OperationLog.vue
+++ b/src/views/settings/OperationLog.vue
@@ -0,0 +1,93 @@
+<template>
+  <div>
+    <cn-data-list
+      ref="dataList"
+      :api="url"
+      :layout="['searchInput', 'elementSet']"
+      v-model:custom-table-title="tools.customTableTitle"
+      :from="fromRoute.operationLog"
+      @search="search"
+      :search-msg="searchMsg">
+      <template v-slot:default>
+        <operation-log-table
+          ref="dataTable"
+          v-loading="tools.loading"
+          :api="url"
+          :custom-table-title="tools.customTableTitle"
+          :height="mainTableHeight"
+          :table-data="tableData"
+          @del="del"
+          @edit="edit"
+          @orderBy="tableDataSort"
+          @reload="getTableData"
+          @selectionChange="selectionChange"
+          @showBottomBox="(targetTab, object) => { $refs.dataList.showBottomBox(targetTab, object) }"></operation-log-table>
+      </template>
+      <!-- 分页组件 -->
+      <template #pagination>
+        <pagination ref="pagination" :page-obj="pageObj" :table-id="tableId" @pageNo='pageNo' @pageSize='pageSize'></pagination>
+      </template>
+    </cn-data-list>
+  </div>
+</template>
+<script>
+import cnDataList from '@/components/table/CnDataList'
+import dataListMixin from '@/mixins/dataList'
+import operationLogTable from '@/components/table/settings/OperationLogTable'
+
+export default {
+  name: 'operationLog',
+  components: {
+    cnDataList,
+    operationLogTable
+  },
+  mixins: [dataListMixin],
+  data () {
+    return {
+      url: 'sys/log',
+      tableId: 'operationLogTable', // 需要分页的table的id，用于记录每页数量
+      searchMsg: { // 给搜索框子组件传递的信息
+        searchLabelList: [
+          {
+            id: 11,
+            name: this.$t('config.operationlog.type'),
+            type: 'input',
+            label: 'type',
+            disabled: false
+          }, {
+            id: 12,
+            name: this.$t('config.operationlog.username'),
+            type: 'input',
+            label: 'username',
+            disabled: false
+          }, {
+            id: 13,
+            name: this.$t('config.operationlog.operation'),
+            type: 'selectString',
+            label: 'operation',
+            disabled: false
+          }, {
+            id: 14,
+            name: this.$t('config.operationlog.operaId'),
+            type: 'input',
+            label: 'operaId',
+            disabled: false
+          }, {
+            id: 16,
+            name: this.$t('config.operationlog.state'),
+            type: 'selectString',
+            label: 'state',
+            disabled: false
+          }, {
+            id: 17,
+            name: this.$t('config.operationlog.params'),
+            type: 'input',
+            label: 'params',
+            disabled: false
+          }
+        ]
+      }
+    }
+  }
+}
+</script>
--- a/src/views/settings/Roles.vue
+++ b/src/views/settings/Roles.vue
@@ -14,7 +14,7 @@
        </button>
        <delete-button id="role-list-batch-delete" v-has="'role_delete'" :api="url" :delete-objs="batchDeleteObjs" @after="getTableData" @before="delFlag=true"></delete-button>
      </template>
-      <template v-slot:default="slotProps">
+      <template v-slot:default>
        <roles-table
          ref="dataTable"
          v-loading="tools.loading"
@@ -27,7 +27,7 @@
          @orderBy="tableDataSort"
          @reload="getTableData"
          @selectionChange="selectionChange"
-          @showBottomBox="(targetTab, object) => { $refs.dataList.showBottomBox(targetTab, object) }"></roles-table>
+          @showBottomBox="(targetTab) => { $refs.dataList.showBottomBox(targetTab, object) }"></roles-table>
      </template>
      <!-- 分页组件 -->
      <template #pagination>
@@ -40,18 +40,17 @@
  </div>
 </template>
 <script>
-  import cnDataList from '@/components/table/CnDataList'
-  import dataListMixin from '@/mixins/dataList'
-  import rolesTable from '@/components/table/settings/RoleTable'
-  import roleBox from '@/components/rightBox/settings/RoleBox'
-  import { put } from '@/utils/http'
+import cnDataList from '@/components/table/CnDataList'
+import dataListMixin from '@/mixins/dataList'
+import rolesTable from '@/components/table/settings/RoleTable'
+import roleBox from '@/components/rightBox/settings/RoleBox'

 export default {
  name: 'roles',
  components: {
    cnDataList,
    roleBox,
-    rolesTable,
+    rolesTable
  },
  mixins: [dataListMixin],
  data () {