zhaoyang/estate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

车辆管理界面搭建

Browse Source
This commit is contained in:
Zy
2026-04-10 18:30:19 +08:00
parent 966a54fe3f
commit 67a292b252
15 changed files with 1313 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
src/views/system/parking/addParking.vue
View File

@@ -9,7 +9,7 @@
<el-col :span="11">
<el-form-item label="区域" prop="areaId">
<el-select v-model="form.areaId" placeholder="请选择" clearable>
<el-option v-for="dict in com_review" :key="dict.value" :label="dict.label" :value="dict.value" />
<el-option v-for="dict in areaList" :key="dict.value" :label="`${dict.areaName}(${dict.areaCode})`" :value="dict.id" />
</el-select>
</el-form-item>
</el-col>
@@ -38,8 +38,7 @@
<el-col :span="11">
<el-form-item label="车位类型" prop="type">
<el-radio-group v-model="form.type">
<el-radio :value="1">男</el-radio>
<el-radio :value="0">女</el-radio>
<el-radio v-for="dict in com_parking_type" :key="dict.value" :value="parseInt(dict.value)">{{ dict.label }}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
@@ -54,7 +53,10 @@
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="持有人" prop="remark">持有人 </el-form-item>
<el-form-item label="持有人" prop="residentId">
<!-- 公共组件 持有人 -->
<Holder :isedit="userid === null" @change="handleChange"></Holder>
</el-form-item>
</el-col>
</el-row>
<el-row>
@@ -75,46 +77,91 @@
</template>
<script setup lang="ts">
import Holder from '@/components/Holder/index.vue';
import { ref } from 'vue';
import PageHeader from '@/components/Pageheader/index.vue';
import { addParking, getParking, updateParking } from '@/api/system/parking';
import { listArea } from '@/api/system/carArea';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { com_review } = toRefs<any>(proxy?.useDict('com_review'));
const { com_parking_type } = toRefs<any>(proxy?.useDict('com_parking_type'));
const { com_parking_status } = toRefs<any>(proxy?.useDict('com_parking_status'));
const router = useRouter();
const route = useRoute();
const formRef = ref();
const houseformat = ['东', '西', '南', '北'];
const form = ref({
id: null,
areaId: null,
parkingArea: null,
parkingFloor: null,
type: null,
parkingStatus: null,
remark: null,
parkingCode: '' // 租户姓名
areaId: null, // 区域id
parkingArea: null, // 车位面积
parkingFloor: null, // 车位楼层
type: 0, // 车位类型
resident_id: null, // 住户id
parkingStatus: null, // 车位状态
remark: '', // 备注
parkingCode: '' // 车位编码
});
const rules = ref({
areaId: [{ required: true, message: '请选择车位区域', trigger: 'blur' }],
type: [{ required: true, message: '请选择车位类型', trigger: 'blur' }],
parkingCode: [{ required: true, message: '请输入车位编号', trigger: 'blur' }]
});
const userid = ref(null);
if (route.query.id) {
userid.value = route.query.id;
getParking(userid.value).then((res) => {
console.log(res);
form.value = {
...form.value,
...res.data
};
});
}
// ! 获取区域==================================================================================
const areaList = ref([]);
const getAreaList = async () => {
const res = await listArea({
pageSize: 99999,
pageNum: 1
});
areaList.value = res.rows;
};
getAreaList();
const holderInfo = ref();
function handleChange(pop) {
console.log('获得数据');
console.log(pop);
holderInfo.value = pop;
}
// !== 提交 =============================================================================
// 提交
const submitForm = () => {
formRef.value?.validate(async (valid: boolean) => {
if (valid) {
form.value.resident_id = holderInfo.value.id;
if (userid.value) {
updateParking(form.value).then((res) => {
ElMessage.success('编辑成功');
cancelForm();
});
} else {
addParking(form.value).then((res) => {
ElMessage.success('添加成功');
cancelForm();
});
}
}
});
};
// 推出
const cancelForm = () => {
router.push({
path: '/carArea/parkingList'
path: '/carArea/parking'
});
};
</script>
@@ -145,6 +192,7 @@ const cancelForm = () => {
.formBody {
width: 1050px;
margin: 0 auto;
&:deep(.el-form-item__content, .el-select, .el-input) {
width: 350px !important;
margin-right: 10px;

35
src/views/system/parking/index.vue
View File

@@ -1,12 +1,13 @@
<template>
<div class="p-2">
<Pageheader title="车位管理"></Pageheader>
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
<div v-show="showSearch" class="mb-[10px]">
<el-card shadow="hover">
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item label="车位状态" prop="areaId">
<el-select v-model="queryParams.checkStatus" placeholder="请选择" clearable>
<el-option v-for="dict in com_parking_status" :key="dict.value" :label="dict.label" :value="dict.value" />
<el-form-item label="车位状态" prop="parkingStatus">
<el-select v-model="queryParams.parkingStatus" placeholder="请选择" clearable>
<el-option v-for="dict in com_parking_status" :key="dict.value" :label="dict.label" :value="Number(dict.value)" />
</el-select>
</el-form-item>
@@ -51,11 +52,21 @@
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="区域" align="center" prop="areaId" />
<el-table-column label="车位编号" align="center" prop="parkingCode" />
<el-table-column label="车位面积" align="center" prop="parkingArea" />
<el-table-column label="楼层" align="center" prop="parkingArea" />
<el-table-column label="车位状态" align="center" prop="parkingStatus" />
<el-table-column label="车位类型" align="center" prop="type" />
<el-table-column label="持有人" align="center" prop="parkingArea" />
<el-table-column label="车位面积" align="center" prop="parkingArea">
<template #default="scope"> {{ scope.row.parkingArea }}㎡ </template>
</el-table-column>
<el-table-column label="楼层" align="center" prop="parkingFloor" />
<el-table-column label="车位状态" align="center" prop="parkingStatus">
<template #default="scope">
<dict-tag :options="com_parking_status" :value="scope.row.parkingStatus" />
</template>
</el-table-column>
<el-table-column label="车位类型" align="center" prop="type">
<template #default="scope">
<dict-tag :options="com_parking_type" :value="scope.row.type" />
</template>
</el-table-column>
<el-table-column label="持有人" align="center" prop="residentName" />
<el-table-column label="审核状态" align="center" prop="checkStatus">
<template #default="scope">
<dict-tag :options="com_review" :value="scope.row.checkStatus" />
@@ -77,11 +88,14 @@
</template>
<script setup name="Parking" lang="ts">
import Pageheader from '@/components/Pageheader/index.vue';
import { listArea } from '@/api/system/carArea';
import { listParking, getParking, delParking, addParking, updateParking } from '@/api/system/parking/index';
import { ParkingVO, ParkingQuery, ParkingForm } from '@/api/system/parking/type';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { com_review } = toRefs<any>(proxy?.useDict('com_review'));
const { com_parking_type } = toRefs<any>(proxy?.useDict('com_parking_type'));
const { com_parking_status } = toRefs<any>(proxy?.useDict('com_parking_status'));
const router = useRouter();
@@ -136,9 +150,12 @@ const data = reactive<PageData<ParkingForm, ParkingQuery>>({
});
const { queryParams, form, rules } = toRefs(data);
const AreaList = ref([]);
/** 查询车位管理列表 */
const getList = async () => {
// 获取区域列表
const areaRes = await listArea(queryParams.value);
AreaList.value = areaRes.rows;
loading.value = true;
const res = await listParking(queryParams.value);
parkingList.value = res.rows;

287
src/views/system/parking/parkMain.vue Normal file
View File

@@ -0,0 +1,287 @@
<template>
<div class="ResidentMainBox p-2 w-full h-full">
<PageHeader title="车位详情"></PageHeader>
<div class="ResidentMainBody">
<el-row :span="24" :gutter="20">
<el-col :span="16">
<!-- 车位信息 -->
<div class="mb-10">
<el-card>
<template #header>
<div class="card-header">
<span>车位信息</span>
</div>
</template>
<div class="w-full h-full CarinfoBox gridbox">
<div class="carinfo_item">
<div class="label">区域：</div>
<div class="main">地下停车场A区</div>
</div>
<div class="carinfo_item">
<div class="label">车位编号：</div>
<div class="main">地下停车场A区</div>
</div>
<div class="carinfo_item">
<div class="label">车位面积：</div>
<div class="main">地下停车场A区</div>
</div>
<div class="carinfo_item">
<div class="label">楼层：</div>
<div class="main">地下停车场A区</div>
</div>
<div class="carinfo_item">
<div class="label">车位类型：</div>
<div class="main">地下停车场A区</div>
</div>
<div class="carinfo_item">
<div class="label">车位状态：</div>
<div class="main">地下停车场A区</div>
</div>
<div class="carinfo_item">
<div class="label">持有人：</div>
<div class="main">地下停车场A区</div>
</div>
<div class="carinfo_item">
<div class="label">添加时间：</div>
<div class="main">地下停车场A区</div>
</div>
<div class="carinfo_item">
<div class="label">添加人：</div>
<div class="main">地下停车场A区</div>
</div>
<div class="carinfo_item">
<div class="label">备注：</div>
<div class="main">地下停车场A区</div>
</div>
</div>
</el-card>
</div>
<!-- 车辆信息 -->
<div class="mb-10">
<el-card>
<template #header>
<div class="card-header">
<span>车辆信息</span>
</div>
</template>
<div class="w-full h-full CarinfoBox">
<el-row>
<el-col :span="8">
<div class="carinfo_item">
<div class="label">车牌号：</div>
<div class="main">浙B·N6688</div>
</div>
</el-col>
<el-col :span="8">
<div class="carinfo_item">
<div class="label">车辆品牌：</div>
<div class="main">宝马</div>
</div>
</el-col>
<el-col :span="8">
<div class="carinfo_item">
<div class="label">车辆型号</div>
<div class="main">X5</div>
</div>
</el-col>
</el-row>
<el-row class="mt-30px mb-30px">
<el-col :span="8">
<div class="carinfo_item">
<div class="label">车身颜色：</div>
<div class="main">白色</div>
</div>
</el-col>
<el-col :span="8">
<div class="carinfo_item">
<div class="label">备注：</div>
<div class="main">无</div>
</div>
</el-col>
<el-col :span="8"> </el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="carinfo_item flex-items-start">
<div class="label">车辆照片：</div>
<div class="main">
<el-image
class="carinfoImage"
src="https://ts1.tc.mm.bing.net/th?id=ORMS.76ee9c7ea9fe203b608f9048f54b3cbd&pid=Wdp&w=268&h=140&qlt=90&c=1&rs=1&dpr=1&p=0"
></el-image>
</div>
</div>
</el-col>
</el-row>
</div>
</el-card>
</div>
<div class="">
<el-card>
<template #header>
<div class="card-header">
<span>审核</span>
</div>
</template>
<div class="w-full h-full flex mt-2">
<div class="title">审批意见</div>
<div class="preivewBodybox flex-1 ml-5">
<el-input type="textarea" :rows="5"></el-input>
<div class="actions mt-5">
<el-button type="primary">审核通过</el-button>
<el-button type="danger">审核不通过</el-button>
<el-button>返回</el-button>
</div>
</div>
</div>
</el-card>
</div>
</el-col>
<el-col :span="8">
<el-card style="position: relative" class="h-full">
<template #header>
<div class="asideCardHeader w-full h-full">
<div class="cardSubtitle">
<div class="line"></div>
<div class="subtitle">审批流程</div>
</div>
</div>
</template>
<div class="w-full h-50%">
<el-steps space="200px" direction="vertical" :active="activeStop">
<el-step :description="reviewInfo.submitTime">
<template #title>
<span v-if="active === 0">未提交信息</span>
<span v-if="active >= 1">已提交信息</span>
</template>
</el-step>
<el-step :description="reviewInfo.propertyTime">
<template #title>
<span v-if="active <= 2">待审核</span>
<span v-if="active === 3">物业审核不通过</span>
<span v-if="active >= 4">物业审核通过</span>
</template>
</el-step>
<el-step :description="reviewInfo.certificationTime">
<template #title>
<span v-if="active <= 5">未认证</span>
<span v-if="active === 6">已认证</span>
</template>
</el-step>
<el-step>
<template #title>
<span>审核完成</span>
</template>
</el-step>
</el-steps>
</div>
</el-card>
</el-col>
</el-row>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import PageHeader from '@/components/Pageheader/index.vue';
/** 住户审核状态 */
enum reviewStatus {
/** 未提交 */
unSubmit = 0,
/** 已提交 */
Submited = 1,
/** 待认证 */
awaitReview = 2,
/** 认证不通过 */
unReviewPass = 3,
/** 认证通过 */
ReviewPass = 4,
/** 未认证 */
uncertification = 5,
/** 已认证 */
Certification = 6
}
type activeType = reviewStatus;
const active = ref<activeType>(6);
const activeStop = ref(4);
function handleActivestaus(rews) {
if (rews.submitStatus === reviewStatus.unSubmit) {
activeStop.value = 0;
active.value = 0;
} else if (rews.submitStatus === reviewStatus.Submited) {
active.value = 1;
activeStop.value = 1;
// 待认证
if (rews.propertyStatus === 0) {
active.value = reviewStatus.awaitReview;
} else if (rews.propertyStatus === 1) {
active.value = reviewStatus.unReviewPass;
} else if (rews.propertyStatus === 2) {
active.value = reviewStatus.ReviewPass;
activeStop.value = 2;
if (rews.certificationStatus === 0) {
active.value = reviewStatus.uncertification;
} else if (rews.certificationStatus === 1) {
active.value = reviewStatus.Certification;
activeStop.value = 4;
}
}
}
console.log(active.value);
}
</script>
<style scoped lang="scss">
.ResidentMainBox {
display: flex;
flex-direction: column;
.ResidentMainBody {
flex: 1;
margin-top: 20px;
.CarinfoBox {
&.gridbox {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(4, 1fr);
gap: 20px;
row-gap: 40px;
}
.carinfo_item {
display: flex;
align-items: center;
font-size: 14px;
.label {
font-weight: 600;
width: 80px;
text-align: right;
padding-right: 10px;
}
.carinfoImage {
width: 200px;
height: 100px;
}
}
}
&:deep(div.el-step__head.is-process) {
& > div.el-step__line {
width: 0;
border: 1px dashed gray;
background: transparent;
}
}
&:deep(.el-step.is-vertical .el-step__line) {
top: 20px;
}
&:deep(div.el-step__head.is-finish) {
& > div.el-step__line {
width: 0;
border: 1px solid var(--el-color-primary);
background: transparent;
}
}
}
}
</style>