车辆管理界面搭建
This commit is contained in:
Zy
222
src/components/Holder/index.vue
Normal file
222
src/components/Holder/index.vue
Normal 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>
|
||||
Reference in New Issue
Block a user