import { getSubmitTicket } from '../../api/work' import request from '../../utils/request' export default { data() { return { ruleForm: { // email: '', desc: '', files: '', }, rules: { // email: [ // { required: true, message: '请输入邮箱', trigger: 'blur' }, // { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] } // ], desc: [ { required: true, message: this.$t(`work.problemDescription`), trigger: 'blur' } ], }, labelPosition: "top", //上传后的文件列表 fileList: [], // 允许的文件类型 fileType: ["jpg", "jpeg", "png", "mp3", "aif", "aiff", "wav", "wma", "mp4", "avi", "rmvb",], // 运行上传文件大小,单位 M fileSize: 20, // 附件数量限制 fileLimit: 3, //请求头 headers: { "Content-Type": "multipart/form-data" }, FormDatas: null, fileName: [], filesId: [], submitWorkOrderLoading:false, }; }, watch: { "$i18n.locale": function(){ this.translate(); } }, mounted(){ }, methods: { translate() { this.rules = { // type: "email", desc: [ { required: true, message: this.$t(`work.problemDescription`), trigger: 'blur' } ], } }, async fetchSubmitWork(params) { this.submitWorkOrderLoading =true const res = await getSubmitTicket(params) if (res.code == 200) { this.$message({ message: res.msg, type: 'success', showClose: true, }) for (const key in this.ruleForm) { this.ruleForm[key] ="" } this.fileList=[] } this.submitWorkOrderLoading =false }, submitForm() { this.$refs.ruleForm.validate((valid) => { if (valid) { console.log("进来?"); this.submitWorkOrderLoading =true //上传文件 if (this.fileList[0]) { //上传文件的需要formdata类型;所以要转 this.FormDatas = new FormData() this.fileList.forEach(fileItem => { this.FormDatas.append('file', fileItem); }) // 上传选择附件 this.$axios({ method: 'post', url: `${request.defaults.baseURL}pool/ticket/uploadFile`, headers: this.headers, timeout: 30000, data: this.FormDatas, }).then(res => { console.log(res,"文件返回"); this.ruleForm.files = res.data.data.id // if (this.ruleForm.files) {//成功拿到返回ID // this.fetchSubmitWork(this.ruleForm) // } }) } else { this.fetchSubmitWork(this.ruleForm) } } }); this.submitWorkOrderLoading =false }, //超出文件个数的回调 handleExceed() { this.$message({ type: 'warning', message: this.$t(`work.notSupported4`) }); return }, //上传文件的事件 uploadFile(item) { this.fileItem = item this.fileList.push(item.file); this.fileName.push(item.file.name) }, //上传成功后的回调 handleSuccess() { }, //下载附件 handelDownload(id) { if (id) { this.downloadUrl = ` ${request.defaults.baseURL}ticket/downloadFile?ids=${id}` let a = document.createElement(`a`) a.href = this.downloadUrl a.click() } }, //上传了的文件给移除的事件, handleRemove(file, fileList) { let nameIndex = this.fileName.indexOf(file.name); // 获取第一个重复元素的索引 if (nameIndex !== -1) { this.fileName.splice(nameIndex, 1); // 删除第一个重复元素 } let index = this.fileList.indexOf(file); // 获取第一个重复元素的索引 if (index !== -1) { this.fileList.splice(index, 1); // 删除第一个重复元素 } }, //上传文件之前 beforeUpload(file) { // 校验文件类型和大小 const fileType = file.name.slice(file.name.lastIndexOf('.') + 1).toLowerCase(); const isTypeValid = this.fileType.includes(fileType); const isSizeValid = file.size / 1024 / 1024 <= this.fileSize; if (!isTypeValid) {//不支持的文件类型 this.$message.error(`${this.$t(`work.notSupported`)}:${fileType}`); return false; } if (!isSizeValid) {//文件大小不能超过 this.$message.error(`${this.$t(`work.notSupported2`)}${this.fileSize} MB.`); return false; } }, handelChange(file, fileList) { //控制显示上传显示列表 // 校验文件类型和大小 const fileType = file.name.slice(file.name.lastIndexOf('.') + 1).toLowerCase(); const isTypeValid = this.fileType.includes(fileType); const isSizeValid = file.size / 1024 / 1024 <= this.fileSize; if (!isTypeValid) {//不支持的文件类型 this.$message.error(`${this.$t(`work.notSupported`)} ${fileType}`); this.fileList = this.fileList.filter(item => item.name != file.name); return false; } if (!isSizeValid) {//文件大小不能超过 this.fileList = this.fileList.filter(item => item.name != file.name); this.$message.error(`${this.$t(`work.notSupported2`)} ${this.fileSize} MB.`); return false; } let flag = this.fileList.some(item => item.name == file.name) if (flag) { this.$message.warning(this.$t(`work.notSupported3`)); this.$refs.upload.handleRemove(file) return false } this.fileName.push(file.name) this.fileList.push(file.raw) }, } }