From b4fa5d9519d79a145c4849edd55b952a925bbffb Mon Sep 17 00:00:00 2001
From: Ching <loooching@gmail.com>
Date: Sat, 2 Oct 2021 17:28:06 +0800
Subject: [PATCH] =?UTF-8?q?feat(recipe=20detail):=20=E7=BC=96=E8=BE=91?=
 =?UTF-8?q?=E8=AF=A6=E6=83=85=E6=97=B6=E7=BC=96=E8=BE=91=E6=A1=86=E5=B1=95?=
 =?UTF-8?q?=E7=A4=BA=E5=BD=93=E5=89=8D=E8=AF=A6=E6=83=85=E5=86=85=E5=AE=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

编辑详情时编辑框展示当前详情内容

Signed-off-by: Ching <loooching@gmail.com>
---
 frontend/src/components/input_recipe.vue | 17 +++++++-----
 frontend/src/utils/constants.js          | 33 ++++++++++++++++++++++++
 frontend/src/views/home.vue              |  2 +-
 frontend/src/views/recipeDetail.vue      | 30 ++++++++++++++++-----
 4 files changed, 68 insertions(+), 14 deletions(-)

diff --git a/frontend/src/components/input_recipe.vue b/frontend/src/components/input_recipe.vue
index e04fb25..37eea5a 100644
--- a/frontend/src/components/input_recipe.vue
+++ b/frontend/src/components/input_recipe.vue
@@ -62,18 +62,23 @@
     </el-col>
   </el-row>
 </template>
-
 <script>
 import axios from 'axios';
 export default {
-  inject: ['reload'],
+  props: ['recipe_'],
+  watch: {
+    recipe_(val) {
+      this.form = val;
+      this.recipe_id = val.id;
+    },
+  },
   data: function() {
     return {
       form: {
-        name: '',
-        recipe_type: 'meat',
-        difficulty: '1',
-        rate: '1',
+        name: null,
+        recipe_type: null,
+        difficulty: null,
+        rate: null,
         note: null,
       },
       rules: {
diff --git a/frontend/src/utils/constants.js b/frontend/src/utils/constants.js
index 83ea4bf..50fbfdc 100644
--- a/frontend/src/utils/constants.js
+++ b/frontend/src/utils/constants.js
@@ -1,5 +1,38 @@
+const type_map = {
+  vegetable: '青菜',
+  meat: '肉',
+  soup: '汤',
+};
+const rate_map = {
+  1: '🍚',
+  2: '🍚 🍚',
+  3: '🍚 🍚 🍚',
+  4: '🍚 🍚 🍚 🍚',
+  5: '🍚 🍚 🍚 🍚 🍚',
+};
+const difficulty_map = {
+  1: '⭐',
+  2: '⭐ ⭐',
+  3: '⭐ ⭐ ⭐',
+  4: '⭐ ⭐ ⭐ ⭐',
+  5: '⭐ ⭐ ⭐ ⭐ ⭐',
+};
+function formatRecipeType(recipe_type) {
+  return type_map[recipe_type];
+}
+function formatRate(rate) {
+  return rate_map[rate];
+}
+function formatDifficulty(difficulty) {
+  return difficulty_map[difficulty];
+}
+
+
 module.exports = {
   RECIPE_TYPE_VEGETABLE: 'vegetable',
   RECIPE_TYPE_META: 'meat',
   RECIPE_TYPE_SOUP: 'soup',
+  formatRecipeType,
+  formatDifficulty,
+  formatRate,
 }
diff --git a/frontend/src/views/home.vue b/frontend/src/views/home.vue
index 9fcc374..fc8c6ae 100644
--- a/frontend/src/views/home.vue
+++ b/frontend/src/views/home.vue
@@ -40,7 +40,7 @@
     </el-col>
   </el-row>
   <el-row justify="center">
-    <el-col :span="18"> <input_recipe></input_recipe> </el-col>
+    <el-col :span="18"> <input_recipe :recipe="{}"></input_recipe> </el-col>
   </el-row>
 </template>
 
diff --git a/frontend/src/views/recipeDetail.vue b/frontend/src/views/recipeDetail.vue
index 272e33b..15c5528 100644
--- a/frontend/src/views/recipeDetail.vue
+++ b/frontend/src/views/recipeDetail.vue
@@ -5,17 +5,27 @@
     v-bind:content="recipe.name"
   ></el-page-header>
 
-  <div v-if="recipe != null">
-    <el-row :gutter="10">
-      <el-col :span="8"> 类型：{{ recipe.recipe_type }} </el-col>
-      <el-col :span="8"> 难度：{{ recipe.difficulty }} </el-col>
-      <el-col :span="8"> 评分：{{ recipe.rate }} </el-col>
+  <div v-if="recipe != null" class="content">
+    <el-row justify="center">
+      <el-col :span="18">
+        <el-row justify="center">
+          <el-col :span="8">
+            类型：{{ constants.formatRecipeType(recipe.recipe_type) }}
+          </el-col>
+          <el-col :span="8">
+            难度：{{ constants.formatDifficulty(recipe.difficulty) }}
+          </el-col>
+          <el-col :span="8">
+            评分：{{ constants.formatRate(recipe.rate) }}
+          </el-col>
+        </el-row>
+        <el-row> 备注：{{ recipe.note }} </el-row>
+      </el-col>
     </el-row>
-    <el-row :gutter="10"> 备注：{{ recipe.note }} </el-row>
   </div>
   <el-row justify="center">
     <el-col :span="18">
-      <input_recipe :recipe-id="recipe.id"></input_recipe>
+      <input_recipe :recipe-id="recipe.id" :recipe_="recipe"></input_recipe>
     </el-col>
   </el-row>
 </template>
@@ -24,12 +34,14 @@ import axios from 'axios';
 import 'element-plus/dist/index.css';
 import router from '@/router/index';
 import input_recipe from '@/components/input_recipe.vue';
+import constants from '@/utils/constants.js';
 export default {
   name: 'RecipeDetail',
   components: { input_recipe },
   data: function() {
     return {
       recipe: {},
+      constants: constants,
     };
   },
   mounted() {
@@ -47,4 +59,8 @@ export default {
 
 <style>
 @import url('//unpkg.com/element-plus/dist/index.css');
+
+.content {
+  padding: 20px 10px;
+}
 </style>