This commit is contained in:
xiezhijun
2021-03-22 15:52:21 +08:00
13 changed files with 1434 additions and 967 deletions

View File

@ -3,7 +3,10 @@ package com.stdiet.custom.controller;
import java.util.List; import java.util.List;
import com.stdiet.common.utils.StringUtils; import com.stdiet.common.utils.StringUtils;
import com.stdiet.custom.domain.SysCustomerPhysicalSigns;
import com.stdiet.custom.domain.SysPhysicalSigns;
import com.stdiet.custom.dto.request.HealthyDetailRequest; import com.stdiet.custom.dto.request.HealthyDetailRequest;
import com.stdiet.custom.service.ISysCustomerPhysicalSignsService;
import org.springframework.security.access.prepost.PreAuthorize; import org.springframework.security.access.prepost.PreAuthorize;
import org.springframework.beans.factory.annotation.Autowired; import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*; import org.springframework.web.bind.annotation.*;
@ -29,6 +32,9 @@ public class SysCustomerHealthyController extends BaseController
@Autowired @Autowired
private ISysCustomerHealthyService sysCustomerHealthyService; private ISysCustomerHealthyService sysCustomerHealthyService;
@Autowired
private ISysCustomerPhysicalSignsService sysCustomerPhysicalSignsService;
/** /**
* 查询客户健康列表 * 查询客户健康列表
*/ */
@ -120,4 +126,14 @@ public class SysCustomerHealthyController extends BaseController
{ {
return sysCustomerHealthyService.generateHealthyReport(healthyDetailRequest); return sysCustomerHealthyService.generateHealthyReport(healthyDetailRequest);
} }
/**
* 修改老的体征数据
* @param sysPhysicalSigns
* @return
*/
@PutMapping("/edit/physical")
public AjaxResult editPhysical(@RequestBody SysCustomerPhysicalSigns sysPhysicalSigns) {
return toAjax(sysCustomerPhysicalSignsService.updateSysCustomerPhysicalSigns(sysPhysicalSigns));
}
} }

View File

@ -1,208 +1,211 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="renderer" content="webkit"> <meta name="renderer" content="webkit" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> name="viewport"
<link rel="stylesheet" href="//at.alicdn.com/t/font_2343184_8rlvxcc41j5.css"> content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
/>
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<link
rel="stylesheet"
href="//at.alicdn.com/t/font_2343184_w0runuauamq.css"
/>
<title><%= webpackConfig.name %></title> <title><%= webpackConfig.name %></title>
<style> <style>
html, html,
body, body,
#app { #app {
height: 100%; height: 100%;
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
}
.chromeframe {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
#loader-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 999999;
}
#loader {
display: block;
position: relative;
left: 50%;
top: 50%;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #FFF;
-webkit-animation: spin 2s linear infinite;
-ms-animation: spin 2s linear infinite;
-moz-animation: spin 2s linear infinite;
-o-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
z-index: 1001;
}
#loader:before {
content: "";
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #FFF;
-webkit-animation: spin 3s linear infinite;
-moz-animation: spin 3s linear infinite;
-o-animation: spin 3s linear infinite;
-ms-animation: spin 3s linear infinite;
animation: spin 3s linear infinite;
}
#loader:after {
content: "";
position: absolute;
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #FFF;
-moz-animation: spin 1.5s linear infinite;
-o-animation: spin 1.5s linear infinite;
-ms-animation: spin 1.5s linear infinite;
-webkit-animation: spin 1.5s linear infinite;
animation: spin 1.5s linear infinite;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
} }
100% { .chromeframe {
-webkit-transform: rotate(360deg); margin: 0.2em 0;
-ms-transform: rotate(360deg); background: #ccc;
transform: rotate(360deg); color: #000;
padding: 0.2em 0;
} }
}
@keyframes spin { #loader-wrapper {
0% { position: fixed;
-webkit-transform: rotate(0deg); top: 0;
-ms-transform: rotate(0deg); left: 0;
transform: rotate(0deg); width: 100%;
height: 100%;
z-index: 999999;
} }
100% {
-webkit-transform: rotate(360deg); #loader {
-ms-transform: rotate(360deg); display: block;
transform: rotate(360deg); position: relative;
left: 50%;
top: 50%;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #fff;
-webkit-animation: spin 2s linear infinite;
-ms-animation: spin 2s linear infinite;
-moz-animation: spin 2s linear infinite;
-o-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
z-index: 1001;
} }
}
#loader:before {
content: "";
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #fff;
-webkit-animation: spin 3s linear infinite;
-moz-animation: spin 3s linear infinite;
-o-animation: spin 3s linear infinite;
-ms-animation: spin 3s linear infinite;
animation: spin 3s linear infinite;
}
#loader-wrapper .loader-section { #loader:after {
position: fixed; content: "";
top: 0; position: absolute;
width: 51%; top: 15px;
height: 100%; left: 15px;
background: #7171C6; right: 15px;
z-index: 1000; bottom: 15px;
-webkit-transform: translateX(0); border-radius: 50%;
-ms-transform: translateX(0); border: 3px solid transparent;
transform: translateX(0); border-top-color: #fff;
} -moz-animation: spin 1.5s linear infinite;
-o-animation: spin 1.5s linear infinite;
-ms-animation: spin 1.5s linear infinite;
-webkit-animation: spin 1.5s linear infinite;
animation: spin 1.5s linear infinite;
}
#loader-wrapper .loader-section.section-left { @-webkit-keyframes spin {
left: 0; 0% {
} -webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#loader-wrapper .loader-section.section-right { @keyframes spin {
right: 0; 0% {
} -webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#loader-wrapper .loader-section {
position: fixed;
top: 0;
width: 51%;
height: 100%;
background: #7171c6;
z-index: 1000;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
.loaded #loader-wrapper .loader-section.section-left { #loader-wrapper .loader-section.section-left {
-webkit-transform: translateX(-100%); left: 0;
-ms-transform: translateX(-100%); }
transform: translateX(-100%);
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}
.loaded #loader-wrapper .loader-section.section-right { #loader-wrapper .loader-section.section-right {
-webkit-transform: translateX(100%); right: 0;
-ms-transform: translateX(100%); }
transform: translateX(100%);
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}
.loaded #loader { .loaded #loader-wrapper .loader-section.section-left {
opacity: 0; -webkit-transform: translateX(-100%);
-webkit-transition: all 0.3s ease-out; -ms-transform: translateX(-100%);
transition: all 0.3s ease-out; transform: translateX(-100%);
} -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.loaded #loader-wrapper { .loaded #loader-wrapper .loader-section.section-right {
visibility: hidden; -webkit-transform: translateX(100%);
-webkit-transform: translateY(-100%); -ms-transform: translateX(100%);
-ms-transform: translateY(-100%); transform: translateX(100%);
transform: translateY(-100%); -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
-webkit-transition: all 0.3s 1s ease-out; transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: all 0.3s 1s ease-out; }
}
.no-js #loader-wrapper { .loaded #loader {
display: none; opacity: 0;
} -webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.no-js h1 { .loaded #loader-wrapper {
color: #222222; visibility: hidden;
} -webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
-webkit-transition: all 0.3s 1s ease-out;
transition: all 0.3s 1s ease-out;
}
#loader-wrapper .load_title { .no-js #loader-wrapper {
font-family: 'Open Sans'; display: none;
color: #FFF; }
font-size: 19px;
width: 100%;
text-align: center;
z-index: 9999999999999;
position: absolute;
top: 60%;
opacity: 1;
line-height: 30px;
}
#loader-wrapper .load_title span { .no-js h1 {
font-weight: normal; color: #222222;
font-style: italic; }
font-size: 13px;
color: #FFF; #loader-wrapper .load_title {
opacity: 0.5; font-family: "Open Sans";
} color: #fff;
</style> font-size: 19px;
width: 100%;
text-align: center;
z-index: 9999999999999;
position: absolute;
top: 60%;
opacity: 1;
line-height: 30px;
}
#loader-wrapper .load_title span {
font-weight: normal;
font-style: italic;
font-size: 13px;
color: #fff;
opacity: 0.5;
}
</style>
</head> </head>
<body> <body>
<div id="app"> <div id="app">
<div id="loader-wrapper"> <div id="loader-wrapper">
<div id="loader"></div> <div id="loader"></div>
<div class="loader-section section-left"></div> <div class="loader-section section-left"></div>
<div class="loader-section section-right"></div> <div class="loader-section section-right"></div>
<div class="load_title">正在加载系统资源,请耐心等待</div> <div class="load_title">正在加载系统资源,请耐心等待</div>
</div> </div>
</div> </div>
</body> </body>
</html> </html>

View File

@ -1,74 +1,80 @@
import request from '@/utils/request' import request from "@/utils/request";
// 查询客户健康列表 // 查询客户健康列表
export function listHealthy(query) { export function listHealthy(query) {
return request({ return request({
url: '/custom/healthy/list', url: "/custom/healthy/list",
method: 'get', method: "get",
params: query params: query
}) });
} }
// 查询客户健康详细 // 查询客户健康详细
export function getHealthy(id) { export function getHealthy(id) {
return request({ return request({
url: '/custom/healthy/' + id, url: "/custom/healthy/" + id,
method: 'get' method: "get"
}) });
} }
// 新增客户健康 // 新增客户健康
export function addHealthy(data) { export function addHealthy(data) {
return request({ return request({
url: '/custom/healthy', url: "/custom/healthy",
method: 'post', method: "post",
data: data data: data
}) });
} }
// 修改客户健康 // 修改客户健康
export function updateHealthy(data) { export function updateHealthy(data) {
return request({ return request({
url: '/custom/healthy', url: "/custom/healthy",
method: 'put', method: "put",
data: data data: data
}) });
} }
// 删除客户健康 // 删除客户健康
export function delHealthy(id) { export function delHealthy(id) {
return request({ return request({
url: '/custom/healthy/' + id, url: "/custom/healthy/" + id,
method: 'delete' method: "delete"
}) });
} }
// 导出客户健康 // 导出客户健康
export function exportHealthy(query) { export function exportHealthy(query) {
return request({ return request({
url: '/custom/healthy/export', url: "/custom/healthy/export",
method: 'get', method: "get",
params: query params: query
}) });
} }
// 下载文件 // 下载文件
export function download(fileName) { export function download(fileName) {
return request({ return request({
url: '/common/download', url: "/common/download",
method: 'get', method: "get",
params: {"fileName": fileName} params: { fileName: fileName }
}) });
} }
// 生成健康体征报告 // 生成健康体征报告
export function generateHealthyReport(healthyDetail) { export function generateHealthyReport(healthyDetail) {
return request({ return request({
url: '/custom/healthy/generateHealthyReport', url: "/custom/healthy/generateHealthyReport",
method: 'post', method: "post",
data: healthyDetail data: healthyDetail
}) });
} }
// 修改老的体征
export function editPhysicalSigns(data) {
return request({
url: "/custom/healthy/edit/physical",
method: "put",
data
});
}

View File

@ -2,14 +2,14 @@
<div class="body_sign_view_wrapper"> <div class="body_sign_view_wrapper">
<div> <div>
<h2>{{ this.data.name }}</h2> <h2>{{ this.data.name }}</h2>
<!-- <el-button <el-button
v-if="dev" v-if="dev"
size="mini" size="mini"
type="primary" type="primary"
class="remark_btn" class="remark_btn"
@click="handleOnRemark" @click="handleOnRemark"
>修改备注</el-button >修改备注</el-button
> --> >
<div class="msg-info" v-for="(info, idx) in basicInfo" :key="idx"> <div class="msg-info" v-for="(info, idx) in basicInfo" :key="idx">
<text-info <text-info
v-for="con in info" v-for="con in info"
@ -25,7 +25,7 @@
<el-dialog title="修改备注" :visible.sync="open" width="480px"> <el-dialog title="修改备注" :visible.sync="open" width="480px">
<el-input <el-input
type="textarea" type="textarea"
v-model="data.remark" v-model="data.remarks"
rows="6" rows="6"
placeholder="请输入备注信息" placeholder="请输入备注信息"
maxlength="300" maxlength="300"
@ -40,7 +40,7 @@
</template> </template>
<script> <script>
import TextInfo from "@/components/TextInfo"; import TextInfo from "@/components/TextInfo";
import { updateHealthy } from "@/api/custom/healthy"; import { editPhysicalSigns } from "@/api/custom/healthy";
export default { export default {
name: "BodySignView", name: "BodySignView",
@ -111,7 +111,7 @@ export default {
{ title: "不运动总热量", value: "notSportHeat" }, { title: "不运动总热量", value: "notSportHeat" },
]); ]);
basicInfo.splice(basicInfo.length, 0, [ basicInfo.splice(basicInfo.length, 0, [
{ title: "备注", value: "remark" }, { title: "备注", value: "remarks" },
]); ]);
} }
return { return {
@ -127,8 +127,8 @@ export default {
this.open = false; this.open = false;
}, },
submit() { submit() {
const { id, remark } = this.data; const { id, remarks } = this.data;
updateHealthy({ id, remark }).then((res) => { editPhysicalSigns({ id, remarks }).then((res) => {
if (res.code === 200) { if (res.code === 200) {
this.$message.success("修改成功"); this.$message.success("修改成功");
this.open = false; this.open = false;

View File

@ -522,6 +522,8 @@ const getters = {
(igd.weight / 100) * igd.proteinRatio * 4 + (igd.weight / 100) * igd.proteinRatio * 4 +
(igd.weight / 100) * igd.fatRatio * 9 + (igd.weight / 100) * igd.fatRatio * 9 +
(igd.weight / 100) * igd.carbonRatio * 4; (igd.weight / 100) * igd.carbonRatio * 4;
obj[`weight${cur.type}`] += igd.weight;
obj.totalWeight += igd.weight;
}); });
return obj; return obj;
}, },
@ -533,66 +535,96 @@ const getters = {
pHeat: 0, pHeat: 0,
fHeat: 0, fHeat: 0,
cHeat: 0, cHeat: 0,
//
totalHeat: 0, totalHeat: 0,
heat1: 0, heat1: 0,
heat2: 0, heat2: 0,
heat3: 0, heat3: 0,
heat4: 0, heat4: 0,
heat5: 0, heat5: 0,
heat6: 0 heat6: 0,
//
totalWeight: 0,
weight1: 0,
weight2: 0,
weight3: 0,
weight4: 0,
weight5: 0,
weight6: 0
} }
) )
); );
console.log(nutriData); console.log(nutriData);
return nutriData; return nutriData;
}, },
verifyNotRecData: state => verifyNotRecData: state => {
state.recipesData.reduce((arr, cur, dayIdx) => { const data = state.recipesData.reduce((arr, cur, dayIdx) => {
cur.dishes.forEach(dObj => { cur.dishes.forEach(dObj => {
dObj.igdList.forEach(iObj => { dObj.igdList.forEach(iObj => {
(iObj.notRec || "").split(",").forEach(nRec => { (iObj.notRec || "").split(",").forEach(nRec => {
if (nRec) { if (nRec) {
let tarObj = arr.find(obj => obj.name === nRec); const tarObj = arr.find(obj => obj.name === nRec);
if (tarObj) { if (tarObj) {
tarObj.data.push({ if (!tarObj.igdIds.includes(iObj.id)) {
igdId: iObj.id, tarObj.igdIds.push(iObj.id);
num: dayIdx, }
dishesId: dObj.dishesId, const tarIgdObj = tarObj.data.find(obj => obj.id === iObj.id);
id: dObj.id if (tarIgdObj) {
}); if (!tarIgdObj.data.some(obj => obj.day === cur.numDay)) {
tarIgdObj.data.push({ num: dayIdx, day: cur.numDay });
}
} else {
tarObj.data.push({
name: iObj.name,
id: iObj.id,
data: [{ num: dayIdx, day: cur.numDay }]
});
}
} else { } else {
tarObj = { arr.push({
name: nRec, name: nRec,
igdIds: [iObj.id],
data: [ data: [
{ {
igdId: iObj.id, name: iObj.name,
num: dayIdx, id: iObj.id,
dishesId: dObj.dishesId, data: [{ num: dayIdx, day: cur.numDay }]
id: dObj.id
} }
] ]
}; });
arr.push(tarObj);
} }
} }
}); });
}); });
}); });
return arr; return arr;
}, []), }, []);
igdTypeDetial: state => // console.log(data);
state.recipesData.reduce((obj, cur) => { return data;
},
igdTypeData: state => {
const data = state.recipesData.reduce((arr, cur, idx) => {
cur.dishes.forEach(dObj => { cur.dishes.forEach(dObj => {
dObj.igdList.forEach(iObj => { dObj.igdList.forEach(iObj => {
if (!obj[iObj.type]) { let tarObj = arr.find(obj => obj.id === iObj.id);
obj[iObj.type] = [{ name: iObj.name, id: iObj.id }]; if (!tarObj) {
} else if (!obj[iObj.type].some(tObj => tObj.id === iObj.id)) { tarObj = {
obj[iObj.type].push({ name: iObj.name, id: iObj.id }); name: iObj.name,
id: iObj.id,
data: [{ num: idx, day: cur.numDay }]
};
arr.push(tarObj);
} else if (!tarObj.data.some(obj => obj.day === cur.numDay)) {
tarObj.data.push({ num: idx, day: cur.numDay });
} }
}); });
}); });
return obj; return arr;
}, {}), }, []);
// console.log(data);
return data;
},
cusUnitDict: state => cusUnitDict: state =>
state.cusUnitOptions.reduce((obj, cur) => { state.cusUnitOptions.reduce((obj, cur) => {
obj[cur.dictValue] = cur.dictLabel; obj[cur.dictValue] = cur.dictLabel;

View File

@ -0,0 +1,137 @@
<template>
<div>
<el-form
:model="queryParams"
ref="queryForm"
:inline="true"
label-width="68px"
>
<el-form-item label="名称" prop="name">
<el-input
v-model="queryParams.name"
placeholder="请输入食材名称"
clearable
size="mini"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="类别" prop="type">
<el-select
v-model="queryParams.type"
placeholder="请选择食材类别"
clearable
size="mini"
>
<el-option
v-for="dict in typeOptions"
:key="dict.dictValue"
:label="dict.dictLabel"
:value="dict.dictValue"
/>
</el-select>
</el-form-item>
<el-form-item>
<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-form>
<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 prop="proteinRatio" label="蛋白质/100g" align="center" />
<el-table-column prop="fatRatio" label="脂肪/100g" align="center" />
<el-table-column prop="carbonRatio" label="碳水/100g" align="center" />
<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: "IngredientListView",
data() {
return {
loading: false,
total: 0,
ingredientList: [],
queryParams: {
pageNum: 1,
pageSize: 10,
name: null,
type: null,
area: null,
reviewStatus: "yes",
},
};
},
props: ["typeOptions", "visible"],
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.typeOptions, row.type);
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
handleOnSelect(data) {
this.$emit("onSelect", data);
},
},
};
</script>

View File

@ -0,0 +1,507 @@
<template>
<el-drawer
:title="title"
:visible.sync="open"
:wrapperClosable="false"
:before-close="handleClose"
size="50%"
:close-on-press-escape="false"
>
<div class="edit_dishes_drawer_wrapper">
<el-row class="content_detail" v-loading="entireLoading">
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-col :span="12">
<el-form-item label="菜品名称" prop="name">
<el-input v-model="form.name" placeholder="请输入菜品名称" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="审核状态" prop="reviewStatus">
<el-select
v-model="form.reviewStatus"
placeholder="请选择审核状态"
clearable
>
<el-option
v-for="dict in reviewStatusOptions"
:key="dict.dictValue"
:label="dict.dictLabel"
:value="dict.dictValue"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="菜品种类" prop="dishClass">
<el-cascader
filterable
v-model="form.dishClass"
:options="dishClassOptions"
:props="{ expandTrigger: 'hover' }"
placeholder="请选择菜品种类"
></el-cascader>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="菜品类型" prop="type">
<el-select
v-model="form.type"
placeholder="请选择菜品类型"
multiple
>
<el-option
v-for="dict in typeOptions"
:key="dict.dictValue"
:label="dict.dictLabel"
:value="dict.dictValue"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="是否主食" prop="isMain">
<el-radio-group v-model="form.isMain">
<el-radio :label="0"></el-radio>
<el-radio :label="1"></el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="待选食材">
<IngredientListView
ref="igdRef"
:typeOptions="ingTypeOptions"
@onSelect="handleOnIgdSelect"
/>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="已选食材" prop="igdList">
<el-table
:data="form.igdList"
border
show-summary
:cell-style="{ padding: '2px 0' }"
:header-cell-style="{ padding: 0, height: 'unset' }"
:summary-method="getSummaries"
>
<el-table-column prop="name" label="食材" align="center" />
<el-table-column label="通俗计量" align="center">
<template slot-scope="scope">
<span class="cus-unit">
<el-select size="mini" v-model="scope.row.cusWeight">
<el-option
v-for="dict in cusWeightOptions"
:key="dict.dictValue"
:label="dict.dictLabel"
:value="parseInt(dict.dictValue)"
/>
</el-select>
<el-select size="mini" v-model="scope.row.cusUnit">
<el-option
v-for="dict in cusUnitOptions"
:key="dict.dictValue"
:label="dict.dictLabel"
:value="parseInt(dict.dictValue)"
/>
</el-select>
</span>
</template>
</el-table-column>
<el-table-column prop="weight" label="重量(g)" align="center">
<template slot-scope="scope">
<el-input-number
class="weight"
v-model="scope.row.weight"
size="mini"
controls-position="right"
:min="0"
:step="5"
/>
</template>
</el-table-column>
<el-table-column
prop="proteinRatio"
label="蛋白质/100g"
align="center"
/>
<el-table-column
prop="fatRatio"
label="脂肪/100g"
align="center"
/>
<el-table-column
prop="carbonRatio"
label="碳水/100g"
align="center"
/>
<el-table-column label="热量(kcal)" align="center">
<template slot-scope="scope">
{{
`${(
((scope.row.proteinRatio * scope.row.weight) / 100) *
4 +
((scope.row.fatRatio * scope.row.weight) / 100) * 9 +
((scope.row.carbonRatio * scope.row.weight) / 100) * 4
).toFixed(1)}`
}}
</template>
</el-table-column>
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-button type="text" size="mini" @click="handleOnDelete(scope.row)"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="推荐人群" v-if="!!selRec.length">
<el-tag
style="margin-right: 4px"
v-for="rec in selRec"
:key="rec"
type="success"
>
{{ rec }}
</el-tag>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="忌口人群" v-if="!!selNotRec.length">
<el-tag
style="margin-right: 4px"
v-for="notRec in selNotRec"
:key="notRec"
type="danger"
>
{{ notRec }}
</el-tag>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="做法" prop="methods">
<el-input
v-model="form.methods"
type="textarea"
placeholder="请输入内容"
rows="4"
/>
</el-form-item>
</el-col>
</el-form>
</el-row>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm"> </el-button>
<el-button @click="cancel"> </el-button>
</div>
</div>
</el-drawer>
</template>
<script>
import { addDishes, updateDishes, getDishes } from "@/api/custom/dishes";
import IngredientListView from "./IngredientListView";
export default {
name: "EditDishesDrawer",
components: {
IngredientListView,
},
created() {
this.getDicts("cus_ing_type").then((response) => {
this.ingTypeOptions = response.data;
});
this.getDicts("cus_cus_unit").then((response) => {
this.cusUnitOptions = response.data;
});
this.getDicts("cus_cus_weight").then((response) => {
this.cusWeightOptions = response.data;
});
},
data() {
return {
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 通俗单位
cusUnitOptions: [],
//
cusWeightOptions: [],
// 食材类别字典
ingTypeOptions: [],
// 表单参数
form: {},
// 表单校验
rules: {
name: [
{ required: true, message: "菜品名称不能为空", trigger: "blur" },
],
type: [
{ required: true, message: "菜品类型不能为空", trigger: "blur" },
],
igdList: [{ required: true, message: "食材不能为空", trigger: "blur" }],
},
//
entireLoading: false,
// 选中的食材分量列表
//
selRec: [],
selNotRec: [],
};
},
props: [
"typeOptions",
"reviewStatusOptions",
"dishClassBigOptions",
"dishClassOptions",
"dishClassSmallOptions",
],
watch: {
"form.igdList": function (val) {
const selRec = [];
const selNotRec = [];
val.forEach((obj) => {
if (obj.rec) {
obj.rec.split(",").forEach((rec) => {
if (!selRec.includes(rec)) {
selRec.push(rec);
}
});
}
if (obj.notRec) {
obj.notRec.split(",").forEach((notRec) => {
if (!selNotRec.includes(notRec)) {
selNotRec.push(notRec);
}
});
}
});
this.selRec = selRec;
this.selNotRec = selNotRec;
},
showNotRec() {
return !!this.selNotRec.length;
},
},
methods: {
showDrawer(id) {
this.open = true;
this.title = id ? "修改菜品" : "新建菜品";
this.reset();
if (id) {
this.fetchDishesDetail(id);
}
this.$nextTick(() => {
this.$refs.igdRef.getList();
});
},
fetchDishesDetail(id) {
getDishes(id).then((response) => {
this.form = response.data;
this.form.dishClass = [this.form.bigClass, this.form.smallClass];
this.form.type = this.form.type ? this.form.type.split(",") : [];
});
},
handleOnIgdSelect(data) {
if (this.form.igdList.some((obj) => obj.id === data.id)) {
this.$message.error(`已存在食材${data.name}`);
return;
}
this.form.igdList.push({
...data,
weight: 100,
cusUnit: 1,
cusWeight: 1,
});
},
handleOnDelete(data) {
this.form.igdList = this.form.igdList.filter((obj) => obj.id !== data.id);
},
cusUnitFormat(row, column) {
return this.selectDictLabel(this.cusUnitOptions, row.type);
},
cusWeightFormat(row, column) {
return this.selectDictLabel(this.cusWeightOptions, row.cusWeight);
},
// 取消按钮
cancel() {
this.open = false;
},
// 表单重置
reset() {
this.form = {
id: null,
name: null,
type: [],
dishClass: [],
methods: null,
createBy: null,
createTime: null,
updateBy: null,
updateTime: null,
igdList: [],
isMain: 1,
};
this.selRec = [];
this.selNotRec = [];
this.resetForm("form");
this.$nextTick(() => {
this.$refs.igdRef.reset();
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate((valid) => {
if (valid) {
const data = JSON.parse(JSON.stringify(this.form));
// console.log({ data });
data.type = data.type.join(",");
if (data.id != null) {
updateDishes(data).then((response) => {
if (response.code === 200) {
this.msgSuccess("修改成功");
this.open = false;
this.$emit("onSuccess");
}
});
} else {
addDishes(data).then((response) => {
if (response.code === 200) {
this.msgSuccess("新增成功");
this.open = false;
this.$emit("onSuccess");
}
});
}
}
});
},
getSummaries(param) {
const { columns, data } = param;
// console.log(data);
return columns.reduce(
(arr, cur, idx) => {
if (idx > 1 && idx !== 7) {
if (idx === 6) {
arr[6] = (arr[3] * 4 + arr[4] * 9 + arr[5] * 4).toFixed(1);
} else {
arr[idx] = data.reduce((acc, dAcc) => {
if (idx === 2) {
return acc + parseFloat(dAcc.weight);
}
return parseFloat(
(
acc +
(dAcc[cur.property] * parseFloat(dAcc.weight)) / 100
).toFixed(1)
);
}, 0);
}
}
return arr;
},
["合计"]
);
},
handleClose(done) {
this.reset();
done();
},
},
};
</script>
<style lang="scss" scoped>
.edit_dishes_drawer_wrapper {
height: 100%;
display: flex;
flex-direction: column;
.content_detail {
flex: 1 1 0;
padding: 12px;
overflow: auto;
}
.dialog-footer {
flex: 0 0 45px;
display: inline-flex;
align-items: center;
justify-content: flex-end;
padding: 0 12px;
}
}
</style>
<style lang="scss">
#el-drawer__title {
& > span:focus {
outline: 0;
}
}
.el-transfer-panel__filter {
margin: 2px;
}
.el-transfer-panel__list.is-filterable {
padding-bottom: 28px;
}
.cus-unit {
display: inline-flex;
.el-input-number--mini {
width: 38px;
}
.el-input-number {
.el-input-number__decrease {
display: none;
}
.el-input-number__increase {
display: none;
}
.el-input {
width: 38px;
}
.el-input .el-input__inner {
padding: 0;
border-radius: 0;
border: unset;
border-bottom: 1px solid #dcdfe6;
}
}
.el-select {
.el-input__suffix {
display: none;
}
.el-input__inner {
padding: 0 4px;
/* border: unset; */
text-align: center;
}
}
}
.weight {
width: 70px;
.el-input .el-input__inner {
padding: 0 32px 0 4px;
}
}
.pagination-container {
margin-top: 0;
}
</style>

View File

@ -97,11 +97,7 @@
@queryTable="getList" @queryTable="getList"
></right-toolbar> ></right-toolbar>
</el-row> </el-row>
<el-table <el-table v-loading="loading" :data="dishesList">
v-loading="loading"
:data="dishesList"
@selection-change="handleSelectionChange"
>
<el-table-column label="审核状态" align="center" width="80"> <el-table-column label="审核状态" align="center" width="80">
<template slot-scope="scope"> <template slot-scope="scope">
<el-tag <el-tag
@ -177,247 +173,28 @@
/> />
<!-- 添加或修改菜品对话框 --> <!-- 添加或修改菜品对话框 -->
<el-drawer <EditDishesDrawer
:title="title" ref="dishesDrawerRef"
:visible.sync="open" :typeOptions="typeOptions"
:wrapperClosable="false" :reviewStatusOptions="reviewStatusOptions"
size="50%" :dishClassBigOptions="dishClassBigOptions"
:close-on-press-escape="false" :dishClassSmallOptions="dishClassSmallOptions"
> :dishClassOptions="dishClassOptions"
<div class="drawer_content"> @onSuccess="getList"
<el-row class="content_detail"> />
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-col :span="24">
<el-form-item label="菜品名称" prop="name">
<el-input v-model="form.name" placeholder="请输入菜品名称" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="菜品种类" prop="dishClass">
<el-cascader
filterable
v-model="form.dishClass"
:options="dishClassOptions"
:props="{ expandTrigger: 'hover' }"
placeholder="请选择菜品种类"
></el-cascader>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="菜品类型" prop="type">
<el-select
v-model="form.type"
placeholder="请选择菜品类型"
multiple
>
<el-option
v-for="dict in typeOptions"
:key="dict.dictValue"
:label="dict.dictLabel"
:value="dict.dictValue"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="是否主食" prop="isMain">
<el-radio-group v-model="form.isMain">
<el-radio :label="0"></el-radio>
<el-radio :label="1"></el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="食材" prop="ingIds">
<el-transfer
style="text-align: left; display: inline-block"
v-model="selIngIds"
size="mini"
filterable
:titles="['备选', '已选']"
:button-texts="['', '']"
:format="{
noChecked: '${total}',
hasChecked: '${checked}/${total}',
}"
@change="handleChange"
:data="ingDataList"
>
<el-select
class="transfer-footer"
slot="left-footer"
size="small"
filterable
v-model="ingType"
@change="handleOnTypeChange"
>
<el-option
v-for="dict in ingTypeOptions"
:key="dict.dictValue"
:label="dict.dictLabel"
:value="dict.dictValue"
/>
</el-select>
<div
class="transfer-footer"
slot="right-footer"
size="small"
/>
</el-transfer>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="分量" prop="weight">
<el-table
:data="selTableData"
border
show-summary
size="mini"
:summary-method="getSummaries"
style="width: 100%"
>
<el-table-column prop="name" label="食材" align="center" />
<el-table-column label="通俗计量" align="center">
<template slot-scope="scope">
<span class="cus-unit">
<el-select size="mini" v-model="scope.row.cusWeight">
<el-option
v-for="dict in cusWeightOptions"
:key="dict.dictValue"
:label="dict.dictLabel"
:value="parseInt(dict.dictValue)"
/>
</el-select>
<el-select size="mini" v-model="scope.row.cusUnit">
<el-option
v-for="dict in cusUnitOptions"
:key="dict.dictValue"
:label="dict.dictLabel"
:value="parseInt(dict.dictValue)"
/>
</el-select>
</span>
</template>
</el-table-column>
<el-table-column prop="weight" label="重量(g)" align="center">
<template slot-scope="scope">
<el-input-number
class="weight"
v-model="scope.row.weight"
size="mini"
controls-position="right"
:min="0"
:step="5"
/>
</template>
</el-table-column>
<el-table-column
prop="proteinRatio"
label="蛋白质/100g"
align="center"
/>
<el-table-column
prop="fatRatio"
label="脂肪/100g"
align="center"
/>
<el-table-column
prop="carbonRatio"
label="碳水/100g"
align="center"
/>
<el-table-column label="热量" align="center">
<template slot-scope="scope">
{{
`${(
((scope.row.proteinRatio * scope.row.weight) / 100) *
4 +
((scope.row.fatRatio * scope.row.weight) / 100) * 9 +
((scope.row.carbonRatio * scope.row.weight) / 100) * 4
).toFixed(1)} kcal`
}}
</template>
</el-table-column>
</el-table>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="推荐人群">
<el-tag
style="margin-right: 4px"
v-for="rec in selRec"
:key="rec"
type="success"
>
{{ rec }}
</el-tag>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="忌口人群">
<el-tag
style="margin-right: 4px"
v-for="notRec in selNotRec"
:key="notRec"
type="danger"
>
{{ notRec }}
</el-tag>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="审核状态" prop="reviewStatus">
<el-select
v-model="form.reviewStatus"
placeholder="请选择审核状态"
clearable
>
<el-option
v-for="dict in reviewStatusOptions"
:key="dict.dictValue"
:label="dict.dictLabel"
:value="dict.dictValue"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="做法" prop="methods">
<el-input
v-model="form.methods"
type="textarea"
placeholder="请输入内容"
rows="4"
/>
</el-form-item>
</el-col>
</el-form>
</el-row>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm"> </el-button>
<el-button @click="cancel"> </el-button>
</div>
</div>
</el-drawer>
</div> </div>
</template> </template>
<script> <script>
import { import { delDishes, exportDishes, listDishes } from "@/api/custom/dishes";
addDishes,
delDishes,
exportDishes,
getDishes,
listDishes,
updateDishes,
} from "@/api/custom/dishes";
import { listAllIngredient } from "@/api/custom/ingredient";
import AutoHideInfo from "@/components/AutoHideInfo"; import AutoHideInfo from "@/components/AutoHideInfo";
import EditDishesDrawer from "./EditDishesDrawer";
export default { export default {
name: "Dishes", name: "Dishes",
components: { components: {
autohideinfo: AutoHideInfo, autohideinfo: AutoHideInfo,
EditDishesDrawer,
}, },
data() { data() {
return { return {
@ -425,10 +202,6 @@ export default {
loading: true, loading: true,
// 选中数组 // 选中数组
ids: [], ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件 // 显示搜索条件
showSearch: true, showSearch: true,
// 总条数 // 总条数
@ -437,13 +210,7 @@ export default {
dishesList: [], dishesList: [],
// 审核状态 // 审核状态
reviewStatusOptions: [], reviewStatusOptions: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
ingType: "1",
// 食材类别字典
ingTypeOptions: [],
// 远程数据缓存,预防新增的食材找不到 // 远程数据缓存,预防新增的食材找不到
oriDataList: [], oriDataList: [],
// 备选食材列表 // 备选食材列表
@ -456,14 +223,10 @@ export default {
selNotRec: [], selNotRec: [],
// 选中的食材id // 选中的食材id
selIngIds: [], selIngIds: [],
// 选中的食材分量列表
selTableData: [],
// 菜品类别字典 // 菜品类别字典
typeOptions: [], typeOptions: [],
// 通俗单位
cusUnitOptions: [],
//
cusWeightOptions: [],
dishClassOptions: [], dishClassOptions: [],
dishClassBigOptions: [], dishClassBigOptions: [],
dishClassSmallOptions: [], dishClassSmallOptions: [],
@ -476,10 +239,6 @@ export default {
bigClass: null, bigClass: null,
smallClass: null, smallClass: null,
}, },
// 表单参数
form: {},
// 表单校验
rules: {},
//菜品种类查询种类 //菜品种类查询种类
dishClassQueryParam: [], dishClassQueryParam: [],
}; };
@ -489,15 +248,7 @@ export default {
this.getDicts("cus_dishes_type").then((response) => { this.getDicts("cus_dishes_type").then((response) => {
this.typeOptions = response.data; this.typeOptions = response.data;
}); });
this.getDicts("cus_ing_type").then((response) => {
this.ingTypeOptions = response.data;
});
this.getDicts("cus_cus_unit").then((response) => {
this.cusUnitOptions = response.data;
});
this.getDicts("cus_cus_weight").then((response) => {
this.cusWeightOptions = response.data;
});
this.getDicts("cus_review_status").then((response) => { this.getDicts("cus_review_status").then((response) => {
this.reviewStatusOptions = response.data; this.reviewStatusOptions = response.data;
}); });
@ -582,12 +333,7 @@ export default {
.split(",") .split(",")
.map((type) => this.selectDictLabel(this.typeOptions, type)); .map((type) => this.selectDictLabel(this.typeOptions, type));
}, },
cusUnitFormat(row, column) {
return this.selectDictLabel(this.cusUnitOptions, row.type);
},
cusWeightFormat(row, column) {
return this.selectDictLabel(this.cusWeightOptions, row.cusWeight);
},
// 地域字典翻译 // 地域字典翻译
reviewStatusFormat(row, column) { reviewStatusFormat(row, column) {
return this.selectDictLabel(this.reviewStatusOptions, row.area); return this.selectDictLabel(this.reviewStatusOptions, row.area);
@ -607,35 +353,6 @@ export default {
} }
return ""; return "";
}, },
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
id: null,
name: null,
type: [],
dishClass: [],
methods: null,
createBy: null,
createTime: null,
updateBy: null,
updateTime: null,
igdList: [],
isMain: 1,
};
this.selIngIds = [];
this.selIngList = [];
this.selTableData = [];
this.oriDataList = [];
this.selRec = [];
this.selNotRec = [];
this.ingType = "1";
this.resetForm("form");
},
/** 搜索按钮操作 */ /** 搜索按钮操作 */
handleQuery() { handleQuery() {
this.queryParams.pageNum = 1; this.queryParams.pageNum = 1;
@ -647,101 +364,13 @@ export default {
this.dishClassQueryParam = []; this.dishClassQueryParam = [];
this.handleQuery(); this.handleQuery();
}, },
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map((item) => item.id);
this.single = selection.length !== 1;
this.multiple = !selection.length;
},
/** 新增按钮操作 */ /** 新增按钮操作 */
handleAdd() { handleAdd() {
this.reset(); this.$refs.dishesDrawerRef.showDrawer();
listAllIngredient({ type: this.ingType }).then((response) => {
this.open = true;
this.title = "添加菜品";
this.oriDataList = response.rows;
this.ingDataList = this.oriDataList.map((obj) => ({
key: obj.id,
label: obj.name,
}));
});
}, },
/** 修改按钮操作 */ /** 修改按钮操作 */
handleUpdate(row) { handleUpdate(row) {
this.reset(); this.$refs.dishesDrawerRef.showDrawer(row.id);
const id = row.id || this.ids;
getDishes(id).then((response) => {
this.form = response.data;
this.form.dishClass = [this.form.bigClass, this.form.smallClass];
this.form.type = this.form.type ? this.form.type.split(",") : null;
this.form.igdList.forEach((obj) => {
this.selIngIds.push(obj.id);
this.selIngList.push({
key: obj.id,
label: obj.name,
});
this.selTableData.push(obj);
if (obj.rec) {
obj.rec.split(",").forEach((rec) => {
if (!this.selRec.includes(rec)) {
this.selRec.push(rec);
}
});
}
if (obj.notRec) {
obj.notRec.split(",").forEach((notRec) => {
if (!this.selNotRec.includes(notRec)) {
this.selNotRec.push(notRec);
}
});
}
});
listAllIngredient({ type: this.ingType }).then((res) => {
this.open = true;
this.title = "修改菜品";
this.oriDataList = res.rows.concat(this.form.igdList);
this.ingDataList = this.oriDataList.reduce((arr, cur) => {
if (!arr.some(({ key }) => key === cur.id)) {
arr.push({
key: cur.id,
label: cur.name,
});
}
return arr;
}, []);
});
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate((valid) => {
if (valid) {
if (!this.selTableData.length) {
this.$message.error("食材不能为空");
return;
}
const data = JSON.parse(JSON.stringify(this.form));
data.igdList = this.selTableData;
data.type = data.type.join(",");
if (data.id != null) {
updateDishes(data).then((response) => {
if (response.code === 200) {
this.msgSuccess("修改成功");
this.open = false;
this.getList();
}
});
} else {
addDishes(data).then((response) => {
if (response.code === 200) {
this.msgSuccess("新增成功");
this.open = false;
this.getList();
}
});
}
}
});
}, },
/** 删除按钮操作 */ /** 删除按钮操作 */
handleDelete(row) { handleDelete(row) {
@ -776,178 +405,8 @@ export default {
}) })
.catch(function () {}); .catch(function () {});
}, },
handleChange(value, direction, movedKeys) {
// console.log({
// oriIgdList: this.oriDataList,
// selIgdList: this.form.igdList,
// ingDataList: this.ingDataList,
// value,
// ingType: this.ingType,
// });
const newTableData = [];
this.selRec = [];
this.selNotRec = [];
this.selIngList = value.map((id) => {
// 搜索table中的数据
let tmpTableObj = this.selTableData.find((obj) => obj.id === id);
if (tmpTableObj) {
newTableData.push(tmpTableObj);
} else {
// 搜索请求的缓存数据
tmpTableObj = this.oriDataList.find((obj) => obj.id === id);
if (tmpTableObj) {
newTableData.push({
...tmpTableObj,
weight: 100,
cusWeight: 1,
cusUnit: 1,
});
}
}
if (tmpTableObj) {
if (tmpTableObj.rec) {
tmpTableObj.rec.split(",").forEach((rec) => {
if (!this.selRec.includes(rec)) {
this.selRec.push(rec);
}
});
}
if (tmpTableObj.notRec) {
tmpTableObj.notRec.split(",").forEach((notRec) => {
if (!this.selNotRec.includes(notRec)) {
this.selNotRec.push(notRec);
}
});
}
}
const tarObj = this.ingDataList.find(({ key }) => key === id);
return tarObj;
});
this.selTableData = newTableData;
},
handleOnTypeChange(value) {
listAllIngredient({ type: value }).then((res) => {
this.oriDataList = res.rows.concat(this.form.igdList);
this.ingDataList = this.oriDataList.reduce((arr, cur) => {
if (!arr.some(({ key }) => key === cur.id)) {
arr.push({
key: cur.id,
label: cur.name,
});
}
return arr;
}, []);
});
},
getSummaries(param) {
const { columns, data } = param;
// console.log(data);
return columns.reduce(
(arr, cur, idx) => {
if (idx > 1) {
if (idx === 6) {
arr[6] = arr[3] * 4 + arr[4] * 9 + arr[5] * 4 + " kcal";
} else {
arr[idx] = data.reduce((acc, dAcc) => {
if (idx === 2) {
return acc + parseFloat(dAcc.weight);
}
return parseFloat(
(
acc +
(dAcc[cur.property] * parseFloat(dAcc.weight)) / 100
).toFixed(1)
);
}, 0);
}
}
return arr;
},
["合计"]
);
},
}, },
}; };
</script> </script>
<style rel="stylesheet/scss" lang="scss"> <style rel="stylesheet/scss" lang="scss">
#el-drawer__title {
& > span:focus {
outline: 0;
}
}
.el-transfer-panel__filter {
margin: 2px;
}
.el-transfer-panel__list.is-filterable {
padding-bottom: 28px;
}
.cus-unit {
display: inline-flex;
.el-input-number--mini {
width: 38px;
}
.el-input-number {
.el-input-number__decrease {
display: none;
}
.el-input-number__increase {
display: none;
}
.el-input {
width: 38px;
}
.el-input .el-input__inner {
padding: 0;
border-radius: 0;
border: unset;
border-bottom: 1px solid #dcdfe6;
}
}
.el-select {
.el-input__suffix {
display: none;
}
.el-input__inner {
padding: 0 4px;
/* border: unset; */
text-align: center;
}
}
}
.weight {
width: 70px;
.el-input .el-input__inner {
padding: 0 32px 0 4px;
}
}
.drawer_content {
height: 100%;
display: flex;
flex-direction: column;
.content_detail {
flex: 1 1 0;
padding: 12px;
overflow: auto;
}
.dialog-footer {
flex: 0 0 45px;
display: inline-flex;
align-items: center;
justify-content: flex-end;
padding: 0 12px;
}
}
</style> </style>

View File

@ -146,6 +146,16 @@
</el-tag> </el-tag>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="图片" align="center" width="100">
<template slot-scope="scope">
<img
width="100"
height="auto"
:src="scope.row.imgList[0] ? scope.row.imgList[0].previewUrl : ''"
:alt="scope.row.imgList[0] ? scope.row.imgList[0].name : ''"
/>
</template>
</el-table-column>
<el-table-column <el-table-column
label="食材名称" label="食材名称"
align="center" align="center"

View File

@ -20,6 +20,16 @@
@click="handleOnViewChange(1)" @click="handleOnViewChange(1)"
/> />
</el-tooltip> </el-tooltip>
<el-tooltip effect="dark" content="质量分析" placement="top">
<em
:class="[
'iconfont',
'icon-canshuiconyouhua-',
{ sel_icon: view === 2 },
]"
@click="handleOnViewChange(2)"
/>
</el-tooltip>
</div> </div>
<div v-if="view === 0" class="table_zone"> <div v-if="view === 0" class="table_zone">
<el-table <el-table
@ -80,21 +90,23 @@ export default {
}, },
}, },
data() { data() {
const nameDict = {
p: "蛋白质",
f: "脂肪",
c: "碳水",
};
const menuDict = {
1: "早餐",
2: "早加餐",
3: "午餐",
4: "午加餐",
5: "晚餐",
6: "晚加餐",
};
return { return {
chart: null, chart: null,
nameDict: { nameDict,
p: "蛋白质", menuDict,
f: "脂肪",
c: "碳水",
},
menuDict: {
1: "早餐",
2: "早加餐",
3: "午餐",
4: "午加餐",
5: "晚餐",
6: "晚加餐",
},
typeDict: { typeDict: {
Weight: "摄入量", Weight: "摄入量",
Rate: "供能比", Rate: "供能比",
@ -122,6 +134,50 @@ export default {
// console.log(mData); // console.log(mData);
return mData; return mData;
}, },
curNameDict() {
switch (this.view) {
case 0:
return this.nameDict;
case 1:
return this.menuDict;
case 2:
return this.menuDict;
}
},
curTitle() {
switch (this.view) {
case 0:
return "营养分析";
case 1:
return "热量分析";
case 2:
return "质量分析";
}
},
curTotalText() {
switch (this.view) {
case 1:
return "总热量约";
case 2:
return "总质量";
}
},
curTotalName() {
switch (this.view) {
case 1:
return "totalHeat";
case 2:
return "totalWeight";
}
},
curUnit() {
switch (this.view) {
case 1:
return "千卡";
case 2:
return "克";
}
},
...mapState(["recipesData"]), ...mapState(["recipesData"]),
}, },
mounted() { mounted() {
@ -144,12 +200,22 @@ export default {
backToAll() { backToAll() {
this.resetCurrentDay({ currentDay: -1 }); this.resetCurrentDay({ currentDay: -1 });
}, },
getDataName(dim) {
switch (this.view) {
case 0:
return `${dim}Heat`;
case 1:
return `heat${dim}`;
case 2:
return `weight${dim}`;
}
},
updateChart(data) { updateChart(data) {
// console.log(data); console.log(data);
this.chart.clear(); this.chart.clear();
const option = { const option = {
title: { title: {
text: !this.view ? "营养分析" : "热量分析", text: this.curTitle,
subtext: data.name, subtext: data.name,
}, },
tooltip: { tooltip: {
@ -170,80 +236,84 @@ export default {
`摄入热量:${value.toFixed(1)}千卡`, `摄入热量:${value.toFixed(1)}千卡`,
`供能比:${percent}%`, `供能比:${percent}%`,
].join("</br>") ].join("</br>")
: [ : this.view === 1
? [
`${marker} ${name}`, `${marker} ${name}`,
`热量:${data[`heat${dim}`].toFixed(1)}千卡`, `热量:${data[`heat${dim}`].toFixed(1)}千卡`,
`供能比:${percent}%`, `供能比:${percent}%`,
].join("</br>")
: [
`${marker} ${name}`,
`质量:${data[`weight${dim}`].toFixed(1)}`,
`占比:${percent}%`,
].join("</br>"); ].join("</br>");
}, },
}, },
graphic: graphic: !this.view
this.view === 1 ? []
? [ : [
{ {
type: "group", type: "group",
top: 60, top: 60,
left: 10, left: 10,
silent: true, silent: true,
children: [ children: [
{ {
type: "text",
style: {
text: this.curTotalText,
fill: "#606266",
},
},
{
type: "text",
top: 18,
left: 8,
style: {
text: `${
data[`${this.curTotalName}`]
? data[`${this.curTotalName}`].toFixed(1)
: 0
} ${this.curUnit}`,
font: '14px "Microsoft YaHei", sans-serif',
},
},
],
},
{
type: "group",
top: 36,
right: 10,
silent: true,
children: Object.keys(this.curNameDict).reduce((arr, cur) => {
const tarData = data[this.getDataName(cur)];
if (tarData) {
arr.push({
type: "text", type: "text",
top: arr.length * 20,
right: 10,
style: { style: {
text: "总热量约", text: `${this.curNameDict[cur]}${tarData.toFixed(1)}`,
fill: "#606266", fill: "#606266",
}, },
}, });
{ }
type: "text", return arr;
top: 18, }, []),
left: 8, },
style: { ],
text: `${
data.totalHeat ? data.totalHeat.toFixed(1) : 0
}千卡`,
font: '14px "Microsoft YaHei", sans-serif',
},
},
],
},
{
type: "group",
top: 36,
right: 10,
silent: true,
children: Object.keys(this.menuDict).reduce((arr, cur) => {
const tarData = data[`heat${cur}`];
if (tarData) {
arr.push({
type: "text",
top: arr.length * 20,
right: 10,
style: {
text: `${this.menuDict[cur]}${tarData.toFixed(1)}`,
fill: "#606266",
},
});
}
return arr;
}, []),
},
]
: [],
series: [ series: [
{ {
name: data.name, name: data.name,
type: "pie", type: "pie",
radius: [0, !this.view ? 40 : 60], radius: [0, !this.view ? 40 : 60],
center: ["50%", "55%"], center: ["50%", "55%"],
data: (!this.view data: Object.keys(this.curNameDict).reduce((arr, dim) => {
? Object.keys(this.nameDict)
: Object.keys(this.menuDict)
).reduce((arr, dim) => {
if (!this.view || data[`heat${dim}`]) { if (!this.view || data[`heat${dim}`]) {
arr.push({ arr.push({
dim, dim,
value: !this.view ? data[`${dim}Heat`] : data[`heat${dim}`], value: data[this.getDataName(dim)],
name: (!this.view ? this.nameDict : this.menuDict)[dim], name: this.curNameDict[dim],
oriData: data, oriData: data,
}); });
} }

View File

@ -0,0 +1,147 @@
<template>
<div class="ingredient_search_com_wrapper">
<section class="header">
<el-input
v-model="keyword"
size="mini"
class="search"
placeholder="请输入食材"
clearable
@keydown.enter.native="handleOnSearch"
/>
<el-button
size="mini"
type="primary"
class="search_btn"
@click="handleOnSearch"
>
搜索
</el-button>
</section>
<section class="content">
<el-popover
v-for="item in searchResults"
:key="item.name"
:title="item.name"
placement="top"
trigger="hover"
>
<el-button
type="text"
v-for="dData in item.data"
:key="dData.day"
@click="handleOnDayClick(item, dData.num)"
>{{ `${dData.day}` }}</el-button
>
<span
slot="reference"
:class="`item ${selectedIgd === item.id ? 'selected_item' : ''} `"
@click="handleOnIgdClick(item)"
>{{ item.name }}
</span>
</el-popover>
</section>
</div>
</template>
<script>
import { createNamespacedHelpers } from "vuex";
const { mapGetters } = createNamespacedHelpers("recipes");
export default {
name: "IngredientSearchCom",
data() {
return {
keyword: "",
searchResults: [],
};
},
props: ["selectedIgd"],
computed: {
...mapGetters(["igdTypeData"]),
},
methods: {
handleOnSearch() {
if (!this.keyword) {
return;
}
this.searchResults = this.igdTypeData.reduce((arr, igd) => {
if (igd.name.includes(this.keyword)) {
arr.push(igd);
}
return arr;
}, []);
// console.log(this.searchResults);
},
handleOnDayClick(data, numDay) {
const { name, id } = data;
this.$emit("onDayClick", { name, id, numDay });
},
handleOnIgdClick(data) {
const { name, id } = data;
this.$emit("onClick", { name, id });
},
reset() {
this.keyword = "";
this.searchResults = [];
},
},
};
</script>
<style lang="scss" scoped>
/deep/ :focus {
outline: 0;
}
.ingredient_search_com_wrapper {
.header {
display: flex;
align-items: center;
padding: 4px;
.label {
width: 38px;
}
.search {
flex: 1;
}
.search_btn {
margin-left: 4px;
}
}
.content {
margin: 8px 0;
.title {
font-size: 14px;
color: #8c8c8c;
padding: 4px 0;
}
.item {
font-size: 14px;
margin: 4px;
border-radius: 8px;
cursor: pointer;
display: inline-block;
color: #262626;
border: 1px solid #8c8c8c;
padding: 3px 8px;
word-break: normal;
transition: all 0.3s;
&:hover {
color: white;
background: #d96969;
border-color: #d96969;
}
}
.selected_item {
color: white;
background: #d96969;
border-color: #d96969;
font-weight: bold;
}
}
}
</style>

View File

@ -0,0 +1,132 @@
<template>
<div class="physical_sign_com_wrapper">
<section class="content">
<span
v-for="item in verifyNotRecData"
:key="item.name"
:class="`item ${
selectedNotRecName === item.name ? 'selected_item' : ''
} `"
@click="handleOnNameClick(item)"
>{{ item.name }}
</span>
<div class="divider" v-if="!!igdDatas.length" />
<el-popover
v-for="item in igdDatas"
:key="item.name"
:title="item.name"
placement="top"
trigger="hover"
>
<el-button
type="text"
v-for="dData in item.data"
:key="dData.day"
@click="handleOnDayClick(item, dData.num)"
>{{ `${dData.day}` }}</el-button
>
<span
slot="reference"
:class="`item ${selectedIgd === item.id ? 'selected_item' : ''} `"
@click="handleOnIgdClick(item)"
>{{ item.name }}
</span>
</el-popover>
</section>
</div>
</template>
<script>
import { createNamespacedHelpers } from "vuex";
const { mapGetters } = createNamespacedHelpers("recipes");
export default {
name: "PhysicalSignCom",
data() {
return {
selectedNotRecName: "",
igdDatas: [],
};
},
props: ["selectedIgd"],
computed: {
...mapGetters(["verifyNotRecData"]),
},
methods: {
handleOnNameClick(obj) {
const { name, data } = obj;
if (this.selectedNotRecName === name) {
this.selectedNotRecName = "";
this.igdDatas = [];
} else {
this.selectedNotRecName = name;
this.igdDatas = data;
}
},
handleOnDayClick(data, numDay) {
const { name, id } = data;
this.$emit("onDayClick", { name, id, numDay });
},
handleOnIgdClick(data) {
const { name, id } = data;
this.$emit("onClick", { name, id });
},
reset() {
this.selectedNotRecName = "";
this.igdDatas = [];
},
},
};
</script>
<style lang="scss" scoped>
/deep/ :focus {
outline: 0;
}
.physical_sign_com_wrapper {
.header {
display: flex;
align-items: center;
padding: 4px;
}
.content {
margin: 8px 0;
.title {
font-size: 14px;
color: #8c8c8c;
padding: 4px 0;
}
.divider {
border-bottom: 1px solid #e6ebf5;
margin: 12px 0;
}
.item {
font-size: 14px;
margin: 4px;
border-radius: 8px;
cursor: pointer;
display: inline-block;
color: #262626;
border: 1px solid #8c8c8c;
padding: 3px 8px;
word-break: normal;
transition: all 0.3s;
&:hover {
color: white;
background: #d96969;
border-color: #d96969;
}
}
.selected_item {
color: white;
background: #d96969;
border-color: #d96969;
font-weight: bold;
}
}
}
</style>

View File

@ -1,33 +1,29 @@
<template> <template>
<div class="verify_view_wrapper"> <div class="verify_view_wrapper">
<div>病理忌口</div> <el-tabs
<div class="content"> v-model="activeName"
<span @tab-click="handleOnTabClick"
:class="`item ${ :style="{ 'margin-right': '16px' }"
selectedNotRec.includes(item.name) ? 'selected_item' : '' >
} `" <el-tab-pane label="病理忌口" name="0">
v-for="item in verifyNotRecData" <PhysicalSignCom
:key="item.name" :selectedIgd.sync="selectedIgd"
@click="handleOnClick(item)" @onDayClick="handleOnDayClick"
>{{ item.name }}</span @onClick="handleOnClick"
> />
</div> </el-tab-pane>
<div style="margin: 24px 0 8px 0">涉及食材</div> <el-tab-pane label="食材忌口" name="1">
<div v-for="key in Object.keys(igdTypeDetial).reverse()" :key="key"> <IngredientSearchCom
<div style="font-size: 14px; color: #8c8c8c">{{ igdTypeDict[key] }}</div> :selectedIgd.sync="selectedIgd"
<div class="content"> @onDayClick="handleOnDayClick"
<span @onClick="handleOnClick"
:class="`item ${selectedIgd === item.id ? 'selected_item' : ''} `" />
v-for="item in igdTypeDetial[key]" </el-tab-pane>
:key="item.id" </el-tabs>
@click="handleOnIgdClick(item)"
>{{ item.name }}
</span>
</div>
</div>
</div> </div>
</template> </template>
<script> <script>
import VueScrollTo from "vue-scrollto";
import { createNamespacedHelpers } from "vuex"; import { createNamespacedHelpers } from "vuex";
const { const {
mapActions, mapActions,
@ -35,63 +31,43 @@ const {
mapGetters, mapGetters,
mapMutations, mapMutations,
} = createNamespacedHelpers("recipes"); } = createNamespacedHelpers("recipes");
import IngredientSearchCom from "./IngredientSearchCom";
import PhysicalSignCom from "./PhysicalSignCom";
export default { export default {
name: "VerifyView", name: "VerifyView",
data() { data() {
return { return {
selectedNotRec: [], activeName: "0",
selectedIgd: 0, selectedIgd: 0,
}; };
}, },
components: { IngredientSearchCom, PhysicalSignCom },
computed: { computed: {
...mapGetters(["verifyNotRecData", "igdTypeDict", "igdTypeDetial"]), ...mapGetters(["verifyNotRecData"]),
}, },
methods: { methods: {
handleOnClick(data) { handleOnTabClick(tab) {
if (this.selectedIgd !== 0) { this.activeName = tab.name;
this.selectedIgd = 0;
this.setNotRecIgds({ data: [] });
}
if (this.selectedNotRec.some((str) => data.name === str)) {
this.selectedNotRec = this.selectedNotRec.filter(
(str) => str !== data.name
);
} else {
this.selectedNotRec.push(data.name);
this.selectedNotRec = JSON.parse(JSON.stringify(this.selectedNotRec));
}
const notRecIgds = this.selectedNotRec.reduce((arr, cur) => {
const tarData = this.verifyNotRecData.find((obj) => obj.name === cur);
if (tarData) {
tarData.data.forEach((obj) => {
if (!arr.includes(obj.igdId)) {
arr.push(obj.igdId);
}
});
}
return arr;
}, []);
// console.log({
// data,
// notRecIgds,
// verifyNotRecData: this.verifyNotRecData,
// });
this.setNotRecIgds({ data: notRecIgds });
}, },
handleOnIgdClick(data) { handleOnDayClick(data) {
if (this.selectedNotRec.length > 0) { console.log(data);
this.selectedNotRec = []; const { id, numDay } = data;
this.setNotRecIgds({ data: [] }); if (this.selectedIgd !== id) {
this.selectedIgd = id;
this.setNotRecIgds({ data: [this.selectedIgd] });
} }
this.setCurrentDay({ currentDay: numDay });
VueScrollTo.scrollTo(`#recipes${numDay}`, 500, {
container: "#recipes_content",
});
},
handleOnClick(data) {
this.selectedIgd = data.id === this.selectedIgd ? 0 : data.id; this.selectedIgd = data.id === this.selectedIgd ? 0 : data.id;
this.setNotRecIgds({ data: [this.selectedIgd] }); this.setNotRecIgds({ data: [this.selectedIgd] });
}, },
...mapMutations(["setNotRecIgds"]),
...mapMutations(["setNotRecIgds", "setCurrentDay"]),
}, },
}; };
</script> </script>
@ -99,33 +75,5 @@ export default {
.verify_view_wrapper { .verify_view_wrapper {
height: calc(100vh - 32px); height: calc(100vh - 32px);
overflow: auto; overflow: auto;
.content {
margin: 8px 0;
.item {
font-size: 14px;
margin: 4px;
border-radius: 8px;
cursor: pointer;
display: inline-block;
color: #262626;
border: 1px solid #8c8c8c;
padding: 3px 8px;
word-break: normal;
transition: all 0.3s;
&:hover {
color: white;
background: #d96969;
border-color: #d96969;
}
}
.selected_item {
color: white;
background: #d96969;
border-color: #d96969;
font-weight: bold;
}
}
} }
</style> </style>