feat(recipe detail page): 菜谱编辑页增加删除按钮

菜谱编辑页增加删除按钮

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

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
+          <el-col :span="12" v-if="recipe_id">
-            type="primary"
+            <el-button
-            plain
+              type="primary"
-            class="summit-recipe"
+              plain
-            @click="onSubmit(recipe_id)"
+              class="summit-recipe"
-            >提交</el-button
+              @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() {
+          .then(function () {
-            location.reload();
+            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>

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

@@ -43,17 +43,47 @@
       />
     </van-cell-group>
     <div class="recipe-create">
-      <van-button
+      <van-row gutter="20">
-        round
+        <van-col span="12" v-if="recipe_id">
-        type="primary"
+          <van-button
-        block
+            class="submit-button"
-        plain
+            round
-        hairline
+            type="primary"
-        :disabled="disable_submit"
+            plain
-        @click="onSubmit(recipe_id)"
+            hairline
-        :loading="loading"
+            :disabled="disable_submit"
-        >提交</van-button
+            @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>

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):