zsxt_nbzs_h5/Web/src/pages/system/log/oplog/index.vue

<template>
  <container>
    <br />
    <a-alert closable type="error">
      <template slot="message">
        <div>后端bug:任何操作的操作类型都是增加</div>
        <div>没有记录请求参数.返回结果等信息</div>
      </template>
    </a-alert>
    <br />
    <a-card :bordered="false">
      <Auth auth="sysOpLog:page">
        <div class="yo-query-bar">
          <a-form-model :model="query" layout="inline">
            <a-form-model-item label="日志名称">
              <a-input placeholder="请输入日志名称" v-model="query.name" />
            </a-form-model-item>
            <a-form-model-item label="操作类型">
              <a-select
                :style="{ width: '170px' }"
                allow-clear
                placeholder="请选择操作类型"
                v-model="query.opType"
              >
                <a-select-option
                  :key="item.code"
                  :value="item.code"
                  v-for="item in codes.opTypeDict"
                >{{ item.value }}</a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="是否成功">
              <a-select
                :style="{ width: '170px' }"
                allow-clear
                placeholder="请选择是否成功"
                v-model="query.success"
              >
                <a-select-option value="true">是</a-select-option>
                <a-select-option value="false">否</a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="操作时间">
              <a-range-picker
                :show-time="{
                      hideDisabledOptions: true,
                      defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
                    }"
                format="YYYY-MM-DD HH:mm:ss"
                v-model="query.dates"
              />
            </a-form-model-item>
            <a-form-model-item>
              <a-button-group>
                <a-button @click="onQuery" type="primary">查询</a-button>
                <a-button @click="() => { query = {}, onQuery() }">重置</a-button>
              </a-button-group>
            </a-form-model-item>
          </a-form-model>
        </div>
      </Auth>

      <yo-table :columns="columns" :load-data="loadData" ref="table">
        <Auth auth="sysOpLog:delete" slot="operator">
          <a-popconfirm @confirm="onOpLogClear" placement="bottomLeft" title="是否确认清空日志">
            <a-button>清空日志</a-button>
          </a-popconfirm>
        </Auth>
        <span slot="opType" slot-scope="text">{{ bindCodeValue(text, 'opTypeDict') }}</span>
        <span slot="success" slot-scope="text">{{ text ? '是' : '否' }}</span>
        <a-descriptions bordered size="small" slot="expandedRowRender" slot-scope="record">
          <a-descriptions-item :span="1" label="方法名称">{{ record.methodName }}</a-descriptions-item>
          <a-descriptions-item :span="2" label="地址">{{ record.location }}</a-descriptions-item>
          <a-descriptions-item label="浏览器">{{ record.browser }}</a-descriptions-item>
          <a-descriptions-item :span="2" label="操作系统">{{ record.os }}</a-descriptions-item>
          <a-descriptions-item :span="3" label="类名称">{{ record.className }}</a-descriptions-item>
          <a-descriptions-item :span="3" label="返回结果">{{ record.result }}</a-descriptions-item>
          <a-descriptions-item :span="3" label="请求参数">{{ record.param }}</a-descriptions-item>
          <a-descriptions-item :span="3" label="具体消息">{{ record.message }}</a-descriptions-item>
        </a-descriptions>
      </yo-table>
    </a-card>
    <br />
  </container>
</template>
<script>
import moment from 'moment';

export default {
  data() {
    return {
      query: {},
      columns: [
        {
          title: '日志名称',
          dataIndex: 'name',
        },
        {
          title: '操作类型',
          dataIndex: 'opType',
          scopedSlots: { customRender: 'opType' },
        },
        {
          title: '是否成功',
          dataIndex: 'success',
          scopedSlots: { customRender: 'success' },
        },
        {
          title: 'ip',
          dataIndex: 'ip',
        },
        {
          title: '请求地址',
          dataIndex: 'url',
          scopedSlots: { customRender: 'url' },
        },
        {
          title: '操作时间',
          dataIndex: 'opTime',
          scopedSlots: { customRender: 'opTime' },
        },
        {
          title: '操作人',
          dataIndex: 'account',
        },
      ],
      codes: {
        opTypeDict: [],
      },
    };
  },
  created() {
    this.onLoadCodes();
  },
  methods: {
    moment,

    /**
     * 必要的方法
     * 传给yo-table以示意数据接口及其参数和返回的数据结构
     */
    loadData(params) {
      const query = this.$_.cloneDeep(this.query);
      if (query.dates && query.dates.length) {
        query.searchBeginTime = moment(query.dates[0]).format('YYYY-MM-DD HH:mm:ss');
        query.searchEndTime = moment(query.dates[1]).format('YYYY-MM-DD HH:mm:ss');
        delete query.dates;
      }

      return this.$api
        .sysOpLogPage({
          ...params,
          ...query,
        })
        .then((res) => {
          return res.data;
        });
    },

    /**
     * 有查询功能时的必要方法
     * 加载数据时初始化分页信息
     */
    onQuery() {
      this.$refs.table.onReloadData(true);
    },

    /**
     * 必要方法
     * 重新列表数据
     */
    onReloadData() {
      this.$refs.table.onReloadData();
    },

    /**
     * 加载字典数据时的必要方法
     */
    onLoadCodes() {
      this.$api.$queue([this.$api.sysDictTypeDropDownWait({ code: 'op_type' })]).then(([commonStatus]) => {
        this.codes.opTypeDict = commonStatus.data;
      });
    },
    bindCodeValue(code, name) {
      const c = this.codes[name].find((p) => p.code == code);
      if (c) {
        return c.value;
      }
      return null;
    },

    onOpLogClear() {
      this.$refs.table.onLoading();
      this.$api
        .sysOpLogDelete()
        .then((res) => {
          if (res.success) {
            this.$message.success('清空成功');
            this.onReloadData();
          } else {
            this.$message.error('清空失败：' + res.message);
          }
        })
        .finally(() => {
          this.$refs.table.onLoaded();
        });
    },
  },
};
</script>