图片上传页面提交

src/api/imageRecord.js

@@ -0,0 +1,10 @@
+import service from '@/utils/request'
+
+export const getImageRecordList = (data) => {
+    return service({
+        url: '/levelMonitor/getImageRecordList',
+        method: 'post',
+        data
+    })
+}
+

src/view/levelMonitor/imageRecordList.vue

@@ -0,0 +1,183 @@
+<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>
+