log-server-web/src/view/levelMonitor/imageRecordList.vue

<template>
    <div>
        <div class="gva-search-box">
            <el-form ref="searchForm" :inline="true" :model="searchInfo">
                <el-form-item label="日期" prop="date">
                    <el-date-picker v-model="searchInfo.date" size="default" type="daterange" unlink-panels
                        range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :disabled-date="disabledDate"
                        :shortcuts="shortcuts" />
                </el-form-item>
                <el-form-item label="任务Id">
                    <el-input v-model="searchInfo.task_id" placeholder="任务ID" />
                </el-form-item>
                <el-form-item>
                    <el-button size="small" type="primary" icon="search" @click="onSubmit">查询</el-button>
                    <el-button size="small" icon="refresh" @click="onReset">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="gva-table-box">
            <el-table :data="tableData" @sort-change="sortChange" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" />
                <el-table-column align="left" label="任务id" min-width="100" prop="task_id" sortable="custom" />
                <el-table-column align="left" label="账号" min-width="150" prop="account" />
                <el-table-column align="left" label="状态" min-width="100" prop="status">
                    <template #default="scope">
                        <div>
                            {{ statusFiletr(scope.row.status) }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column align="left" label="结果" min-width="100" prop="result" />
                <el-table-column align="left" label="创建日期" min-width="100" prop="create_date" sortable="custom" />
            </el-table>
            <div class="gva-pagination">
                <el-pagination :current-page="page" :page-size="pageSize" :page-sizes="[10, 30, 50, 100]" :total="total"
                    layout="total, sizes, prev, pager, next, jumper" @current-change="handleCurrentChange"
                    @size-change="handleSizeChange" />
            </div>
        </div>
    </div>
</template>
  
<script>
export default {
    name: 'ImageRecordList',
}
</script>
  
<script setup>
import {
    getImageRecordList
} from '@/api/imageRecord'
import { toSQLLine } from '@/utils/stringFun'
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import warningBar from '@/components/warningBar/warningBar.vue'
import dayjs from "dayjs";
const apis = ref([])
const page = ref(1)
const total = ref(0)
const pageSize = ref(10)
const tableData = ref([])
const searchInfo = ref({})

const onReset = () => {
    searchInfo.value = {}
    getTableData()
}

const statusFiletr = (value) => {
    const target = statusOptions.value.filter(item => item.value === value)[0]
    return target && `${target.label}`
}

const statusOptions = ref([
    {
        value: 1,
        label: '成功'
    },
    {
        value: 2,
        label: '未识别'
    },
    {
        value: -1,
        label: '失败'
    }
])

// 搜索
const onSubmit = () => {
    page.value = 1
    pageSize.value = 10
    searchInfo.value.task_id = Number(searchInfo.value.task_id)
    if (typeof searchInfo.value.date != "undefined") {
        searchInfo.value.date[0] = dayjs(searchInfo.value.date[0]).format(
            "YYYY-MM-DD"
        );
        searchInfo.value.date[1] = dayjs(searchInfo.value.date[1]).format(
            "YYYY-MM-DD"
        );
    }
    getTableData()
}

// 分页
const handleSizeChange = (val) => {
    pageSize.value = val
    getTableData()
}

const handleCurrentChange = (val) => {
    page.value = val
    getTableData()
}

// 排序
const sortChange = ({ prop, order }) => {
    if (prop) {
        if (prop === 'id') {
            prop = 'id'
        }
        searchInfo.value.orderKey = toSQLLine(prop)
        searchInfo.value.desc = order === 'descending'
    }
    getTableData()
}

// 查询
const getTableData = async () => {
    const table = await getImageRecordList({ page: page.value, pageSize: pageSize.value, ...searchInfo.value })
    if (table.code === 0) {
        tableData.value = table.data.list
        total.value = table.data.total
        page.value = table.data.page
        pageSize.value = table.data.pageSize
    }
}

getTableData()


// }
// const closeDialog = () => {
//     dialogFormVisible.value = false
// }
const dialogTitle = ref('')
const type = ref('')
const dialogFormVisible = ref(false)

// 批量操作
const handleSelectionChange = (val) => {
    apis.value = val
}



// 弹窗相关
// const apiForm = ref(null)
// const initForm = () => {
//     apiForm.value.resetFields()
//     form.value = {
//         game_name: '',
//         game_package_name: ''
//     }
// }

</script>
  
<style scoped lang="scss">
.button-box {
    padding: 10px 20px;

    .el-button {
        float: right;
    }
}

.warning {
    color: #dc143c;
}
</style>