完成实物相关功能,完成从模板导入营养素到食物

src/components/Dropzone/index.vue

@@ -77,7 +77,7 @@
       return {
         dropzone: '',
         uploadUrl: '',
-        initOnce: true
+        initOnce: true,
       }
     },
     watch: {
@@ -95,6 +95,7 @@
       const element = document.getElementById(this.id)
       const vm = this
       this.dropzone = new Dropzone(element, {
+        headers: { Authorization: this.$store.getters.token },
         clickable: this.clickable,
         thumbnailWidth: this.thumbnailWidth,
         thumbnailHeight: this.thumbnailHeight,

src/router/config.js

@@ -20,27 +20,27 @@ export const asyncRouterMap = [
     component: Layout,
     children: [
       {
-        path: 'food',
+        path: '',
         name: '食物列表',
         component: () => import('@/views/food/index'),
         meta: { title: '食物列表', icon: 'dashboard' }
       },
       {
-        path: 'food/create',
+        path: 'create',
         name: '食物创建',
         component: () => import('@/views/food/create'),
         meta: { title: '食物创建', icon: 'dashboard' },
         hidden: true
       },
       {
-        path: 'food/edit/:id',
+        path: 'edit/:id',
         name: '食物编辑',
         component: () => import('@/views/food/edit'),
         meta: { title: '食物编辑', icon: 'dashboard' },
         hidden: true
       },
       {
-        path: 'food/:id/addNutrient',
+        path: ':id/addNutrient',
         name: '营养素关联',
         component: () => import('@/views/food/addNutrient'),
         meta: { title: '营养素关联', icon: 'dashboard' },

src/views/food/addNutrient.vue

@@ -5,9 +5,13 @@
       <el-select
         v-model="params.nutrientId"
         filterable
+        remote
         reserve-keyword
         style="width: 200px;margin-left: 10px;"
         placeholder="请输入营养素关键词"
+        :remote-method="queryNutrients"
+        :loading="loading"
+        ref="nutrientSelect"
       >
         <el-option
           v-for="item in nutrients"
@@ -18,15 +22,20 @@
       </el-select>
       营养素计量：
       <el-input
-        v-model="params.nutrientValue"
+        v-model="params.quantity"
         style="width: 80px;"
         class="filter-item"
       />
       <el-select
-        v-model="params.nutrientUnitId"
-        style="width: 80px;margin-left: 10px;"
+        v-model="params.unit"
+        style="width: 300px;margin-left: 10px;"
         class="filter-item"
-        @change="changeSelect"
+        filterable
+        remote
+        reserve-keyword
+        placeholder="请输入单位关键词"
+        :loading="unitLoading"
+        :remote-method="queryUnits"
       >
         <el-option v-for="item in units" :key="`nutrient${item.id}`" :label="item.name" :value="item.id" />
       </el-select>
@@ -46,7 +55,7 @@
       border
       fit
       highlight-current-row
-      style="width: 100%;margin-top: 10px"
+      style="width: 60%;margin-top: 10px"
     >
       <el-table-column type="index" label="序号" align="center" width="60px" />
       <el-table-column label="营养素名称" align="center">
@@ -54,17 +63,17 @@
           <span>{{ row.nutrientName }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="营养素计量" align="center">
+      <el-table-column label="营养素计量" align="center" width="100">
         <template slot-scope="{row}">
-          <span>{{ row.nutrientValue }}</span>
+          <span>{{ row.quantity }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="单位" align="center" width="100px">
+      <el-table-column label="单位" align="center" width="100">
         <template slot-scope="{row}">
-          <span>{{ row.nutrientUnitName }}</span>
+          <span>{{ row.unitName }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+      <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="removeNutrient(row)">
             删除
@@ -78,31 +87,17 @@
 <script>
 import { getNutrientList, addFoodNutrient, removeFoodNutrient } from '@/api/food'
 import { getList } from '@/api/nutrient'
-import store from '@/store'
+import { getList as getUnits } from '@/api/unit'
 
 export default {
   name: 'AddNutrient',
   created() {
     this.foodId = this.$route.params && this.$route.params.id
-    this.units = store.getters.units
-    this.params.foodId = this.foodId
-    this.params.foodUnitId = this.units[0].id
-    this.params.nutrientUnitId = this.units[0].id
     this.fetchData()
-    getList({ pageNum: 1, pageSize: 1000 }).then(res => {
-      const list = res.data.list
-      if (!list) {
-        return
-      }
-      for (let i = 0; i < list.length; i++) {
-        const name = `${list[i].id} | ${list[i].name} | ${list[i].enName} | ${list[i].abbreviation}`
-        this.nutrients.push( { id: list[i].id, name: name } )
-      }
-    })
   },
   mounted() {
     this.$nextTick(() => {
-      this.$refs.firstInput.focus()
+      this.$refs.nutrientSelect.focus()
     })
   },
   data() {
@@ -113,7 +108,9 @@ export default {
       foodId: '',
       list: [],
       nutrients: [],
-      params: { foodValue: 100 }
+      params: {},
+      loading: false,
+      unitLoading: false
     }
   },
   methods: {
@@ -125,30 +122,39 @@ export default {
       })
     },
     addNutrient() {
+      this.params.foodId = this.foodId
       addFoodNutrient(this.foodId, this.params).then(res => {
-        this.params = { foodValue: 100 }
-        this.params.foodId = this.foodId
-        this.params.foodUnitId = this.units[0].id
-        this.params.nutrientUnitId = this.units[0].id
         this.fetchData()
-        this.$notify({ title: '成功', message: '添加营养素成功', type: 'success', duration: 2000 })
+        this.params = {}
+        this.$message.success('添加营养素成功')
         this.$refs.firstInput.focus()
-      }).catch(error => {
-        this.$notify({ title: '失败', message: error.response.data.message, type: 'error', duration: 2000 })
+      }).catch(res => {
+        this.$message.error(res.data.message)
       })
     },
     removeNutrient(row) {
       removeFoodNutrient(row.foodId, row.nutrientId).then(res => {
         this.fetchData()
-        this.$notify({ title: '成功', message: '删除营养素成功', type: 'success', duration: 2000 })
-        this.$refs.firstInput.focus()
-      }).catch(error => {
-        this.$notify({ title: '失败', message: error.response.data.message, type: 'error', duration: 2000 })
+        this.$message.success('删除营养素成功')
+        this.$refs.nutrientSelect.focus()
+      }).catch(res => {
+        this.$message.error(res.data.message)
+      })
+    },
+    queryNutrients(query) {
+      getList({ query }).then(res => {
+        this.nutrients = res.data.list
+      }).catch(() => {
+        this.nutrients = []
+      })
+    },
+    queryUnits(query) {
+      getUnits({ query }).then(res => {
+        this.units = res.data.list
+      }).catch(() => {
+        this.units = []
       })
     },
-    changeSelect() {
-      this.params = { ...this.params }
-    }
   }
 }
 </script>

src/views/food/components/FoodDetail.vue

@@ -2,8 +2,8 @@
   <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：" required style="margin-bottom: 40px;width: 60%" prop="id">
-          <el-input v-model="postForm.id" placeholder="请输入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>
           <el-input v-model="postForm.name" placeholder="请输入名称" />
@@ -11,6 +11,10 @@
         <el-form-item label="描述：" prop="description" style="margin-bottom: 30px;width: 40%">
           <el-input v-model="postForm.description" type="textarea" :rows="4" placeholder="请输入描述" />
         </el-form-item>
+        <el-form-item label="食物类型：" prop="foodType" style="margin-bottom: 30px;width: 40%">
+          <el-radio :label="0" v-model="postForm.foodType">主材</el-radio>
+          <el-radio :label="1" v-model="postForm.foodType">辅材</el-radio>
+        </el-form-item>
         <el-form-item label="ep：" prop="ep" style="margin-bottom: 40px;width: 60%">
           <el-input v-model="postForm.ep" placeholder="请输入ep" style="width: 40%" />
         </el-form-item>
@@ -19,13 +23,19 @@
             <el-col :span="8">
               <el-input v-model="postForm.nvSpec" placeholder="请输入nvSpec" />
             </el-col>
-            <el-col :span="4">
-              <el-autocomplete
-                class="inline-input"
+            <el-col :span="6">
+              <el-select
                 v-model="postForm.nvSpecUnit"
-                :fetch-suggestions="querySearch"
-                placeholder="克"
-              ></el-autocomplete>
+                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>
@@ -34,24 +44,33 @@
             <el-col :span="8">
               <el-input v-model="postForm.inInit" placeholder="请输入inInit" />
             </el-col>
-            <el-col :span="4">
-              <el-autocomplete
-                class="inline-input"
+            <el-col :span="6">
+              <el-select
                 v-model="postForm.inInitUnit"
-                :fetch-suggestions="querySearch"
-                placeholder="克"
-              ></el-autocomplete>
+                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-col>
           </el-row>
         </el-form-item>
-        <el-form-item label="CF：" prop="cf" style="margin-bottom: 40px;width: 60%">
-          <el-input v-model="postForm.cf" placeholder="请输入cf" />
+        <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="CNVF：" prop="cnvf" style="margin-bottom: 40px;width: 60%">
-          <el-input v-model="postForm.cnvf" placeholder="请输入cnvf" />
+        <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="qlf：" prop="qlf" style="margin-bottom: 40px;width: 60%">
-          <el-input v-model="postForm.qlf" placeholder="请输入qlf" />
+        <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%">
           <dropzone
@@ -72,15 +91,46 @@
         <el-button v-loading="loading" style="margin-left: 10px;" type="success" @click="submitForm">
           保存
         </el-button>
+        <el-button v-loading="loading" style="margin-left: 10px;" type="success" v-if="!isEdit" @click="handleDialog">
+          保存并从模板导入营养素
+        </el-button>
       </div>
     </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-select
+            v-model="templateId"
+            class="filter-item"
+            filterable
+            remote
+            reserve-keyword
+            placeholder="请输入模板关键词"
+            :loading="templateLoading"
+            :remote-method="queryTemplates"
+          >
+            <el-option v-for="item in templates" :key="`template${item.id}`" :label="item.name" :value="item.id" />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogFormVisible = false">
+          取消
+        </el-button>
+        <el-button type="primary" @click="submitFromTemplate">
+          提交
+        </el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import { create, getDetail, update } from '@/api/food'
 import Dropzone from '@/components/Dropzone'
-import store from '@/store'
+import { getList as getUnits } from '@/api/unit'
+import { getNutrientTemplates } from '@/api/nutrientTemplate'
 
 export default {
   name: "FoodDetail",
@@ -95,15 +145,18 @@ export default {
     return {
       mainImgDropzone: 'mainImgDropzone',
       nutrientImgDropzone: 'nutrientImgDropzone',
-      postForm: { id: '', name: '', img: '', description: '', nvSpec: 100, nvSpecUnit: '克',
-        inInit: 100, inInitUnit: '克', cf: 1 },
+      postForm: { id2: '', name: '', img: '', description: ''},
       loading: false,
       rules: {
-        id: [{ required: true, message: 'ID不能为空', trigger: 'blur' }],
         name: [{ required: true, message: '名称不能为空', trigger: 'blur' }]
       },
       foodId: '',
-      unitNames: []
+      units: [],
+      unitLoading: false,
+      dialogFormVisible: false,
+      templateLoading:false,
+      templates: [],
+      templateId: ''
     }
   },
   created() {
@@ -111,14 +164,11 @@ export default {
       this.foodId = this.$route.params && this.$route.params.id
       this.fetchData(this.foodId)
     }
-    this.unitNames = store.getters.units.map(item => {
-      return {value: item.name, label: `${item.name} | ${item.enName} | ${item.abbreviation}` } })
   },
   methods: {
     fetchData(id) {
       getDetail(id).then(res => {
         this.postForm = res.data
-        console.log(res.data)
       })
     },
     submitForm() {
@@ -156,17 +206,6 @@ export default {
         this.loading = false
       })
     },
-    querySearch(queryString, cb) {
-      let restaurants = this.unitNames;
-      let results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
-      // 调用 callback 返回建议列表的数据
-      cb(results);
-    },
-    createFilter(queryString) {
-      return (restaurant) => {
-        return (restaurant.label.toLowerCase().match(queryString.toLowerCase()) !== null);
-      };
-    },
     removeFile(file) {
       let imgs = []
       if (file.dropzoneId === this.mainImgDropzone) {
@@ -197,6 +236,28 @@ export default {
           this.postForm.nutrientImgs = [file.fileUrl]
         }
       }
+    },
+    queryUnits(query) {
+      getUnits({ query }).then(res => {
+        this.units = res.data.list
+      }).catch(() => {
+        this.units = []
+      })
+    },
+    queryTemplates(query) {
+      getNutrientTemplates({ query }).then(res => {
+        this.templates = res.data.list
+      }).catch(() => {
+        this.templates = []
+      })
+    },
+    handleDialog() {
+      this.templateId = ''
+      this.dialogFormVisible = true
+    },
+    submitFromTemplate() {
+      this.postForm.templateId = this.templateId
+      this.submitForm()
     }
   }
 }

src/views/food/index.vue

@@ -34,9 +34,9 @@
       style="width: 100%;"
     >
       <el-table-column type="index" label="序号" align="center" width="60px" />
-      <el-table-column label="ID" align="center" width="90px">
+      <el-table-column label="ID" align="center" width="70px">
         <template slot-scope="{row}">
-          <span>{{ row.id }}</span>
+          <span>{{ row.id2 }}</span>
         </template>
       </el-table-column>
       <el-table-column label="名称" align="center" width="100px">
@@ -49,6 +49,11 @@
           <span>{{ row.description }}</span>
         </template>
       </el-table-column>
+      <el-table-column label="食物类型" align="center" width="80">
+        <template slot-scope="{row}">
+          <span>{{ row.foodType | foodTypeFilter }}</span>
+        </template>
+      </el-table-column>
       <el-table-column label="ep(%)" align="center" width="70px">
         <template slot-scope="{row}">
           <span>{{ row.ep }}</span>
@@ -56,27 +61,27 @@
       </el-table-column>
       <el-table-column label="NV_spec" align="center" width="70px">
         <template slot-scope="{row}">
-          <span>{{ `${row.nvSpec ? row.nvSpec : ''}` + `${row.nvSpecUnit ? row.nvSpecUnit : ''}` }}</span>
+          <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.inInitUnit ? row.inInitUnit : ''}` }}</span>
+          <span>{{ row.inInit ? row.inInit + row.inInitUnitName : '' }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="CF" align="center" width="70px">
+      <el-table-column label="最小刻度" align="center" width="70px">
         <template slot-scope="{row}">
-          <span>{{ row.cf }}</span>
+          <span>{{ row.minScale }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="CNVF" align="center" width="70px">
+      <el-table-column label="最大刻度" align="center" width="70px">
         <template slot-scope="{row}">
-          <span>{{ row.cnvf }}</span>
+          <span>{{ row.maxScale }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="qlf" align="center" width="70px">
+      <el-table-column label="卡尺每格刻度" align="center" width="70px">
         <template slot-scope="{row}">
-          <span>{{ row.qlf }}</span>
+          <span>{{ row.stepScale }}</span>
         </template>
       </el-table-column>
       <el-table-column label="创建时间" width="180px" align="center">
@@ -112,9 +117,16 @@
 import Pagination from '@/components/Pagination'
 import { getList, remove } from '@/api/food'
 
+const foodTypes = { 0: '主材', 1: '辅材' }
+
 export default {
   name: 'FoodList',
   components: { Pagination },
+  filters: {
+    foodTypeFilter(value) {
+      return foodTypes[value]
+    }
+  },
   data() {
     return {
       tableKey: 0,