<Dialog:visible.sync="registerProblemPieceShow"@close="registerProblemPieceClose"title="登记问题件"width="900px"v-dialogDragappend-to-bodydestroy-on-close><div class="registerProblemPiece_content"><RegisterProblemPiece ref="RegisterProblemPieceRef"></RegisterProblemPiece></div><span slot="footer" class="dialog-footer"><el-button @click="registerProblemPieceClose()">关闭</el-button><el-button type="primary" @click="registerProblemPieceSubmit()">确定</el-button></span></Dialog>// 登记问题件registerProblemPiece () {this.registerProblemPieceShow = true},registerProblemPieceClose () {this.$refs.RegisterProblemPieceRef.resetForm()this.registerProblemPieceShow = false},async registerProblemPieceSubmit () {try {const res = await this.$refs.RegisterProblemPieceRef.handleSubmit()console.log('res:', res)this.registerProblemPieceClose()} catch (error) {console.log('error:', error)this.$message.error(error.message)}},
<template><div class="registerProblemPiece_content"><el-form:model="registerProblemPieceForm":rules="registerProblemPieceRules":label-width="'100px'"size="medium"ref="registerProblemPieceFormRef"><el-form-item label="问题件类型" prop="problemType"><el-select v-model="registerProblemPieceForm.problemType" placeholder="请选择问题件类型" style="width: 260px"><el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option></el-select></el-form-item><el-form-item label="备注" prop="remark"><el-inputv-model="registerProblemPieceForm.remark"placeholder="请输入备注"type="textarea":rows="4":maxlength="200"show-word-limitstyle="width: 700px"></el-input></el-form-item><div class="upload-section"><el-form-item label="附件" prop="attachment" class="upload-container"><el-uploadref="upload"class="upload-component"action="#"drag:file-list="fileList":multiple="true":auto-upload="false"accept=".pdf,.jpg,.png,.jpeg":limit="5":on-change="handleChange":on-remove="handleRemove":on-exceed="handleExceed"><i class="el-icon-upload"></i><div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div></el-upload></el-form-item><div class="upload-tips"><div><i class="el-icon-warning-outline"></i> 温馨提示：</div><div>1. 最多上传5个文件</div><div>2. 格式：只允许上传 <span style="color: red">png、jpg、pdf</span></div><div>3. 文件大小：单个文件最大5M</div></div></div></el-form></div>
</template><script>
export default {data () {return {registerProblemPieceForm: {problemType: '',remark: '',attachment: []},registerProblemPieceRules: {problemType: [{ required: true, message: '请选择问题件类型', trigger: 'change' }],remark: [{ required: true, message: '请输入备注', trigger: 'blur' }]},options: [{ value: '1', label: '问题件类型1' },{ value: '2', label: '问题件类型2' }],fileList: []}},methods: {// 文件状态改变时的钩子async handleChange (file, fileList) {// 只处理新添加的文件if (file.status !== 'ready') return// 检查文件有效性并上传if (!this.isValidFile(file)) {this.$nextTick(() => this.$refs.upload.handleRemove(file))return}await this.uploadFile(file)this.fileList = fileList},// 验证文件是否有效isValidFile (file) {if (!file || !file.name) {this.$message.error('无效的文件')return false}const fileName = file.nameconst fileExt = fileName.substring(fileName.lastIndexOf('.')).toLowerCase()const validExtensions = ['.pdf', '.jpg', '.png', '.jpeg']const isValidType = validExtensions.includes(fileExt)const isValidSize = file.size / 1024 / 1024 < 5if (!isValidType) {this.$message.error(`文件 ${fileName} 格式不支持，只能上传 pdf、jpg、png、jpeg 格式!`)return false}if (!isValidSize) {this.$message.error(`文件 ${fileName} 过大，文件大小不能超过 5MB!`)return false}return true},// 处理文件上传async uploadFile (file) {try {const formData = new FormData()formData.append('file', file.raw)const res = await this.$request({url: `/file2`,method: 'post',data: formData})// 添加新上传的文件到 attachment 数组this.registerProblemPieceForm.attachment.push({...res.data,uid: file.uid || Date.now()})} catch (error) {console.error('文件上传失败:', error)this.$message.error('文件上传失败，请重试')this.$nextTick(() => this.$refs.upload.handleRemove(file))}},handleRemove (file) {this.registerProblemPieceForm.attachment = this.registerProblemPieceForm.attachment.filter((item) => item.uid !== file.uid)this.fileList = this.fileList.filter((item) => item.uid !== file.uid)},// 返回表单验证Promiseasync handleSubmit () {return new Promise((resolve, reject) => {this.$refs.registerProblemPieceFormRef.validate((valid) => {if (!valid) reject(new Error('提交失败，检查内容完整'))resolve(this.registerProblemPieceForm)})})},handleExceed () {this.$message.warning('只能上传5个文件')},// 重置表单resetForm () {this.$refs.registerProblemPieceFormRef.resetFields()this.registerProblemPieceForm = {problemType: '',remark: '',attachment: []}this.fileList = []this.$refs.upload.clearFiles()this.$refs.upload.handleRemove()},// 获取表单数据getFormData () {return this.registerProblemPieceForm}}
}
</script>
<style lang="scss" scoped>
.registerProblemPiece_content {padding-top: 30px;
}
.upload-section {display: flex;width: 100%;margin-top: 10px;.upload-container {width: 350px;margin-right: 20px;.upload-component {width: 100%;}}.upload-tips {color: #606266;font-size: 13px;line-height: 1.5;padding-top: 16px;i {color: #e6a23c;margin-right: 4px;}}
}
::v-deep .el-upload-dragger {width: 100%;height: 100px !important;line-height: 0;
}::v-deep .el-icon-upload {margin: 0;margin-bottom: 4px;line-height: normal;
}::v-deep .el-upload-list__item {transition: none !important;
}
</style>
