食材添加信息
This commit is contained in:
@ -1,74 +1,81 @@
|
||||
<template>
|
||||
<el-upload class="upload-demo"
|
||||
ref="upload"
|
||||
drag
|
||||
:headers="upload.headers"
|
||||
:action="upload.url"
|
||||
:limit="upload.limit"
|
||||
:disabled="upload.isUploading"
|
||||
:file-list="upload.fileList"
|
||||
:multiple="upload.multiple"
|
||||
:on-change="handleFileChange"
|
||||
:on-remove="handleFileRemove"
|
||||
:on-exceed="handleFileexceed"
|
||||
:on-progress="handleFileUploadProgress"
|
||||
:on-success="handleFileSuccess"
|
||||
:on-error="handleFileFail"
|
||||
:data="upload.data"
|
||||
:auto-upload="false">
|
||||
<i class="el-icon-upload"></i>
|
||||
<el-upload
|
||||
class="upload-demo"
|
||||
ref="upload"
|
||||
drag
|
||||
:headers="upload.headers"
|
||||
:action="upload.url"
|
||||
:limit="upload.limit"
|
||||
:disabled="upload.isUploading"
|
||||
:file-list="upload.fileList"
|
||||
:multiple="upload.multiple"
|
||||
:on-change="handleFileChange"
|
||||
:on-remove="handleFileRemove"
|
||||
:on-exceed="handleFileexceed"
|
||||
:on-progress="handleFileUploadProgress"
|
||||
:on-success="handleFileSuccess"
|
||||
:on-error="handleFileFail"
|
||||
:data="upload.data"
|
||||
:auto-upload="false"
|
||||
>
|
||||
<em class="el-icon-upload" />
|
||||
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
|
||||
<div class="el-upload__tip" slot="tip">最多可上传{{upload.limit}}个文件,且每个文件不超过{{upload.fileSize/(1024*1024)}}M</div>
|
||||
<div class="el-upload__tip" slot="tip">
|
||||
最多可上传{{ upload.limit }}个文件,且每个文件不超过{{
|
||||
upload.fileSize / (1024 * 1024)
|
||||
}}M
|
||||
</div>
|
||||
</el-upload>
|
||||
</template>
|
||||
<script>
|
||||
import { getToken } from '@/utils/auth'
|
||||
import { getToken } from "@/utils/auth";
|
||||
export default {
|
||||
name: "DragUpload",
|
||||
components: {
|
||||
|
||||
},
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
upload: {
|
||||
// 是否禁用上传
|
||||
isUploading: false,
|
||||
// 上传的地址
|
||||
url: process.env.VUE_APP_BASE_API + "/custom/customerCase/uploadCaseFile",
|
||||
url: process.env.VUE_APP_BASE_API + "/custom/fileUpload/" + this.prefix,
|
||||
// 设置上传的请求头部
|
||||
headers: {Authorization: 'Bearer ' + getToken()},
|
||||
headers: { Authorization: "Bearer " + getToken() },
|
||||
// 其他需要携带的数据
|
||||
data:{},
|
||||
data: {},
|
||||
//文件列表
|
||||
fileList:[],
|
||||
fileList: [],
|
||||
//同时上传文件上限
|
||||
limit: 10,
|
||||
//每个文件大小(单位:byte)
|
||||
fileSize: 1024 * 1024 * 10,
|
||||
//是否支持同时选择多张
|
||||
multiple: true
|
||||
multiple: true,
|
||||
},
|
||||
uploadResult: {
|
||||
fileUrl: [],
|
||||
fileName: [],
|
||||
},
|
||||
uploadResult:{
|
||||
fileUrl:[],
|
||||
fileName:[]
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
uploadFile(){
|
||||
if(this.upload.fileList.length > 0 && this.uploadResult.fileUrl.length < this.upload.fileList.length){
|
||||
uploadFile() {
|
||||
if (
|
||||
this.upload.fileList.length > 0 &&
|
||||
this.uploadResult.fileUrl.length < this.upload.fileList.length
|
||||
) {
|
||||
this.$refs.upload.submit();
|
||||
}else{
|
||||
this.$emit('callbackMethod', this.uploadResult);
|
||||
} else {
|
||||
this.$emit("callbackMethod", this.uploadResult);
|
||||
}
|
||||
},
|
||||
uploadReset(){
|
||||
uploadReset() {
|
||||
this.upload.fileList = [];
|
||||
this.uploadResult["fileUrl"] = [];
|
||||
this.uploadResult["fileName"] = [];
|
||||
},
|
||||
//移除文件
|
||||
handleFileRemove(file, fileList){
|
||||
handleFileRemove(file, fileList) {
|
||||
this.upload.fileList = fileList;
|
||||
},
|
||||
//监控上传文件列表
|
||||
@ -84,9 +91,9 @@ export default {
|
||||
this.upload.fileList = fileList;
|
||||
},
|
||||
// 文件数量超过限度
|
||||
handleFileexceed(file, fileList){
|
||||
handleFileexceed(file, fileList) {
|
||||
this.$message({
|
||||
message: "最多可上传"+ this.upload.limit +"份文件",
|
||||
message: "最多可上传" + this.upload.limit + "份文件",
|
||||
type: "warning",
|
||||
});
|
||||
},
|
||||
@ -96,39 +103,38 @@ export default {
|
||||
},
|
||||
// 文件上传成功处理
|
||||
handleFileSuccess(response, file, fileList) {
|
||||
if(response != null && response.code === 200){
|
||||
if (response != null && response.code === 200) {
|
||||
this.uploadResult.fileUrl.push(response.fileUrl);
|
||||
this.uploadResult.fileName.push(response.fileName);
|
||||
if(this.uploadResult.fileUrl.length === this.upload.fileList.length){
|
||||
if (this.uploadResult.fileUrl.length === this.upload.fileList.length) {
|
||||
//文件全部上传成功,则调用回调方法
|
||||
this.$emit('callbackMethod', this.uploadResult);
|
||||
this.$emit("callbackMethod", this.uploadResult);
|
||||
}
|
||||
}else{
|
||||
} else {
|
||||
this.upload.fileList = fileList.pop();
|
||||
this.$message.error('文件上传失败,请检查文件格式');
|
||||
this.$emit('changeSubmitFlag', false);
|
||||
this.$message.error("文件上传失败,请检查文件格式");
|
||||
this.$emit("changeSubmitFlag", false);
|
||||
}
|
||||
},
|
||||
// 文件上传失败处理
|
||||
handleFileFail(err, file, fileList){
|
||||
this.$message.error('文件上传失败,请检查文件格式');
|
||||
handleFileFail(err, file, fileList) {
|
||||
this.$message.error("文件上传失败,请检查文件格式");
|
||||
this.upload.fileList = fileList.pop();
|
||||
this.$emit('changeSubmitFlag', false);
|
||||
}
|
||||
this.$emit("changeSubmitFlag", false);
|
||||
},
|
||||
},
|
||||
props: {
|
||||
|
||||
prefix: {
|
||||
type: String,
|
||||
default: "case",
|
||||
},
|
||||
},
|
||||
created() {
|
||||
//this.uploadReset();
|
||||
//this.uploadReset();
|
||||
},
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
|
@ -1,41 +1,58 @@
|
||||
<template>
|
||||
<div>
|
||||
<div v-for="(item, index) in oldCaseFileList">
|
||||
<span style="margin-right: 10px;">
|
||||
{{item.fileName.length > 15 ? (item.fileName.substring(0,15)+"...") : item.fileName}}
|
||||
<div v-for="(item, index) in oldCaseFileList" :key="index">
|
||||
<span style="margin-right: 10px">
|
||||
{{
|
||||
item.fileName.length > 15
|
||||
? item.fileName.substring(0, 15) + "..."
|
||||
: item.fileName
|
||||
}}
|
||||
</span>
|
||||
<el-button style="margin-left: 10px;" type="danger" size="small" @click="removeOldFile(index)">移除该文件</el-button>
|
||||
<el-button
|
||||
style="margin-left: 10px"
|
||||
type="danger"
|
||||
size="small"
|
||||
@click="removeOldFile(index)"
|
||||
>移除该文件</el-button
|
||||
>
|
||||
</div>
|
||||
<el-upload class="upload-demo" style="margin-top: 10px;"
|
||||
ref="upload"
|
||||
drag
|
||||
:headers="upload.headers"
|
||||
:action="upload.url"
|
||||
:limit="upload.limit"
|
||||
:disabled="upload.isUploading"
|
||||
:file-list="upload.fileList"
|
||||
:multiple="upload.multiple"
|
||||
:on-remove="handleFileRemove"
|
||||
:on-change="handleFileChange"
|
||||
:on-exceed="handleFileexceed"
|
||||
:on-progress="handleFileUploadProgress"
|
||||
:on-success="handleFileSuccess"
|
||||
:on-error="handleFileFail"
|
||||
:data="upload.data"
|
||||
:auto-upload="false">
|
||||
<i class="el-icon-upload"></i>
|
||||
<el-upload
|
||||
class="upload-demo"
|
||||
style="margin-top: 10px"
|
||||
ref="upload"
|
||||
drag
|
||||
:headers="upload.headers"
|
||||
:action="upload.url"
|
||||
:limit="upload.limit"
|
||||
:disabled="upload.isUploading"
|
||||
:file-list="upload.fileList"
|
||||
:multiple="upload.multiple"
|
||||
:on-remove="handleFileRemove"
|
||||
:on-change="handleFileChange"
|
||||
:on-exceed="handleFileexceed"
|
||||
:on-progress="handleFileUploadProgress"
|
||||
:on-success="handleFileSuccess"
|
||||
:on-error="handleFileFail"
|
||||
:data="upload.data"
|
||||
:auto-upload="false"
|
||||
>
|
||||
<em class="el-icon-upload" />
|
||||
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
|
||||
<div class="el-upload__tip" slot="tip">已存在{{oldCaseFileList.length}}个文件,还可上传{{upload.limit}}个文件,且每个文件不超过{{upload.fileSize/(1024*1024)}}M</div>
|
||||
<div class="el-upload__tip" slot="tip">
|
||||
已存在{{ oldCaseFileList.length }}个文件,还可上传{{
|
||||
upload.limit
|
||||
}}个文件,且每个文件不超过{{ upload.fileSize / (1024 * 1024) }}M
|
||||
</div>
|
||||
</el-upload>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { getToken } from '@/utils/auth'
|
||||
import AutoHideMessage from "@/components/AutoHideMessage";
|
||||
import { getToken } from "@/utils/auth";
|
||||
// import AutoHideMessage from "@/components/AutoHideMessage";
|
||||
export default {
|
||||
name: "DragUploadEdit",
|
||||
components: {
|
||||
"AutoHideMessage":AutoHideMessage
|
||||
// "AutoHideMessage":AutoHideMessage
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -43,54 +60,57 @@ export default {
|
||||
// 是否禁用上传
|
||||
isUploading: false,
|
||||
// 上传的地址
|
||||
url: process.env.VUE_APP_BASE_API + "/custom/customerCase/uploadCaseFile",
|
||||
url: process.env.VUE_APP_BASE_API + "/custom/fileUpload/" + this.prefix,
|
||||
// 设置上传的请求头部
|
||||
headers: {Authorization: 'Bearer ' + getToken()},
|
||||
headers: { Authorization: "Bearer " + getToken() },
|
||||
// 其他需要携带的数据
|
||||
data:{},
|
||||
data: {},
|
||||
//文件列表
|
||||
fileList:[],
|
||||
fileList: [],
|
||||
//同时上传文件上限
|
||||
limit: 10 - this.caseFileList.length,
|
||||
//每个文件大小(单位:byte)
|
||||
fileSize: 1024 * 1024 * 10,
|
||||
//是否支持同时选择多张
|
||||
multiple: true
|
||||
multiple: true,
|
||||
},
|
||||
oldCaseFileList: this.caseFileList,
|
||||
uploadResult:{
|
||||
fileUrl:[],
|
||||
fileName:[]
|
||||
}
|
||||
uploadResult: {
|
||||
fileUrl: [],
|
||||
fileName: [],
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
async uploadFile(){
|
||||
if(this.upload.fileList.length > 0 && this.uploadResult.fileUrl.length < this.upload.fileList.length){
|
||||
async uploadFile() {
|
||||
if (
|
||||
this.upload.fileList.length > 0 &&
|
||||
this.uploadResult.fileUrl.length < this.upload.fileList.length
|
||||
) {
|
||||
this.$refs.upload.submit();
|
||||
}else{
|
||||
} else {
|
||||
//合并旧文件
|
||||
if(this.oldCaseFileList != null && this.oldCaseFileList.length > 0){
|
||||
if (this.oldCaseFileList != null && this.oldCaseFileList.length > 0) {
|
||||
await this.oldCaseFileList.forEach((item, index) => {
|
||||
this.uploadResult.fileUrl.unshift(item.fileUrl);
|
||||
this.uploadResult.fileName.unshift(item.fileName);
|
||||
});
|
||||
}
|
||||
this.$emit('callbackMethod', this.uploadResult);
|
||||
this.$emit("callbackMethod", this.uploadResult);
|
||||
}
|
||||
},
|
||||
removeOldFile(index){
|
||||
this.oldCaseFileList.splice(index,1);
|
||||
removeOldFile(index) {
|
||||
this.oldCaseFileList.splice(index, 1);
|
||||
this.upload.limit = 10 - this.oldCaseFileList.length;
|
||||
},
|
||||
uploadReset(){
|
||||
uploadReset() {
|
||||
this.upload.fileList = [];
|
||||
this.uploadResult["fileUrl"] = [];
|
||||
this.uploadResult["fileName"] = [];
|
||||
this.oldCaseFileList = [];
|
||||
},
|
||||
//移除文件
|
||||
handleFileRemove(file, fileList){
|
||||
handleFileRemove(file, fileList) {
|
||||
this.upload.fileList = fileList;
|
||||
},
|
||||
//监控上传文件列表
|
||||
@ -106,9 +126,9 @@ export default {
|
||||
this.upload.fileList = fileList;
|
||||
},
|
||||
// 文件数量超过限度
|
||||
handleFileexceed(file, fileList){
|
||||
handleFileexceed(file, fileList) {
|
||||
this.$message({
|
||||
message: "最多可上传"+ this.upload.limit +"份文件",
|
||||
message: "最多可上传" + this.upload.limit + "份文件",
|
||||
type: "warning",
|
||||
});
|
||||
},
|
||||
@ -118,56 +138,54 @@ export default {
|
||||
},
|
||||
// 文件上传成功处理
|
||||
async handleFileSuccess(response, file, fileList) {
|
||||
if(response != null && response.code === 200){
|
||||
if (response != null && response.code === 200) {
|
||||
this.uploadResult.fileUrl.push(response.fileUrl);
|
||||
this.uploadResult.fileName.push(response.fileName);
|
||||
if(this.uploadResult.fileUrl.length === this.upload.fileList.length){
|
||||
if (this.uploadResult.fileUrl.length === this.upload.fileList.length) {
|
||||
//文件全部上传成功,则调用回调方法
|
||||
if(this.oldCaseFileList != null && this.oldCaseFileList.length > 0){
|
||||
if (this.oldCaseFileList != null && this.oldCaseFileList.length > 0) {
|
||||
await this.oldCaseFileList.forEach((item, index) => {
|
||||
this.uploadResult.fileUrl.unshift(item.fileUrl);
|
||||
this.uploadResult.fileName.unshift(item.fileName);
|
||||
});
|
||||
}
|
||||
this.$emit('callbackMethod', this.uploadResult);
|
||||
this.$emit("callbackMethod", this.uploadResult);
|
||||
}
|
||||
}else{
|
||||
} else {
|
||||
this.upload.fileList = fileList.pop();
|
||||
this.$message.error('文件上传失败,请检查文件格式');
|
||||
this.$emit('changeSubmitFlag', false);
|
||||
this.$message.error("文件上传失败,请检查文件格式");
|
||||
this.$emit("changeSubmitFlag", false);
|
||||
}
|
||||
},
|
||||
// 文件上传失败处理
|
||||
handleFileFail(err, file, fileList){
|
||||
this.$message.error('文件上传失败,请检查文件格式');
|
||||
handleFileFail(err, file, fileList) {
|
||||
this.$message.error("文件上传失败,请检查文件格式");
|
||||
this.upload.fileList = fileList.pop();
|
||||
this.$emit('changeSubmitFlag', false);
|
||||
}
|
||||
this.$emit("changeSubmitFlag", false);
|
||||
},
|
||||
},
|
||||
props: {
|
||||
caseFileList:{
|
||||
caseFileList: {
|
||||
type: Array,
|
||||
default: function () {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
prefix: {
|
||||
type: String,
|
||||
default: "case",
|
||||
},
|
||||
},
|
||||
created() {
|
||||
|
||||
created() {},
|
||||
watch: {
|
||||
caseFileList: function (newVal, oldVal) {
|
||||
//console.log(newVal.length);
|
||||
this.oldCaseFileList = newVal;
|
||||
},
|
||||
},
|
||||
watch : {
|
||||
caseFileList:function(newVal, oldVal) {
|
||||
//console.log(newVal.length);
|
||||
this.oldCaseFileList = newVal;
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
|
Reference in New Issue
Block a user