Agriculture-front-end/src/views/operationLog/index.vue

<template>
    <div class="app-container">
        <el-table
            v-loading="loading"
            :data="jobLogList"
            header-row-class-name="tabth"
            @selection-change="handleSelectionChange"
        >
            <el-table-column label="数据名称" width="180" align="center" prop="name" />
            <el-table-column
                label="操作"
                align="center"
                prop="operate"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                label="操作状态"
                align="center"
                prop="runningStatus"
                :show-overflow-tooltip="true"
            />

            <el-table-column
                label="开始时间"
                align="center"
                prop="startTime"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                label="结束时间"
                align="center"
                prop="endTime"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                label="存储路径"
                align="center"
                prop="cclj"
                :show-overflow-tooltip="true"
            />
            <!-- <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template #default="scope">
                    <el-button
                        link
                        type="primary"
                        icon="View"
                        @click="handleView(scope.row)"
                        v-hasPermi="['monitor:job:query']"
                    >
                        详细
                    </el-button>
                </template>
            </el-table-column> -->
        </el-table>

        <pagination
            v-show="total > 0"
            :total="total"
            v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize"
        />

        <!-- 调度日志详细 -->
        <el-dialog title="调度日志详细" v-model="open" width="700px" append-to-body>
            <el-form :model="form" label-width="100px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="日志序号：">{{ form.jobLogId }}</el-form-item>
                        <el-form-item label="任务名称：">{{ form.jobName }}</el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="任务分组：">{{ form.jobGroup }}</el-form-item>
                        <el-form-item label="执行时间：">{{ form.createTime }}</el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="调用方法：">{{ form.invokeTarget }}</el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="日志信息：">{{ form.jobMessage }}</el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="执行状态：">
                            <div v-if="form.status == 0">正常</div>
                            <div v-else-if="form.status == 1">失败</div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="异常信息：" v-if="form.status == 1">
                            {{ form.exceptionInfo }}
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="open = false">关 闭</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup name="JobLog">
import { getJob } from '@/api/monitor/job';
import { getfindLog } from '@/api/operationLog/operationLog.js';

const { proxy } = getCurrentInstance();
const { sys_common_status, sys_job_group } = proxy.useDict('sys_common_status', 'sys_job_group');

const jobLogList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const multiple = ref(true);
const total = ref(0);
const dateRange = ref([]);
const route = useRoute();

const data = reactive({
    form: {},
    queryParams: {
        pageNum: 1,
        pageSize: 17,
        dictName: undefined,
        dictType: undefined,
        status: undefined,
    },
});
let pageArr = ref([]);

const { queryParams, form, rules } = toRefs(data);

onUpdated(() => {
        document.querySelector('.mode').style.display = 'none';
        window.document.querySelector('#screenfull').style.display = 'none';
})
watch(
    () => data.queryParams.pageNum,
    (val, oldVal) => {
        jobLogList.value = pageArr.value.slice(
            (data.queryParams.pageNum - 1) * data.queryParams.pageSize,
            data.queryParams.pageNum * data.queryParams.pageSize
        );
    }
);

/** 查询调度日志列表 */
function getList() {
    loading.value = true;
    getfindLog().then(res => {
        loading.value = false;
        pageArr.value = res.data;
        jobLogList.value = pageArr.value.slice(
            (data.queryParams.pageNum - 1) * data.queryParams.pageSize,
            data.queryParams.pageNum * data.queryParams.pageSize
        );
        total.value = pageArr.value.length;
    });
}
// 多选框选中数据
function handleSelectionChange(selection) {
    ids.value = selection.map(item => item.jobLogId);
    multiple.value = !selection.length;
}

(() => {
    const jobId = route.params && route.params.jobId;
    if (jobId !== undefined && jobId != 0) {
        getJob(jobId).then(response => {
            queryParams.value.jobName = response.data.jobName;
            queryParams.value.jobGroup = response.data.jobGroup;
            getList();
        });
    } else {
        getList();
    }
})();

getList();
</script>
<style lang="scss" scoped>
:deep(.tabth) {
    background-color: rgba(247, 247, 247, 1);
}
:deep(.el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th) {
    color: rgba(0, 0, 0, 1);
}
:deep(.el-pagination__sizes){
    display: none !important;
}
</style>