列表

web/src/api/carInfo.js

@@ -0,0 +1,52 @@
+import service from '@/utils/request'
+// 新增车辆信息
+export const addCarInfo = (data) => {
+    return service({
+        url: '/vehicle/create',
+        method: 'post',
+        data
+    })
+}
+
+// 编辑车辆信息
+export const editCarInfo = (data) => {
+    return service({
+        url: '/vehicle/update',
+        method: 'put',
+        data
+    })
+}
+
+// 根据ID获取车辆信息
+export const carInfoId = (id) => {
+    return service({
+        url: '/vehicle/get?id=' + id,
+        method: 'get'
+    })
+}
+
+// 根据车牌号获取车辆信息
+export const carInfoPhone = (num) => {
+    return service({
+        url: '/vehicle/get-by-plate?plate_number=' + num,
+        method: 'get'
+    })
+}
+
+// 获取车辆列表
+export const obtainCarInfoList = (params) => {
+    return service({
+        url: '/vehicle/list',
+        method: 'get',
+        params
+    })
+}
+
+// 删除车辆
+export const removeCarInfo = (id) => {
+    return service({
+        url: '/vehicle/delete?id=' + id,
+        method: 'delete',
+    })
+}
+

web/src/view/parking/carInfo.vue

@@ -0,0 +1,175 @@
+<template>
+  <div>
+    <el-form inline>
+      <el-form-item>
+        <el-button icon="plus" type="primary" @click="openCarInfo('新增车辆信息', '')">新增</el-button>
+      </el-form-item>
+    </el-form>
+    <el-table>
+      <el-table-column label="车主id">
+      </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 icon="edit" type="primary" text @click="openCarInfo('编辑车辆信息', scope.row)">编辑</el-button>
+          <el-button icon="delete" type="primary" text>删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-dialog v-model="carInfoShow" :title="carInfoTitle" width="500">
+      <el-form label-width="90">
+        <el-form-item label="车牌号：">
+          <el-input v-model="carInfoData.plate_number"/>
+        </el-form-item>
+        <el-form-item label="车辆类型：">
+          <el-select v-model="carInfoData.vehicle_type">
+            <el-option label="货车" value="货车"/>
+            <el-option label="小汽车" value="小汽车"/>
+            <el-option label="面包车" value="面包车"/>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="车辆品牌：">
+          <el-input v-model="carInfoData.vehicle_brand"/>
+        </el-form-item>
+        <el-form-item label="车辆颜色">
+          <el-input v-model="carInfoData.vehicle_color"/>
+        </el-form-item>
+        <el-form-item label="车主：">
+          <el-select v-model="carInfoData.owner_id">
+            <el-option
+                v-for="item in carOwnerList"
+                :key="item.ID"
+            >
+
+            </el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="carInfoShow = false">取消</el-button>
+        <el-button @click="carInfoOperation()" type="primary">确认</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from "vue"
+import { addCarInfo, editCarInfo, obtainCarInfoList, removeCarInfo } from '@/api/carInfo'
+import { obtainCarOwnerList } from '@/api/carOwner'
+import {ElMessage, ElMessageBox} from "element-plus";
+const carOwnerList = reactive([])
+const carInfoTitle = ref('')
+const carInfoShow = ref(false)
+const carInfoData = reactive({
+  id: 0,
+  plate_number: '',
+  vehicle_type: '',
+  vehicle_brand: '',
+  vehicle_color: '',
+  owner_id: 0
+})
+const carInfoList = reactive([])
+const openCarInfo = (head,data) => {
+  carInfoTitle.value = head
+  carInfoShow.value = true
+  if (head === '新增车辆信息') {
+    carInfoData.id = data.ID
+    carInfoData.plate_number = data.plate_number
+    carInfoData.vehicle_type = data.vehicle_type
+    carInfoData.vehicle_brand = data.vehicle_brand
+    carInfoData.vehicle_color = data.vehicle_color
+  } else {
+    carInfoData.plate_number = ''
+    carInfoData.vehicle_type = ''
+    carInfoData.vehicle_brand = ''
+    carInfoData.vehicle_color = ''
+  }
+}
+
+const carInfoOperation = () => {
+  if (carInfoTitle.value === '新增车辆信息') {
+    addCarInfo(carInfoData).then(res => {
+      if (res.code === 0) {
+        ElMessage.success('添加成功')
+        carInfoShow.value = false
+        getCarInfoList()
+      }
+    })
+  } else {
+    editCarInfo(carInfoData).then(res => {
+      if (res.code === 0) {
+        ElMessage.success('更新成功')
+        carInfoShow.value = false
+        getCarInfoList()
+      }
+    })
+  }
+}
+
+const deleteCarInfo = (data) => {
+  ElMessageBox.confirm(
+      '确定要删除该车辆信息吗?',
+      '提示',
+      {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning',
+      }
+  )
+      .then(() => {
+        removeCarInfo(data.ID).then(res => {
+          if (res.code === 0) {
+            ElMessage({
+              type: 'success',
+              message: '删除成功',
+            })
+            getCarInfoList()
+          } else {
+            ElMessage({
+              type: 'error',
+              message: '删除失败',
+            })
+          }
+        })
+      })
+      .catch(() => {
+        ElMessage({
+          type: 'info',
+          message: '取消删除',
+        })
+      })
+}
+
+const getCarInfoList = () => {
+  obtainCarInfoList().then(res => {
+    if (res.code === 0) {
+      carInfoList.length = 0
+      carInfoList.push(...res.data.list)
+    }
+  })
+}
+
+const getCarOwnerList = () => {
+  obtainCarOwnerList().then(res => {
+    if (res.code === 0) {
+      carOwnerList.length = 0
+      carOwnerList.push(...res.data.list)
+    }
+  })
+}
+onMounted(() => {
+  getCarInfoList()
+})
+</script>
+
+<style scoped lang="scss">
+
+</style>