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"
           />
@@ -51,8 +69,8 @@
     </el-form>
 
     <el-dialog title="从模板导入营养素" :visible.sync="dialogFormVisible">
-      <el-form ref="dialogForm" label-position="left" label-width="80px" style="width: 400px; margin-left:50px;">
-        <el-form-item label="模板：" prop="templateId">
+      <el-form ref="dialogForm" label-position="left" label-width="60px" style="width: 80%; margin-left:50px;">
+        <el-form-item label="模板：" prop="templateId" >
           <el-select
             v-model="templateId"
             class="filter-item"
@@ -62,6 +80,7 @@
             placeholder="请输入模板关键词"
             :loading="templateLoading"
             :remote-method="queryTemplates"
+            style="width: 100%"
           >
             <el-option v-for="item in templates" :key="`template${item.id}`" :label="item.name" :value="item.id" />
           </el-select>
@@ -82,12 +101,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,
@@ -137,10 +157,11 @@ export default {
       this.$refs['postForm'].validate((valid) => {
         if (valid) {
           const resultPromise = this.isEdit ? update(this.foodId, this.postForm) : create(this.postForm)
-          resultPromise.then(() => {
+          resultPromise.then((res) => {
             this.$notify.success('提交成功')
             this.loading = false
-            this.$router.push({ path: '/food' })
+            const nextPath = this.isEdit ? '/food' : `/food/${res.data}/nutrient`
+            this.$router.push({ path: nextPath })
           }).catch(res => {
             this.$message.error(res.data.message)
             this.loading = false
@@ -152,7 +173,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,15 +184,18 @@ 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='') {
       getNutrientTemplates({ query }).then(res => {
         this.templates = res.data.list
+        if (this.templates.length > 0) {
+          this.templateId = this.templates[0].id
+        }
       }).catch(() => {
         this.templates = []
       })
@@ -187,6 +211,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/food/nutrient.vue

@@ -219,7 +219,7 @@
     </el-table>
 
     <el-dialog title="从模板导入营养素" :visible.sync="dialogFormVisible" v-loading="templateLoading">
-      <el-form ref="dialogForm" label-position="left" label-width="80px" style="width: 400px; margin-left:50px;">
+      <el-form ref="dialogForm" label-position="left" label-width="60px" style="width: 80%; margin-left:50px;">
         <el-form-item label="模板：" prop="templateId">
           <el-select
             v-model="templateId"
@@ -229,6 +229,7 @@
             reserve-keyword
             placeholder="请输入模板关键词"
             :remote-method="queryTemplates"
+            style="width: 100%"
           >
             <el-option v-for="item in templates" :key="`template${item.id}`" :label="item.name" :value="item.id" />
           </el-select>
@@ -428,6 +429,9 @@ export default {
     queryTemplates(query='') {
       getNutrientTemplates({ query }).then(res => {
         this.templates = res.data.list
+        if (this.templates.length > 0) {
+          this.templateId = this.templates[0].id
+        }
       }).catch(() => {
         this.templates = []
       })

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 }