ching/dsite
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat(daily recipe api; daily recipe page): [A] 每日菜谱接口增加修改功能 [M] 修改每日菜谱页面

Browse Source 
[A] 每日菜谱接口增加修改功能 [M] 修改每日菜谱页面

Signed-off-by: Ching <loooching@gmail.com>
This commit is contained in:
Ching 2021-10-06 15:32:56 +08:00
parent 93bee3544a
commit 982df005a1
7 changed files with 109 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/dist/index.html vendored
View File

@ -1 +1 @@
<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/favicon.ico"><title>frontend</title><link href="/css/app.0786e41a.css" rel="preload" as="style"><link href="/css/chunk-vendors.8823d44d.css" rel="preload" as="style"><link href="/js/app.df0986dc.js" rel="preload" as="script"><link href="/js/chunk-vendors.bb844861.js" rel="preload" as="script"><link href="/css/chunk-vendors.8823d44d.css" rel="stylesheet"><link href="/css/app.0786e41a.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but frontend doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="/js/chunk-vendors.bb844861.js"></script><script src="/js/app.df0986dc.js"></script></body></html> <!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/favicon.ico"><title>frontend</title><link href="/css/app.0786e41a.css" rel="preload" as="style"><link href="/css/chunk-vendors.8823d44d.css" rel="preload" as="style"><link href="/js/app.3102fbaf.js" rel="preload" as="script"><link href="/js/chunk-vendors.bb844861.js" rel="preload" as="script"><link href="/css/chunk-vendors.8823d44d.css" rel="stylesheet"><link href="/css/app.0786e41a.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but frontend doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="/js/chunk-vendors.bb844861.js"></script><script src="/js/app.3102fbaf.js"></script></body></html>

2
frontend/dist/js/app.3102fbaf.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
frontend/dist/js/app.3102fbaf.js.map vendored Normal file
View File

File diff suppressed because one or more lines are too long

2
frontend/dist/js/app.df0986dc.js vendored
View File

File diff suppressed because one or more lines are too long

1
frontend/dist/js/app.df0986dc.js.map vendored
View File

File diff suppressed because one or more lines are too long

165
frontend/src/components/daily_recipe_detail.vue
View File

@ -1,61 +1,61 @@
<template> <template>
<el-table border :data="daily_recipe"> <el-table border :data="daily_recipe">
<el-table-column prop="meat" label="肉"> <el-table-column prop="meat" label="肉">
<template #default="scope"> <el-select v-model="meat" multiple size="mini" placeholder="选个肉">
<el-tag <el-option
id="meal" v-for="recipe in meat_recipe"
v-for="recipe in scope.row.meat" :key="recipe.id"
:key="recipe.name" :label="recipe.name"
closable :value="recipe.id"
size="small"
> >
<router-link </el-option>
:to="{ name: 'RecipeDetail', params: { id: recipe.id } }" </el-select>
>{{ recipe.name }}</router-link
>
</el-tag>
</template>
</el-table-column> </el-table-column>
<el-table-column prop="vegetable" label="菜"> <el-table-column prop="vegetable" label="菜">
<template #default="scope"> <el-select v-model="vegetable" multiple size="mini" placeholder="选个菜">
<el-tag <el-option
id="meal" v-for="recipe in vegetable_recipe"
v-for="recipe in scope.row.vegetable" :key="recipe.id"
:key="recipe.name" :label="recipe.name"
closable :value="recipe.id"
size="small"
> >
<router-link </el-option>
:to="{ name: 'RecipeDetail', params: { id: recipe.id } }" </el-select>
>{{ recipe.name }}</router-link </el-table-column>
>
</el-tag>
</template></el-table-column
>
<el-table-column prop="soup" label="汤"> <el-table-column prop="soup" label="汤">
<template #default="scope"> <el-select v-model="soup" multiple size="mini" placeholder="选个汤">
<el-tag <el-option
id="meal" v-for="recipe in soup_recipe"
v-for="recipe in scope.row.soup" :key="recipe.id"
:key="recipe.name" :label="recipe.name"
closable :value="recipe.id"
size="small"
><router-link
:to="{ name: 'RecipeDetail', params: { id: recipe.id } }"
>{{ recipe.name }}</router-link
></el-tag
> >
</template></el-table-column </el-option>
> </el-select>
</el-table-column>
</el-table> </el-table>
<el-button <el-row gutter="20">
type="primary" <el-col :span="12">
plain <el-button
class="re-generate" type="primary"
@click="reGenerateRecipe()" plain
> class="re-generate"
重新生成 @click="reGenerateRecipe()"
</el-button> >
重新生成
</el-button>
</el-col>
<el-col :span="12">
<el-button
type="success"
plain
class="re-generate"
@click="submitRecipe()"
>
提交
</el-button>
</el-col>
</el-row>
</template> </template>
<script> <script>
@ -68,28 +68,30 @@ export default {
daily_recipe: [], daily_recipe: [],
inputVisible: false, inputVisible: false,
inputValue: null, inputValue: null,
meat_recipe: [],
meat: [],
vegetable_recipe: [],
vegetable: [],
soup_recipe: [],
soup: [],
}; };
}, },
mounted() { mounted() {
this.getDailyRecipy(),
axios
.get(
config.publicPath + '/recipe/recipe/?recipe_type=meat&page_size=500'
)
.then((response) => (this.meat_recipe = response.data.results));
axios axios
.get(config.publicPath + '/recipe/daily-recipe/' + this.$route.params.id) .get(
.then((response) => { config.publicPath +
var data = { '/recipe/recipe/?recipe_type=vegetable&page_size=500'
meat: [], )
vegetable: [], .then((response) => (this.vegetable_recipe = response.data.results));
soup: [], axios
}; .get(config.publicPath + '/recipe/recipe/?recipe_type=soup&page_size=500')
for (let i = 0; i < response.data.recipes.length; i++) { .then((response) => (this.soup_recipe = response.data.results));
if (response.data.recipes[i].recipe_type == 'meat') {
data.meat.push(response.data.recipes[i]);
} else if (response.data.recipes[i].recipe_type == 'vegetable') {
data.vegetable.push(response.data.recipes[i]);
} else if (response.data.recipes[i].recipe_type == 'soup') {
data.soup.push(response.data.recipes[i]);
}
}
this.daily_recipe = [data];
});
}, },
methods: { methods: {
reGenerateRecipe() { reGenerateRecipe() {
@ -97,25 +99,44 @@ export default {
.post( .post(
config.publicPath + '/recipe/daily-recipe/' + this.$route.params.id config.publicPath + '/recipe/daily-recipe/' + this.$route.params.id
) )
.then((response) => { .then((response) => (response, this.getDailyRecipy()));
response; },
return axios.get( submitRecipe() {
config.publicPath + '/recipe/daily-recipe/' + this.$route.params.id console.log(this.meat, this.vegetable, this.soup);
); axios.put(
}) config.publicPath + '/recipe/daily-recipe/' + this.$route.params.id,
{
meat: this.meat,
vegetable: this.vegetable,
soup: this.soup,
}
);
},
getDailyRecipy() {
axios
.get(
config.publicPath + '/recipe/daily-recipe/' + this.$route.params.id
)
.then((response) => { .then((response) => {
var data = { var data = {
meat: [], meat: [],
vegetable: [], vegetable: [],
soup: [], soup: [],
}; };
this.meat = [];
this.vegetable = [];
this.soup = [];
for (let i = 0; i < response.data.recipes.length; i++) { for (let i = 0; i < response.data.recipes.length; i++) {
if (response.data.recipes[i].recipe_type == 'meat') { if (response.data.recipes[i].recipe_type == 'meat') {
data.meat.push(response.data.recipes[i]); data.meat.push(response.data.recipes[i]);
this.meat.push(response.data.recipes[i]['id']);
} else if (response.data.recipes[i].recipe_type == 'vegetable') { } else if (response.data.recipes[i].recipe_type == 'vegetable') {
data.vegetable.push(response.data.recipes[i]); data.vegetable.push(response.data.recipes[i]);
this.vegetable.push(response.data.recipes[i]['id']);
} else if (response.data.recipes[i].recipe_type == 'soup') { } else if (response.data.recipes[i].recipe_type == 'soup') {
data.soup.push(response.data.recipes[i]); data.soup.push(response.data.recipes[i]);
this.soup.push(response.data.recipes[i]['id']);
} }
} }
this.daily_recipe = [data]; this.daily_recipe = [data];

13
recipe/views.py
View File

@ -79,4 +79,15 @@ class DailyRecipeAPI(rest_framework.generics.RetrieveUpdateAPIView):
def post(self, request, *args, **kwargs): def post(self, request, *args, **kwargs):
daily_recipe = recipe.models.DailyRecipe.objects.get(id=kwargs['pk']) daily_recipe = recipe.models.DailyRecipe.objects.get(id=kwargs['pk'])
daily_recipe.generate_recipe() daily_recipe.generate_recipe()
return Response({}, status=status.HTTP_201_CREATED, headers={}) return Response(daily_recipe.serialize(), status=status.HTTP_201_CREATED,
headers={})
def put(self, request, *args, **kwargs):
daily_recipe = recipe.models.DailyRecipe.objects.get(id=kwargs['pk'])
recipes = request.data.get('meat',[])
recipes.extend(request.data.get('vegetable', []))
recipes.extend(request.data.get('soup', []))
daily_recipe.recipes.set(recipe.models.Recipe.objects.filter(
id__in=recipes))
return Response(daily_recipe.serialize(), status=status.HTTP_201_CREATED,
headers={})