完成菜谱相关页面

.env.production

@@ -3,4 +3,4 @@ ENV = 'production'
 PORT = '9531'
 
 # base api
-VUE_APP_BASE_API = '//59.110.65.177:8008'
+VUE_APP_BASE_API = '//feuc.liveplus.online'

.gitignore

@@ -1,3 +1,4 @@
+dist.zip
 .DS_Store
 node_modules/
 dist/

src/api/food.js

@@ -135,3 +135,12 @@ export function removeFoodUnit(id, data) {
     data
   })
 }
+
+// 查询食物信息，用于菜谱食物选择
+export function getFoodBriefInfos(params) {
+  return request({
+    url: `/api/foods/brief-infos`,
+    method: 'get',
+    params
+  })
+}

src/api/recipe.js

@@ -76,3 +76,28 @@ export function getRecipeSteps(id) {
     method: 'get'
   })
 }
+
+// 添加食物
+export function addFood(recipeId, data) {
+  return request({
+    url: `/api/recipes/${recipeId}/foods`,
+    method: 'post',
+    data
+  })
+}
+
+// 获取食谱的食物列表
+export function getRecipeFoods(id) {
+  return request({
+    url: `/api/recipes/${id}/foods`,
+    method: 'get'
+  })
+}
+
+// 删除食物的食物
+export function removeRecipeFood(recipeId, recipeFoodId) {
+  return request({
+    url: `/api/recipes/${recipeId}/foods/${recipeFoodId}`,
+    method: 'delete'
+  })
+}

src/views/recipe/food.vue

@@ -1,10 +1,174 @@
 <template>
+  <div class="app-container">
+    <div class="filter-container">
+      食物：
+      <el-select
+        v-model="params.foodId"
+        filterable
+        remote
+        reserve-keyword
+        style="width: 200px;margin-left: 10px;"
+        placeholder="请输入营养素关键词"
+        :remote-method="queryFoods"
+        :loading="loading"
+        @change="changeUnits"
+        ref="foodSelect"
+      >
+        <el-option
+          v-for="item in foods"
+          :key="item.id"
+          :label="item.name"
+          :value="item.id">
+        </el-option>
+      </el-select>
+      数量：
+      <el-input
+        v-model="params.quantity"
+        style="width: 80px;"
+        class="filter-item"
+      />
+      <el-select
+        v-model="params.unitName"
+        style="width: 200px;margin-left: 10px;"
+      >
+        <el-option
+          v-for="item in units"
+          :key="item"
+          :label="item"
+          :value="item"
+        />
+      </el-select>
+      主材/辅材:
+      <el-radio v-model="params.foodType" :label="0">主材</el-radio>
+      <el-radio v-model="params.foodType" :label="1">辅材</el-radio>
+      <el-button
+        class="filter-item"
+        style="margin-left: 10px;"
+        type="primary"
+        @click="addFood">
+        添加
+      </el-button>
+    </div>
 
+    <el-table
+      :key="0"
+      v-loading="listLoading"
+      :data="list"
+      border
+      fit
+      highlight-current-row
+      style="width: 60%;margin-top: 10px"
+    >
+      <el-table-column type="index" label="序号" align="center" width="60px" />
+      <el-table-column label="食物名称" align="center">
+        <template slot-scope="{row}">
+          <span>{{ row.foodName }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="用量" align="center">
+        <template slot-scope="{row}">
+          <span>{{ row.quantity + row.unitName }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="主材/辅材" align="center">
+        <template slot-scope="{row}">
+          <span>{{ row.foodType | foodTypeFilter }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="100">
+        <template slot-scope="{row}">
+          <el-button size="mini" type="danger" @click="removeFood(row)">
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
 </template>
 
 <script>
+import { getFoodBriefInfos } from '@/api/food'
+import { getRecipeFoods, addFood, removeRecipeFood } from '@/api/recipe'
+
+const foodTypeMapping = { 0: '主材', 1: '辅材' }
 export default {
-  name: 'RecipeFood'
+  name: 'RecipeFood',
+  components: {},
+  filters: {
+    foodTypeFilter(value){
+      return foodTypeMapping[value]
+    }
+  },
+  data() {
+    return {
+      foods: [],
+      units: [],
+      listLoading: false,
+      params: {},
+      loading: false,
+      list: [],
+      recipeId: ''
+    }
+  },
+  created() {
+    this.recipeId = this.$route.params && this.$route.params.id
+    this.fetchData()
+  },
+  mounted() {
+    this.$refs.foodSelect.focus()
+  },
+  methods: {
+    fetchData(){
+      this.listLoading = true
+      getRecipeFoods(this.recipeId).then(res => {
+        this.list = res.data.list
+        this.listLoading = false
+      }).catch(() => {
+        this.$message.error('获取数据失败')
+        this.listLoading = false
+      })
+    },
+    queryFoods(query) {
+      getFoodBriefInfos({ query }).then(res => {
+        this.foods = res.data.list
+      }).catch(() => {
+        this.foods = []
+      })
+    },
+    changeUnits(value) {
+      this.units = []
+      for (let i=0; i < this.foods.length; i++) {
+        if (this.foods[i].id === value){
+          this.units = this.foods[i].unitNames
+          break
+        }
+      }
+    },
+    addFood() {
+      if (!this.params.foodId || !this.params.unitName || !this.params.quantity) {
+        this.$message.error('请完善录入信息')
+        return
+      }
+      addFood(this.recipeId, this.params).then(res => {
+        this.fetchData()
+        this.params = {}
+        this.$refs.foodSelect.focus()
+        this.$message.success('提交成功')
+      }).catch(res => {
+        this.$message.error(res.data.message)
+        this.fetchData()
+      })
+    },
+    removeFood(row) {
+      removeRecipeFood(this.recipeId, row.id).then(res => {
+        this.$message.success('提交成功')
+        this.fetchData()
+      }).catch(res => {
+        this.$message.error(res.data.message)
+        this.fetchData()
+      })
+    }
+  }
 }
 </script>