From 68ac297cc9067b7c9b9d966e85abde0064bd3941 Mon Sep 17 00:00:00 2001
From: yujialong <479214531@qq.com>
Date: Wed, 4 Sep 2024 14:04:11 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AF=95=E9=A2=98=E6=89=B9=E9=87=8F=E5=AF=BC?=
 =?UTF-8?q?=E5=85=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/ques/list/batchImport.vue | 151 +++++++++++++++++++++++++
 src/pages/ques/list/index.vue       | 164 +---------------------------
 2 files changed, 155 insertions(+), 160 deletions(-)
 create mode 100644 src/pages/ques/list/batchImport.vue

diff --git a/src/pages/ques/list/batchImport.vue b/src/pages/ques/list/batchImport.vue
new file mode 100644
index 0000000..60e33b0
--- /dev/null
+++ b/src/pages/ques/list/batchImport.vue
@@ -0,0 +1,151 @@
+<template>
+  <el-dialog title="批量导入试题" :visible.sync="importVisible" width="520px" :close-on-click-modal="false"
+    :modal-append-to-body="false" @closed="closeDia">
+    <template v-if="info">
+      <div class="fs-14">
+        共识别到 <span style="font-size: 16px;font-weight: 600;color: #2962ff;">{{ info.totalQuestionCount }}</span> 题；
+        成功导入 <span style="font-size: 16px;font-weight: 600;color: #5ac297;">{{ info.successCount }}</span> 题，
+        导入失败 <span style="font-size: 16px;font-weight: 600;color: #ef2826;">{{ info.errorCount }}</span> 题。
+      </div>
+      <div v-if="info.questionTypeSuccessCounts" class="m-t-20">
+        <p>成功导入题型数量</p>
+        <div class="flex m-t-10">
+          <el-tag v-for="(item, i) in info.questionTypeSuccessCounts" :key="i" class="m-r-20">{{ i + ' ' + item
+            }}题</el-tag>
+        </div>
+      </div>
+    </template>
+    <el-form v-else label-width="110px">
+      <el-form-item label="题库分类">
+        <el-input v-model="params.questionBankCategory" disabled />
+      </el-form-item>
+      <el-form-item label="当前题库">
+        <el-input v-model="params.questionBankName" disabled />
+      </el-form-item>
+      <el-form-item prop="userName" label="模板文件">
+        <el-button type="primary" @click="download">模板下载<i class="el-icon-download el-icon--right"></i></el-button>
+      </el-form-item>
+      <el-form-item prop="userName" label="选择文件上传">
+        <el-upload name="file" accept=".xls,.xlsx" ref="upload" class="import-file" drag :before-upload="beforeUpload"
+          :on-remove="handleRemove" :on-error="uploadError" :on-success="uploadSuccess" :before-remove="beforeRemove"
+          :limit="1" :data="{
+            questionBankId: params.questionBankId
+          }" :disabled="uploading" :loading="uploading" :on-exceed="handleExceed"
+          :action="this.api.batchImportQuestions" :file-list="uploadList" :headers="headers">
+          <i class="el-icon-upload"></i>
+          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+          <div class="el-upload__tip" slot="tip" style="line-height: 1.8;">
+            <p>上传说明：</p>
+            <p>1.请按照模板要求，正确填写后上传</p>
+            <p>2.上传文件大小限制50M</p>
+            <p>3.仅支持上传.xls、 .xlsx文件格式</p>
+          </div>
+        </el-upload>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button v-if="info && info.exportCode" type="primary" @click="showFaild">点击下载失败数据</el-button>
+      <el-button @click="importVisible = false">关闭</el-button>
+    </span>
+  </el-dialog>
+</template>
+<script>
+import Util from '@/libs/util'
+import Setting from '@/setting'
+import axios from 'axios'
+export default {
+  props: ['visible', 'params'],
+  data () {
+    return {
+      importVisible: false,
+      uploadList: [],
+      info: null,
+      headers: {
+        token: Util.local.get(Setting.tokenKey)
+      },
+      uploading: false,
+    };
+  },
+  watch: {
+    visible () {
+      this.importVisible = this.visible
+      this.visible && this.init()
+    }
+  },
+  mounted () {
+
+  },
+  methods: {
+    init () {
+      this.info = null
+      this.uploadList = []
+    },
+
+    // 模板下载
+    async download () {
+      const res = await axios.get(this.api.downloadQuesExcel, {
+        headers: this.headers,
+        responseType: 'blob'
+      })
+      Util.downloadFileDirect('批量导入试题模板.xlsx', new Blob([res.data]))
+    },
+    // 上传文件
+    handleExceed (files, fileList) {
+      Util.warningMsg(
+        `当前限制选择 1 个文件，如需更换，请删除上一个文件再重新选择！`
+      )
+    },
+    // 下载失败文件
+    showFaild () {
+      axios.get(`${this.api.batchImportQuesFailure}?exportCode=${this.info.exportCode}`, {
+        headers: this.headers,
+        responseType: 'blob'
+      }).then((res) => {
+        Util.downloadFileDirect('批量导入题目管理失败数据导出.xlsx', new Blob([res.data]))
+      }).catch(res => { })
+    },
+    uploadSuccess ({ data, status, message }) {
+      this.uploading = false
+      if (status === 200) {
+        // this.init()
+        this.info = data
+      } else {
+        Util.errorMsg(message || '上传失败，请检查数据', 3000)
+      }
+    },
+    uploadError (err, file, fileList) {
+      this.uploading = false
+      this.$message({
+        message: "上传出错，请重试！",
+        type: "error",
+        center: true
+      })
+    },
+    beforeUpload (file) {
+      this.uploading = true
+    },
+    beforeRemove (file, fileList) {
+      return this.$confirm(`确定移除 ${file.name}？`)
+    },
+    handleRemove (file, fileList) {
+      this.uploadList = fileList
+      this.info = null
+    },
+    // 弹框关闭回调
+    closeDia () {
+      this.$parent.getList()
+      this.$emit('update:visible', false)
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+/deep/.import-file {
+  .el-progress__text,
+  .el-progress,
+  .el-upload-list__item-status-label {
+    // display: none !important;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/ques/list/index.vue b/src/pages/ques/list/index.vue
index eea3024..377efb8 100644
--- a/src/pages/ques/list/index.vue
+++ b/src/pages/ques/list/index.vue
@@ -161,90 +161,19 @@
       </span>
     </el-dialog>
 
-    <el-dialog title="批量导入试题" :visible.sync="importVisible" width="520px" :close-on-click-modal="false"
-      :modal-append-to-body="false">
-      <el-form label-width="110px">
-        <el-form-item label="题库分类">
-          <el-input v-model="questionBankCategory" disabled />
-        </el-form-item>
-        <el-form-item label="当前题库">
-          <el-input v-model="questionBankName" disabled />
-        </el-form-item>
-        <el-form-item prop="userName" label="模板文件">
-          <el-button type="primary" @click="download">模板下载<i class="el-icon-download el-icon--right"></i></el-button>
-        </el-form-item>
-        <el-form-item prop="userName" label="选择文件上传">
-          <el-upload name="file" accept=".xls,.xlsx" ref="upload" class="import-file" drag :before-upload="beforeUpload"
-            :on-remove="handleRemove" :on-error="uploadError" :on-success="uploadSuccess" :before-remove="beforeRemove"
-            :limit="1" :data="{
-              questionBankId
-            }" :disabled="uploading" :on-exceed="handleExceed" :action="this.api.batchImportQuestions"
-            :file-list="uploadList" :headers="headers">
-            <i class="el-icon-upload"></i>
-            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
-            <div class="el-upload__tip" slot="tip" style="line-height: 1.8;">
-              <p>上传说明：</p>
-              <p>1.请按照模板要求，正确填写后上传</p>
-              <p>2.上传文件大小限制50M</p>
-              <p>3.仅支持上传.xls、 .xlsx文件格式</p>
-            </div>
-          </el-upload>
-          <el-link v-if="uploadFaild" type="primary" @click="showFaild">部分数据导入失败，查看失败原因</el-link>
-        </el-form-item>
-      </el-form>
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="importVisible = false">关闭</el-button>
-      </span>
-    </el-dialog>
-
-    <!-- <el-dialog title="批量导入试题" :visible.sync="importResultVisible" width="520px" :close-on-click-modal="false"
-      :modal-append-to-body="false">
-      <el-form label-width="110px">
-        <el-form-item label="题库分类">
-          <el-input v-model="questionBankCategory" disabled />
-        </el-form-item>
-        <el-form-item label="当前题库">
-          <el-input v-model="questionBankName" disabled />
-        </el-form-item>
-        <el-form-item prop="userName" label="模板文件">
-          <el-button type="primary" @click="download">模板下载<i class="el-icon-download el-icon--right"></i></el-button>
-        </el-form-item>
-        <el-form-item prop="userName" label="选择文件上传">
-          <el-upload name="file" accept=".xls,.xlsx" ref="upload" class="import-file" drag :before-upload="beforeUpload"
-            :on-remove="handleRemove" :on-error="uploadError" :on-success="uploadSuccess" :before-remove="beforeRemove"
-            :limit="1" :data="{
-              questionBankId
-            }" :disabled="uploading" :on-exceed="handleExceed" :action="this.api.batchImportQuestions"
-            :file-list="uploadList" :headers="headers">
-            <i class="el-icon-upload"></i>
-            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
-            <div class="el-upload__tip" slot="tip" style="line-height: 1.8;">
-              <p>上传说明：</p>
-              <p>1.请按照模板要求，正确填写后上传</p>
-              <p>2.上传文件大小限制50M</p>
-              <p>3.仅支持上传.xls、 .xlsx文件格式</p>
-            </div>
-          </el-upload>
-          <el-link v-if="uploadFaild" type="primary" @click="showFaild">部分数据导入失败，查看失败原因</el-link>
-        </el-form-item>
-      </el-form>
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="importVisible = false">关闭</el-button>
-      </span>
-    </el-dialog> -->
+    <BatchImport :visible.sync="importVisible" :params.sync="$route.query" />
   </div>
 </template>
 
 <script>
+import Breadcrumb from '@/components/breadcrumb'
+import BatchImport from './batchImport'
 import Util from '@/libs/util'
 import Setting from '@/setting'
-import Breadcrumb from '@/components/breadcrumb'
-import Detail from '../detail'
 import Const from '@/const/ques'
 import Qs from 'qs'
-import axios from 'axios'
 export default {
-  components: { Breadcrumb, Detail },
+  components: { Breadcrumb, BatchImport },
   data () {
     return {
       crumbs: [],
@@ -298,16 +227,7 @@ export default {
       curUsePapers: [],
       curRow: {},
 
-      form: {},
       importVisible: false,
-      uploadList: [],
-      uploadFaild: false,
-      uploadTips: '',
-      exportCode: '',
-      headers: {
-        token: Util.local.get(Setting.tokenKey)
-      },
-      uploading: false,
     };
   },
   computed: {
@@ -626,85 +546,9 @@ export default {
       }
     },
 
-
     // 批量导入
     batchImport () {
       this.importVisible = true
-      this.uploadList = []
-      this.uploadFaild = false
-    },
-    // 模板下载
-    async download () {
-      const res = await axios.get(this.api.downloadQuesExcel, {
-        headers: this.headers,
-        responseType: 'blob'
-      })
-      Util.downloadFileDirect('批量导入试题模板.xlsx', new Blob([res.data]))
-    },
-    // 上传文件
-    handleExceed (files, fileList) {
-      Util.warningMsg(
-        `当前限制选择 1 个文件，如需更换，请删除上一个文件再重新选择！`
-      )
-    },
-    // 下载失败文件
-    showFaild () {
-      axios.get(`${this.api.batchImportQuesFailure}?exportCode=${this.exportCode}`, {
-        headers: this.headers,
-        responseType: 'blob'
-      }).then((res) => {
-        const name = res.headers['content-disposition']
-        Util.downloadFileDirect(name ? decodeURI(name) : '批量导入题目管理失败数据导出.xlsx', new Blob([res.data]))
-      }).catch(res => { })
-    },
-    uploadSuccess ({ data, status, message }) {
-      this.uploading = false
-      this.uploadFaild = false
-      this.uploadTips = ''
-      if (status === 200) {
-        // this.init()
-        // const { tip } = data
-        if (data.exportCode) {
-          this.exportCode = data.exportCode
-          this.uploadFaild = true
-          // this.uploadTips = tip
-        } else {
-          // Util[tip.includes('5000') ? 'errorMsg' : 'successMsg'](tip, 3000)
-          // this.importVisible = false
-        }
-      } else {
-        Util.errorMsg(message || '上传失败，请检查数据', 3000)
-      }
-    },
-    uploadError (err, file, fileList) {
-      this.uploading = false
-      this.$message({
-        message: "上传出错，请重试！",
-        type: "error",
-        center: true
-      })
-    },
-    beforeUpload (file) {
-      this.uploading = true
-    },
-    beforeRemove (file, fileList) {
-      return this.$confirm(`确定移除 ${file.name}？`)
-    },
-    handleRemove (file, fileList) {
-      this.uploadList = fileList
-      this.uploadFaild = false
-    },
-    cancelUpload () {
-      this.uploading = false
-      this.$refs.upload.abort()
-      this.keyword = ''
-      this.init()
-      this.importVisible = false
-    },
-    // 后台上传
-    backstageUpload () {
-      this.isBackstage = 1
-      this.importVisible = false
     },
   }
 };