From 83a3bd193bc71efba4beaebf55015eed917ceaaa Mon Sep 17 00:00:00 2001
From: Ching <loooching@gmail.com>
Date: Sat, 5 Feb 2022 01:41:03 +0800
Subject: [PATCH] =?UTF-8?q?feat(recipe=20detail=20page):=20=E8=8F=9C?=
 =?UTF-8?q?=E8=B0=B1=E7=BC=96=E8=BE=91=E9=A1=B5=E5=A2=9E=E5=8A=A0=E5=88=A0?=
 =?UTF-8?q?=E9=99=A4=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

菜谱编辑页增加删除按钮

Signed-off-by: Ching <loooching@gmail.com>
---
 frontend/src/components/input_recipe.vue      | 69 ++++++++++++++----
 .../components/recipe-mobile/recipe-edit.vue  | 73 ++++++++++++++++---
 recipe/views.py                               |  2 +-
 3 files changed, 118 insertions(+), 26 deletions(-)

diff --git a/frontend/src/components/input_recipe.vue b/frontend/src/components/input_recipe.vue
index a8535d4..b052536 100644
--- a/frontend/src/components/input_recipe.vue
+++ b/frontend/src/components/input_recipe.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-row justify="left">
+  <el-row justify="left" gutter="10">
     <el-col>
       <el-form :rules="rules" ref="form" :model="form" label-position="left">
         <el-form-item label="名字" prop="name">
@@ -54,13 +54,33 @@
           <el-input type="textarea" v-model="form.note"></el-input>
         </el-form-item>
         <el-form-item>
-          <el-button
-            type="primary"
-            plain
-            class="summit-recipe"
-            @click="onSubmit(recipe_id)"
-            >提交</el-button
-          >
+          <el-col :span="12" v-if="recipe_id">
+            <el-button
+              type="primary"
+              plain
+              class="summit-recipe"
+              @click="onSubmit(recipe_id)"
+              >提交</el-button
+            >
+          </el-col>
+          <el-col :span="24" v-else>
+            <el-button
+              type="primary"
+              plain
+              class="summit-recipe"
+              @click="onSubmit(recipe_id)"
+              >提交</el-button
+            >
+          </el-col>
+          <el-col :span="12" v-if="recipe_id">
+            <el-button
+              type="danger"
+              plain
+              class="summit-recipe"
+              @click="onSubmitDelete(recipe_id)"
+              >删除</el-button
+            >
+          </el-col>
         </el-form-item>
       </el-form>
     </el-col>
@@ -69,6 +89,8 @@
 <script>
 import axios from 'axios';
 import config from '@/config/index';
+import { ElMessage } from 'element-plus';
+
 export default {
   props: ['recipe_'],
   watch: {
@@ -77,7 +99,7 @@ export default {
       this.recipe_id = val.id;
     },
   },
-  data: function() {
+  data: function () {
     return {
       form: {
         name: null,
@@ -104,23 +126,41 @@ export default {
       if (!recipe_id) {
         axios
           .post(config.publicPath + '/recipe/recipe/', data)
-          .then(function() {
+          .then(function () {
+            ElMessage({
+              message: '创建成功.',
+              type: 'success',
+            });
             location.reload();
           })
-          .catch(function(error) {
+          .catch(function (error) {
             console.log(error);
           });
       } else {
         axios
           .put(config.publicPath + '/recipe/recipe/' + recipe_id, data)
-          .then(function() {
-            location.reload();
+          .then(function () {
+            ElMessage({
+              message: '修改成功.',
+              type: 'success',
+            });
           })
-          .catch(function(error) {
+          .catch(function (error) {
             console.log(error);
           });
       }
     },
+    onSubmitDelete(recipe_id) {
+      axios
+        .delete(config.publicPath + '/recipe/recipe/' + recipe_id)
+        .then(function () {
+          ElMessage.error('删除成功.');
+          location.reload();
+        })
+        .catch(function (error) {
+          console.log(error);
+        });
+    },
   },
 };
 </script>
@@ -128,5 +168,6 @@ export default {
 <style scoped>
 .summit-recipe {
   width: 100%;
+  margin-bottom: 10px;
 }
 </style>
diff --git a/frontend/src/components/recipe-mobile/recipe-edit.vue b/frontend/src/components/recipe-mobile/recipe-edit.vue
index a6d284f..d7a01ee 100644
--- a/frontend/src/components/recipe-mobile/recipe-edit.vue
+++ b/frontend/src/components/recipe-mobile/recipe-edit.vue
@@ -43,17 +43,47 @@
       />
     </van-cell-group>
     <div class="recipe-create">
-      <van-button
-        round
-        type="primary"
-        block
-        plain
-        hairline
-        :disabled="disable_submit"
-        @click="onSubmit(recipe_id)"
-        :loading="loading"
-        >提交</van-button
-      >
+      <van-row gutter="20">
+        <van-col span="12" v-if="recipe_id">
+          <van-button
+            class="submit-button"
+            round
+            type="primary"
+            plain
+            hairline
+            :disabled="disable_submit"
+            @click="onSubmit(recipe_id)"
+            :loading="loading"
+            >提交</van-button
+          >
+        </van-col>
+        <van-col span="24" v-else>
+          <van-button
+            class="submit-button"
+            round
+            type="primary"
+            plain
+            hairline
+            :disabled="disable_submit"
+            @click="onSubmit(recipe_id)"
+            :loading="loading"
+            >提交</van-button
+          >
+        </van-col>
+        <van-col span="12" v-if="recipe_id">
+          <van-button
+            class="submit-button"
+            round
+            type="danger"
+            plain
+            hairline
+            :disabled="disable_submit"
+            @click="onSubmitDelete(recipe_id)"
+            :loading="loading"
+            >删除</van-button
+          >
+        </van-col>
+      </van-row>
     </div>
   </van-form>
 </template>
@@ -68,6 +98,8 @@ import {
   Rate,
   Button,
   Toast,
+  Col,
+  Row,
 } from 'vant';
 import axios from 'axios';
 import config from '@/config/index';
@@ -90,6 +122,8 @@ export default {
     [RadioGroup.name]: RadioGroup,
     [Rate.name]: Rate,
     [Button.name]: Button,
+    [Col.name]: Col,
+    [Row.name]: Row,
   },
   data() {
     return {
@@ -137,6 +171,20 @@ export default {
         );
       }
     },
+    onSubmitDelete(recipe_id) {
+      if (!this.form.name) {
+        return;
+      }
+      this.loading = true;
+      axios.delete(config.publicPath + '/recipe/recipe/' + recipe_id).then(
+        (Toast.success({
+          message: '删除成功',
+          forbidClick: true,
+          duration: 500,
+        }),
+        (this.loading = false))
+      );
+    },
   },
 };
 </script>
@@ -144,4 +192,7 @@ export default {
 .recipe-create {
   margin: 20px 16px;
 }
+.submit-button {
+  width: 100%;
+}
 </style>
diff --git a/recipe/views.py b/recipe/views.py
index e958f5f..436402b 100644
--- a/recipe/views.py
+++ b/recipe/views.py
@@ -18,7 +18,7 @@ class RecipeAPI(rest_framework.generics.RetrieveUpdateDestroyAPIView):
     #                           authentication.SessionAuthentication,
     #                           authentication.BasicAuthentication)
     # permission_classes = (permissions.IsAuthenticated,)
-    queryset = recipe.models.Recipe.objects.exclude(status=const.RECIPE_STATUS_DELETED)
+    queryset = recipe.models.Recipe.objects.all()
     serializer_class = recipe.serializers.RecipeSerializer
 
     def perform_destroy(self, instance):