lc_garage/web/src/view/report/enter.vue

<template>
  <div>
    <el-form inline>
      <el-form-item label="车牌：">
        <el-input v-model="licensePlate"/>
      </el-form-item>
<!--      <el-form-item label="ID：">-->
<!--        <el-input v-model="enterId" />-->
<!--      </el-form-item>-->
      <el-form-item>
        <el-button type="primary" @click="conditionEnterList">搜索</el-button>
      </el-form-item>
    </el-form>
    <el-row>
      <el-col :span="24">
        <el-table :data="enterList" height="605">
          <el-table-column label="车牌">

          </el-table-column>
          <el-table-column label="车牌识别号码">

          </el-table-column>
          <el-table-column label="入场时间">

          </el-table-column>
          <el-table-column label="入场岗亭">

          </el-table-column>
          <el-table-column label="入场通道">

          </el-table-column>
          <el-table-column label="出场时间">

          </el-table-column>
          <el-table-column label="出场岗亭">

          </el-table-column>
          <el-table-column label="出场通道">

          </el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <el-button type="primary" text icon="View" @click="openEnter(scope.row)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="width: 100%;display: flex;justify-content: end">
          <el-pagination
              :current-page="enterCondition.page"
              :page-size="enterCondition.page_size"
              :page-sizes="[10, 30, 50, 100]"
              :total="enterTotal"
              layout="total, sizes, prev, pager, next, jumper"
              @current-change="handleCurrentChange"
              @size-change="handleSizeChange"
              style="padding-right: 10px"
          />
        </div>
      </el-col>
    </el-row>
    <el-dialog title="进出记录" v-model="enterShow">
      <el-form>
        <el-form-item label="车牌：">
        </el-form-item>
        <el-form-item label="到期日期："></el-form-item>
        <el-form-item label="车主名称："></el-form-item>
        <el-form-item label="手机："></el-form-item>
      </el-form>
      <el-form inline label-position="top">
        <el-form-item label="入场识别照片">
          <el-image></el-image>
        </el-form-item>
        <el-form-item label="入场抓拍相机照片">
          <el-image></el-image>
        </el-form-item>
      </el-form>
      <el-form inline label-position="top">
        <el-form-item label="出场识别照片">
          <el-image></el-image>
        </el-form-item>
        <el-form-item label="出场抓拍相机照片">
          <el-image></el-image>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="enterShow = false">取消</el-button>
          <el-button type="primary" @click="enterShow = false">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from "vue"
import { obtainEnterList, obtainEnterNumber } from "@/api/enter"
const enterList = reactive([])
const enterShow = ref(false)
const enterCondition = reactive({
  page:1,
  page_size: 10
})

const licensePlate = ref('')
// const enterId = ref(0)
const enterTotal = ref(0)
const openEnter = (data) => {
  console.log(data)
  enterShow.value = true
}
const getEnterList = async () => {
  await obtainEnterList(enterCondition).then(res => {
    if (res.code === 0) {
      enterList.length = 0
      enterTotal.value = res.data.total
      enterList.push(...res.data.list)
    }
  })
}

const handleCurrentChange = (data) => {
  enterCondition.page = data
  getEnterList()
}

const handleSizeChange = (data) => {
  enterCondition.page_size = data
  getEnterList()
}

// 条件检索
const conditionEnterList = () => {
  obtainEnterNumber(licensePlate.value).then(res => {
    if (res.code === 0) {
      enterList.length = 0
      enterList.push(...res.data.list)
      enterTotal.value = res.data.total
    }
  })
}

onMounted(() => {
  getEnterList()
})
</script>

<style scoped lang="scss">

</style>