/** * 房间树组件 * 用于展示房屋的楼层、单元和房间结构 * @param {Object} vc - Vue 组件实例 */ (function (vc) { /** * 默认页码 * @type {number} */ let DEFAULT_PAGE = 1; /** * 默认每页行数 * @type {number} */ let DEFAULT_ROW = 10; /** * 扩展 Vue 组件 */ vc.extends({ /** * 组件数据 */ data: { /** * 房间树组件信息 * @type {Object} */ roomTreeDivInfo: { /** * 单元列表 * @type {Array} */ units: [], /** * 调用名称 * @type {string} */ callName: '' } }, /** * 初始化方法 */ _initMethod: function () { }, /** * 初始化事件 */ _initEvent: function () { /** * 监听初始化房间树事件 * @param {Object} _param - 初始化参数 */ vc.on('roomTreeDiv', 'initRoomTreeDiv', function (_param) { // 设置调用名称 vc.component.roomTreeDivInfo.callName = _param.callName; // 加载楼层和单元 vc.component._loadRoomTreeDivFloorAndUnits(); }); }, /** * 组件方法 */ methods: { /** * 加载楼层和单元数据 */ _loadRoomTreeDivFloorAndUnits: function () { /** * 请求参数 * @type {Object} */ let param = { params: { // 获取当前社区ID communityId: vc.getCurrentCommunity().communityId } }; // 验证社区ID是否存在 let communityId = vc.getCurrentCommunity().communityId; console.log('当前社区ID:', communityId); if (!communityId) { console.error('未获取到有效的社区ID'); vc.component.roomTreeDivInfo.units = []; vc.component._initJsTreeRoomTreeDivFloorUnit(); return; } // 发送 GET 请求获取单元数据 vc.http.apiGet('/unit.queryUnits', param, /** * 请求成功回调 * @param {string} json - 返回的 JSON 字符串 */ function (json) { console.log('单元API返回原始数据:', json); let unitsData = []; if (json && json.trim() !== '') { try { // 解析 JSON 数据 let _unitInfo = JSON.parse(json); console.log('解析后的单元数据:', _unitInfo); // 增强数据处理，支持多种响应格式 if (_unitInfo && _unitInfo.code == 0) { // 标准组件API返回格式 if (_unitInfo.data && Array.isArray(_unitInfo.data)) { unitsData = _unitInfo.data; console.log('使用标准格式.data字段数组，共', unitsData.length, '条单元数据'); } else if (_unitInfo.units && Array.isArray(_unitInfo.units)) { unitsData = _unitInfo.units; console.log('使用标准格式.units字段数组，共', unitsData.length, '条单元数据'); } } else if (_unitInfo && Array.isArray(_unitInfo)) { // 直接数组格式 unitsData = _unitInfo; console.log('使用直接数组格式，共', unitsData.length, '条单元数据'); } else if (_unitInfo && typeof _unitInfo === 'object') { // 单对象格式 unitsData = [_unitInfo]; console.log('使用单对象格式，共 1 条单元数据'); } else { console.warn('单元数据格式不符合预期，无法提取数组:', _unitInfo); } } catch (e) { console.error('解析单元数据时发生错误:', e); console.error('原始响应数据:', json); } } else { console.warn('单元API返回空数据'); } console.log('最终处理后的单元数据:', unitsData); vc.component.roomTreeDivInfo.units = unitsData; // 初始化树结构 vc.component._initJsTreeRoomTreeDivFloorUnit(); }, /** * 请求失败回调 */ function (errInfo, error) { console.error('获取单元数据失败:', errInfo, error); // 重置 units 为空数组 vc.component.roomTreeDivInfo.units = []; // 初始化树结构 vc.component._initJsTreeRoomTreeDivFloorUnit(); }); }, /** * 初始化 JSTree 树结构 */ _initJsTreeRoomTreeDivFloorUnit: function () { // 构建树数据 let _data = vc.component._doJsTreeRoomTreeDivData(); // 销毁旧的树实例 $.jstree.destroy() // 初始化新的树实例 $("#jstree_floorUnitRoomDiv").jstree({ "checkbox": { "keep_selected_style": false }, 'state': { // 一些初始化状态 "opened": true, }, 'core': { "check_callback": true, 'data': _data } }); /** * 树初始化完成事件 * @param {Event} e - 事件对象 * @param {Object} data - 树数据对象 */ $("#jstree_floorUnitRoomDiv").on("ready.jstree", function (e, data) { // 获取调用名称 let _callName = vc.component.roomTreeDivInfo.callName; // 如果是欠费可调用，直接返回 if (_callName == 'oweFeeCallable') { return; } // 默认选中第一个单元，添加安全检查避免出错 if (_data && _data.length > 0 && _data[0].children && _data[0].children.length > 0) { $('#jstree_floorUnitRoomDiv').jstree('select_node', _data[0].children[0].id /* , true */); } else { console.log('没有可用的单元数据，无法默认选中'); } }); /** * 监听树节点变化事件 * @param {Event} e - 事件对象 * @param {Object} data - 节点数据对象 */ $('#jstree_floorUnitRoomDiv').on("changed.jstree", function (e, data) { // 如果是模型初始化或就绪事件，直接返回 if (data.action == 'model' || data.action == 'ready') { // 默认合并 //$("#jstree_floorUnit").jstree("close_all"); return; } // 获取选中的节点ID let _selected = data.selected[0]; // 如果是楼层节点，直接返回 if (_selected.startsWith('f_')) { return; } // 打印节点结构，用于调试 console.log('Node structure:', data.node); /** * 处理单元节点点击事件 * 当点击单元节点时，加载该单元下的房间列表 */ if (_selected.startsWith('u_')) { // 从节点ID中提取unitId // 节点ID格式：u_{unitId}，例如：u_123 let unitId = _selected.replace('u_', ''); console.log('Unit ID:', unitId); // 如果提取到unitId，调用加载房间列表方法 if (unitId) { vc.component._roomTreeDivLoadRoom(unitId, data); } } /** * 处理房间节点点击事件 * 当点击房间节点时，触发selectRoom事件，传递房间信息给父组件 */ if (_selected.startsWith('r_')) { // 从节点ID中提取roomId // 节点ID格式：r_{roomId}，例如：r_456 let roomId = _selected.replace('r_', ''); // 从节点text属性获取房间名称 // 房间名称格式：房间号(业主姓名)，例如：101(张三) let roomName = data.node.text; // 从节点data属性获取完整的房间信息 let roomData = data.node.data || {}; // 构建完整的房间信息对象 let roomInfo = { roomName: roomData.roomName || roomName, roomId: roomId, ownerId: roomData.ownerId || '', ownerName: roomData.ownerName || '', floorNum: roomData.floorNum || '', unitNum: roomData.unitNum || '', roomNum: roomData.roomNum || '', roomType: roomData.roomType || '', builtUpArea: roomData.builtUpArea || 0 }; // 打印房间信息，用于调试 console.log('Selected room info:', roomInfo); // 如果提取到roomId，触发selectRoom事件 if (roomId) { /** * 触发selectRoom事件，传递房间信息给父组件 * 父组件(meterWaterManage)会： * 1. 设置 conditions.objId = roomId * 2. 当objId存在时，抄表按钮(v-if="meterWaterManageInfo.conditions.objId")会显示 */ vc.emit(vc.component.roomTreeDivInfo.callName, 'selectRoom', roomInfo); } } }); /** * 监听树节点点击事件 * @param {Event} e - 事件对象 */ $('#jstree_floorUnitRoomDiv') .on('click', '.jstree-anchor', function (e) { // 切换节点展开/折叠状态 $(this).jstree(true).toggle_node(e.target); }) }, /** * 加载单元下的房间数据 * @param {string} _unitId - 单元ID * @param {Object} data - 树节点数据 */ _roomTreeDivLoadRoom: function (_unitId, data) { // 获取选中的节点 let node = data.instance.get_node(data.selected[0]); // 遍历选中节点的子节点 let childNodes = node.children; // 如果已有子节点，直接展开 if (childNodes && childNodes.length > 0) { $('#jstree_floorUnitRoomDiv').jstree('open_node', '#u_' + _unitId); return; } /** * 请求参数 * @type {Object} */ let param = { params: { page: 1, row: 1000, unitId: _unitId, communityId: vc.getCurrentCommunity().communityId } }; /** * 房间数据数组 * @type {Array} */ let _datas = []; // 发送 GET 请求获取房间数据 vc.http.apiGet('/room.queryRoomsTree', param, /** * 请求成功回调 * @param {string} json - 返回的 JSON 字符串 * @param {Object} res - 响应对象 */ function (json, res) { if (json) { // 解析 JSON 数据 let listRoomData = JSON.parse(json); // 如果有房间数据 if (listRoomData && listRoomData.rooms && Array.isArray(listRoomData.rooms)) { // 遍历房间数据 listRoomData.rooms.forEach(_room => { if (!_room) return; // 构建房间文本 let _text = _room.roomNum; // 如果有业主姓名，添加到文本中 if (_room.ownerName) { _text += ('(' + _room.ownerName + ")") } // 构建房间节点数据 let _data = { id: 'r_' + _room.roomId, text: _text, icon: "/img/room.png", data: { roomId: _room.roomId, roomName: _room.floorNum + "-" + _room.unitNum + "-" + _room.roomNum, ownerId: _room.ownerId || '', ownerName: _room.ownerName || '', floorNum: _room.floorNum || '', unitNum: _room.unitNum || '', roomNum: _room.roomNum || '', roomType: _room.roomType || '', builtUpArea: _room.builtUpArea || 0 } }; // 添加到房间数据数组 _datas.push(_data); }); // 使用 create_node 方法逐个添加节点，避免 _append_json_data 的问题 if (_datas && Array.isArray(_datas)) { _datas.forEach(function(_data) { $('#jstree_floorUnitRoomDiv').jstree('create_node', 'u_' + _unitId, _data, "last", false, false); }); } // 延迟展开节点 setTimeout(function () { $('#jstree_floorUnitRoomDiv').jstree('open_node', '#u_' + _unitId); }, 500); // 如果有房间数据，默认选中第一个房间 if (listRoomData.rooms.length > 0) { let _firstRoom = listRoomData.rooms[0]; // 构建完整的房间信息对象 let roomInfo = { roomName: _firstRoom.floorNum + "-" + _firstRoom.unitNum + "-" + _firstRoom.roomNum, roomId: _firstRoom.roomId, ownerId: _firstRoom.ownerId || '', ownerName: _firstRoom.ownerName || '', floorNum: _firstRoom.floorNum || '', unitNum: _firstRoom.unitNum || '', roomNum: _firstRoom.roomNum || '', roomType: _firstRoom.roomType || '', builtUpArea: _firstRoom.builtUpArea || 0 }; console.log('Selected room info:', roomInfo); vc.emit(vc.component.roomTreeDivInfo.callName, 'selectRoom', roomInfo); } else { // 如果没有房间数据，发送空房间信息 vc.emit(vc.component.roomTreeDivInfo.callName, 'selectRoom', { roomName: '', roomId: '', ownerId: '', ownerName: '', floorNum: '', unitNum: '', roomNum: '', roomType: '', builtUpArea: 0 }); } } } }, /** * 请求失败回调 * @param {string} errInfo - 错误信息 * @param {Object} error - 错误对象 */ function (errInfo, error) { console.log('请求失败处理'); } ); }, /** * 构建树数据 * @returns {Array} 树数据数组 */ _doJsTreeRoomTreeDivData: function () { /** * 楼层树数据 * @type {Array} */ let _mFloorTree = []; /** * 单元列表 * @type {Array} */ let _units = vc.component.roomTreeDivInfo.units || []; // 构建第一层菜单组 _units.forEach(pItem => { if (!pItem) return; /** * 是否包含楼层 * @type {boolean} */ let _includeFloor = false; // 检查是否已包含该楼层 for (let _mgIndex = 0; _mgIndex < _mFloorTree.length; _mgIndex++) { if (pItem.floorId == _mFloorTree[_mgIndex].data.floorId) { _includeFloor = true; } } // 如果不包含该楼层，添加楼层节点 if (!_includeFloor) { /** * 楼层节点数据 * @type {Object} */ let _floorItem = { id: 'f_' + pItem.floorId, text: pItem.floorNum, icon: "/img/floor.png", children: [], state: { opened: false }, data: { floorId: pItem.floorId, floorNum: pItem.floorNum } }; // 构建楼层下的单元数据 vc.component._doJsTreeRoomTreeDivMenuData(_floorItem); // 添加楼层节点到树数据 _mFloorTree.push(_floorItem); } }); // 返回树数据 return _mFloorTree; }, /** * 构建楼层下的单元数据 * @param {Object} _floorItem - 楼层节点数据 */ _doJsTreeRoomTreeDivMenuData: function (_floorItem) { /** * 单元列表 * @type {Array} */ let _units = vc.component.roomTreeDivInfo.units || []; /** * 子节点列表 * @type {Array} */ let _children = _floorItem.children || []; // 构建菜单 for (let _pIndex = 0; _pIndex < _units.length; _pIndex++) { /** * 当前单元 * @type {Object} */ let _unit = _units[_pIndex]; if (!_unit) continue; // 如果单元属于当前楼层 if (_floorItem.data && _unit.floorId == _floorItem.data.floorId) { /** * 是否包含单元 * @type {boolean} */ let _includeMenu = false; // 检查是否已包含该单元 for (let _mgIndex = 0; _mgIndex < _children.length; _mgIndex++) { if (_children[_mgIndex].data && _unit.unitId == _children[_mgIndex].data.unitId) { _includeMenu = true; } } // 如果不包含该单元，添加单元节点 if (!_includeMenu) { /** * 单元节点数据 * @type {Object} */ let _menuItem = { id: 'u_' + _unit.unitId, text: _unit.unitNum, icon: "/img/unit.png", children: [], state: { opened: true }, data: { unitId: _unit.unitId, unitNum: _unit.unitNum } }; // 添加单元节点到子节点列表 _children.push(_menuItem); } } } }, } }); })(window.vc);