Compare commits
No commits in common. "b50155261601fcd701bfa2f831a2f862de3b2ce1" and "fa8a4c9cc7338b83401a57904e54e4dcaf16dc55" have entirely different histories.
b501552616
...
fa8a4c9cc7
@ -97,8 +97,7 @@
|
||||
"receivedMessageHexString": "Received Message (Hex)",
|
||||
"receivedTime": "Received Time",
|
||||
"isReceived": "Received Status",
|
||||
"receivedRemark": "Report Parsing Remarks",
|
||||
"title": "Title"
|
||||
"receivedRemark": "Report Parsing Remarks"
|
||||
},
|
||||
"message": {
|
||||
"title": "Title",
|
||||
|
||||
@ -97,8 +97,7 @@
|
||||
"receivedMessageHexString": "消息上报内容",
|
||||
"receivedTime": "消息上报时间",
|
||||
"isReceived": "是否已上报",
|
||||
"receivedRemark": "上报报文解析备注",
|
||||
"title": "日志"
|
||||
"receivedRemark": "上报报文解析备注"
|
||||
},
|
||||
"message": {
|
||||
"title": "标题",
|
||||
|
||||
@ -197,12 +197,12 @@ async function submit() {
|
||||
|
||||
const fetchParams: any = isEdit
|
||||
? {
|
||||
id: editRow.value.id,
|
||||
...formValues,
|
||||
}
|
||||
id: editRow.value.id,
|
||||
...formValues,
|
||||
}
|
||||
: {
|
||||
...formValues,
|
||||
};
|
||||
...formValues,
|
||||
};
|
||||
|
||||
try {
|
||||
const resp = await api({ body: fetchParams });
|
||||
@ -311,20 +311,20 @@ async function onStatusChange(record: any) {
|
||||
<Grid>
|
||||
<template #toolbar-actions>
|
||||
<TableAction :actions="[
|
||||
{
|
||||
label: $t('common.add'),
|
||||
type: 'primary',
|
||||
icon: 'ant-design:plus-outlined',
|
||||
onClick: openAddModal.bind(null),
|
||||
auth: ['AbpIdentity.Users.Create'],
|
||||
},
|
||||
{
|
||||
label: $t('common.add'),
|
||||
type: 'primary',
|
||||
icon: 'ant-design:plus-outlined',
|
||||
onClick: openAddModal.bind(null),
|
||||
auth: ['AbpIdentity.Users.Create'],
|
||||
},
|
||||
]" />
|
||||
</template>
|
||||
|
||||
<template #isEnable="{ row }">
|
||||
<component :is="h(Tag, { color: row.isEnabled ? 'green' : 'red' }, () =>
|
||||
row.isEnabled ? $t('common.yes') : $t('common.no'),
|
||||
)
|
||||
)
|
||||
" />
|
||||
</template>
|
||||
|
||||
@ -338,13 +338,13 @@ async function onStatusChange(record: any) {
|
||||
|
||||
<template #action="{ row }">
|
||||
<TableAction :actions="[
|
||||
{
|
||||
label: $t('common.edit'),
|
||||
type: 'link',
|
||||
size: 'small',
|
||||
auth: ['AbpIdentity.Users.Update'],
|
||||
onClick: onEdit.bind(null, row),
|
||||
},
|
||||
{
|
||||
label: $t('common.edit'),
|
||||
type: 'link',
|
||||
size: 'small',
|
||||
auth: ['AbpIdentity.Users.Update'],
|
||||
onClick: onEdit.bind(null, row),
|
||||
},
|
||||
{
|
||||
label: row.isEnabled ? '禁用' : '启用',
|
||||
type: 'link',
|
||||
|
||||
@ -229,36 +229,18 @@ function onDel(row: any) {
|
||||
},
|
||||
});
|
||||
}
|
||||
const toDeviceInfoData = (row: Record<string, any>) => {
|
||||
const toStatusData = (row: Record<string, any>) => {
|
||||
// 或者使用编程式导航
|
||||
router.push({
|
||||
path: '/iotdbdatamanagement/deviceData',
|
||||
path: '/iotdb/deviceData',
|
||||
query: {
|
||||
DeviceAddress: row.deviceAddress,
|
||||
DeviceType: row.ioTPlatform,
|
||||
DeviceId: row.deviceAddress,
|
||||
FocusAddress: row.ioTPlatformDeviceOpenInfo,
|
||||
DataBaseName: row.deviceName,
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const toDeviceLog = (row: Record<string, any>) => {
|
||||
// 根据平台类型跳转到对应的日志页面
|
||||
if (row.ioTPlatform === 1 || row.ioTPlatform === '1') {
|
||||
// CTWing平台
|
||||
router.push({
|
||||
path: '/iotdbdatamanagement/ctwingLog',
|
||||
query: {
|
||||
DeviceAddress: row.deviceAddress,
|
||||
},
|
||||
});
|
||||
} else if (row.ioTPlatform === 2 || row.ioTPlatform === '2') {
|
||||
// OneNET平台
|
||||
router.push({
|
||||
path: '/iotdbdatamanagement/onenetLog',
|
||||
query: {
|
||||
DeviceAddress: row.deviceAddress,
|
||||
},
|
||||
});
|
||||
}
|
||||
};
|
||||
const openAddModal = async () => {
|
||||
editRow.value = {};
|
||||
userModalApi.open();
|
||||
@ -377,14 +359,7 @@ const toolbarActions = computed(() => [
|
||||
type: 'link',
|
||||
size: 'small',
|
||||
auth: ['AbpIdentity.Users.Update'],
|
||||
onClick: toDeviceInfoData.bind(null, row),
|
||||
},
|
||||
{
|
||||
label: $t('abp.log.title'),
|
||||
type: 'link',
|
||||
size: 'small',
|
||||
auth: ['AbpIdentity.Users.Update'],
|
||||
onClick: toDeviceLog.bind(null, row),
|
||||
onClick: toStatusData.bind(null, row),
|
||||
},
|
||||
]" :drop-down-actions="[
|
||||
{
|
||||
|
||||
@ -83,7 +83,7 @@ export const tableSchema: any = computed((): VxeGridProps['columns'] => [
|
||||
title: $t('common.action'),
|
||||
field: 'action',
|
||||
fixed: 'right',
|
||||
width: '165',
|
||||
width: '150',
|
||||
slots: { default: 'action' },
|
||||
},
|
||||
]);
|
||||
@ -105,8 +105,7 @@ export const addDeviceFormSchema: any = computed(() => [
|
||||
optionsPropName: 'options',
|
||||
immediate: true,
|
||||
allowClear: true,
|
||||
placeholder:
|
||||
$t('common.pleaseSelect') + $t('abp.deviceInfos.ioTPlatform'),
|
||||
placeholder: $t('common.pleaseSelect') + $t('abp.deviceInfos.ioTPlatform'),
|
||||
afterFetch: (res: any) => {
|
||||
// 确保返回的是数组格式
|
||||
if (Array.isArray(res)) {
|
||||
|
||||
@ -19,10 +19,7 @@ defineOptions({
|
||||
});
|
||||
|
||||
const route = useRoute();
|
||||
const { DeviceAddress } = route.query;
|
||||
|
||||
// 是否正在初始化，用于防止重复查询
|
||||
const isInitializing = ref(false);
|
||||
const { DeviceType, DeviceId, FocusAddress } = route.query;
|
||||
|
||||
// 添加设备选择器引用
|
||||
const deviceSelectRef = ref();
|
||||
@ -51,13 +48,13 @@ const fetchDeviceOptions = async () => {
|
||||
}
|
||||
};
|
||||
|
||||
// 根据设备地址获取设备信息对象
|
||||
const getDeviceInfoByAddress = (deviceAddress: string) => {
|
||||
if (!deviceAddress || !deviceOptions.value || deviceOptions.value.length === 0) {
|
||||
// 根据设备ID获取设备信息对象
|
||||
const getDeviceInfoById = (deviceId: string) => {
|
||||
if (!deviceId || !deviceOptions.value || deviceOptions.value.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const device = deviceOptions.value.find((device) => device.deviceAddress === deviceAddress);
|
||||
const device = deviceOptions.value.find((device) => device.id === deviceId);
|
||||
return device;
|
||||
};
|
||||
|
||||
@ -83,27 +80,19 @@ const getDeviceInfoFromRef = async () => {
|
||||
|
||||
const formOptions: VbenFormProps = {
|
||||
schema: querySchema.value,
|
||||
initialValues: {
|
||||
DeviceAddress: DeviceAddress as string,
|
||||
},
|
||||
// 禁用表单值变化时自动提交，使用自定义处理函数
|
||||
submitOnChange: false,
|
||||
// 添加表单值变化的处理函数
|
||||
handleValuesChange: async (values, changedFields) => {
|
||||
// 如果正在初始化，不触发查询
|
||||
if (isInitializing.value) {
|
||||
return;
|
||||
}
|
||||
// 当 DeviceId 发生变化时，更新 selectedDeviceInfo
|
||||
if (changedFields.includes('DeviceId')) {
|
||||
const deviceId = values.DeviceId;
|
||||
|
||||
// 当 DeviceAddress 发生变化时，更新 selectedDeviceInfo
|
||||
if (changedFields.includes('DeviceAddress')) {
|
||||
const deviceAddress = values.DeviceAddress;
|
||||
|
||||
if (deviceAddress) {
|
||||
if (deviceId) {
|
||||
// 先尝试从 deviceOptions 中查找（备用方案）
|
||||
let device =
|
||||
deviceOptions.value.length > 0
|
||||
? deviceOptions.value.find((d) => d.deviceAddress === deviceAddress)
|
||||
? deviceOptions.value.find((d) => d.id === deviceId)
|
||||
: null;
|
||||
|
||||
// 如果没找到，尝试从 DeviceSelect 组件中获取
|
||||
@ -111,7 +100,7 @@ const formOptions: VbenFormProps = {
|
||||
try {
|
||||
// 获取 DeviceSelect 组件的实例
|
||||
const deviceSelectRef =
|
||||
gridApi.formApi.getFieldComponentRef('DeviceAddress');
|
||||
gridApi.formApi.getFieldComponentRef('DeviceId');
|
||||
if (deviceSelectRef && deviceSelectRef.getSelectedDevice) {
|
||||
device = deviceSelectRef.getSelectedDevice();
|
||||
}
|
||||
@ -127,7 +116,7 @@ const formOptions: VbenFormProps = {
|
||||
setTimeout(() => {
|
||||
try {
|
||||
const deviceSelectRef =
|
||||
gridApi.formApi.getFieldComponentRef('DeviceAddress');
|
||||
gridApi.formApi.getFieldComponentRef('DeviceId');
|
||||
if (deviceSelectRef && deviceSelectRef.getSelectedDevice) {
|
||||
const delayedDevice = deviceSelectRef.getSelectedDevice();
|
||||
if (delayedDevice) {
|
||||
@ -146,7 +135,7 @@ const formOptions: VbenFormProps = {
|
||||
|
||||
// 当任何相关字段发生变化时，刷新表格数据
|
||||
const relevantFields = new Set([
|
||||
'DeviceAddress',
|
||||
'DeviceId',
|
||||
'EndCreationTime',
|
||||
'IoTDataType',
|
||||
'StartCreationTime',
|
||||
@ -191,19 +180,14 @@ const gridOptions: VxeGridProps<any> = {
|
||||
// 总是从表单API获取最新的表单值，确保分页时参数完整
|
||||
const currentFormValues = gridApi?.formApi ? await gridApi.formApi.getValues() : {};
|
||||
|
||||
// 如果表单中没有DeviceAddress，但有路由参数，使用路由参数
|
||||
if (!currentFormValues.DeviceAddress && DeviceAddress) {
|
||||
currentFormValues.DeviceAddress = DeviceAddress as string;
|
||||
}
|
||||
|
||||
// 获取选中的设备信息
|
||||
let deviceAddress = currentFormValues.DeviceAddress || '';
|
||||
let deviceAddress = currentFormValues.DeviceId || '';
|
||||
|
||||
// 优先使用选中的设备信息
|
||||
const deviceInfo =
|
||||
selectedDeviceInfo.value ||
|
||||
(deviceAddress && deviceOptions.value.length > 0
|
||||
? getDeviceInfoByAddress(deviceAddress)
|
||||
(currentFormValues.DeviceId && deviceOptions.value.length > 0
|
||||
? getDeviceInfoById(currentFormValues.DeviceId)
|
||||
: null);
|
||||
|
||||
if (deviceInfo) {
|
||||
@ -215,11 +199,13 @@ const gridOptions: VxeGridProps<any> = {
|
||||
pageSize: page.pageSize,
|
||||
SearchKeyword: currentFormValues.SearchKeyword || '',
|
||||
IoTDataType: currentFormValues.IoTDataType || '',
|
||||
DeviceAddress: deviceAddress, // 使用设备地址
|
||||
DeviceId: deviceAddress, // 直接使用设备地址
|
||||
StartCreationTime: formatDate(currentFormValues.StartCreationTime),
|
||||
EndCreationTime: formatDate(currentFormValues.EndCreationTime),
|
||||
};
|
||||
|
||||
if (DeviceType) queryParams.DeviceType = DeviceType;
|
||||
if (DeviceId) queryParams.DeviceId = DeviceId;
|
||||
const { data } = await postTableModelCtWingLogInfo({
|
||||
body: queryParams,
|
||||
});
|
||||
@ -235,52 +221,11 @@ const gridOptions: VxeGridProps<any> = {
|
||||
|
||||
const [Grid, gridApi] = useVbenVxeGrid({ formOptions, gridOptions });
|
||||
|
||||
// 初始化函数
|
||||
const initializeGrid = async () => {
|
||||
try {
|
||||
// 设置初始化标志
|
||||
isInitializing.value = true;
|
||||
|
||||
// 获取设备信息数据
|
||||
await fetchDeviceOptions();
|
||||
|
||||
// 如果有路由参数，自动触发查询
|
||||
if (DeviceAddress) {
|
||||
// 延迟一下确保表格已完全初始化
|
||||
setTimeout(async () => {
|
||||
if (gridApi && gridApi.formApi) {
|
||||
// 确保表单值正确设置
|
||||
const currentValues = await gridApi.formApi.getValues();
|
||||
if (!currentValues.DeviceAddress && DeviceAddress) {
|
||||
await gridApi.formApi.setValues({
|
||||
...currentValues,
|
||||
DeviceAddress: DeviceAddress as string,
|
||||
});
|
||||
}
|
||||
// 延迟清除初始化标志，确保只触发一次查询
|
||||
setTimeout(() => {
|
||||
isInitializing.value = false;
|
||||
gridApi.reload();
|
||||
}, 200);
|
||||
} else {
|
||||
isInitializing.value = false;
|
||||
}
|
||||
}, 300);
|
||||
} else {
|
||||
// 如果没有路由参数，直接清除初始化标志
|
||||
isInitializing.value = false;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('初始化表格失败:', error);
|
||||
isInitializing.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 监听分页器状态变化
|
||||
watch(
|
||||
() => gridApi?.pagerApi?.pageSize,
|
||||
async (newSize, oldSize) => {
|
||||
if (newSize !== oldSize && oldSize && !isInitializing.value) {
|
||||
if (newSize !== oldSize && oldSize) {
|
||||
// 重置到第一页
|
||||
gridApi.pagerApi.currentPage = 1;
|
||||
// 获取最新表单值并触发数据重新加载
|
||||
@ -294,7 +239,7 @@ watch(
|
||||
watch(
|
||||
() => gridApi?.pagerApi?.currentPage,
|
||||
async (newPage, oldPage) => {
|
||||
if (newPage !== oldPage && oldPage && !isInitializing.value) {
|
||||
if (newPage !== oldPage && oldPage) {
|
||||
// 获取最新表单值并触发数据重新加载
|
||||
const latestValues = await gridApi.formApi.getValues();
|
||||
gridApi.reload(latestValues);
|
||||
@ -302,19 +247,16 @@ watch(
|
||||
},
|
||||
);
|
||||
|
||||
// 页面初始化时，延迟初始化表格
|
||||
// 页面初始化时获取设备信息
|
||||
onMounted(async () => {
|
||||
// 延迟初始化，确保VXE表格组件已完全挂载
|
||||
setTimeout(async () => {
|
||||
await initializeGrid();
|
||||
}, 100);
|
||||
await fetchDeviceOptions();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Page auto-content-height>
|
||||
<Grid>
|
||||
<template #DeviceAddress="{ model, field }">
|
||||
<template #DeviceId="{ model, field }">
|
||||
<DeviceSelect ref="deviceSelectRef" v-model:value="model[field]"
|
||||
:placeholder="$t('common.pleaseSelect') + $t('abp.log.deviceInfo')" allow-clear />
|
||||
</template>
|
||||
|
||||
@ -16,7 +16,7 @@ export const querySchema = computed(() => [
|
||||
api: getCommonGetSelectList,
|
||||
params: {
|
||||
query: {
|
||||
typeName: 'IoTDBDataTypeConst',
|
||||
typeName: 'IoTDBDataTypeConst',
|
||||
},
|
||||
},
|
||||
labelField: 'value',
|
||||
@ -45,7 +45,7 @@ export const querySchema = computed(() => [
|
||||
},
|
||||
{
|
||||
component: 'DeviceSelect',
|
||||
fieldName: 'DeviceAddress',
|
||||
fieldName: 'DeviceId',
|
||||
label: $t('abp.log.deviceInfo'),
|
||||
componentProps: {
|
||||
placeholder: $t('common.pleaseSelect') + $t('abp.log.deviceInfo'),
|
||||
|
||||
@ -68,7 +68,7 @@ const formatDate = (date: Date | string) => {
|
||||
};
|
||||
|
||||
const route = useRoute();
|
||||
const { DeviceType, DeviceAddress } = route.query;
|
||||
const { DeviceType, DeviceId } = route.query;
|
||||
|
||||
// 动态列定义
|
||||
const dynamicColumns = ref<any[]>([]);
|
||||
@ -146,8 +146,6 @@ const initDefaultColumns = () => {
|
||||
|
||||
// 表格是否已初始化
|
||||
const isGridInitialized = ref(false);
|
||||
// 是否正在初始化，用于防止重复查询
|
||||
const isInitializing = ref(false);
|
||||
|
||||
// 初始化默认列
|
||||
initDefaultColumns();
|
||||
@ -156,17 +154,12 @@ const formOptions: VbenFormProps = {
|
||||
schema: querySchema.value,
|
||||
initialValues: {
|
||||
DeviceType: DeviceType ? Number(DeviceType) : undefined,
|
||||
DeviceAddress: DeviceAddress as string, // 使用DeviceAddress作为初始值
|
||||
DeviceAddress: DeviceId as string, // 使用DeviceId作为DeviceAddress的初始值
|
||||
},
|
||||
// 禁用表单值变化时自动提交，使用自定义处理函数
|
||||
submitOnChange: false,
|
||||
// 添加表单值变化的处理函数
|
||||
handleValuesChange: async (values, changedFields) => {
|
||||
// 如果正在初始化，不触发查询
|
||||
if (isInitializing.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 当任何相关字段发生变化时，刷新表格数据
|
||||
const relevantFields = new Set([
|
||||
'DeviceAddress',
|
||||
@ -273,11 +266,6 @@ const gridOptions: VxeGridProps<any> = {
|
||||
formValues ||
|
||||
(gridApi?.formApi ? await gridApi.formApi.getValues() : {}) ||
|
||||
{};
|
||||
|
||||
// 如果表单中没有DeviceAddress，但有路由参数，使用路由参数
|
||||
if (!currentFormValues.DeviceAddress && DeviceAddress) {
|
||||
currentFormValues.DeviceAddress = DeviceAddress as string;
|
||||
}
|
||||
// 处理DeviceType和IoTDataType，确保传递数字类型
|
||||
const deviceTypeValue = currentFormValues.DeviceType;
|
||||
const deviceTypeNumber = deviceTypeValue
|
||||
@ -297,16 +285,11 @@ const gridOptions: VxeGridProps<any> = {
|
||||
// 获取选中的设备信息
|
||||
let deviceAddress = currentFormValues.DeviceAddress || '';
|
||||
|
||||
// 如果表单中没有DeviceAddress，但有路由参数，使用路由参数
|
||||
if (!deviceAddress && DeviceAddress) {
|
||||
deviceAddress = DeviceAddress as string;
|
||||
}
|
||||
|
||||
// 优先使用选中的设备信息
|
||||
const deviceInfo =
|
||||
selectedDeviceInfo.value ||
|
||||
(deviceAddress && deviceOptions.value.length > 0
|
||||
? getDeviceInfoByAddress(deviceAddress)
|
||||
(currentFormValues.DeviceAddress && deviceOptions.value.length > 0
|
||||
? getDeviceInfoByAddress(currentFormValues.DeviceAddress)
|
||||
: null);
|
||||
|
||||
if (deviceInfo) {
|
||||
@ -382,7 +365,7 @@ const [Grid, gridApi] = useVbenVxeGrid({ formOptions, gridOptions });
|
||||
watch(
|
||||
() => gridApi?.pagerApi?.pageSize,
|
||||
(newSize, oldSize) => {
|
||||
if (newSize !== oldSize && oldSize && !isInitializing.value) {
|
||||
if (newSize !== oldSize && oldSize) {
|
||||
// 重置到第一页
|
||||
gridApi.pagerApi.currentPage = 1;
|
||||
// 触发数据重新加载
|
||||
@ -395,7 +378,7 @@ watch(
|
||||
watch(
|
||||
() => gridApi?.pagerApi?.currentPage,
|
||||
(newPage, oldPage) => {
|
||||
if (newPage !== oldPage && oldPage && !isInitializing.value) {
|
||||
if (newPage !== oldPage && oldPage) {
|
||||
// 触发数据重新加载
|
||||
gridApi.reload();
|
||||
}
|
||||
@ -405,9 +388,6 @@ watch(
|
||||
// 初始化函数
|
||||
const initializeGrid = async () => {
|
||||
try {
|
||||
// 设置初始化标志
|
||||
isInitializing.value = true;
|
||||
|
||||
// 获取设备信息数据
|
||||
await fetchDeviceOptions();
|
||||
|
||||
@ -429,47 +409,23 @@ const initializeGrid = async () => {
|
||||
}
|
||||
|
||||
// 如果有路由参数，自动触发查询
|
||||
if (DeviceType || DeviceAddress) {
|
||||
if (DeviceType || DeviceId) {
|
||||
// 延迟一下确保表格已完全初始化
|
||||
setTimeout(async () => {
|
||||
if (gridApi && gridApi.formApi) {
|
||||
// 确保表单值正确设置
|
||||
const currentValues = await gridApi.formApi.getValues();
|
||||
if (!currentValues.DeviceAddress && DeviceAddress) {
|
||||
await gridApi.formApi.setValues({
|
||||
...currentValues,
|
||||
DeviceAddress: DeviceAddress as string,
|
||||
});
|
||||
}
|
||||
// 延迟清除初始化标志，确保只触发一次查询
|
||||
setTimeout(() => {
|
||||
isInitializing.value = false;
|
||||
// 确保表单值正确设置后再触发查询
|
||||
gridApi.reload();
|
||||
}, 200);
|
||||
} else {
|
||||
isInitializing.value = false;
|
||||
setTimeout(() => {
|
||||
if (gridApi) {
|
||||
gridApi.reload();
|
||||
}
|
||||
}, 300);
|
||||
} else {
|
||||
// 如果没有路由参数，直接清除初始化标志
|
||||
isInitializing.value = false;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('初始化表格失败:', error);
|
||||
isInitializing.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 监听路由参数变化，当有路由参数时自动触发查询
|
||||
watch(
|
||||
() => [DeviceType, DeviceAddress],
|
||||
() => [DeviceType, DeviceId],
|
||||
async (newValues, oldValues) => {
|
||||
// 如果正在初始化，不触发额外的查询
|
||||
if (isInitializing.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 如果有路由参数，等待设备信息加载完成后自动触发查询
|
||||
if (newValues.some(Boolean) && gridApi && isGridInitialized.value) {
|
||||
// 延迟一下确保表单值已经设置
|
||||
|
||||
@ -19,10 +19,7 @@ defineOptions({
|
||||
});
|
||||
|
||||
const route = useRoute();
|
||||
const { DeviceAddress } = route.query;
|
||||
|
||||
// 是否正在初始化，用于防止重复查询
|
||||
const isInitializing = ref(false);
|
||||
const { DeviceType, DeviceId, FocusAddress } = route.query;
|
||||
|
||||
// 添加设备选择器引用
|
||||
const deviceSelectRef = ref();
|
||||
@ -51,13 +48,13 @@ const fetchDeviceOptions = async () => {
|
||||
}
|
||||
};
|
||||
|
||||
// 根据设备地址获取设备信息对象
|
||||
const getDeviceInfoByAddress = (deviceAddress: string) => {
|
||||
if (!deviceAddress || !deviceOptions.value || deviceOptions.value.length === 0) {
|
||||
// 根据设备ID获取设备信息对象
|
||||
const getDeviceInfoById = (deviceId: string) => {
|
||||
if (!deviceId || !deviceOptions.value || deviceOptions.value.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const device = deviceOptions.value.find((device) => device.deviceAddress === deviceAddress);
|
||||
const device = deviceOptions.value.find((device) => device.id === deviceId);
|
||||
return device;
|
||||
};
|
||||
|
||||
@ -82,27 +79,19 @@ const getDeviceInfoFromRef = async () => {
|
||||
|
||||
const formOptions: VbenFormProps = {
|
||||
schema: querySchema.value,
|
||||
initialValues: {
|
||||
DeviceAddress: DeviceAddress as string,
|
||||
},
|
||||
// 禁用表单值变化时自动提交，使用自定义处理函数
|
||||
submitOnChange: false,
|
||||
// 添加表单值变化的处理函数
|
||||
handleValuesChange: async (values, changedFields) => {
|
||||
// 如果正在初始化，不触发查询
|
||||
if (isInitializing.value) {
|
||||
return;
|
||||
}
|
||||
// 当 DeviceId 发生变化时，更新 selectedDeviceInfo
|
||||
if (changedFields.includes('DeviceId')) {
|
||||
const deviceId = values.DeviceId;
|
||||
|
||||
// 当 DeviceAddress 发生变化时，更新 selectedDeviceInfo
|
||||
if (changedFields.includes('DeviceAddress')) {
|
||||
const deviceAddress = values.DeviceAddress;
|
||||
|
||||
if (deviceAddress) {
|
||||
if (deviceId) {
|
||||
// 先尝试从 deviceOptions 中查找（备用方案）
|
||||
let device =
|
||||
deviceOptions.value.length > 0
|
||||
? deviceOptions.value.find((d) => d.deviceAddress === deviceAddress)
|
||||
? deviceOptions.value.find((d) => d.id === deviceId)
|
||||
: null;
|
||||
|
||||
// 如果没找到，尝试从 DeviceSelect 组件中获取
|
||||
@ -110,7 +99,7 @@ const formOptions: VbenFormProps = {
|
||||
try {
|
||||
// 获取 DeviceSelect 组件的实例
|
||||
const deviceSelectRef =
|
||||
gridApi.formApi.getFieldComponentRef('DeviceAddress');
|
||||
gridApi.formApi.getFieldComponentRef('DeviceId');
|
||||
if (deviceSelectRef && deviceSelectRef.getSelectedDevice) {
|
||||
device = deviceSelectRef.getSelectedDevice();
|
||||
}
|
||||
@ -126,7 +115,7 @@ const formOptions: VbenFormProps = {
|
||||
setTimeout(() => {
|
||||
try {
|
||||
const deviceSelectRef =
|
||||
gridApi.formApi.getFieldComponentRef('DeviceAddress');
|
||||
gridApi.formApi.getFieldComponentRef('DeviceId');
|
||||
if (deviceSelectRef && deviceSelectRef.getSelectedDevice) {
|
||||
const delayedDevice = deviceSelectRef.getSelectedDevice();
|
||||
if (delayedDevice) {
|
||||
@ -145,7 +134,7 @@ const formOptions: VbenFormProps = {
|
||||
|
||||
// 当任何相关字段发生变化时，刷新表格数据
|
||||
const relevantFields = new Set([
|
||||
'DeviceAddress',
|
||||
'DeviceId',
|
||||
'EndCreationTime',
|
||||
'IoTDataType',
|
||||
'StartCreationTime',
|
||||
@ -189,19 +178,14 @@ const gridOptions: VxeGridProps<any> = {
|
||||
// 总是从表单API获取最新的表单值，确保分页时参数完整
|
||||
const currentFormValues = gridApi?.formApi ? await gridApi.formApi.getValues() : {};
|
||||
|
||||
// 如果表单中没有DeviceAddress，但有路由参数，使用路由参数
|
||||
if (!currentFormValues.DeviceAddress && DeviceAddress) {
|
||||
currentFormValues.DeviceAddress = DeviceAddress as string;
|
||||
}
|
||||
|
||||
// 获取选中的设备信息
|
||||
let deviceAddress = currentFormValues.DeviceAddress || '';
|
||||
let deviceAddress = currentFormValues.DeviceId || '';
|
||||
|
||||
// 优先使用选中的设备信息
|
||||
const deviceInfo =
|
||||
selectedDeviceInfo.value ||
|
||||
(deviceAddress && deviceOptions.value.length > 0
|
||||
? getDeviceInfoByAddress(deviceAddress)
|
||||
(currentFormValues.DeviceId && deviceOptions.value.length > 0
|
||||
? getDeviceInfoById(currentFormValues.DeviceId)
|
||||
: null);
|
||||
|
||||
if (deviceInfo) {
|
||||
@ -214,11 +198,13 @@ const gridOptions: VxeGridProps<any> = {
|
||||
pageSize: page.pageSize,
|
||||
SearchKeyword: currentFormValues.SearchKeyword || '',
|
||||
IoTDataType: currentFormValues.IoTDataType || '',
|
||||
DeviceAddress: deviceAddress, // 使用设备地址
|
||||
DeviceId: deviceAddress, // 直接使用设备地址
|
||||
StartCreationTime: formatDate(currentFormValues.StartCreationTime),
|
||||
EndCreationTime: formatDate(currentFormValues.EndCreationTime),
|
||||
};
|
||||
|
||||
if (DeviceType) queryParams.DeviceType = DeviceType;
|
||||
if (DeviceId) queryParams.DeviceId = DeviceId;
|
||||
const { data } = await postTableModelOneNetLogInfo({
|
||||
body: queryParams,
|
||||
});
|
||||
@ -234,52 +220,11 @@ const gridOptions: VxeGridProps<any> = {
|
||||
|
||||
const [Grid, gridApi] = useVbenVxeGrid({ formOptions, gridOptions });
|
||||
|
||||
// 初始化函数
|
||||
const initializeGrid = async () => {
|
||||
try {
|
||||
// 设置初始化标志
|
||||
isInitializing.value = true;
|
||||
|
||||
// 获取设备信息数据
|
||||
await fetchDeviceOptions();
|
||||
|
||||
// 如果有路由参数，自动触发查询
|
||||
if (DeviceAddress) {
|
||||
// 延迟一下确保表格已完全初始化
|
||||
setTimeout(async () => {
|
||||
if (gridApi && gridApi.formApi) {
|
||||
// 确保表单值正确设置
|
||||
const currentValues = await gridApi.formApi.getValues();
|
||||
if (!currentValues.DeviceAddress && DeviceAddress) {
|
||||
await gridApi.formApi.setValues({
|
||||
...currentValues,
|
||||
DeviceAddress: DeviceAddress as string,
|
||||
});
|
||||
}
|
||||
// 延迟清除初始化标志，确保只触发一次查询
|
||||
setTimeout(() => {
|
||||
isInitializing.value = false;
|
||||
gridApi.reload();
|
||||
}, 200);
|
||||
} else {
|
||||
isInitializing.value = false;
|
||||
}
|
||||
}, 300);
|
||||
} else {
|
||||
// 如果没有路由参数，直接清除初始化标志
|
||||
isInitializing.value = false;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('初始化表格失败:', error);
|
||||
isInitializing.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 监听分页器状态变化
|
||||
watch(
|
||||
() => gridApi?.pagerApi?.pageSize,
|
||||
async (newSize, oldSize) => {
|
||||
if (newSize !== oldSize && oldSize && !isInitializing.value) {
|
||||
if (newSize !== oldSize && oldSize) {
|
||||
// 重置到第一页
|
||||
gridApi.pagerApi.currentPage = 1;
|
||||
// 获取最新表单值并触发数据重新加载
|
||||
@ -293,7 +238,7 @@ watch(
|
||||
watch(
|
||||
() => gridApi?.pagerApi?.currentPage,
|
||||
async (newPage, oldPage) => {
|
||||
if (newPage !== oldPage && oldPage && !isInitializing.value) {
|
||||
if (newPage !== oldPage && oldPage) {
|
||||
// 获取最新表单值并触发数据重新加载
|
||||
const latestValues = await gridApi.formApi.getValues();
|
||||
gridApi.reload(latestValues);
|
||||
@ -301,19 +246,16 @@ watch(
|
||||
},
|
||||
);
|
||||
|
||||
// 页面初始化时，延迟初始化表格
|
||||
// 页面初始化时获取设备信息
|
||||
onMounted(async () => {
|
||||
// 延迟初始化，确保VXE表格组件已完全挂载
|
||||
setTimeout(async () => {
|
||||
await initializeGrid();
|
||||
}, 100);
|
||||
await fetchDeviceOptions();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Page auto-content-height>
|
||||
<Grid>
|
||||
<template #DeviceAddress="{ model, field }">
|
||||
<template #DeviceId="{ model, field }">
|
||||
<DeviceSelect ref="deviceSelectRef" v-model:value="model[field]"
|
||||
:placeholder="$t('common.pleaseSelect') + $t('abp.log.deviceInfo')" allow-clear />
|
||||
</template>
|
||||
|
||||
@ -45,7 +45,7 @@ export const querySchema = computed(() => [
|
||||
},
|
||||
{
|
||||
component: 'DeviceSelect',
|
||||
fieldName: 'DeviceAddress',
|
||||
fieldName: 'DeviceId',
|
||||
label: $t('abp.log.deviceInfo'),
|
||||
componentProps: {
|
||||
placeholder: $t('common.pleaseSelect') + $t('abp.log.deviceInfo'),
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user