112 lines
2.7 KiB
Vue
112 lines
2.7 KiB
Vue
<template>
|
|
<el-row justify="center">
|
|
<el-col>
|
|
<el-table border stripe :data="daily_recipes" max-height="500">
|
|
<el-table-column
|
|
prop="date"
|
|
label="日期"
|
|
:formatter="formatDate"
|
|
></el-table-column>
|
|
<el-table-column prop="meat" label="肉">
|
|
<template #default="scope">
|
|
<ul>
|
|
<li v-for="recipe in scope.row.meat" :key="recipe.name">
|
|
<a :href="'/recipe/' + recipe.id">
|
|
{{ recipe.name }}
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="vegetable" label="菜">
|
|
<template #default="scope">
|
|
<ul>
|
|
<li v-for="recipe in scope.row.vegetable" :key="recipe.name">
|
|
<a :href="'/recipe/' + recipe.id">
|
|
{{ recipe.name }}
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</template></el-table-column
|
|
>
|
|
<el-table-column prop="soup" label="汤">
|
|
<template #default="scope">
|
|
<ul>
|
|
<li v-for="recipe in scope.row.soup" :key="recipe.name">
|
|
<a :href="'/recipe/' + recipe.id">
|
|
{{ recipe.name }}
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</template></el-table-column
|
|
>
|
|
</el-table>
|
|
</el-col>
|
|
<el-col>
|
|
<el-button
|
|
type="primary"
|
|
plain
|
|
class="re-generate"
|
|
@click="reGenerateRecipe()"
|
|
>重新生成</el-button
|
|
>
|
|
</el-col>
|
|
</el-row>
|
|
</template>
|
|
|
|
<script>
|
|
import axios from 'axios';
|
|
|
|
function formatDate(row, column, cellValue) {
|
|
if (cellValue === undefined) {
|
|
return;
|
|
}
|
|
var date_ = new Date(cellValue * 1000);
|
|
return date_.toDateString();
|
|
}
|
|
|
|
function formatMeal(row, column, cellValue) {
|
|
var data = ['/ '];
|
|
if (cellValue === undefined) {
|
|
return;
|
|
}
|
|
for (let i = 0; i < cellValue.length; i++) {
|
|
data.push(cellValue[i].name + ' / ');
|
|
}
|
|
return data;
|
|
}
|
|
export default {
|
|
name: 'WeekRecipe',
|
|
data: function() {
|
|
return {
|
|
daily_recipes: [],
|
|
formatDate,
|
|
formatMeal,
|
|
};
|
|
},
|
|
mounted() {
|
|
axios
|
|
.get('//localhost:8000/recipe/week-recipe/')
|
|
.then((response) => (this.daily_recipes = response.data));
|
|
},
|
|
methods: {
|
|
reGenerateRecipe() {
|
|
axios
|
|
.post('//localhost:8000/recipe/week-recipe/')
|
|
.then((response) => {
|
|
response;
|
|
return axios.get('//localhost:8000/recipe/week-recipe/');
|
|
})
|
|
.then((response) => (this.daily_recipes = response.data));
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
.re-generate {
|
|
margin: 20px 0;
|
|
width: 100%;
|
|
}
|
|
</style>
|