调整设备添加

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

@@ -2,7 +2,7 @@
 import type { VbenFormProps } from '#/adapter/form';
 import type { VxeGridProps } from '#/adapter/vxe-table';
 
-import { computed, h, ref } from 'vue';
+import { computed, h, ref, watch } from 'vue';
 import { useRouter } from 'vue-router';
 
 import { Page, useVbenModal } from '@vben/common-ui';
@@ -18,9 +18,9 @@ import {
 import { useVbenForm } from '#/adapter/form';
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
+  postAggregationDeviceBatchCreateAsync,
   postAggregationDeviceCreateAsync,
   postAggregationDeviceDeleteAsync,
-  postAggregationDeviceBatchCreateAsync,
   postDeviceInfoCacheDeviceDataToRedis,
   postDeviceInfoPage,
 } from '#/api-client';
@@ -167,12 +167,15 @@ const [BatchAddForm, batchAddFormApi] = useVbenForm({
   showCollapseButton: false,
   showDefaultActions: false,
   wrapperClass: 'grid-cols-2',
+  // 添加响应式监听
+  autoSubmitOnEnter: false,
 });
 
 const [BatchAddModal, batchAddModalApi] = useVbenModal({
   draggable: true,
   onConfirm: submitBatchAdd,
   onBeforeClose: () => {
+    batchAddFormApi.resetForm();
     return true;
   },
 });
@@ -385,7 +388,9 @@ async function submitBatchAdd() {
   }
 
   // 验证设备地址格式（简单验证）
-  const invalidAddresses = addressList.filter((address: string) => !address || address.length < 3);
+  const invalidAddresses = addressList.filter(
+    (address: string) => !address || address.length < 3,
+  );
   if (invalidAddresses.length > 0) {
     Message.error(`以下设备地址格式不正确: ${invalidAddresses.join(', ')}`);
     return;
@@ -435,10 +440,41 @@ async function submitBatchAdd() {
 
 // 打开批量添加模态框
 const openBatchAddModal = () => {
+  console.log('打开批量添加模态框');
   batchAddFormApi.resetForm();
   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;
+  }
+};
+
+// 监听批量添加表单的地址列表变化
+watch(
+  () => batchAddFormApi.getValues()?.addressList,
+  (newValue) => {
+    getAddressLines();
+  },
+  { immediate: true },
+);
+
 // 缓存刷新按钮处理函数
 const handleCacheRefresh = async () => {
   try {
@@ -561,15 +597,15 @@ const toolbarActions = computed(() => [
             <template #content>
               <div style="display: flex; flex-direction: column; gap: 4px">
                 <Button type="text" size="small" @click="toDeviceLog.bind(null, row)()"
-                  style=" padding: 4px 8px;text-align: left">
+                  style="padding: 4px 8px; text-align: left">
                   {{ $t('abp.IoTDBBase.PlatformLog') }}
                 </Button>
                 <Button type="text" size="small" @click="toTelemetryLog.bind(null, row)()"
-                  style=" padding: 4px 8px;text-align: left">
+                  style="padding: 4px 8px; text-align: left">
                   {{ $t('abp.IoTDBBase.TelemetryLog') }}
                 </Button>
                 <Button type="text" size="small" @click="onDel.bind(null, row)()"
-                  style=" padding: 4px 8px; color: #ff4d4f;text-align: left">
+                  style="padding: 4px 8px; color: #ff4d4f; text-align: left">
                   {{ $t('common.delete') }}
                 </Button>
               </div>
@@ -591,6 +627,15 @@ const toolbarActions = computed(() => [
     </CommandModal>
     <BatchAddModal title="批量添加设备" class="w-[800px]">
       <BatchAddForm />
+      <template #footer>
+        <div class="flex w-full items-center justify-between">
+          <div class="text-sm text-gray-500">
+            <span v-if="addressLines > 0">
+              共 {{ addressLines }} 行设备地址
+            </span>
+          </div>
+        </div>
+      </template>
     </BatchAddModal>
   </Page>
 </template>

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

@@ -89,6 +89,14 @@ export const tableSchema: any = computed((): VxeGridProps['columns'] => [
 ]);
 
 export const addDeviceFormSchema: any = computed(() => [
+  {
+    component: 'Input',
+    fieldName: 'deviceAddress',
+    label: $t('abp.deviceInfos.deviceAddress'),
+    rules: z.string().min(1, {
+      message: `${$t('common.pleaseInput')}${$t('abp.deviceInfos.deviceAddress')}`,
+    }),
+  },
   {
     component: 'ApiSelect',
     fieldName: 'ioTPlatform',
@@ -361,14 +369,6 @@ export const addDeviceFormSchema: any = computed(() => [
     },
     rules: z.string().optional(),
   },
-  {
-    component: 'Input',
-    fieldName: 'deviceAddress',
-    label: $t('abp.deviceInfos.deviceAddress'),
-    rules: z.string().min(1, {
-      message: `${$t('common.pleaseInput')}${$t('abp.deviceInfos.deviceAddress')}`,
-    }),
-  },
 ]);
 
 export const editDeviceFormSchemaEdit: any = computed(() => [
@@ -667,6 +667,25 @@ export const commandFormSchema: any = computed(() => [
 ]);
 
 export const batchAddDeviceFormSchema: any = computed(() => [
+  {
+    component: 'Textarea',
+    fieldName: 'addressList',
+    label: $t('abp.deviceInfos.deviceAddress'),
+    componentProps: {
+      rows: 4,
+      placeholder: $t('common.pleaseInput') + $t('abp.deviceInfos.deviceAddress') + '，每行一个设备地址',
+      showCount: false,
+      maxLength: 2000,
+      style: {
+        resize: 'vertical',
+        minHeight: '32px',
+        maxHeight: '200px',
+      },
+    },
+    rules: z.string().min(1, {
+      message: `${$t('common.pleaseInput')}${$t('abp.deviceInfos.deviceAddress')}`,
+    }),
+  },
   {
     component: 'ApiSelect',
     fieldName: 'ioTPlatform',
@@ -939,18 +958,4 @@ export const batchAddDeviceFormSchema: any = computed(() => [
     },
     rules: z.string().optional(),
   },
-  {
-    component: 'Textarea',
-    fieldName: 'addressList',
-    label: $t('abp.deviceInfos.deviceAddress'),
-    componentProps: {
-      rows: 8,
-      placeholder: $t('common.pleaseInput') + $t('abp.deviceInfos.deviceAddress') + '，每行一个设备地址',
-      showCount: true,
-      maxLength: 2000,
-    },
-    rules: z.string().min(1, {
-      message: `${$t('common.pleaseInput')}${$t('abp.deviceInfos.deviceAddress')}`,
-    }),
-  },
 ]);

apps/web-antd/src/views/iotdbdatamanagement/ctwingLog/index.vue

@@ -8,8 +8,7 @@ import { useRoute } from 'vue-router';
 import { Page } from '@vben/common-ui';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import { postDeviceInfoPage } from '#/api-client';
-import { postTableModelCtWingLogInfo } from '#/api-client';
+import { postDeviceInfoPage, postTableModelCtWingLogInfo } from '#/api-client';
 
 import DeviceSelect from '../deviceData/DeviceSelect.vue';
 import { querySchema, tableSchema } from './schema';
@@ -53,11 +52,17 @@ const fetchDeviceOptions = async () => {
 
 // 根据设备地址获取设备信息对象
 const getDeviceInfoByAddress = (deviceAddress: string) => {
-  if (!deviceAddress || !deviceOptions.value || deviceOptions.value.length === 0) {
+  if (
+    !deviceAddress ||
+    !deviceOptions.value ||
+    deviceOptions.value.length === 0
+  ) {
     return null;
   }
 
-  const device = deviceOptions.value.find((device) => device.deviceAddress === deviceAddress);
+  const device = deviceOptions.value.find(
+    (device) => device.deviceAddress === deviceAddress,
+  );
   return device;
 };
 
@@ -189,7 +194,9 @@ const gridOptions: VxeGridProps<any> = {
     ajax: {
       query: async ({ page }, formValues) => {
         // 总是从表单API获取最新的表单值，确保分页时参数完整
-        const currentFormValues = gridApi?.formApi ? await gridApi.formApi.getValues() : {};
+        const currentFormValues = gridApi?.formApi
+          ? await gridApi.formApi.getValues()
+          : {};
 
         // 如果表单中没有DeviceAddress，但有路由参数，使用路由参数
         if (!currentFormValues.DeviceAddress && DeviceAddress) {