/**
|
* 房间树组件
|
* 用于展示房屋的楼层、单元和房间结构
|
* @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) {
|
// 设置调用名称
|
$that.roomTreeDivInfo.callName = _param.callName;
|
// 加载楼层和单元
|
$that._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');
|
$that.roomTreeDivInfo.units = [];
|
$that._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);
|
$that.roomTreeDivInfo.units = unitsData;
|
|
// 初始化树结构
|
$that._initJsTreeRoomTreeDivFloorUnit();
|
},
|
/**
|
* 请求失败回调
|
*/
|
function (errInfo, error) {
|
console.error('获取单元数据失败:', errInfo, error);
|
// 重置 units 为空数组
|
$that.roomTreeDivInfo.units = [];
|
// 初始化树结构
|
$that._initJsTreeRoomTreeDivFloorUnit();
|
});
|
},
|
/**
|
* 初始化 JSTree 树结构
|
*/
|
_initJsTreeRoomTreeDivFloorUnit: function () {
|
// 构建树数据
|
let _data = $that._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 = $that.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) {
|
$that._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;
|
|
// 打印房间信息，用于调试
|
console.log('Room info:', {roomName, roomId});
|
|
// 如果提取到roomId，触发selectRoom事件
|
if (roomId) {
|
/**
|
* 触发selectRoom事件，传递房间信息给父组件
|
* 父组件(meterWaterManage)会：
|
* 1. 设置 conditions.objId = roomId
|
* 2. 当objId存在时，抄表按钮(v-if="meterWaterManageInfo.conditions.objId")会显示
|
*/
|
vc.emit($that.roomTreeDivInfo.callName, 'selectRoom', {
|
roomName: roomName, // 房间名称
|
roomId: roomId // 房间ID
|
});
|
}
|
}
|
});
|
/**
|
* 监听树节点点击事件
|
* @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
|
}
|
};
|
// 添加到房间数据数组
|
_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];
|
vc.emit($that.roomTreeDivInfo.callName, 'selectRoom', {
|
roomName: _firstRoom.floorNum + "-" + _firstRoom.unitNum + "-" + _firstRoom.roomNum,
|
roomId: _firstRoom.roomId
|
});
|
} else {
|
// 如果没有房间数据，发送空房间信息
|
vc.emit($that.roomTreeDivInfo.callName, 'selectRoom', {
|
roomName: '',
|
roomId: ''
|
});
|
}
|
}
|
}
|
},
|
/**
|
* 请求失败回调
|
* @param {string} errInfo - 错误信息
|
* @param {Object} error - 错误对象
|
*/
|
function (errInfo, error) {
|
console.log('请求失败处理');
|
}
|
);
|
},
|
/**
|
* 构建树数据
|
* @returns {Array} 树数据数组
|
*/
|
_doJsTreeRoomTreeDivData: function () {
|
/**
|
* 楼层树数据
|
* @type {Array}
|
*/
|
let _mFloorTree = [];
|
/**
|
* 单元列表
|
* @type {Array}
|
*/
|
let _units = $that.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].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
|
}
|
};
|
// 构建楼层下的单元数据
|
$that._doJsTreeRoomTreeDivMenuData(_floorItem);
|
// 添加楼层节点到树数据
|
_mFloorTree.push(_floorItem);
|
}
|
});
|
// 返回树数据
|
return _mFloorTree;
|
},
|
/**
|
* 构建楼层下的单元数据
|
* @param {Object} _floorItem - 楼层节点数据
|
*/
|
_doJsTreeRoomTreeDivMenuData: function (_floorItem) {
|
/**
|
* 单元列表
|
* @type {Array}
|
*/
|
let _units = $that.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);
|
