index.vue

<template>
    <a-form :model="queryForm" layout="inline" :label-col="{ style: { width: '80px' } }">
        <!-- <a-form-item label="apptype:" style="padding: 5px 0">
            <a-select v-model:value="queryForm.apptype"
                      style="width: 280px"
                      :options="apptypeList"
                      optionFilterProp="label"
            >
            </a-select>
        </a-form-item> -->
        <a-form-item label="服务名称:" style="padding: 5px 0">
            <a-select v-model:value="queryForm.appname"
                      style="width: 280px"
                      :options="appnameList"
                      optionFilterProp="label"
            >
            </a-select>
        </a-form-item>
        <a-form-item label="日志等级:" style="padding: 5px 0">
            <a-select v-model:value="queryForm.levels"
                      style="width: 280px"
                      mode="multiple"
                      :maxTagCount="1"
                      :options="levelList"
                      optionFilterProp="label"
            >
            </a-select>
        </a-form-item>
        
        <a-form-item label="选择日期：" style="padding: 5px 0">
            <a-date-picker v-model:value="queryForm.date" :format="'YYYY-MM-DD'" style="width: 280px"/>
        </a-form-item>
        <a-form-item label="选择时间：" style="padding: 5px 0">
            <a-time-picker v-model:value="queryForm.startTime" style="width: 140px"/>
            <a-time-picker v-model:value="queryForm.endTime" style="width: 140px"/>
        </a-form-item>
        <a-form-item label="内容：" style="padding: 5px 0">
            <a-input v-model:value="queryForm.content_like" placeholder="请输入内容" style="width: 280px"/>
        </a-form-item>
        <a-form-item style="padding: 5px 0">
            <a-button type="primary" @click="confirmSearch(1)" :loading="isLoading">查询</a-button>
            <!-- <a-button type="primary" @click="confirmSearch1">弹框</a-button> -->
        </a-form-item>
    </a-form>
    <!-- <a-table :dataSource="dataList" v-loading="isLoading" :rowKey="dataList => dataList.id" :columns="columns" :pagination="false" :scroll="{ y: contentHeight }">
        
    </a-table> -->
    <el-table
          :data="dataList"
          v-loading="isLoading"
          :rowKey="id"
          :height="contentHeight"
          style="width: 100%">
          <el-table-column
            prop="time"
            label="时间"
            width="180">
          </el-table-column>
          <el-table-column
            prop="thread"
            label="线程号"
            width="180">
          </el-table-column>
          <el-table-column
            prop="location"
            label="日志位置"
            width="300">
          </el-table-column>
          <el-table-column
            prop="content"
            label="日志内容">
            <template #default="{ row }">
              <p v-html="stringFormatter(row.content)"></p>
            </template>
          </el-table-column>
        </el-table>
    <a-pagination
        v-model:current="pageNum"
        v-model:pageSize="pageSize"
        :total="total"
        :show-total="total => `共 ${total} 条`"
        :pageSizeOptions="['20', '50', '100']"
        @change="onPageNumChange"
        @showSizeChange="onPageSizeChange"
        show-size-changer
        show-quick-jumper
        style="text-align:center"
    />
    <!-- <moreDialog ref='moreDialogRef'></moreDialog> -->
</template>

<script>
import {reactive, ref, toRaw} from 'vue'
import moment from 'moment'
import SystemLogApi from '@/views/SystemLog/SystemLog.js'
import {isArray} from '@/PublicUtil/Judgment'
import {filterEmptyValueInObject, formatDate, formatTime} from '@/PublicUtil/PublicUtil'
import {PlusOutlined} from '@ant-design/icons-vue'
import moreDialog from './moreDialog.vue'
export default {
    components: {
        PlusOutlined,
        VNodes: (_, {attrs}) => {
            return attrs.vnodes
        },
        moreDialog
    },
    setup() {
        const columns = ref([
            {
                title: '时间',
                dataIndex: 'time',
                align: 'center',
                width: 220
            },
            {
                title: '线程号',
                dataIndex: 'thread',
                align: 'center',
                width: 120
            },
            {
                title: '日志位置',
                dataIndex: 'location',
                align: 'center',
                width: 300
            },
            {
                title: '日志内容',
                dataIndex: 'content',
                align: 'center',
                customRender:({text,record})=>{
                    const rawData = toRaw(queryForm)
                    if (rawData.content_like && rawData.content_like !== '') {
                        text = text.split(rawData.content_like).join("<span style='color:red;'>" + rawData.content_like + "</span>")
                        // console.log(str)
                        // let pHtml = document.createElement("p");
                        return (<p v-html='str'>{text}</p>)
                    }else{
                        return text
                    }
                }
            },
            // {
            //     title: '日志标识',
            //     dataIndex: 'id',
            //     align: 'center',
            // }
        ])
        //ref
        const moreDialogRef = ref()
        // scalar
        const isLoading = ref(false)
        const isSuspended = ref(false)
        const pageNum = ref(1)
        const pageSize = ref(20)
        const total = ref()
        // sequence
        const dataList = ref([])
        const apptypeList = ref([{
            value: 'store',
            label: 'store',
        },{
            value: 'mall',
            label: 'mall',
        }])
        const appnameList = ref([{
            value: 'process',
            label: 'process',
        },{
            value: 'receive',
            label: 'receive',
        },{
            value: 'report',
            label: 'report',
        },{
            value: 'openapi',
            label: 'openapi',
        }])
        const levelList = ref([{
            value: 'info',
            label: 'info',
        },{
            value: 'error',
            label: 'error',
        },{
            value: 'debug',
            label: 'debug',
        },{
            value: 'warn',
            label: 'warn',
        }])
        const queryForm = reactive(
            {
                // apptype:'store',
                appname: 'process',
                levels: ['info','error','debug','warn'],
                content_like: '',
                date: moment(moment().format('YYYY-MM-DD'), 'YYYY-MM-DD'),
                startTime: moment('00:00:00', 'HH:mm:ss'),
                endTime: moment('23:59:59', 'HH:mm:ss'),
            }
        )
        const onPageNumChange = function(num) {
            pageNum.value = num
            confirmSearch()
        }
        
        const onPageSizeChange = function(current, size) {
            pageNum.value = 1
            pageSize.value = size
            confirmSearch()
        }
        const confirmSearch = function(val){
            isLoading.value = true
            const rawData = toRaw(queryForm)
            pageNum.value = val?1:pageNum.value
            const data = filterEmptyValueInObject(
                {
                    // apptype: rawData.apptype,
                    appname: rawData.appname,
                    levels: rawData.levels?rawData.levels.toString():null,
                    content_like: rawData.content_like,
                    startTime: formatDate(rawData.date) + ' ' + formatTime(rawData.startTime),
                    endTime: formatDate(rawData.date) + ' ' + formatTime(rawData.endTime),
                    page: pageNum.value,
                    pageSize: pageSize.value,
                }
            )
            SystemLogApi.getLogSelect(data).then(
                (r) => {
                    isLoading.value = false
                    dataList.value = []
                    if(r.code==200){
                        // r.forEach((item,index)=>{
                        //     item.index = index+1
                        // })
                        if(r.data){
                            dataList.value = r.data.list
                            total.value = r.data.total
                        }
                        
                    }
                   
                }
            )
        }
        const stringFormatter = function(text){
            const rawData = toRaw(queryForm)
            if (rawData.content_like && rawData.content_like !== '') {
                let str = text.split(rawData.content_like).join("<span style='color:red;'>" + rawData.content_like + "</span>")
                return str
            }else{
                return text
            }
        }
        const contentHeight = ref(0)
        const __main = function() {
            contentHeight.value = window.innerHeight - 230
            // confirmSearch()
        }
        const confirmSearch1 = function(){
            moreDialogRef.value.initDialog();
        }
        __main()
        return {
            // scalar
            isLoading,
            pageNum,
            pageSize,
            total,
            contentHeight,
            // sequence
            apptypeList,
            appnameList,
            levelList,
            dataList,
            queryForm,
            columns,
            // function
            confirmSearch,
            confirmSearch1,
            stringFormatter,
            onPageNumChange,
            onPageSizeChange,
            //ref
            moreDialogRef
        }
    }
}
</script>

<style lang="less" scoped>
    .success {
        color: #26ff29;
    }
    // /deep/.el-table{
    //     th,tr{
    //         background-color: #fafafa;
    //     }
    // }
    .failed {
        color: red;
    }
</style>