log-server-web/src/view/logStatistics/scanningCode.vue

<template>
    <div>
      <div class="gva-search-box">
        <el-form ref="searchForm" :inline="true" :model="searchInfo">
            <el-form-item label="分类">
            <el-select v-model="searchInfo.task_type" placeholder="分类查询" >
                <el-option
                    v-for="item in searchStatusOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    :disabled="item.disabled"
                />
                </el-select>
            </el-form-item>
            <el-form-item label="游戏id">
            <el-input v-model="searchInfo.game_id" placeholder="游戏id" />
          </el-form-item>
          <el-form-item label="日期" prop="create_date">
                <el-date-picker
                    v-model="searchInfo.date"
                    popper-class="picker-popovers"
                    class="timefilter"
                    type="datetime"
                    placeholder="选择日期时间"
                    value-format="YYYY-MM-DD"
                >
                </el-date-picker>
          </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">
          
          <el-table-column align="left" label="游戏ID" min-width="150" prop="game_id" sortable="custom" />
          <el-table-column align="left" label="日期" min-width="150" prop="create_date" sortable="custom" />
          <el-table-column align="left" label="订单号" min-width="150" prop="order_num" sortable="custom" />
          <el-table-column align="left" label="供应商" min-width="150" prop="supplier" sortable="custom" />
          <el-table-column align="left" label="上报时间" min-width="150" prop="create_time" sortable="custom" />
          <el-table-column fixed="left" align="left" label="类型" min-width="60" prop="task_type" sortable="custom">
          <template #default="scope">
            <div>
              {{ typeFiletr(scope.row.task_type) }}
            </div>
          </template>
        </el-table-column>
        </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: 'ScanningTotal',
  }
  </script>
  
  <script setup>
  import {
    getLogScanningList,

  } from '@/api/log'

  import { toSQLLine } from '@/utils/stringFun'
  import { ref } from 'vue'

  
  const page = ref(1)
  const total = ref(0)
  const pageSize = ref(10)
  const tableData = ref([])
  const searchInfo = ref({})
  
  const onReset = () => {
    searchInfo.value = {}
  }

  // 搜索
  
  const onSubmit = () => {
    page.value = 1
    pageSize.value = 10
    searchInfo.value.game_id = Number(searchInfo.value.game_id)
    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 getLogScanningList({ 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 searchStatusOptions = ref([
 {
    value: 0,
    label: '总数据',
  },
  {
    value: -1,
    label: '新增',
  },
  {
    value: 1,
    label: '留存',
  }
])

const typeFiletr = (value) => {
  const target = typeOptions.value.filter(item => item.value === value)[0]
  return target && `${target.label}`
}
const typeOptions = ref([
  {
    value: 0,
    label: '新增',
    type: ''
  },
  {
    value: 1,
    label: '活跃',
    type: ''
  }
])
  
  </script>
  
  <style scoped lang="scss">
  .button-box {
    padding: 10px 20px;
    .el-button {
      float: right;
    }
  }
  .warning {
    color: #dc143c;
  }
  </style>