ren

src/views/professional/teacherbase/import-teacherInfo.vue

@@ -1,39 +1,46 @@
 <template>
-    <el-dialog v-model="visible" title="导入" width="80%" append-to-body>
-      <el-row>
-        <el-col>
-          <a href="excel/dictlist.xlsx" rel="external nofollow" download="职工信息字典下载">
-            <el-button style="margin-left: 20px" size="small" type="success">职工信息字典下载</el-button>
-          </a>
-        </el-col>
-      </el-row>
-      <el-row>
-        <el-col>
-          <el-tag>导入时，部分字段需严格按照字典值填写</el-tag>
-        </el-col>
-      </el-row>
+    <el-dialog v-model="visible" title="导入职工信息" width="600" append-to-body>
+      <el-alert
+        type="warning"
+        :closable="false"
+        show-icon
+        style="margin-bottom: 20px;">
+        <template #title>
+          <span>导入前请先下载字典文件，部分字段需严格按照字典值填写</span>
+        </template>
+      </el-alert>
 
-      <el-row>
-        <el-upload
-          class="upload-demo"
-          action="/professional/file/importTeacherInfoSimple"
-          :headers="headers"
-          :accept="'.xls,.xlsx'"
-          :on-success="handleUploadSuccess"
-          :on-error="handleAvatarError"
-          list-type="picture">
-          <el-button size="small" type="primary">点击上传</el-button>
-          <template #tip>
-            <div class="el-upload__tip">只能上传后缀为xls,xlsx的文件</div>
-          </template>
-        </el-upload>
-      </el-row>
+      <div style="text-align: center; margin-bottom: 20px;">
+        <a href="excel/dictlist.xlsx" rel="external nofollow" download="职工信息字典下载" style="text-decoration: none;">
+          <el-button type="success" :icon="Download">下载字典文件</el-button>
+        </a>
+      </div>
+
+      <el-upload
+        class="upload-demo"
+        action="/professional/file/importTeacherInfoSimple"
+        :headers="headers"
+        :accept="'.xls,.xlsx'"
+        :on-success="handleUploadSuccess"
+        :on-error="handleAvatarError"
+        drag>
+        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
+        <div class="el-upload__text">
+          将文件拖到此处，或<em>点击上传</em>
+        </div>
+        <template #tip>
+          <div class="el-upload__tip">
+            只能上传 .xls 或 .xlsx 格式的 Excel 文件
+          </div>
+        </template>
+      </el-upload>
     </el-dialog>
 </template>
 
 <script setup lang="ts">
   import { ref, computed } from 'vue'
   import { ElNotification } from 'element-plus'
+  import { Download, UploadFilled } from '@element-plus/icons-vue'
   import { Session } from '/@/utils/storage'
 
   // 响应式数据
@@ -77,6 +84,10 @@
   })
 </script>
 
-<style scoped>
-
+<style scoped lang="scss">
+.upload-demo {
+  :deep(.el-upload-dragger) {
+    width: 100%;
+  }
+}
 </style>