储藏室页面部分结构
This commit is contained in:
Zy
64
README.md
64
README.md
@@ -2,19 +2,6 @@
|
||||
|
||||
- 本仓库为前端技术栈 [Vue3](https://v3.cn.vuejs.org) + [TS](https://www.typescriptlang.org/) + [Element Plus](https://element-plus.org/zh-CN) + [Vite](https://cn.vitejs.dev) 版本。
|
||||
- 成员项目: 基于 vben5(ant-design-vue) 的前端项目 [ruoyi-plus-vben5](https://github.com/imdap/ruoyi-plus-vben5)
|
||||
- 成员项目: 基于soybean 的前端项目 [ruoyi-plus-soybean](https://gitee.com/xlsea/ruoyi-plus-soybean)
|
||||
|
||||
## 配套后端代码仓库地址
|
||||
|
||||
| 介绍 | 项目名 | 项目地址 |
|
||||
|------------|:-----------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
|
||||
| 🔥 分布式集群框架 | RuoYi-Vue-Plus | - [Gitee](https://gitee.com/dromara/RuoYi-Vue-Plus)<br> - [GitHub](https://github.com/dromara/RuoYi-Vue-Plus)<br> - [GitCode](https://gitcode.com/dromara/RuoYi-Vue-Plus) |
|
||||
| 🔥 微服务框架 | RuoYi-Cloud-Plus | - [Gitee](https://gitee.com/dromara/RuoYi-Cloud-Plus)<br>- [GitHub](https://github.com/dromara/RuoYi-Cloud-Plus)<br> - [GitCode](https://gitcode.com/dromara/RuoYi-Cloud-Plus) |
|
||||
|
||||
## 分支说明
|
||||
|
||||
- ts分支(稳定发布主分支 生产可用)
|
||||
- dev分支(开发分支 开发过程中使用)
|
||||
|
||||
## 前端运行
|
||||
|
||||
@@ -30,54 +17,3 @@ npm run build:prod
|
||||
|
||||
# 前端访问地址 http://localhost:80
|
||||
```
|
||||
|
||||
## 本框架与RuoYi的业务差异
|
||||
|
||||
| 业务 | 功能说明 | 本框架 | RuoYi |
|
||||
| ------------ | ------------------------------------------------------------- | ------ | ----------------------------- |
|
||||
| 租户管理 | 系统内租户的管理 如:租户套餐、过期时间、用户数量、企业信息等 | 支持 | 无 |
|
||||
| 租户套餐管理 | 系统内租户所能使用的套餐管理 如:套餐内所包含的菜单等 | 支持 | 无 |
|
||||
| 用户管理 | 用户的管理配置 如:新增用户、分配用户所属部门、角色、岗位等 | 支持 | 支持 |
|
||||
| 部门管理 | 配置系统组织机构（公司、部门、小组） 树结构展现支持数据权限 | 支持 | 支持 |
|
||||
| 岗位管理 | 配置系统用户所属担任职务 | 支持 | 支持 |
|
||||
| 菜单管理 | 配置系统菜单、操作权限、按钮权限标识等 | 支持 | 支持 |
|
||||
| 角色管理 | 角色菜单权限分配、设置角色按机构进行数据范围权限划分 | 支持 | 支持 |
|
||||
| 字典管理 | 对系统中经常使用的一些较为固定的数据进行维护 | 支持 | 支持 |
|
||||
| 参数管理 | 对系统动态配置常用参数 | 支持 | 支持 |
|
||||
| 通知公告 | 系统通知公告信息发布维护 | 支持 | 支持 |
|
||||
| 操作日志 | 系统正常操作日志记录和查询 系统异常信息日志记录和查询 | 支持 | 支持 |
|
||||
| 登录日志 | 系统登录日志记录查询包含登录异常 | 支持 | 支持 |
|
||||
| 文件管理 | 系统文件展示、上传、下载、删除等管理 | 支持 | 无 |
|
||||
| 文件配置管理 | 系统文件上传、下载所需要的配置信息动态添加、修改、删除等管理 | 支持 | 无 |
|
||||
| 在线用户管理 | 已登录系统的在线用户信息监控与强制踢出操作 | 支持 | 支持 |
|
||||
| 定时任务 | 运行报表、任务管理(添加、修改、删除)、日志管理、执行器管理等 | 支持 | 仅支持任务与日志管理 |
|
||||
| 代码生成 | 多数据源前后端代码的生成（java、html、xml、sql）支持CRUD下载 | 支持 | 仅支持单数据源 |
|
||||
| 系统接口 | 根据业务代码自动生成相关的api接口文档 | 支持 | 支持 |
|
||||
| 服务监控 | 监视集群系统CPU、内存、磁盘、堆栈、在线日志、Spring相关配置等 | 支持 | 仅支持单机CPU、内存、磁盘监控 |
|
||||
| 缓存监控 | 对系统的缓存信息查询，命令统计等。 | 支持 | 支持 |
|
||||
| 在线构建器 | 拖动表单元素生成相应的HTML代码。 | 支持 | 支持 |
|
||||
| 使用案例 | 系统的一些功能案例 | 支持 | 不支持 |
|
||||
|
||||
## 演示图例
|
||||
|
||||
| | |
|
||||
| ---------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
|
||||
|  |  |
|
||||
|  |  |
|
||||
|  |  |
|
||||
|  |  |
|
||||
|  |  |
|
||||
|  |  |
|
||||
|  |  |
|
||||
|  |  |
|
||||
|  |  |
|
||||
|  |  |
|
||||
|  |  |
|
||||
|  |  |
|
||||
|  |  |
|
||||
|  |  |
|
||||
|  |  |
|
||||
|  |  |
|
||||
|  |  |
|
||||
|  |  |
|
||||
|  |  |
|
||||
|
||||
@@ -17,7 +17,15 @@ body {
|
||||
background: var(--el-bg-color-page);
|
||||
font-family: 'MiSans', 'HarmonyOS Sans SC', 'PingFang SC', 'Source Han Sans SC', 'Noto Sans SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
|
||||
}
|
||||
|
||||
/* 图片统一初始化 */
|
||||
img {
|
||||
border: none;
|
||||
vertical-align: middle;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
-webkit-user-drag: none;
|
||||
user-select: none;
|
||||
}
|
||||
label {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@@ -80,6 +80,7 @@ export default {
|
||||
selectTenant: 'Select Tenant',
|
||||
layoutSetting: 'Layout Setting',
|
||||
personalCenter: 'Personal Center',
|
||||
logout: 'Logout'
|
||||
logout: 'Logout',
|
||||
community: 'Switching communities'
|
||||
}
|
||||
};
|
||||
|
||||
@@ -80,6 +80,7 @@ export default {
|
||||
selectTenant: '选择租户',
|
||||
layoutSetting: '布局设置',
|
||||
personalCenter: '个人中心',
|
||||
logout: '退出登录'
|
||||
logout: '退出登录',
|
||||
community: '切换小区'
|
||||
}
|
||||
};
|
||||
|
||||
@@ -28,6 +28,9 @@
|
||||
</div>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item divided command="changecommunity">
|
||||
<span>{{ proxy.$t('navbar.community') }}</span>
|
||||
</el-dropdown-item>
|
||||
<router-link v-if="!dynamic" to="/user/profile">
|
||||
<el-dropdown-item>{{ proxy.$t('navbar.personalCenter') }}</el-dropdown-item>
|
||||
</router-link>
|
||||
@@ -88,6 +91,14 @@ const logout = async () => {
|
||||
});
|
||||
};
|
||||
|
||||
const routerPush = useRouter();
|
||||
const changecommunity = () => {
|
||||
console.log('change community');
|
||||
routerPush.push({
|
||||
path: '/community'
|
||||
});
|
||||
};
|
||||
|
||||
const emits = defineEmits(['setLayout']);
|
||||
const setLayout = () => {
|
||||
emits('setLayout');
|
||||
@@ -95,7 +106,8 @@ const setLayout = () => {
|
||||
// 定义Command方法对象 通过key直接调用方法
|
||||
const commandMap: { [key: string]: any } = {
|
||||
setLayout,
|
||||
logout
|
||||
logout,
|
||||
changecommunity
|
||||
};
|
||||
const handleCommand = (command: string) => {
|
||||
// 判断是否存在该方法
|
||||
|
||||
@@ -47,6 +47,30 @@ export const constantRoutes: RouteRecordRaw[] = [
|
||||
component: () => import('@/views/login.vue'),
|
||||
hidden: true
|
||||
},
|
||||
{
|
||||
path: '/community',
|
||||
redirect: '/community/communitylist',
|
||||
children: [
|
||||
{
|
||||
path: 'communitylist',
|
||||
name: 'communitylist',
|
||||
hidden: true,
|
||||
meta: {
|
||||
title: '小区列表'
|
||||
},
|
||||
component: () => import('@/views/community/index.vue')
|
||||
},
|
||||
{
|
||||
path: 'AddCommunity',
|
||||
name: 'AddCommunity',
|
||||
hidden: true,
|
||||
meta: {
|
||||
title: '新建小区'
|
||||
},
|
||||
component: () => import('@/views/community/AddCommunity.vue')
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/register',
|
||||
component: () => import('@/views/register.vue'),
|
||||
@@ -92,9 +116,7 @@ export const constantRoutes: RouteRecordRaw[] = [
|
||||
];
|
||||
|
||||
// 动态路由，基于用户权限动态去加载
|
||||
export const dynamicRoutes: RouteRecordRaw[] = [
|
||||
|
||||
];
|
||||
export const dynamicRoutes: RouteRecordRaw[] = [];
|
||||
|
||||
/**
|
||||
* 创建路由
|
||||
|
||||
161
src/views/community/AddCommunity.vue
Normal file
161
src/views/community/AddCommunity.vue
Normal file
@@ -0,0 +1,161 @@
|
||||
<template>
|
||||
<div class="container AddBuildingBox">
|
||||
<PageHeader title="新建小区"></PageHeader>
|
||||
<el-form inline class="formBody" ref="formRef" :model="form" :rules="rules" label-width="100px">
|
||||
<div class="AddBuildingBody">
|
||||
<div class="title">基本信息</div>
|
||||
<div class="addBuildingFormBody">
|
||||
<el-form-item label="小区名称" prop="buildingName">
|
||||
<el-input v-model="form.buildingName" placeholder="请输入小区名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="小区编号" prop="buildingCode">
|
||||
<el-input v-model="form.buildingCode" placeholder="请输入小区编号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="所在城市" prop="buildingType">
|
||||
<el-input v-model="form.buildingType" placeholder="请输入楼高(m)" />
|
||||
</el-form-item>
|
||||
<el-form-item label="详细地址" prop="buildingArea">
|
||||
<el-input v-model="form.buildingArea" placeholder="请输入楼栋结构" />
|
||||
</el-form-item>
|
||||
<el-form-item label="建成时间" prop="buildingArea">
|
||||
<el-date-picker v-model="builtTime" type="date" placeholder="选择建成时间" />
|
||||
</el-form-item>
|
||||
<el-form-item label="房屋用途" prop="buildingArea">
|
||||
<el-input v-model="form.buildingArea" placeholder="请输入楼栋结构" />
|
||||
</el-form-item>
|
||||
<el-form-item label="小区面积" prop="buildingArea">
|
||||
<el-input v-model="form.buildingArea" placeholder="请输入小区面积"><template #append>㎡</template> </el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="小区楼栋" prop="buildingArea">
|
||||
<el-input v-model="form.buildingArea" placeholder="请输入小区楼栋"><template #append>栋</template> </el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="小区房屋" prop="buildingArea">
|
||||
<el-input v-model="form.buildingArea" placeholder="请输入小区房屋"><template #append>间</template> </el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="小区面积" prop="buildingArea">
|
||||
<el-input v-model="form.buildingArea" placeholder="请输入小区面积"><template #append>㎡</template> </el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="车位数量" prop="buildingArea">
|
||||
<el-input v-model="form.buildingArea" placeholder="请输入车位数量">
|
||||
<template #append>个</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 100%" label="小区图片" prop="buildingArea">
|
||||
<el-input v-model="form.buildingArea" placeholder="请输入楼栋结构" />
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 100%" label="小区简介" prop="buildingArea">
|
||||
<el-input v-model="form.textarea" :rows="5" type="textarea" placeholder="小区简介" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
<div class="AddBuildingBody">
|
||||
<div class="title">负责人信息</div>
|
||||
<div class="addBuildingFormBody addBuildingForm_User_Body">
|
||||
<el-form-item label="姓名" prop="buildingName">
|
||||
<el-input v-model="form.buildingName" placeholder="请输入姓名" />
|
||||
</el-form-item>
|
||||
<el-form-item label="电话" prop="buildingCode">
|
||||
<el-input v-model="form.buildingCode" placeholder="请输入电话" />
|
||||
</el-form-item>
|
||||
<el-form-item label="微信" prop="buildingArea">
|
||||
<el-input v-model="form.buildingArea" placeholder="请输入微信"> </el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="QQ" prop="buildingArea">
|
||||
<el-input v-model="form.buildingArea" placeholder="请输入QQ"> </el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="邮箱" prop="buildingArea">
|
||||
<el-input v-model="form.buildingArea" placeholder="请输入邮箱"> </el-input>
|
||||
</el-form-item>
|
||||
<div class="pl-100px">
|
||||
<el-button type="primary" @click="submitForm">提交</el-button>
|
||||
<el-button @click="cancelForm">取消</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import PageHeader from '@/components/Pageheader/index.vue';
|
||||
const formRef = ref();
|
||||
const form = ref({
|
||||
buildingName: '',
|
||||
buildingCode: '',
|
||||
buildingType: '',
|
||||
buildingArea: '',
|
||||
buildingAddress: null,
|
||||
buildingDescription: null,
|
||||
textarea: ''
|
||||
});
|
||||
const builtTime = ref(null);
|
||||
const rules = ref({
|
||||
buildingName: [{ required: true, message: '请输入楼栋名称', trigger: 'blur' }],
|
||||
buildingAddress: [{ required: true, message: '请输入单元数', trigger: 'blur' }],
|
||||
buildingDescription: [{ required: true, message: '请输入楼层', trigger: 'blur' }]
|
||||
});
|
||||
|
||||
const submitForm = () => {
|
||||
formRef.value?.validate(async (valid: boolean) => {
|
||||
if (valid) {
|
||||
console.log(form.value);
|
||||
}
|
||||
});
|
||||
};
|
||||
const cancelForm = () => {
|
||||
console.log('取消');
|
||||
};
|
||||
</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;
|
||||
}
|
||||
.addBuildingFormBody {
|
||||
width: 900px;
|
||||
margin: 0 auto;
|
||||
padding-bottom: 40px;
|
||||
.el-form-item {
|
||||
width: 46%;
|
||||
margin-bottom: 20px;
|
||||
&:deep(.el-input, .el-date-editor.el-input) {
|
||||
width: 300px;
|
||||
}
|
||||
}
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 35px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.addBuildingForm_User_Body {
|
||||
width: 900px;
|
||||
margin: 0 auto;
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
194
src/views/community/index.vue
Normal file
194
src/views/community/index.vue
Normal file
@@ -0,0 +1,194 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="community_nav_box">
|
||||
<div class="currentbox">当前小区：xxxxxxxxxxxxx</div>
|
||||
<div class="subtitle flex align-center">
|
||||
<div class="line"></div>
|
||||
<div class="changecommunity">切换小区</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="communityBody">
|
||||
<div
|
||||
class="coummunity_card"
|
||||
:class="{
|
||||
activeCommunity: index === 2
|
||||
}"
|
||||
v-for="(item, index) in list"
|
||||
:key="index"
|
||||
>
|
||||
<img src="https://picsum.photos/400/400" alt="" />
|
||||
<div class="coummunityaction_box">
|
||||
<div class="coummunityname">{{ item.name }}</div>
|
||||
<div class="counmmunityaddress">{{ item.address }}</div>
|
||||
</div>
|
||||
<div class="actions flex">
|
||||
<div>管理</div>
|
||||
<div>编辑</div>
|
||||
<div>删除</div>
|
||||
</div>
|
||||
</div>
|
||||
<div @click="handleAdd" class="coummunity_card addActions flex flex-items-center justify-center">
|
||||
<div class="addCoummunity">
|
||||
<el-icon>
|
||||
<AddLocation></AddLocation>
|
||||
</el-icon>
|
||||
<div>添加小区</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
const list = ref([
|
||||
{
|
||||
name: '北境碧桂园小区',
|
||||
address: '北境朝北市塔reek儿大道368号'
|
||||
},
|
||||
{
|
||||
name: '北境碧桂园小区',
|
||||
address: '北境朝北市塔reek儿大道368号'
|
||||
},
|
||||
{
|
||||
name: '北境碧桂园小区',
|
||||
address: '北境朝北市塔reek儿大道368号'
|
||||
},
|
||||
{
|
||||
name: '北境碧桂园小区',
|
||||
address: '北境朝北市塔reek儿大道368号'
|
||||
},
|
||||
{
|
||||
name: '北境碧桂园小区',
|
||||
address: '北境朝北市塔reek儿大道368号'
|
||||
}
|
||||
]);
|
||||
|
||||
const router = useRouter();
|
||||
function handleAdd() {
|
||||
console.log('add');
|
||||
router.push({
|
||||
path: '/community/AddCommunity'
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.container {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
background-color: #f5f7fb;
|
||||
.community_nav_box {
|
||||
height: 98px;
|
||||
border-radius: 5px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
padding: 20px;
|
||||
.currentbox {
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
color: rgba(102, 102, 102, 1);
|
||||
font-size: 14px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.subtitle {
|
||||
.line {
|
||||
margin-top: 4px;
|
||||
width: 5px;
|
||||
height: 19px;
|
||||
border-radius: 5px;
|
||||
background-color: rgba(26, 117, 255, 1);
|
||||
margin-right: 5px;
|
||||
}
|
||||
.changecommunity {
|
||||
height: 25px;
|
||||
line-height: 25px;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.communityBody {
|
||||
padding: 30px;
|
||||
|
||||
color: #000;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
.coummunity_card {
|
||||
width: 330px;
|
||||
height: 330px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
margin-right: 15px;
|
||||
margin-bottom: 15px;
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
height: 200px;
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.coummunityaction_box {
|
||||
height: 100px;
|
||||
padding: 10px 10px;
|
||||
.counmmunityaddress {
|
||||
margin-top: 20px;
|
||||
font-size: small;
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
.actions {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
|
||||
div {
|
||||
border-top: 1px solid #ccc;
|
||||
border-right: 1px solid #ccc;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: small;
|
||||
color: #4791ff;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background-color: #f5f7fb;
|
||||
}
|
||||
}
|
||||
& > div:last-child {
|
||||
color: red;
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
|
||||
.addCoummunity {
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&.addActions {
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background-color: #f5f7fb;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.activeCommunity {
|
||||
position: relative;
|
||||
&::after {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: -30px;
|
||||
transform: rotateZ(45deg);
|
||||
content: '当前小区';
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
font-size: 12px;
|
||||
color: white;
|
||||
text-align: center;
|
||||
background-color: green;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -4,19 +4,19 @@
|
||||
<div class="AddBuildingBody">
|
||||
<div class="title">基本信息</div>
|
||||
<div class="addBuildingFormBody">
|
||||
<el-form class="formBody" ref="formRef" :model="form" :rules="rules" label-width="180px">
|
||||
<el-form class="formBody" label-position="left" ref="formRef" :model="form" :rules="rules" label-width="100px">
|
||||
<el-form-item label="楼栋" prop="buildingID">
|
||||
<el-select v-model="form.buildingID" class="m-2" placeholder="请选择" size="large">
|
||||
<el-select v-model="form.buildingID" class="m-2" placeholder="请选择">
|
||||
<el-option v-for="item in building" :key="item.id" :label="item.name" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="单元" prop="unit">
|
||||
<el-select v-model="form.unit" class="m-2" placeholder="请选择" size="large">
|
||||
<el-select v-model="form.unit" class="m-2" placeholder="请选择">
|
||||
<el-option v-for="item in units" :key="item.no" :label="item.name" :value="item.no" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="楼层" prop="floor">
|
||||
<el-select v-model="form.floor" class="m-2" placeholder="请选择" size="large">
|
||||
<el-select v-model="form.floor" class="m-2" placeholder="请选择">
|
||||
<el-option v-for="item in floors" :key="item.no" :label="item.name" :value="item.no" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
@@ -52,12 +52,12 @@
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="车位号" prop="buildingAddress">
|
||||
<el-select v-model="form.ParkingSpaceNumber" class="m-2" placeholder="请选择车位号" size="large">
|
||||
<el-select v-model="form.ParkingSpaceNumber" class="m-2" placeholder="请选择车位号">
|
||||
<el-option v-for="item in building" :key="item.id" :label="item.name" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="储藏室" prop="buildingDescription">
|
||||
<el-select v-model="form.storeroom" class="m-2" placeholder="请选择储藏室" size="large">
|
||||
<el-select v-model="form.storeroom" class="m-2" placeholder="请选择储藏室">
|
||||
<el-option v-for="item in building" :key="item.id" :label="item.name" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
@@ -165,6 +165,9 @@ const cancelForm = () => {
|
||||
.formBody {
|
||||
width: 550px;
|
||||
margin: 0 auto;
|
||||
|
||||
.el-form-item__content,
|
||||
.el-select,
|
||||
.el-input {
|
||||
width: 440px;
|
||||
margin-right: 10px;
|
||||
|
||||
60
src/views/system/house/HouseDetails.vue
Normal file
60
src/views/system/house/HouseDetails.vue
Normal file
@@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<div class="AddBuildingBox">
|
||||
<PageHeader title="房屋信息"></PageHeader>
|
||||
<div class="AddBuildingBody">
|
||||
<div class="title">
|
||||
<span>基本信息</span>
|
||||
<el-button type="primary" text>编辑</el-button>
|
||||
</div>
|
||||
<div class="addBuildingFormBody">
|
||||
<div style="width: 50%">
|
||||
<el-descriptions>
|
||||
<el-descriptions-item label-align="right" label="房号:"> 娜美 </el-descriptions-item>
|
||||
<el-descriptions-item label-align="right" label="所属小区:">18100000000</el-descriptions-item>
|
||||
<el-descriptions-item label-align="right" label="楼栋:">2栋</el-descriptions-item>
|
||||
<el-descriptions-item label-align="right" label="单元:">2单元</el-descriptions-item>
|
||||
<el-descriptions-item label-align="right" label="楼层:">3楼</el-descriptions-item>
|
||||
<el-descriptions-item label-align="right" label="建筑面积:">112㎡</el-descriptions-item>
|
||||
<el-descriptions-item label-align="right" label="公摊面积:">12㎡</el-descriptions-item>
|
||||
<el-descriptions-item label-align="right" label="套内面积:">100㎡</el-descriptions-item>
|
||||
<el-descriptions-item label-align="right" label="户型:">3室2厅2卫</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import PageHeader from '@/components/Pageheader/index.vue';
|
||||
</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;
|
||||
}
|
||||
.addBuildingFormBody {
|
||||
font-size: large;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -15,7 +15,7 @@ const props = defineProps<{
|
||||
unit: any;
|
||||
fIdx: number;
|
||||
}>();
|
||||
|
||||
const router = useRouter();
|
||||
const checked = ref([]);
|
||||
// 菜单
|
||||
const menuList = ref([
|
||||
@@ -29,6 +29,19 @@ const contextMenu = ref();
|
||||
// 点击事件
|
||||
const handleSelect = (val) => {
|
||||
console.log('你选择了：', val);
|
||||
switch (val) {
|
||||
case 'edit':
|
||||
break;
|
||||
case 'money':
|
||||
break;
|
||||
case 'main':
|
||||
router.push({
|
||||
path: '/house/houseDetails'
|
||||
});
|
||||
break;
|
||||
case 'delete':
|
||||
break;
|
||||
}
|
||||
};
|
||||
function handleClick(house: any) {
|
||||
checked.value = checked.value.includes(house.id) ? checked.value.filter((item) => item !== house.id) : checked.value.concat(house.id);
|
||||
|
||||
@@ -51,6 +51,9 @@ $primary_color: #1978fe;
|
||||
color: rgba(102, 102, 102, 1);
|
||||
.rightActions {
|
||||
color: $primary_color;
|
||||
span {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
.UnitBody {
|
||||
|
||||
@@ -37,6 +37,41 @@ const active = ref(0);
|
||||
const changeHouseType = (index: number) => {
|
||||
active.value = index;
|
||||
};
|
||||
|
||||
let ojb = {
|
||||
'code': 200,
|
||||
'msg': '操作成功',
|
||||
'data': [
|
||||
{
|
||||
'unitNo': '1',
|
||||
'houses': '{"houseId":5,"houseNo":"1201室"}, {"houseId":6,"houseNo":"1202室"}',
|
||||
'houseCount': 2,
|
||||
'floorNo': '12',
|
||||
'buildingId': 54564
|
||||
},
|
||||
{
|
||||
'unitNo': '1',
|
||||
'houses': '{"houseId":1,"houseNo":"1301室"}, {"houseId":2,"houseNo":"1302室"}',
|
||||
'houseCount': 2,
|
||||
'floorNo': '13',
|
||||
'buildingId': 54564
|
||||
},
|
||||
{
|
||||
'unitNo': '2',
|
||||
'houses': '{"houseId":7,"houseNo":"1201室"}',
|
||||
'houseCount': 1,
|
||||
'floorNo': '12',
|
||||
'buildingId': 54564
|
||||
},
|
||||
{
|
||||
'unitNo': '2',
|
||||
'houses': '{"houseId":3,"houseNo":"1301室"}, {"houseId":4,"houseNo":"1302室"}',
|
||||
'houseCount': 2,
|
||||
'floorNo': '13',
|
||||
'buildingId': 54564
|
||||
}
|
||||
]
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
180
src/views/system/storeroom/addStoreRoom.vue
Normal file
180
src/views/system/storeroom/addStoreRoom.vue
Normal file
@@ -0,0 +1,180 @@
|
||||
<template>
|
||||
<div class="AddBuildingBox">
|
||||
<PageHeader title="新建储藏室"></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="100px">
|
||||
<el-form-item label="楼栋" prop="buildingID">
|
||||
<el-select v-model="form.buildingID" class="m-2" placeholder="请选择">
|
||||
<el-option v-for="item in building" :key="item.id" :label="item.name" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="单元" prop="unit">
|
||||
<el-select v-model="form.unit" class="m-2" placeholder="请选择">
|
||||
<el-option v-for="item in units" :key="item.no" :label="item.name" :value="item.no" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="楼层" prop="floor">
|
||||
<el-select v-model="form.floor" class="m-2" placeholder="请选择">
|
||||
<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="buildingName">
|
||||
<el-input v-model="form.buildingName" placeholder="请输入储藏室号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="建筑面积" prop="buildingName">
|
||||
<el-input v-model="form.buildingName" placeholder="请输入建筑面积" />
|
||||
</el-form-item>
|
||||
<el-form-item label="公摊面积" prop="buildingName">
|
||||
<el-input v-model="form.buildingName" placeholder="请输入公摊面积" />
|
||||
</el-form-item>
|
||||
<el-form-item label="实用面积" prop="buildingName">
|
||||
<el-input v-model="form.buildingName" placeholder="请输入实用面积" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="buildingName">
|
||||
<el-input textarea v-model="form.buildingName" placeholder="请输入备注" />
|
||||
</el-form-item>
|
||||
<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 formRef = ref();
|
||||
const form = ref({
|
||||
buildingID: '',
|
||||
unit: '',
|
||||
floor: '',
|
||||
buildingName: '', // 房间号
|
||||
buildingArea: '', //建筑面积
|
||||
internalFloorArea: '', //套内面积
|
||||
CommonArea: '', // 公摊面积
|
||||
Housetype: '', // 房屋户型
|
||||
ParkingSpaceNumber: '', // 车位号
|
||||
storeroom: '' // 储藏室
|
||||
});
|
||||
const housetype = ref([]);
|
||||
const rules = ref({
|
||||
buildingID: [{ required: true, message: '请输入楼栋', trigger: 'blur' }],
|
||||
unit: [{ required: true, message: '请选择单元', trigger: 'blur' }],
|
||||
floor: [{ required: true, message: '请选择楼层', trigger: 'blur' }],
|
||||
buildingName: [{ required: true, message: '请输入房间号', trigger: 'blur' }],
|
||||
buildingArea: [{ required: true, message: '请输入建筑面积', trigger: 'blur' }],
|
||||
internalFloorArea: [{ required: true, message: '请输入套内面积', trigger: 'blur' }],
|
||||
CommonArea: [{ required: true, message: '请输入公摊面积', trigger: 'blur' }]
|
||||
});
|
||||
|
||||
// 楼栋
|
||||
const building = ref([
|
||||
{
|
||||
id: '1',
|
||||
name: '1号楼'
|
||||
}
|
||||
]);
|
||||
const units = ref([
|
||||
{
|
||||
no: '1',
|
||||
name: '1单元'
|
||||
},
|
||||
{
|
||||
no: '2',
|
||||
name: '2单元'
|
||||
}
|
||||
]);
|
||||
const floors = ref([
|
||||
{
|
||||
no: '1',
|
||||
name: '1层'
|
||||
},
|
||||
{
|
||||
no: '2',
|
||||
name: '2层'
|
||||
}
|
||||
]);
|
||||
|
||||
const submitForm = () => {
|
||||
formRef.value?.validate(async (valid: boolean) => {
|
||||
if (valid) {
|
||||
console.log(form.value);
|
||||
}
|
||||
});
|
||||
};
|
||||
const cancelForm = () => {
|
||||
console.log('取消');
|
||||
};
|
||||
</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;
|
||||
}
|
||||
|
||||
.addBuildingFormBody {
|
||||
.formBody {
|
||||
width: 550px;
|
||||
margin: 0 auto;
|
||||
|
||||
.el-form-item__content,
|
||||
.el-select,
|
||||
.el-input {
|
||||
width: 440px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.el-form-item {
|
||||
margin-bottom: 20px;
|
||||
align-items: center;
|
||||
}
|
||||
.unitBox {
|
||||
.el-input {
|
||||
width: 440px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
.el-button {
|
||||
width: 80px;
|
||||
height: 35px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.houseTypebox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.el-input {
|
||||
width: 100px;
|
||||
margin-right: 0px;
|
||||
}
|
||||
span {
|
||||
margin: 0 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
98
src/views/system/storeroom/index.vue
Normal file
98
src/views/system/storeroom/index.vue
Normal 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>
|
||||
Reference in New Issue
Block a user