|
|
|
|
@ -1,87 +1,132 @@
|
|
|
|
|
<template>
|
|
|
|
|
<!-- 根元素，设置为 flex 布局，用于包裹页面的主要内容区域 -->
|
|
|
|
|
<div style="display: flex;">
|
|
|
|
|
<!-- 左侧区域，背景颜色为白色，flex 占比为 2，右边距 10px，内边距 10px -->
|
|
|
|
|
<div class="bg-white" style="flex:2;margin-right: 10px;padding: 10px;">
|
|
|
|
|
<!-- 可滚动区域，高度为 560px，上边距 10px，用于包裹树状结构 -->
|
|
|
|
|
<el-scrollbar height="560px" style="margin-top: 10px;">
|
|
|
|
|
<!-- Element Plus 的树状组件 -->
|
|
|
|
|
<el-tree
|
|
|
|
|
ref="treeRef"
|
|
|
|
|
:data="buildTree"
|
|
|
|
|
:props="defaultProps"
|
|
|
|
|
:default-expand-all="true"
|
|
|
|
|
show-checkbox
|
|
|
|
|
check-strictly
|
|
|
|
|
@check="handleCheck"
|
|
|
|
|
<!-- 为树状组件添加引用，方便在 JavaScript 中访问树组件实例 -->
|
|
|
|
|
ref="treeRef"
|
|
|
|
|
<!-- 绑定树状结构的数据，buildTree 是存储树数据的响应式变量 -->
|
|
|
|
|
:data="buildTree"
|
|
|
|
|
<!-- 定义树状结构的属性映射，children 对应子节点数组属性名，label 对应节点显示名称属性名 -->
|
|
|
|
|
:props="defaultProps"
|
|
|
|
|
<!-- 设置默认展开所有节点 -->
|
|
|
|
|
:default-expand-all="true"
|
|
|
|
|
<!-- 显示复选框，让用户可以选择节点 -->
|
|
|
|
|
show-checkbox
|
|
|
|
|
<!-- 开启严格的父子节点选中逻辑，即父子节点选中状态互不影响 -->
|
|
|
|
|
check-strictly
|
|
|
|
|
<!-- 监听复选框的点击事件，当复选框状态改变时调用 handleCheck 方法 -->
|
|
|
|
|
@check="handleCheck"
|
|
|
|
|
/>
|
|
|
|
|
</el-scrollbar>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 右侧区域，类名为 table-box，flex 占比为 8，用于放置表格和相关操作元素 -->
|
|
|
|
|
<div class="table-box" style="flex: 8">
|
|
|
|
|
<!-- 自定义的表格组件 ProTable -->
|
|
|
|
|
<ProTable
|
|
|
|
|
ref="proTable"
|
|
|
|
|
title="用户列表"
|
|
|
|
|
:columns="columns"
|
|
|
|
|
:requestApi="getTableList"
|
|
|
|
|
:initParam="initParam"
|
|
|
|
|
:dataCallback="dataCallback"
|
|
|
|
|
<!-- 为表格组件添加引用，方便在 JavaScript 中访问表格组件实例 -->
|
|
|
|
|
ref="proTable"
|
|
|
|
|
<!-- 设置表格的标题为“用户列表” -->
|
|
|
|
|
title="用户列表"
|
|
|
|
|
<!-- 绑定表格的列配置信息，columns 是一个包含列属性的数组 -->
|
|
|
|
|
:columns="columns"
|
|
|
|
|
<!-- 绑定获取表格数据的 API 函数，getTableList 用于发起数据请求 -->
|
|
|
|
|
:requestApi="getTableList"
|
|
|
|
|
<!-- 绑定初始的请求参数对象，initParam 是一个响应式对象 -->
|
|
|
|
|
:initParam="initParam"
|
|
|
|
|
<!-- 绑定数据处理回调函数，dataCallback 用于对从 API 获取的数据进行处理 -->
|
|
|
|
|
:dataCallback="dataCallback"
|
|
|
|
|
>
|
|
|
|
|
<!-- 表格 header 按钮 -->
|
|
|
|
|
<template #tableHeader>
|
|
|
|
|
<el-button type="primary" :icon="Plus" @click="openDrawer('node','新增')">
|
|
|
|
|
<span>新增节点</span>
|
|
|
|
|
</el-button>
|
|
|
|
|
<el-button type="warning" :icon="EditPen" @click="openDrawer('node','编辑')">
|
|
|
|
|
<span>编辑节点</span>
|
|
|
|
|
</el-button>
|
|
|
|
|
<el-button type="danger" :icon="Delete" @click="deleteTypeData">
|
|
|
|
|
<span>删除节点</span>
|
|
|
|
|
</el-button>
|
|
|
|
|
</template>
|
|
|
|
|
<!-- 表格头部按钮的插槽，用于自定义表格头部的按钮 -->
|
|
|
|
|
<template #tableHeader>
|
|
|
|
|
<!-- 新增节点按钮，按钮类型为主要按钮，绑定 Plus 图标，点击时调用 openDrawer 方法，传递类型为“node”和操作名称为“新增” -->
|
|
|
|
|
<el-button type="primary" :icon="Plus" @click="openDrawer('node','新增')">
|
|
|
|
|
<span>新增节点</span>
|
|
|
|
|
</el-button>
|
|
|
|
|
<!-- 编辑节点按钮，按钮类型为警告按钮，绑定 EditPen 图标，点击时调用 openDrawer 方法，传递类型为“node”和操作名称为“编辑” -->
|
|
|
|
|
<el-button type="warning" :icon="EditPen" @click="openDrawer('node','编辑')">
|
|
|
|
|
<span>编辑节点</span>
|
|
|
|
|
</el-button>
|
|
|
|
|
<!-- 删除节点按钮，按钮类型为危险按钮，绑定 Delete 图标，点击时调用 deleteTypeData 方法 -->
|
|
|
|
|
<el-button type="danger" :icon="Delete" @click="deleteTypeData">
|
|
|
|
|
<span>删除节点</span>
|
|
|
|
|
</el-button>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<!-- 表格操作 -->
|
|
|
|
|
<template #operation="scope">
|
|
|
|
|
<el-button
|
|
|
|
|
size="small"
|
|
|
|
|
link
|
|
|
|
|
:icon="View"
|
|
|
|
|
@click="openDrawer('bed','查看',scope)"
|
|
|
|
|
>
|
|
|
|
|
查看
|
|
|
|
|
</el-button>
|
|
|
|
|
<el-button
|
|
|
|
|
size="small"
|
|
|
|
|
link
|
|
|
|
|
:icon="EditPen"
|
|
|
|
|
@click="openDrawer('bed','编辑',scope)"
|
|
|
|
|
>
|
|
|
|
|
编辑
|
|
|
|
|
</el-button>
|
|
|
|
|
<el-popconfirm
|
|
|
|
|
title="Are you sure to delete this?"
|
|
|
|
|
@confirm="deleteBedData(scope)"
|
|
|
|
|
confirm-button-type="danger"
|
|
|
|
|
>
|
|
|
|
|
<template #reference>
|
|
|
|
|
<el-button size="small" link :icon="Delete">删除</el-button>
|
|
|
|
|
</template>
|
|
|
|
|
</el-popconfirm>
|
|
|
|
|
<!-- 表格操作列的插槽，scope 包含当前行的数据等信息，用于自定义表格的操作按钮 -->
|
|
|
|
|
<template #operation="scope">
|
|
|
|
|
<!-- 查看按钮，按钮尺寸为小，为链接样式，绑定 View 图标，点击时调用 openDrawer 方法，传递类型为“bed”、操作名称为“查看”以及当前行数据 scope -->
|
|
|
|
|
<el-button
|
|
|
|
|
size="small"
|
|
|
|
|
link
|
|
|
|
|
:icon="View"
|
|
|
|
|
@click="openDrawer('bed','查看',scope)"
|
|
|
|
|
>
|
|
|
|
|
查看
|
|
|
|
|
</el-button>
|
|
|
|
|
<!-- 编辑按钮，按钮尺寸为小，为链接样式，绑定 EditPen 图标，点击时调用 openDrawer 方法，传递类型为“bed”、操作名称为“编辑”以及当前行数据 scope -->
|
|
|
|
|
<el-button
|
|
|
|
|
size="small"
|
|
|
|
|
link
|
|
|
|
|
:icon="EditPen"
|
|
|
|
|
@click="openDrawer('bed','编辑',scope)"
|
|
|
|
|
>
|
|
|
|
|
编辑
|
|
|
|
|
</el-button>
|
|
|
|
|
<!-- 弹出确认删除的对话框组件 -->
|
|
|
|
|
<el-popconfirm
|
|
|
|
|
<!-- 设置对话框的提示标题 -->
|
|
|
|
|
title="Are you sure to delete this?"
|
|
|
|
|
<!-- 确认删除时调用 deleteBedData 方法，并传递当前行数据 scope -->
|
|
|
|
|
@confirm="deleteBedData(scope)"
|
|
|
|
|
<!-- 设置确认按钮的类型为危险按钮 -->
|
|
|
|
|
confirm-button-type="danger"
|
|
|
|
|
>
|
|
|
|
|
<!-- 对话框的触发元素插槽，这里是一个删除按钮，按钮尺寸为小，为链接样式，绑定 Delete 图标 -->
|
|
|
|
|
<template #reference>
|
|
|
|
|
<el-button size="small" link :icon="Delete">删除</el-button>
|
|
|
|
|
</template>
|
|
|
|
|
</el-popconfirm>
|
|
|
|
|
</template>
|
|
|
|
|
</ProTable>
|
|
|
|
|
<!-- 引入自定义的 buildingDialog 组件，监听 operateNode 事件，当事件触发时调用 operateNode 方法，同时为组件添加引用 buildingDialogRef -->
|
|
|
|
|
<buildDialog @operateNode="operateNode" ref="buildingDialogRef" />
|
|
|
|
|
<!-- 引入自定义的 floorDialog 组件，监听 operateNode 事件，当事件触发时调用 operateNode 方法，同时为组件添加引用 floorDialogRef -->
|
|
|
|
|
<floorDialog @operateNode="operateNode" ref="floorDialogRef" />
|
|
|
|
|
<!-- 引入自定义的 roomDialog 组件，监听 operateNode 事件，当事件触发时调用 operateNode 方法，同时为组件添加引用 roomDialogRef -->
|
|
|
|
|
<roomDialog @operateNode="operateNode" ref="roomDialogRef" />
|
|
|
|
|
<!-- 引入自定义的 bedDialog 组件，监听 operateNode 事件，当事件触发时调用 operateNode 方法，同时为组件添加引用 bedDialogRef -->
|
|
|
|
|
<bedDialog @operateNode="operateNode" ref="bedDialogRef" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script setup lang="ts" name="useProTable">
|
|
|
|
|
// 从 Vue 中导入 ref 函数，用于创建响应式引用
|
|
|
|
|
// 导入 reactive 函数，用于创建响应式对象
|
|
|
|
|
// 导入 onMounted 生命周期钩子函数，在组件挂载后执行回调
|
|
|
|
|
import { ref, reactive, onMounted } from "vue";
|
|
|
|
|
// 从 element-plus 中导入 ElMessage，用于显示消息提示
|
|
|
|
|
import { ElMessage } from "element-plus";
|
|
|
|
|
// 导入自定义的 buildingDialog 组件
|
|
|
|
|
import buildDialog from "./dialog/build.vue";
|
|
|
|
|
// 导入自定义的 floorDialog 组件
|
|
|
|
|
import floorDialog from "./dialog/floor.vue";
|
|
|
|
|
// 导入自定义的 roomDialog 组件
|
|
|
|
|
import roomDialog from "./dialog/room.vue";
|
|
|
|
|
// 导入自定义的 bedDialog 组件
|
|
|
|
|
import bedDialog from "./dialog/bed.vue";
|
|
|
|
|
// 导入表格列配置的接口类型 ColumnProps
|
|
|
|
|
import { ColumnProps } from "@/components/ProTable/interface";
|
|
|
|
|
// 导入自定义的 ProTable 组件
|
|
|
|
|
import ProTable from "@/components/ProTable/index.vue";
|
|
|
|
|
// 导入 Element Plus 的图标组件 Delete、EditPen、View、Plus
|
|
|
|
|
import { Delete, EditPen, View, Plus } from "@element-plus/icons-vue";
|
|
|
|
|
// 导入自定义的 API 函数，用于处理与建筑相关的业务逻辑，如添加、删除、编辑等操作
|
|
|
|
|
import {
|
|
|
|
|
addBed,
|
|
|
|
|
addBuilding, addFloor, addRoom,
|
|
|
|
|
@ -93,40 +138,49 @@ import {
|
|
|
|
|
pageBedByKey
|
|
|
|
|
} from "@/apis/build";
|
|
|
|
|
|
|
|
|
|
// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
|
|
|
|
|
// 创建 ProTable 组件的引用
|
|
|
|
|
const proTable = ref();
|
|
|
|
|
// 创建响应式的初始请求参数对象
|
|
|
|
|
const initParam = reactive({});
|
|
|
|
|
|
|
|
|
|
// 创建树状组件的引用
|
|
|
|
|
const treeRef = ref<any>();
|
|
|
|
|
// 创建响应式对象，用于存储当前选中的树节点信息
|
|
|
|
|
const ICheckedNode = ref<any>({});
|
|
|
|
|
// 创建响应式对象，用于存储楼栋树的数据
|
|
|
|
|
const buildTree = ref<any>([]);
|
|
|
|
|
// 定义树状结构的属性映射对象
|
|
|
|
|
const defaultProps = {
|
|
|
|
|
children: "childrenList",
|
|
|
|
|
label: "name"
|
|
|
|
|
};
|
|
|
|
|
// 复选框被点击
|
|
|
|
|
|
|
|
|
|
// 复选框点击事件的处理函数
|
|
|
|
|
const handleCheck = (checkedNode: any, checkedNodeDetail: any) => {
|
|
|
|
|
if (checkedNodeDetail.checkedNodes.length > 0) {
|
|
|
|
|
// 如果有节点被选中，更新当前选中节点信息
|
|
|
|
|
ICheckedNode.value = checkedNode;
|
|
|
|
|
} else {
|
|
|
|
|
// 如果没有节点被选中，设置默认的选中节点信息
|
|
|
|
|
ICheckedNode.value = { id: -1, level: -1 };
|
|
|
|
|
}
|
|
|
|
|
// 重新获取表格数据，初始页码为 1，每页数量为 10
|
|
|
|
|
getTableListHandle(1, 10);
|
|
|
|
|
// 取消选中其他节点
|
|
|
|
|
// 遍历已选中的节点，取消与当前选中节点不相关的节点的选中状态
|
|
|
|
|
treeRef.value.getCheckedNodes().forEach((node: any) => {
|
|
|
|
|
if (node.onlyMark !== ICheckedNode.value.onlyMark) {
|
|
|
|
|
if (node.onlyMark!== ICheckedNode.value.onlyMark) {
|
|
|
|
|
treeRef.value.setChecked(node, false);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 页面渲染时
|
|
|
|
|
// 组件挂载完成后的生命周期钩子函数
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
// 初始获取楼栋树数据
|
|
|
|
|
getBuildTreeHandle();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 list && total && pageNum && pageSize 这些字段，那么你可以在这里进行处理成这些字段
|
|
|
|
|
// 或者直接去 hooks/useTable.ts 文件中把字段改为你后端对应的就行
|
|
|
|
|
// 数据处理回调函数，用于将从 API 获取的数据处理成符合表格展示要求的格式
|
|
|
|
|
const dataCallback = (data: any) => {
|
|
|
|
|
return {
|
|
|
|
|
list: data.list,
|
|
|
|
|
@ -136,18 +190,22 @@ const dataCallback = (data: any) => {
|
|
|
|
|
};
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 如果你想在请求之前对当前请求参数做一些操作，可以自定义如下函数：params 为当前所有的请求参数（包括分页），最后返回请求列表接口
|
|
|
|
|
// 默认不做操作就直接在 ProTable 组件上绑定 :requestApi="getUserList"
|
|
|
|
|
// 获取表格数据的函数，在请求数据前对请求参数进行处理
|
|
|
|
|
const getTableList = (params: any) => {
|
|
|
|
|
// 添加搜索字段到请求参数中
|
|
|
|
|
params = addSearchField(params);
|
|
|
|
|
// 深拷贝请求参数，防止原参数被意外修改
|
|
|
|
|
let newParams = JSON.parse(JSON.stringify(params));
|
|
|
|
|
// 调用 pageBedByKey API 函数获取表格数据
|
|
|
|
|
return pageBedByKey(newParams);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 重新获取表格数据
|
|
|
|
|
// 重新获取表格数据的函数，接收页码和每页数量作为参数
|
|
|
|
|
const getTableListHandle = (pageNum: number, pageSize: number) => {
|
|
|
|
|
let params: any = {};
|
|
|
|
|
// 添加搜索字段到请求参数中
|
|
|
|
|
params = addSearchField(params);
|
|
|
|
|
// 调用 ProTable 组件的 getTableList 方法获取表格数据，传递处理后的参数
|
|
|
|
|
proTable.value.getTableList({
|
|
|
|
|
pageNum: pageNum,
|
|
|
|
|
pageSize: pageSize,
|
|
|
|
|
@ -158,31 +216,39 @@ const getTableListHandle = (pageNum: number, pageSize: number) => {
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 重新获取楼栋树
|
|
|
|
|
// 重新获取楼栋树数据的函数
|
|
|
|
|
const getBuildTreeHandle = async () => {
|
|
|
|
|
// 重置当前选中节点信息
|
|
|
|
|
ICheckedNode.value = { id: -1, level: -1 };
|
|
|
|
|
// 调用 getNoBedTree API 函数获取楼栋树数据
|
|
|
|
|
const res: any = await getNoBedTree();
|
|
|
|
|
// 更新楼栋树数据
|
|
|
|
|
buildTree.value = res.data;
|
|
|
|
|
// 重新获取表格数据，初始页码为 1，每页数量为 10
|
|
|
|
|
getTableListHandle(1, 10);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 新增搜索字段
|
|
|
|
|
// 添加搜索字段到请求参数中的函数，根据当前选中的树节点信息添加过滤条件
|
|
|
|
|
const addSearchField = (params: any) => {
|
|
|
|
|
if (ICheckedNode.value.id !== -1) {
|
|
|
|
|
if (ICheckedNode.value.id!== -1) {
|
|
|
|
|
if (ICheckedNode.value.level === 1) {
|
|
|
|
|
// 如果选中的是楼栋节点，设置 buildingId 参数为选中节点的 id，清空 floorId 和 roomId 参数
|
|
|
|
|
params.buildId = ICheckedNode.value.id;
|
|
|
|
|
params.floorId = null;
|
|
|
|
|
params.roomId = null;
|
|
|
|
|
} else if (ICheckedNode.value.level === 2) {
|
|
|
|
|
// 如果选中的是楼层节点，设置 floorId 参数为选中节点的 id，清空 buildingId 和 roomId 参数
|
|
|
|
|
params.buildId = null;
|
|
|
|
|
params.floorId = ICheckedNode.value.id;
|
|
|
|
|
params.roomId = null;
|
|
|
|
|
} else if (ICheckedNode.value.level === 3) {
|
|
|
|
|
// 如果选中的是房间节点，设置 roomId 参数为选中节点的 id，清空 buildingId 和 floorId 参数
|
|
|
|
|
params.buildId = null;
|
|
|
|
|
params.floorId = null;
|
|
|
|
|
params.roomId = ICheckedNode.value.id;
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
// 如果没有选中节点，清空 buildingId、floorId 和 roomId 参数
|
|
|
|
|
params.buildId = null;
|
|
|
|
|
params.floorId = null;
|
|
|
|
|
params.roomId = null;
|
|
|
|
|
@ -190,61 +256,73 @@ const addSearchField = (params: any) => {
|
|
|
|
|
return params;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 删除节点
|
|
|
|
|
// 删除节点的函数
|
|
|
|
|
const deleteTypeData = async () => {
|
|
|
|
|
if ((Object.keys(ICheckedNode.value).length === 0 || ICheckedNode.value.id === -1)) {
|
|
|
|
|
// 如果没有选中节点，显示警告消息提示用户选择节点
|
|
|
|
|
ElMessage.warning("请选择节点");
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
// 调用 deleteNode API 函数删除节点，传递节点 id 和节点类型（楼栋、楼层或房间）
|
|
|
|
|
const res: any = await deleteNode({
|
|
|
|
|
id: ICheckedNode.value.id,
|
|
|
|
|
mark: ICheckedNode.value.level === 1 ? "楼栋" : ICheckedNode.value.level === 2 ? "楼层" : ICheckedNode.value.level === 3 ? "房间" : ""
|
|
|
|
|
mark: ICheckedNode.value.level === 1? "楼栋" : ICheckedNode.value.level === 2? "楼层" : ICheckedNode.value.level === 3? "房间" : ""
|
|
|
|
|
});
|
|
|
|
|
if (res.code === 200) {
|
|
|
|
|
// 如果删除成功，显示成功消息，并重新获取楼栋树数据
|
|
|
|
|
ElMessage.success(res.msg);
|
|
|
|
|
await getBuildTreeHandle();
|
|
|
|
|
} else {
|
|
|
|
|
// 如果删除失败，显示错误消息
|
|
|
|
|
ElMessage.error(res.msg);
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 删除床位
|
|
|
|
|
// 删除床位的函数
|
|
|
|
|
const deleteBedData = async (params: any) => {
|
|
|
|
|
// 调用 deleteBed API 函数删除床位，传递床位 id
|
|
|
|
|
const res: any = await deleteBed({
|
|
|
|
|
bedId: params.row.id
|
|
|
|
|
});
|
|
|
|
|
if (res.code === 200) {
|
|
|
|
|
// 如果删除成功，显示成功消息，并重新获取表格数据
|
|
|
|
|
ElMessage.success(res.msg);
|
|
|
|
|
proTable.value.getTableList();
|
|
|
|
|
} else {
|
|
|
|
|
// 如果删除失败，显示错误消息
|
|
|
|
|
ElMessage.error(res.msg);
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 打开服务 drawer(新增、查看、编辑)
|
|
|
|
|
// 创建 buildingDialog、floorDialog、roomDialog、bedDialog 组件的引用
|
|
|
|
|
const buildingDialogRef = ref();
|
|
|
|
|
const floorDialogRef = ref();
|
|
|
|
|
const roomDialogRef = ref();
|
|
|
|
|
const bedDialogRef = ref();
|
|
|
|
|
|
|
|
|
|
// 打开对话框的函数，根据不同的类型和操作，传递相应参数给对应的对话框组件
|
|
|
|
|
const openDrawer = (type: string, title: string, rowData: any = {}) => {
|
|
|
|
|
if (type === "node") {
|
|
|
|
|
// 编辑时必须选择节点
|
|
|
|
|
// 如果是编辑操作且没有选中节点，显示警告消息提示用户选择节点
|
|
|
|
|
if (title === "编辑" && (Object.keys(ICheckedNode.value).length === 0 || ICheckedNode.value.id === -1)) {
|
|
|
|
|
ElMessage.warning("请选择节点");
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
// 操作节点
|
|
|
|
|
// 如果是新增操作
|
|
|
|
|
if (title === "新增") {
|
|
|
|
|
const parentNode = treeRef.value.getCheckedNodes()[0];
|
|
|
|
|
if (ICheckedNode.value.level === -1) {// 楼栋
|
|
|
|
|
if (ICheckedNode.value.level === -1) {
|
|
|
|
|
// 如果没有选中节点，即要新增楼栋
|
|
|
|
|
const params = {
|
|
|
|
|
title: title + "楼栋",
|
|
|
|
|
rowData: {},
|
|
|
|
|
isView: false,
|
|
|
|
|
api: addBuilding
|
|
|
|
|
};
|
|
|
|
|
// 调用 buildingDialog 组件的 buildingAcceptParams 方法传递参数并打开对话框
|
|
|
|
|
buildingDialogRef.value.buildingAcceptParams(params);
|
|
|
|
|
} else if (ICheckedNode.value.level === 1) {// 楼层
|
|
|
|
|
} else if (ICheckedNode.value.level === 1) {
|
|
|
|
|
// 如果选中的是楼栋节点，即要新增楼层
|
|
|
|
|
const params = {
|
|
|
|
|
title: title + "楼层",
|
|
|
|
|
rowData: {
|
|
|
|
|
@ -254,8 +332,10 @@ const openDrawer = (type: string, title: string, rowData: any = {}) => {
|
|
|
|
|
isView: false,
|
|
|
|
|
api: addFloor
|
|
|
|
|
};
|
|
|
|
|
// 调用 floorDialog 组件的 floorAcceptParams 方法传递参数并打开对话框
|
|
|
|
|
floorDialogRef.value.floorAcceptParams(params);
|
|
|
|
|
} else if (ICheckedNode.value.level === 2) {// 房间
|
|
|
|
|
} else if (ICheckedNode.value.level === 2) {
|
|
|
|
|
// 如果选中的是楼层节点，即要新增房间
|
|
|
|
|
const params = {
|
|
|
|
|
title: title + "房间",
|
|
|
|
|
rowData: {
|
|
|
|
|
@ -265,99 +345,10 @@ const openDrawer = (type: string, title: string, rowData: any = {}) => {
|
|
|
|
|
isView: false,
|
|
|
|
|
api: addRoom
|
|
|
|
|
};
|
|
|
|
|
// 调用 roomDialog 组件的 roomAcceptParams 方法传递参数并打开对话框
|
|
|
|
|
roomDialogRef.value.roomAcceptParams(params);
|
|
|
|
|
} else if (ICheckedNode.value.level === 3) {// 床位
|
|
|
|
|
} else if (ICheckedNode.value.level === 3) {
|
|
|
|
|
// 如果选中的是房间节点，即要新增床位
|
|
|
|
|
const params = {
|
|
|
|
|
title: title + "床位",
|
|
|
|
|
rowData: {
|
|
|
|
|
roomId: parentNode.roomId,
|
|
|
|
|
bedLimit: parentNode.bedLimit
|
|
|
|
|
},
|
|
|
|
|
isView: false,
|
|
|
|
|
api: addBed
|
|
|
|
|
};
|
|
|
|
|
bedDialogRef.value.bedAcceptParams(params);
|
|
|
|
|
}
|
|
|
|
|
} else if (title === "编辑") {
|
|
|
|
|
if (ICheckedNode.value.level === 1) {// 楼栋
|
|
|
|
|
const params = {
|
|
|
|
|
title: title + "楼栋",
|
|
|
|
|
rowData: { ...ICheckedNode.value },
|
|
|
|
|
isView: false,
|
|
|
|
|
api: editBuilding
|
|
|
|
|
};
|
|
|
|
|
buildingDialogRef.value.buildingAcceptParams(params);
|
|
|
|
|
} else if (ICheckedNode.value.level === 2) {// 楼层
|
|
|
|
|
const params = {
|
|
|
|
|
title: title + "楼层",
|
|
|
|
|
rowData: { ...ICheckedNode.value },
|
|
|
|
|
isView: false,
|
|
|
|
|
api: editFloor
|
|
|
|
|
};
|
|
|
|
|
floorDialogRef.value.floorAcceptParams(params);
|
|
|
|
|
} else if (ICheckedNode.value.level === 3) {// 房间
|
|
|
|
|
const params = {
|
|
|
|
|
title: title + "房间",
|
|
|
|
|
rowData: { ...ICheckedNode.value },
|
|
|
|
|
isView: false,
|
|
|
|
|
api: editRoom
|
|
|
|
|
};
|
|
|
|
|
roomDialogRef.value.roomAcceptParams(params);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
} else if (type === "bed") {// 床位
|
|
|
|
|
const params = {
|
|
|
|
|
title,
|
|
|
|
|
rowData: { ...rowData.row },
|
|
|
|
|
isView: title === "查看",
|
|
|
|
|
api: title === "新增" ? addBed : title === "编辑" ? editBed : "",
|
|
|
|
|
};
|
|
|
|
|
bedDialogRef.value.bedAcceptParams(params);
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 操作完节点后调用
|
|
|
|
|
const operateNode = () => {
|
|
|
|
|
getBuildTreeHandle();
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 表格配置项
|
|
|
|
|
const columns: ColumnProps<any>[] = [
|
|
|
|
|
{ prop: "rank", label: "序号", width: 55 },
|
|
|
|
|
{ prop: "name", label: "床位名称" },
|
|
|
|
|
{
|
|
|
|
|
enum: IBedFlagList,
|
|
|
|
|
prop: "bedFlag",
|
|
|
|
|
label: "床位状态",
|
|
|
|
|
search: { el: "select", props: { filterable: false } }
|
|
|
|
|
},
|
|
|
|
|
{ prop: "operation", label: "操作", width: 220 }
|
|
|
|
|
];
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
:deep(.el-radio__input) {
|
|
|
|
|
display: none !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:deep(.el-radio__label) {
|
|
|
|
|
font-size: 1em;
|
|
|
|
|
width: 248px;
|
|
|
|
|
padding: 5px 0 5px 10px;
|
|
|
|
|
transition: all 0.2s;
|
|
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
|
background-color: #eeeeee;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.el-radio-group {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
|
|
|
|
|
.el-radio {
|
|
|
|
|
flex: 1;
|
|
|
|
|
margin-right: 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
rowData:
|
|
|
|
|
|
