|
|
@@ -0,0 +1,316 @@
|
|
|
+<template>
|
|
|
+ <div class="examination batch-edit-wrap">
|
|
|
+ <el-dialog
|
|
|
+ @close="closeDialog"
|
|
|
+ :visible.sync="recordShowFlag"
|
|
|
+ customClass="dialog_wrap"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ >
|
|
|
+ <div slot="title" class="titleBox">
|
|
|
+ <i class="el-icon-document" style="font-size: 20px"></i>
|
|
|
+ <span style="margin-left: 10px; font-size: 18px">批量上传文件记录信息</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <el-form
|
|
|
+ ref="editFormRef"
|
|
|
+ label-width="65px"
|
|
|
+ :inline="false"
|
|
|
+ :rules="ruleValidate"
|
|
|
+ :model="batchForm"
|
|
|
+ >
|
|
|
+ <el-form-item prop="uploadType" label="上传方式">
|
|
|
+ <el-select
|
|
|
+ v-model="batchForm.uploadType"
|
|
|
+ size="small"
|
|
|
+ style="width: 180px"
|
|
|
+ >
|
|
|
+ <el-option label="文件名不变" value="1"></el-option>
|
|
|
+ <el-option label="系统随机生成文件名" value="2"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item prop="fileDate" label="文件日期">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="batchForm.fileDate"
|
|
|
+ size="small"
|
|
|
+ type="date"
|
|
|
+ style="width: 200px"
|
|
|
+ placeholder="选择日期"
|
|
|
+ format="yyyy-MM-dd"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ ></el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item prop="audit" label="是否审核">
|
|
|
+ <el-select
|
|
|
+ v-model="batchForm.audit"
|
|
|
+ filterable
|
|
|
+ collapse-tags
|
|
|
+ size="small"
|
|
|
+ style="width: 100px"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="(item, index) in isSmpType"
|
|
|
+ :key="index"
|
|
|
+ :label="item.isSmp"
|
|
|
+ :value="item.id"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item prop="memo" label="备注（批量）">
|
|
|
+ <el-input
|
|
|
+ v-model="batchForm.memo"
|
|
|
+ clearable
|
|
|
+ size="small"
|
|
|
+ style="width: 300px"
|
|
|
+ placeholder="请输入批量备注（所有文件共用）"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <!-- 文件上传：本地暂存、校验是否选文件 -->
|
|
|
+ <el-form-item label="文件上传" prop="fileList">
|
|
|
+ <el-upload
|
|
|
+ class="upload-demo"
|
|
|
+ action="javascript:void(0);"
|
|
|
+ multiple
|
|
|
+ show-file-list
|
|
|
+ :file-list="selectedFileList"
|
|
|
+ :on-change="handleFileChange"
|
|
|
+ :on-remove="handleFileRemove"
|
|
|
+ :before-upload="beforeUploadCheck"
|
|
|
+ :auto-upload="false"
|
|
|
+ ref="uploadRef"
|
|
|
+ >
|
|
|
+ <el-button type="primary" size="mini" icon="el-icon-upload2">选择文件</el-button>
|
|
|
+ <div slot="tip" class="el-upload__tip">
|
|
|
+ 支持多文件批量选择，选中暂存本地，确认提交统一上传，单个文件≤10MB
|
|
|
+ </div>
|
|
|
+ </el-upload>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button type="primary" size="mini" @click="submitAll">提交</el-button>
|
|
|
+ <el-button size="mini" type="default" @click="closeDialog">取消</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { getCookie } from '@/utils/util.js';
|
|
|
+import { cookieUserId, cookieUserName } from '@/config/config.js';
|
|
|
+import { Message } from 'element-ui';
|
|
|
+
|
|
|
+// 全局用户信息
|
|
|
+let userName = getCookie(cookieUserName) || '';
|
|
|
+let userId = getCookie(cookieUserId) || '';
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'BatchFileUpload',
|
|
|
+ props: {
|
|
|
+ recordShowFlag: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ },
|
|
|
+ recordObj: {
|
|
|
+ type: Object,
|
|
|
+ default: function() {
|
|
|
+ return {};
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ var _this = this;
|
|
|
+ return {
|
|
|
+ // 表单公共数据：和文件一起一次提交给后端
|
|
|
+ batchForm: {
|
|
|
+ uploadType: '1', // 上传方式：1-原名，2-随机名
|
|
|
+ fileDate: _this.formatDate(new Date()), // 文件日期
|
|
|
+ memo: '', // 备注
|
|
|
+ audit: '1' // 是否审核：1-是，0-否
|
|
|
+ },
|
|
|
+ selectedFileList: [], // 本地暂存的文件列表（核心校验）
|
|
|
+ isSmpType: [
|
|
|
+ { id: "0", isSmp: "否" },
|
|
|
+ { id: "1", isSmp: "是" },
|
|
|
+ ],
|
|
|
+ // 仅校验：本地是否选文件、表单必填项是否填
|
|
|
+ ruleValidate: {
|
|
|
+ uploadType: [{ required: true, message: '请选择上传方式', trigger: 'change' }],
|
|
|
+ fileDate: [{ required: true, message: '文件日期不能为空', trigger: 'change' }],
|
|
|
+ audit: [{ required: true, message: '请选择审核状态', trigger: 'change' }],
|
|
|
+ fileList: [{
|
|
|
+ validator: function(rule, val, cb) {
|
|
|
+ if (_this.selectedFileList.length === 0) {
|
|
|
+ cb(new Error('请至少选择一个文件'));
|
|
|
+ } else {
|
|
|
+ cb();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ trigger: ['change', 'blur']
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ apiConfig: {
|
|
|
+ upload: 'pass/baseManagement/v1/file/uploadMultipart' // 唯一接口：一次传表单+文件
|
|
|
+ },
|
|
|
+ uploadConfig: {
|
|
|
+ maxSize: 10, // 单个文件10MB，和后端一致
|
|
|
+ timeout: 60000 // 60秒超时
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 格式化日期：yyyy-MM-dd
|
|
|
+ formatDate(date) {
|
|
|
+ if (!date || !(date instanceof Date)) date = new Date();
|
|
|
+ var y = date.getFullYear();
|
|
|
+ var m = (date.getMonth() + 1) < 10 ? "0" + (date.getMonth() + 1) : (date.getMonth() + 1);
|
|
|
+ var d = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
|
|
|
+ return y + "-" + m + "-" + d;
|
|
|
+ },
|
|
|
+
|
|
|
+ // 更新本地暂存文件：严格过滤有效文件
|
|
|
+ handleFileChange(file, fileList) {
|
|
|
+ this.selectedFileList = fileList.filter(function(item) {
|
|
|
+ return item.status !== 'removed' && item.raw && item.raw.name && item.raw.size > 0;
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ // 移除文件：同步更新本地暂存列表
|
|
|
+ handleFileRemove(file, fileList) {
|
|
|
+ this.handleFileChange(null, fileList);
|
|
|
+ },
|
|
|
+
|
|
|
+ // 选择文件前：仅校验大小，不上传
|
|
|
+ beforeUploadCheck(file) {
|
|
|
+ var isLtMaxSize = file.size / 1024 / 1024 < this.uploadConfig.maxSize;
|
|
|
+ if (!isLtMaxSize) {
|
|
|
+ Message.error('文件' + file.name + '超过' + this.uploadConfig.maxSize + 'MB，无法选择');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ return true;
|
|
|
+ },
|
|
|
+
|
|
|
+ // 核心：构造FormData（表单数据+多文件）+ 原请求写法（后端能接收）
|
|
|
+ submitAll() {
|
|
|
+ var _this = this;
|
|
|
+ // 1. 先做表单校验（必填项+是否选文件）
|
|
|
+ if (!_this.$refs.editFormRef) {
|
|
|
+ Message.warning('表单未加载完成，请稍候');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ _this.$refs.editFormRef.validate(function(valid) {
|
|
|
+ if (!valid) return;
|
|
|
+
|
|
|
+ // 2. 再次过滤有效文件，防止脏数据
|
|
|
+ var validFiles = [];
|
|
|
+ for (var i = 0; i < _this.selectedFileList.length; i++) {
|
|
|
+ var f = _this.selectedFileList[i];
|
|
|
+ if (f.raw && f.raw.name && f.raw.size > 0) {
|
|
|
+ validFiles.push(f);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (validFiles.length === 0) {
|
|
|
+ Message.warning('无有效文件可上传');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 3. 构造FormData：【原请求写法不变】+ 追加表单所有数据
|
|
|
+ var formData = new FormData();
|
|
|
+ // 第一步：追加表单公共数据（和文件一起传，后端@RequestParam接收）
|
|
|
+ formData.append('uploadType', _this.batchForm.uploadType);
|
|
|
+ formData.append('fileDate', _this.batchForm.fileDate);
|
|
|
+ formData.append('memo', _this.batchForm.memo || '');
|
|
|
+ formData.append('audit', _this.batchForm.audit);
|
|
|
+
|
|
|
+ // 第二步：追加多文件【原写法不变】- 相同key=file，多次append原始文件
|
|
|
+ for (var j = 0; j < validFiles.length; j++) {
|
|
|
+ var fileItem = validFiles[j];
|
|
|
+ formData.append('file', fileItem.raw, fileItem.raw.name);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 4. 发起请求【完全沿用原请求写法，不做任何修改】
|
|
|
+ Message.info('开始提交（表单+文件），请勿关闭弹窗...');
|
|
|
+ _this.axios({
|
|
|
+ url: _this.apiConfig.upload,
|
|
|
+ method: 'post',
|
|
|
+ data: formData,
|
|
|
+ headers: {
|
|
|
+ 'Content-Type': 'multipart/form-data'
|
|
|
+ },
|
|
|
+ timeout: _this.uploadConfig.timeout,
|
|
|
+ transformRequest: [function(data) {
|
|
|
+ return data;
|
|
|
+ }]
|
|
|
+ }).then(function(res) {
|
|
|
+ // 适配后端RESTfulResult返回结构
|
|
|
+ if (res && res.status === 'succeed') {
|
|
|
+ Message.success('提交结果: ' + res.data);
|
|
|
+ _this.$emit('refresh'); // 通知父组件刷新列表
|
|
|
+ _this.closeDialog(); // 关闭弹窗并重置
|
|
|
+ } else {
|
|
|
+ Message.error('提交失败：' + (response.message || '后端返回异常'));
|
|
|
+ }
|
|
|
+ }).catch(function(err) {
|
|
|
+ Message.error('提交异常：' + (err.message || '网络错误'));
|
|
|
+ console.error('提交报错详情：', err);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ // 关闭弹窗：重置所有状态
|
|
|
+ closeDialog() {
|
|
|
+ this.selectedFileList = [];
|
|
|
+ this.batchForm = {
|
|
|
+ uploadType: '1',
|
|
|
+ fileDate: this.formatDate(new Date()),
|
|
|
+ memo: '',
|
|
|
+ audit: '1'
|
|
|
+ };
|
|
|
+ if (this.$refs.editFormRef) {
|
|
|
+ this.$refs.editFormRef.resetFields();
|
|
|
+ }
|
|
|
+ if (this.$refs.uploadRef) {
|
|
|
+ this.$refs.uploadRef.clearFiles();
|
|
|
+ }
|
|
|
+ this.$emit('close');
|
|
|
+ },
|
|
|
+ getYNM(date) {
|
|
|
+ let year = date.getFullYear().toString();
|
|
|
+ let month = date.getMonth() + 1;
|
|
|
+ let day = date.getDate();
|
|
|
+ month = month < 10 ? "0" + month : month;
|
|
|
+ day = day < 10 ? "0" + day : day;
|
|
|
+ return `${year}-${month}-${day}`;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ // 弹窗关闭时自动重置（兜底）
|
|
|
+ watch: {
|
|
|
+ recordShowFlag: function(newVal) {
|
|
|
+ if (!newVal) {
|
|
|
+ this.closeDialog();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ recordObj(newVal, oldVal) {
|
|
|
+ this.editData = { ...this.editDataCache, ...newVal }
|
|
|
+ if (this.editData.fileDate == null || this.editData.fileDate == "") {
|
|
|
+ this.editData.fileDate = this.getYNM(new Date())
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.batch-edit-wrap .el-icon-close { display: none; }
|
|
|
+.batch-edit-wrap .el-dialog__header { padding-top: 0; padding-bottom: 10px; }
|
|
|
+.dialog_wrap { width: 920px !important; }
|
|
|
+.dialog_wrap .el-dialog__body { padding: 15px 20px; }
|
|
|
+.dialog_wrap .el-dialog__footer { text-align: center; padding: 10px 20px; }
|
|
|
+.upload-demo { margin-top: 8px; }
|
|
|
+.upload-demo >>> .el-upload-list { max-height: 200px; overflow-y: auto; margin-top: 6px; }
|
|
|
+.upload-demo >>> .el-upload__tip { font-size: 12px; color: #909399; margin-top: 4px; }
|
|
|
+.el-form-item { margin-bottom: 12px; }
|
|
|
+</style>
|
Redeem