批量添加设备行数显示
This commit is contained in:
ChenYi
parent
789a16e958
commit
7cf5167728
@ -178,8 +178,20 @@ const [BatchAddModal, batchAddModalApi] = useVbenModal({
|
||||
onConfirm: submitBatchAdd,
|
||||
onBeforeClose: () => {
|
||||
batchAddFormApi.resetForm();
|
||||
stopLineCheck();
|
||||
return true;
|
||||
},
|
||||
onOpenChange: (isOpen) => {
|
||||
if (isOpen) {
|
||||
// 模态框打开时启动行数检查
|
||||
setTimeout(() => {
|
||||
startLineCheck();
|
||||
}, 100);
|
||||
} else {
|
||||
// 模态框关闭时停止行数检查
|
||||
stopLineCheck();
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
// 获取批量添加模态框的状态
|
||||
@ -414,6 +426,12 @@ async function submitBatchAdd() {
|
||||
return;
|
||||
}
|
||||
|
||||
// 验证行数限制
|
||||
if (addressList.length > 100) {
|
||||
Message.error('设备地址不能超过100行');
|
||||
return;
|
||||
}
|
||||
|
||||
// 验证设备地址格式（简单验证）
|
||||
const invalidAddresses = addressList.filter(
|
||||
(address: string) => !address || address.length < 3,
|
||||
@ -469,49 +487,123 @@ async function submitBatchAdd() {
|
||||
const openBatchAddModal = () => {
|
||||
console.log('打开批量添加模态框');
|
||||
batchAddFormApi.resetForm();
|
||||
addressLines.value = 0; // 重置行数
|
||||
batchAddModalApi.open();
|
||||
};
|
||||
|
||||
// 批量添加地址行数
|
||||
const addressLines = ref(0);
|
||||
|
||||
// 获取当前地址行数的函数
|
||||
const getAddressLines = () => {
|
||||
try {
|
||||
const formValues = batchAddFormApi.getValues();
|
||||
const addressList = formValues?.addressList;
|
||||
if (!addressList || typeof addressList !== 'string') {
|
||||
addressLines.value = 0;
|
||||
return 0;
|
||||
}
|
||||
const lines = addressList.split('\n').filter((line: string) => line.trim());
|
||||
addressLines.value = lines.length;
|
||||
return lines.length;
|
||||
} catch {
|
||||
addressLines.value = 0;
|
||||
return 0;
|
||||
}
|
||||
};
|
||||
|
||||
// 使用计算属性来实时计算行数
|
||||
const computedAddressLines = computed(() => {
|
||||
try {
|
||||
const formValues = batchAddFormApi.getValues();
|
||||
const addressList = formValues?.addressList;
|
||||
if (!addressList || typeof addressList !== 'string') {
|
||||
return 0;
|
||||
}
|
||||
const lines = addressList.split('\n').filter((line: string) => line.trim());
|
||||
return lines.length;
|
||||
} catch {
|
||||
return 0;
|
||||
}
|
||||
// 检查行数是否超过限制
|
||||
const isOverLineLimit = computed(() => {
|
||||
return addressLines.value > 100;
|
||||
});
|
||||
|
||||
// 监听计算属性的变化，更新 addressLines
|
||||
watch(computedAddressLines, (newValue) => {
|
||||
addressLines.value = newValue;
|
||||
}, { immediate: true });
|
||||
// 监听表单值变化，实时更新行数
|
||||
watch(
|
||||
() => batchAddFormApi.getValues()?.addressList,
|
||||
(newValue) => {
|
||||
try {
|
||||
console.log('监听地址列表变化:', newValue);
|
||||
if (!newValue || typeof newValue !== 'string') {
|
||||
addressLines.value = 0;
|
||||
return;
|
||||
}
|
||||
const lines = newValue.split('\n').filter((line: string) => line.trim());
|
||||
addressLines.value = lines.length;
|
||||
console.log('更新行数:', addressLines.value);
|
||||
} catch {
|
||||
addressLines.value = 0;
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
// 监听表单值变化，实时更新行数（备用方案）
|
||||
watch(
|
||||
() => batchAddFormApi.getValues(),
|
||||
(formValues) => {
|
||||
try {
|
||||
const addressList = formValues?.addressList;
|
||||
console.log('监听表单值变化:', addressList);
|
||||
if (!addressList || typeof addressList !== 'string') {
|
||||
addressLines.value = 0;
|
||||
return;
|
||||
}
|
||||
const lines = addressList.split('\n').filter((line: string) => line.trim());
|
||||
addressLines.value = lines.length;
|
||||
console.log('备用方案更新行数:', addressLines.value);
|
||||
} catch {
|
||||
addressLines.value = 0;
|
||||
}
|
||||
},
|
||||
{ deep: true, immediate: true },
|
||||
);
|
||||
|
||||
// 使用定时器定期检查行数（第三种方案）
|
||||
let lineCheckInterval: NodeJS.Timeout | null = null;
|
||||
|
||||
// 在模态框打开时启动定时器
|
||||
const startLineCheck = () => {
|
||||
if (lineCheckInterval) {
|
||||
clearInterval(lineCheckInterval);
|
||||
}
|
||||
lineCheckInterval = setInterval(() => {
|
||||
try {
|
||||
// 尝试多种方式获取表单值
|
||||
let addressList = '';
|
||||
|
||||
// 方式1：直接获取
|
||||
const formValues = batchAddFormApi.getValues();
|
||||
console.log('表单值:', formValues);
|
||||
addressList = formValues?.addressList || '';
|
||||
|
||||
// 方式2：如果方式1失败，尝试其他方法
|
||||
if (!addressList) {
|
||||
try {
|
||||
const rawValues = batchAddFormApi.getValues();
|
||||
console.log('原始表单值:', rawValues);
|
||||
addressList = rawValues?.addressList || '';
|
||||
} catch (e) {
|
||||
console.log('方式2失败:', e);
|
||||
}
|
||||
}
|
||||
|
||||
// 方式3：直接从DOM获取
|
||||
if (!addressList) {
|
||||
const textarea = document.querySelector('textarea[name="addressList"]') as HTMLTextAreaElement;
|
||||
if (textarea) {
|
||||
addressList = textarea.value;
|
||||
console.log('从DOM获取的地址列表:', addressList);
|
||||
}
|
||||
}
|
||||
|
||||
console.log('获取到的地址列表:', addressList);
|
||||
|
||||
if (addressList && typeof addressList === 'string') {
|
||||
const lines = addressList.split('\n').filter((line: string) => line.trim());
|
||||
const newLineCount = lines.length;
|
||||
console.log('计算出的行数:', newLineCount, '当前行数:', addressLines.value);
|
||||
if (newLineCount !== addressLines.value) {
|
||||
console.log('定时器更新行数:', newLineCount);
|
||||
addressLines.value = newLineCount;
|
||||
}
|
||||
} else {
|
||||
console.log('地址列表为空或不是字符串');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('定时器检查行数失败:', error);
|
||||
}
|
||||
}, 300);
|
||||
};
|
||||
|
||||
// 在模态框关闭时清除定时器
|
||||
const stopLineCheck = () => {
|
||||
if (lineCheckInterval) {
|
||||
clearInterval(lineCheckInterval);
|
||||
lineCheckInterval = null;
|
||||
}
|
||||
};
|
||||
|
||||
// 缓存刷新按钮处理函数
|
||||
const handleCacheRefresh = async () => {
|
||||
@ -676,13 +768,19 @@ const toolbarActions = computed(() => [
|
||||
<div class="text-sm text-gray-500">
|
||||
<span v-if="addressLines > 0">
|
||||
共 {{ addressLines }} 行设备地址
|
||||
<span v-if="isOverLineLimit" style="color: #ff4d4f;">
|
||||
(超过100行限制)
|
||||
</span>
|
||||
</span>
|
||||
<span v-else>
|
||||
当前行数: {{ addressLines }} (调试信息)
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<Button @click="batchAddModalApi.close()">
|
||||
{{ $t('common.cancel') }}
|
||||
</Button>
|
||||
<Button type="primary" :loading="batchAddModalState?.confirmLoading" @click="submitBatchAdd">
|
||||
<Button type="primary" :loading="batchAddModalState?.confirmLoading" @click="submitBatchAdd" :disabled="isOverLineLimit">
|
||||
{{ $t('common.confirm') }}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
@ -674,8 +674,8 @@ export const batchAddDeviceFormSchema: any = computed(() => [
|
||||
componentProps: {
|
||||
rows: 4,
|
||||
placeholder: $t('common.pleaseInput') + $t('abp.deviceInfos.deviceAddress') + '，每行一个设备地址',
|
||||
showCount: true,
|
||||
maxLength: 2000,
|
||||
showCount: false,
|
||||
maxLength: 10000,
|
||||
style: {
|
||||
resize: 'vertical',
|
||||
minHeight: '32px',
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user