121 lines
3.1 KiB
Vue
121 lines
3.1 KiB
Vue
<template>
|
|
<div class="BuildingBox">
|
|
<div class="buildingheader flex align-center justify-between">
|
|
<div>楼栋</div>
|
|
<div>
|
|
<span class="pointer" @click="handleAddBuilding" v-hasPermi="['system:building:add']">+增加楼栋</span>
|
|
</div>
|
|
</div>
|
|
<ul class="flex-1 overflow-y-auto overflow-x-hidden">
|
|
<li
|
|
v-for="(item, index) in currentBuildingInfoList"
|
|
:class="{
|
|
active: item.id === currentBuildingInfo.id
|
|
}"
|
|
:key="index"
|
|
>
|
|
<div class="buildingname" :title="item.buildingName ?? ''" @click="switchBuilding(item.id ?? null)">{{ item.buildingName ?? '' }}</div>
|
|
<div class="buildactions flex align-center justify-around">
|
|
<el-icon class="pointer hover-color-blue" @click="editBuilding(item.id)" v-hasPermi="['system:building:edit']"><Setting /></el-icon>
|
|
<el-icon class="pointer hover-color-red" @click="deleteBuilding(item.id)" v-hasPermi="['system:building:remove']"><Delete /></el-icon>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { deleteBuildingApi } from '@/api/system/house';
|
|
import { useHouseStore } from '@/store/modules/house';
|
|
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
|
|
|
const houseStore = useHouseStore();
|
|
const { switchBuilding } = houseStore; // 方法
|
|
const { currentBuildingInfoList, currentBuildingInfo } = storeToRefs(houseStore); // 数据
|
|
const router = useRouter();
|
|
|
|
const handleAddBuilding = () => {
|
|
router.push({
|
|
path: '/house/addbuilding'
|
|
});
|
|
};
|
|
const editBuilding = (id: string) => {
|
|
router.push({
|
|
path: '/house/editbuilding',
|
|
query: {
|
|
buildingId: id
|
|
}
|
|
});
|
|
};
|
|
const deleteBuilding = (id: string) => {
|
|
proxy?.$modal.confirm('该信息删除后无法恢复，确定要删除吗？').then(() => {
|
|
deleteBuildingApi(id).then(() => {
|
|
houseStore.deleteBuildingFun(id);
|
|
proxy?.$modal.msgSuccess('删除成功');
|
|
});
|
|
});
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
$primary_color: #1978fe;
|
|
.BuildingBox {
|
|
width: 220px;
|
|
height: 100%;
|
|
font-size: 14px;
|
|
background-color: #fff;
|
|
border-radius: 2px;
|
|
color: rgba(0, 0, 0, 1);
|
|
margin-right: 10px;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
.buildingheader {
|
|
height: 60px;
|
|
line-height: 60px;
|
|
padding: 0 15px;
|
|
border-bottom: 1px solid #f2f2f2;
|
|
span {
|
|
color: $primary_color;
|
|
}
|
|
}
|
|
|
|
li {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: 45px;
|
|
line-height: 45px;
|
|
color: rgba(16, 16, 16, 1);
|
|
position: relative;
|
|
border-bottom: 1px solid #f2f2f2;
|
|
&:hover {
|
|
background-color: #1978fe0c;
|
|
}
|
|
.buildingname {
|
|
padding: 0 10px 0 5px;
|
|
cursor: pointer;
|
|
flex: 1;
|
|
max-width: 175px;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
|
|
text-align: right;
|
|
}
|
|
.buildactions {
|
|
width: 75px;
|
|
font-size: 15px;
|
|
padding: 15px 0;
|
|
padding-right: 10px;
|
|
color: rgba(153, 153, 153, 1);
|
|
}
|
|
|
|
&.active {
|
|
color: $primary_color;
|
|
border-bottom: 1px solid $primary_color;
|
|
}
|
|
}
|
|
}
|
|
</style>
|