lc_garage/web/src/view/parking/roster.vue

<template>
  <div class="shortlist-page">
    <!-- 查询条件 -->
    <el-form
      inline
      :model="queryForm"
    >
      <el-form-item label="车牌号码">
        <el-input
          v-model="queryForm.plate_number"
          placeholder="车牌"
          clearable
        />
      </el-form-item>

      <el-form-item label="RFID标签">
        <el-input
          v-model="queryForm.rfid_tag"
          placeholder="RFID"
          clearable
        />
      </el-form-item>

      <el-form-item label="名单类型">
        <el-select
          v-model="queryForm.list_type"
          placeholder="全部"
          clearable
        >
          <el-option
            label="白名单"
            value="白名单"
          />
          <el-option
            label="黑名单"
            value="黑名单"
          />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          @click="getList"
        >搜索</el-button>
        <el-button @click="resetQuery">重置</el-button>
        <el-button
          type="success"
          icon="Plus"
          @click="add"
        >新增</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格 -->
    <el-table
      :data="list"
      border
      stripe
    >
      <el-table-column
        prop="ID"
        label="ID"
        align="center"
        width="70"
      />
      <el-table-column
        prop="list_type"
        label="名单类型"
        align="center"
        width="120"
      >
        <template #default="scope">
          <el-tag :type="scope.row.list_type === '白名单' ? 'success' : 'danger'">
            {{ scope.row.list_type }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="车牌"
        align="center"
        prop="vehicle.plate_number"
      />
      <el-table-column
        label="RFID"
        align="center"
        prop="vehicle.rfid_tag"
      />
      <el-table-column
        label="车辆类型"
        align="center"
        prop="vehicle.vehicle_type.name"
      />
      <el-table-column
        label="到期时间"
        align="center"
        width="200"
      >
        <template #default="scope">
          {{ formatTime(scope.row.expiration_time) }}
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        width="180"
      >
        <template #default="scope">
          <el-button
            link
            type="primary"
            @click="edit(scope.row)"
          >编辑</el-button>
          <el-button
            link
            type="danger"
            @click="del(scope.row.ID)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      v-model:current-page="page"
      v-model:page-size="pageSize"
      :total="total"
      layout="total, prev, pager, next, jumper"
      style="margin-top:20px; text-align:right"
      @current-change="getList"
    />

    <!-- 新增/编辑弹窗 → 车辆下拉选择 -->
    <el-dialog
      v-model="dialogVisible"
      title="黑白名单管理"
      width="550px"
    >
      <el-form
        :model="form"
        label-width="120px"
      >
        <el-form-item
          label="名单类型"
          required
        >
          <el-radio-group v-model="form.list_type">
            <el-radio value="白名单">白名单</el-radio>
            <el-radio value="黑名单">黑名单</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item
          label="选择车辆"
          required
        >
          <el-select
            v-model="form.vehicle_id"
            placeholder="请选择车辆"
            style="width:100%"
          >
            <el-option
              v-for="v in vehicleList"
              :key="v.ID"
              :label="`${v.plate_number} | ${v.rfid_tag || '无标签'}`"
              :value="v.ID"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="到期时间">
          <el-date-picker
            v-model="form.expiration_time"
            type="datetime"
            placeholder="不选则永久有效"
            style="width:100%"
          />
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button
          type="primary"
          @click="submit"
        >确认保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { queryShortlistList, addShortlist, updateShortlist, deleteShortlist } from '@/api/shortlist'
import { queryAllVehicles } from '@/api/vehicle' // 你现有的车辆接口

// 数据列表
const list = ref([])
const total = ref(0)
const page = ref(1)
const pageSize = ref(10)

// 查询表单
const queryForm = reactive({
  plate_number: '',
  rfid_tag: '',
  list_type: ''
})

// 车辆下拉列表
const vehicleList = ref([])

// 弹窗
const dialogVisible = ref(false)
const form = reactive({
  ID: 0,
  list_type: '白名单',
  vehicle_id: '',
  expiration_time: null
})

// 时间格式化
const formatTime = (time) => {
  if (!time) return '永久有效'
  return time.replace('T', ' ').split('+')[0]
}

// 获取黑白名单列表
const getList = async() => {
  const res = await queryShortlistList({
    page: page.value,
    pageSize: pageSize.value,
    ...queryForm
  })
  list.value = res.data.list
  total.value = res.data.total
}

// 获取所有车辆（下拉）
const getVehicleAll = async() => {
  const res = await queryAllVehicles()
  vehicleList.value = res.data
}

// 重置
const resetQuery = () => {
  queryForm.plate_number = ''
  queryForm.rfid_tag = ''
  queryForm.list_type = ''
  page.value = 1
  getList()
}

// 新增
const add = () => {
  form.ID = 0
  form.list_type = '白名单'
  form.vehicle_id = ''
  form.expiration_time = null
  dialogVisible.value = true
}

// 编辑
const edit = (row) => {
  form.ID = row.ID
  form.list_type = row.list_type
  form.vehicle_id = row.vehicle_id
  form.expiration_time = row.expiration_time ? formatTime(row.expiration_time) : ''
  dialogVisible.value = true
}

// 提交
const submit = async() => {
  if (!form.vehicle_id) {
    ElMessage.warning('请选择车辆')
    return
  }
  try {
    if (form.ID > 0) {
      await updateShortlist(form)
      ElMessage.success('修改成功')
    } else {
      await addShortlist(form)
      ElMessage.success('新增成功')
    }
    dialogVisible.value = false
    getList()
  } catch (e) {
    ElMessage.error('保存失败')
  }
}

// 删除
const del = async(id) => {
  await ElMessageBox.confirm('确定删除？')
  await deleteShortlist(id)
  ElMessage.success('删除成功')
  getList()
}

// 初始化
onMounted(() => {
  getList()
  getVehicleAll()
})
</script>

<style scoped lang="scss">
.shortlist-page {
  padding: 20px;
  background: #fff;
  min-height: 100%;
}
</style>