|
|
@@ -1,269 +1,371 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
+ <!-- 搜索表单 -->
|
|
|
<el-form inline>
|
|
|
<el-form-item label="车牌号">
|
|
|
<el-input
|
|
|
- placeholder="请输入车牌号"
|
|
|
- v-model="infoSearchData.plate_number"
|
|
|
- clearable
|
|
|
- @clear="infoSearchData.plate_number = ''"/>
|
|
|
+ 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="carOwnerName" @change="changeSearchCarOwner" clearable @clear="clearCarOwner">
|
|
|
+ <el-select
|
|
|
+ v-model="queryForm.owner_id"
|
|
|
+ clearable
|
|
|
+ placeholder="请选择车主"
|
|
|
+ style="width: 180px"
|
|
|
+ >
|
|
|
<el-option
|
|
|
- v-for="item in carOwnerList"
|
|
|
- :key="item.ID"
|
|
|
- :label="item.owner_name"
|
|
|
- :value="item.owner_name"
|
|
|
+ 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="getCarInfoList">搜索</el-button>
|
|
|
+ <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="openCarInfo('新增车辆信息', '')">新增</el-button>
|
|
|
+ <el-button
|
|
|
+ icon="Plus"
|
|
|
+ type="primary"
|
|
|
+ @click="openDialog('新增车辆', null)"
|
|
|
+ >新增</el-button>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
- <el-table :data="carInfoList" height="605">
|
|
|
- <el-table-column label="车主id" align="center" prop="owner_id">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="车牌号" align="center" prop="plate_number">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="车辆类型" align="center" prop="vehicle_type">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="车辆品牌" align="center" prop="vehicle_brand">
|
|
|
+
|
|
|
+ <!-- 车辆列表 -->
|
|
|
+ <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_color">
|
|
|
+ <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">
|
|
|
+
|
|
|
+ <el-table-column
|
|
|
+ label="操作"
|
|
|
+ align="center"
|
|
|
+ width="180"
|
|
|
+ >
|
|
|
<template #default="scope">
|
|
|
- <el-button icon="edit" type="primary" text @click="openCarInfo('编辑车辆信息', scope.row)">编辑</el-button>
|
|
|
- <el-button icon="delete" type="primary" text @click="deleteCarInfo(scope.row)">删除</el-button>
|
|
|
+ <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 style="width: 100%;display: flex;justify-content: end">
|
|
|
+
|
|
|
+ <!-- 分页 -->
|
|
|
+ <div class="pagination-box">
|
|
|
<el-pagination
|
|
|
- :current-page="infoSearchData.page"
|
|
|
- :page-size="infoSearchData.page_size"
|
|
|
- :page-sizes="[10, 30, 50, 100]"
|
|
|
- :total="carInfoTotal"
|
|
|
- layout="total, sizes, prev, pager, next, jumper"
|
|
|
- @current-change="handleCurrentChange"
|
|
|
- @size-change="handleSizeChange"
|
|
|
- style="padding-right: 10px"
|
|
|
+ :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="carInfoShow" :title="carInfoTitle" width="500">
|
|
|
- <el-form label-width="90">
|
|
|
+
|
|
|
+ <!-- 新增/编辑弹窗 -->
|
|
|
+ <el-dialog
|
|
|
+ v-model="dialogVisible"
|
|
|
+ :title="dialogTitle"
|
|
|
+ width="520px"
|
|
|
+ >
|
|
|
+ <el-form
|
|
|
+ label-width="100px"
|
|
|
+ :model="formData"
|
|
|
+ >
|
|
|
<el-form-item label="车牌号:">
|
|
|
- <el-input v-model="carInfoData.plate_number"/>
|
|
|
+ <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="carInfoData.vehicle_type">
|
|
|
- <el-option label="月租车" value="月租车"/>
|
|
|
- <el-option label="临时车" value="临时车"/>
|
|
|
+ <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="carInfoData.vehicle_brand"/>
|
|
|
+ <el-input
|
|
|
+ v-model="formData.vehicle_brand"
|
|
|
+ placeholder="如:保时捷"
|
|
|
+ />
|
|
|
</el-form-item>
|
|
|
<el-form-item label="车辆颜色">
|
|
|
- <el-input v-model="carInfoData.vehicle_color"/>
|
|
|
+ <el-input
|
|
|
+ v-model="formData.vehicle_color"
|
|
|
+ placeholder="如:黑色"
|
|
|
+ />
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="车主:">
|
|
|
- <el-select v-model="ownerName" value-key="ID" @change="changeCarOwner">
|
|
|
+ <el-form-item label="绑定车主:">
|
|
|
+ <el-select
|
|
|
+ v-model="formData.owner_id"
|
|
|
+ placeholder="临时车可不选"
|
|
|
+ clearable
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
<el-option
|
|
|
- v-for="item in carOwnerList"
|
|
|
- :key="item.ID"
|
|
|
- :label="item.owner_name"
|
|
|
- :value="item.owner_name"/>
|
|
|
+ v-for="item in ownerList"
|
|
|
+ :key="item.ID"
|
|
|
+ :label="item.owner_name"
|
|
|
+ :value="item.ID"
|
|
|
+ />
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="电子标签:">
|
|
|
- <el-input v-model="carInfoData.rfid_tag"/>
|
|
|
- </el-form-item>
|
|
|
</el-form>
|
|
|
+
|
|
|
<template #footer>
|
|
|
- <el-button @click="carInfoShow = false">取消</el-button>
|
|
|
- <el-button @click="carInfoOperation()" type="primary">确认</el-button>
|
|
|
+ <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 { addCarInfo, editCarInfo, obtainCarInfoList, removeCarInfo, carInfoPhone } from '@/api/carInfo'
|
|
|
+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 { ElMessage, ElMessageBox } from "element-plus";
|
|
|
-const carOwnerName = ref('')
|
|
|
-const carOwnerList = reactive([])
|
|
|
-const carInfoTitle = ref('')
|
|
|
-const carInfoShow = ref(false)
|
|
|
-const carInfoData = reactive({
|
|
|
- id:0,
|
|
|
+
|
|
|
+// 搜索参数
|
|
|
+const queryForm = reactive({
|
|
|
plate_number: '',
|
|
|
vehicle_type: '',
|
|
|
- vehicle_brand: '',
|
|
|
- vehicle_color: '',
|
|
|
- owner_id: 0,
|
|
|
- rfid_tag: '17'
|
|
|
+ owner_id: null,
|
|
|
+ page: 1,
|
|
|
+ pageSize: 10
|
|
|
})
|
|
|
|
|
|
-const infoSearchData = reactive({
|
|
|
+// 车辆列表
|
|
|
+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: '',
|
|
|
- owner_id: 0,
|
|
|
- page: 1,
|
|
|
- page_size: 10
|
|
|
+ vehicle_brand: '',
|
|
|
+ vehicle_color: '',
|
|
|
+ owner_id: null // 支持为空(临时车)
|
|
|
})
|
|
|
|
|
|
-const ownerName = ref('')
|
|
|
-const carInfoList = reactive([])
|
|
|
-
|
|
|
-const carInfoTotal = ref(0)
|
|
|
-const openCarInfo = (head,data) => {
|
|
|
- carInfoTitle.value = head
|
|
|
- carInfoShow.value = true
|
|
|
- if (head === '编辑车辆信息') {
|
|
|
- carInfoData.id = data.ID
|
|
|
- carInfoData.owner_id = data.owner_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
|
|
|
- carInfoData.rfid_tag = data.rfid_tag
|
|
|
- carOwnerList.forEach(item => {
|
|
|
- if (item.ID === data.owner_id) {
|
|
|
- ownerName.value = item.owner_name
|
|
|
- }
|
|
|
- })
|
|
|
- } else {
|
|
|
- carInfoData.plate_number = ''
|
|
|
- carInfoData.vehicle_type = ''
|
|
|
- carInfoData.vehicle_brand = ''
|
|
|
- carInfoData.vehicle_color = ''
|
|
|
- carInfoData.owner_id = 0
|
|
|
- carInfoData.rfid_tag = ''
|
|
|
- ownerName.value = ''
|
|
|
- }
|
|
|
-}
|
|
|
-const changeSearchCarOwner = (val) => {
|
|
|
- carOwnerList.forEach(item => {
|
|
|
- if (item.owner_name === val) {
|
|
|
- infoSearchData.owner_id = item.ID
|
|
|
+// ============== 车辆列表 ==============
|
|
|
+const getVehicleList = async() => {
|
|
|
+ try {
|
|
|
+ const res = await obtainVehicleList(queryForm)
|
|
|
+ if (res.code === 0) {
|
|
|
+ vehicleList.value = res.data.list
|
|
|
+ total.value = res.data.total
|
|
|
}
|
|
|
- })
|
|
|
- console.log(infoSearchData.owner_id)
|
|
|
+ } catch (err) {
|
|
|
+ ElMessage.error('获取列表失败')
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
-const clearCarOwner = () => {
|
|
|
- infoSearchData.owner_id = 0
|
|
|
- ownerName.value = ''
|
|
|
+// 重置搜索
|
|
|
+const resetQuery = () => {
|
|
|
+ queryForm.plate_number = ''
|
|
|
+ queryForm.vehicle_type = ''
|
|
|
+ queryForm.owner_id = null
|
|
|
+ queryForm.page = 1
|
|
|
+ getVehicleList()
|
|
|
}
|
|
|
|
|
|
-const changeCarOwner = (val) => {
|
|
|
- carOwnerList.forEach(item => {
|
|
|
- if (item.owner_name === val) {
|
|
|
- ownerName.value = item.owner_name
|
|
|
- carInfoData.owner_id = item.ID
|
|
|
- }
|
|
|
- })
|
|
|
-}
|
|
|
-
|
|
|
-const carInfoOperation = () => {
|
|
|
- if (carInfoTitle.value === '新增车辆信息') {
|
|
|
- addCarInfo(carInfoData).then(res => {
|
|
|
- if (res.code === 0) {
|
|
|
- ElMessage.success('添加成功')
|
|
|
- carInfoShow.value = false
|
|
|
- getCarInfoList()
|
|
|
- }
|
|
|
- })
|
|
|
- } else {
|
|
|
- editCarInfo(carInfoData).then(res => {
|
|
|
- console.log(res)
|
|
|
- if (res.code === 0) {
|
|
|
- ElMessage.success('更新成功')
|
|
|
- carInfoShow.value = false
|
|
|
- getCarInfoList()
|
|
|
- }
|
|
|
+// ============== 弹窗操作 ==============
|
|
|
+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 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(infoSearchData).then(res => {
|
|
|
- if (res.code === 0) {
|
|
|
- carInfoList.length = 0
|
|
|
- carInfoList.push(...res.data.list)
|
|
|
- carInfoTotal.value = res.data.total
|
|
|
+// 提交保存
|
|
|
+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 getCarOwnerList = () => {
|
|
|
- obtainCarOwnerList().then(res => {
|
|
|
- if (res.code === 0) {
|
|
|
- carOwnerList.length = 0
|
|
|
- carOwnerList.push(...res.data.list)
|
|
|
- }
|
|
|
- })
|
|
|
+// ============== 删除 ==============
|
|
|
+const deleteVehicle = async(id) => {
|
|
|
+ await ElMessageBox.confirm('确定删除该车辆?', '提示', { type: 'warning' })
|
|
|
+ try {
|
|
|
+ await removeVehicleList({ id })
|
|
|
+ ElMessage.success('删除成功')
|
|
|
+ getVehicleList()
|
|
|
+ } catch (err) {
|
|
|
+ ElMessage.error('删除失败')
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
-const handleCurrentChange = (data) => {
|
|
|
- infoSearchData.page = data
|
|
|
- getCarInfoList()
|
|
|
+// ============== 分页 ==============
|
|
|
+const handlePageChange = (page) => {
|
|
|
+ queryForm.page = page
|
|
|
+ getVehicleList()
|
|
|
+}
|
|
|
+const handleSizeChange = (size) => {
|
|
|
+ queryForm.pageSize = size
|
|
|
+ queryForm.page = 1
|
|
|
+ getVehicleList()
|
|
|
}
|
|
|
|
|
|
-const handleSizeChange = (data) => {
|
|
|
- infoSearchData.page_size = data
|
|
|
- infoSearchData.page = 1
|
|
|
- getCarInfoList()
|
|
|
+// ============== 初始化 ==============
|
|
|
+const getOwnerList = async() => {
|
|
|
+ const res = await obtainCarOwnerList()
|
|
|
+ if (res.code === 0) ownerList.value = res.data.list
|
|
|
}
|
|
|
|
|
|
onMounted(() => {
|
|
|
- getCarInfoList()
|
|
|
- getCarOwnerList()
|
|
|
+ getVehicleList()
|
|
|
+ getOwnerList()
|
|
|
})
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
-
|
|
|
+.pagination-box {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: end;
|
|
|
+ padding: 10px;
|
|
|
+}
|
|
|
</style>
|