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_id"
          placeholder="全部"
          clearable
          style="width:160px"
        >
          <el-option
            v-for="item in typeList"
            :key="item.ID"
            :label="item.name"
            :value="item.ID"
          />
        </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-button
          type="warning"
          @click="openTypeDrawer"
        >管理车辆类型</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"
      >
        <template #default="scope">
          <el-tag type="primary">
            {{ scope.row.vehicle_type?.name || "未知" }}
          </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_id"
            placeholder="请选择"
            style="width:100%"
          >
            <el-option
              v-for="item in typeList"
              :key="item.ID"
              :label="item.name"
              :value="item.ID"
            />
          </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>

    <!-- ===================== 车辆类型抽屉（Drawer）===================== -->
    <el-drawer
      v-model="typeDrawerVisible"
      title="车辆类型管理"
      size="700px"
    >
      <div style="display:flex; justify-content:space-between; margin-bottom:10px">
        <el-input
          v-model="typeQuery.name"
          placeholder="搜索类型名称"
          clearable
          style="width:200px"
          @input="getTypeList"
        />
        <el-button
          type="primary"
          icon="Plus"
          @click="openTypeForm('新增')"
        >新增类型</el-button>
      </div>

      <el-table
        :data="typeList"
        border
      >
        <el-table-column
          label="ID"
          prop="ID"
        />
        <el-table-column
          label="类型名称"
          prop="name"
        />
        <el-table-column
          label="备注"
          prop="remarks"
        />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button
              text
              type="primary"
              @click="openTypeForm('编辑', scope.row)"
            >编辑</el-button>
            <el-button
              text
              type="danger"
              @click="deleteType(scope.row.ID)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        v-model:current-page="typeQuery.page"
        v-model:page-size="typeQuery.pageSize"
        :total="typeTotal"
        layout="total, prev, pager, next"
        style="margin-top:10px; text-align:right"
        @current-change="getTypeList"
      />
    </el-drawer>

    <!-- 车辆类型 新增/编辑 弹窗 -->
    <el-dialog
      v-model="typeDialogVisible"
      :title="typeTitle"
      width="450px"
    >
      <el-form
        label-width="80px"
        :model="typeForm"
      >
        <el-form-item label="类型名称">
          <el-input
            v-model="typeForm.name"
            placeholder="如：月租车、VIP车"
          />
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            v-model="typeForm.remarks"
            type="textarea"
            rows="3"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="typeDialogVisible = false">取消</el-button>
        <el-button
          type="primary"
          @click="saveType"
        >保存</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'
// 车辆类型接口
import {
  obtainVehicleTypeList,
  createVehicleType,
  editVehicleType,
  removeVehicleType,
  getAllVehicleTypes
} from '@/api/vehicle'

// ==================== 车辆管理原有逻辑 ====================
const queryForm = reactive({
  plate_number: '',
  vehicle_type_id: null,
  owner_id: null,
  page: 1,
  pageSize: 10
})

const vehicleList = ref([])
const total = ref(0)
const ownerList = ref([])
const typeList = ref([])

const dialogVisible = ref(false)
const dialogTitle = ref('')
const formData = reactive({
  ID: 0,
  plate_number: '',
  rfid_tag: '',
  vehicle_type_id: null,
  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_id = null
  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_id: null, 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 typeDrawerVisible = ref(false)
const typeDialogVisible = ref(false)
const typeTitle = ref('')

const typeQuery = reactive({
  name: '',
  page: 1,
  pageSize: 10
})
const typeTotal = ref(0)

const typeForm = reactive({
  ID: 0,
  name: '',
  remarks: ''
})

// 打开类型抽屉
const openTypeDrawer = () => {
  typeDrawerVisible.value = true
  getTypeList()
}

// 获取类型列表
const getTypeList = async() => {
  const res = await obtainVehicleTypeList(typeQuery)
  if (res.code === 0) {
    typeList.value = res.data.list
    typeTotal.value = res.data.total
  }
}

// 打开新增/编辑
const openTypeForm = (title, row = null) => {
  typeTitle.value = title
  typeDialogVisible.value = true
  if (!row) {
    Object.assign(typeForm, { ID: 0, name: '', remarks: '' })
    return
  }
  Object.assign(typeForm, row)
}

// 保存
const saveType = async() => {
  if (!typeForm.name) {
    ElMessage.warning('请输入类型名称')
    return
  }
  try {
    if (typeForm.ID > 0) {
      await editVehicleType(typeForm)
      ElMessage.success('编辑成功')
    } else {
      await createVehicleType(typeForm)
      ElMessage.success('新增成功')
    }
    typeDialogVisible.value = false
    getTypeList()
    loadAllTypes()
  } catch (e) {
    ElMessage.error('保存失败')
  }
}

// 删除
const deleteType = async(id) => {
  await ElMessageBox.confirm('确定删除？')
  await removeVehicleType(id)
  ElMessage.success('删除成功')
  getTypeList()
  loadAllTypes()
}

// 加载所有类型（下拉框）
const loadAllTypes = async() => {
  const res = await getAllVehicleTypes()
  if (res.code === 0) typeList.value = res.data
}

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

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

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