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-06 18:00:46 +08:00
parent f414026af8
commit ee55b4dca7
15 changed files with 805 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
src/views/system/storeroom/index.vue Normal file
View File

@@ -0,0 +1,98 @@
<template>
<div class="StoreRoomBox">
<PageHeader title="储藏室管理">
<template #container>
<div class="flex flex-items-center pb-3">
<div>储藏编号</div>
<el-input class="ml-10px mr-20px" placeholder="请输入" v-model="searchValue" />
<el-button class="mr-20px" type="primary">查询</el-button>
<el-button>重置</el-button>
</div>
</template>
</PageHeader>
<div class="StoreRoomBody">
<div class="nav flex flex-items-center justify-between">
<div class="title-text">储藏室列表</div>
<div>
<el-button type="primary">+添加</el-button>
<el-button>批量操作</el-button>
</div>
</div>
<div class="StoreRoomTablebox">
<el-table checked>
<el-table-column label="楼栋" width="100">
<template #default="scope">
<div>{{ scope.row.id }}</div>
</template>
</el-table-column>
<el-table-column label="单元" width="100">
<template #default="scope">
<div>{{ scope.row.name }}</div>
</template>
</el-table-column>
<el-table-column label="储藏室号" width="100">
<template #default="scope">
<div>{{ scope.row.name }}</div>
</template>
</el-table-column>
<el-table-column label="建筑面积" width="100">
<template #default="scope">
<div>{{ scope.row.name }}</div>
</template>
</el-table-column>
<el-table-column label="公摊面积" width="100">
<template #default="scope">
<div>{{ scope.row.name }}</div>
</template>
</el-table-column>
<el-table-column label="实用面积" width="100">
<template #default="scope">
<div>{{ scope.row.name }}</div>
</template>
</el-table-column>
<el-table-column label="操作" width="100">
<template #default="scope">
<div>
<el-button type="primary">编辑</el-button>
<el-button type="danger">删除</el-button>
</div>
</template>
</el-table-column>
</el-table>
<Pagination v-bind="paginationOptions" @update:limit="handleSizeChange" @update:page="hanlePageChange"></Pagination>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const searchValue = ref('');
const paginationOptions = ref({
total: 100,
page: 1,
limit: 10
});
function handleSizeChange(val: number) {
paginationOptions.value.limit = val;
}
function hanlePageChange(val: number) {
paginationOptions.value.page = val;
}
</script>
<style scoped lang="scss">
.StoreRoomBody {
padding: 20px;
$navHeight: 60px;
.nav {
height: $navHeight;
}
.StoreRoomTablebox {
padding: 0 10px;
margin-top: 10px;
height: calc(100% - $navHeight);
}
}
</style>