食物图片增加类型

src/components/Upload/SingleImage.vue

@@ -45,6 +45,10 @@
       uploaderWidth: {
         type: String,
         default: '100%'
+      },
+      imageType: {
+        type: String,
+        default: ''
       }
     },
     data() {
@@ -66,15 +70,14 @@
     methods: {
       rmImage() {
         this.emitInput('')
-        this.$emit("success", "")
+        this.$emit("success", { fileUrl: '', imageType: this.imageType })
       },
       emitInput(val) {
         this.$emit('input', val)
       },
       handleImageSuccess(response) {
-        // this.emitInput(process.env.VUE_APP_BASE_API + '/api/files/view-file?path=' + response.url)
         this.emitInput(response.url)
-        this.$emit("success", response.url)
+        this.$emit("success", { fileUrl: response.url, imageType: this.imageType })
       }
     }
   }

src/views/food/components/FoodDetail.vue

@@ -33,10 +33,28 @@
             style="width: 60%"
           />
         </el-form-item>
-        <el-form-item label="图片列表：" prop="images" style="margin-bottom: 30px;width: 60%">
+        <el-form-item label="食物主图" prop="coverPic">
+          <single-image
+            :value="postForm.mainImage"
+            image-type="MAIN"
+            :show-preview="true"
+            @success="updateFile"
+            style="width: 60%"
+          />
+        </el-form-item>
+        <el-form-item label="营养素图片" prop="coverPic">
+          <single-image
+            :value="postForm.nutrientImage"
+            image-type="NUTRIENT"
+            :show-preview="true"
+            style="width: 60%"
+            @success="updateFile"
+          />
+        </el-form-item>
+        <el-form-item label="其他图片列表：" prop="otherImages" style="margin-bottom: 30px;width: 60%">
           <dropzone
             id="foodImageDropzone"
-            :default-img="postForm.images"
+            :default-img="postForm.otherImages"
             @dropzone-removedFile="removeFile"
             @dropzone-success="addFile"
           />
@@ -82,12 +100,13 @@
 <script>
 import { create, getDetail, update } from '@/api/food'
 import Dropzone from '@/components/Dropzone'
+import SingleImage from '@/components/Upload/SingleImage'
 import { getNutrientTemplates } from '@/api/nutrientTemplate'
 import { getFoodCategories } from '@/api/foodCategory'
 
 export default {
   name: "FoodDetail",
-  components: { Dropzone },
+  components: { Dropzone, SingleImage },
   props: {
     isEdit: {
       type: Boolean,
@@ -152,7 +171,7 @@ export default {
       })
     },
     removeFile(file) {
-      let imgs = this.postForm.images
+      let imgs = this.postForm.otherImages
       let imgIndex = -1
       for (let i = 0; i < imgs.length; i++) {
         if (imgs[i] === file.url) {
@@ -163,10 +182,10 @@ export default {
       imgs.splice(imgIndex, 1)
     },
     addFile(file) {
-      if (this.postForm.images) {
-        this.postForm.images.push(file.fileUrl)
+      if (this.postForm.otherImages) {
+        this.postForm.otherImages.push(file.fileUrl)
       } else {
-        this.postForm.images = [file.fileUrl]
+        this.postForm.otherImages = [file.fileUrl]
       }
     },
     queryTemplates(query='') {
@@ -187,6 +206,13 @@ export default {
     },
     handleChange(data) {
       this.postForm.categoryId = data[data.length - 1]
+    },
+    updateFile(data) {
+      if (data.imageType === 'MAIN') {
+        this.$set(this.postForm, 'mainImage', data.fileUrl)
+      } else if (data.imageType === "NUTRIENT") {
+        this.$set(this.postForm, 'nutrientImage', data.fileUrl)
+      }
     }
   }
 }

src/views/food/index.vue

@@ -55,9 +55,9 @@
       <el-table-column label="图片" align="center" width="180">
         <template slot-scope="{row}">
           <el-image
-            v-if="row.images && row.images.length > 0"
+            v-if="row.mainImage"
             style="width: 150px; height: 100px"
-            :src="row.images[0]"
+            :src="row.mainImage"
             fit="contain"
           />
         </template>

src/views/nutrient/index.vue

@@ -258,8 +258,8 @@ export default {
         this.loading = false
       })
     },
-    updateFile(value) {
-      this.$set(this.params, 'coverPic', value)
+    updateFile(data) {
+      this.$set(this.params, 'coverPic', data.fileUrl)
     },
     updateSort(row, type) {
       updateSortOrder(row.id, { type }).then(res => {

src/views/recipe/index.vue

@@ -196,8 +196,8 @@ export default {
         this.fetchData()
       })
     },
-    updateFile(value) {
-      this.$set(this.params, 'coverPic', value)
+    updateFile(data) {
+      this.$set(this.params, 'coverPic', data.fileUrl)
     },
     showDialog(row) {
       getRecipeReport(row.id).then(res => {

src/views/recipe/step.vue

@@ -102,8 +102,8 @@ export default {
         this.listLoading = false
       })
     },
-    updateFile(value) {
-      this.$set(this.params, 'stepPic', value)
+    updateFile(data) {
+      this.$set(this.params, 'stepPic', data.fileUrl)
     },
     handleDelete(row) {
       removeRecipeStep(this.recipeId, row.id).then(res => {

src/views/user/index.vue

@@ -245,8 +245,8 @@
           this.dialogFormVisible = false
         })
       },
-      uploadFile(value) {
-        this.$set(this.params, "profilePic", value)
+      uploadFile(data) {
+        this.$set(this.params, "profilePic", data.fileUrl)
       },
       resetPassword(row) {
         this.resetPasswordParams = { id: row.id }