Merge branch 'ww' into 'main'

feat: 新增设备批量导入功能

See merge request yunteng/thingskit-front!507

+import { ImportDeviceParams, ImportDeviceResponse } from './model/batchImportModel';
+import { defHttp } from '/@/utils/http/axios';
+
+enum BatchImportApi {
+  IMPORT = '/device/batch_import',
+}
+
+export const batchImportDevice = (data: ImportDeviceParams) => {
+  return defHttp.post<ImportDeviceResponse>(
+    {
+      url: BatchImportApi.IMPORT,
+      data,
+    },
+    { joinPrefix: false }
+  );
+};

+import { DeviceTypeEnum } from './deviceModel';
+
+export interface ImportDeviceParams {
+  file: string;
+  tkDeviceProfileId: string;
+  organizationId: string;
+  deviceTypeEnum: DeviceTypeEnum;
+  mapping: {
+    columns: Record<'type', string>[];
+    delimiter: string;
+    header: boolean;
+    update: boolean;
+  };
+}
+
+export interface ImportDeviceResponse {
+  created: number;
+  updated: number;
+  errors: number;
+  errorsList: [];
+}

+<script lang="ts" setup>
+  import { Button } from 'ant-design-vue';
+  import { nextTick, onMounted, ref } from 'vue';
+  import { basicInfoForm, FieldsEnum } from './config';
+  import { basicProps } from './props';
+  import StepContainer from './StepContainer.vue';
+  import { BasicForm, useForm } from '/@/components/Form';
+
+  const props = defineProps({
+    ...basicProps,
+    value: {
+      required: true,
+    },
+  });
+
+  const emit = defineEmits(['update:value']);
+
+  const canGoNext = ref(false);
+  const [register, { getFieldsValue, setFieldsValue }] = useForm({
+    schemas: basicInfoForm,
+    layout: 'vertical',
+    showActionButtonGroup: false,
+    submitFunc: async () => {
+      await nextTick();
+      const values = getFieldsValue() || {};
+      canGoNext.value =
+        Reflect.has(values, FieldsEnum.ORGANIZATION_ID) &&
+        Reflect.has(values, FieldsEnum.TK_DEVICE_PROFILE_ID);
+    },
+  });
+
+  const handleGoNext = () => {
+    emit('update:value', getFieldsValue());
+    props.goNextStep?.();
+  };
+
+  onMounted(() => {
+    setFieldsValue(props.value || {});
+  });
+</script>
+
+<template>
+  <StepContainer>
+    <BasicForm @register="register" />
+    <div class="flex justify-end gap-2">
+      <Button type="primary" @click="handleGoNext" :disabled="!canGoNext">下一步</Button>
+    </div>
+  </StepContainer>
+</template>

+<script lang="ts" setup>
+  import { Select, Button } from 'ant-design-vue';
+  import { basicProps } from './props';
+  import StepContainer from './StepContainer.vue';
+  import { BasicTable, useTable } from '/@/components/Table';
+  import {
+    columnTypeSchema,
+    ColumnFileEnum,
+    ColumTypeEnum,
+    generateColumnTypeOptions,
+  } from './config';
+  import { nextTick, onMounted, ref, unref, watch } from 'vue';
+  import { ColumnDataRecord, Options, UploadFileParseValue } from './type';
+  import { DEVICE_NAME_INDEX } from './const';
+  import { buildUUID } from '/@/utils/uuid';
+
+  const props = defineProps({
+    ...basicProps,
+    value: {
+      required: true,
+      type: Array as PropType<Record<'type', string>[]>,
+    },
+    fileParseValue: {
+      require: true,
+      type: Object as PropType<UploadFileParseValue>,
+    },
+  });
+
+  const emit = defineEmits(['update:value']);
+
+  const columnTypeRepeatWhiteList = [
+    ColumTypeEnum.SERVER_ATTRIBUTE,
+    ColumTypeEnum.SHARED_ATTRIBUTE,
+    ColumTypeEnum.TIMESERIES,
+  ];
+
+  const [register, { setProps, getDataSource }] = useTable({
+    size: 'small',
+    rowKey: 'id',
+    showIndexColumn: false,
+    columns: columnTypeSchema,
+    resizeHeightOffset: -300,
+  });
+
+  const parseValueToTableData = () => {
+    const { header = [], content = [] } = props.fileParseValue || {};
+    const exampleRow = content.at(0) || {};
+
+    const getColumnType = (index: number) => {
+      return index === DEVICE_NAME_INDEX ? ColumTypeEnum.NAME : ColumTypeEnum.SERVER_ATTRIBUTE;
+    };
+
+    const dataSource = header.map((columnKey, index) => {
+      return {
+        [ColumnFileEnum.EXAMPLE_VALUE]: exampleRow[columnKey],
+        [ColumnFileEnum.TYPE]: getColumnType(index),
+        [ColumnFileEnum.KEY]: columnKey,
+        id: buildUUID(),
+      } as ColumnDataRecord;
+    });
+
+    setProps({
+      dataSource,
+      pagination: { pageSize: dataSource.length },
+      maxHeight: 40 * dataSource.length,
+    });
+  };
+
+  const columnTypeOptions = ref(generateColumnTypeOptions());
+
+  const handleDisableSelectedOption = () => {
+    let dataSource = getDataSource().reduce<string[]>(
+      (prev, next) => [...prev, next[ColumnFileEnum.TYPE], next[ColumnFileEnum.OLD_VALUE]],
+      []
+    );
+
+    dataSource = [...new Set(dataSource.filter(Boolean))];
+
+    const disableSelectedOptions = (
+      options: Options[],
+      whiteList: string[] = columnTypeRepeatWhiteList
+    ) => {
+      for (const item of options) {
+        if (item.options?.length) {
+          disableSelectedOptions(item.options);
+          continue;
+        }
+        if (whiteList.includes(item.value!)) continue;
+        item.disabled = dataSource.includes(item.value!);
+      }
+    };
+
+    disableSelectedOptions(unref(columnTypeOptions));
+  };
+
+  const getColumnNeedDisabled = (index: number) => {
+    return index === DEVICE_NAME_INDEX;
+  };
+
+  const handleGoPreviousStep = () => {
+    props.goPreviousStep?.();
+  };
+
+  const handleGoNextStep = () => {
+    const columns = getDataSource<ColumnDataRecord>().map((item) => ({ type: item.type }));
+    emit('update:value', columns);
+    props.goNextStep?.();
+  };
+
+  watch(
+    () => props.fileParseValue,
+    () => {
+      parseValueToTableData();
+    }
+  );
+
+  onMounted(async () => {
+    parseValueToTableData();
+    await nextTick();
+    handleDisableSelectedOption();
+  });
+</script>
+
+<template>
+  <StepContainer>
+    <BasicTable class="import-device-column-type-table" @register="register">
+      <template #type="{ record, index }">
+        <section
+          class="select-column-type-container flex relative"
+          :class="!record.editable && 'justify-center'"
+        >
+          <Select
+            v-model:value="record[ColumnFileEnum.TYPE]"
+            @change="handleDisableSelectedOption"
+            :disabled="getColumnNeedDisabled(index)"
+            :options="columnTypeOptions"
+            :dropdown-match-select-width="false"
+          />
+        </section>
+      </template>
+      <template #key="{ record }">
+        <div>
+          <span>{{ record[ColumnFileEnum.KEY] }}</span>
+        </div>
+      </template>
+    </BasicTable>
+    <section class="flex justify-end gap-4 mt-4">
+      <Button type="primary" @click="handleGoPreviousStep">上一步</Button>
+      <Button type="primary" @click="handleGoNextStep">下一步</Button>
+    </section>
+  </StepContainer>
+</template>
+
+<style lang="less" scoped>
+  .import-device-column-type-table {
+    .ant-select {
+      width: 80%;
+    }
+  }
+</style>
+
+<style lang="less">
+  .import-device-column-type-table {
+    .ant-select,
+    .ant-input,
+    .ant-select-selector {
+      height: 22px !important;
+    }
+
+    .ant-select-selection-item {
+      line-height: 22px !important;
+    }
+  }
+</style>

+<script lang="ts" setup>
+  import StepContainer from './StepContainer.vue';
+  import { ImportDeviceResponse } from '/@/api/device/model/batchImportModel';
+
+  const props = defineProps({
+    value: {
+      required: true,
+      type: Object as PropType<ImportDeviceResponse>,
+    },
+  });
+</script>
+
+<template>
+  <StepContainer>
+    <div>创建成功:{{ props.value.created }}</div>
+    <div>错误:{{ props.value.errors }}</div>
+    <div>错误列表:{{ props.value.errorsList }}</div>
+    <div>更新:{{ props.value.updated }}</div>
+  </StepContainer>
+</template>

+<script lang="ts" setup>
+  import { Spin } from 'ant-design-vue';
+  import { onMounted, ref } from 'vue';
+  import { DelimiterEnum } from './config';
+  import { basicProps } from './props';
+  import StepContainer from './StepContainer.vue';
+  import { CreateEntityValue, UploadFileParseValue } from './type';
+  import { batchImportDevice } from '/@/api/device/batchImport';
+  import { ImportDeviceParams, ImportDeviceResponse } from '/@/api/device/model/batchImportModel';
+
+  const props = defineProps({
+    ...basicProps,
+    value: {
+      required: true,
+      type: Object as PropType<CreateEntityValue>,
+    },
+    result: {
+      required: true,
+      type: Object as PropType<ImportDeviceResponse>,
+    },
+  });
+
+  const emit = defineEmits(['update:result']);
+
+  const spinning = ref(true);
+
+  const sleep = (time: number) => {
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        resolve(time);
+      }, time);
+    });
+  };
+
+  const submit = async () => {
+    spinning.value = true;
+    try {
+      const value = transfromData(JSON.parse(JSON.stringify(props.value)));
+      const result = await batchImportDevice(value);
+      await sleep(3000);
+      emit('update:result', result);
+      props.goNextStep?.();
+    } catch (error) {
+      throw error;
+    } finally {
+      spinning.value = false;
+    }
+  };
+
+  const insertDeviceTypeName = (
+    deviceTypeName: string,
+    fileParseValue: UploadFileParseValue,
+    columns: Record<'type', string>[]
+  ): { file: string; columns: Record<'type', string>[] } => {
+    const { header, content } = fileParseValue;
+    const insertIndex = 1;
+
+    const csvArray = content.map((item) => header.map((key) => item[key]) as string[]);
+    for (const item of csvArray) {
+      item.splice(insertIndex, 0, deviceTypeName);
+    }
+
+    const _header = [...header];
+    _header.splice(insertIndex, 0, deviceTypeName);
+    csvArray.unshift(_header);
+    const file = csvArray.map((item) => item.join(DelimiterEnum.COMMA)).join('\n');
+
+    columns.splice(insertIndex, 0, { type: 'TYPE' });
+
+    return {
+      file,
+      columns,
+    };
+  };
+
+  const transfromData = (data: CreateEntityValue) => {
+    const { basicInfo, columnConfiguration, fileParseValue } = data;
+    const { tkDeviceProfileId, organizationId, deviceTypeEnum, deviceTypeName } = basicInfo;
+    const { file, columns } = insertDeviceTypeName(
+      deviceTypeName,
+      fileParseValue,
+      columnConfiguration
+    );
+    return {
+      file,
+      tkDeviceProfileId,
+      organizationId,
+      deviceTypeEnum,
+      mapping: {
+        columns: columns,
+        delimiter: DelimiterEnum.COMMA,
+        header: true,
+        update: true,
+      },
+    } as ImportDeviceParams;
+  };
+
+  onMounted(() => {
+    submit();
+  });
+</script>
+
+<template>
+  <StepContainer class="flex justify-center">
+    <Spin :spinning="spinning" tip="正在创建..." />
+  </StepContainer>
+</template>

+<script lang="ts" setup>
+  import { Button } from 'ant-design-vue';
+  import { importConfigurationSchema } from './config';
+  import { basicProps } from './props';
+  import StepContainer from './StepContainer.vue';
+  import { BasicForm, useForm } from '/@/components/Form';
+  const props = defineProps({
+    ...basicProps,
+  });
+
+  const [register] = useForm({
+    schemas: importConfigurationSchema,
+    showActionButtonGroup: false,
+    labelWidth: 120,
+    layout: 'vertical',
+  });
+
+  const handlePreviousStep = () => {
+    props.goNextStep?.();
+  };
+
+  const handleNextStep = () => {
+    props.goNextStep?.();
+  };
+</script>
+
+<template>
+  <StepContainer>
+    <BasicForm class="import-configuration-form" @register="register" />
+    <div class="flex justify-end gap-4 mt-4">
+      <Button type="primary" @click="handlePreviousStep">上一步</Button>
+      <Button type="primary" @click="handleNextStep">下一步</Button>
+    </div>
+  </StepContainer>
+</template>
+
+<style lang="less">
+  .import-configuration-form {
+    .ant-row {
+      > .ant-col:nth-of-type(2),
+      > .ant-col:nth-of-type(3) {
+        > .ant-row {
+          flex-direction: row;
+          align-items: center;
+
+          .ant-form-item-label {
+            padding: 0 !important;
+          }
+        }
+      }
+    }
+  }
+</style>

+<script lang="ts" setup>
+  import { Upload, Button } from 'ant-design-vue';
+  import { InboxOutlined } from '@ant-design/icons-vue';
+  import { computed, ref } from 'vue';
+  import StepContainer from './StepContainer.vue';
+  import XLSX, { CellObject } from 'xlsx';
+  import { basicProps } from './props';
+  import { UploadFileParseValue } from './type';
+
+  const props = defineProps({
+    ...basicProps,
+    value: {
+      require: true,
+      type: Object as PropType<UploadFileParseValue>,
+    },
+  });
+
+  const emit = defineEmits(['update:value']);
+
+  const fileList = ref<Record<'uid' | 'name', string>[]>([]);
+
+  interface FileRequestParams {
+    file: File & { uid: string };
+    onSuccess: Fn;
+    onProgress: Fn;
+    onError: Fn;
+    status: string;
+  }
+
+  const readFile = async (file: File): Promise<UploadFileParseValue | boolean> => {
+    /**
+     * @description 读取表头
+     * @param sheet 工作表
+     * @param range 区间
+     * @param headerRow 表头行
+     */
+    const getTableHeader = (sheet: XLSX.WorkSheet, range: [number, number], headerRow = 1) => {
+      const [startColumn, endColumn] = range;
+      const header: string[] = [];
+      for (let i = startColumn; i <= endColumn; i++) {
+        const columnIndex = XLSX.utils.encode_col(i) + headerRow;
+        const value = (sheet[columnIndex] as CellObject).v;
+        header.push(value as string);
+      }
+      return header;
+    };
+
+    return new Promise((resolve, reject) => {
+      const fileReader = new FileReader();
+      fileReader.onload = (event: ProgressEvent) => {
+        const data = (event.target as FileReader).result as string;
+        const result = XLSX.read(data, { type: 'string' });
+
+        const sheetName = result.SheetNames.at(0);
+        const workbook = result.Sheets;
+        const sheet = workbook[sheetName as string];
+        const sheetRange = sheet['!ref'];
+
+        const {
+          s: { c: startColumn },
+          e: { c: endColumn },
+        } = XLSX.utils.decode_range(sheetRange!);
+
+        const header = getTableHeader(sheet, [startColumn, endColumn]);
+        const content = XLSX.utils.sheet_to_json(sheet, { range: sheetRange }) as Recordable[];
+        resolve({ header, content });
+      };
+
+      fileReader.onerror = () => {
+        reject(false);
+      };
+      fileReader.readAsText(file);
+    });
+  };
+
+  const handleParseFile = async ({ file, onSuccess, onError }: FileRequestParams) => {
+    fileList.value = [];
+    const value = await readFile(file);
+    if (!value) {
+      onError();
+      return;
+    }
+    fileList.value = [file];
+    emit('update:value', value);
+    onSuccess({}, file);
+  };
+
+  const canGoNextStep = computed(() => {
+    return !!fileList.value.length;
+  });
+
+  const handlePreviousStep = () => {
+    props.goPreviousStep?.();
+  };
+
+  const handleNextStep = () => {
+    props.goNextStep?.();
+  };
+</script>
+
+<template>
+  <StepContainer>
+    <div class="">设备文件</div>
+    <Upload.Dragger :fileList="fileList" :customRequest="handleParseFile" accept=".csv" name="file">
+      <section class="cursor-pointer flex flex-col justify-center items-center">
+        <InboxOutlined class="text-[4rem] !text-blue-400" />
+        <div class="text-gray-500">点击上传或拖拽上传</div>
+      </section>
+    </Upload.Dragger>
+    <div class="flex justify-end gap-4 mt-4">
+      <Button type="primary" @click="handlePreviousStep">上一步</Button>
+      <Button type="primary" @click="handleNextStep" :disabled="!canGoNextStep">下一步</Button>
+    </div>
+  </StepContainer>
+</template>

+<script lang="ts" setup>
+  import { Card } from 'ant-design-vue';
+</script>
+<template>
+  <Card class="!my-4 border border-dashed border-gray-100 border-2 w-full h-full" :bordered="false">
+    <slot></slot>
+  </Card>
+</template>

+import { Options } from './type';
+import { getDeviceProfile } from '/@/api/alarm/position';
+import { getOrganizationList } from '/@/api/system/system';
+import { FormSchema } from '/@/components/Form';
+import { BasicColumn } from '/@/components/Table';
+import { copyTransFun } from '/@/utils/fnUtils';
+
+export enum FieldsEnum {
+  ORGANIZATION_ID = 'organizationId',
+  TK_DEVICE_PROFILE_ID = 'tkDeviceProfileId',
+  DEVICE_TYPE_ENUM = 'deviceTypeEnum',
+  DEVICE_TYPE_NAME = 'deviceTypeName',
+  DELIMITER = 'delimiter',
+  HEADER = 'header',
+  UPDATE = 'update',
+}
+
+export enum DelimiterEnum {
+  COMMA = ',',
+  SEMICOLON = ';',
+  VERTICAL_LINE = '|',
+  TAB = 'Tab',
+}
+
+export enum DelimiterNameEnum {
+  ',' = 'COMMA',
+  ';' = 'SEMICOLON',
+  '|' = 'VERTICAL_LINE',
+  'Tab' = 'TAB',
+}
+
+export enum ColumnFileEnum {
+  EXAMPLE_VALUE = 'exampleValue',
+  TYPE = 'type',
+  KEY = 'key',
+  OLD_VALUE = 'oldValue',
+}
+
+export enum ColumTypeEnum {
+  NAME = 'NAME',
+  // TYPE = 'TYPE',
+  LABEL = 'LABEL',
+  DESCRIPTION = 'DESCRIPTION',
+  SHARED_ATTRIBUTE = 'SHARED_ATTRIBUTE',
+  SERVER_ATTRIBUTE = 'SERVER_ATTRIBUTE',
+  TIMESERIES = 'TIMESERIES',
+  IS_GATEWAY = 'IS_GATEWAY',
+}
+
+export enum CredentialsEnum {
+  ACCESS_TOKEN = 'ACCESS_TOKEN',
+  X509 = 'X509',
+  MQTT_CLIENT_ID = 'MQTT_CLIENT_ID',
+  MQTT_USER_NAME = 'MQTT_USER_NAME',
+  MQTT_PASSWORD = 'MQTT_PASSWORD',
+  LWM2M_CLIENT_ENDPOINT = 'LWM2M_CLIENT_ENDPOINT',
+  LWM2M_CLIENT_SECURITY_CONFIG_MODE = 'LWM2M_CLIENT_SECURITY_CONFIG_MODE',
+  LWM2M_CLIENT_IDENTITY = 'LWM2M_CLIENT_IDENTITY',
+  LWM2M_CLIENT_KEY = 'LWM2M_CLIENT_KEY',
+  LWM2M_CLIENT_CERT = 'LWM2M_CLIENT_CERT',
+  LWM2M_BOOTSTRAP_SERVER_SECURITY_MODE = 'LWM2M_BOOTSTRAP_SERVER_SECURITY_MODE',
+  LWM2M_BOOTSTRAP_SERVER_PUBLIC_KEY_OR_ID = 'LWM2M_BOOTSTRAP_SERVER_PUBLIC_KEY_OR_ID',
+  LWM2M_BOOTSTRAP_SERVER_SECRET_KEY = 'LWM2M_BOOTSTRAP_SERVER_SECRET_KEY',
+  LWM2M_SERVER_SECURITY_MODE = 'LWM2M_SERVER_SECURITY_MODE',
+  LWM2M_SERVER_CLIENT_PUBLIC_KEY_OR_ID = 'LWM2M_SERVER_CLIENT_PUBLIC_KEY_OR_ID',
+  LWM2M_SERVER_CLIENT_SECRET_KEY = 'LWM2M_SERVER_CLIENT_SECRET_KEY',
+}
+
+export enum ColumnTypeNameEnum {
+  NAME = '名称',
+  // TYPE = '类型',
+  LABEL = '标签',
+  DESCRIPTION = '说明',
+  SHARED_ATTRIBUTE = '共享属性',
+  SERVER_ATTRIBUTE = '服务器属性',
+  TIMESERIES = 'Timeseries',
+  IS_GATEWAY = 'Is网关',
+}
+
+export enum CredentialsNameEnum {
+  ACCESS_TOKEN = '访问令牌',
+  X509 = 'X.509',
+  MQTT_CLIENT_ID = 'MQTT client ID',
+  MQTT_USER_NAME = 'MQTT user name',
+  MQTT_PASSWORD = 'MQTT password',
+  LWM2M_CLIENT_ENDPOINT = 'LwM2M endpoint client name',
+  LWM2M_CLIENT_SECURITY_CONFIG_MODE = 'LwM2M security config mode',
+  LWM2M_CLIENT_IDENTITY = 'LwM2M client identity',
+  LWM2M_CLIENT_KEY = 'LwM2M client key',
+  LWM2M_CLIENT_CERT = 'LwM2M client public key',
+  LWM2M_BOOTSTRAP_SERVER_SECURITY_MODE = 'LwM2M bootstrap server security mode',
+  LWM2M_BOOTSTRAP_SERVER_PUBLIC_KEY_OR_ID = 'LwM2M bootstrap server public key or id',
+  LWM2M_BOOTSTRAP_SERVER_SECRET_KEY = 'LwM2M bootstrap server secret key',
+  LWM2M_SERVER_SECURITY_MODE = 'LwM2M server security mode',
+  LWM2M_SERVER_CLIENT_PUBLIC_KEY_OR_ID = 'LwM2M server public key or id',
+  LWM2M_SERVER_CLIENT_SECRET_KEY = 'LwM2M server secret key',
+}
+
+export const basicInfoForm: FormSchema[] = [
+  {
+    field: FieldsEnum.ORGANIZATION_ID,
+    label: '所属组织',
+    component: 'ApiTreeSelect',
+    rules: [{ required: true, message: '所属组织为必填项' }],
+    componentProps: ({ formActionType }) => {
+      const { submit } = formActionType;
+      return {
+        maxLength: 250,
+        placeholder: '请选择所属组织',
+        api: async () => {
+          const data = (await getOrganizationList()) as unknown as Recordable[];
+          copyTransFun(data);
+          return data;
+        },
+        getPopupContainer: () => document.body,
+        onChange: () => submit(),
+      };
+    },
+  },
+  {
+    field: FieldsEnum.TK_DEVICE_PROFILE_ID,
+    component: 'ApiSelect',
+    label: '产品',
+    rules: [{ required: true, message: '产品为必填项' }],
+    componentProps: ({ formActionType }) => {
+      const { submit, setFieldsValue } = formActionType;
+      return {
+        api: getDeviceProfile,
+        labelField: 'name',
+        valueField: 'id',
+        placeholder: '请选择产品',
+        getPopupContainer: () => document.body,
+        onChange: (value: string, options: Record<'deviceType' | 'label', string>) => {
+          value &&
+            setFieldsValue({
+              [FieldsEnum.DEVICE_TYPE_ENUM]: options.deviceType,
+              [FieldsEnum.DEVICE_TYPE_NAME]: options.label,
+            });
+          submit();
+        },
+      };
+    },
+  },
+  {
+    field: FieldsEnum.DEVICE_TYPE_ENUM,
+    component: 'Input',
+    label: '设备类型',
+    show: false,
+  },
+  {
+    field: FieldsEnum.DEVICE_TYPE_NAME,
+    component: 'Input',
+    label: '设备名称',
+    show: false,
+  },
+];
+
+export const importConfigurationSchema: FormSchema[] = [
+  {
+    field: FieldsEnum.DELIMITER,
+    label: 'csv分隔符',
+    component: 'Select',
+    rules: [{ required: true, message: 'csv分隔符为必填项' }],
+    defaultValue: DelimiterEnum.COMMA,
+    componentProps: {
+      options: [
+        { label: DelimiterEnum.COMMA, value: DelimiterEnum.COMMA },
+        { label: DelimiterEnum.SEMICOLON, value: DelimiterEnum.SEMICOLON },
+        { label: DelimiterEnum.VERTICAL_LINE, value: DelimiterEnum.VERTICAL_LINE },
+        { label: DelimiterEnum.TAB, value: DelimiterEnum.TAB },
+      ],
+    },
+  },
+  {
+    field: FieldsEnum.HEADER,
+    label: '第一行包含列名',
+    component: 'Checkbox',
+    defaultValue: true,
+  },
+  {
+    field: FieldsEnum.UPDATE,
+    label: '更新属性/遥测',
+    component: 'Checkbox',
+    defaultValue: true,
+  },
+];
+
+export const generateColumnTypeOptions = () => {
+  const valueOptions = Object.keys(ColumTypeEnum);
+  const labelOptions = Object.values(ColumnTypeNameEnum);
+  const credentialsValueOptions = Object.keys(CredentialsEnum);
+  const credentialsNameOptions = Object.values(CredentialsNameEnum);
+  const options: Options[] = valueOptions.map((value, index) => ({
+    label: labelOptions[index],
+    value,
+  }));
+
+  const credentialsOption: Options = {
+    label: 'credentials',
+    options: credentialsValueOptions.map((value, index) => ({
+      label: credentialsNameOptions[index],
+      value: value,
+    })) as Options[],
+  };
+  options.push(credentialsOption);
+
+  return options;
+};
+
+export const columnTypeSchema: BasicColumn[] = [
+  {
+    title: '列名称',
+    key: ColumnFileEnum.KEY,
+    dataIndex: ColumnFileEnum.KEY,
+    slots: {
+      customRender: ColumnFileEnum.KEY,
+    },
+  },
+  {
+    title: '列类型',
+    dataIndex: ColumnFileEnum.TYPE,
+    key: ColumnFileEnum.TYPE,
+    slots: {
+      customRender: ColumnFileEnum.TYPE,
+    },
+  },
+];
+
+export const assemblyData = () => {};

+export const DEVICE_NAME_INDEX = 0;
+export const DEVICE_TYPE_INDEX = 1;

+<script lang="ts" setup>
+  import { computed, ref, unref } from 'vue';
+  import { BasicModal, useModal } from '/@/components/Modal';
+  import { Steps } from 'ant-design-vue';
+  import BasicInfoForm from './BasicInfoForm.vue';
+  import ImportCsv from './ImportCsv.vue';
+  import { CreateEntityValue, UploadFileParseValue } from './type';
+  import ColumnType from './ColumnType.vue';
+  import CreateEntity from './CreateEntity.vue';
+  import CompleteResult from './CompleteResult.vue';
+  import { ImportDeviceResponse } from '/@/api/device/model/batchImportModel';
+
+  const emit = defineEmits(['importFinally']);
+
+  const [register] = useModal();
+
+  const basicInfo = ref({});
+
+  const fileParseValue = ref<UploadFileParseValue>({ header: [], content: [] });
+
+  const columnConfiguration = ref<Record<'type', string>[]>([]);
+
+  const importResult = ref<ImportDeviceResponse>({} as unknown as ImportDeviceResponse);
+
+  const assemblyData = computed(() => {
+    return {
+      basicInfo: unref(basicInfo),
+      fileParseValue: unref(fileParseValue),
+      columnConfiguration: unref(columnConfiguration),
+    } as CreateEntityValue;
+  });
+
+  enum StepsEnum {
+    BASIC_INFO,
+    IMPORT_FILE,
+    COLUMN_CONFIGURATION,
+    CREATE_ENTITY,
+    FINISH,
+  }
+
+  enum StepsNameEnum {
+    BASIC_INFO = '基本信息',
+    IMPORT_FILE = '选择一个文件',
+    COLUMN_CONFIGURATION = '选择列类型',
+    CREATE_ENTITY = '创建新实体',
+    FINISH = '完成',
+  }
+
+  const currentStep = ref<StepsEnum>(StepsEnum.BASIC_INFO);
+
+  const goNextStep = () => {
+    if (unref(currentStep) >= StepsEnum.FINISH) return;
+    currentStep.value = unref(currentStep) + 1;
+  };
+
+  const goPreviousStep = () => {
+    if (unref(currentStep) <= StepsEnum.BASIC_INFO) return;
+    currentStep.value = unref(currentStep) - 1;
+  };
+
+  const reset = () => {
+    basicInfo.value = {};
+    fileParseValue.value = { header: [], content: [] };
+    columnConfiguration.value = [];
+    importResult.value = {} as unknown as ImportDeviceResponse;
+  };
+
+  const handleCancel = async () => {
+    if (unref(currentStep) === StepsEnum.FINISH) {
+      emit('importFinally');
+    }
+    currentStep.value = StepsEnum.BASIC_INFO;
+    reset();
+    return true;
+  };
+</script>
+
+<template>
+  <BasicModal
+    title="导入设备"
+    @register="register"
+    width="60%"
+    wrap-class-name="import-device-modal"
+    :show-ok-btn="false"
+    cancel-text="关闭"
+    :close-func="handleCancel"
+    :destroy-on-close="true"
+  >
+    <section class="overflow-auto">
+      <Steps direction="vertical" :current="currentStep">
+        <Steps.Step
+          v-for="item in Object.keys(StepsEnum).filter((key) => isNaN(key as unknown as number))"
+          :key="item"
+        >
+          <template #title>
+            <div>
+              {{ StepsNameEnum[item] }}
+            </div>
+            <BasicInfoForm
+              v-if="StepsEnum[item] === StepsEnum.BASIC_INFO && StepsEnum[item] === currentStep"
+              v-model:value="basicInfo"
+              :go-next-step="goNextStep"
+              :go-previous-step="goPreviousStep"
+            />
+            <ImportCsv
+              v-if="StepsEnum[item] === StepsEnum.IMPORT_FILE && StepsEnum[item] === currentStep"
+              v-model:value="fileParseValue"
+              :go-next-step="goNextStep"
+              :go-previous-step="goPreviousStep"
+            />
+            <ColumnType
+              v-model:value="columnConfiguration"
+              v-if="
+                StepsEnum[item] === StepsEnum.COLUMN_CONFIGURATION &&
+                StepsEnum[item] === currentStep
+              "
+              :file-parse-value="fileParseValue"
+              :go-next-step="goNextStep"
+              :go-previous-step="goPreviousStep"
+            />
+            <CreateEntity
+              v-model:result="importResult"
+              :value="assemblyData"
+              v-if="StepsEnum[item] === StepsEnum.CREATE_ENTITY && StepsEnum[item] === currentStep"
+              :go-next-step="goNextStep"
+              :go-previous-step="goPreviousStep"
+            />
+            <CompleteResult
+              v-if="StepsEnum[item] === StepsEnum.FINISH && StepsEnum[item] === currentStep"
+              :value="importResult"
+            />
+          </template>
+        </Steps.Step>
+      </Steps>
+    </section>
+  </BasicModal>
+</template>
+
+<style lang="less">
+  .import-device-modal {
+    .ant-steps-item-title {
+      width: 100%;
+    }
+  }
+</style>

+export const basicProps = {
+  goPreviousStep: {
+    required: true,
+    type: Function as PropType<Fn>,
+  },
+  goNextStep: {
+    required: true,
+    type: Function as PropType<Fn>,
+  },
+};

+import { ColumnFileEnum } from './config';
+
+export interface UploadFileParseValue {
+  header: string[];
+  content: Recordable[];
+}
+
+export interface ColumnDataRecord extends Record<ColumnFileEnum, string> {
+  editable?: boolean;
+  oldValue: any | undefined;
+  id?: string;
+  name?: string;
+}
+
+export interface Options {
+  label: string;
+  value?: string;
+  options?: Options[];
+  disabled?: boolean;
+}
+
+export type BasicInfoRecord = Record<
+  'organizationId' | 'tkDeviceProfileId' | 'deviceTypeEnum' | 'deviceTypeName',
+  string
+>;
+
+export interface CreateEntityValue {
+  basicInfo: BasicInfoRecord;
+  fileParseValue: UploadFileParseValue;
+  columnConfiguration: Record<'type', string>[];
+}

@@ -102,7 +102,7 @@
         // 设备详情
         const res = await getDeviceDetail(id);
         deviceDetail.value = res;
-        const { latitude, longitude, address } = res.deviceInfo;
+        const { latitude, longitude, address } = res.deviceInfo || {};
         if (latitude) {
           deviceDetailRef.value.initMap(longitude, latitude, address);
         }

@@ -380,7 +380,7 @@
       };
       // 父组件调用更新字段值的方法
       function parentSetFieldsValue(data) {
-        const { deviceInfo } = data;
+        const { deviceInfo = {} } = data;
         positionState.longitude = deviceInfo.longitude;
         positionState.latitude = deviceInfo.latitude;
         positionState.address = deviceInfo.address;

@@ -21,6 +21,9 @@
               </a-button>
             </Popconfirm>
           </Authority>
+          <Authority>
+            <Button type="primary" @click="handleBatchImport">导入</Button>
+          </Authority>
           <a-button
             v-if="authBtn(role)"
             type="primary"
@@ -173,6 +176,8 @@
 
       <DeviceModal @register="registerModal" @success="handleSuccess" @reload="handleSuccess" />
       <CustomerModal @register="registerCustomerModal" @reload="handleReload" />
+
+      <BatchImportModal @register="registerImportModal" @import-finally="handleImportFinally" />
     </PageWrapper>
   </div>
 </template>
@@ -186,7 +191,7 @@
   } from '/@/api/device/model/deviceModel';
   import { BasicTable, useTable, TableAction, TableImg } from '/@/components/Table';
   import { columns, searchFormSchema } from './config/device.data';
-  import { Tag, Tooltip, Popover, Popconfirm } from 'ant-design-vue';
+  import { Tag, Tooltip, Popover, Popconfirm, Button } from 'ant-design-vue';
   import {
     deleteDevice,
     devicePage,
@@ -203,6 +208,7 @@
   import { useDrawer } from '/@/components/Drawer';
   import DeviceDetailDrawer from './cpns/modal/DeviceDetailDrawer.vue';
   import CustomerModal from './cpns/modal/CustomerModal.vue';
+  import BatchImportModal from './cpns/modal/BatchImportModal/index.vue';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { USER_INFO_KEY } from '/@/enums/cacheEnum';
   import { getAuthCache } from '/@/utils/auth';
@@ -230,6 +236,8 @@
       Popover,
       Authority,
       Popconfirm,
+      BatchImportModal,
+      Button,
     },
     setup(_) {
       const { createMessage } = useMessage();
@@ -243,6 +251,7 @@
       const [registerDetailDrawer, { openDrawer }] = useDrawer();
       const [registerTbDetailDrawer, { openDrawer: openTbDeviceDrawer }] = useDrawer();
       const [registerGatewayDetailDrawer, { openDrawer: openGatewayDetailDrawer }] = useDrawer();
+      const [registerImportModal, { openModal: openImportModal }] = useModal();
 
       const [
         registerTable,
@@ -451,7 +460,7 @@
 
       const handleBatchAssign = () => {
         const options = getSelectRows();
-        if (handleCheckHasDiffenterOrg(options)) {
+        if (handleCheckHasDiffenterOrg(options as DeviceModel[])) {
           createMessage.error('当前选中项中存在不同所属组织的设备！');
           return;
         }
@@ -477,6 +486,14 @@
         }
       };
 
+      const handleBatchImport = () => {
+        openImportModal(true);
+      };
+
+      const handleImportFinally = () => {
+        reload();
+      };
+
       return {
         registerTable,
         handleCreate,
@@ -508,6 +525,9 @@
         registerGatewayDetailDrawer,
         handleUpAndDownRecord,
         handleBatchAssign,
+        registerImportModal,
+        handleBatchImport,
+        handleImportFinally,
       };
     },
   });