Merge branch 'ww' into 'main'

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

See merge request yunteng/thingskit-front!509

-<script lang="ts" setup>
-  import { Icon } from '/@/components/Icon';
-  import { computed, ExtractPropTypes, unref } from 'vue';
-  import { usePermission } from '/@/hooks/web/usePermission';
-
-  interface AuthIconProps extends ExtractPropTypes<typeof Icon> {
-    auth?: string;
-  }
-
-  const props = defineProps<AuthIconProps>();
-
-  const emit = defineEmits(['click']);
-
-  const { hasPermission } = usePermission();
-
-  const getHasPermission = computed(() => {
-    const { auth } = props;
-    console.log(auth);
-    return auth ? hasPermission(auth) : true;
-  });
-
-  const getBindProps = computed(() => {
-    return {
-      ...props,
-      ...(unref(getHasPermission) ? { onClick: (event: Event) => emit('click', event) } : {}),
-    };
-  });
-</script>
-
-<template>
-  <Icon
-    v-bind="getBindProps"
-    class="justify-center items-center"
-    :class="getHasPermission ? '' : '!cursor-not-allowed !text-gray-200'"
-  />
-</template>
+<script lang="ts" setup>
+  import { Icon } from '/@/components/Icon';
+  import { computed, ExtractPropTypes, unref } from 'vue';
+  import { usePermission } from '/@/hooks/web/usePermission';
+
+  interface AuthIconProps extends ExtractPropTypes<typeof Icon> {
+    auth?: string;
+  }
+
+  const props = defineProps<AuthIconProps>();
+
+  const emit = defineEmits(['click']);
+
+  const { hasPermission } = usePermission();
+
+  const getHasPermission = computed(() => {
+    const { auth } = props;
+    return auth ? hasPermission(auth) : true;
+  });
+
+  const getBindProps = computed(() => {
+    return {
+      ...props,
+      ...(unref(getHasPermission) ? { onClick: (event: Event) => emit('click', event) } : {}),
+    };
+  });
+</script>
+
+<template>
+  <Icon
+    v-bind="getBindProps"
+    class="justify-center items-center"
+    :class="getHasPermission ? '' : '!cursor-not-allowed !text-gray-200'"
+  />
+</template>

@@ -637,7 +637,6 @@ export const TokenSchemas: FormSchema[] = [
     label: '客户端ID',
     component: 'Input',
     field: 'clientId',
-    required: true,
     ifShow: false,
     slot: 'clientId',
     componentProps: {

 <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);
     },
   });
 

 import { Options } from './type';
-import { getDeviceProfile } from '/@/api/alarm/position';
+import { queryDeviceProfileBy } from '/@/api/device/deviceManager';
+import { findDictItemByCode } from '/@/api/system/dict';
 import { getOrganizationList } from '/@/api/system/system';
 import { FormSchema } from '/@/components/Form';
 import { BasicColumn } from '/@/components/Table';
@@ -7,8 +8,8 @@ import { copyTransFun } from '/@/utils/fnUtils';
 
 export enum FieldsEnum {
   ORGANIZATION_ID = 'organizationId',
+  DEVICE_TYPE = 'deviceTypeEnum',
   TK_DEVICE_PROFILE_ID = 'tkDeviceProfileId',
-  DEVICE_TYPE_ENUM = 'deviceTypeEnum',
   DEVICE_TYPE_NAME = 'deviceTypeName',
   DELIMITER = 'delimiter',
   HEADER = 'header',
@@ -118,36 +119,54 @@ export const basicInfoForm: FormSchema[] = [
     },
   },
   {
+    field: FieldsEnum.DEVICE_TYPE,
+    label: '设备类型',
+    component: 'ApiSelect',
+    rules: [{ required: true, message: '设备类型为必填项' }],
+    componentProps: ({ formActionType }) => {
+      const { setFieldsValue, submit, clearValidate } = formActionType;
+      return {
+        api: findDictItemByCode,
+        params: {
+          dictCode: 'device_type',
+        },
+        labelField: 'itemText',
+        valueField: 'itemValue',
+        onChange: (value: string, options: Record<'deviceType' | 'label', string>) => {
+          setFieldsValue({
+            [FieldsEnum.DEVICE_TYPE_NAME]: value ? options.label : null,
+            [FieldsEnum.TK_DEVICE_PROFILE_ID]: null,
+          });
+          submit();
+          clearValidate();
+        },
+      };
+    },
+  },
+  {
     field: FieldsEnum.TK_DEVICE_PROFILE_ID,
     component: 'ApiSelect',
     label: '产品',
     rules: [{ required: true, message: '产品为必填项' }],
-    componentProps: ({ formActionType }) => {
-      const { submit, setFieldsValue } = formActionType;
+    componentProps: ({ formActionType, formModel }) => {
+      const { submit } = formActionType;
+      const deviceType = Reflect.get(formModel, FieldsEnum.DEVICE_TYPE);
       return {
-        api: getDeviceProfile,
+        api: queryDeviceProfileBy,
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择产品',
+        params: { deviceType },
         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();
+        onChange: () => submit(),
+        showSearch: true,
+        filterOption: (inputValue: string, options: Record<'label', string>) => {
+          return options.label.includes(inputValue);
         },
       };
     },
   },
   {
-    field: FieldsEnum.DEVICE_TYPE_ENUM,
-    component: 'Input',
-    label: '设备类型',
-    show: false,
-  },
-  {
     field: FieldsEnum.DEVICE_TYPE_NAME,
     component: 'Input',
     label: '设备名称',
@@ -226,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