Merge branch 'fix/import-style' into 'main_dev'

fix: 修复物模型导入样式

See merge request yunteng/thingskit-front!1069

@@ -58,7 +58,7 @@
     },
     selections: {
       beforeSelectValidate: (record: ProfileRecord) => {
-        return !record.default;
+        return !record.default && record?.name !== 'default';
       },
       onSelect: (_record, _flag, allSelecteds) => {
         disabledDeleteFlag.value = !allSelecteds.length;

@@ -5,48 +5,28 @@
     destroyOnClose
     v-bind="$attrs"
     width="25rem"
+    :height="160"
+    :min-height="160"
     @register="register"
     @cancel="handleCancel"
     :showOkBtn="false"
   >
-    <div class="w-full h-full" ref="loadingRef">
-      <div class="flex justify-end">
-        <Button @click="handleTemplateDownload" type="link">excel模板下载</Button>
-      </div>
-      <div class="flex justify-evenly items-center h-50 !w-full">
-        <Upload
-          accept=".json,"
-          :show-upload-list="false"
-          :customRequest="handleImportModel"
-          class="flex justify-center items-center"
-        >
-          <div class="flex flex-col justify-center items-center">
-            <Tooltip>
-              <template #title>请使用从物模型TSL导出的JSON文件在进行导入</template>
-              <img :src="JSONImage" alt="avatar" class="w-20 h-20" />
-            </Tooltip>
-          </div>
-        </Upload>
-        <Upload
-          accept=".csv,.xls,.xlsx"
-          :show-upload-list="false"
-          :customRequest="handleCSVImport"
-          class="flex justify-center items-center"
-        >
-          <div class="flex flex-col justify-center items-center">
-            <Tooltip>
-              <template #title>请使用下载的模板编辑之后在进行导入</template>
-              <img :src="CSVImage" alt="avatar" class="w-20 h-20" />
-            </Tooltip>
-          </div>
-        </Upload>
-      </div>
-    </div>
+    <BasicForm @register="registerForm">
+      <template #importType="{ model }">
+        <RadioGroup v-model:value="model.importType">
+          <Radio value="2">JSON导入</Radio>
+          <Radio value="1">Excel导入</Radio>
+        </RadioGroup>
+        <div v-if="model.importType == 1" class="absolute -left-28 mb-1">
+          <Button @click="handleTemplateDownload" type="link">excel模板下载</Button>
+        </div>
+      </template>
+    </BasicForm>
   </BasicModal>
 </template>
 <script lang="ts" setup>
   import { ref, unref } from 'vue';
-  import { Upload, Tooltip, Button } from 'ant-design-vue';
+  import { Button, Radio, RadioGroup } from 'ant-design-vue';
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { DeviceRecord } from '/@/api/device/model/deviceModel';
   import { useMessage } from '/@/hooks/web/useMessage';
@@ -59,8 +39,7 @@
     excelExport,
   } from '/@/api/device/modelOfMatter';
   import { useLoading } from '/@/components/Loading';
-  import JSONImage from '/@/assets/svg/JSON.svg';
-  import CSVImage from '/@/assets/svg/excel.svg';
+  import { BasicForm, useForm } from '/@/components/Form';
 
   const emits = defineEmits(['register', 'handleImportCSV', 'handleReload']);
 
@@ -85,6 +64,45 @@
   const [register, { closeModal }] = useModalInner(async (data) => {
     ImportInfo.value = data;
   });
+
+  const [registerForm, {}] = useForm({
+    schemas: [
+      {
+        field: 'importType',
+        label: '导入类型',
+        component: 'RadioGroup',
+        defaultValue: '2',
+        slot: 'importType',
+        helpMessage:
+          'JSON导入请使用从物模型TSL导出的JSON文件在进行导入,Excel导入请使用下载的模板编辑之后在进行导入',
+        required: true,
+      },
+      {
+        field: 'apiId',
+        label: '',
+        component: 'ApiUpload',
+        componentProps: ({ formModel }) => {
+          return {
+            // listType: 'picture-card',
+            maxFileLimit: 1,
+            accept: formModel.importType == 2 ? '.json,' : '.csv,.xls,.xlsx',
+            api: async (file: File) => {
+              try {
+                if (formModel.importType == 2) {
+                  handleImportModel(file);
+                } else {
+                  handleCSVImport(file);
+                }
+              } catch {}
+            },
+          };
+        },
+      },
+    ],
+    labelWidth: 100,
+    showActionButtonGroup: false,
+  });
+
   // 导入loading
   const importLoading = ref(false);
 
@@ -101,7 +119,7 @@
   };
 
   // JSON导入
-  const handleImportModel = async (data: { file: File }) => {
+  const handleImportModel = async (file: File) => {
     const fileReader = new FileReader();
     const { isCateGory, id } = unref(ImportInfo);
 
@@ -148,11 +166,11 @@
       }
     };
 
-    fileReader.readAsText(data.file, 'utf-8');
+    fileReader.readAsText(file, 'utf-8');
   };
 
   // CSV导入
-  const handleCSVImport = async ({ file }) => {
+  const handleCSVImport = async (file) => {
     const { isCateGory, id } = unref(ImportInfo);
 
     try {