房屋管理功能完成,接下来储藏室
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="house-list">
|
||||
<div class="house flex align-center" @contextmenu="contextMenu.open($event, house.houseId)" v-for="house in list.houses" :key="house.houseId">
|
||||
<el-checkbox @click="handleClick(house)" :label="house.houseNo" :value="house.houseId" />
|
||||
<el-checkbox :label="house.houseNo" :value="house.houseId" />
|
||||
</div>
|
||||
<!-- 右键菜单组件 -->
|
||||
<ContextMenu ref="contextMenu" :menu="menuList" @select="handleSelect" />
|
||||
@@ -20,23 +20,15 @@ const props = defineProps<{
|
||||
value: string;
|
||||
}[];
|
||||
}>();
|
||||
const list = props.unit.find((item) => item.floorNo === props.fIdx);
|
||||
const checked = ref<string[]>([]);
|
||||
const list = props.unit.find((item) => item.floorNo === props.fIdx) ?? { floorNo: '', houses: [] };
|
||||
// 菜单ref
|
||||
const contextMenu = ref();
|
||||
// 点击事件
|
||||
const handleSelect = (data: { type: string; value: string }) => {
|
||||
emit('contextmenufun', data);
|
||||
};
|
||||
function handleClick(house: HouseType) {
|
||||
checked.value = checked.value.includes(house.houseId)
|
||||
? checked.value.filter((item) => item !== house.houseId)
|
||||
: checked.value.concat(house.houseId);
|
||||
emit('change', checked.value);
|
||||
}
|
||||
|
||||
const emit = defineEmits<{
|
||||
change: [value: string[]];
|
||||
contextmenufun: [value: { type: string; value: string }];
|
||||
}>();
|
||||
</script>
|
||||
|
||||
@@ -1,43 +1,56 @@
|
||||
<template>
|
||||
<div class="TableBox p-5 h-full">
|
||||
<el-table border :data="houseStore.currentFloorInfoList">
|
||||
<el-table-column align="center" fixed label="楼层\单元" min-width="85">
|
||||
<template #default="{ row }">
|
||||
<span>{{ row }}楼</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
min-width="160"
|
||||
class="column"
|
||||
align="center"
|
||||
:label="`${unit.unitNo}单元`"
|
||||
v-for="(unit, index) in houseStore.currentHouseInfoList?.units ?? []"
|
||||
:key="index"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<houseItem @contextmenufun="contextMenuFun" @change="handleChange" :menu-list="menutlist" :unit="unit.floors" :f-idx="row"></houseItem>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="TableBox p-5 h-full" v-if="houseStore.currentHouseInfoList !== null">
|
||||
<el-checkbox-group @change="handleChangeCheckhouses" v-model="houseStore.checkoutHouses">
|
||||
<el-table border :data="houseStore.currentFloorInfoList">
|
||||
<el-table-column align="center" fixed label="楼层\单元" min-width="85">
|
||||
<template #default="{ row }">
|
||||
<span>{{ row }}楼</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
min-width="160"
|
||||
class="column"
|
||||
align="center"
|
||||
:label="`${unit.unitNo}单元`"
|
||||
v-for="(unit, index) in houseStore.currentHouseInfoList?.units ?? []"
|
||||
:key="index"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<houseItem @contextmenufun="contextMenuFun" :menu-list="menutlist" :unit="unit.floors" :f-idx="row"></houseItem>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { deleteHouseApi } from '@/api/system/house';
|
||||
import houseItem from './houseItem.vue';
|
||||
import { useHouseStore } from '@/store/modules/house';
|
||||
const houseStore = useHouseStore();
|
||||
const { currentHouseInfoList, currentFloorInfoList } = storeToRefs(houseStore); // 数据
|
||||
console.log(currentHouseInfoList);
|
||||
|
||||
const router = useRouter();
|
||||
const menutlist = [
|
||||
{ label: '编辑', value: 'edit' },
|
||||
{ label: '收费标准', value: 'money' },
|
||||
{ label: '详情', value: 'main' },
|
||||
{ label: '删除', value: 'delete' }
|
||||
];
|
||||
function handleChangeCheckhouses(val: string[]) {
|
||||
houseStore.checkoutHousesFun([]);
|
||||
houseStore.checkoutHousesFun(val);
|
||||
}
|
||||
function contextMenuFun(val: { type: string; value: string }) {
|
||||
switch (val.type) {
|
||||
case 'edit':
|
||||
console.log('你选择了:', val);
|
||||
router.push({
|
||||
path: '/house/addHouse',
|
||||
query: {
|
||||
id: val.value
|
||||
}
|
||||
});
|
||||
break;
|
||||
case 'money':
|
||||
console.log('你选择了:', val);
|
||||
@@ -47,13 +60,13 @@ function contextMenuFun(val: { type: string; value: string }) {
|
||||
break;
|
||||
case 'delete':
|
||||
console.log('你选择了:', val);
|
||||
houseStore.deleteHouseFun(val.value);
|
||||
deleteHouseApi(val.value).then(() => {
|
||||
ElMessage.success('删除成功');
|
||||
houseStore.switchBuilding(houseStore.currentBuildingInfo.id);
|
||||
});
|
||||
break;
|
||||
}
|
||||
}
|
||||
function handleChange(data: string[]) {
|
||||
houseStore.checkoutHousesFun(data);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
<div class="rightActions">
|
||||
<span class="mr-20px" @click="handleAddHouse">+增加房屋</span>
|
||||
<span class="mr-20px">收费标准设置</span>
|
||||
<span>删除</span>
|
||||
<span @click="deleteAllhouse">删除</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="UnitBody">
|
||||
@@ -22,6 +22,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { deleteHouseApi } from '@/api/system/house';
|
||||
import TableUnit from './components/table.vue';
|
||||
import { useHouseStore } from '@/store/modules/house';
|
||||
const houseStore = useHouseStore();
|
||||
@@ -31,6 +32,25 @@ function handleAddHouse() {
|
||||
path: '/house/addHouse'
|
||||
});
|
||||
}
|
||||
|
||||
function deleteAllhouse() {
|
||||
const checkhouse = houseStore.checkoutHouses;
|
||||
console.log(checkhouse);
|
||||
if (checkhouse.length > 0) {
|
||||
let deletecount = 0;
|
||||
checkhouse.forEach((item) => {
|
||||
deleteHouseApi(item).then(() => {
|
||||
deletecount++;
|
||||
if (deletecount === checkhouse.length - 1) {
|
||||
ElMessage.success('批量删除成功');
|
||||
houseStore.switchBuilding(houseStore.currentBuildingInfo.id);
|
||||
}
|
||||
});
|
||||
});
|
||||
} else {
|
||||
ElMessage.warning('请选择要删除的房屋');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
Reference in New Issue
Block a user