<template>
|
<div class="app-container">
|
<div class="search_form">
|
<div>
|
<span class="search_title">车牌号码：</span>
|
<el-input
|
v-model="searchForm.plateNo"
|
style="width: 240px"
|
placeholder="请输入车牌号码"
|
clearable
|
:prefix-icon="Search"
|
@change="handleQuery"
|
/>
|
<el-button type="primary" @click="handleQuery" style="margin-left: 10px">
|
搜索
|
</el-button>
|
</div>
|
<div>
|
<el-button type="primary" @click="openForm('add')">新增</el-button>
|
<el-button type="danger" plain @click="handleDelete">删除</el-button>
|
</div>
|
</div>
|
|
<div class="table_list">
|
<PIMTable
|
rowKey="id"
|
:column="tableColumn"
|
:tableData="tableData"
|
:page="page"
|
:isSelection="true"
|
:tableLoading="tableLoading"
|
@selection-change="handleSelectionChange"
|
@pagination="pagination"
|
/>
|
</div>
|
|
<!-- 新增/编辑车辆信息弹窗 -->
|
<el-dialog
|
v-model="dialogVisible"
|
:title="operationType === 'add' ? '新增车辆信息' : '编辑车辆信息'"
|
width="70%"
|
@close="closeFormDialog"
|
>
|
<el-form
|
ref="formRef"
|
:model="form"
|
:rules="rules"
|
label-width="140px"
|
label-position="top"
|
>
|
<el-row :gutter="30">
|
<el-col :span="12">
|
<el-form-item label="车牌号码" prop="plateNo">
|
<el-input v-model="form.plateNo" placeholder="请输入车牌号码" clearable />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="号牌颜色" prop="plateColor">
|
<el-input v-model="form.plateColor" placeholder="请输入号牌颜色" clearable />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="30">
|
<el-col :span="12">
|
<el-form-item label="车辆类型" prop="carType">
|
<el-input v-model="form.carType" placeholder="请输入车辆类型" clearable />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="车辆识别代码(VIN)" prop="carVin">
|
<el-input v-model="form.carVin" placeholder="请输入 VIN 码" clearable />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="30">
|
<el-col :span="12">
|
<el-form-item label="车辆型号" prop="carModel">
|
<el-input v-model="form.carModel" placeholder="请输入车辆型号" clearable />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="发动机型号" prop="engineModel">
|
<el-input v-model="form.engineModel" placeholder="请输入发动机型号" clearable />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="30">
|
<el-col :span="12">
|
<el-form-item label="发动机生产厂" prop="engineProductFactory">
|
<el-input v-model="form.engineProductFactory" placeholder="请输入发动机生产厂" clearable />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="发动机编号" prop="engineNo">
|
<el-input v-model="form.engineNo" placeholder="请输入发动机编号" clearable />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="30">
|
<el-col :span="12">
|
<el-form-item label="排放标准" prop="emissionStandard">
|
<el-input v-model="form.emissionStandard" placeholder="请输入排放标准" clearable />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="注册登记日期" prop="registeDate">
|
<el-date-picker
|
v-model="form.registeDate"
|
type="date"
|
style="width: 100%"
|
value-format="YYYY-MM-DD"
|
placeholder="请选择注册登记日期"
|
clearable
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="30">
|
<el-col :span="12">
|
<el-form-item label="使用性质" prop="natureOfUse">
|
<el-input v-model="form.natureOfUse" placeholder="请输入使用性质" clearable />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="燃料类型" prop="fuelType">
|
<el-input v-model="form.fuelType" placeholder="请输入燃料类型" clearable />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button type="primary" @click="submitForm">确认</el-button>
|
<el-button @click="closeFormDialog">取消</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
|
<!-- 审核弹窗 -->
|
<el-dialog
|
v-model="auditDialogVisible"
|
title="车辆信息审核"
|
width="500px"
|
@close="closeAuditDialog"
|
>
|
<el-form :model="auditForm" label-width="100px">
|
<el-form-item label="审核结果" prop="status">
|
<el-radio-group v-model="auditForm.status">
|
<el-radio label="approved">通过</el-radio>
|
<el-radio label="rejected">不通过</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="审核意见" prop="comment">
|
<el-input
|
v-model="auditForm.comment"
|
type="textarea"
|
:rows="3"
|
placeholder="请输入审核意见（选填）"
|
/>
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button type="primary" @click="submitAudit">确认</el-button>
|
<el-button @click="closeAuditDialog">取消</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, reactive } from "vue";
|
import { Search } from "@element-plus/icons-vue";
|
import { ElMessage, ElMessageBox } from "element-plus";
|
import PIMTable from "@/components/PIMTable/PIMTable.vue";
|
import {
|
listVehicleInfo,
|
addVehicleInfo,
|
updateVehicleInfo,
|
delVehicleInfo,
|
reviewVehicleInfo,
|
} from "@/api/environmentAccess/vehicleInfo";
|
|
// 查询条件
|
const searchForm = reactive({
|
plateNo: "",
|
});
|
|
// 表格列配置
|
const tableColumn = ref([
|
{
|
label: "车牌号码",
|
prop: "plateNo",
|
align: "center",
|
width: 140,
|
},
|
{
|
label: "号牌颜色",
|
prop: "plateColor",
|
align: "center",
|
width: 100,
|
},
|
{
|
label: "车辆类型",
|
prop: "carType",
|
align: "center",
|
width: 120,
|
},
|
{
|
label: "车辆识别代码(VIN)",
|
prop: "carVin",
|
align: "center",
|
minWidth: 200,
|
showOverflowTooltip: true,
|
},
|
{
|
label: "车辆型号",
|
prop: "carModel",
|
align: "center",
|
width: 140,
|
},
|
{
|
label: "发动机型号",
|
prop: "engineModel",
|
align: "center",
|
width: 140,
|
},
|
{
|
label: "发动机生产厂",
|
prop: "engineProductFactory",
|
align: "center",
|
width: 160,
|
},
|
{
|
label: "发动机编号",
|
prop: "engineNo",
|
align: "center",
|
width: 140,
|
},
|
{
|
label: "排放标准",
|
prop: "emissionStandard",
|
align: "center",
|
width: 120,
|
},
|
{
|
label: "注册登记日期",
|
prop: "registeDate",
|
align: "center",
|
width: 140,
|
},
|
{
|
label: "使用性质",
|
prop: "natureOfUse",
|
align: "center",
|
width: 120,
|
},
|
{
|
label: "燃料类型",
|
prop: "fuelType",
|
align: "center",
|
width: 120,
|
},
|
{
|
label: "审核状态",
|
prop: "reviewStatus",
|
align: "center",
|
dataType: "tag",
|
width: 120,
|
formatData: (value) => {
|
if (value === "approved") return "已通过";
|
if (value === "rejected") return "未通过";
|
if (value === "pending") return "待审核";
|
return "未提交";
|
},
|
formatType: (value) => {
|
if (value === "approved") return "success";
|
if (value === "rejected") return "danger";
|
if (value === "pending") return "warning";
|
return "";
|
},
|
},
|
{
|
dataType: "action",
|
label: "操作",
|
align: "center",
|
fixed: "right",
|
width: 220,
|
operation: [
|
{
|
name: "编辑",
|
type: "text",
|
clickFun: (row) => openForm("edit", row),
|
},
|
{
|
name: "审核",
|
type: "text",
|
clickFun: (row) => openAuditDialog(row),
|
},
|
{
|
name: "删除",
|
type: "text",
|
clickFun: (row) => deleteRow(row),
|
},
|
],
|
},
|
]);
|
|
// 表格数据
|
const tableData = ref([]);
|
const tableLoading = ref(false);
|
const selectedRows = ref([]);
|
|
// 分页
|
const page = reactive({
|
current: 1,
|
size: 10,
|
total: 0,
|
});
|
|
// 表单相关
|
const dialogVisible = ref(false);
|
const operationType = ref("add");
|
const formRef = ref(null);
|
const form = reactive(createEmptyForm());
|
|
function createEmptyForm() {
|
return {
|
id: undefined,
|
plateNo: "",
|
plateColor: "",
|
carType: "",
|
carVin: "",
|
carModel: "",
|
engineModel: "",
|
engineProductFactory: "",
|
engineNo: "",
|
emissionStandard: "",
|
registeDate: "",
|
natureOfUse: "",
|
fuelType: "",
|
reviewStatus: "pending",
|
};
|
}
|
|
const rules = {
|
plateNo: [{ required: true, message: "请输入车牌号码", trigger: "blur" }],
|
carVin: [{ required: true, message: "请输入 VIN 码", trigger: "blur" }],
|
};
|
|
// 审核相关
|
const auditDialogVisible = ref(false);
|
const currentAuditRow = ref(null);
|
const auditForm = reactive({
|
status: "approved",
|
comment: "",
|
});
|
|
// 查询
|
function handleQuery() {
|
page.current = 1;
|
loadTableData();
|
}
|
|
// 加载数据
|
function loadTableData() {
|
tableLoading.value = true;
|
listVehicleInfo({
|
pageNum: page.current,
|
pageSize: page.size,
|
...searchForm,
|
})
|
.then((res) => {
|
const { records, total } = res.data;
|
tableData.value = records || [];
|
page.total = total || 0;
|
})
|
.finally(() => {
|
tableLoading.value = false;
|
});
|
}
|
|
// 分页变化
|
function pagination({ page: current, limit }) {
|
page.current = current;
|
page.size = limit;
|
loadTableData();
|
}
|
|
// 选择行
|
function handleSelectionChange(selection) {
|
selectedRows.value = selection;
|
}
|
|
// 打开表单
|
function openForm(type, row) {
|
operationType.value = type;
|
if (type === "edit" && row) {
|
Object.assign(form, row);
|
} else {
|
Object.assign(form, createEmptyForm());
|
}
|
dialogVisible.value = true;
|
}
|
|
function closeFormDialog() {
|
dialogVisible.value = false;
|
formRef.value?.resetFields();
|
}
|
|
// 提交表单
|
function submitForm() {
|
formRef.value?.validate((valid) => {
|
if (!valid) return;
|
|
const api = operationType.value === "add" ? addVehicleInfo : updateVehicleInfo;
|
api({ ...form })
|
.then(() => {
|
ElMessage.success(operationType.value === "add" ? "新增成功" : "编辑成功");
|
dialogVisible.value = false;
|
loadTableData();
|
})
|
.catch(() => {});
|
});
|
}
|
|
// 删除单条
|
function deleteRow(row) {
|
ElMessageBox.confirm("确认删除该车辆信息吗？", "提示", {
|
type: "warning",
|
})
|
.then(() => {
|
delVehicleInfo([row.id]).then(() => {
|
ElMessage.success("删除成功");
|
loadTableData();
|
});
|
})
|
.catch(() => {});
|
}
|
|
// 批量删除
|
function handleDelete() {
|
if (!selectedRows.value.length) {
|
ElMessage.warning("请先选择要删除的记录");
|
return;
|
}
|
ElMessageBox.confirm("确认删除选中的车辆信息吗？", "提示", {
|
type: "warning",
|
})
|
.then(() => {
|
const ids = selectedRows.value.map((item) => item.id);
|
delVehicleInfo(ids).then(() => {
|
ElMessage.success("删除成功");
|
loadTableData();
|
});
|
})
|
.catch(() => {});
|
}
|
|
// 打开审核弹窗
|
function openAuditDialog(row) {
|
currentAuditRow.value = row;
|
auditForm.status = row.reviewStatus || "pending";
|
auditForm.comment = row.auditComment || "";
|
auditDialogVisible.value = true;
|
}
|
|
function closeAuditDialog() {
|
auditDialogVisible.value = false;
|
}
|
|
// 提交审核
|
function submitAudit() {
|
if (!currentAuditRow.value) return;
|
|
reviewVehicleInfo({
|
id: currentAuditRow.value.id,
|
reviewStatus: auditForm.status,
|
auditComment: auditForm.comment,
|
})
|
.then(() => {
|
ElMessage.success("审核完成");
|
auditDialogVisible.value = false;
|
loadTableData();
|
})
|
.catch(() => {});
|
}
|
|
// 初始化
|
loadTableData();
|
</script>
|
|
<style scoped lang="scss">
|
.table_list {
|
margin-top: 20px;
|
}
|
</style>
|
