批量注册改进

src/views/student_manager/BatchRegistration.vue

@@ -1,44 +1,36 @@
 <template>
-  <el-dialog :visible="visible" width="1248px" :before-close="close">
+  <el-dialog :visible="visible" width="392px" :before-close="close">
     <div class="title">
-      <div class="title-name">批量导入学员</div>
-      <div class="title-operation">
-        <a class="download" download="模板" :href="templateURL">下载模板</a>
-        <el-upload
-          action="no"
-          :before-upload="beforeUpload"
-          :http-request="request"
-          :show-file-list="false"
-          accept=".xls"
-        >
-          <el-button type="primary">上传导入文件</el-button>
-        </el-upload>
-      </div>
+      <div class="title-name">选择文件</div>
     </div>
-    <div class="example-list">
-      <div class="example-list-title">
-        <div v-for="(item, i) in titleList" :key="i" class="title-item">{{ item }}</div>
-      </div>
-      <div class="example-list-content">
-        <div v-for="(item, i) in contentList" :key="i" class="example-row">
-          <div v-for="(attr, j) in Object.keys(item)" :key="j" class="example-column">{{ item[attr] }}</div>
-        </div>
-      </div>
+    <div class="import-container">
+      <el-input v-model="file_name" size="small" placeholder="还未选择文件" />
+      <el-upload
+        action="no"
+        :before-upload="beforeUpload"
+        :http-request="request"
+        :show-file-list="false"
+        accept=".xls"
+      >
+        <el-button size="small">选择文件</el-button>
+      </el-upload>
     </div>
+    <div class="tips">请使用指定模版上传</div>
     <div slot="footer" class="footer">
+      <a class="download" download="模板" :href="templateURL">下载模板</a>
       <el-button @click="close">取消</el-button>
-      <el-button type="primary" @click="confirm">确定</el-button>
+      <el-button type="primary" @click="confirm">导入</el-button>
     </div>
   </el-dialog>
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { ref, watch } from 'vue';
 import { Message } from 'element-ui';
 import { acceptTypeList, useUpload } from '@/utils/upload';
 import { getUserInfo } from '@/utils/auth';
 
-defineProps({
+const props = defineProps({
   visible: {
     type: Boolean,
     required: true
@@ -48,64 +40,20 @@ defineProps({
 const emits = defineEmits(['update:visible', 'batchRegister']);
 
 let file_id = ref('');
-let titleList = ['姓名', '年龄', '学校/机构', '学号', '邮箱'];
-let contentList = [
-  {
-    name: '吴县平',
-    age: 46,
-    school: '北京语言大学',
-    studentID: 'acvd192311',
-    mailbox: 'nekssowp@163.com'
-  },
-  {
-    name: '周承瑶',
-    age: 46,
-    school: '北京语言大学',
-    studentID: 'acvd192311',
-    mailbox: 'nekssowp@163.com'
-  },
-  {
-    name: '周蓓蓓',
-    age: 46,
-    school: '北京语言大学',
-    studentID: 'acvd192311',
-    mailbox: 'nekssowp@163.com'
-  },
-  {
-    name: '李婧妍',
-    age: 46,
-    school: '北京语言大学',
-    studentID: 'acvd192311',
-    mailbox: 'nekssowp@163.com'
-  },
-  {
-    name: '吴彦瑾',
-    age: 46,
-    school: '北京语言大学',
-    studentID: 'acvd192311',
-    mailbox: 'nekssowp@163.com'
-  },
-  {
-    name: '赵妍',
-    age: 46,
-    school: '北京语言大学',
-    studentID: 'acvd192311',
-    mailbox: 'nekssowp@163.com'
-  },
-  {
-    name: '周源源',
-    age: 46,
-    school: '北京语言大学',
-    studentID: 'acvd192311',
-    mailbox: 'nekssowp@163.com'
-  }
-];
+let file_name = ref('');
 const { session_id, user_code, user_type } = getUserInfo();
-const templateURL = `${process.env.VUE_APP_BASE_API}/GCLSFileServer/WebFileDownload?UserCode=${user_code}&UserType=${user_type}&SessionID=${session_id}&FileID=00201-20220922-20-G4M7KBH7`;
-
+const templateURL = `${process.env.VUE_APP_BASE_API}/GCLSFileServer/WebFileDownload?UserCode=${user_code}&UserType=${user_type}&SessionID=${session_id}&FileID=00201-20220923-15-N7RMJGP1`;
+
+watch(
+  () => props.visible,
+  newVal => {
+    if (newVal) return;
+    file_id.value = '';
+    file_name.value = '';
+  }
+);
 function close() {
   emits('update:visible', false);
-  file_id.value = '';
 }
 
 function confirm() {
@@ -117,7 +65,9 @@ const { upload, beforeUpload } = useUpload(acceptTypeList[1].type);
 
 function request(file) {
   upload(file).then(file_info_list => {
-    file_id.value = file_info_list[0].file_id;
+    const file_info = file_info_list[0];
+    file_id.value = file_info.file_id;
+    file_name.value = file_info.file_name;
     Message.success('上传导入文件成功');
   });
 }
@@ -129,6 +79,10 @@ function request(file) {
     display: none;
   }
 
+  :deep &__body {
+    padding-bottom: 16px;
+  }
+
   .title {
     display: flex;
     align-items: center;
@@ -139,49 +93,22 @@ function request(file) {
       font-weight: bold;
       color: #000;
     }
-
-    &-operation {
-      display: flex;
-      align-items: center;
-
-      .download {
-        margin-right: 24px;
-        color: #0085ff;
-      }
-    }
   }
 
-  .example-list {
-    position: relative;
-    margin-top: 16px;
-
-    &-title {
-      display: flex;
-      align-items: center;
-      height: 40px;
-      padding: 8px 16px;
-      color: #000;
-      background-color: #f2f2f2;
-      border-bottom: 1px solid $border-color;
+  .import-container {
+    display: flex;
+    column-gap: 16px;
+    margin: 16px 0 8px;
 
-      .title-item {
-        flex: 1;
-      }
+    .el-input {
+      width: 256px;
     }
+  }
 
-    &-content {
-      .example-row {
-        display: flex;
-        align-items: center;
-        height: 40px;
-        padding: 8px 16px;
-        border-bottom: 1px solid #f7f7f7;
-
-        .example-column {
-          flex: 1;
-        }
-      }
-    }
+  .tips {
+    font-size: 12px;
+    line-height: 20px;
+    color: #999;
   }
 
   .el-button--primary {
@@ -191,8 +118,14 @@ function request(file) {
 
   .footer {
     display: flex;
+    align-items: center;
     justify-content: flex-end;
 
+    .download {
+      margin-right: 24px;
+      color: #0085ff;
+    }
+
     .el-button + .el-progress {
       margin-left: 10px;
     }

src/views/student_manager/ExecutiveReport.vue

@@ -8,7 +8,7 @@
         <span :style="{ color: '#f56c6c' }">导入失败数：{{ errorCount }}</span>
       </div>
       <div>
-        <a download="执行报告" :href="executeReportFileUrl">下载执行报告</a>
+        <a download="执行报告" :href="executeReportFileUrl" @click="downloadExecutive">下载执行报告</a>
       </div>
     </div>
     <div
@@ -32,6 +32,7 @@ export default {
 
 <script setup>
 import { computed } from 'vue';
+import { Message } from 'element-ui';
 
 const props = defineProps({
   visible: {
@@ -58,6 +59,8 @@ const props = defineProps({
   }
 });
 
+const emits = defineEmits(['update:visible']);
+
 let totalCount = computed(() => {
   return props.successCount + props.errorCount;
 });
@@ -65,7 +68,12 @@ let successPercentage = computed(() => {
   return (props.successCount / totalCount.value) * 100;
 });
 
-const emits = defineEmits(['update:visible']);
+function downloadExecutive(e) {
+  if (props.executeReportFileUrl.length <= 0) {
+    e.preventDefault();
+    Message.warning('无下载执行报告');
+  }
+}
 
 function close() {
   emits('update:visible', false);