|
|
@@ -229,10 +229,10 @@
|
|
|
type="primary"
|
|
|
size="mini"
|
|
|
icon="el-icon-download"
|
|
|
- @click="downloadAnswer(scope.row.offlineFileUrl)"
|
|
|
+ @click="downloadAnswer(scope.row.offlineFiles)"
|
|
|
v-if="
|
|
|
scope.row.examType == 'OFFLINE' &&
|
|
|
- scope.row.offlineFileUrl
|
|
|
+ scope.row.offlineFiles
|
|
|
"
|
|
|
>下载作答</el-button
|
|
|
>
|
|
|
@@ -259,30 +259,142 @@
|
|
|
title="上传作答"
|
|
|
v-loading="uploadAnswerDialogLoading"
|
|
|
:visible.sync="uploadAnswerDialogVisible"
|
|
|
- @closed="cleanOfflineFile"
|
|
|
>
|
|
|
<el-form>
|
|
|
+ <el-form-item label="选择文件类型">
|
|
|
+ <el-radio-group v-model="fileType" @change="handleFileTypeChange">
|
|
|
+ <el-radio label="zip">ZIP</el-radio>
|
|
|
+ <el-radio label="pdf">PDF</el-radio>
|
|
|
+ <el-radio label="image">图片(*.jpg|*.jpeg|*.png)</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
<el-form-item label="选择文件">
|
|
|
- <input
|
|
|
- type="file"
|
|
|
- accept="application/pdf, application/zip"
|
|
|
- id="importFile"
|
|
|
- ref="offlineFileInput"
|
|
|
- @change="uploadAnswerChange"
|
|
|
- v-bind:class="{ offline_file: offlineAnswerFile }"
|
|
|
- />
|
|
|
- <div>温馨提示:仅支持pdf和zip文件,文件大小请不要超过30M!</div>
|
|
|
+ <div
|
|
|
+ v-show="fileType == 'image'"
|
|
|
+ style="width:580px;padding-left:80px;"
|
|
|
+ >
|
|
|
+ <el-upload
|
|
|
+ class="upload-demo"
|
|
|
+ ref="upload"
|
|
|
+ action
|
|
|
+ :limit="6"
|
|
|
+ :http-request="customUpload"
|
|
|
+ :before-upload="beforeFileUpload"
|
|
|
+ :on-success="handleSuccess"
|
|
|
+ :file-list="fileList"
|
|
|
+ :auto-upload="false"
|
|
|
+ :accept="accept"
|
|
|
+ :on-change="handleChange"
|
|
|
+ multiple
|
|
|
+ list-type="picture-card"
|
|
|
+ >
|
|
|
+ <i slot="default" class="el-icon-plus"></i>
|
|
|
+ <div slot="file" slot-scope="{ file }">
|
|
|
+ <img
|
|
|
+ class="el-upload-list__item-thumbnail"
|
|
|
+ :src="file.url"
|
|
|
+ alt
|
|
|
+ />
|
|
|
+ <span class="el-upload-list__item-actions">
|
|
|
+ <span
|
|
|
+ class="el-upload-list__item-preview"
|
|
|
+ @click="handlePictureCardPreview(file)"
|
|
|
+ >
|
|
|
+ <i class="el-icon-zoom-in"></i>
|
|
|
+ </span>
|
|
|
+ <span
|
|
|
+ v-if="!disabled"
|
|
|
+ class="el-upload-list__item-delete"
|
|
|
+ @click="handleRemove(file)"
|
|
|
+ >
|
|
|
+ <i class="el-icon-delete"></i>
|
|
|
+ </span>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </el-upload>
|
|
|
+
|
|
|
+ <div style="width:580px;">
|
|
|
+ 温馨提示:仅支持JPG,JPEG和PNG文件,单个图片大小请不要超过5M,图片数量最多6张!
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-show="fileType != 'image'">
|
|
|
+ <input
|
|
|
+ type="file"
|
|
|
+ accept="application/pdf, application/zip"
|
|
|
+ id="importFile"
|
|
|
+ ref="offlineFileInput"
|
|
|
+ @change="uploadAnswerChange"
|
|
|
+ v-bind:class="{ offline_file: offlineAnswerFile }"
|
|
|
+ />
|
|
|
+ <div>温馨提示:仅支持pdf和zip文件,文件大小请不要超过30M!</div>
|
|
|
+ </div>
|
|
|
</el-form-item>
|
|
|
<div class="dialog-footer">
|
|
|
- <el-button @click="uploadAnswerDialogVisible = false"
|
|
|
- >取 消</el-button
|
|
|
- >
|
|
|
+ <el-button @click="cancelUpload">取 消</el-button>
|
|
|
<el-button
|
|
|
+ v-show="fileType != 'image'"
|
|
|
:disabled="!offlineAnswerFile"
|
|
|
type="primary"
|
|
|
@click="doUploadAnswer"
|
|
|
>确 定</el-button
|
|
|
>
|
|
|
+ <el-button
|
|
|
+ v-show="fileType == 'image'"
|
|
|
+ :disabled="batchSubmitUploadDisabled"
|
|
|
+ type="primary"
|
|
|
+ @click="batchSubmitUpload"
|
|
|
+ >确 定</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+ </el-dialog>
|
|
|
+ <el-dialog :append-to-body="true" :visible.sync="dialogVisible">
|
|
|
+ <img width="100%" :src="dialogImageUrl" alt="" />
|
|
|
+ </el-dialog>
|
|
|
+ <el-dialog title="图片作答" :visible.sync="downloadImageDialogVisible">
|
|
|
+ <el-form>
|
|
|
+ <el-form-item label="作答结果">
|
|
|
+ <div style="width:580px;padding-left:80px;">
|
|
|
+ <el-upload
|
|
|
+ class="upload-demo"
|
|
|
+ action
|
|
|
+ :limit="6"
|
|
|
+ :file-list="imageAnswerFileList"
|
|
|
+ multiple
|
|
|
+ list-type="picture-card"
|
|
|
+ :disabled="true"
|
|
|
+ >
|
|
|
+ <i slot="default" class="el-icon-plus"></i>
|
|
|
+ <div slot="file" slot-scope="{ file }">
|
|
|
+ <img
|
|
|
+ class="el-upload-list__item-thumbnail"
|
|
|
+ :src="file.url"
|
|
|
+ :alt="file.name"
|
|
|
+ />
|
|
|
+ <span class="el-upload-list__item-actions">
|
|
|
+ <span
|
|
|
+ class="el-upload-list__item-preview"
|
|
|
+ @click="handlePictureCardPreview(file)"
|
|
|
+ >
|
|
|
+ <i class="el-icon-zoom-in"></i>
|
|
|
+ </span>
|
|
|
+ <span
|
|
|
+ class="el-upload-list__item-delete"
|
|
|
+ @click="handleDownload(file)"
|
|
|
+ >
|
|
|
+ <i class="el-icon-download"></i>
|
|
|
+ </span>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </el-upload>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <div class="dialog-footer">
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ @click="downloadImageDialogVisible = false"
|
|
|
+ >确 定</el-button
|
|
|
+ >
|
|
|
</div>
|
|
|
</el-form>
|
|
|
</el-dialog>
|
|
|
@@ -295,17 +407,29 @@ import { mapState } from "vuex";
|
|
|
import commonFormVue from "../component/commonForm.vue";
|
|
|
import commonExportVue from "../component/commonExport.vue";
|
|
|
import pagePrivilege from "../mixin/pagePrivilege.js";
|
|
|
+// import MD5 from "js-md5";
|
|
|
+import SparkMD5 from "spark-md5";
|
|
|
export default {
|
|
|
components: { commonFormVue, commonExportVue },
|
|
|
mixins: [pagePrivilege],
|
|
|
data() {
|
|
|
return {
|
|
|
+ dialogImageUrl: "",
|
|
|
+ dialogVisible: false,
|
|
|
+ disabled: false,
|
|
|
loading: false,
|
|
|
uploadAnswerDialogLoading: false,
|
|
|
uploadAnswerDialogVisible: false,
|
|
|
total: 0,
|
|
|
tableLoading: false,
|
|
|
showAllCondition: false,
|
|
|
+ currentOfflineFiles: [],
|
|
|
+ fileType: "zip",
|
|
|
+ accept: "application/zip",
|
|
|
+ fileList: [],
|
|
|
+ offlineFiles: [],
|
|
|
+ downloadImageDialogVisible: false,
|
|
|
+ imageAnswerFileList: [],
|
|
|
form: {
|
|
|
examRecordDataId: null,
|
|
|
hasStranger: null,
|
|
|
@@ -340,13 +464,74 @@ export default {
|
|
|
offlineAnswerFile: "",
|
|
|
currentPagePrivileges: {
|
|
|
EXAM_PARTICULARS_EXPORT: false //导出
|
|
|
- }
|
|
|
+ },
|
|
|
+ summary: "",
|
|
|
+ summaryList: [],
|
|
|
+ md5Size: 0
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
|
- ...mapState({ user: state => state.user })
|
|
|
+ ...mapState({ user: state => state.user }),
|
|
|
+ batchSubmitUploadDisabled() {
|
|
|
+ return this.fileList.length != this.md5Size;
|
|
|
+ }
|
|
|
},
|
|
|
methods: {
|
|
|
+ cancelUpload() {
|
|
|
+ this.uploadAnswerDialogVisible = false;
|
|
|
+ this.removeImgs();
|
|
|
+ },
|
|
|
+ handleChange(file, fileList) {
|
|
|
+ this.fileList = fileList;
|
|
|
+ this.calcSummary(this.fileList);
|
|
|
+ },
|
|
|
+ getFileMD5(dataFile, callback) {
|
|
|
+ var fileReader = new FileReader();
|
|
|
+ var spark = new SparkMD5(); //创建md5对象（基于SparkMD5）
|
|
|
+ if (dataFile.size > 1024 * 1024 * 10) {
|
|
|
+ var data1 = dataFile.slice(0, 1024 * 1024 * 10); //将文件进行分块 file.slice(start,length)
|
|
|
+ fileReader.readAsBinaryString(data1); //将文件读取为二进制码
|
|
|
+ } else {
|
|
|
+ fileReader.readAsBinaryString(dataFile);
|
|
|
+ }
|
|
|
+
|
|
|
+ //文件读取完毕之后的处理
|
|
|
+ //a639e28526d1809745b46bf1189594fe 6d9efe0c593b1383482feb229318e03a
|
|
|
+ fileReader.onload = function(e) {
|
|
|
+ spark.appendBinary(e.target.result);
|
|
|
+ var md5 = spark.end();
|
|
|
+ console.log(md5);
|
|
|
+ callback(md5);
|
|
|
+ };
|
|
|
+ },
|
|
|
+ handleRemove(file) {
|
|
|
+ debugger;
|
|
|
+ let index = this.fileList.findIndex(p => p.uid == file.uid);
|
|
|
+ this.fileList.splice(index, 1);
|
|
|
+ this.calcSummary(this.fileList);
|
|
|
+ },
|
|
|
+ calcSummary(fileList) {
|
|
|
+ this.summaryList = [];
|
|
|
+ this.md5Size = 0;
|
|
|
+ for (let i = 0; i < fileList.length; i++) {
|
|
|
+ let f = fileList[i];
|
|
|
+ this.getFileMD5(f.raw, md5 => {
|
|
|
+ this.summaryList.push({ index: i, summary: md5 });
|
|
|
+ this.md5Size++;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handlePictureCardPreview(file) {
|
|
|
+ this.dialogImageUrl = file.url;
|
|
|
+ this.dialogVisible = true;
|
|
|
+ },
|
|
|
+ handleDownload(file) {
|
|
|
+ window.open(file.url);
|
|
|
+ console.log(file);
|
|
|
+ },
|
|
|
+ removeImgs() {
|
|
|
+ this.$refs.upload.clearFiles();
|
|
|
+ },
|
|
|
resetForm() {
|
|
|
this.form = {
|
|
|
examRecordDataId: null,
|
|
|
@@ -541,6 +726,7 @@ export default {
|
|
|
},
|
|
|
uploadAnswerChange(event) {
|
|
|
if (event.target.files.length > 0) {
|
|
|
+ debugger;
|
|
|
this.offlineAnswerFile = event.target.files[0];
|
|
|
} else {
|
|
|
this.offlineAnswerFile = "";
|
|
|
@@ -584,6 +770,7 @@ export default {
|
|
|
headers: { "Content-Type": "multipart/form-data" }
|
|
|
};
|
|
|
let param = new FormData();
|
|
|
+ debugger;
|
|
|
param.append("file", this.offlineAnswerFile);
|
|
|
param.append("examRecordDataId", this.currentOfflineExamRecordDataId);
|
|
|
this.$http
|
|
|
@@ -614,12 +801,222 @@ export default {
|
|
|
});
|
|
|
});
|
|
|
},
|
|
|
+ beforeUpload(file) {
|
|
|
+ debugger;
|
|
|
+ var index = file.name.lastIndexOf(".");
|
|
|
+ var fileNameLength = file.name.length;
|
|
|
+ var fileSuffix = file.name
|
|
|
+ .substring(index + 1, fileNameLength)
|
|
|
+ .toUpperCase();
|
|
|
+ this.$http
|
|
|
+ .get(
|
|
|
+ "/api/ecs_exam_work/exam/property/" +
|
|
|
+ this.form.examId +
|
|
|
+ "/OFFLINE_UPLOAD_FILE_TYPE"
|
|
|
+ )
|
|
|
+ .then(response => {
|
|
|
+ var allowfileSuffixs = response.data;
|
|
|
+ if (!allowfileSuffixs || allowfileSuffixs.length == 0) {
|
|
|
+ this.$notify({
|
|
|
+ title: "提示",
|
|
|
+ message: "当前考试设置不允许上传附件",
|
|
|
+ type: "error",
|
|
|
+ duration: 2000
|
|
|
+ });
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ if (allowfileSuffixs.toString().indexOf(fileSuffix) < 0) {
|
|
|
+ this.$notify({
|
|
|
+ title: "提示",
|
|
|
+ message:
|
|
|
+ "当前考试允许上传文件格式为:" + allowfileSuffixs.toString(),
|
|
|
+ type: "error",
|
|
|
+ duration: 2000
|
|
|
+ });
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ this.offlineAnswerFile = file;
|
|
|
+ });
|
|
|
+
|
|
|
+ // function blobToArray(blob) {
|
|
|
+ // return new Promise((resolve) => {
|
|
|
+ // var reader = new FileReader();
|
|
|
+ // reader.addEventListener("loadend", function() {
|
|
|
+ // // reader.result contains the contents of blob as a typed array
|
|
|
+ // resolve(reader.result);
|
|
|
+ // });
|
|
|
+ // reader.readAsArrayBuffer(blob);
|
|
|
+ // });
|
|
|
+ // }
|
|
|
+ // const buffer = blobToArray(file);
|
|
|
+ // const fileMd5 = MD5(buffer);
|
|
|
+ // console.log(fileMd5);
|
|
|
+ // this.summary = fileMd5;
|
|
|
+
|
|
|
+ this.uploadData = {
|
|
|
+ examRecordDataId: this.currentOfflineExamRecordDataId,
|
|
|
+ summary: this.summary
|
|
|
+ };
|
|
|
+ console.log(this.uploadData);
|
|
|
+ let promise = new Promise(resolve => {
|
|
|
+ this.$nextTick(function() {
|
|
|
+ resolve(true);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ return promise; //通过返回一个promis对象解决
|
|
|
+ },
|
|
|
+ blobToArray(blob) {
|
|
|
+ return new Promise(resolve => {
|
|
|
+ var reader = new FileReader();
|
|
|
+ reader.addEventListener("loadend", function() {
|
|
|
+ // reader.result contains the contents of blob as a typed array
|
|
|
+ resolve(reader.result);
|
|
|
+ });
|
|
|
+ reader.readAsArrayBuffer(blob);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ submitUpload() {
|
|
|
+ debugger;
|
|
|
+ this.uploadAnswerDialogLoading = true;
|
|
|
+ let config = {
|
|
|
+ headers: { "Content-Type": "multipart/form-data" }
|
|
|
+ };
|
|
|
+ let param = new FormData();
|
|
|
+ param.append("file", this.offlineAnswerFile);
|
|
|
+ param.append("examRecordDataId", this.currentOfflineExamRecordDataId);
|
|
|
+ param.append("fileType", this.fileType);
|
|
|
+
|
|
|
+ // const buffer = this.blobToArray(this.offlineAnswerFile);
|
|
|
+ // const fileMd5 = MD5(buffer);
|
|
|
+ // console.log(fileMd5);
|
|
|
+ // this.summary = fileMd5;
|
|
|
+ // param.append("summary", this.summary);
|
|
|
+ this.$http
|
|
|
+ .post("/api/ecs_oe_admin/offlineExam/submitPaper", param, config)
|
|
|
+ .then(() => {
|
|
|
+ this.$notify({
|
|
|
+ title: "提示",
|
|
|
+ message: "上传成功",
|
|
|
+ type: "success",
|
|
|
+ duration: 2000
|
|
|
+ });
|
|
|
+ this.uploadAnswerDialogVisible = false;
|
|
|
+ this.$refs.offlineFileInput.value = "";
|
|
|
+ this.offlineAnswerFile = "";
|
|
|
+ this.search();
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.$notify({
|
|
|
+ title: "提示",
|
|
|
+ message: "上传失败",
|
|
|
+ type: "error",
|
|
|
+ duration: 2000
|
|
|
+ });
|
|
|
+ this.uploadAnswerDialogLoading = false;
|
|
|
+ this.$refs.offlineFileInput.value = "";
|
|
|
+ this.offlineAnswerFile = "";
|
|
|
+ });
|
|
|
+ },
|
|
|
cleanOfflineFile() {
|
|
|
this.$refs.offlineFileInput.value = "";
|
|
|
this.offlineAnswerFile = "";
|
|
|
},
|
|
|
- downloadAnswer(offlineFileUrl) {
|
|
|
- window.open(offlineFileUrl);
|
|
|
+ downloadAnswer(files) {
|
|
|
+ debugger;
|
|
|
+ if (files && files.length > 0) {
|
|
|
+ if (files[0].fileType != "image") {
|
|
|
+ window.open(files[0].offlineFileUrl);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ this.imageAnswerFileList = [];
|
|
|
+ for (let f of files) {
|
|
|
+ this.imageAnswerFileList.push({
|
|
|
+ url: f.offlineFileUrl,
|
|
|
+ name: f.offlineFileName
|
|
|
+ });
|
|
|
+ }
|
|
|
+ this.downloadImageDialogVisible = true;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleFileTypeChange(ft) {
|
|
|
+ switch (ft) {
|
|
|
+ case "zip":
|
|
|
+ this.accept = "application/zip";
|
|
|
+ break;
|
|
|
+ case "pdf":
|
|
|
+ this.accept = "application/pdf";
|
|
|
+ break;
|
|
|
+ case "image":
|
|
|
+ this.accept = "image/jpeg,image/png";
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ batchSubmitUpload() {
|
|
|
+ this.$refs.upload.submit();
|
|
|
+ debugger;
|
|
|
+ let params = new FormData();
|
|
|
+ params.append("examRecordDataId", this.currentOfflineExamRecordDataId);
|
|
|
+ params.append("fileType", this.fileType);
|
|
|
+ for (let f of this.fileList) {
|
|
|
+ params.append("files", f.raw);
|
|
|
+ }
|
|
|
+
|
|
|
+ //先对文件md5进行排序(按索引正序排列)
|
|
|
+ this.summaryList.sort((a, b) => a.index - b.index);
|
|
|
+ let summaries = [];
|
|
|
+ for (let s of this.summaryList) {
|
|
|
+ summaries.push(s.summary);
|
|
|
+ }
|
|
|
+ params.append("summaries", summaries);
|
|
|
+
|
|
|
+ let config = {
|
|
|
+ headers: { "Content-Type": "multipart/form-data" }
|
|
|
+ };
|
|
|
+ this.$http
|
|
|
+ .post("/api/ecs_oe_admin/offlineExam/batchSubmitPaper", params, config)
|
|
|
+ .then(() => {
|
|
|
+ this.$notify({
|
|
|
+ title: "提示",
|
|
|
+ message: "上传成功",
|
|
|
+ type: "success",
|
|
|
+ duration: 2000
|
|
|
+ });
|
|
|
+
|
|
|
+ this.uploadAnswerDialogVisible = false;
|
|
|
+ this.removeImgs();
|
|
|
+ this.offlineAnswerFile = "";
|
|
|
+ this.search();
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.$notify({
|
|
|
+ title: "提示",
|
|
|
+ message: "上传失败",
|
|
|
+ type: "error",
|
|
|
+ duration: 2000
|
|
|
+ });
|
|
|
+ this.uploadAnswerDialogLoading = false;
|
|
|
+ this.offlineAnswerFile = "";
|
|
|
+ });
|
|
|
+ },
|
|
|
+ beforeFileUpload(file) {
|
|
|
+ debugger;
|
|
|
+ const isLt5M = file.size / 1024 / 1024 <= 5;
|
|
|
+ if (!isLt5M) {
|
|
|
+ this.$message.error("上传的单个数据文件大小不能超过5MB!");
|
|
|
+ }
|
|
|
+ return isLt5M;
|
|
|
+ },
|
|
|
+ handleSuccess(response, file, fileList) {
|
|
|
+ console.log(response);
|
|
|
+ console.log(file);
|
|
|
+ console.log(fileList);
|
|
|
+ this.$message.success("上传成功");
|
|
|
+ },
|
|
|
+ customUpload(file) {
|
|
|
+ debugger;
|
|
|
+ this.offlineFiles.push(file.file);
|
|
|
+ return false;
|
|
|
}
|
|
|
},
|
|
|
created() {}
|
lideyin