完成食物相关页面

src/api/food.js

@@ -67,3 +67,71 @@ export function remove(id) {
     method: 'delete'
   })
 }
+
+// 添加食物规格
+export function addFoodModifier(id, data) {
+  return request({
+    url: `/api/foods/${id}/modifiers`,
+    method: 'post',
+    data
+  })
+}
+
+// 更新食物规格
+export function updateFoodModifier(id, modifierId, data) {
+  return request({
+    url: `/api/foods/${id}/modifiers/${modifierId}`,
+    method: 'post',
+    data
+  })
+}
+
+// 删除食物规格
+export function removeFoodModifier(id, modifierId) {
+  return request({
+    url: `/api/foods/${id}/modifiers/${modifierId}`,
+    method: 'delete'
+  })
+}
+
+// 获取食物规格列表
+export function getFoodModifiers(id) {
+  return request({
+    url: `/api/foods/${id}/modifiers`,
+    method: 'get'
+  })
+}
+
+// 获取食物规格详情
+export function getFoodModifier(id, modifierId) {
+  return request({
+    url: `/api/foods/${id}/modifiers/${modifierId}`,
+    method: 'get'
+  })
+}
+
+// 添加/更新食物基础单位转换关系
+export function createOrUpdateFoodUnit(id, data) {
+  return request({
+    url: `/api/foods/${id}/units`,
+    method: 'post',
+    data
+  })
+}
+
+// 获取食物基础单位转换关系
+export function getFoodUnits(id) {
+  return request({
+    url: `/api/foods/${id}/units`,
+    method: 'get'
+  })
+}
+
+// 删除食物基础单位转换关系
+export function removeFoodUnit(id, data) {
+  return request({
+    url: `/api/foods/${id}/units`,
+    method: 'delete',
+    data
+  })
+}

src/router/config.js

@@ -56,9 +56,23 @@ export const asyncRouterMap = [
       {
         path: ':id/modifier',
         name: '规格管理',
-        component: () => import('@/views/food/modifier'),
+        component: () => import('@/views/foodModifier/index'),
         meta: { title: '规格管理' },
         hidden: true
+      },
+      {
+        path: ':id/modifier/create',
+        name: '新建食物规格',
+        component: () => import('@/views/foodModifier/create'),
+        meta: { title: '新建食物规格' },
+        hidden: true
+      },
+      {
+        path: ':id/modifier/:modifierId/edit',
+        name: '编辑食物规格',
+        component: () => import('@/views/foodModifier/edit'),
+        meta: { title: '编辑食物规格' },
+        hidden: true
       }
     ]
   },

src/views/food/components/FoodDetail.vue

@@ -2,7 +2,7 @@
   <div class="createPost-container">
     <el-form ref="postForm" :model="postForm" :rules="rules" label-position="right" label-width="90px" class="form-container">
       <div class="createPost-main-container">
-        <el-form-item label="ID：" style="margin-bottom: 40px;width: 60%" prop="id">
+        <el-form-item label="自定义ID：" style="margin-bottom: 40px;width: 60%" prop="id">
           <el-input v-model="postForm.id2" placeholder="请输入ID" />
         </el-form-item>
         <el-form-item label="名称：" prop="name" style="margin-bottom: 40px;width: 60%" required>
@@ -24,39 +24,11 @@
               <el-input v-model="postForm.nvSpec" placeholder="请输入nvSpec" />
             </el-col>
             <el-col :span="6">
-              <el-select
-                v-model="postForm.nvSpecUnit"
-                class="filter-item"
-                filterable
-                remote
-                reserve-keyword
-                placeholder="请输入单位关键词"
-                :loading="unitLoading"
-                :remote-method="queryUnits"
-              >
-                <el-option v-for="item in units" :key="`nv_spec${item.id}`" :label="item.name" :value="item.id" />
-              </el-select>
-            </el-col>
-          </el-row>
-        </el-form-item>
-        <el-form-item label="in.init：" prop="inInit" style="margin-bottom: 40px;width: 60%">
-          <el-row :gutter="10">
-            <el-col :span="8">
-              <el-input v-model="postForm.inInit" placeholder="请输入inInit" />
-            </el-col>
-            <el-col :span="6">
-              <el-select
-                v-model="postForm.inInitUnit"
-                class="filter-item"
-                filterable
-                remote
-                reserve-keyword
-                placeholder="请输入单位关键词"
-                :loading="unitLoading"
-                :remote-method="queryUnits"
-              >
-                <el-option v-for="item in units" :key="`in_init${item.id}`" :label="item.name" :value="item.id" />
-              </el-select>
+              <el-autocomplete
+                v-model="postForm.nvSpecUnitName"
+                :fetch-suggestions="querySearchAsync"
+                placeholder="请输入内容"
+              ></el-autocomplete>
             </el-col>
           </el-row>
         </el-form-item>
@@ -69,21 +41,10 @@
         <el-form-item label="卡尺每格刻度：" prop="stepScale" style="margin-bottom: 40px;width: 60%">
           <el-input v-model="postForm.stepScale" placeholder="请输入卡尺每格刻度" />
         </el-form-item>
-        <el-form-item label="计量单位提示：" prop="unitTip" style="margin-bottom: 40px;width: 60%">
-          <el-input v-model="postForm.unitTip" placeholder="请输入计量单位提示" />
-        </el-form-item>
-        <el-form-item label="主图列表：" prop="img" style="margin-bottom: 30px;width: 60%">
+        <el-form-item label="图片列表：" prop="images" style="margin-bottom: 30px;width: 60%">
           <dropzone
             :id="mainImgDropzone"
-            :default-img="postForm.mainImgs"
-            @dropzone-removedFile="removeFile"
-            @dropzone-success="addFile"
-          />
-        </el-form-item>
-        <el-form-item label="营养素信息图列表：" prop="img" style="margin-bottom: 30px;width: 60%">
-          <dropzone
-            :id="nutrientImgDropzone"
-            :default-img="postForm.nutrientImgs"
+            :default-img="postForm.images"
             @dropzone-removedFile="removeFile"
             @dropzone-success="addFile"
           />
@@ -151,7 +112,6 @@ export default {
         name: [{ required: true, message: '名称不能为空', trigger: 'blur' }]
       },
       foodId: '',
-      units: [],
       unitLoading: false,
       dialogFormVisible: false,
       templateLoading:false,
@@ -168,12 +128,6 @@ export default {
   methods: {
     fetchData(id) {
       getDetail(id).then(res => {
-        if (res.data.nvSpecUnit) {
-          this.units.push({ id: res.data.nvSpecUnit, name: res.data.nvSpecUnitName })
-        }
-        if (res.data.inInitUnit && res.data.nvSpecUnitName !== res.data.inInitUnitName) {
-          this.units.push({ id: res.data.inInitUnit, name: res.data.inInitUnitName })
-        }
         this.postForm = res.data
       })
     },
@@ -194,31 +148,26 @@ export default {
     },
     createData() {
       create(this.postForm).then(res => {
-        this.$notify({ title: '成功', message: '创建试题成功', type: 'success', duration: 2000 })
+        this.$message.success('创建成功')
         this.loading = false
         this.$router.push({ path: '/food' })
       }).catch(error => {
-        this.$notify({ title: '失败', message: error.response.data.message, type: 'error', duration: 2000 })
+        this.$message.error(res.data.message)
         this.loading = false
       })
     },
     updateData() {
       update(this.foodId, this.postForm).then(res => {
-        this.$notify({ title: '成功', message: '更新试题成功', type: 'success', duration: 2000 })
+        this.$message.success('更新成功')
         this.loading = false
         this.$router.push({ path: '/food' })
       }).catch(error => {
-        this.$notify({ title: '失败', message: error.response.data.message, type: 'error', duration: 2000 })
+        this.$message.error(res.data.message)
         this.loading = false
       })
     },
     removeFile(file) {
-      let imgs = []
-      if (file.dropzoneId === this.mainImgDropzone) {
-        imgs = this.postForm.mainImgs
-      } else {
-        imgs = this.postForm.nutrientImgs
-      }
+      let imgs = this.postForm.images
       let imgIndex = -1
       for (let i = 0; i < imgs.length; i++) {
         if (imgs[i] === file.fileUrl) {
@@ -230,29 +179,13 @@ export default {
     },
     addFile(file) {
       if (file.dropzoneId === this.mainImgDropzone) {
-        if (this.postForm.mainImgs) {
-          this.postForm.mainImgs.push(file.fileUrl)
+        if (this.postForm.images) {
+          this.postForm.images.push(file.fileUrl)
         } else {
-          this.postForm.mainImgs = [file.fileUrl]
-        }
-      } else {
-        if (this.postForm.nutrientImgs) {
-          this.postForm.nutrientImgs.push(file.fileUrl)
-        } else {
-          this.postForm.nutrientImgs = [file.fileUrl]
+          this.postForm.images = [file.fileUrl]
         }
       }
     },
-    queryUnits(query) {
-      getUnits({ query }).then(res => {
-        this.units = res.data.list
-        // console.log(this.units)
-        // for (let i=0; i < res.data.list.length; i++){
-        //   this.units.add({ id: res.data.list[i].id, name: res.data.list[i].name })
-        // }
-      }).catch(() => {
-      })
-    },
     queryTemplates(query) {
       getNutrientTemplates({ query }).then(res => {
         this.templates = res.data.list
@@ -267,6 +200,13 @@ export default {
     submitFromTemplate() {
       this.postForm.templateId = this.templateId
       this.submitForm()
+    },
+    querySearchAsync(query, cb) {
+      getUnits({ query }).then(res => {
+        cb(res.data.list.map(item => { return { value: item.name } }))
+      }).catch(() => {
+        cb([])
+      })
     }
   }
 }

src/views/food/index.vue

@@ -34,7 +34,7 @@
       style="width: 100%;"
     >
       <el-table-column type="index" label="序号" align="center" width="60px" />
-      <el-table-column label="ID" align="center" width="70px">
+      <el-table-column label="自定义ID" align="center" width="70px">
         <template slot-scope="{row}">
           <span>{{ row.id2 }}</span>
         </template>
@@ -64,11 +64,6 @@
           <span>{{ row.nvSpec ? row.nvSpec + row.nvSpecUnitName : '' }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="in.init" align="center" width="70px">
-        <template slot-scope="{row}">
-          <span>{{ row.inInit ? row.inInit + row.inInitUnitName : '' }}</span>
-        </template>
-      </el-table-column>
       <el-table-column label="最小刻度" align="center" width="70px">
         <template slot-scope="{row}">
           <span>{{ row.minScale }}</span>

src/views/food/modifier.vue

@@ -1,13 +0,0 @@
-<template>
-
-</template>
-
-<script>
-  export default {
-    name: 'FoodModifier'
-  }
-</script>
-
-<style scoped>
-
-</style>

src/views/food/unit.vue

@@ -1,10 +1,136 @@
 <template>
-
+  <div class="app-container">
+    <div class="filter-container">
+      From单位：
+      <el-select
+        v-model="params.fromUnit"
+        filterable
+        reserve-keyword
+        style="width: 200px;margin-left: 10px;"
+        placeholder="请输入单位关键词"
+        ref="fromUnitSelect"
+      >
+        <el-option
+          v-for="item in units"
+          :key="item.id"
+          :label="item.name"
+          :value="item.id">
+        </el-option>
+      </el-select>
+      To单位：
+      <el-select
+        v-model="params.toUnit"
+        filterable
+        reserve-keyword
+        style="width: 200px;margin-left: 10px;"
+        placeholder="请输入单位关键词"
+        ref="toUnitSelect"
+      >
+        <el-option
+          v-for="item in units"
+          :key="item.id"
+          :label="item.name"
+          :value="item.id">
+        </el-option>
+      </el-select>
+      转换率:
+      <el-input v-model="params.ratio" placeholder="1 FromUnit = * ToUnit" style="width: 200px" />
+      <el-button
+        class="filter-item"
+        style="margin-left: 10px;"
+        type="primary"
+        @click="addFoodUnit">
+        添加
+      </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="From单位" align="center">
+        <template slot-scope="{row}">
+          <span>{{ row.fromUnitName }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="To单位" align="center">
+        <template slot-scope="{row}">
+          <span>{{ row.toUnitName }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="转换率" align="center">
+        <template slot-scope="{row}">
+          <span>{{ row.ratio }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="100">
+        <template slot-scope="{row,$index}">
+          <el-button size="mini" type="danger" @click="removeFoodUnit(row)">
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
 </template>
 
 <script>
+  import { getBaseUnits } from '@/api/unit'
+  import { getFoodUnits, createOrUpdateFoodUnit, removeFoodUnit } from '@/api/food'
+
   export default {
-    name: 'FoodUnit'
+    name: 'FoodUnit',
+    created() {
+      this.foodId = this.$route.params && this.$route.params.id
+      this.fetchBaseUnits()
+      this.fetchData()
+    },
+    data() {
+      return {
+        units: [],
+        params: {},
+        listLoading: false,
+        list: []
+      }
+    },
+    methods: {
+      fetchBaseUnits() {
+        getBaseUnits().then(res => {
+          this.units = res.data.list
+        })
+      },
+      fetchData() {
+        getFoodUnits(this.foodId).then(res => {
+          this.list = res.data.list
+        })
+      },
+      addFoodUnit() {
+        this.params.foodId = this.foodId
+        createOrUpdateFoodUnit(this.foodId, this.params).then(res => {
+          this.$message.success('提交成功')
+          this.$refs.fromUnitSelect.focus()
+          this.fetchData()
+        }).catch(res => {
+          this.$message.error(res.data.message)
+          this.fetchData()
+        })
+      },
+      removeFoodUnit(row) {
+        removeFoodUnit(this.foodId, row).then(res => {
+          this.$message.success('提交成功')
+          this.fetchData()
+          this.$refs.fromUnitSelect.focus()
+        }).catch(res => {
+          this.$message.error(res.data.message)
+          this.fetchData()
+        })
+      }
+    }
   }
 </script>
 

src/views/foodModifier/components/ModifierDetail.vue

@@ -0,0 +1,160 @@
+<template>
+  <div class="createPost-container">
+    <el-form ref="postForm" :model="postForm" :rules="rules" label-position="right" label-width="90px" class="form-container">
+      <div class="createPost-main-container">
+        <el-form-item label="规格名称：" style="margin-bottom: 40px;width: 60%" prop="name">
+          <el-input v-model="postForm.name" placeholder="请输入名称" />
+        </el-form-item>
+        <el-form-item label="数值：" style="margin-bottom: 40px;width: 60%" prop="quantity">
+          <el-input v-model="postForm.quantity" placeholder="请输入数值" />
+        </el-form-item>
+        <el-form-item label="单位名称：" style="margin-bottom: 40px;width: 60%" prop="unitName">
+          <el-input v-model="postForm.unitName" placeholder="请输入单位名称" />
+        </el-form-item>
+        <el-form-item label="推荐摄入量：" style="margin-bottom: 40px;width: 60%" prop="inInit">
+          <el-input v-model="postForm.inInit" placeholder="请输入单位名称" />
+        </el-form-item>
+        <el-form-item label="最小刻度：" prop="minScale" style="margin-bottom: 40px;width: 60%">
+          <el-input v-model="postForm.minScale" placeholder="请输入最小刻度" />
+        </el-form-item>
+        <el-form-item label="最大刻度：" prop="maxScale" style="margin-bottom: 40px;width: 60%">
+          <el-input v-model="postForm.maxScale" placeholder="请输入最大刻度" />
+        </el-form-item>
+        <el-form-item label="卡尺每格刻度：" prop="stepScale" style="margin-bottom: 40px;width: 60%">
+          <el-input v-model="postForm.stepScale" placeholder="请输入卡尺每格刻度" />
+        </el-form-item>
+        <el-form-item label="图片列表：" prop="images" style="margin-bottom: 30px;width: 60%">
+          <dropzone
+            id="modifierImages"
+            :default-img="postForm.images"
+            @dropzone-removedFile="removeFile"
+            @dropzone-success="addFile"
+          />
+        </el-form-item>
+        <el-button v-loading="loading" style="margin-left: 10px;" type="success" @click="submitForm">
+          保存
+        </el-button>
+      </div>
+    </el-form>
+  </div>
+</template>
+
+<script>
+  import Dropzone from '@/components/Dropzone'
+  import { addFoodModifier, updateFoodModifier, getFoodModifier } from '@/api/food'
+
+  export default {
+    name: "ModifierDetail",
+    props: {
+      isEdit: {
+        type: Boolean,
+        default: false
+      }
+    },
+    components: { Dropzone },
+    created() {
+      this.foodId = this.$route.params && this.$route.params.id
+      if (this.isEdit) {
+        this.modifierId = this.$route.params && this.$route.params.modifierId
+        this.fetchData()
+      }
+    },
+    data() {
+      return {
+        postForm: {},
+        rules: {},
+        loading: false,
+        foodId: '',
+        modifierId: ''
+      }
+    },
+    methods: {
+      fetchData() {
+        getFoodModifier(this.foodId, this.modifierId).then(res => {
+          this.postForm = res.data
+        })
+      },
+      removeFile(file) {
+        let imgs = this.postForm.images
+        let imgIndex = -1
+        for (let i = 0; i < imgs.length; i++) {
+          if (imgs[i] === file.fileUrl) {
+            imgIndex = i
+            break
+          }
+        }
+        imgs.splice(imgIndex, 1)
+      },
+      addFile(file) {
+        if (this.postForm.images) {
+          this.postForm.images.push(file.fileUrl)
+        } else {
+          this.postForm.images = [file.fileUrl]
+        }
+      },
+      submitForm() {
+        this.loading = true
+        this.postForm.foodId = this.foodId
+        this.$refs['postForm'].validate((valid) => {
+          if (valid) {
+            if (this.isEdit) {
+              this.updateData()
+            } else {
+              this.createData()
+            }
+          } else {
+            this.$notify({ title: '失败', message: '必填字段为空', type: 'error', duration: 2000 })
+            this.loading = false
+          }
+        })
+      },
+      createData() {
+        addFoodModifier(this.foodId, this.postForm).then(res => {
+          this.$message.success('创建成功')
+          this.loading = false
+          this.$router.push({ path: `/food/${this.foodId}/modifier` })
+        }).catch(res => {
+          this.$message.error(res.data.message)
+          this.loading = false
+        })
+      },
+      updateData() {
+        updateFoodModifier(this.foodId, this.postForm.id, this.postForm).then(res => {
+          this.$message.success('更新成功')
+          this.loading = false
+          this.$router.push({ path: `/food/${this.foodId}/modifier` })
+        }).catch(res => {
+          this.$message.error(res.data.message)
+          this.loading = false
+        })
+      },
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .createPost-container {
+    position: relative;
+
+    .createPost-main-container {
+
+      padding: 40px 45px 20px 50px;
+
+      .postInfo-container {
+        position: relative;
+        margin-bottom: 10px;
+
+        .postInfo-container-item {
+          float: left;
+        }
+      }
+    }
+
+    .word-counter {
+      width: 40px;
+      position: absolute;
+      right: 10px;
+      top: 0px;
+    }
+  }
+</style>

src/views/foodModifier/create.vue

@@ -0,0 +1,15 @@
+<template>
+  <modifier-detail :is-edit="false" />
+</template>
+
+<script>
+  import ModifierDetail from '@/views/foodModifier/components/ModifierDetail'
+  export default {
+    name: 'CreateModifier',
+    components: { ModifierDetail }
+  }
+</script>
+
+<style scoped>
+
+</style>

src/views/foodModifier/edit.vue

@@ -0,0 +1,15 @@
+<template>
+  <modifier-detail :is-edit="true" />
+</template>
+
+<script>
+  import ModifierDetail from '@/views/foodModifier/components/ModifierDetail'
+  export default {
+    name: 'EditModifier',
+    components: { ModifierDetail }
+  }
+</script>
+
+<style scoped>
+
+</style>

src/views/foodModifier/index.vue

@@ -0,0 +1,126 @@
+<template>
+  <div class="app-container">
+    <div class="filter-container">
+      <el-button
+        class="filter-item"
+        style="margin: 0 10px 20px 0; float: right;"
+        type="success"
+        icon="el-icon-circle-plus-outline"
+        @click="handleCreate">
+        新建
+      </el-button>
+    </div>
+
+    <el-table
+      :key="0"
+      v-loading="listLoading"
+      :data="list"
+      border
+      fit
+      highlight-current-row
+      style="width: 100%;"
+    >
+      <el-table-column type="index" label="序号" align="center" width="60px" />
+      <el-table-column label="规格名称" align="center">
+        <template slot-scope="{row}">
+          <span>{{ row.name }}</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.inInit }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="最小刻度" align="center" width="80px">
+        <template slot-scope="{row}">
+          <span>{{ row.minScale }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="最大刻度" align="center" width="80px">
+        <template slot-scope="{row}">
+          <span>{{ row.maxScale }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="卡尺每格刻度" align="center" width="120px">
+        <template slot-scope="{row}">
+          <span>{{ row.stepScale }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="创建时间" width="180px" align="center">
+        <template slot-scope="{row}">
+          <span>{{ row.createTime }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="更新时间" width="180px" align="center">
+        <template slot-scope="{row}">
+          <span>{{ row.updateTime }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding">
+        <template slot-scope="{row,$index}">
+          <el-button type="primary" size="mini" @click="handleUpdate(row)">
+            更新
+          </el-button>
+          <el-button size="mini" type="danger" @click="handleDelete(row, $index)">
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+  import { getFoodModifiers, removeFoodModifier } from '@/api/food'
+
+  export default {
+    name: 'index',
+    created() {
+      this.foodId = this.$route.params && this.$route.params.id
+      this.fetchData()
+    },
+    data() {
+      return {
+        listLoading: false,
+        list: [],
+        foodId: ''
+      }
+    },
+    methods: {
+      handleCreate() {
+        this.$router.push({ path: `/food/${this.foodId}/modifier/create`})
+      },
+      handleUpdate(row) {
+        this.$router.push({ path: `/food/${this.foodId}/modifier/${row.id}/edit`})
+      },
+      handleDelete(row) {
+        removeFoodModifier(this.foodId, row.id).then(res => {
+          this.$message.success('提交成功')
+          this.fetchData()
+        }).catch(res => {
+          this.$message.error(res.data.message)
+          this.fetchData()
+        })
+      },
+      fetchData() {
+        this.listLoading = true
+        getFoodModifiers(this.foodId).then(res => {
+          this.list = res.data.list
+          this.listLoading = false
+        }).catch(res => {
+          this.$message.error('获取数据失败')
+          this.listLoading = false
+        })
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>