批量添加设备行数显示

apps/web-antd/src/views/devicemanagement/deviceinfo/index.vue

@@ -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 = () => {
+const isOverLineLimit = computed(() => {
-  try {
+  return addressLines.value > 100;
-    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;
-  }
 });
 
-// 监听计算属性的变化，更新 addressLines
+// 监听表单值变化，实时更新行数
-watch(computedAddressLines, (newValue) => {
+watch(
-  addressLines.value = newValue;
+  () => batchAddFormApi.getValues()?.addressList,
-}, { immediate: true });
+  (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>

apps/web-antd/src/views/devicemanagement/deviceinfo/schema.ts

@@ -674,8 +674,8 @@ export const batchAddDeviceFormSchema: any = computed(() => [
     componentProps: {
       rows: 4,
       placeholder: $t('common.pleaseInput') + $t('abp.deviceInfos.deviceAddress') + '，每行一个设备地址',
-      showCount: true,
+      showCount: false,
-      maxLength: 2000,
+      maxLength: 10000,
       style: {
         resize: 'vertical',
         minHeight: '32px',