|
|
@@ -11,17 +11,16 @@
|
|
|
</el-form-item>
|
|
|
<el-form-item label="车辆类型">
|
|
|
<el-select
|
|
|
- v-model="queryForm.vehicle_type"
|
|
|
+ v-model="queryForm.vehicle_type_id"
|
|
|
placeholder="全部"
|
|
|
clearable
|
|
|
+ style="width:160px"
|
|
|
>
|
|
|
<el-option
|
|
|
- label="月租车"
|
|
|
- value="月租车"
|
|
|
- />
|
|
|
- <el-option
|
|
|
- label="临时车"
|
|
|
- value="临时车"
|
|
|
+ v-for="item in typeList"
|
|
|
+ :key="item.ID"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.ID"
|
|
|
/>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
@@ -58,6 +57,10 @@
|
|
|
type="primary"
|
|
|
@click="openDialog('新增车辆', null)"
|
|
|
>新增</el-button>
|
|
|
+ <el-button
|
|
|
+ type="warning"
|
|
|
+ @click="openTypeDrawer"
|
|
|
+ >管理车辆类型</el-button>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
|
|
|
@@ -86,11 +89,10 @@
|
|
|
<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 type="primary">
|
|
|
+ {{ scope.row.vehicle_type?.name || "未知" }}
|
|
|
</el-tag>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
@@ -112,7 +114,6 @@
|
|
|
{{ scope.row.owner?.owner_name || "临时车辆" }}
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
-
|
|
|
<el-table-column
|
|
|
label="操作"
|
|
|
align="center"
|
|
|
@@ -172,16 +173,15 @@
|
|
|
</el-form-item>
|
|
|
<el-form-item label="车辆类型:">
|
|
|
<el-select
|
|
|
- v-model="formData.vehicle_type"
|
|
|
+ v-model="formData.vehicle_type_id"
|
|
|
placeholder="请选择"
|
|
|
+ style="width:100%"
|
|
|
>
|
|
|
<el-option
|
|
|
- label="月租车"
|
|
|
- value="月租车"
|
|
|
- />
|
|
|
- <el-option
|
|
|
- label="临时车"
|
|
|
- value="临时车"
|
|
|
+ v-for="item in typeList"
|
|
|
+ :key="item.ID"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.ID"
|
|
|
/>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
@@ -213,7 +213,6 @@
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
-
|
|
|
<template #footer>
|
|
|
<el-button @click="dialogVisible = false">取消</el-button>
|
|
|
<el-button
|
|
|
@@ -222,6 +221,102 @@
|
|
|
>确认保存</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>
|
|
|
|
|
|
@@ -235,38 +330,42 @@ import {
|
|
|
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: '',
|
|
|
+ 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: '',
|
|
|
+ vehicle_type_id: null,
|
|
|
vehicle_brand: '',
|
|
|
vehicle_color: '',
|
|
|
- owner_id: null // 支持为空(临时车)
|
|
|
+ owner_id: null
|
|
|
})
|
|
|
|
|
|
-// ============== 车辆列表 ==============
|
|
|
const getVehicleList = async() => {
|
|
|
try {
|
|
|
const res = await obtainVehicleList(queryForm)
|
|
|
@@ -279,33 +378,28 @@ const getVehicleList = async() => {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-// 重置搜索
|
|
|
const resetQuery = () => {
|
|
|
queryForm.plate_number = ''
|
|
|
- queryForm.vehicle_type = ''
|
|
|
+ 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: '', vehicle_brand: '',
|
|
|
+ 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('请输入车牌号')
|
|
|
@@ -326,7 +420,6 @@ const submitForm = async() => {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-// ============== 删除 ==============
|
|
|
const deleteVehicle = async(id) => {
|
|
|
await ElMessageBox.confirm('确定删除该车辆?', '提示', { type: 'warning' })
|
|
|
try {
|
|
|
@@ -338,7 +431,6 @@ const deleteVehicle = async(id) => {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-// ============== 分页 ==============
|
|
|
const handlePageChange = (page) => {
|
|
|
queryForm.page = page
|
|
|
getVehicleList()
|
|
|
@@ -349,13 +441,95 @@ const handleSizeChange = (size) => {
|
|
|
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(() => {
|
|
|
+onMounted(async() => {
|
|
|
+ await loadAllTypes()
|
|
|
getVehicleList()
|
|
|
getOwnerList()
|
|
|
})
|