commit: 设备台账开发（未联调)

+export default {
+  ledgerListText: '台账列表',
+  createLedgerText: '创建台账',
+  importLedgerText: '导入台账',
+  deviceName: '设备名称',
+  deviceCode: '设备编码',
+  deviceType: '设备类型',
+  status: '状态',
+  description: '负责人',
+  operationSuccessText: '操作成功',
+  editProductText: '编辑台账',
+  updateOrganization: '修改组织',
+  batchActionText: '批量操作',
+}

+import { FormSchema, useComponentRegister } from '/@/components/Form';
+import { findDictItemByCode } from '/@/api/system/dict';
+import { getGatewayDevice, queryDeviceProfileBy } from '/@/api/device/deviceManager';
+import { JSONEditor } from '/@/components/CodeEditor';
+import { DeviceRecord, DeviceTypeEnum } from '/@/api/device/model/deviceModel';
+import { h } from 'vue';
+import { TaskTypeEnum } from '/@/views/task/center/config';
+import { createImgPreview } from '/@/components/Preview';
+import { uploadThumbnail } from '/@/api/configuration/center/configurationCenter';
+import LockControlGroup from '/@/components/Form/src/components/LockControlGroup.vue';
+import { OrgTreeSelect } from '/@/views/common/OrgTreeSelect';
+import { TCPProtocolTypeEnum, TransportTypeEnum } from '/@/enums/deviceEnum';
+import { HexInput, InputTypeEnum } from '../../profiles/components/ObjectModelForm/HexInput';
+import { DeviceProfileDetail } from '/@/api/device/model/deviceConfigModel';
+import { getDeviceProfileOtaPackages, getOtaPackageInfo } from '/@/api/ota';
+import { QueryDeviceProfileOtaPackagesType } from '/@/api/ota/model';
+import { OTAPackageType } from '/@/enums/otaEnum';
+import { createPickerSearch } from '/@/utils/pickerSearch';
+import { useI18n } from '/@/hooks/web/useI18n';
+
+useComponentRegister('JSONEditor', JSONEditor);
+useComponentRegister('LockControlGroup', LockControlGroup);
+useComponentRegister('OrgTreeSelect', OrgTreeSelect);
+useComponentRegister('HexInput', HexInput);
+
+const { t } = useI18n();
+
+export enum TypeEnum {
+  IS_GATEWAY = 'GATEWAY',
+  SENSOR = 'SENSOR',
+}
+
+export const isGateWay = (type: string) => {
+  return type === TypeEnum.IS_GATEWAY;
+};
+
+const updateProductHelpMessage = [
+  t('deviceManagement.device.updateProductHelpMessage.text1'),
+  t('deviceManagement.device.updateProductHelpMessage.text2'),
+];
+
+export const updateOrgHelpMessage = [
+  t('deviceManagement.device.updateOrgHelpMessage.text1'),
+  t('deviceManagement.device.updateOrgHelpMessage.text2'),
+  t('deviceManagement.device.updateOrgHelpMessage.text3'),
+];
+// 第一步的表单
+export const step1Schemas: FormSchema[] = [
+  {
+    field: 'icon',
+    label: t('business.deviceImageText'),
+    component: 'ApiUpload',
+    changeEvent: 'update:fileList',
+    valueField: 'fileList',
+    componentProps: ({ formModel }) => {
+      return {
+        listType: 'picture-card',
+        maxFileLimit: 1,
+        accept: '.png,.jpg,.jpeg,.gif',
+        api: async (file: File) => {
+          try {
+            const formData = new FormData();
+            formData.set('file', file);
+            const { fileStaticUri, fileName } = await uploadThumbnail(formData);
+            return {
+              uid: fileStaticUri,
+              name: fileName,
+              url: fileStaticUri,
+            };
+          } catch (error) {
+            return {};
+          }
+        },
+        onPreview: (fileList) => {
+          createImgPreview({ imageList: [fileList.url!] });
+        },
+        onDelete(url: string) {
+          formModel.deleteUrl = url!;
+        },
+      };
+    },
+  },
+  {
+    field: 'deleteUrl',
+    label: '',
+    component: 'Input',
+    show: false,
+  },
+  {
+    field: 'alias',
+    label: t('business.aliasText'),
+    component: 'Input',
+    componentProps: {
+      maxLength: 32,
+    },
+  },
+  {
+    field: 'name',
+    label: t('business.deviceNameText'),
+    component: 'Input',
+    componentProps: {
+      maxLength: 32,
+    },
+    required: true,
+    slot: 'snCode',
+  },
+  {
+    field: 'transportType',
+    label: '类型',
+    component: 'Input',
+    show: false,
+  },
+  {
+    field: 'deviceProfileId',
+    label: '',
+    component: 'Input',
+    show: false,
+  },
+  {
+    field: 'isUpdate',
+    label: '编辑模式',
+    component: 'Switch',
+    show: false,
+  },
+  {
+    field: 'tcpDeviceProtocol',
+    label: 'TCP设备协议类型',
+    component: 'Input',
+    show: false,
+  },
+
+  {
+    field: 'profileId',
+    label: t('business.affiliatedProductText'),
+    required: true,
+    component: 'LockControlGroup',
+    helpMessage: updateProductHelpMessage,
+    renderComponentContent: () => ({
+      popconfirmTitle: () =>
+        updateProductHelpMessage.map((text) => h('div', { style: { maxWidth: '200px' } }, text)),
+    }),
+    componentProps: ({ formActionType, formModel }) => {
+      const { setFieldsValue } = formActionType;
+      return {
+        component: 'ApiSelect',
+        defaultLockStatus: !!formModel?.isUpdate,
+        componentProps: {
+          api: async () => {
+            const options = await queryDeviceProfileBy({
+              deviceType: formModel?.isUpdate ? formModel?.deviceType : null,
+            });
+
+            return options;
+          },
+          labelField: 'name',
+          valueField: 'tbProfileId',
+          onChange(_value: string, option: DeviceProfileDetail) {
+            const { deviceType, transportType, id } = option;
+            setFieldsValue({
+              deviceType: deviceType,
+              transportType,
+              deviceProfileId: id,
+              gatewayId: null,
+              code: null,
+              addressCode: null,
+              tcpDeviceProtocol: option?.profileData?.transportConfiguration?.protocol,
+            });
+          },
+          onOptionsChange(options: (DeviceProfileDetail & Record<'value', string>)[]) {
+            const { profileId } = formModel;
+            if (profileId) {
+              const selectRecord = options.find((item) => item.value === profileId);
+              selectRecord &&
+                setFieldsValue({
+                  transportType: selectRecord!.transportType,
+                  tcpDeviceProtocol: selectRecord?.profileData?.transportConfiguration?.protocol,
+                });
+            }
+          },
+          placeholder: t('deviceManagement.device.productPlaceholderText'),
+          ...createPickerSearch(),
+        },
+      };
+    },
+  },
+  {
+    field: 'deviceType',
+    label: t('business.deviceTypeText'),
+    required: true,
+    component: 'ApiSelect',
+    dynamicDisabled: true,
+    helpMessage: t('deviceManagement.device.deviceTypeHelpText'),
+    componentProps: {
+      api: findDictItemByCode,
+      params: {
+        dictCode: 'device_type',
+      },
+      labelField: 'itemText',
+      valueField: 'itemValue',
+    },
+  },
+  {
+    field: 'addressType',
+    label: '',
+    component: 'Input',
+    show: false,
+    defaultValue: 'HEX',
+  },
+  {
+    field: 'deviceState',
+    label: '',
+    component: 'Input',
+    show: false,
+  },
+  {
+    field: 'addressCode',
+    label: t('deviceManagement.device.addressCodeText'),
+    dynamicDisabled({ values }) {
+      return (
+        values.isUpdate &&
+        values.deviceType === DeviceTypeEnum.SENSOR &&
+        values.deviceState === 'ONLINE' &&
+        values.transportType === TransportTypeEnum.TCP
+      );
+    },
+    dynamicRules({ values }) {
+      return [
+        {
+          required:
+            values?.transportType === TransportTypeEnum.TCP &&
+            values?.tcpDeviceProtocol === TCPProtocolTypeEnum.MODBUS_RTU,
+          message: t('deviceManagement.device.addressCodeHelpText'),
+          pattern: values?.addressType === 'HEX' ? /^[0-9A-Fa-f]{2}$/ : /^[0-9A-Fa-f]{1,2}$/,
+        },
+      ];
+    },
+    helpMessage({ values }) {
+      return [
+        t('deviceManagement.device.addressCodeHelpText'),
+        values.transportType === TransportTypeEnum.TCP &&
+        values.deviceType === DeviceTypeEnum.SENSOR
+          ? t('deviceManagement.device.tcpAddressCodeHelpText')
+          : '',
+      ];
+    },
+    component: 'HexInput',
+    changeEvent: 'update:value',
+    valueField: 'value',
+    componentProps: ({ formModel }) => {
+      return {
+        type: InputTypeEnum.HEX,
+        maxValue: parseInt('FF', 16),
+        onHexChange: (e) => {
+          formModel.addressType = e;
+        },
+      };
+    },
+    ifShow: ({ values }) => {
+      return (
+        values?.transportType === TransportTypeEnum.TCP &&
+        values?.tcpDeviceProtocol === TCPProtocolTypeEnum.MODBUS_RTU
+      );
+    },
+  },
+  {
+    field: 'code',
+    label: t('deviceManagement.device.codeText'),
+    dynamicRules({ values }) {
+      return [
+        {
+          required:
+            values?.transportType === TransportTypeEnum.TCP &&
+            values.deviceType === DeviceTypeEnum.SENSOR,
+        },
+      ];
+    },
+    dynamicDisabled({ values }) {
+      return (
+        values.isUpdate &&
+        values.deviceType === DeviceTypeEnum.SENSOR &&
+        values.deviceState === 'ONLINE' &&
+        values.transportType === TransportTypeEnum.TCP
+      );
+    },
+    helpMessage({ values }) {
+      return (
+        values.transportType === TransportTypeEnum.TCP &&
+        values.deviceType === DeviceTypeEnum.SENSOR
+          ? ['tcp网关子设备在线时，不能修改设备标识或地址码']
+          : false
+      ) as any;
+    },
+    component: 'Input',
+    componentProps: () => {
+      return {
+        maxLength: 255,
+        placeholder: t('deviceManagement.device.codePlaceholderText'),
+      };
+    },
+    ifShow: ({ values }) => {
+      return (
+        values?.transportType === TransportTypeEnum.TCP &&
+        values?.tcpDeviceProtocol === TaskTypeEnum.CUSTOM
+      );
+    },
+  },
+
+  {
+    field: 'brand',
+    component: 'ApiRadioGroup',
+    label: t('deviceManagement.device.brandText'),
+    required: true,
+    defaultValue: 'DIY_',
+    componentProps: {
+      api: findDictItemByCode,
+      params: {
+        dictCode: 'device_brand_gateway',
+      },
+      labelField: 'itemText',
+      valueField: 'itemValue',
+    },
+    ifShow: ({ values }) => isGateWay(values.deviceType),
+  },
+  {
+    field: 'gatewayId',
+    label: t('enum.deviceType.GATEWAY'),
+    required: true,
+    component: 'ApiSelect',
+    ifShow: ({ values }) => values.deviceType === 'SENSOR',
+    componentProps: ({ formModel, formActionType }) => {
+      const { transportType, deviceType, gatewayId } = formModel;
+      const { setFieldsValue } = formActionType;
+      if (!transportType) return {};
+      return {
+        api: async (params: Recordable) => {
+          try {
+            const result = await getGatewayDevice(params as any);
+            return result.map((item) => ({ ...item, alias: item.alias || item.name }));
+          } catch (e) {
+            return [];
+          }
+        },
+        params: {
+          transportType,
+          gatewayId: deviceType === DeviceTypeEnum.SENSOR && gatewayId ? gatewayId : null,
+        },
+        valueField: 'tbDeviceId',
+        labelField: 'alias',
+        onChange: async (_value: string, option: DeviceRecord) => {
+          setFieldsValue({ sensorOrganizationId: option?.organizationId, organizationId: null });
+        },
+        onOptionsChange(options: (DeviceRecord & Record<'value', string>)[]) {
+          if (formModel?.deviceType === DeviceTypeEnum.SENSOR && formModel?.gatewayId) {
+            const result = options.find((item) => item.value === formModel?.gatewayId);
+            result && setFieldsValue({ sensorOrganizationId: result?.organizationId });
+          }
+        },
+        ...createPickerSearch(),
+      };
+    },
+  },
+  {
+    field: 'sensorOrganizationId',
+    label: '依据网关设备请求的组织数组',
+    component: 'Input',
+    ifShow: false,
+  },
+  {
+    field: 'customerId',
+    label: '用来判断编辑时禁用组织修改',
+    component: 'Input',
+    ifShow: false,
+  },
+  {
+    field: 'organizationId',
+    label: t('business.affiliatedOrganizationText'),
+    component: 'LockControlGroup',
+    required: true,
+    helpMessage: updateOrgHelpMessage,
+    renderComponentContent: () => ({
+      popconfirmTitle: () =>
+        updateOrgHelpMessage.map((text) => h('div', { style: { maxWidth: '240px' } }, text)),
+    }),
+    componentProps: ({ formModel, formActionType }) => {
+      return {
+        component: 'OrgTreeSelect',
+        defaultLockStatus: !!formModel?.isUpdate,
+        disabled: !!formModel?.customerId,
+        componentProps: {
+          apiTreeSelectProps: {
+            params: {
+              organizationId: formModel?.sensorOrganizationId,
+            },
+          },
+          onOptionsChange: (options: Recordable[]) => {
+            if (!formModel?.organizationId && formModel?.deviceType === DeviceTypeEnum.SENSOR) {
+              const firstItem = options?.[0];
+
+              if (firstItem && firstItem?.id) {
+                const { setFieldsValue, clearValidate } = formActionType;
+                setFieldsValue({ organizationId: firstItem.id });
+                clearValidate('organizationId');
+              }
+            }
+          },
+          placeholder: t('deviceManagement.device.organizationPlaceholderText'),
+        },
+      };
+    },
+  },
+  {
+    field: 'directorId',
+    label: t('deviceManagement.device.directorName'),
+    component: 'Input',
+    componentProps: {
+      maxLength: 255,
+    },
+  },
+  {
+    field: 'label',
+    label: t('deviceManagement.device.deviceLabelText'),
+    component: 'Input',
+    componentProps: {
+      maxLength: 255,
+    },
+  },
+  {
+    field: 'deviceAddress',
+    label: t('business.deviceLocationText'),
+    component: 'Input',
+    slot: 'deviceAddress',
+  },
+
+  {
+    field: 'firmwareId',
+    label: t('deviceManagement.product.assignHardwareText'),
+    component: 'ApiSearchSelect',
+    ifShow: ({ model }) => model?.isUpdate,
+    componentProps: ({ formModel }) => {
+      return {
+        api: async (params: QueryDeviceProfileOtaPackagesType) => {
+          if (!params.deviceProfileId) return [];
+          const result = await getDeviceProfileOtaPackages(params);
+          return result.data.map((item) => ({
+            label: `${item.title}(${item.version})`,
+            value: item.id.id,
+          }));
+        },
+        params: (textSearch: string) => {
+          return {
+            textSearch,
+            page: 0,
+            type: OTAPackageType.FIRMWARE,
+            pageSize: 10,
+            deviceProfileId: formModel?.profileId,
+          };
+        },
+        queryApi: async (id: string) => {
+          const result = await getOtaPackageInfo(id);
+          return { label: `${result.title}(${result.version})`, value: result.id.id };
+        },
+      };
+    },
+  },
+  {
+    field: 'softwareId',
+    label: t('deviceManagement.product.assignSoftwareText'),
+    component: 'ApiSearchSelect',
+    ifShow: ({ model }) => model?.isUpdate,
+    componentProps: ({ formModel }) => {
+      return {
+        api: async (params: QueryDeviceProfileOtaPackagesType) => {
+          if (!params.deviceProfileId) return [];
+          const result = await getDeviceProfileOtaPackages(params);
+          return result.data.map((item) => ({
+            label: `${item.title}(${item.version})`,
+            value: item.id.id,
+          }));
+        },
+        params: (textSearch: string) => {
+          return {
+            textSearch,
+            page: 0,
+            type: OTAPackageType.SOFTWARE,
+            pageSize: 10,
+            deviceProfileId: formModel?.profileId,
+          };
+        },
+        queryApi: async (id: string) => {
+          const result = await getOtaPackageInfo(id);
+          return { label: `${result.title}(${result.version})`, value: result.id.id };
+        },
+      };
+    },
+  },
+  {
+    field: 'description',
+    label: t('common.remarkText'),
+    component: 'InputTextArea',
+    componentProps: {
+      maxLength: 500,
+    },
+  },
+  {
+    field: 'id',
+    label: 'id',
+    component: 'Input',
+    show: false,
+    componentProps: {
+      maxLength: 36,
+      placeholder: '请输入id',
+    },
+  },
+  {
+    field: 'tenantId',
+    label: '租户Code',
+    component: 'Input',
+    show: false,
+    componentProps: {
+      maxLength: 36,
+      placeholder: '请输入租户Code',
+    },
+  },
+  {
+    field: 'tbDeviceId',
+    label: 'tbDeviceId',
+    component: 'Input',
+    show: false,
+    componentProps: {
+      maxLength: 36,
+      placeholder: '请输入tbDeviceId',
+    },
+  },
+];
+
+export enum credentialTypeEnum {
+  ACCESS_TOKEN = 'ACCESS_TOKEN',
+  X_509 = 'X509_CERTIFICATE',
+  MQTT_BASIC = 'MQTT_BASIC',
+}
+// 第二步的表单
+export const step2Schemas: FormSchema[] = [
+  {
+    label: '',
+    component: 'Checkbox',
+    field: 'addAgree',
+    slot: 'addAgree',
+  },
+  {
+    label: t('deviceManagement.device.certificateTypeText'),
+    component: 'Select',
+    field: 'credentialType',
+    required: true,
+    componentProps({ formActionType }) {
+      const { updateSchema, setFieldsValue } = formActionType;
+      return {
+        options: [
+          {
+            value: credentialTypeEnum.ACCESS_TOKEN,
+            label: 'Access Token',
+          },
+          {
+            value: credentialTypeEnum.X_509,
+            label: 'X.509',
+          },
+          {
+            value: credentialTypeEnum.MQTT_BASIC,
+            label: 'MQTT Basic',
+          },
+        ],
+        onChange(value) {
+          setFieldsValue({
+            publicKey: '',
+            credentialsId: '',
+            clientId: '',
+            username: '',
+            password: '',
+          });
+          if (value === credentialTypeEnum.ACCESS_TOKEN) {
+            updateSchema([
+              {
+                field: 'credentialsId',
+                ifShow: true,
+              },
+              {
+                field: 'clientId',
+                ifShow: false,
+              },
+              {
+                field: 'username',
+                ifShow: false,
+              },
+              {
+                field: 'password',
+                ifShow: false,
+              },
+              {
+                field: 'publicKey',
+                ifShow: false,
+              },
+            ]);
+          } else if (value === credentialTypeEnum.X_509) {
+            updateSchema([
+              {
+                field: 'publicKey',
+                ifShow: true,
+              },
+              {
+                field: 'credentialsId',
+                ifShow: false,
+              },
+              {
+                field: 'clientId',
+                ifShow: false,
+              },
+              {
+                field: 'username',
+                ifShow: false,
+              },
+              {
+                field: 'password',
+                ifShow: false,
+              },
+            ]);
+          } else if (value === credentialTypeEnum.MQTT_BASIC) {
+            updateSchema([
+              {
+                field: 'clientId',
+                ifShow: true,
+              },
+              {
+                field: 'username',
+                ifShow: true,
+              },
+              {
+                field: 'password',
+                ifShow: true,
+              },
+              {
+                field: 'publicKey',
+                ifShow: false,
+              },
+              {
+                field: 'credentialsId',
+                ifShow: false,
+              },
+            ]);
+          } else {
+            updateSchema([
+              {
+                field: 'clientId',
+                ifShow: false,
+              },
+              {
+                field: 'username',
+                ifShow: false,
+              },
+              {
+                field: 'password',
+                ifShow: false,
+              },
+              {
+                field: 'publicKey',
+                ifShow: false,
+              },
+              {
+                field: 'credentialsId',
+                ifShow: false,
+              },
+            ]);
+          }
+        },
+      };
+    },
+    ifShow: ({ values }) => values.addAgree,
+  },
+  {
+    label: t('deviceManagement.device.accessTokenText'),
+    component: 'Input',
+    field: 'credentialsId',
+    required: true,
+    ifShow: false,
+    slot: 'credentialsId',
+    componentProps: {
+      maxLength: 36,
+    },
+  },
+  {
+    label: t('deviceManagement.device.rsaPublicKeyText'),
+    component: 'InputTextArea',
+    field: 'publicKey',
+    required: true,
+    ifShow: false,
+    componentProps: {
+      rows: 8,
+    },
+  },
+  {
+    label: t('deviceManagement.device.clientIdText'),
+    component: 'Input',
+    field: 'clientId',
+    ifShow: false,
+    slot: 'clientId',
+    componentProps: {
+      maxLength: 36,
+    },
+  },
+  {
+    label: t('deviceManagement.device.usernameText'),
+    component: 'Input',
+    field: 'username',
+    required: true,
+    ifShow: false,
+    componentProps: {
+      maxLength: 255,
+    },
+  },
+  {
+    label: t('deviceManagement.device.passwordText'),
+    component: 'InputPassword',
+    field: 'password',
+    componentProps: {
+      maxLength: 36,
+    },
+    ifShow: false,
+  },
+];
+
+// 管理凭证的表单配置项
+export const TokenSchemas: FormSchema[] = [
+  {
+    label: t('deviceManagement.device.certificateTypeText'),
+    component: 'Select',
+    field: 'credentialType',
+    required: true,
+    componentProps({ formActionType }) {
+      const { updateSchema, setFieldsValue } = formActionType;
+      return {
+        options: [
+          {
+            value: credentialTypeEnum.ACCESS_TOKEN,
+            label: 'Access Token',
+          },
+          {
+            value: credentialTypeEnum.X_509,
+            label: 'X.509',
+          },
+          {
+            value: credentialTypeEnum.MQTT_BASIC,
+            label: 'MQTT Basic',
+          },
+        ],
+        onChange(value) {
+          setFieldsValue({
+            publicKey: '',
+            credentialsId: '',
+            clientId: '',
+            username: '',
+            password: '',
+          });
+          if (value === credentialTypeEnum.ACCESS_TOKEN) {
+            updateSchema([
+              {
+                field: 'credentialsId',
+                ifShow: true,
+              },
+              {
+                field: 'clientId',
+                ifShow: false,
+              },
+              {
+                field: 'username',
+                ifShow: false,
+              },
+              {
+                field: 'password',
+                ifShow: false,
+              },
+              {
+                field: 'publicKey',
+                ifShow: false,
+              },
+            ]);
+          } else if (value === credentialTypeEnum.X_509) {
+            updateSchema([
+              {
+                field: 'publicKey',
+                ifShow: true,
+              },
+              {
+                field: 'credentialsId',
+                ifShow: false,
+              },
+              {
+                field: 'clientId',
+                ifShow: false,
+              },
+              {
+                field: 'username',
+                ifShow: false,
+              },
+              {
+                field: 'password',
+                ifShow: false,
+              },
+            ]);
+          } else if (value === credentialTypeEnum.MQTT_BASIC) {
+            updateSchema([
+              {
+                field: 'clientId',
+                ifShow: true,
+              },
+              {
+                field: 'username',
+                ifShow: true,
+              },
+              {
+                field: 'password',
+                ifShow: true,
+              },
+              {
+                field: 'publicKey',
+                ifShow: false,
+              },
+              {
+                field: 'credentialsId',
+                ifShow: false,
+              },
+            ]);
+          } else {
+            updateSchema([
+              {
+                field: 'clientId',
+                ifShow: false,
+              },
+              {
+                field: 'username',
+                ifShow: false,
+              },
+              {
+                field: 'password',
+                ifShow: false,
+              },
+              {
+                field: 'publicKey',
+                ifShow: false,
+              },
+              {
+                field: 'credentialsId',
+                ifShow: false,
+              },
+            ]);
+          }
+        },
+      };
+    },
+  },
+  {
+    label: t('deviceManagement.device.accessTokenText'),
+    component: 'Input',
+    field: 'credentialsId',
+    required: true,
+    ifShow: false,
+    slot: 'credentialsId',
+    componentProps: {
+      maxLength: 36,
+    },
+  },
+  {
+    label: t('deviceManagement.device.rsaPublicKeyText'),
+    component: 'InputTextArea',
+    field: 'publicKey',
+    required: true,
+    ifShow: false,
+    componentProps: {
+      rows: 8,
+    },
+  },
+  {
+    label: t('deviceManagement.device.clientIdText'),
+    component: 'Input',
+    field: 'clientId',
+    ifShow: false,
+    slot: 'clientId',
+    componentProps: {
+      maxLength: 36,
+    },
+  },
+  {
+    label: t('deviceManagement.device.usernameText'),
+    component: 'Input',
+    field: 'username',
+    required: true,
+    ifShow: false,
+    componentProps: {
+      maxLength: 255,
+    },
+  },
+  {
+    label: t('deviceManagement.device.passwordText'),
+    component: 'InputPassword',
+    field: 'password',
+    ifShow: false,
+    componentProps: {
+      maxLength: 36,
+    },
+  },
+  {
+    label: 'id',
+    component: 'Input',
+    field: 'id',
+    show: false,
+    componentProps: {
+      maxLength: 36,
+      placeholder: '请输入id',
+    },
+  },
+  {
+    label: 'tbDeviceId',
+    component: 'Input',
+    field: 'tbDeviceId',
+    show: false,
+    componentProps: {
+      maxLength: 36,
+      placeholder: '请输入tbDeviceId',
+    },
+    dynamicRules: () => {
+      return [
+        {
+          required: false,
+          validator: (_, value) => {
+            if (String(value).length > 36) {
+              return Promise.reject('字数不超过36个字');
+            }
+            return Promise.resolve();
+          },
+        },
+      ];
+    },
+  },
+];

+import { formatToDateTime } from '/@/utils/dateUtil';
+import { FormSchema, useComponentRegister } from '/@/components/Form';
+import { BasicColumn } from '/@/components/Table';
+import { getCustomerList } from '/@/api/device/deviceManager';
+import { DescItem } from '/@/components/Description/index';
+import moment from 'moment';
+import { CSSProperties, h } from 'vue';
+import { Button, Tag, Tooltip } from 'ant-design-vue';
+import { TypeEnum, updateOrgHelpMessage } from './data';
+import { PageEnum } from '/@/enums/pageEnum';
+import { useGo } from '/@/hooks/web/usePage';
+import { useAuthDeviceDetail } from '../hook/useAuthDeviceDetail';
+import { findDictItemByCode } from '/@/api/system/dict';
+import { isNullOrUnDef } from '/@/utils/is';
+import { useI18n } from '/@/hooks/web/useI18n';
+import { DeviceStatusEnum } from '/@/enums/deviceEnum';
+import { AlarmStatus } from '/@/enums/alarmEnum';
+const { t } = useI18n();
+import { OrgTreeSelect } from '/@/views/common/OrgTreeSelect';
+
+useComponentRegister('OrgTreeSelect', OrgTreeSelect);
+
+// 设备详情的描述
+export const descSchema = (emit: EmitType): DescItem[] => {
+  return [
+    {
+      field: 'createTime',
+      label: t('common.createTimeText'),
+    },
+    {
+      field: 'name',
+      label: t('business.deviceNameText'),
+      render(val, data: Record<'alias' | 'name', string>) {
+        return h(Tooltip, { title: data.alias || val }, () =>
+          h('span', { style: { cursor: 'pointer' } as CSSProperties }, data.alias || val)
+        );
+      },
+    },
+    {
+      field: 'label',
+      label: t('deviceManagement.device.deviceLabelText'),
+      render(val) {
+        return h(Tooltip, { title: val }, () =>
+          h('span', { style: { cursor: 'pointer' } as CSSProperties }, val)
+        );
+      },
+    },
+    {
+      field: 'deviceProfile.name',
+      label: t('business.productText'),
+      render(val) {
+        const go = useGo();
+        const { isCustomer } = useAuthDeviceDetail();
+        return h(
+          Button,
+          {
+            type: 'link',
+            style: { padding: 0 },
+            onClick: () =>
+              !isCustomer
+                ? go(PageEnum.DEVICE_PROFILE + '?name=' + encodeURIComponent(String(val)))
+                : '',
+          },
+          { default: () => val }
+        );
+      },
+    },
+    {
+      field: 'gatewayName',
+      label: t('business.affiliatedGatewayText'),
+      show: (data) => !!data.gatewayName,
+      render(val, data) {
+        if (TypeEnum.SENSOR !== data.deviceType) return val;
+        return h(
+          Button,
+          { type: 'link', style: { padding: 0 }, onClick: () => emit('open-gateway-device', data) },
+          { default: () => data.gatewayAlias || val }
+        );
+      },
+    },
+    {
+      field: 'deviceType',
+      label: t('business.deviceTypeText'),
+      render: (text) => {
+        return text && t(`enum.deviceType.${text}`);
+      },
+    },
+    {
+      field: 'deviceInfo.sip.cameraCode',
+      label: t('deviceManagement.device.deviceCameraCodeText'),
+    },
+    {
+      field: 'deviceInfo.sip.hostAddress',
+      label: t('deviceManagement.device.hostAddressText'),
+    },
+    {
+      field: 'deviceInfo.sip.manufacturer',
+      label: t('deviceManagement.device.brandText'),
+    },
+    {
+      field: 'deviceInfo.sip.streamMode',
+      label: t('deviceManagement.device.streamModeText'),
+    },
+    {
+      field: 'description',
+      label: t('common.descText'),
+      // span: 2,
+      render(val) {
+        return h(Tooltip, { title: val }, () =>
+          h('span', { style: { cursor: 'pointer' } as CSSProperties }, val)
+        );
+      },
+    },
+  ];
+};
+
+// 实时数据表格
+export const realTimeDataColumns: BasicColumn[] = [
+  {
+    title: t('deviceManagement.device.keyText'),
+    dataIndex: 'name',
+    width: 100,
+  },
+  {
+    title: t('deviceManagement.device.valueText'),
+    dataIndex: 'rawValue',
+    width: 160,
+    format(text) {
+      return isNullOrUnDef(text) ? '--' : text;
+    },
+  },
+  {
+    title: t('deviceManagement.device.latestUpdateTimeText'),
+    dataIndex: 'time',
+    width: 120,
+    format: (text) => formatToDateTime(text, 'YYYY-MM-DD HH:mm:ss'),
+  },
+];
+
+// 告警
+export const alarmSearchSchemas: FormSchema[] = [
+  {
+    field: 'status',
+    label: t('business.deviceStatusText'),
+    component: 'Select',
+    colProps: { span: 6 },
+    componentProps: {
+      options: Object.values(AlarmStatus).map((value) => ({
+        label: t(`enum.alarmStaus.${value}`),
+        value,
+      })),
+    },
+  },
+  {
+    field: 'alarmType',
+    label: t('deviceManagement.device.alarmSceneText'),
+    component: 'Input',
+    colProps: { span: 6 },
+    componentProps: {
+      maxLength: 36,
+    },
+  },
+  {
+    field: 'alarmTime',
+    label: t('deviceManagement.device.alarmTimeText'),
+    component: 'RangePicker',
+    componentProps: {
+      showTime: { defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')] },
+    },
+    colProps: { span: 7 },
+  },
+  {
+    field: 'severity',
+    label: t('deviceManagement.device.alarmSeverityText'),
+    component: 'ApiSelect',
+    colProps: { span: 6 },
+    componentProps: {
+      api: findDictItemByCode,
+      params: {
+        dictCode: 'severity_type',
+      },
+      labelField: 'itemText',
+      valueField: 'itemValue',
+    },
+  },
+];
+export const alarmColumns: BasicColumn[] = [
+  {
+    title: t('deviceManagement.device.alarmTimeText'),
+    dataIndex: 'createdTime',
+    width: 180,
+  },
+  {
+    title: t('deviceManagement.device.alarmDeviceText'),
+    dataIndex: 'deviceName',
+    width: 120,
+    customRender: ({ record }) => {
+      const { deviceAlias, deviceName } = record || {};
+      return deviceAlias || deviceName;
+    },
+  },
+  {
+    title: t('deviceManagement.device.alarmSceneText'),
+    dataIndex: 'type',
+    width: 160,
+  },
+  {
+    title: t('deviceManagement.device.alarmSeverityText'),
+    dataIndex: 'severity',
+    width: 90,
+    format: (text) => alarmLevel(text),
+  },
+  {
+    title: t('deviceManagement.device.alarmDetailsText'),
+    dataIndex: 'details',
+    slots: { customRender: 'details' },
+    width: 160,
+  },
+  {
+    title: t('deviceManagement.device.statusText'),
+    dataIndex: 'status',
+    // format: (text) => statusType(text),
+    width: 100,
+  },
+];
+
+export const alarmSchemasForm: FormSchema[] = [
+  {
+    field: 'deviceName',
+    label: '告警设备',
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+    },
+  },
+
+  {
+    field: 'startTs',
+    label: '开始时间',
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+    },
+  },
+  {
+    field: 'endTs',
+    label: '结束时间',
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+    },
+  },
+  {
+    field: 'ackTs',
+    label: '处理时间',
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+    },
+    ifShow: ({ values }) => values.status === '激活已确认' || values.status === '清除已确认',
+  },
+  {
+    field: 'clearTs',
+    label: '清除时间',
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+    },
+    ifShow: ({ values }) => values.status === '清除已确认' || values.status === '清除未确认',
+  },
+  {
+    field: 'type',
+    label: '告警场景',
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+    },
+  },
+  {
+    field: 'severity',
+    label: '严重程度',
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+    },
+  },
+  {
+    field: 'status',
+    label: '状态',
+    component: 'Input',
+    componentProps: {
+      disabled: true,
+    },
+  },
+];
+// 子设备
+export const childDeviceSchemas: FormSchema[] = [
+  {
+    field: 'deviceState',
+    label: t('business.deviceStatusText'),
+    colProps: { span: 6 },
+    component: 'Select',
+    componentProps: {
+      maxLength: 255,
+      options: Object.values(DeviceStatusEnum).map((value) => ({
+        label: t(`enum.deviceStatus.${value}`),
+        value,
+      })),
+    },
+  },
+  {
+    field: 'name',
+    label: t('business.deviceNameText'),
+    component: 'Input',
+    colProps: { span: 6 },
+    componentProps: {
+      maxLength: 255,
+    },
+  },
+];
+
+const deviceStatusColorMapping = {
+  [DeviceStatusEnum.INACTIVE]: 'warning',
+  [DeviceStatusEnum.OFFLINE]: 'error',
+  [DeviceStatusEnum.ONLINE]: 'success',
+};
+export const childDeviceColumns: BasicColumn[] = [
+  {
+    title: t('deviceManagement.device.nameText'),
+    dataIndex: 'tbDeviceName',
+    width: 120,
+    slots: {
+      customRender: 'tbDeviceName',
+    },
+  },
+  {
+    title: t('deviceManagement.device.labelText'),
+    dataIndex: 'label',
+    width: 160,
+  },
+  {
+    title: t('deviceManagement.device.statusText'),
+    dataIndex: 'deviceState',
+    customRender: ({ text }) => {
+      return h(Tag, { color: deviceStatusColorMapping[text] }, () =>
+        t(`enum.deviceStatus.${text}`)
+      );
+    },
+    width: 160,
+  },
+  {
+    title: t('deviceManagement.device.latestConnectionTimeText'),
+    dataIndex: 'lastOnlineTime',
+    format: (text) => formatToDateTime(text, 'YYYY-MM-DD HH:mm:ss'),
+    width: 160,
+  },
+  {
+    title: t('common.updateTimeText'),
+    dataIndex: 'createdTime',
+    format: (text) => formatToDateTime(text, 'YYYY-MM-DD HH:mm:ss'),
+    width: 160,
+  },
+];
+
+export const alarmLevel = (type: string): string => {
+  const { t } = useI18n();
+
+  return t(`enum.alarmLevel.${type}`);
+};
+
+export const customerForm: FormSchema[] = [
+  {
+    field: 'customerId',
+    label: t('deviceManagement.device.assignCustomerText'),
+    component: 'ApiSelect',
+    componentProps: {
+      api: getCustomerList,
+      immediate: false,
+      labelField: 'realName',
+      valueField: 'customerId',
+    },
+    required: true,
+    colProps: { span: 12 },
+  },
+];
+
+export const orgForm: FormSchema[] = [
+  {
+    field: 'sensorOrganizationId',
+    label: t('deviceManagement.device.organizeArrayBased'),
+    component: 'Input',
+    ifShow: false,
+  },
+  {
+    field: 'organizationId',
+    component: 'OrgTreeSelect',
+    helpMessage: updateOrgHelpMessage,
+    label: t('deviceManagement.device.chooseOrganization'),
+    required: true,
+    componentProps: ({ formModel }) => {
+      return {
+        apiTreeSelectProps: {
+          params: {
+            organizationId: formModel?.sensorOrganizationId,
+          },
+        },
+      };
+    },
+  },
+];

+import { formatToDate } from '/@/utils/dateUtil';
+import { BasicColumn } from '/@/components/Table';
+import { FormSchema } from '/@/components/Table';
+import { DeviceRecord } from '/@/api/device/model/deviceModel';
+// import { deviceProfile } from '/@/api/device/deviceManager';
+import { h } from 'vue';
+import { Tag, Tooltip } from 'ant-design-vue';
+import { handeleCopy } from '../../../device/profiles/step/topic';
+import { useI18n } from '/@/hooks/web/useI18n';
+import { DeviceStatusEnum, DeviceTypeEnum } from '/@/enums/deviceEnum';
+
+const { t } = useI18n();
+import edgefornt from '/@/assets/icons/edgefornt.svg';
+
+export enum DeviceListAuthEnum {
+  /**
+   * @description 新增
+   */
+  CREATE = 'api:yt:device:post',
+
+  /**
+   * @description 删除
+   */
+  DELETE = 'api:yt:device:delete',
+
+  /**
+   * @description 编辑
+   */
+  UPDATE = 'api:yt:device:update',
+
+  /**
+   * @description 详情
+   */
+  DETAIL = 'api:yt:device:get',
+
+  /**
+   * @description 导入
+   */
+  IMPORT = 'api:yt:device:import',
+
+  /**
+   * @description 公开
+   */
+  PUBLIC = 'api:yt:device:public',
+
+  /**
+   * @description 上下线
+   */
+  ONLINE = 'api:yt:device:online:record',
+
+  /**
+   * @description 管理设备凭证
+   */
+  EQUIPMENT = 'api:yt:device:equipment',
+
+  /**
+   * @description 分配客户
+   */
+  ASSIGN = 'api:yt:device:assign',
+
+  /**
+   * @description 命令下发
+   */
+  RPC = 'api:yt:device:rpc',
+
+  /**
+   * @description 更新产品
+   */
+  UPDATE_PRODUCT = 'api:yt:device:update:product',
+}
+
+// 表格列数据
+export const columns: BasicColumn[] = [
+  {
+    title: t('business.deviceStatusText'),
+    dataIndex: 'deviceState',
+    width: 110,
+    className: 'device-status',
+    slots: { customRender: 'deviceState' },
+  },
+  {
+    title: t('business.deviceImageText'),
+    dataIndex: 'deviceInfo.avatar',
+    width: 70,
+    slots: { customRender: 'img' },
+  },
+  {
+    dataIndex: 'name',
+    title: t('deviceManagement.device.aliasNameText'),
+    width: 210,
+    slots: { customRender: 'name', title: 'deviceTitle' },
+    className: 'device-name-edge',
+    customRender: ({ record }) => {
+      return h('div', { class: 'py-3 px-3.5' }, [
+        record.alias &&
+          h(
+            'div',
+            {
+              class: 'cursor-pointer truncate',
+            },
+            h(
+              Tooltip,
+              {
+                placement: 'topLeft',
+                title: `${record.alias}`,
+              },
+              () => `${record.alias}`
+            )
+          ),
+        h(
+          'div',
+          {
+            class: 'cursor-pointer text-blue-500 truncate',
+            onClick: () => {
+              handeleCopy(`${record.name}`);
+            },
+          },
+          h(
+            Tooltip,
+            {
+              placement: 'topLeft',
+              title: `${record.name}`,
+            },
+            () => `${record.name}`
+          )
+        ),
+        record.isEdge
+          ? h('div', { class: 'absolute top-0 left-0', fill: '#1890ff' }, [
+              h('img', { src: edgefornt, class: 'w-12.5 h-12.5' }),
+              h(
+                'span',
+                {
+                  class:
+                    'absolute top-0.5 left-0.5 text-light-50 transform -rotate-45 translate-y-0 !text-10px',
+                },
+                t('common.edgeFlag')
+              ),
+            ])
+          : '',
+      ]);
+    },
+  },
+  {
+    title: t('business.deviceTypeText'),
+    dataIndex: 'deviceType',
+    width: 130,
+    customRender({ text }) {
+      return h(Tag, { color: 'success' }, () => t(`enum.deviceType.${text}`));
+    },
+  },
+  {
+    title: t('business.affiliatedProductText'),
+    dataIndex: 'deviceProfile.name',
+    width: 180,
+    slots: { customRender: 'deviceProfile' },
+    ellipsis: true,
+  },
+  {
+    title: t('business.affiliatedOrganizationText'),
+    dataIndex: 'organizationDTO.name',
+    width: 100,
+  },
+  // {
+  //   title: '客户',
+  //   dataIndex: 'customerName',
+  //   width: 100,
+  // },
+  {
+    title: t('business.publicText'),
+    dataIndex: 'public',
+    width: 100,
+    customRender({ record }: { record: DeviceRecord }) {
+      const flag = record?.customerAdditionalInfo?.isPublic;
+      return h(Tag, { color: flag ? 'blue' : 'orange' }, () =>
+        flag ? t('business.publicText') : t('business.privateText')
+      );
+    },
+  },
+  {
+    title: t('deviceManagement.device.lastOnlineTimeText'),
+    dataIndex: 'lastOnlineTime',
+    format: (text) => text && formatToDate(text, 'YYYY-MM-DD HH:mm:ss'),
+    width: 160,
+  },
+  {
+    title: t('deviceManagement.device.lastOfflineTimeText'),
+    dataIndex: 'lastOfflineTime',
+    format: (text) => {
+      return text ? formatToDate(text, 'YYYY-MM-DD HH:mm:ss') : '';
+    },
+    width: 160,
+  },
+];
+
+// 查询字段
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'code',
+    label: t('equipment.ledger.deviceCode'),
+    component: 'Input',
+    colProps: { span: 6 },
+    componentProps: {
+      maxLength: 255,
+    },
+  },
+  {
+    field: 'deviceType',
+    label: t('equipment.ledger.deviceType'),
+    component: 'Select',
+    componentProps: {
+      options: Object.values(DeviceTypeEnum).map((value) => ({
+        label: t(`enum.deviceType.${value}`),
+        value,
+      })),
+    },
+    colProps: { span: 6 },
+  },
+  {
+    field: 'deviceState',
+    label: t('business.deviceStatusText'),
+    component: 'Select',
+    componentProps: {
+      options: Object.values(DeviceStatusEnum).map((value) => ({
+        label: t(`enum.deviceStatus.${value}`),
+        value,
+      })),
+    },
+    colProps: { span: 6 },
+  }
+];

+<template>
+  <div>
+    <PageWrapper dense contentFullHeight contentClass="flex">
+      <OrganizationIdTree @select="handleSelect" ref="organizationIdTreeRef" />
+      <BasicTable style="flex: auto" @register="registerTable" class="w-5/6 xl:w-4/5 device-table">
+        <template #toolbar>
+          <Authority :value="DeviceListAuthEnum.CREATE">
+            <a-button type="primary" @click="handleCreate" v-if="authBtn(role)">
+              {{ t('equipment.ledger.createLedgerText') }}
+            </a-button>
+          </Authority>
+
+          <Authority :value="DeviceListAuthEnum.IMPORT">
+            <Button type="primary" >
+              {{ t('equipment.ledger.importLedgerText') }}
+            </Button>
+          </Authority>
+
+          <Authority
+            :value="[
+              DeviceListAuthEnum.DELETE,
+              DeviceListAuthEnum.ASSIGN,
+              DeviceListAuthEnum.UPDATE_PRODUCT,
+            ]"
+          >
+            <AuthDropDown
+              v-if="authBtn(role)"
+              :disabled="isPublicAndPrivateFlag || !isExistOption"
+              :dropMenuList="[
+                {
+                  text: t('common.delText'),
+                  auth: DeviceListAuthEnum.DELETE,
+                  icon: 'ant-design:delete-outlined',
+                  event: '',
+                  disabled: !batchPrivateFlag,
+                  popconfirm: {
+                    title: t('common.deleteConfirmText'),
+                    onConfirm: () => handleDelete(),
+                  },
+                },
+                {
+                  text: t('equipment.ledger.editProductText'),
+                  auth: DeviceListAuthEnum.UPDATE_PRODUCT,
+                  icon: 'clarity:note-edit-line',
+                  event: '',
+                  disabled: !batchPrivateFlag || batchUpdateProductFlag,
+                  onClick: handelOpenBatchUpdateProductModal,
+                },
+                {
+                  text: t('business.publicText'),
+                  icon: 'ant-design:wallet-outlined',
+                  event: '',
+                  disabled: !batchPrivateFlag,
+                  onClick: handleBatchPublic.bind(null),
+                },
+                {
+                  text: t('business.privateText'),
+                  icon: 'ant-design:wallet-outlined',
+                  event: '',
+                  disabled: batchPrivateFlag,
+                  onClick: handleBatchPrivate.bind(null),
+                },
+                {
+                  text: t('equipment.ledger.updateOrganization'),
+                  icon: 'ant-design:wallet-outlined',
+                  event: '',
+                  disabled: !batchPrivateFlag || batchSensorFlag || diffBatchSensorFlag,
+                  onClick: handleBatchOrg.bind(null),
+                },
+              ]"
+            >
+              <Button type="primary" :disabled="isPublicAndPrivateFlag || !isExistOption">
+                {{ t('equipment.ledger.batchActionText') }}
+              </Button>
+            </AuthDropDown>
+          </Authority>
+        </template>
+        <template #img="{ record }">
+          <TableImg
+            :size="30"
+            :showBadge="false"
+            :simpleShow="true"
+            :imgList="
+              typeof record?.deviceInfo?.avatar !== 'undefined' &&
+              record?.deviceInfo?.avatar !== '' &&
+              record?.deviceInfo?.avatar != null
+                ? [record.deviceInfo.avatar]
+                : null
+            "
+          />
+        </template>
+        <template #deviceProfile="{ record }">
+          <Button
+            @click="!isCustomer ? goDeviceProfile(record.deviceProfile.name) : null"
+            type="link"
+          >
+            {{ record.deviceProfile.name }}
+          </Button>
+        </template>
+        <template #deviceState="{ record }">
+          <div v-if="record.isCollect">
+            <div class="absolute top-0 left-0 device-collect"> </div>
+            <Icon
+              icon="ph:star-fill"
+              class="fill-light-50 absolute top-0.5 left-0.5"
+              color="#fff"
+              :size="12"
+            />
+          </div>
+
+          <Tag
+            :color="
+              record.deviceState == DeviceState.INACTIVE
+                ? 'warning'
+                : record.deviceState == DeviceState.ONLINE
+                ? 'success'
+                : record.deviceState == DeviceState.ACTIVE
+                ? 'success'
+                : 'error'
+            "
+            class="ml-2"
+          >
+            {{ t(`enum.deviceStatus.${record.deviceState}`) }}
+          </Tag>
+        </template>
+        <template #action="{ record }">
+          <TableAction
+            :actions="[
+              {
+                label: AlarmDetailActionButton({ hasAlarm: !!record.alarmStatus }),
+                icon: 'ant-design:eye-outlined',
+                auth: DeviceListAuthEnum.DETAIL,
+                // onClick: handleDetail.bind(null, record),
+              },
+              {
+                label: t('common.editText'),
+                auth: DeviceListAuthEnum.UPDATE,
+                icon: 'clarity:note-edit-line',
+                ifShow: authBtn(role),
+                // onClick: handleEdit.bind(null, record),
+              },
+            ]"
+            :dropDownActions="[
+              // record.customerId
+              //   ? {
+              //       label: t('deviceManagement.device.cancelAssignText'),
+              //       icon: 'mdi:account-arrow-left',
+              //       ifShow: authBtn(role) && !record?.customerAdditionalInfo?.isPublic,
+              //       auth: DeviceListAuthEnum.ASSIGN,
+              //       popConfirm: {
+              //         title: t('deviceManagement.device.cancelAssignConfirmText'),
+              //         confirm: handleCancelDispatchCustomer.bind(null, record),
+              //       },
+              //     }
+              //   : {
+              //       label: t('deviceManagement.device.assignCustomerText'),
+              //       icon: 'mdi:account-arrow-right',
+              //       ifShow: authBtn(role),
+              //       auth: DeviceListAuthEnum.ASSIGN,
+              //       onClick: handleDispatchCustomer.bind(null, record),
+              //     },
+              {
+                label: record?.customerAdditionalInfo?.isPublic
+                  ? t('business.privateText')
+                  : t('business.publicText'),
+                auth: DeviceListAuthEnum.PUBLIC,
+                icon: record?.customerAdditionalInfo?.isPublic
+                  ? 'ant-design:lock-outlined'
+                  : 'ant-design:unlock-outlined',
+                // onClick: handlePublicDevice.bind(null, record),
+              },
+              {
+                label: t('deviceManagement.device.onlineRecordText'),
+                auth: DeviceListAuthEnum.ONLINE,
+                icon: 'ant-design:rise-outlined',
+                // onClick: handleUpAndDownRecord.bind(null, record),
+              },
+              !record.isCollect
+                ? {
+                    label: t('deviceManagement.device.collectText'),
+                    icon: 'ant-design:heart-outlined',
+                    // onClick: handelCollect.bind(null, record),
+                  }
+                : {
+                    label: t('deviceManagement.device.cancelCollectText'),
+                    icon: 'ant-design:heart-outlined',
+                    popConfirm: {
+                      title: t('deviceManagement.device.cancelCollectConfirmText'),
+                      // confirm: handelCollect.bind(null, record),
+                    },
+                  },
+              {
+                label: t('common.delText'),
+                auth: DeviceListAuthEnum.DELETE,
+                icon: 'ant-design:delete-outlined',
+                ifShow: authBtn(role) && record.customerId === undefined,
+                color: 'error',
+                popConfirm: {
+                  title: !!record.isEdge
+                    ? t('common.edgeDeviceOperationConfirm')
+                    : t('common.deleteConfirmText'),
+                  confirm: handleDelete.bind(null, record),
+                },
+              },
+            ]"
+          />
+        </template>
+      </BasicTable>
+<!--      <LedgerDetailDrawer-->
+<!--        @register="registerDetailDrawer"-->
+<!--        @open-tb-device-detail="handleOpenTbDeviceDetail"-->
+<!--        @open-gateway-device-detail="handleOpenGatewayDetail"-->
+<!--      />-->
+    </PageWrapper>
+  </div>
+</template>
+<script setup lang="ts">
+import {CSSProperties, h, reactive, ref} from "vue";
+import { PageWrapper } from '/@/components/Page';
+const searchInfo = reactive<Recordable>({});
+const { organizationIdTreeRef, resetFn } = useResetOrganizationTree(searchInfo);
+import {BasicTable, TableAction, TableImg, useTable} from "/@/components/Table";
+import {OrganizationIdTree, useResetOrganizationTree} from "/@/views/common/organizationIdTree";
+import {
+  deleteDevice,
+  devicePage,
+  doBatchPrivateDevice,
+  doBatchPublicDevice
+} from "/@/api/device/deviceManager";
+import {
+  columns,
+  DeviceListAuthEnum,
+  searchFormSchema
+} from "/@/views/equipment/ledger/config/ledger.data";
+import {DeviceModel, DeviceRecord, DeviceState} from "/@/api/device/model/deviceModel";
+import {useI18n} from "/@/hooks/web/useI18n";
+import {authBtn} from "/@/enums/roleEnum";
+import {Badge, Button, Tag} from "ant-design-vue";
+import {Authority} from "/@/components/Authority";
+import {AuthDropDown} from "/@/components/Widget";
+import {getAuthCache} from "/@/utils/auth";
+import {USER_INFO_KEY} from "/@/enums/cacheEnum";
+import {useBatchOperation} from "/@/utils/useBatchOperation";
+import {useMessage} from "/@/hooks/web/useMessage";
+import {DataActionModeEnum} from "/@/enums/toolEnum";
+import {
+  BatchUpdateProductModalParamsType
+} from "/@/views/device/list/cpns/modal/BatchUpdateProductModal/index";
+import {useModal} from "/@/components/Modal";
+import Icon from "/@/components/Icon";
+// import LedgerDetailDrawer from "./cpns/modal/LedgerDetailDrawer.vue";
+const { t } = useI18n();
+const userInfo: any = getAuthCache(USER_INFO_KEY);
+const role: string = userInfo.roles[0];
+const isPublicAndPrivateFlag = ref(false);
+const batchPrivateFlag = ref(true);
+const batchUpdateProductFlag = ref(true);
+const batchSensorFlag = ref(false);
+const { createMessage } = useMessage();
+const diffBatchSensorFlag = ref(false);
+const [registerOrgModal, { openModal: openOrgodal }] = useModal();
+const [registerBatchUpdateProductModal, { openModal: openBatchUpdateProductModal }] = useModal();
+
+const AlarmDetailActionButton = ({ hasAlarm }: { hasAlarm?: boolean }) =>
+  h(
+    Badge,
+    { offset: [0, -5] },
+    {
+      default: () => h('span', { style: { color: '#377dff' } }, t('common.detailText')),
+      count: () =>
+        h(
+          'div',
+          {
+            style: {
+              visibility: hasAlarm ? 'visible' : 'hidden',
+              width: '14px',
+              height: '14px',
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+              border: '1px solid #f46161',
+              borderRadius: '50%',
+            } as CSSProperties,
+          },
+          h(Icon, { icon: 'mdi:bell-warning', color: '#f46161', size: 12 })
+        ),
+    }
+  );
+
+const [
+  registerTable,
+  {
+    reload,
+    setLoading,
+    setSelectedRowKeys,
+    getForm,
+    getSelectRowKeys,
+    getSelectRows,
+    getRowSelection,
+    clearSelectedRowKeys,
+  },
+] = useTable({
+  title: t('equipment.ledger.ledgerListText'),
+  api: devicePage,
+  columns,
+  beforeFetch: (params) => {
+    const { deviceProfileId } = params;
+    if (!deviceProfileId) return;
+    const obj = {
+      ...params,
+      ...{
+        deviceProfileIds: deviceProfileId ? [deviceProfileId] : null,
+      },
+    };
+    delete obj.deviceProfileId;
+    return obj;
+  },
+  formConfig: {
+    labelWidth: 140,
+    schemas: searchFormSchema,
+    resetFunc: resetFn,
+  },
+  useSearchForm: true,
+  showTableSetting: true,
+  bordered: true,
+  showIndexColumn: false,
+  rowKey: 'id',
+  searchInfo: searchInfo,
+  clickToRowSelect: false,
+  rowClassName: (record) => ((record as DeviceRecord).alarmStatus ? 'device-alarm-badge' : ''),
+  actionColumn: {
+    width: 200,
+    title: t('common.actionText'),
+    slots: { customRender: 'action' },
+    fixed: 'right',
+  },
+  rowSelection: {
+    type: 'checkbox',
+    getCheckboxProps: (record: DeviceModel) => {
+      return { disabled: !!record.customerId && record.customerName !== 'Public' };
+    },
+    onSelect(_record, _selected, selectedRows) {
+      const [firstItem] = selectedRows as DeviceRecord[];
+      const { deviceType } = firstItem || {};
+      batchUpdateProductFlag.value =
+        !selectedRows.length ||
+        !selectedRows.every((item) => (item as DeviceRecord).deviceType === deviceType);
+
+      batchPrivateFlag.value = selectedRows.some((item: DeviceRecord) => !item?.customerId);
+      const filterSensor = selectedRows.map((filterItem: DeviceRecord) => filterItem.deviceType);
+      batchSensorFlag.value =
+        filterSensor.includes('SENSOR') &&
+        (filterSensor.includes('DIRECT_CONNECTION') || filterSensor.includes('GATEWAY')); // 网关子和直连设备或者网关设备，则禁用组织修改
+      const filterGatewayId = selectedRows
+        .filter((filterItem: DeviceRecord) => filterItem.deviceType === 'SENSOR')
+        .map((mapItem: DeviceRecord) => mapItem.gatewayId);
+      diffBatchSensorFlag.value = [...new Set(filterGatewayId)].length > 1; // 数组长度大于1，说明选择的网关子设备所属网关为多个，则禁用组织修改
+      isPublicAndPrivateFlag.value =
+        selectedRows.some((item: DeviceRecord) => !item?.customerId) &&
+        selectedRows.some((item: DeviceRecord) => item?.customerAdditionalInfo?.isPublic);
+    },
+    onSelectAll(_selected, selectedRows) {
+      const [firstItem] = selectedRows as DeviceRecord[];
+      const { deviceType } = firstItem || {};
+      batchUpdateProductFlag.value =
+        !selectedRows.length ||
+        !selectedRows.every((item) => (item as DeviceRecord).deviceType === deviceType);
+
+      batchPrivateFlag.value = selectedRows.some((item) => !item?.customerId);
+      const filterSensor = selectedRows.map((filterItem) => filterItem.deviceType);
+      batchSensorFlag.value =
+        filterSensor.includes('SENSOR') &&
+        (filterSensor.includes('DIRECT_CONNECTION') || filterSensor.includes('GATEWAY')); // 网关子和直连设备或者网关设备，则禁用组织修改
+      const filterGatewayId = selectedRows
+        .filter((filterItem: DeviceRecord) => filterItem.deviceType === 'SENSOR')
+        .map((mapItem: DeviceRecord) => mapItem.gatewayId);
+      diffBatchSensorFlag.value = [...new Set(filterGatewayId)].length > 1; // 数组长度大于1，说明选择的网关子设备所属网关为多个，则禁用组织修改
+      isPublicAndPrivateFlag.value =
+        selectedRows.some((item) => !item?.customerId) &&
+        selectedRows.some((item) => item?.customerAdditionalInfo?.isPublic);
+    },
+  },
+});
+
+const { isExistOption } = useBatchOperation(getRowSelection, setSelectedRowKeys);
+function handleCreate() {
+  // openModal(true, {
+  //   isUpdate: false,
+  // });
+}
+
+// 批量公开设备
+const handleBatchPublic = async () => {
+  setLoading(true);
+  try {
+    const options = getSelectRows();
+    const tbDeviceIdJoinStr = options.map((item) => item.tbDeviceId).join(',');
+    const res = await doBatchPublicDevice(tbDeviceIdJoinStr);
+    createMessage.success(
+      res === '公开成功' ? t('common.publicSuccess') : t('common.publicError')
+    );
+  } finally {
+    handleReload();
+    setLoading(false);
+  }
+};
+
+function handleReload() {
+  setSelectedRowKeys([]);
+  handleSuccess();
+}
+
+// 批量私有设备
+const handleBatchPrivate = async () => {
+  setLoading(true);
+  try {
+    const options = getSelectRows();
+    const tbDeviceIdJoinStr = options.map((item) => item.tbDeviceId).join(',');
+    const res = await doBatchPrivateDevice(tbDeviceIdJoinStr);
+    createMessage.success(
+      res === '私有成功' ? t('common.privateSuccess') : t('common.privateError')
+    );
+  } finally {
+    handleReload();
+    setLoading(false);
+  }
+};
+
+const handleBatchOrg = () => {
+  const options = getSelectRows();
+  openOrgodal(true, options);
+};
+
+const handelOpenBatchUpdateProductModal = () => {
+  const rows: DeviceRecord[] = getSelectRows();
+  const [firstItem] = rows;
+
+  openBatchUpdateProductModal(true, {
+    mode: DataActionModeEnum.UPDATE,
+    record: {
+      sourceDeviceProfileName: firstItem.deviceProfile.name,
+      deviceType: firstItem.deviceType,
+      deviceIds: rows.map((item) => item.tbDeviceId),
+      deviceProfile: firstItem.deviceProfile,
+    },
+  } as BatchUpdateProductModalParamsType);
+};
+
+const handleDelete = async (record?: DeviceRecord) => {
+  let ids: string[] = [];
+  if (record) {
+    ids.push(record.id);
+  } else {
+    ids = getSelectRowKeys();
+  }
+  try {
+    setLoading(true);
+    await deleteDevice(ids);
+    createMessage.success(t('common.deleteSuccessText'));
+    handleReload();
+  } catch (error) {
+    throw error;
+  } finally {
+    setLoading(false);
+  }
+};
+
+function handleSuccess() {
+  reload();
+}
+
+function handleSelect(organization) {
+  searchInfo.organizationId = organization;
+  handleSuccess();
+}
+
+</script>
+
+<style scoped lang="less">
+.device-table {
+  :deep(.ant-form-item-control-input-content) {
+    & > div > div {
+      width: 100%;
+    }
+  }
+}
+</style>
+
+<style lang="less">
+.device-status {
+  position: relative;
+
+  .device-collect {
+    width: 0;
+    height: 0;
+    border-top: 30px solid #377dff;
+    border-right: 30px solid transparent;
+  }
+}
+
+.device-name-edge {
+  width: 100%;
+  height: 100%;
+  padding: 0 !important;
+  position: relative;
+}
+</style>