/**
|
入驻小区
|
**/
|
/*
|
* 修复说明：
|
* 1. 修复页面空白问题：
|
* - 原因：_initMethod 和 listMeterTypes 函数使用了未定义的 $that 变量
|
* - 解决方案：将 $that 替换为 vc.component，并添加了组件存在性检查
|
*
|
* 2. 修复滑动条无法滚动到最后一列问题：
|
* - 原因：_computeTableDivWidth 方法没有考虑 roomTreeDiv 的宽度
|
* - 解决方案：修改 _computeTableDivWidth 方法，考虑 roomTreeDiv 的宽度
|
*
|
* 3. 修复操作列位置问题：
|
* - 原因：操作列位于表格的第一列，用户希望将其移到最后一列
|
* - 解决方案：将操作列从第一列移动到最后一列，并修改其样式为粘在右侧
|
*
|
* 4. 粘项实现说明：
|
* - 使用 CSS 的 position: sticky 属性实现粘性定位
|
* - 当表格水平滚动时，操作列会固定在表格的右侧，不会随滚动而消失
|
* - 实现代码：
|
* <th class="text-center" style="position: sticky; right: 0; background-color: #fff; z-index: 10;">
|
* <vc:i18n name="操作" namespace="meterWaterManage"></vc:i18n>
|
* </th>
|
* <td class="text-center" style="position: sticky; right: 0; background-color: #fff; z-index: 10;">
|
* <!-- 操作按钮 -->
|
* </td>
|
*/
|
(function (vc) {
|
var DEFAULT_PAGE = vc.paginationConfig ? vc.paginationConfig.defaultPage : 1;
|
var DEFAULT_ROWS = 10;
|
vc.extends({
|
data: {
|
meterWaterManageInfo: {
|
meterWaters: [],
|
total: 0,
|
records: 1,
|
moreCondition: false,
|
waterId: '',
|
meterTypes: [],
|
roomName:'',
|
conditions: {
|
waterId: '',
|
meterType: '',
|
roomNum: '',
|
objId:''
|
},
|
timer: {}
|
}
|
},
|
|
// 框架要求的字典初始化方法，必须定义在组件对象顶层
|
_initDicts: function() {
|
console.log('水电抄表组件初始化字典数据');
|
// 这里可以根据需要初始化字典数据，目前组件不需要字典数据，所以留空
|
},
|
|
_initMethod: function () {
|
// 修改：改回使用 initRoomTreeDiv 方法，与 roomTreeDiv 组件对应
|
// 原因：确保房屋树能够正常初始化，支持房间选择功能
|
vc.emit('roomTreeDiv', 'initRoomTreeDiv', {
|
callName: 'meterWaterManage'
|
});
|
if (vc.component && typeof vc.component.listMeterTypes === 'function') {
|
vc.component.listMeterTypes(); // 加载抄表类型
|
}
|
if (vc.component && typeof vc.component._listMeterWaters === 'function') {
|
vc.component._listMeterWaters(DEFAULT_PAGE, DEFAULT_ROWS);
|
}
|
},
|
// 组件挂载完成后立即加载数据
|
mounted: function() {
|
console.log('水电抄表组件已挂载，立即加载数据');
|
|
// 显式初始化footable表格
|
if (window.$ && typeof window.$.fn.footable === 'function') {
|
console.log('显式初始化footable表格');
|
$('.footable').footable();
|
}
|
|
// 加载表类型数据
|
if (vc.component && typeof vc.component.listMeterTypes === 'function') {
|
vc.component.listMeterTypes();
|
}
|
|
// 立即加载抄表数据，不依赖房间树
|
if (vc.component && typeof vc.component._listMeterWaters === 'function') {
|
vc.component._listMeterWaters(DEFAULT_PAGE, DEFAULT_ROWS);
|
}
|
|
// 添加页面可见性变化监听
|
document.addEventListener('visibilitychange', () => {
|
if (document.visibilityState === 'visible' && vc.component) {
|
console.log('页面变为可见，重新加载抄表数据');
|
|
// 加载表类型数据
|
if (typeof vc.component.listMeterTypes === 'function') {
|
vc.component.listMeterTypes();
|
}
|
|
// 加载抄表数据
|
if (typeof vc.component._listMeterWaters === 'function') {
|
vc.component._listMeterWaters(DEFAULT_PAGE, DEFAULT_ROWS);
|
}
|
}
|
});
|
|
// 添加组件激活监听
|
window.addEventListener('hashchange', () => {
|
if (window.location.hash.includes('meterWaterManage') && vc.component) {
|
console.log('组件激活，重新加载抄表数据');
|
|
// 加载表类型数据
|
if (typeof vc.component.listMeterTypes === 'function') {
|
vc.component.listMeterTypes();
|
}
|
|
// 加载抄表数据
|
if (typeof vc.component._listMeterWaters === 'function') {
|
vc.component._listMeterWaters(DEFAULT_PAGE, DEFAULT_ROWS);
|
}
|
}
|
});
|
|
// 添加全局刷新事件监听
|
vc.on('globalRefresh', 'refreshData', function () {
|
if (vc.component) {
|
console.log('收到全局刷新事件，重新加载抄表数据');
|
|
// 加载表类型数据
|
if (typeof vc.component.listMeterTypes === 'function') {
|
vc.component.listMeterTypes();
|
}
|
|
// 加载抄表数据
|
if (typeof vc.component._listMeterWaters === 'function') {
|
vc.component._listMeterWaters(DEFAULT_PAGE, DEFAULT_ROWS);
|
}
|
}
|
});
|
},
|
_initEvent: function () {
|
// 房间选择事件
|
vc.on('meterWaterManage', 'selectRoom', function (_param) {
|
console.log('选择房间，加载对应抄表数据:', _param);
|
if (!vc.component || !vc.component.meterWaterManageInfo) {
|
console.error('组件实例不存在');
|
return;
|
}
|
vc.component.meterWaterManageInfo.conditions.objId = _param.roomId;
|
vc.component.meterWaterManageInfo.conditions.roomNum = '';
|
vc.component.meterWaterManageInfo.roomName = _param.roomName;
|
vc.component._listMeterWaters(DEFAULT_PAGE, DEFAULT_ROWS);
|
});
|
|
// 列表刷新事件
|
vc.on('meterWaterManage', 'listMeterWater', function () {
|
console.log('收到列表刷新事件，重新加载抄表数据');
|
if (vc.component && typeof vc.component._listMeterWaters === 'function') {
|
vc.component._listMeterWaters(DEFAULT_PAGE, DEFAULT_ROWS);
|
}
|
});
|
|
// 分页事件
|
vc.on('pagination', 'page_event', function (_currentPage) {
|
console.log('分页事件触发，页码:', _currentPage);
|
if (vc.component && typeof vc.component._listMeterWaters === 'function') {
|
vc.component._listMeterWaters(_currentPage, DEFAULT_ROWS);
|
}
|
});
|
|
// 房间通知事件
|
vc.on('meterWaterManage', 'notifyRoom', function (_room) {
|
console.log('收到房间通知事件:', _room);
|
if (!vc.component || !vc.component.meterWaterManageInfo) {
|
console.error('组件实例不存在');
|
return;
|
}
|
vc.component.meterWaterManageInfo.conditions.roomNum = _room.floorNum + "-" + _room.unitNum + "-" + _room.roomNum;
|
vc.component._listMeterWaters(DEFAULT_PAGE, DEFAULT_ROWS);
|
});
|
|
// 查询按钮点击事件
|
document.addEventListener('click', (e) => {
|
if (e.target.textContent === '查询' || e.target.textContent === '重置') {
|
console.log('查询/重置按钮点击，重新加载抄表数据');
|
if (vc.component && vc.component.meterWaterManageInfo && typeof vc.component._listMeterWaters === 'function') {
|
vc.component._listMeterWaters(DEFAULT_PAGE, DEFAULT_ROWS);
|
}
|
}
|
});
|
|
// 监听社区切换事件
|
vc.on('communitySwitch', 'communitySwitched', function () {
|
console.log('社区切换，重新加载抄表数据');
|
if (vc.component && vc.component.meterWaterManageInfo && typeof vc.component._listMeterWaters === 'function') {
|
vc.component._listMeterWaters(DEFAULT_PAGE, DEFAULT_ROWS);
|
}
|
});
|
},
|
methods: {
|
_listMeterWaters: function (_page, _rows) {
|
// 验证vc.component是否存在
|
if (!vc.component || !vc.component.meterWaterManageInfo) {
|
console.error('组件实例不存在');
|
return;
|
}
|
|
console.log('===== 开始加载抄表数据 =====');
|
console.log('发起抄表数据请求，页码:', _page, '行数:', _rows);
|
|
// 获取社区信息
|
let currentCommunity = vc.getCurrentCommunity();
|
console.log('当前社区信息:', currentCommunity);
|
|
if (!currentCommunity) {
|
console.error('当前社区信息为空');
|
// 尝试直接从全局获取社区信息
|
currentCommunity = window._currentCommunity;
|
console.log('尝试从全局获取社区信息:', currentCommunity);
|
}
|
|
if (!currentCommunity || !currentCommunity.communityId) {
|
console.error('社区信息不存在或缺少communityId，1秒后重试');
|
// 延迟重试
|
setTimeout(() => {
|
if (vc.component && vc.component._listMeterWaters) {
|
vc.component._listMeterWaters(_page, _rows);
|
}
|
}, 1000);
|
return;
|
}
|
|
// 输出当前条件值
|
console.log('当前条件值:', vc.component.meterWaterManageInfo.conditions);
|
|
// 构建请求参数
|
let params = {
|
page: _page,
|
row: _rows,
|
communityId: currentCommunity.communityId,
|
waterId: vc.component.meterWaterManageInfo.conditions.waterId ? vc.component.meterWaterManageInfo.conditions.waterId.trim() : '',
|
meterType: vc.component.meterWaterManageInfo.conditions.meterType || '',
|
roomNum: vc.component.meterWaterManageInfo.conditions.roomNum ? vc.component.meterWaterManageInfo.conditions.roomNum.trim() : ''
|
};
|
|
// 只有当objId有值时才传递，否则不传递该参数
|
// 当选择房间时，objId会被设置为房间ID，否则为空
|
let objId = vc.component.meterWaterManageInfo.conditions.objId;
|
console.log('当前objId:', objId);
|
if (objId && objId.trim() !== '') {
|
params.objId = objId;
|
console.log('传递objId参数:', objId);
|
} else {
|
console.log('不传递objId参数');
|
}
|
|
let param = {
|
params: params
|
};
|
|
console.log('请求参数:', JSON.stringify(param));
|
|
// 发送请求
|
vc.http.apiGet('/meterWater.listMeterWaters',
|
param,
|
function (jsonStr, res) {
|
console.log('收到API响应字符串:', jsonStr);
|
|
// 验证vc.component是否存在
|
if (!vc.component || !vc.component.meterWaterManageInfo) {
|
console.error('组件实例不存在');
|
return;
|
}
|
|
try {
|
// 检查jsonStr是否已经是对象
|
let _json;
|
if (typeof jsonStr === 'string') {
|
// 如果是字符串，解析为JSON对象
|
_json = JSON.parse(jsonStr);
|
console.log('解析后的API响应:', _json);
|
} else {
|
// 如果已经是对象，直接使用
|
_json = jsonStr;
|
console.log('API响应已为对象:', _json);
|
}
|
|
if (_json && _json.code == 0) {
|
// 确保 data 是数组
|
let meterWatersData = _json.data || [];
|
if (!Array.isArray(meterWatersData)) {
|
console.error('API返回的data不是数组，转换为空数组');
|
meterWatersData = [];
|
}
|
|
console.log('准备显示的抄表数据:', meterWatersData);
|
console.log('抄表数据数量:', meterWatersData.length);
|
|
// 处理API返回的total和records为0但实际有数据的情况
|
vc.component.meterWaterManageInfo.total = _json.total > 0 ? _json.total : meterWatersData.length;
|
vc.component.meterWaterManageInfo.records = _json.records > 0 ? _json.records : meterWatersData.length;
|
|
// 强制Vue更新 - 解决响应式问题
|
vc.component.meterWaterManageInfo.meterWaters = [];
|
|
setTimeout(() => {
|
// 深拷贝数据，确保响应式
|
var deepCopiedData = JSON.parse(JSON.stringify(meterWatersData));
|
vc.component.meterWaterManageInfo.meterWaters = deepCopiedData;
|
|
console.log('数据更新后，meterWaters数量:', vc.component.meterWaterManageInfo.meterWaters.length);
|
console.log('数据更新后，total:', vc.component.meterWaterManageInfo.total);
|
console.log('数据更新后，records:', vc.component.meterWaterManageInfo.records);
|
|
// 计算总页数
|
var totalPages = Math.ceil(vc.component.meterWaterManageInfo.total / _rows) || 1;
|
|
// 初始化分页
|
vc.emit('pagination', 'init', {
|
total: totalPages,
|
dataCount: vc.component.meterWaterManageInfo.total,
|
currentPage: _page
|
});
|
|
// 强制DOM更新，确保数据显示
|
// 通过重新赋值数组引用，触发Vue的响应式更新
|
vc.component.meterWaterManageInfo.meterWaters = [...vc.component.meterWaterManageInfo.meterWaters];
|
console.log('强制DOM更新后，meterWaters数量:', vc.component.meterWaterManageInfo.meterWaters.length);
|
|
// 手动刷新footable表格，确保数据正确显示
|
setTimeout(() => {
|
if (window.$ && typeof window.$.fn.footable === 'function') {
|
console.log('手动刷新footable表格');
|
$('.footable').footable('refresh');
|
}
|
}, 100);
|
}, 0);
|
} else {
|
console.error('API请求失败:', _json.msg || '未知错误');
|
vc.component.meterWaterManageInfo.meterWaters = [];
|
vc.component.meterWaterManageInfo.total = 0;
|
vc.component.meterWaterManageInfo.records = 0;
|
}
|
} catch (e) {
|
console.error('处理API响应失败:', e, '原始数据:', jsonStr);
|
vc.component.meterWaterManageInfo.meterWaters = [];
|
vc.component.meterWaterManageInfo.total = 0;
|
vc.component.meterWaterManageInfo.records = 0;
|
}
|
|
console.log('===== 抄表数据加载完成 =====');
|
},
|
function (errInfo) {
|
console.error('API请求异常:', errInfo);
|
|
// 验证vc.component是否存在
|
if (!vc.component || !vc.component.meterWaterManageInfo) {
|
console.error('组件实例不存在');
|
return;
|
}
|
|
vc.component.meterWaterManageInfo.meterWaters = [];
|
vc.component.meterWaterManageInfo.total = 0;
|
vc.component.meterWaterManageInfo.records = 0;
|
|
console.log('===== 抄表数据加载异常 =====');
|
}
|
);
|
},
|
_openAddMeterWaterModal: function () {
|
// 验证vc.component是否存在
|
if (!vc.component || !vc.component.meterWaterManageInfo) {
|
console.error('组件实例不存在');
|
return;
|
}
|
vc.emit('addMeterWater', 'openAddMeterWaterModal', {
|
roomId: vc.component.meterWaterManageInfo.conditions.objId,
|
roomName: vc.component.meterWaterManageInfo.roomName,
|
ownerName:''
|
});
|
},
|
_openEditMeterWaterModel: function (_meterWater) {
|
vc.emit('editMeterWater', 'openEditMeterWaterModal', _meterWater);
|
},
|
_openDeleteMeterWaterModel: function (_meterWater) {
|
vc.emit('deleteMeterWater', 'openDeleteMeterWaterModal', _meterWater);
|
},
|
//查询
|
_queryMeterWaterMethod: function () {
|
// 验证vc.component是否存在
|
if (!vc.component || !vc.component.meterWaterManageInfo) {
|
console.error('组件实例不存在');
|
return;
|
}
|
vc.component._listMeterWaters(DEFAULT_PAGE, DEFAULT_ROWS);
|
},
|
//重置
|
_resetMeterWaterMethod: function () {
|
// 验证vc.component是否存在
|
if (!vc.component || !vc.component.meterWaterManageInfo) {
|
console.error('组件实例不存在');
|
return;
|
}
|
vc.component.meterWaterManageInfo.conditions.roomNum = "";
|
vc.component.meterWaterManageInfo.conditions.meterType = "";
|
vc.component.meterWaterManageInfo.conditions.waterId = "";
|
vc.component._listMeterWaters(DEFAULT_PAGE, DEFAULT_ROWS);
|
},
|
_moreCondition: function () {
|
// 验证vc.component是否存在
|
if (!vc.component || !vc.component.meterWaterManageInfo) {
|
console.error('组件实例不存在');
|
return;
|
}
|
if (vc.component.meterWaterManageInfo.moreCondition) {
|
vc.component.meterWaterManageInfo.moreCondition = false;
|
} else {
|
vc.component.meterWaterManageInfo.moreCondition = true;
|
}
|
},
|
_openMeterWaterImport: function (arg1, arg2) {
|
vc.emit('importMeterWaterFee', 'openImportMeterWaterFeeModal', {});
|
},
|
_openMeterQrCode:function(){
|
// 验证vc.component是否存在
|
if (!vc.component || !vc.component.meterWaterManageInfo) {
|
console.error('组件实例不存在');
|
return;
|
}
|
vc.emit('roomMeterQrcode', 'openRoomMeterQrcodeModal', {
|
roomId: vc.component.meterWaterManageInfo.conditions.objId,
|
roomName: vc.component.meterWaterManageInfo.roomName,
|
ownerName:''
|
});
|
},
|
|
_getMeteTypeName: function (_meterType) {
|
if (_meterType == '1010') {
|
return "电表";
|
} else if (_meterType == '2020') {
|
return "水表";
|
}
|
return "煤气费";
|
},
|
|
listMeterTypes: function () {
|
// 验证vc.component是否存在
|
if (!vc.component || !vc.component.meterWaterManageInfo) {
|
console.error('组件实例不存在');
|
return;
|
}
|
|
// 验证社区信息是否存在
|
let currentCommunity = vc.getCurrentCommunity();
|
if (!currentCommunity || !currentCommunity.communityId) {
|
console.error('社区信息不存在');
|
return;
|
}
|
|
let param = {
|
params: {
|
page: 1,
|
row: 100,
|
communityId: currentCommunity.communityId
|
}
|
};
|
//发送get请求
|
vc.http.apiGet('/meterType.listMeterType',
|
param,
|
function (json, res) {
|
// 验证vc.component是否存在
|
if (!vc.component || !vc.component.meterWaterManageInfo) {
|
console.error('组件实例不存在');
|
return;
|
}
|
|
try {
|
let _json = JSON.parse(json);
|
// 确保 meterTypes 是一个数组
|
vc.component.meterWaterManageInfo.meterTypes = _json.data && Array.isArray(_json.data) ? _json.data : [];
|
} catch (e) {
|
console.error('处理API响应失败:', e);
|
if (vc.component && vc.component.meterWaterManageInfo) {
|
vc.component.meterWaterManageInfo.meterTypes = [];
|
}
|
}
|
},
|
function (errInfo, error) {
|
console.log('请求失败处理');
|
// 验证vc.component是否存在
|
if (vc.component && vc.component.meterWaterManageInfo) {
|
vc.component.meterWaterManageInfo.meterTypes = [];
|
}
|
}
|
);
|
},
|
|
_meterInputRoom: function () {
|
// 验证vc.component是否存在
|
if (!vc.component || !vc.component.meterWaterManageInfo) {
|
console.error('组件实例不存在');
|
return;
|
}
|
if (vc.component.meterWaterManageInfo.timer) {
|
clearTimeout(vc.component.meterWaterManageInfo.timer)
|
}
|
vc.component.meterWaterManageInfo.timer = setTimeout(() => {
|
vc.emit('inputSearchRoomInfo', 'searchRoom', {
|
callComponent: 'meterWaterManage',
|
roomName: vc.component.meterWaterManageInfo.conditions.roomNum
|
});
|
}, 1500)
|
},
|
_openMeterType:function(){
|
vc.jumpToPage('/#/pages/property/meterTypeManage?tab=抄表类型');
|
},
|
_computeTableDivWidth: function () {
|
let mainWidth = document.getElementsByTagName('body')[0].clientWidth - (document.getElementById('menu-nav') ? document.getElementById('menu-nav').offsetWidth : 200);
|
// 保持使用 .room-floor-unit-tree 选择器，确保表格宽度计算正确
|
let treeColumn = document.querySelector('.room-floor-unit-tree');
|
if (treeColumn) {
|
mainWidth -= treeColumn.offsetWidth;
|
}
|
mainWidth = mainWidth - 20 - 15 - 20;
|
return mainWidth + 'px';
|
}
|
}
|
});
|
})(window.vc);
|
