!163 新增忌口编写功能

Merge pull request !163 from 德仔/develop
This commit is contained in:
德仔
2021-03-23 20:11:26 +08:00
committed by Gitee
15 changed files with 874 additions and 478 deletions

View File

@ -0,0 +1,147 @@
<template>
<div class="simple_igd_view_wrapper">
<el-row :gutter="12">
<el-form :model="queryParams" ref="queryForm" :inline="true">
<el-col :span="8">
<el-form-item label="名称" prop="name" size="mini">
<el-input
v-model="queryParams.name"
placeholder="请输入食材名称"
clearable
size="mini"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="类别" prop="type" size="mini" width="130px">
<el-select
v-model="queryParams.type"
placeholder="请选择食材类别"
clearable
size="mini"
>
<el-option
v-for="dict in ingTypeOptions"
:key="dict.dictValue"
:label="dict.dictLabel"
:value="dict.dictValue"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item size="mini">
<el-button
type="cyan"
icon="el-icon-search"
size="mini"
@click="handleQuery"
>搜索
</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
>重置
</el-button>
</el-form-item>
</el-col>
</el-form>
</el-row>
<el-table
v-loading="loading"
border
:data="ingredientList"
:cell-style="{ padding: 0 }"
:header-cell-style="{ padding: 0, height: 'unset' }"
>
<el-table-column label="食材名称" align="center" prop="name" />
<el-table-column
label="食材类别"
align="center"
prop="type"
:formatter="typeFormat"
/>
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-button type="text" size="mini" @click="handleOnSelect(scope.row)"
>选用</el-button
>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total > 0"
:background="false"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
layout="total, prev, pager, next"
/>
</div>
</template>
<script>
import { listIngredient } from "@/api/custom/ingredient";
export default {
name: "SimpleIngredientListView2",
data() {
return {
loading: false,
total: 0,
ingredientList: [],
ingTypeOptions: [],
queryParams: {
pageNum: 1,
pageSize: 10,
name: null,
type: null,
area: null,
reviewStatus: "yes",
},
};
},
created() {
this.getDicts("cus_ing_type").then((response) => {
this.ingTypeOptions = response.data;
});
},
watch: {},
methods: {
getList() {
this.loading = true;
listIngredient(this.queryParams).then((response) => {
this.ingredientList = response.rows;
this.total = response.total;
this.loading = false;
});
},
reset() {
this.resetForm("queryForm");
},
// 食材类别字典翻译
typeFormat(row, column) {
return this.selectDictLabel(this.ingTypeOptions, row.type);
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
handleOnSelect(data) {
this.$emit("onSelect", data);
},
},
};
</script>
<style lang="scss" scoped>
.simple_igd_view_wrapper {
/deep/ .el-input {
width: 130px;
}
}
</style>

View File

@ -0,0 +1,103 @@
<template>
<div class="avoid_certain_food_com_wrapper">
<el-popover
placement="right"
trigger="click"
width="600"
title="忌口"
@hide="handleOnHide"
>
<SimpleIngredientListView @onSelect="handleOnSelect" />
<span slot="reference" class="trigger">忌口 </span>
</el-popover>
<div class="content">
<el-tag
v-for="item in data"
:key="item.id"
closable
size="mini"
type="danger"
@close="handleOnClose(item)"
>
{{ item.name }}
</el-tag>
</div>
</div>
</template>
<script>
import { createNamespacedHelpers } from "vuex";
const { mapMutations } = createNamespacedHelpers("recipes");
import SimpleIngredientListView from "./SimpleIngredientListView";
import { editPhysicalSigns } from "@/api/custom/healthy";
export default {
name: "ACFCom2",
props: ["value", "id"],
components: {
SimpleIngredientListView,
},
data() {
return {
data: [],
};
},
watch: {
value(val) {
this.data = val;
},
},
methods: {
handleOnSelect(data) {
// console.log(data);
if (!this.data.some((obj) => obj.id === data.id)) {
this.data.push({
id: data.id,
name: data.name,
});
// console.log(this.data);
this.$emit("update:value", this.data);
this.updateAvoidFoodIds({
avoidFoodIds: this.data.map((obj) => obj.id),
});
}
},
handleOnClose(data) {
// console.log(data);
this.data = this.data.filter((obj) => data.id !== obj.id);
this.$emit("update:value", this.data);
this.updateAvoidFoodIds({ avoidFoodIds: this.data.map((obj) => obj.id) });
// 删除后更新
this.handleOnHide();
},
handleOnHide() {
editPhysicalSigns({ id: this.id, avoidFood: this.data }).then((res) => {
if (res.code === 200) {
this.$message.success("忌口修改成功");
}
});
},
...mapMutations(["updateAvoidFoodIds"]),
},
};
</script>
<style lang="scss" scoped>
.avoid_certain_food_com_wrapper {
display: flex;
margin-bottom: 8px;
.trigger {
font-size: 14px;
width: 42px;
color: #8c8c8c;
cursor: pointer;
}
.content {
flex: 1;
& > span {
margin: 0 4px 4px 4px;
}
}
}
</style>

View File

@ -0,0 +1,99 @@
<template>
<div class="simple_remark_com_wrapper">
<el-popover
placement="right"
trigger="click"
width="400"
title="备注"
@hide="handleOnHide"
>
<el-input
type="textarea"
v-model="nData"
rows="6"
placeholder="请输入备注信息"
maxlength="300"
show-word-limit
/>
<span slot="reference" class="trigger">备注 </span>
</el-popover>
<div class="content">
<span v-if="newLine">
<div v-for="v in mValue" :key="v">
{{ v }}
</div>
</span>
<span v-else>{{ mValue }}</span>
</div>
</div>
</template>
<script>
import { editPhysicalSigns } from "@/api/custom/healthy";
export default {
name: "RemarkCom2",
props: ["value", "id"],
components: {},
data() {
return {
newLine: false,
nData: "",
};
},
watch: {
value(val) {
this.nData = val;
},
nData(val) {
this.$emit("updata:value", val);
},
},
computed: {
mValue: function () {
if (
this.nData &&
typeof this.nData === "string" &&
(this.nData.includes("</br>") || this.nData.includes("\n"))
) {
this.newLine = true;
if (this.nData.includes("</br>")) {
return this.nData.split("</br>");
} else if (this.nData.includes("\n")) {
return this.nData.split("\n");
}
this.newLine = false;
return this.nData;
}
this.newLine = false;
return this.nData;
},
},
methods: {
handleOnHide() {
// console.log("handleOnHide");
editPhysicalSigns({ id: this.id, remark: this.nData }).then((res) => {
if (res.code === 200) {
this.$message.success("备注修改成功");
}
});
},
},
};
</script>
<style lang="scss" scoped>
.simple_remark_com_wrapper {
display: flex;
margin-bottom: 8px;
font-size: 14px;
.trigger {
width: 42px;
color: #8c8c8c;
cursor: pointer;
}
.content {
flex: 1;
}
}
</style>

View File

@ -1,46 +1,23 @@
<template>
<div class="body_sign_view_wrapper">
<div>
<h2>{{ this.data.name }}</h2>
<el-button
v-if="dev"
size="mini"
type="primary"
class="remark_btn"
@click="handleOnRemark"
>修改备注</el-button
>
<div class="msg-info" v-for="(info, idx) in basicInfo" :key="idx">
<text-info
v-for="con in info"
:title="con.title"
:key="con.title"
:value="data[con.value]"
extraclass="text-info-extra"
/>
</div>
</div>
<!-- 备注弹窗 -->
<el-dialog title="修改备注" :visible.sync="open" width="480px">
<el-input
type="textarea"
v-model="data.remarks"
rows="6"
placeholder="请输入备注信息"
maxlength="300"
show-word-limit
<h2>{{ data.name }}</h2>
<div class="msg-info" v-for="(info, idx) in basicInfo" :key="idx">
<text-info
v-for="con in info"
:title="con.title"
:key="con.title"
:value="data[con.value]"
extraclass="text-info-extra"
/>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submit"> </el-button>
<el-button @click="onClosed"> </el-button>
</div>
</el-dialog>
</div>
<RemarkCom2 v-if="dev" :value.sync="data.remark" :id="data.id" />
<ACFCOM2 v-if="dev" :value.sync="data.avoidFood" :id="data.id" />
</div>
</template>
<script>
import TextInfo from "@/components/TextInfo";
import { editPhysicalSigns } from "@/api/custom/healthy";
import ACFCOM2 from "./ACFCom2";
import RemarkCom2 from "./RemarkCom2";
export default {
name: "BodySignView",
@ -56,6 +33,8 @@ export default {
},
components: {
"text-info": TextInfo,
ACFCOM2,
RemarkCom2,
},
data() {
const basicInfo = [
@ -110,32 +89,11 @@ export default {
basicInfo.splice(6, 0, [
{ title: "不运动总热量", value: "notSportHeat" },
]);
basicInfo.splice(basicInfo.length, 0, [
{ title: "备注", value: "remarks" },
]);
}
return {
basicInfo,
open: false,
};
},
methods: {
handleOnRemark() {
this.open = true;
},
onClosed() {
this.open = false;
},
submit() {
const { id, remarks } = this.data;
editPhysicalSigns({ id, remarks }).then((res) => {
if (res.code === 200) {
this.$message.success("修改成功");
this.open = false;
}
});
},
},
};
</script>
<style lang="scss" scoped>

View File

@ -0,0 +1,147 @@
<template>
<div class="simple_igd_view_wrapper">
<el-row :gutter="12">
<el-form :model="queryParams" ref="queryForm" :inline="true">
<el-col :span="8">
<el-form-item label="名称" prop="name" size="mini">
<el-input
v-model="queryParams.name"
placeholder="请输入食材名称"
clearable
size="mini"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="类别" prop="type" size="mini" width="130px">
<el-select
v-model="queryParams.type"
placeholder="请选择食材类别"
clearable
size="mini"
>
<el-option
v-for="dict in ingTypeOptions"
:key="dict.dictValue"
:label="dict.dictLabel"
:value="dict.dictValue"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item size="mini">
<el-button
type="cyan"
icon="el-icon-search"
size="mini"
@click="handleQuery"
>搜索
</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
>重置
</el-button>
</el-form-item>
</el-col>
</el-form>
</el-row>
<el-table
v-loading="loading"
border
:data="ingredientList"
:cell-style="{ padding: 0 }"
:header-cell-style="{ padding: 0, height: 'unset' }"
>
<el-table-column label="食材名称" align="center" prop="name" />
<el-table-column
label="食材类别"
align="center"
prop="type"
:formatter="typeFormat"
/>
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-button type="text" size="mini" @click="handleOnSelect(scope.row)"
>选用</el-button
>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total > 0"
:background="false"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
layout="total, prev, pager, next"
/>
</div>
</template>
<script>
import { listIngredient } from "@/api/custom/ingredient";
export default {
name: "SimpleIngredientListView",
data() {
return {
loading: false,
total: 0,
ingredientList: [],
ingTypeOptions: [],
queryParams: {
pageNum: 1,
pageSize: 10,
name: null,
type: null,
area: null,
reviewStatus: "yes",
},
};
},
created() {
this.getDicts("cus_ing_type").then((response) => {
this.ingTypeOptions = response.data;
});
},
watch: {},
methods: {
getList() {
this.loading = true;
listIngredient(this.queryParams).then((response) => {
this.ingredientList = response.rows;
this.total = response.total;
this.loading = false;
});
},
reset() {
this.resetForm("queryForm");
},
// 食材类别字典翻译
typeFormat(row, column) {
return this.selectDictLabel(this.ingTypeOptions, row.type);
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
handleOnSelect(data) {
this.$emit("onSelect", data);
},
},
};
</script>
<style lang="scss" scoped>
.simple_igd_view_wrapper {
/deep/ .el-input {
width: 130px;
}
}
</style>

View File

@ -0,0 +1,107 @@
<template>
<div class="avoid_certain_food_com_wrapper">
<el-popover
placement="right"
trigger="click"
width="600"
title="忌口"
@hide="handleOnHide"
>
<SimpleIngredientListView @onSelect="handleOnSelect" />
<span slot="reference" class="trigger">忌口 </span>
</el-popover>
<div class="content">
<el-tag
v-for="item in data"
:key="item.id"
closable
size="mini"
type="danger"
@close="handleOnClose(item)"
>
{{ item.name }}
</el-tag>
</div>
</div>
</template>
<script>
import { createNamespacedHelpers } from "vuex";
const {
mapActions,
mapState,
mapMutations,
mapGetters,
} = createNamespacedHelpers("recipes");
import SimpleIngredientListView from "./SimpleIngredientListView";
import { updateHealthy } from "@/api/custom/healthy";
export default {
name: "ACFCom",
props: ["value", "id"],
components: {
SimpleIngredientListView,
},
data() {
return {
data: [],
};
},
watch: {
value(val) {
this.data = val;
},
},
methods: {
handleOnSelect(data) {
// console.log(data);
if (!this.data.some((obj) => obj.id === data.id)) {
this.data.push({
id: data.id,
name: data.name,
});
// console.log(this.data);
this.$emit("update:value", this.data);
this.updateAvoidFoodIds({
avoidFoodIds: this.data.map((obj) => obj.id),
});
}
},
handleOnClose(data) {
// console.log(data);
this.data = this.data.filter((obj) => data.id !== obj.id);
this.$emit("update:value", this.data);
this.updateAvoidFoodIds({ avoidFoodIds: this.data.map((obj) => obj.id) });
// 删除后更新
this.handleOnHide();
},
handleOnHide() {
updateHealthy({ id: this.id, avoidFood: this.data }).then((res) => {
if (res.code === 200) {
this.$message.success("忌口修改成功");
}
});
},
...mapMutations(["updateAvoidFoodIds"]),
},
};
</script>
<style lang="scss" scoped>
.avoid_certain_food_com_wrapper {
display: flex;
margin-bottom: 8px;
.trigger {
font-size: 14px;
width: 42px;
color: #8c8c8c;
cursor: pointer;
}
.content {
flex: 1;
& > span {
margin: 0 4px 4px 4px;
}
}
}
</style>

View File

@ -0,0 +1,99 @@
<template>
<div class="simple_remark_com_wrapper">
<el-popover
placement="right"
trigger="click"
width="400"
title="备注"
@hide="handleOnHide"
>
<el-input
type="textarea"
v-model="nData"
rows="6"
placeholder="请输入备注信息"
maxlength="300"
show-word-limit
/>
<span slot="reference" class="trigger">备注 </span>
</el-popover>
<div class="content">
<span v-if="newLine">
<div v-for="v in mValue" :key="v">
{{ v }}
</div>
</span>
<span v-else>{{ mValue }}</span>
</div>
</div>
</template>
<script>
import { updateHealthy } from "@/api/custom/healthy";
export default {
name: "RemarkCom",
props: ["value", "id"],
components: {},
data() {
return {
newLine: false,
nData: "",
};
},
watch: {
value(val) {
this.nData = val;
},
nData(val) {
this.$emit("updata:value", val);
},
},
computed: {
mValue: function () {
if (
this.nData &&
typeof this.nData === "string" &&
(this.nData.includes("</br>") || this.nData.includes("\n"))
) {
this.newLine = true;
if (this.nData.includes("</br>")) {
return this.nData.split("</br>");
} else if (this.nData.includes("\n")) {
return this.nData.split("\n");
}
this.newLine = false;
return this.nData;
}
this.newLine = false;
return this.nData;
},
},
methods: {
handleOnHide() {
// console.log("handleOnHide");
updateHealthy({ id: this.id, remark: this.nData }).then((res) => {
if (res.code === 200) {
this.$message.success("备注修改成功");
}
});
},
},
};
</script>
<style lang="scss" scoped>
.simple_remark_com_wrapper {
display: flex;
margin-bottom: 8px;
font-size: 14px;
.trigger {
width: 42px;
color: #8c8c8c;
cursor: pointer;
}
.content {
flex: 1;
}
}
</style>

View File

@ -2,14 +2,6 @@
<div class="health_view_wrapper">
<div>
<h2>{{ this.data.name }}</h2>
<el-button
v-if="dev"
size="mini"
type="primary"
class="remark_btn"
@click="handleOnRemark"
>修改备注</el-button
>
<div class="msg-info" v-for="(info, idx) in basicInfo" :key="idx">
<text-info
v-for="i in info"
@ -19,6 +11,8 @@
extraclass="text-info-extra"
/>
</div>
<RemarkCom v-if="dev" :value.sync="data.remark" :id="data.id" />
<ACFCom v-if="dev" :value.sync="data.avoidFood" :id="data.id" />
</div>
<el-collapse>
<el-collapse-item
@ -47,27 +41,12 @@
</div>
</el-collapse-item>
</el-collapse>
<!-- 备注弹窗 -->
<el-dialog title="修改备注" :visible.sync="open" width="480px">
<el-input
type="textarea"
v-model="data.remark"
rows="6"
placeholder="请输入备注信息"
maxlength="300"
show-word-limit
/>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submit"> </el-button>
<el-button @click="onClosed"> </el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import TextInfo from "@/components/TextInfo";
import { updateHealthy } from "@/api/custom/healthy";
import ACFCom from "./ACFCom";
import RemarkCom from "./RemarkCom";
export default {
name: "HealthyView",
@ -83,6 +62,8 @@ export default {
},
components: {
"text-info": TextInfo,
ACFCom,
RemarkCom,
},
data() {
const basicInfo = [
@ -107,13 +88,9 @@ export default {
basicInfo.splice(6, 0, [
{ title: "不运动总热量", value: "notSportHeat" },
]);
basicInfo.splice(basicInfo.length, 0, [
{ title: "备注", value: "remark" },
]);
}
return {
open: false,
basicInfo,
healthyInvestigate: [
{
@ -243,21 +220,6 @@ export default {
getImgUrl(path) {
return `${window.location.origin}${path}`;
},
handleOnRemark() {
this.open = true;
},
onClosed() {
this.open = false;
},
submit() {
const { id, remark } = this.data;
updateHealthy({ id, remark }).then((res) => {
if (res.code === 200) {
this.$message.success("修改成功");
this.open = false;
}
});
},
},
};
</script>

View File

@ -29,8 +29,10 @@ export default {
} else if (this.value.includes("\n")) {
return this.value.split("\n");
}
this.newLine = false;
return this.value;
}
this.newLine = false;
return this.value;
},
},

View File

@ -39,6 +39,7 @@ const oriState = {
//
leftShow: false,
notRecIgds: [],
avoidFoodIds: [],
igdTypeOptions: []
};
@ -75,6 +76,9 @@ const mutations = {
}
}
},
updateAvoidFoodIds(state, payload) {
state.avoidFoodIds = payload.avoidFoodIds;
},
updateFontSize(state, payload) {
state.fontSize = payload.fontSize;
localStorage.setItem("fontSize", payload.fontSize);
@ -215,7 +219,8 @@ const actions = {
commit("updateStateData", {
healthDataLoading: false,
healthyDataType,
healthyData
healthyData,
avoidFoodIds: (healthyData.avoidFood || []).map(obj => obj.id)
});
},
async getRecipesInfo({ commit, state }, payload) {

View File

@ -311,6 +311,9 @@ export default {
return {};
},
computed: {
notIds() {
return this.avoidFoodIds.concat(this.notRecIgds);
},
mData() {
if (!this.data.dishes) {
return [];
@ -337,8 +340,8 @@ export default {
}
lastNameHit =
arr[arr.length - 1].name === cur.name &&
arr[arr.length - 1].type === cur.type
// arr[arr.length - 1].dishesId === cur.dishesId;
arr[arr.length - 1].type === cur.type;
// arr[arr.length - 1].dishesId === cur.dishesId;
if (lastNameHit) {
let namePos = arr.length - 1;
for (let i = namePos; i >= 0; i--) {
@ -407,6 +410,7 @@ export default {
"canCopyMenuTypes",
"recipesId",
"notRecIgds",
"avoidFoodIds",
]),
},
methods: {
@ -416,7 +420,7 @@ export default {
return "recipes_first_col";
} else {
return `recipes_cell recipes_cell_${this.fontSize} ${
columnIndex === 2 && this.notRecIgds.includes(row.igdId)
columnIndex === 2 && this.notIds.includes(row.igdId)
? "warning_heightlight"
: ""
}`;