technique_admin/src/views/log/opera/index.vue

<template>
  <div class="main animate__animated animate__backInRight" v-loading="loading">
    <custom-search-bar :fields="fields.filter((f) => f.isSearch)" v-model="searchForm" @search="search"
      @reset="toReset"> </custom-search-bar>
    <custom-table :data="list" :fields="fields" @query="search" :total="total" :opera="opera" @detail="toDetail">
    </custom-table>

    <el-dialog v-model="dialogShow" :title="dialogTitle" :destroy-on-close="false" @close="toClose" :top="dialogTop">
      <el-form :data="form" label-width="150px" label-position="left">
        <el-tabs v-model="tabs" type="card">
          <el-tab-pane label="记录内容" name="1">
            <el-form-item :label="$t('pages.log_opera.operator_id')">
              {{ getProp('operator_id') }}
            </el-form-item>
            <el-form-item :label="$t('pages.log_opera.operator_name')">
              {{ getProp('operator_name') }}
            </el-form-item>
            <el-form-item :label="$t('pages.log_opera.device')">
              {{ getProp('device') }}
            </el-form-item>
            <el-form-item :label="$t('pages.log_opera.time')">
              {{ getProp('time') }}
            </el-form-item>
            <el-form-item :label="$t('pages.log_opera.referer')">
              {{ getProp('referer') }}
            </el-form-item>
            <el-form-item :label="$t('pages.log_opera.path')">
              {{ getProp('path') }}
            </el-form-item>
            <el-form-item :label="$t('pages.log_opera.opera')">
              {{ getProp('opera') }}
            </el-form-item>
            <el-form-item :label="$t('pages.log_opera.ip')">
              {{ getProp('ip') }}
            </el-form-item>

          </el-tab-pane>
          <el-tab-pane label="请求参数" name='2'>
            <el-form-item :label="$t('pages.log_opera.params')">
              <params-table :data="form.params"></params-table>
            </el-form-item>
            <el-form-item :label="$t('pages.log_opera.query')">
              <params-table :data="form.query"></params-table>
            </el-form-item>
            <el-form-item :label="$t('pages.log_opera.body')">
              <params-table :data="form.body"></params-table>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="数据对比" name='3'>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-row>
                  <el-col :span="24">原数据</el-col>
                  <el-col :span="24">
                    <data-view :data="form.origin_data"></data-view>
                  </el-col>
                </el-row>
              </el-col>
              <el-col :span="12">
                <el-row>
                  <el-col :span="24">新数据</el-col>
                  <el-col :span="24">
                    <data-view :data="form.new_data"></data-view>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>

      </el-form>
    </el-dialog>
  </div>
</template>
<script setup>
import dataView from './parts/dataView.vue'
import paramsTable from './parts/paramsTable.vue'
import { OperaLogsStore } from '@/store/api/log/opera'
import { get, isObject } from 'lodash-es';
import { onMounted } from 'vue'
const { t } = useI18n()
const store = OperaLogsStore()
const dialogShow = ref(false)
const dialogTitle = t('pages.log_opera.dialogTitle');
const dialogTop = '15vh'
const loading = ref(false)
const $checkRes = inject('$checkRes')
const searchForm = ref({})
const list = ref([])
let skip = 0
let limit = inject('limit')
const tabs = ref('1')
onMounted(async () => {
  loading.value = true
  // await searchOther()
  await search({ skip, limit })
  loading.value = false
})
const search = async (query = { skip: 0, limit }) => {
  const info = { skip: query.skip, limit: query.limit, ...searchForm.value }
  const res = await store.query(info)
  if ($checkRes(res)) {
    list.value = res.data
    total.value = res.total
  }
}

const total = ref(0)
const form = ref({})
const fields = [
  { label: t('pages.log_opera.operator_name'), model: 'operator_name' }, // , isSearch: true
  { label: t('pages.log_opera.opera'), model: 'opera' },
  { label: t('pages.log_opera.ip'), model: 'ip' },
  { label: t('pages.log_opera.time'), model: 'time' },
  { label: t('pages.log_opera.referer'), model: 'referer' },
  { label: t('pages.log_opera.path'), model: 'path' }
]
const opera = [{ label: t('common.detail'), method: 'detail' }]

const toDetail = (data) => {
  form.value = data;
  dialogShow.value = true;
}
const getProp = (prop) => {
  return get(form.value, prop)
}


const toReset = async () => {
  searchForm.value = {}
  await search({ skip, limit })
}
const toClose = () => {
  form.value = {}
  dialogShow.value = false
}

</script>
<style scoped lang="scss"></style>