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,6 +54,7 @@
           <el-input type="textarea" v-model="form.note"></el-input>
         </el-form-item>
         <el-form-item>
+          <el-col :span="12" v-if="recipe_id">
             <el-button
               type="primary"
               plain
@@ -61,6 +62,25 @@
               @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: {
@@ -105,6 +127,10 @@ export default {
         axios
           .post(config.publicPath + '/recipe/recipe/', data)
           .then(function () {
+            ElMessage({
+              message: '创建成功.',
+              type: 'success',
+            });
             location.reload();
           })
           .catch(function (error) {
@@ -114,13 +140,27 @@ export default {
         axios
           .put(config.publicPath + '/recipe/recipe/' + recipe_id, data)
           .then(function () {
-            location.reload();
+            ElMessage({
+              message: '修改成功.',
+              type: 'success',
+            });
           })
           .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,10 +43,12 @@
       />
     </van-cell-group>
     <div class="recipe-create">
+      <van-row gutter="20">
+        <van-col span="12" v-if="recipe_id">
           <van-button
+            class="submit-button"
             round
             type="primary"
-        block
             plain
             hairline
             :disabled="disable_submit"
@@ -54,6 +56,34 @@
             :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):