食谱模板功能完成
This commit is contained in:
huangdeliang
@ -4,6 +4,9 @@
|
||||
:style="`height: ${collapse ? 30 : 200}px`"
|
||||
>
|
||||
<div class="header">
|
||||
<el-button size="mini" v-if="!recipesId" @click="handleOnBack"
|
||||
>返回</el-button
|
||||
>
|
||||
<el-popover
|
||||
placement="bottom"
|
||||
trigger="click"
|
||||
@ -101,6 +104,9 @@ export default {
|
||||
hanldeOnReveiwChange(reviewStatus) {
|
||||
this.updateReviewStatus({ reviewStatus });
|
||||
},
|
||||
handleOnBack() {
|
||||
this.updateReviewStatus({ recipesData: [] });
|
||||
},
|
||||
...mapActions(["saveRecipes", "updateReviewStatus"]),
|
||||
},
|
||||
};
|
||||
|
||||
@ -0,0 +1,8 @@
|
||||
<template>
|
||||
<div>推荐列表</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "TemplateView",
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,97 @@
|
||||
<template>
|
||||
<div class="template_view_wrapper">
|
||||
<div class="header">
|
||||
<el-button size="mini" @click="handleOnBackClick">返回</el-button>
|
||||
</div>
|
||||
<div class="content">
|
||||
<h2>选择模板</h2>
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="dataList"
|
||||
highlight-current-row
|
||||
@current-change="handleCurrentChange"
|
||||
>
|
||||
<el-table-column label="模板名称" align="center" prop="name" />
|
||||
<el-table-column label="营养师" align="center" prop="nutritionist" />
|
||||
<el-table-column label="营养师助理" align="center" prop="nutriAssis" />
|
||||
<el-table-column label="备注" prop="remark" align="center" />
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { listRecipesTemplate } from "@/api/custom/recipesTemplate";
|
||||
export default {
|
||||
name: "TemplateView",
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
dataList: [],
|
||||
total: 0,
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
reviewStatus: 2,
|
||||
},
|
||||
};
|
||||
},
|
||||
props: ["view"],
|
||||
methods: {
|
||||
handleOnBackClick() {
|
||||
this.$emit("update:view", 0);
|
||||
this.queryParams = {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
reviewStatus: 2,
|
||||
};
|
||||
},
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listRecipesTemplate(this.queryParams).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.dataList = res.rows;
|
||||
this.total = res.total;
|
||||
this.loading = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
handleCurrentChange(data) {
|
||||
this.$emit("onSelect", data);
|
||||
setTimeout(() => {
|
||||
this.$emit("update:view", 0);
|
||||
}, 500);
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
view: function (val, oldVal) {
|
||||
if (val === 1) {
|
||||
this.getList();
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.template_view_wrapper {
|
||||
height: 100%;
|
||||
|
||||
.header {
|
||||
height: 32px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
.content {
|
||||
height: calc(100% - 32px);
|
||||
padding-top: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,90 @@
|
||||
|
||||
<template>
|
||||
<div class="recommend_view_wrapper">
|
||||
<div class="selector_view" v-if="curView === 0">
|
||||
<div class="card_content" @click="handleOnClick(1)">
|
||||
<em class="el-icon-brush" />
|
||||
<span>模板</span>
|
||||
</div>
|
||||
<div class="card_content" @click="handleOnClick(2)" v-if="false">
|
||||
<em class="el-icon-star-off" />
|
||||
<span>推荐</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<TemplateView :view.sync="curView" @onSelect="handleOnSelect" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { createNamespacedHelpers } from "vuex";
|
||||
import TemplateView from "./TemplateView";
|
||||
import RecommendView from "./RecommendView";
|
||||
const {
|
||||
mapActions,
|
||||
mapState,
|
||||
mapMutations,
|
||||
mapGetters,
|
||||
} = createNamespacedHelpers("recipes");
|
||||
export default {
|
||||
name: "RecommondView",
|
||||
components: {
|
||||
RecommendView,
|
||||
TemplateView,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
curView: 0,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleOnClick(type) {
|
||||
this.curView = type;
|
||||
},
|
||||
handleOnSelect(data) {
|
||||
const { recipesId } = data;
|
||||
this.getRecipesInfo({ recipesId });
|
||||
},
|
||||
...mapActions(["getRecipesInfo"]),
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.recommend_view_wrapper {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
.selector_view {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.card_content {
|
||||
cursor: pointer;
|
||||
margin: 6px;
|
||||
padding: 100px 80px;
|
||||
border: 3px solid #e6ebf5;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: bold;
|
||||
|
||||
& > em {
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
& > span {
|
||||
margin-top: 12px;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: #409eff;
|
||||
color: #1890ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,22 +0,0 @@
|
||||
|
||||
<template>
|
||||
<el-button @click="handleOnClick">推荐</el-button>
|
||||
</template>
|
||||
<script>
|
||||
import { createNamespacedHelpers } from "vuex";
|
||||
const {
|
||||
mapActions,
|
||||
mapState,
|
||||
mapMutations,
|
||||
mapGetters,
|
||||
} = createNamespacedHelpers("recipes");
|
||||
export default {
|
||||
name: "RecommondView",
|
||||
methods: {
|
||||
handleOnClick() {
|
||||
this.getRecipesInfo({ recipesId: 73 });
|
||||
},
|
||||
...mapActions(["getRecipesInfo"]),
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,89 @@
|
||||
<template>
|
||||
<div class="template_info_wrapper">
|
||||
<h2>{{ data.name }}</h2>
|
||||
<TextInfo title="营养师" :value="data.nutritionist" />
|
||||
<TextInfo
|
||||
title="营养师助理"
|
||||
:value="data.nutriAssis"
|
||||
style="margin-top: 24px"
|
||||
/>
|
||||
<div class="remark_info">
|
||||
<span class="info_title">备注：</span>
|
||||
<el-input
|
||||
type="textarea"
|
||||
:rows="8"
|
||||
placeholder="请输入内容"
|
||||
v-model="data.remark"
|
||||
>
|
||||
</el-input>
|
||||
</div>
|
||||
<div style="margin-top: 12px; text-align: right">
|
||||
<el-button v-if="change" type="primary" size="mini" @click="handleSubmit"
|
||||
>提交</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import TextInfo from "@/components/TextInfo";
|
||||
import { updateRecipesTemplate } from "@/api/custom/recipesTemplate";
|
||||
export default {
|
||||
name: "TemplateInfoView",
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
id: "",
|
||||
name: "",
|
||||
nutritionist: "",
|
||||
nutriAssis: "",
|
||||
remark: "",
|
||||
}),
|
||||
},
|
||||
},
|
||||
components: {
|
||||
TextInfo,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
oriRemark: "",
|
||||
change: false,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
"data.remark": function (val, oldVal) {
|
||||
if (!oldVal && val) {
|
||||
this.oriRemark = val;
|
||||
}
|
||||
this.change = this.oriRemark !== val;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
handleSubmit() {
|
||||
const { remark, id } = this.data;
|
||||
updateRecipesTemplate({ id, remark }).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success("修改成功");
|
||||
this.change = false;
|
||||
this.oriRemark = remark;
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.template_info_wrapper {
|
||||
.remark_info {
|
||||
font-size: 14px;
|
||||
margin-top: 24px;
|
||||
display: flex;
|
||||
|
||||
.info_title {
|
||||
color: #8c8c8c;
|
||||
flex: 0 0 48px;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -7,10 +7,11 @@
|
||||
:name="healthyData.name"
|
||||
:analyseData="analyseData"
|
||||
/>
|
||||
<RecommondView v-else />
|
||||
<RecommendView v-else />
|
||||
</div>
|
||||
<div class="right" v-loading="healthDataLoading">
|
||||
<HealthyView :data="healthyData" v-if="healthyDataType === 0" />
|
||||
<TemplateInfoView v-if="!!temId" :data="templateInfo" />
|
||||
<HealthyView :data="healthyData" v-else-if="healthyDataType === 0" />
|
||||
<BodySignView :data="healthyData" v-else />
|
||||
</div>
|
||||
</div>
|
||||
@ -27,16 +28,21 @@ const {
|
||||
import HealthyView from "@/components/HealthyView";
|
||||
import BodySignView from "@/components/BodySignView";
|
||||
import RecipesView from "./RecipesView/index";
|
||||
import RecommondView from "./RecommondView";
|
||||
import RecommendView from "./RecommendView";
|
||||
import TemplateInfoView from "./TemplateInfoView";
|
||||
|
||||
export default {
|
||||
name: "BuildRecipies",
|
||||
data() {
|
||||
return {};
|
||||
const { temId } = this.$route.query;
|
||||
return {
|
||||
temId,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.init({
|
||||
planId: this.planId,
|
||||
temId: this.temId,
|
||||
}).catch((err) => {
|
||||
this.$message.error(err.message);
|
||||
});
|
||||
@ -49,13 +55,15 @@ export default {
|
||||
HealthyView,
|
||||
BodySignView,
|
||||
RecipesView,
|
||||
RecommondView,
|
||||
RecommendView,
|
||||
TemplateInfoView,
|
||||
},
|
||||
props: ["name", "planId"],
|
||||
computed: {
|
||||
...mapState([
|
||||
"healthyData",
|
||||
"healthyDataType",
|
||||
"templateInfo",
|
||||
"recipesData",
|
||||
"recipesDataLoading",
|
||||
"healthDataLoading",
|
||||
|
||||
Reference in New Issue
Block a user