更换名称、图标。完成行内编辑功能

src/api/food.js

@@ -52,6 +52,15 @@ export function addFoodNutrient(id, data) {
   })
 }
 
+// 更新食物关联的营养素
+export function updateFoodNutrient(id, nutrientId, data) {
+  return request({
+    url: `/api/foods/${id}/nutrients/${nutrientId}`,
+    method: 'post',
+    data
+  })
+}
+
 // 删除食物关联的营养素
 export function removeFoodNutrient(foodId, nutrientId) {
   return request({

src/api/nutrientTemplate.js

@@ -52,6 +52,15 @@ export function addTemplateNutrient(id, data) {
   })
 }
 
+// 更新模板关联的营养素
+export function updateTemplateNutrient(id, nutrientId, data) {
+  return request({
+    url: `/api/nutrient-templates/${id}/nutrients/${nutrientId}`,
+    method: 'post',
+    data
+  })
+}
+
 // 上移下移
 export function updateSort(id, data) {
   return request({

src/icons/svg/recipe.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1027 1024" version="1.1"><path d="M989.781546 1024H41.368579c-15.321696 0-28.089776-12.76808-28.089776-28.089776V40.857855c0-15.321696 12.76808-28.089776 28.089776-28.089775h948.412967c15.321696 0 28.089776 12.76808 28.089776 28.089775v955.052369c0 15.321696-12.76808 28.089776-28.089776 28.089776z m-920.323192-56.179551h892.233417v-898.872818H69.458354v898.872818z" p-id="2503"></path><path d="M803.878304 260.979551h-474.972568c-15.321696 0-28.089776-12.76808-28.089776-28.089775s12.76808-28.089776 28.089776-28.089776h474.972568c15.321696 0 28.089776 12.76808 28.089776 28.089776s-12.76808 28.089776-28.089776 28.089775zM803.878304 433.60399h-474.972568c-15.321696 0-28.089776-12.76808-28.089776-28.089776s12.76808-28.089776 28.089776-28.089775h474.972568c15.321696 0 28.089776 12.76808 28.089776 28.089775s-12.76808 28.089776-28.089776 28.089776zM803.878304 899.383541h-474.972568c-15.321696 0-28.089776-12.76808-28.089776-28.089775s12.76808-28.089776 28.089776-28.089776h474.972568c15.321696 0 28.089776 12.76808 28.089776 28.089776s-12.76808 28.089776-28.089776 28.089775zM981.099252 772.72419H49.54015c-15.321696 0-28.089776-12.76808-28.089776-28.089776s12.76808-28.089776 28.089776-28.089776h931.559102c15.321696 0 28.089776 12.76808 28.089775 28.089776s-12.76808 28.089776-28.089775 28.089776z" p-id="2504"></path><path d="M219.610973 229.825436m-30.643392 0a30.643392 30.643392 0 1 0 61.286783 0 30.643392 30.643392 0 1 0-61.286783 0Z" p-id="2505"></path><path d="M219.610973 405.514214m-30.643392 0a30.643392 30.643392 0 1 0 61.286783 0 30.643392 30.643392 0 1 0-61.286783 0Z" p-id="2506"></path><path d="M219.610973 871.293766m-30.643392 0a30.643392 30.643392 0 1 0 61.286783 0 30.643392 30.643392 0 1 0-61.286783 0Z" p-id="2507"></path></svg>

src/views/food/nutrient.vue

@@ -64,19 +64,58 @@
           <span>{{ row.nutrientName }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="营养素计量" align="center" width="200">
+      <el-table-column label="营养素计量" align="center" width="80">
         <template slot-scope="{row}">
-          <span>{{ row.quantity + row.unit }}</span>
+          <template v-if="row.edit">
+            <el-input v-model="row.quantity" class="filter-item" />
+          </template>
+          <span v-else>{{ row.quantity }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="Nv_Spec" align="center" width="200">
+      <el-table-column label="计量单位" align="center" width="150">
         <template slot-scope="{row}">
-          <span>{{ row.nvSpec + row.nvSpecUnit }}</span>
+          <template v-if="row.edit">
+            <el-autocomplete v-model="row.unit" :fetch-suggestions="queryUnits" placeholder="单位关键词" />
+          </template>
+          <span v-else>{{ row.unit }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="100">
+      <el-table-column label="Nv_Spec" align="center" width="80">
         <template slot-scope="{row}">
-          <el-button size="mini" type="danger" @click="removeNutrient(row)">
+          <template v-if="row.edit">
+            <el-input v-model="row.nvSpec" class="filter-item" />
+          </template>
+          <span v-else>{{ row.nvSpec }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="计量单位" align="center" width="150">
+        <template slot-scope="{row}">
+          <template v-if="row.edit">
+            <el-autocomplete v-model="row.nvSpecUnit" :fetch-suggestions="queryUnits" placeholder="单位关键词" />
+          </template>
+          <span v-else>{{ row.nvSpecUnit }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="160">
+        <template slot-scope="{row}">
+          <el-button
+            v-if="row.edit"
+            type="success"
+            size="mini"
+            @click="confirmEdit(row)"
+          >
+            提交
+          </el-button>
+          <el-button v-else size="mini" type="primary" @click="row.edit=true">编辑</el-button>
+          <el-button
+            v-if="row.edit"
+            type="danger"
+            size="mini"
+            @click="fetchData"
+          >
+            取消
+          </el-button>
+          <el-button v-else size="mini" type="danger" @click="removeNutrient(row)">
             删除
           </el-button>
         </template>
@@ -86,7 +125,7 @@
 </template>
 
 <script>
-import { getNutrientList, addFoodNutrient, removeFoodNutrient } from '@/api/food'
+import { getNutrientList, addFoodNutrient, updateFoodNutrient, removeFoodNutrient } from '@/api/food'
 import { getList } from '@/api/nutrient'
 import { getList as getUnits } from '@/api/unit'
 
@@ -141,6 +180,14 @@ export default {
         this.$message.error(res.data.message)
       })
     },
+    confirmEdit(row) {
+      updateFoodNutrient(this.foodId, row.nutrientId, row).then(res => {
+        this.fetchData()
+        this.$notify.success('提交成功')
+      }).catch(res => {
+        this.$message.error(res.data.message)
+      })
+    },
     removeNutrient(row) {
       removeFoodNutrient(row.foodId, row.nutrientId).then(res => {
         this.fetchData()

src/views/food/unit.vue

@@ -49,17 +49,32 @@
       </el-table-column>
       <el-table-column label="转换率" align="center">
         <template slot-scope="{row}">
-          <span>{{ row.ratio }}</span>
+          <template v-if="row.edit">
+            <el-input v-model="row.ratio" placeholder="1 FromUnit = * ToUnit" />
+          </template>
+          <span v-else>{{ row.ratio }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="备注" align="center">
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="160">
         <template slot-scope="{row}">
-          <span>{{ row.note }}</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="removeFoodUnit(row)">
+          <el-button
+            v-if="row.edit"
+            type="success"
+            size="mini"
+            @click="confirmEdit(row)"
+          >
+            提交
+          </el-button>
+          <el-button v-else size="mini" type="primary" @click="row.edit=true">编辑</el-button>
+          <el-button
+            v-if="row.edit"
+            type="danger"
+            size="mini"
+            @click="fetchData"
+          >
+            取消
+          </el-button>
+          <el-button v-else size="mini" type="danger" @click="removeFoodUnit(row)">
             删除
           </el-button>
         </template>
@@ -69,7 +84,7 @@
 </template>
 
 <script>
-  import {getBaseUnits, getList as getUnits, getList} from '@/api/unit'
+import { getBaseUnits, getList } from '@/api/unit'
 import { getFoodUnits, createOrUpdateFoodUnit, removeFoodUnit } from '@/api/food'
 
 export default {
@@ -110,6 +125,14 @@ export default {
         this.fetchData()
       })
     },
+    confirmEdit(row) {
+      createOrUpdateFoodUnit(row.foodId, row).then(res => {
+        this.fetchData()
+        this.$notify.success('提交成功')
+      }).catch(res => {
+        this.$message.error(res.data.message)
+      })
+    },
     removeFoodUnit(row) {
       removeFoodUnit(this.foodId, row).then(res => {
         this.$notify.success('提交成功')

src/views/nutrientTemplate/detail.vue

@@ -59,19 +59,63 @@
             <span>{{ row.nutrientName }}</span>
           </template>
         </el-table-column>
-        <el-table-column label="营养素计量单位" align="center" width="80px">
+        <el-table-column label="营养素计量单位" align="center" width="150px">
           <template slot-scope="{row}">
-            <span>{{ row.unit }}</span>
+            <template v-if="row.edit">
+              <el-autocomplete
+                class="inline-input"
+                v-model="row.unit"
+                :fetch-suggestions="queryUnits"
+                placeholder="单位关键词"
+              />
+            </template>
+            <span v-else>{{ row.unit }}</span>
           </template>
         </el-table-column>
-        <el-table-column label="Nv_Spec" align="center" width="300px">
+        <el-table-column label="Nv_Spec" align="center" width="100px">
           <template slot-scope="{row}">
-            <span>{{ row.nvSpec + row.nvSpecUnit }}</span>
+            <template v-if="row.edit">
+              <el-input
+                v-model="row.nvSpec"
+                class="filter-item"
+              />
+            </template>
+            <span v-else>{{ row.nvSpec }}</span>
           </template>
         </el-table-column>
-        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="100px">
+        <el-table-column label="Nv_Spec单位" align="center" width="150px">
           <template slot-scope="{row}">
-            <el-button size="mini" type="danger" @click="removeNutrient(row)">
+            <template v-if="row.edit">
+              <el-autocomplete
+                class="inline-input"
+                v-model="row.nvSpecUnit"
+                :fetch-suggestions="queryUnits"
+                placeholder="单位关键词"
+              />
+            </template>
+            <span v-else>{{ row.nvSpecUnit }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="160px">
+          <template slot-scope="{row}">
+            <el-button
+              v-if="row.edit"
+              type="success"
+              size="mini"
+              @click="confirmEdit(row)"
+            >
+              提交
+            </el-button>
+            <el-button v-else size="mini" type="primary" @click="row.edit=true">编辑</el-button>
+            <el-button
+              v-if="row.edit"
+              type="danger"
+              size="mini"
+              @click="fetchNutrients"
+            >
+              取消
+            </el-button>
+            <el-button v-else size="mini" type="danger" @click="removeNutrient(row)">
               删除
             </el-button>
           </template>
@@ -83,8 +127,8 @@
 
 <script>
 import { getList } from '@/api/nutrient'
-import { getList as getUnits, getBaseUnits } from '@/api/unit'
-import { getNutrients, addTemplateNutrient, removeNutrient } from '@/api/nutrientTemplate'
+import { getList as getUnits } from '@/api/unit'
+import { getNutrients, addTemplateNutrient, updateTemplateNutrient, removeNutrient } from '@/api/nutrientTemplate'
 
 export default {
   name: 'Detail',
@@ -131,6 +175,23 @@ export default {
         this.$message.error('未选择营养素')
       }
     },
+    confirmEdit(row) {
+      updateTemplateNutrient(this.templateId, row.nutrientId, row).then(res => {
+        this.fetchNutrients()
+        this.$notify.success('提交成功')
+      }).catch(res => {
+        this.$message.error(res.data.message)
+      })
+    },
+    cancelEdit(row) {
+      this.$set(row, 'edit', null)
+      console.log(row)
+      if (row.edit){
+        console.log('1111111')
+      } else {
+        console.log('2222222222')
+      }
+    },
     queryNutrients(query) {
       getList({ query }).then(res => {
         this.nutrients = res.data.list