diantou/src_product/iam/audit/operationLog/xm-operation-log-list.vue

<template>
  <div>
    <a-col :span="10" style="z-index: 100">
      <a-form-model v-bind="{ wrapperCol: { span: 24 } }">
        <a-form-model-item>
          <AuditGroupPicker
            v-model="unit"
            :single="true"
            :read-only="false"
            :root-node="rootNode"
            @chang="chang"
          />
        </a-form-model-item>
      </a-form-model>
    </a-col>
    <a-col :span="5" style="z-index: 100">
      <a-form-model v-bind="{ wrapperCol: { span: 24 } }">
        <a-form-model-item>
          <SdUserPicker
            v-model="user"
            :single="true"
            :read-only="false"
            :root-node="userPickerRoot"
            @chang="chang"
          />
        </a-form-model-item>
      </a-form-model>
    </a-col>
    <a-col :span="20" style="z-index: 100">
      <a-form-model v-bind="{ wrapperCol: { span: 24 } }">
        <a-form-model-item>
          日志时间:
          <a-date-picker
            v-model="startDate"
            :default-value="startDate"
            placeholder="开始时间"
            @change="dateChange"
          />
          ~
          <a-date-picker
            v-model="endDate"
            :default-value="endDate"
            placeholder="结束时间"
            @change="dateChange"
          />
          {{ tip }}
          &nbsp;&nbsp;&nbsp;&nbsp;
          <a-button @click="changDate('day', -7)">近七天</a-button>
          <a-button @click="changDate('month', -1)">近一个月</a-button>
          <a-button @click="changDate('month', -3)">近三个月</a-button>
          <a-button @click="exportData">导出数据</a-button>
        </a-form-model-item>
      </a-form-model>
    </a-col>
    <sd-data-table
      ref="dataTable"
      :columns="columns"
      :data-url="'api/xcoa-mobile/v1/operation-log/all-list'"
      :process-req="processReq"
      :process-res="processRes"
      :defultpagination-pagesize="10"
      :row-key="'id'"
      :change-param="changeParam"
    >
    </sd-data-table>
  </div>
</template>

<script>
import components from './_import-components/xm-operation-log-list-import'
import AuditGroupPicker from '../../components/picker/audit-group-picker.vue'
import SdUserPicker from '@/common/components/sd-user-picker.vue'
import { getUserInfo } from '@/common/store-mixin'
import axios from '@/common/services/axios-instance'
import moment from 'moment'
import download from '@/common/services/download'
import { Modal } from 'ant-design-vue'
export default {
  name: 'XmOperatorLogList',
  metaInfo: {
    title: '用户操作日志列表',
  },
  components: { ...components, AuditGroupPicker, SdUserPicker },
  // components,
  data() {
    return {
      startDate: '',
      endDate: '',
      tip: '',
      unit: [],
      user: [],
      rootNode: {},
      data: [],
      columns: [],
    }
  },
  computed: {
    userPickerRoot() {
      return this.unit.length > 0 ? this.unit[0] : this.rootNode
    },
  },
  mounted() {
    this.columns.push({ title: '姓名', dataIndex: 'userName', width: '120px' })
    this.columns.push({ title: '公司', dataIndex: 'parentCompanyName' })
    this.columns.push({ title: '操作时间', dataIndex: 'time' })
    this.columns.push({ title: '操作模块', dataIndex: 'menuName' })
    this.columns.push({ title: '使用时长', dataIndex: 'holderDesc' })
    this.initAuditUnit()
  },
  methods: {
    exportData() {
      const param = {}
      this.changeParam(param)
      console.log(param)
      axios({
        url: 'api/xcoa-mobile/v1/operation-log/export-list',
        data: param,
        method: 'post',
        responseType: 'blob',
      }).then((res) => {
        if (res.status === 200) {
          console.log(res)
          const url = URL.createObjectURL(res.data)
          const filename = '模块操作日志.xlsx'
          download(url, decodeURI(filename))
        } else {
          Modal.warning({
            title: '提示',
            content: '导出报错，请联系管理员!',
          })
          return false
        }
      })
    },
    changeParam(param) {
      console.log(param)
      param.startDateRange = this.startDate
      param.endDateRange = this.endDate
      if (this.unit.length !== 0) {
        param.unitCode = this.unit[0].code
        param.unitId = this.unit[0].id
      }
      if (this.user.length !== 0) {
        param.account = this.user[0].code
      }
    },
    chang() {
      this.$refs.dataTable.refresh()
    },
    dateChange(data) {
      this.$refs.dataTable.refresh()
      this.tip = ''
    },
    changDate(type, amount) {
      if (type === 'day') {
        const d1 = new Date()
        d1.setDate(d1.getDate() + amount)
        this.startDate = moment(d1.getTime()).format('YYYY-MM-DD')
        this.endDate = moment(new Date().getTime()).format('YYYY-MM-DD')
        this.tip = '近' + Math.abs(amount) + '天'
      }
      if (type === 'month') {
        const d2 = new Date()
        d2.setMonth(d2.getMonth() + amount)
        this.startDate = moment(d2.getTime()).format('YYYY-MM-DD')
        this.endDate = moment(new Date().getTime()).format('YYYY-MM-DD')
        this.tip = '近' + Math.abs(amount) + '个月'
      }
      this.$refs.dataTable.refresh()
    },
    processRes(res) {
      console.log(res)
      const data1 = []
      if (res.data.length > 0) {
        const localOffset = new Date().getTimezoneOffset() * 60000 // 本地时区偏移量（以毫秒为单位）
        res.data.forEach((item) => {
          item.time = moment(item.time).format('YYYY-MM-DD hh:mm:ss')
          item.holderDesc = item.holderDesc ? item.holderDesc : '-'
          data1.push(item)
        })
      }
      return { data: data1, total: res.totalSize }
    },
    processReq(req) {
      if (req.data.pageSize === undefined) {
        req.data.pageSize = 10
      }
      return req
    },
    initAuditUnit() {
      const userInfo = getUserInfo()
      console.log(userInfo)
      const params = {}
      axios({
        url: 'api/xcoa-mobile/v1/iamorg/getCurrentUserGroup',
        method: 'get',
      }).then((res) => {
        params.orgId = res.data.id
        axios({
          url: 'api/xcoa-mobile/v1/iamorg/findIamOrg',
          method: 'post',
          params,
        }).then((res) => {
          const groupInfo = res.data
          const deptCode = groupInfo.orgId
          const deptName = res.data.orgName
          this.rootNode = { code: deptCode, name: deptName, id: res.data.id }
          this.unit = [this.rootNode]
          this.changDate('day', -7)
        })
      })
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
</style>