食材添加信息

2021-03-16 17:53:17 +08:00
parent 7a3ab6bfef
commit 03eb2508b6
11 changed files with 761 additions and 518 deletions
--- a/stdiet-ui/src/components/FileUpload/DragUpload.vue
+++ b/stdiet-ui/src/components/FileUpload/DragUpload.vue
@@ -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>

--- a/stdiet-ui/src/components/FileUpload/DragUploadEdit.vue
+++ b/stdiet-ui/src/components/FileUpload/DragUploadEdit.vue
@@ -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>