refactor: 前后端基础部分

nladmin-ui/src/views/lucene/index.vue

@@ -0,0 +1,172 @@
+<template>
+  <div class="app-container">
+    <div class="head-container">
+      <el-form
+        :inline="true"
+        label-position="right"
+        label-width="=100px"
+        label-suffix=":"
+      >
+        <el-form-item :label="$t('Log.label')">
+          <el-select
+            v-model="query.label"
+            clearable
+            size="mini"
+            :placeholder="$t('Log.label')"
+            style="width: 240px;"
+          >
+            <el-option
+              v-for="item in tagList"
+              :label="item"
+              :value="item"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('Log.level')">
+          <el-select
+            v-model="query.level"
+            clearable
+            size="mini"
+            :placeholder="$t('Log.level')"
+          >
+            <el-option
+              v-for="item in levelOptions"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('Log.search')">
+          <el-input
+            v-model="query.message"
+            clearable
+            size="mini"
+            :placeholder="$t('Log.content')"
+          />
+        </el-form-item>
+        <el-form-item :label="$t('Log.link_id')">
+          <el-input
+            v-model="query.tlogTraceId"
+            clearable
+            size="mini"
+            :placeholder="$t('Log.link_id_msg')"
+          />
+        </el-form-item>
+        <el-form-item :label="$t('Log.time')">
+          <el-date-picker
+            v-model="query.createTime"
+            type="datetimerange"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            :range-separator="$t('Log.to')"
+            :start-placeholder="$t('Log.start_time')"
+            :end-placeholder="$t('Log.end_time')"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" size="mini" @click="queryData">
+            {{ $t('common.Query') }}
+          </el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <!--表格渲染-->
+    <el-card shadow="hover" style="width: 100%" class="log-warpper">
+      <div style="width: 100%">
+        <div v-for="(log, index) in logs" :key="index">
+          <div style="margin-bottom: 5px; font-size: 14px;" v-html="log" />
+        </div>
+      </div>
+    </el-card>
+    <!--  分页  -->
+    <el-pagination
+      :page-sizes="[100, 500, 1000]"
+      :page-size.sync="query.size"
+      :total="query.total"
+      :current-page.sync="query.page"
+      style="margin-top: 8px;"
+      layout="total, prev, pager, next, sizes"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    />
+  </div>
+</template>
+
+<script>
+import luceneOperation from '@/views/lucene/api/lucene'
+import { default as AnsiUp } from 'ansi_up'
+export default {
+  name: 'LuceneLog',
+  data() {
+    return {
+      permission: {
+        add: ['admin', 'param:add'],
+        edit: ['admin', 'param:edit'],
+        del: ['admin', 'param:del']
+      },
+      levelOptions: [{
+        value: 'DEBUG',
+        label: 'DEBUG'
+      }, {
+        value: 'INFO',
+        label: 'INFO'
+      }, {
+        value: 'ERROR',
+        label: 'ERROR'
+      }, {
+        value: 'WARN',
+        label: 'WARN'
+      }],
+      rules: {},
+      logs: [],
+      tagList: [],
+      query: {
+        tlogTraceId: '',
+        message: '',
+        page: 0,
+        size: 100,
+        total: 0,
+        createTime: ''
+      }
+    }
+  },
+  created() {
+    this.queryData()
+    this.getTagList()
+  },
+  methods: {
+    handleSizeChange(val) {
+      this.query.size = val
+      this.queryData()
+    },
+    handleCurrentChange(val) {
+      this.query.page = val
+      this.queryData()
+    },
+    getTagList() {
+      luceneOperation.getTagName().then(res => {
+        this.tagList = res
+      })
+    },
+    queryData() {
+      if (this.query.createTime) {
+        this.query.startTime = this.query.createTime[0]
+        this.query.endTime = this.query.createTime[1]
+      }
+      luceneOperation.getLogData(this.query).then(res => {
+        this.logs = [] // 清空
+        var ansi_up = new AnsiUp()
+        // 数据初始化
+        for (const i in res.content) {
+          this.logs[i] = ansi_up.ansi_to_html(res.content[i])
+        }
+        // this.logs = res.content
+        this.query.total = res.totalElements
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>