feat: 设备列表新增设备导入模版下载

 <script lang="ts" setup>
   import { Button } from 'ant-design-vue';
-  import { nextTick, onMounted, ref } from 'vue';
+  import { computed, nextTick, onMounted } from 'vue';
   import { basicInfoForm, FieldsEnum } from './config';
   import { basicProps } from './props';
   import StepContainer from './StepContainer.vue';
@@ -15,7 +15,14 @@
 
   const emit = defineEmits(['update:value']);
 
-  const canGoNext = ref(false);
+  const canGoNext = computed(() => {
+    const values = props.value as Recordable;
+    return (
+      Reflect.has(values, FieldsEnum.ORGANIZATION_ID) &&
+      Reflect.has(values, FieldsEnum.TK_DEVICE_PROFILE_ID) &&
+      Reflect.has(values, FieldsEnum.DEVICE_TYPE)
+    );
+  });
   const [register, { getFieldsValue, setFieldsValue }] = useForm({
     schemas: basicInfoForm,
     layout: 'vertical',
@@ -23,9 +30,7 @@
     submitFunc: async () => {
       await nextTick();
       const values = getFieldsValue() || {};
-      canGoNext.value =
-        Reflect.has(values, FieldsEnum.ORGANIZATION_ID) &&
-        Reflect.has(values, FieldsEnum.TK_DEVICE_PROFILE_ID);
+      emit('update:value', values);
     },
   });
 

@@ -245,4 +245,20 @@ export const columnTypeSchema: BasicColumn[] = [
   },
 ];
 
-export const assemblyData = () => {};
+export const csvTemplate = `name,username,password
+Device 11,admin,password
+Device 22,admin1,password1
+`;
+
+export const downloadFile = (data: string, fileName: string, type: string, ext: string) => {
+  const blob = new Blob([data], { type: type });
+  const objectURL = URL.createObjectURL(blob);
+  const element = document.createElement('a');
+  element.href = objectURL;
+  element.download = `${fileName}.${ext}`;
+  element.style.display = 'none';
+  document.body.appendChild(element);
+  element.click();
+  element.remove();
+  URL.revokeObjectURL(objectURL);
+};

 <script lang="ts" setup>
   import { computed, ref, unref } from 'vue';
   import { BasicModal, useModal } from '/@/components/Modal';
-  import { Steps } from 'ant-design-vue';
+  import { Steps, Button, Tooltip } from 'ant-design-vue';
   import BasicInfoForm from './BasicInfoForm.vue';
   import ImportCsv from './ImportCsv.vue';
   import { CreateEntityValue, UploadFileParseValue } from './type';
@@ -9,6 +9,7 @@
   import CreateEntity from './CreateEntity.vue';
   import CompleteResult from './CompleteResult.vue';
   import { ImportDeviceResponse } from '/@/api/device/model/batchImportModel';
+  import { csvTemplate, downloadFile } from './config';
 
   const emit = defineEmits(['importFinally']);
 
@@ -73,6 +74,10 @@
     reset();
     return true;
   };
+
+  const handleTemplateDownload = () => {
+    downloadFile(csvTemplate, 'template', 'text/csv', 'csv');
+  };
 </script>
 
 <template>
@@ -86,7 +91,7 @@
     :close-func="handleCancel"
     :destroy-on-close="true"
   >
-    <section class="overflow-auto">
+    <section class="overflow-auto relative">
       <Steps direction="vertical" :current="currentStep">
         <Steps.Step
           v-for="item in Object.keys(StepsEnum).filter((key) => isNaN(key as unknown as number))"
@@ -132,6 +137,17 @@
           </template>
         </Steps.Step>
       </Steps>
+      <Tooltip
+        title="模板表头的第一列为设备名称,且不能重复,如需预置访问凭证(ACCESS_TOKEN、MQTT client ID、MQTT user name、MQTT password)添加新的列即可。例如:username、password"
+      >
+        <Button
+          type="text"
+          class="!absolute top-0 right-0 !text-blue-400"
+          @click="handleTemplateDownload"
+        >
+          模版下载
+        </Button>
+      </Tooltip>
     </section>
   </BasicModal>
 </template>

@@ -21,7 +21,7 @@
               </a-button>
             </Popconfirm>
           </Authority>
-          <Authority>
+          <Authority value="api:yt:device:import">
             <Button type="primary" @click="handleBatchImport">导入</Button>
           </Authority>
           <a-button