食材添加信息

This commit is contained in:
huangdeliang
2021-03-16 17:53:17 +08:00
parent 7a3ab6bfef
commit 03eb2508b6
11 changed files with 761 additions and 518 deletions

View File

@ -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>

View File

@ -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>