feat: 更新数据导入样式

app_Web/src/components/common/data-import/data-import.tsx

@@ -30,12 +30,15 @@ export const DataImport = defineComponent({
       message: '',
       rowError: [],
     });
+    // 是否正在导入
+    const isImporting = ref(false);
 
     // 上传数据
     const uploadFile = async (file: Blob) => {
       const data = new FormData();
       data.append('file', file);
       try {
+        isImporting.value = true;
         const res = await ibiz.net.request(props.importUrl, {
           method: 'post',
           data,
@@ -60,6 +63,8 @@ export const DataImport = defineComponent({
       } catch (error) {
         message.value.state = 'fail';
         message.value.message = `导入失败！${(error as HttpError).message}`;
+      } finally {
+        isImporting.value = false;
       }
     };
 
@@ -100,6 +105,9 @@ export const DataImport = defineComponent({
     };
 
     const selectFile = () => {
+      if (isImporting.value) {
+        return;
+      }
       inputUpLoad.value.click();
     };
 
@@ -116,11 +124,12 @@ export const DataImport = defineComponent({
       onFileChange,
       inputUpLoad,
       message,
+      isImporting,
     };
   },
   render() {
     return (
-      <div class={this.ns.b()}>
+      <div class={[this.ns.b()]}>
         <input
           ref='inputUpLoad'
           type='file'
@@ -130,12 +139,22 @@ export const DataImport = defineComponent({
         />
         <div class={this.ns.e('caption')}>导入数据</div>
         {this.message.state === 'ready' ? (
-          <div class={this.ns.b('upload')} onClick={this.selectFile}>
+          <div
+            class={[
+              this.ns.b('upload'),
+              this.ns.is('loading', this.isImporting),
+            ]}
+            onClick={this.selectFile}
+          >
             <img
               class={this.ns.be('upload', 'img')}
               src='./assets/img/icon-import.svg'
             ></img>
             <span class={this.ns.be('upload', 'text')}>单击此区域进行上传</span>
+            <div class={this.ns.be('upload', 'loading')}>
+              <i-icon type='ios-loading' />
+              <span>导入中...</span>
+            </div>
           </div>
         ) : (
           <div class={this.ns.b('message')}>