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>
<!--<template>-->
<!--    <a-form :model="queryForm" layout="inline" :label-col="{ style: { width: '80px' } }">-->
<!--        &lt;!&ndash; <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> &ndash;&gt;-->
<!--        <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>-->
<!--            &lt;!&ndash; <a-button type="primary" @click="confirmSearch1">弹框</a-button> &ndash;&gt;-->
<!--        </a-form-item>-->
<!--    </a-form>-->
<!--    &lt;!&ndash; <a-table :dataSource="dataList" v-loading="isLoading" :rowKey="dataList => dataList.id" :columns="columns" :pagination="false" :scroll="{ y: contentHeight }">-->
<!--        -->
<!--    </a-table> &ndash;&gt;-->
<!--    <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"-->
<!--    />-->
<!--    &lt;!&ndash; <moreDialog ref='moreDialogRef'></moreDialog> &ndash;&gt;-->
<!--</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>-->