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

<template>
  <div>
    <!-- 搜索表单 -->
    <el-form inline>
      <el-form-item label="车牌号">
        <el-input
          v-model="queryForm.plate_number"
          placeholder="请输入车牌号"
          clearable
        />
      </el-form-item>
      <el-form-item label="车辆类型">
        <el-select
          v-model="queryForm.vehicle_type"
          placeholder="全部"
          clearable
        >
          <el-option
            label="月租车"
            value="月租车"
          />
          <el-option
            label="临时车"
            value="临时车"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="车主">
        <el-select
          v-model="queryForm.owner_id"
          clearable
          placeholder="请选择车主"
          style="width: 180px"
        >
          <el-option
            v-for="item in ownerList"
            :key="item.ID"
            :label="item.owner_name"
            :value="item.ID"
          />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button
          icon="Search"
          type="primary"
          @click="getVehicleList"
        >搜索</el-button>
        <el-button
          icon="Refresh"
          @click="resetQuery"
        >重置</el-button>
      </el-form-item>
      <el-form-item>
        <el-button
          icon="Plus"
          type="primary"
          @click="openDialog('新增车辆', null)"
        >新增</el-button>
      </el-form-item>
    </el-form>

    <!-- 车辆列表 -->
    <el-table
      :data="vehicleList"
      height="605"
      border
    >
      <el-table-column
        label="ID"
        align="center"
        prop="ID"
        width="80"
      />
      <el-table-column
        label="车牌号"
        align="center"
        prop="plate_number"
      />
      <el-table-column
        label="电子标签"
        align="center"
        prop="rfid_tag"
      />
      <el-table-column
        label="车辆类型"
        align="center"
        prop="vehicle_type"
      >
        <template #default="scope">
          <el-tag :type="scope.row.vehicle_type === '月租车' ? 'primary' : 'success'">
            {{ scope.row.vehicle_type }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="品牌"
        align="center"
        prop="vehicle_brand"
      />
      <el-table-column
        label="颜色"
        align="center"
        prop="vehicle_color"
      />
      <el-table-column
        label="车主"
        align="center"
      >
        <template #default="scope">
          {{ scope.row.owner?.owner_name || "临时车辆" }}
        </template>
      </el-table-column>

      <el-table-column
        label="操作"
        align="center"
        width="180"
      >
        <template #default="scope">
          <el-button
            icon="Edit"
            type="primary"
            text
            @click="openDialog('编辑车辆', scope.row)"
          >编辑</el-button>
          <el-button
            icon="Delete"
            type="danger"
            text
            @click="deleteVehicle(scope.row.ID)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination-box">
      <el-pagination
        :current-page="queryForm.page"
        :page-size="queryForm.pageSize"
        :page-sizes="[10, 30, 50, 100]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @current-change="handlePageChange"
        @size-change="handleSizeChange"
      />
    </div>

    <!-- 新增/编辑弹窗 -->
    <el-dialog
      v-model="dialogVisible"
      :title="dialogTitle"
      width="520px"
    >
      <el-form
        label-width="100px"
        :model="formData"
      >
        <el-form-item label="车牌号：">
          <el-input
            v-model="formData.plate_number"
            placeholder="请输入车牌号"
          />
        </el-form-item>
        <el-form-item label="电子标签：">
          <el-input
            v-model="formData.rfid_tag"
            placeholder="RFID标签（UHF用）"
          />
        </el-form-item>
        <el-form-item label="车辆类型：">
          <el-select
            v-model="formData.vehicle_type"
            placeholder="请选择"
          >
            <el-option
              label="月租车"
              value="月租车"
            />
            <el-option
              label="临时车"
              value="临时车"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="车辆品牌：">
          <el-input
            v-model="formData.vehicle_brand"
            placeholder="如：保时捷"
          />
        </el-form-item>
        <el-form-item label="车辆颜色">
          <el-input
            v-model="formData.vehicle_color"
            placeholder="如：黑色"
          />
        </el-form-item>
        <el-form-item label="绑定车主：">
          <el-select
            v-model="formData.owner_id"
            placeholder="临时车可不选"
            clearable
            style="width: 100%"
          >
            <el-option
              v-for="item in ownerList"
              :key="item.ID"
              :label="item.owner_name"
              :value="item.ID"
            />
          </el-select>
        </el-form-item>
      </el-form>

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

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

import {
  obtainVehicleList,
  addVehicle,
  editVehicle,
  removeVehicleList
} from '@/api/vehicle'
// 车主接口
import { obtainCarOwnerList } from '@/api/carOwner'

// 搜索参数
const queryForm = reactive({
  plate_number: '',
  vehicle_type: '',
  owner_id: null,
  page: 1,
  pageSize: 10
})

// 车辆列表
const vehicleList = ref([])
const total = ref(0)
// 车主列表
const ownerList = ref([])

// 弹窗
const dialogVisible = ref(false)
const dialogTitle = ref('')
const formData = reactive({
  ID: 0,
  plate_number: '',
  rfid_tag: '',
  vehicle_type: '',
  vehicle_brand: '',
  vehicle_color: '',
  owner_id: null // 支持为空（临时车）
})

// ============== 车辆列表 ==============
const getVehicleList = async() => {
  try {
    const res = await obtainVehicleList(queryForm)
    if (res.code === 0) {
      vehicleList.value = res.data.list
      total.value = res.data.total
    }
  } catch (err) {
    ElMessage.error('获取列表失败')
  }
}

// 重置搜索
const resetQuery = () => {
  queryForm.plate_number = ''
  queryForm.vehicle_type = ''
  queryForm.owner_id = null
  queryForm.page = 1
  getVehicleList()
}

// ============== 弹窗操作 ==============
const openDialog = (title, row) => {
  dialogTitle.value = title
  dialogVisible.value = true
  // 重置表单
  if (!row) {
    Object.assign(formData, {
      ID: 0, plate_number: '', rfid_tag: '',
      vehicle_type: '', vehicle_brand: '',
      vehicle_color: '', owner_id: null
    })
    return
  }
  // 编辑回显
  Object.assign(formData, row)
}

// 提交保存
const submitForm = async() => {
  if (!formData.plate_number) {
    ElMessage.warning('请输入车牌号')
    return
  }
  try {
    if (formData.ID > 0) {
      await editVehicle(formData)
      ElMessage.success('编辑成功')
    } else {
      await addVehicle(formData)
      ElMessage.success('新增成功')
    }
    dialogVisible.value = false
    getVehicleList()
  } catch (err) {
    ElMessage.error('保存失败')
  }
}

// ============== 删除 ==============
const deleteVehicle = async(id) => {
  await ElMessageBox.confirm('确定删除该车辆？', '提示', { type: 'warning' })
  try {
    await removeVehicleList({ id })
    ElMessage.success('删除成功')
    getVehicleList()
  } catch (err) {
    ElMessage.error('删除失败')
  }
}

// ============== 分页 ==============
const handlePageChange = (page) => {
  queryForm.page = page
  getVehicleList()
}
const handleSizeChange = (size) => {
  queryForm.pageSize = size
  queryForm.page = 1
  getVehicleList()
}

// ============== 初始化 ==============
const getOwnerList = async() => {
  const res = await obtainCarOwnerList()
  if (res.code === 0) ownerList.value = res.data.list
}

onMounted(() => {
  getVehicleList()
  getOwnerList()
})
</script>

<style scoped lang="scss">
.pagination-box {
  width: 100%;
  display: flex;
  justify-content: end;
  padding: 10px;
}
</style>