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

63
src/api/system/cars/index.ts Normal file
View File

@@ -0,0 +1,63 @@
import request from '@/utils/request';
import { AxiosPromise } from 'axios';
import { CarVO, CarForm, CarQuery } from '@/api/system/cars/type';
/**
* 查询车辆管理列表
* @param query
* @returns {*}
*/
export const listCar = (query?: CarQuery): AxiosPromise<CarVO[]> => {
return request({
url: '/car/car/list',
method: 'get',
params: query
});
};
/**
* 查询车辆管理详细
* @param id
*/
export const getCar = (id: string | number): AxiosPromise<CarVO> => {
return request({
url: '/car/car/' + id,
method: 'get'
});
};
/**
* 新增车辆管理
* @param data
*/
export const addCar = (data: CarForm) => {
return request({
url: '/car/car',
method: 'post',
data: data
});
};
/**
* 修改车辆管理
* @param data
*/
export const updateCar = (data: CarForm) => {
return request({
url: '/car/car',
method: 'put',
data: data
});
};
/**
* 删除车辆管理
* @param id
*/
export const delCar = (id: string | number | Array<string | number>) => {
return request({
url: '/car/car/' + id,
method: 'delete'
});
};

170
src/api/system/cars/type.ts Normal file
View File

@@ -0,0 +1,170 @@
export interface CarVO {
/**
* 车辆管理表id
*/
id: string | number;
/**
* 区域id
*/
areaId: string | number;
/**
* 车位id
*/
parkingId: string | number;
/**
* 持有人id(住户表id)
*/
residentId: string | number;
/**
* 车牌号
*/
carNum: string;
/**
* 车辆品牌
*/
carBrand: string;
/**
* 车辆型号
*/
carModel: string;
/**
* 车身颜色
*/
carColor: string;
/**
* 备注
*/
remark: string;
/**
* 车辆图片url
*/
carImageUrl: string;
}
export interface CarForm extends BaseEntity {
/**
* 车辆管理表id
*/
id?: string | number;
/**
* 区域id
*/
areaId?: string | number;
/**
* 车位id
*/
parkingId?: string | number;
/**
* 持有人id(住户表id)
*/
residentId?: string | number;
/**
* 车牌号
*/
carNum?: string;
/**
* 车辆品牌
*/
carBrand?: string;
/**
* 车辆型号
*/
carModel?: string;
/**
* 车身颜色
*/
carColor?: string;
/**
* 备注
*/
remark?: string;
/**
* 车辆图片url
*/
carImageUrl?: string;
/**
* 创建者
*/
createBy?: number;
/**
* 创建时间
*/
createTime?: string;
/**
* 修改者
*/
updateBy?: number;
/**
* 修改时间
*/
updateTime?: string;
}
export interface CarQuery extends PageQuery {
/**
* 区域id
*/
areaId?: string | number;
/**
* 车位id
*/
parkingId?: string | number;
/**
* 持有人id(住户表id)
*/
residentId?: string | number;
/**
* 车牌号
*/
carNum?: string;
/**
* 车辆品牌
*/
carBrand?: string;
/**
* 车辆型号
*/
carModel?: string;
/**
* 车身颜色
*/
carColor?: string;
/**
* 车辆图片url
*/
carImageUrl?: string;
/**
* 日期范围参数
*/
params?: any;
}

1
src/api/system/house/type.ts
View File

@@ -87,5 +87,4 @@ export interface addHouseType {
'internalArea': string;
'shareArea': string;
'houseType': string;
houseUse: number;
}

222
src/components/Holder/index.vue Normal file
View File

@@ -0,0 +1,222 @@
<template>
<div class="residentBox" @click="choiceResidentFun">
<div class="defaultbox" v-if="multipleSelection.length === 0">
<span>请选择</span>
<el-icon><Search /></el-icon>
</div>
<div v-else>
<span>姓名：{{ multipleSelection[0] && multipleSelection[0].name }}</span>
<span class="ml-4 mr-4">电话：{{ multipleSelection[0] && multipleSelection[0].phone }}</span>
<span>住址：{{ multipleSelection[0] && multipleSelection[0].housePath }}</span>
</div>
</div>
<el-dialog append-to-body v-model="dialog.dialogVisible" :title="dialog.dialogTitle" width="1050">
<nav class="flex flex-items-center mb-8">
<div class="flex flex-items-center mr-5 flex-1">
<div style="width: 120px">住户类型</div>
<el-select v-model="queryParams.ownerRelationship" placeholder="请选择" clearable>
<el-option v-for="dict in com_resident_relationship" :key="dict.value" :label="dict.label" :value="dict.value" />
</el-select>
</div>
<div class="mr-5 flex-1">
<el-input clearable v-model.number="queryParams.name" placeholder="请输入住户姓名" />
</div>
<div>
<el-button type="primary" @click="getlist">查询</el-button>
<el-button>重置</el-button>
</div>
</nav>
<el-table ref="multipleTableRef" @selection-change="handleSelectionChange" :data="tableData" border>
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="序号" align="center" width="55" type="index" />
<el-table-column label="姓名" align="center" prop="name" />
<el-table-column label="类型" align="center" width="85" prop="type">
<template #default="{ row }">
<dict-tag :options="com_resident_type" :value="row.type" />
</template>
</el-table-column>
<el-table-column label="状态" align="center" width="85" prop="status">
<template #default="{ row }">
<dict-tag :options="com_certification_status" :value="row.status" />
</template>
</el-table-column>
<el-table-column label="证件号码" align="center" prop="idCard" />
<el-table-column label="手机号码" align="center" prop="phone" />
<el-table-column label="房间" align="center">
<template #default="{ row }">
{{ row.housePath }}
</template>
</el-table-column>
</el-table>
<template #footer>
<div class="dialog-footer flex flex-items-center flex-justify-between">
<pagination
style="margin-top: 0"
layout="total, prev, pager, next, jumper"
v-show="total > 0"
:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="getlist"
/>
<div>
<el-button @click="conback">退出</el-button>
<el-button type="primary" @click="confim"> 确定 </el-button>
</div>
</div>
</template>
</el-dialog>
</template>
<script setup lang="ts">
import { getCommunitylistAPI } from '@/api/system/community';
import { getVillageTree } from '@/api/system/house';
import { listResident } from '@/api/system/resident';
import { ResidentVO } from '@/api/system/resident/type';
import { convertBuildingToTree, getHousePathById } from '@/utils/house';
import { ref } from 'vue';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { com_resident_type } = toRefs<any>(proxy?.useDict('com_resident_type'));
const { com_certification_status } = toRefs<any>(proxy?.useDict('com_certification_status'));
const { com_resident_relationship } = toRefs<any>(proxy?.useDict('com_resident_relationship'));
interface tableType extends ResidentVO {
housePath?: string;
}
const props = defineProps<{
isedit: boolean;
}>();
const emit = defineEmits<{
change: [value: tableType];
}>();
const dialog = ref({
dialogVisible: false,
dialogTitle: '添加'
});
const queryParams = ref({
pageNum: 1,
pageSize: 10,
date: null,
type: null,
status: null,
ownerRelationship: null,
name: null,
houseId: null,
villageId: null,
buildingId: null,
unitNo: null
});
const multipleTableRef = ref();
const tableData = ref<tableType[]>([]);
const multipleSelection = ref([]);
const total = ref(100);
const loading = ref(false);
// ! 获取房屋==================================================================================
const treedata = ref([]);
function gettreedata() {
getCommunitylistAPI().then((res) => {
const currentviliage = res.rows.find((item) => item.choiceStatus === 0);
if (currentviliage.villageId) {
getVillageTree(currentviliage.villageId).then((res) => {
treedata.value = convertBuildingToTree(res.data.buildings);
});
}
});
}
gettreedata();
//
function choiceResidentFun() {
if (props.isedit) {
dialog.value.dialogTitle = '编辑车位';
} else {
dialog.value.dialogTitle = '添加车位';
}
getlist();
dialog.value.dialogVisible = true;
}
// 获取表格
function getlist() {
// 查询住户
loading.value = true;
listResident(queryParams.value).then((res) => {
tableData.value = res.rows;
tableData.value.forEach((item) => {
if (item.houseId !== null) {
const houselist = getHousePathById(treedata.value, item.houseId, 'label');
item.housePath = houselist.join('-');
}
});
total.value = res.total;
loading.value = false;
});
}
// 返回
function conback() {
dialog.value.dialogVisible = false;
queryParams.value = {
pageNum: 1,
pageSize: 10,
ownerRelationship: null,
name: null,
date: null,
type: null,
status: null,
houseId: null,
villageId: null,
buildingId: null,
unitNo: null
};
}
// 确定
function confim() {
dialog.value.dialogVisible = false;
if (multipleSelection.value.length > 0) {
const pop = multipleSelection.value.pop();
multipleSelection.value = [pop];
emit('change', pop);
}
}
// 单选
function handleSelectionChange(val) {
if (val && val.length > 0) {
const lastoptions = val.pop();
val.forEach((row) => {
multipleTableRef.value!.toggleRowSelection(row, false);
});
multipleTableRef.value!.toggleRowSelection(lastoptions, true);
multipleSelection.value = [lastoptions];
} else {
multipleTableRef.value!.clearSelection();
multipleSelection.value = [];
}
}
</script>
<style scoped lang="scss">
.residentBox {
width: 500px;
height: 35px;
line-height: 35px;
border: 1px solid #ccc;
border-radius: 5px;
padding: 0 20px;
.defaultbox {
display: flex;
align-items: center;
justify-content: space-between;
}
cursor: pointer;
&:hover {
background-color: #f4f8ff;
}
}
</style>

18
src/views/system/carArea/addCarArea.vue
View File

@@ -7,35 +7,35 @@
<el-form label-position="right" class="formBody" ref="formRef" :model="form" :rules="rules" label-width="130px">
<el-row>
<el-col :span="11">
<el-form-item label="区域名称" prop="houseId">
<el-input v-model.trim="form.areaName" placeholder="请输入住户姓名" />
<el-form-item label="区域名称" prop="areaName">
<el-input v-model.trim="form.areaName" placeholder="请输入区域名称" />
</el-form-item>
</el-col>
<el-col :span="2"></el-col>
<el-col :span="11">
<el-form-item label="区域编号" prop="rentalName">
<el-input v-model.trim="form.areaCode" placeholder="请输入住户姓名" />
<el-form-item label="区域编号" prop="areaCode">
<el-input v-model.trim="form.areaCode" placeholder="请输入区域编号" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="11">
<el-form-item label="区域面积" prop="remark">
<el-input v-model.number="form.area" placeholder="请输入补充房屋信息">
<el-form-item label="区域面积" prop="area">
<el-input v-model.number="form.area" placeholder="请输入区域面积">
<template #suffix>㎡</template>
</el-input>
</el-form-item>
</el-col>
<el-col :span="2"></el-col>
<el-col :span="11">
<el-form-item label="车位数量" prop="phone">
<el-input v-model.number="form.parkingCount" placeholder="请输入手机号码" />
<el-form-item label="车位数量" prop="parkingCount">
<el-input v-model.number="form.parkingCount" placeholder="请输入车位数量" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="备注" prop="email">
<el-form-item label="备注" prop="remark">
<el-input type="textarea" :rows="5" v-model.trim="form.remark" placeholder="请输入" />
</el-form-item>
</el-col>

2
src/views/system/carArea/index.vue
View File

@@ -1,5 +1,6 @@
<template>
<div class="p-2 flex w-full h-full flex-column">
<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">
@@ -62,6 +63,7 @@
</template>
<script setup name="Area" lang="ts">
import Pageheader from '@/components/Pageheader/index.vue';
import { listArea, getArea, delArea, addArea, updateArea } from '@/api/system/carArea/index';
import { AreaVO, AreaQuery, AreaForm } from '@/api/system/carArea/type';

164
src/views/system/cars/addCars.vue Normal file
View File

@@ -0,0 +1,164 @@
<template>
<div class="AddBuildingBox">
<PageHeader :title="userid ? '编辑房屋租赁' : '添加房屋租赁'"></PageHeader>
<div class="AddBuildingBody">
<div class="title">基本信息</div>
<div class="addBuildingFormBody">
<el-form class="formBody" label-position="left" ref="formRef" :model="form" :rules="rules" label-width="130px">
<el-row>
<el-col :span="11">
<el-form-item label="车牌号" prop="houseId">
<el-input v-model.trim="form.rentalName" placeholder="请输入住户姓名" />
</el-form-item>
</el-col>
<el-col :span="2"></el-col>
<el-col :span="11">
<el-form-item label="车辆品牌" prop="rentalName">
<el-input v-model.trim="form.rentalName" placeholder="请输入住户姓名" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="11">
<el-form-item label="车辆型号" prop="remark">
<el-input v-model.trim="form.supInfo" placeholder="请输入补充房屋信息" />
</el-form-item>
</el-col>
<el-col :span="2"></el-col>
<el-col :span="11">
<el-form-item label="车声颜色" prop="phone">
<el-input v-model.trim="form.phone" placeholder="请输入手机号码" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="车辆照片" prop="email"> </el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="持有人">
<!-- 公共组件 持有人 -->
<Holder :isedit="userid === null" @change="handleChange"></Holder>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="备注" prop="email">
<el-input type="textarea" :rows="5" v-model.trim="form.email" placeholder="请输入" />
</el-form-item>
</el-col>
</el-row>
<el-form-item style="margin-top: 30px">
<el-button type="primary" @click="submitForm">提交</el-button>
<el-button @click="cancelForm">返回</el-button>
</el-form-item>
</el-form>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import PageHeader from '@/components/Pageheader/index.vue';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const router = useRouter();
const route = useRoute();
const formRef = ref();
const form = ref({
id: null,
houseId: null,
rentalName: '', // 租户姓名
rent: null, // 租金
houseFace: '', // 房屋朝向
rentalType: 0, // 整租合租
phone: null, //手机号
houseArea: null, // 房屋面积
floorNo: null, //楼层号
inTime: '', //入住时间
facilities: '', //房屋设施
houseImageUrl: '', //房屋图片
supInfo: '', //补充租房信息
vx: '', //微信
houseUse: 0, //房屋用途
rentalStatus: 0, //租赁状态
email: '' //邮箱
});
const rules = ref({
houseId: [{ required: true, message: '请选择房屋', trigger: 'blur' }],
rentalName: [{ required: true, message: '请输入名称', trigger: 'blur' }]
});
const userid = ref(null);
// !== 提交 =============================================================================
// 提交
const submitForm = () => {
formRef.value?.validate(async (valid: boolean) => {
if (valid) {
}
});
};
// 推出
const cancelForm = () => {
router.push({
path: '/house/parkingList'
});
};
// 选择住户
function handleChange(pop) {
console.log(pop);
}
</script>
<style scoped lang="scss">
.AddBuildingBox {
padding: 15px;
height: 100%;
width: 100%;
}
.AddBuildingBody {
margin-top: 20px;
display: flex;
flex-direction: column;
justify-content: center;
background-color: white;
padding: 15px;
.title {
height: 40px;
line-height: 40px;
padding-left: 20px;
background-color: rgba(255, 255, 255, 1);
color: rgba(16, 16, 16, 1);
border-bottom: 1px solid #bbbbbb;
margin-bottom: 60px;
}
.formBody {
width: 1050px;
margin: 0 auto;
&:deep(.el-form-item__content, .el-select, .el-input) {
width: 350px !important;
margin-right: 10px;
.el-cascader {
width: 100%;
}
}
.el-form-item {
margin-bottom: 20px;
align-items: center;
}
.el-button {
width: 80px;
height: 35px;
margin-right: 20px;
}
}
}
</style>

277
src/views/system/cars/index.vue Normal file
View File

@@ -0,0 +1,277 @@
<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="residentId">
<el-input v-model="queryParams.residentId" placeholder="请输入持有人id(住户表id)" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="车牌号" prop="carNum">
<el-input v-model="queryParams.carNum" placeholder="请输入车牌号" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item>
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
</el-card>
</div>
</transition>
<el-card shadow="never">
<template #header>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['car:car:add']">新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['car:car:edit']">修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['car:car:remove']">删除</el-button>
</el-col>
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
</template>
<el-table v-loading="loading" border :data="carList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="车牌号" align="center" prop="id" v-if="true" />
<el-table-column label="车辆品牌" align="center" prop="areaId" />
<el-table-column label="车辆型号" align="center" prop="parkingId" />
<el-table-column label="车身颜色" align="center" prop="residentId" />
<el-table-column label="持有人" align="center" prop="carNum" />
<el-table-column label="备注" align="center" prop="carBrand" />
<el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width">
<template #default="scope">
<el-tooltip content="修改" placement="top">
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['car:car:edit']"></el-button>
</el-tooltip>
<el-tooltip content="删除" placement="top">
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['car:car:remove']"></el-button>
</el-tooltip>
</template>
</el-table-column>
</el-table>
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
</el-card>
<!-- 添加或修改车辆管理对话框 -->
<el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
<el-form ref="carFormRef" :model="form" :rules="rules" label-width="80px">
<el-form-item label="区域id" prop="areaId">
<el-input v-model="form.areaId" placeholder="请输入区域id" />
</el-form-item>
<el-form-item label="车位id" prop="parkingId">
<el-input v-model="form.parkingId" placeholder="请输入车位id" />
</el-form-item>
<el-form-item label="持有人id(住户表id)" prop="residentId">
<el-input v-model="form.residentId" placeholder="请输入持有人id(住户表id)" />
</el-form-item>
<el-form-item label="车牌号" prop="carNum">
<el-input v-model="form.carNum" placeholder="请输入车牌号" />
</el-form-item>
<el-form-item label="车辆品牌" prop="carBrand">
<el-input v-model="form.carBrand" placeholder="请输入车辆品牌" />
</el-form-item>
<el-form-item label="车辆型号" prop="carModel">
<el-input v-model="form.carModel" placeholder="请输入车辆型号" />
</el-form-item>
<el-form-item label="车身颜色" prop="carColor">
<el-input v-model="form.carColor" placeholder="请输入车身颜色" />
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" placeholder="请输入备注" />
</el-form-item>
<el-form-item label="车辆图片url" prop="carImageUrl">
<el-input v-model="form.carImageUrl" type="textarea" placeholder="请输入内容" />
</el-form-item>
<el-form-item label="创建者" prop="createBy">
<el-input v-model="form.createBy" placeholder="请输入创建者" />
</el-form-item>
<el-form-item label="创建时间" prop="createTime">
<el-date-picker clearable v-model="form.createTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择创建时间">
</el-date-picker>
</el-form-item>
<el-form-item label="修改者" prop="updateBy">
<el-input v-model="form.updateBy" placeholder="请输入修改者" />
</el-form-item>
<el-form-item label="修改时间" prop="updateTime">
<el-date-picker clearable v-model="form.updateTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择修改时间">
</el-date-picker>
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup name="Car" lang="ts">
import Pageheader from '@/components/Pageheader/index.vue';
import { listCar, getCar, delCar, addCar, updateCar } from '@/api/system/cars/index';
import { CarVO, CarQuery, CarForm } from '@/api/system/cars/type';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const router = useRouter();
const carList = ref<CarVO[]>([]);
const buttonLoading = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref<Array<string | number>>([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const queryFormRef = ref<ElFormInstance>();
const carFormRef = ref<ElFormInstance>();
const dialog = reactive<DialogOption>({
visible: false,
title: ''
});
const initFormData: CarForm = {
id: undefined,
areaId: undefined,
parkingId: undefined,
residentId: undefined,
carNum: undefined,
carBrand: undefined,
carModel: undefined,
carColor: undefined,
remark: undefined,
carImageUrl: undefined,
createBy: undefined,
createTime: undefined,
updateBy: undefined,
updateTime: undefined
};
const data = reactive<PageData<CarForm, CarQuery>>({
form: { ...initFormData },
queryParams: {
pageNum: 1,
pageSize: 10,
areaId: undefined,
parkingId: undefined,
residentId: undefined,
carNum: undefined,
carBrand: undefined,
carModel: undefined,
carColor: undefined,
carImageUrl: undefined,
params: {}
},
rules: {
id: [{ required: true, message: '车辆管理表id不能为空', trigger: 'blur' }]
}
});
const { queryParams, form, rules } = toRefs(data);
/** 查询车辆管理列表 */
const getList = async () => {
loading.value = true;
const res = await listCar(queryParams.value);
carList.value = res.rows;
total.value = res.total;
loading.value = false;
};
/** 取消按钮 */
const cancel = () => {
reset();
dialog.visible = false;
};
/** 表单重置 */
const reset = () => {
form.value = { ...initFormData };
carFormRef.value?.resetFields();
};
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.value.pageNum = 1;
getList();
};
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value?.resetFields();
handleQuery();
};
/** 多选框选中数据 */
const handleSelectionChange = (selection: CarVO[]) => {
ids.value = selection.map((item) => item.id);
single.value = selection.length != 1;
multiple.value = !selection.length;
};
/** 新增按钮操作 */
const handleAdd = () => {
router.push({
path: '/carArea/addCars'
});
};
/** 修改按钮操作 */
const handleUpdate = async (row?: CarVO) => {
router.push({
path: '/carArea/addCars',
query: {
id: row.id
}
});
};
/** 提交按钮 */
const submitForm = () => {
carFormRef.value?.validate(async (valid: boolean) => {
if (valid) {
buttonLoading.value = true;
if (form.value.id) {
await updateCar(form.value).finally(() => (buttonLoading.value = false));
} else {
await addCar(form.value).finally(() => (buttonLoading.value = false));
}
proxy?.$modal.msgSuccess('操作成功');
dialog.visible = false;
await getList();
}
});
};
/** 删除按钮操作 */
const handleDelete = async (row?: CarVO) => {
const _ids = row?.id || ids.value;
await proxy?.$modal.confirm('是否确认删除车辆管理编号为"' + _ids + '"的数据项？').finally(() => (loading.value = false));
await delCar(_ids);
proxy?.$modal.msgSuccess('删除成功');
await getList();
};
/** 导出按钮操作 */
const handleExport = () => {
proxy?.download(
'car/car/export',
{
...queryParams.value
},
`car_${new Date().getTime()}.xlsx`
);
};
onMounted(() => {
getList();
});
</script>

8
src/views/system/house/AddHouse.vue
View File

@@ -20,11 +20,6 @@
<el-option v-for="item in floors" :key="item.no" :label="item.name" :value="item.no" />
</el-select>
</el-form-item>
<el-form-item label="房屋类型" prop="houseUse">
<el-select v-model.number="form.houseUse" class="m-2" placeholder="请选择">
<el-option v-for="(item, index) in houseUselist" :key="index" :label="item" :value="index" />
</el-select>
</el-form-item>
<el-form-item label="房间号" prop="houseNo">
<el-input v-model="form.houseNo" placeholder="请输入房间号" />
</el-form-item>
@@ -82,7 +77,6 @@ import PageHeader from '@/components/Pageheader/index.vue';
import { useHouseStore } from '@/store/modules/house';
import { addHouseAPI, EditHouseApi, getHouseApi, getHouselistAPI } from '@/api/system/house';
import { addHouseType } from '@/api/system/house/type';
import { houseUselist } from '@/utils/house';
const router = useRouter();
const route = useRoute();
@@ -96,7 +90,6 @@ const form = ref<addHouseType>({
houseArea: '', //建筑面积
internalArea: '', //套内面积
shareArea: '', // 公摊面积
houseUse: 0, // 房屋类型
houseType: '' // 房屋户型
});
const rules = ref({
@@ -123,7 +116,6 @@ if (route.query.id) {
houseId: res.data.houseId, // 房屋id
unitNo: res.data.unitNo,
floorNo: res.data.floorNo,
houseUse: res.data.houseUse,
houseNo: res.data.houseNo, // 房间号
houseArea: res.data.houseArea, //建筑面积
internalArea: res.data.internalArea, //套内面积

59
src/views/system/houseRental/index.vue
View File

@@ -1,27 +1,30 @@
<template>
<div class="p-2">
<div class="h-full p-2 flex flex-col">
<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 label-width="120px" ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item label="房屋用途" prop="houseUse">
<el-select v-model="queryParams.houseUse" placeholder="选择房屋用途" style="width: 240px">
<el-option v-for="item in com_house_use" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="发布人" prop="houseId">
<el-input v-model="queryParams.rentalName" placeholder="请输入" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item>
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-card>
<div class="h-full flex flex-align-center">
<el-form label-width="120px" ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item label="房屋用途" prop="houseUse">
<el-select v-model="queryParams.houseUse" placeholder="选择房屋用途" style="width: 240px">
<el-option v-for="item in com_house_use" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="发布人" prop="houseId">
<el-input v-model="queryParams.rentalName" placeholder="请输入" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item>
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
</div>
</el-card>
</div>
</transition>
<el-card shadow="never">
<el-card class="flex-1" shadow="never">
<template #header>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
@@ -41,7 +44,7 @@
</el-row>
</template>
<el-table v-loading="loading" border :data="houseRentalList" @selection-change="handleSelectionChange">
<el-table class="h-full" v-loading="loading" border :data="houseRentalList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="房屋信息" align="center" prop="rentalName" />
<el-table-column label="租赁状态" align="center" prop="rent" />
@@ -86,6 +89,7 @@
</template>
<script setup name="HouseRental" lang="ts">
import Pageheader from '@/components/Pageheader/index.vue';
import { listHouseRental, delHouseRental, addHouseRental, updateHouseRental } from '@/api/system/houseRental/index';
import { HouseRentalVO, HouseRentalQuery, HouseRentalForm } from '@/api/system/houseRental/type';
import { getDictLabel } from '@/utils/house';
@@ -213,23 +217,6 @@ const handleUpdate = async (row?: HouseRentalVO) => {
});
};
/** 提交按钮 */
const submitForm = () => {
houseRentalFormRef.value?.validate(async (valid: boolean) => {
if (valid) {
buttonLoading.value = true;
if (form.value.id) {
await updateHouseRental(form.value).finally(() => (buttonLoading.value = false));
} else {
await addHouseRental(form.value).finally(() => (buttonLoading.value = false));
}
proxy?.$modal.msgSuccess('操作成功');
dialog.visible = false;
await getList();
}
});
};
/** 删除按钮操作 */
const handleDelete = async (row?: HouseRentalVO) => {
const _ids = row?.id || ids.value;
@@ -243,3 +230,5 @@ onMounted(() => {
getList();
});
</script>
<style scoped lang="scss"></style>

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>

7
src/views/system/resident/index.vue
View File

@@ -1,5 +1,6 @@
<template>
<div class="p-2 h-full">
<div class="p-2 h-full flex flex-col">
<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">
@@ -32,7 +33,7 @@
</div>
</transition>
<el-card style="height: 100%" shadow="never">
<el-card style="flex: 1" shadow="never">
<div class="residentBody h-full">
<div class="treebox h-full">
<div class="treeTitlebox">北境碧桂园小区</div>
@@ -95,6 +96,8 @@
</template>
<script setup name="Resident" lang="ts">
import Pageheader from '@/components/Pageheader/index.vue';
import { listResident, getResident, delResident, addResident, updateResident } from '@/api/system/resident/index';
import { ResidentVO, ResidentQuery, ResidentForm } from '@/api/system/resident/type';
import { getVillageTree } from '@/api/system/house/index';

2
src/views/system/storeroom/index.vue
View File

@@ -1,5 +1,6 @@
<template>
<div class="p-2 flex storeRoomBox">
<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">
@@ -117,6 +118,7 @@
</template>
<script setup name="Storeroom" lang="ts">
import Pageheader from '@/components/Pageheader/index.vue';
import { listStoreroom, getStoreroom, delStoreroom, addStoreroom, updateStoreroom } from '@/api/system/storeroom/index';
import { StoreroomVO, StoreroomQuery, StoreroomForm } from '@/api/system/storeroom/types';