feat(recipe edit page): 编辑菜谱页面增加创建食材功能

编辑菜谱页面增加创建食材功能

Signed-off-by: Ching <loooching@gmail.com>

frontend/src/components/recipe-mobile/recipe-edit.vue

@@ -70,7 +70,19 @@
 
     <div class="recipe-create">
       <van-row gutter="20">
-        <van-col span="24">
+        <van-col span="8">
+          <van-button
+            icon="plus"
+            type="warning"
+            plain
+            round
+            hairline
+            class="submit-button"
+            @click="showIngredientDialog = true"
+            >创建食材</van-button
+          >
+        </van-col>
+        <van-col span="16">
           <van-button
             icon="plus"
             type="primary"
@@ -84,6 +96,7 @@
         </van-col>
       </van-row>
     </div>
+
     <van-popup v-model:show="showIngredientPicker" round position="bottom">
       <van-picker
         :columns="ingredient_columns"
@@ -93,6 +106,30 @@
       />
     </van-popup>
 
+    <van-dialog
+      v-model:show="showIngredientDialog"
+      title="创建食材"
+      show-cancel-button
+      confirm-button-text="创建"
+      @confirm="onCreateIngredient"
+    >
+      <van-cell-group inset border>
+        <van-field
+          v-model="ingredient_name"
+          label="名称"
+          name="ingredient_name"
+          placeholder="葱、蒜、姜..."
+          :rules="[{ required: true, message: '请填写食材名称' }]"
+        />
+        <van-field
+          v-model="ingredient_unit"
+          label="单位"
+          name="ingredient_unit"
+          placeholder="个、斤、千克..."
+          :rules="[{ required: true, message: '请填写单位' }]"
+        />
+      </van-cell-group>
+    </van-dialog>
     <div class="recipe-create">
       <van-row gutter="20">
         <van-col span="8" v-if="recipe_id">
@@ -100,7 +137,6 @@
             class="submit-button"
             round
             type="danger"
-            plain
             hairline
             :disabled="disable_submit"
             @click="onSubmitDelete(recipe_id)"
@@ -113,7 +149,6 @@
             class="submit-button"
             round
             type="primary"
-            plain
             hairline
             :disabled="disable_submit"
             @click="onSubmit(recipe_id)"
@@ -126,7 +161,6 @@
             class="submit-button"
             round
             type="primary"
-            plain
             hairline
             :disabled="disable_submit"
             @click="onSubmit(recipe_id)"
@@ -141,25 +175,26 @@
 
 <script>
 import {
-  Form,
-  Field,
-  CellGroup,
+  Button,
   Cell,
+  CellGroup,
+  Col,
+  Dialog,
+  Field,
+  Form,
+  Picker,
+  Popup,
   Radio,
   RadioGroup,
   Rate,
-  Button,
-  Toast,
-  Col,
   Row,
   Stepper,
-  Popup,
-  Picker,
+  Toast,
 } from 'vant';
 import axios from 'axios';
 import config from '@/config/index';
-import router from '@/router/index';
 import constants from '@/utils/constants.js';
+import router from '@/router/index';
 import { ref } from 'vue';
 
 export default {
@@ -171,25 +206,28 @@ export default {
     },
   },
   components: {
-    [Form.name]: Form,
-    [Field.name]: Field,
-    [CellGroup.name]: CellGroup,
+    [Button.name]: Button,
     [Cell.name]: Cell,
+    [CellGroup.name]: CellGroup,
+    [Col.name]: Col,
+    [Dialog.Component.name]: Dialog.Component,
+    [Field.name]: Field,
+    [Form.name]: Form,
+    [Picker.name]: Picker,
+    [Popup.name]: Popup,
     [Radio.name]: Radio,
     [RadioGroup.name]: RadioGroup,
     [Rate.name]: Rate,
-    [Button.name]: Button,
-    [Col.name]: Col,
     [Row.name]: Row,
     [Stepper.name]: Stepper,
-    [Popup.name]: Popup,
-    [Picker.name]: Picker,
   },
   data() {
     const customFieldName = {
       text: 'name',
     };
     const showIngredientPicker = ref(false);
+    const showIngredientDialog = ref(false);
+    const disable_submit = ref(false);
 
     return {
       form: {
@@ -201,10 +239,14 @@ export default {
         recipe_ingredients: null,
       },
       loading: false,
+      disable_submit,
       recipe_id: null,
       ingredient_columns: null,
       customFieldName,
       showIngredientPicker,
+      showIngredientDialog,
+      ingredient_name: null,
+      ingredient_unit: null,
     };
   },
   mounted() {
@@ -268,8 +310,7 @@ export default {
     },
     getIngredients() {
       axios.get(config.publicPath + '/recipe/ingredient/').then((response) => {
-        (this.ingredient_columns = response.data['results']),
-          console.log('ingredient_columns', this.ingredient_columns);
+        this.ingredient_columns = response.data['results'];
       });
     },
     onConfirmIngredient(value) {
@@ -301,10 +342,54 @@ export default {
         });
       }
     },
-    onChangeIngredientQuantity(value) {
-      console.log('onChangeIngredientQuantity', value);
-      console.log('recipe ingerdients ', this.form.recipe_ingredients);
-      // this.form.recipe_ingredients[value.index].quantity = value.quantity;
+    onCreateIngredient() {
+      console.log(
+        'onCreateIngredient',
+        this.ingredient_name,
+        this.ingredient_unit
+      );
+      if (!this.ingredient_name || !this.ingredient_unit) {
+        Toast.fail({
+          message: '请输入食材名称和单位',
+          forbidClick: true,
+          duration: 800,
+        });
+        return;
+      }
+      this.showIngredientDialog = false;
+      for (let i = 0; i < this.ingredient_columns.length; i++) {
+        if (this.ingredient_columns[i].name == this.ingredient_name) {
+          Toast.fail({
+            message: '该食材已存在',
+            forbidClick: true,
+            duration: 800,
+          });
+          break;
+        }
+      }
+      axios
+        .post(config.publicPath + '/recipe/ingredient/', {
+          name: this.ingredient_name,
+          unit: this.ingredient_unit,
+        })
+        .then(
+          (response) => (
+            response,
+            this.ingredient_columns.unshift({
+              id: response.data.id,
+              name: this.ingredient_name,
+              unit: this.ingredient_unit,
+            }),
+            Toast.success({
+              message: '创建成功',
+              forbidClick: true,
+              duration: 800,
+            })
+          )
+        );
+
+      // this.ingredient_name = value.name;
+      // this.ingredient_unit = value.unit;
     },
   },
 };

recipe/views.py

@@ -113,7 +113,7 @@ class IngredientAPI(viewsets.ModelViewSet):
     serializer_class = recipe.serializers.IngredientSerializer
 
     def list(self, request, *args, **kwargs):
-        self.queryset = recipe.models.Ingredient.objects.exclude(status=const.INGREDIENT_STATUS_DELETED)
+        self.queryset = recipe.models.Ingredient.objects.exclude(status=const.INGREDIENT_STATUS_DELETED).order_by('-id')
         return super().list(request, *args, **kwargs)
 
     def perform_destroy(self, instance):