Song/xkrs_ms
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

优化校验逻辑

Browse Source
This commit is contained in:
huangdeliang 2021-03-20 19:31:00 +08:00
parent 21fac2ae86
commit 180f994141
6 changed files with 703 additions and 371 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
stdiet-ui/public/index.html
View File

@ -1,12 +1,18 @@
<!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,
@ -42,7 +48,7 @@
margin: -75px 0 0 -75px; margin: -75px 0 0 -75px;
border-radius: 50%; border-radius: 50%;
border: 3px solid transparent; border: 3px solid transparent;
border-top-color: #FFF; border-top-color: #fff;
-webkit-animation: spin 2s linear infinite; -webkit-animation: spin 2s linear infinite;
-ms-animation: spin 2s linear infinite; -ms-animation: spin 2s linear infinite;
-moz-animation: spin 2s linear infinite; -moz-animation: spin 2s linear infinite;
@ -60,7 +66,7 @@
bottom: 5px; bottom: 5px;
border-radius: 50%; border-radius: 50%;
border: 3px solid transparent; border: 3px solid transparent;
border-top-color: #FFF; border-top-color: #fff;
-webkit-animation: spin 3s linear infinite; -webkit-animation: spin 3s linear infinite;
-moz-animation: spin 3s linear infinite; -moz-animation: spin 3s linear infinite;
-o-animation: spin 3s linear infinite; -o-animation: spin 3s linear infinite;
@ -77,7 +83,7 @@
bottom: 15px; bottom: 15px;
border-radius: 50%; border-radius: 50%;
border: 3px solid transparent; border: 3px solid transparent;
border-top-color: #FFF; border-top-color: #fff;
-moz-animation: spin 1.5s linear infinite; -moz-animation: spin 1.5s linear infinite;
-o-animation: spin 1.5s linear infinite; -o-animation: spin 1.5s linear infinite;
-ms-animation: spin 1.5s linear infinite; -ms-animation: spin 1.5s linear infinite;
@ -85,7 +91,6 @@
animation: spin 1.5s linear infinite; animation: spin 1.5s linear infinite;
} }
@-webkit-keyframes spin { @-webkit-keyframes spin {
0% { 0% {
-webkit-transform: rotate(0deg); -webkit-transform: rotate(0deg);
@ -112,13 +117,12 @@
} }
} }
#loader-wrapper .loader-section { #loader-wrapper .loader-section {
position: fixed; position: fixed;
top: 0; top: 0;
width: 51%; width: 51%;
height: 100%; height: 100%;
background: #7171C6; background: #7171c6;
z-index: 1000; z-index: 1000;
-webkit-transform: translateX(0); -webkit-transform: translateX(0);
-ms-transform: translateX(0); -ms-transform: translateX(0);
@ -133,21 +137,20 @@
right: 0; right: 0;
} }
.loaded #loader-wrapper .loader-section.section-left { .loaded #loader-wrapper .loader-section.section-left {
-webkit-transform: translateX(-100%); -webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%); -ms-transform: translateX(-100%);
transform: translateX(-100%); transform: translateX(-100%);
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); -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.000); transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
} }
.loaded #loader-wrapper .loader-section.section-right { .loaded #loader-wrapper .loader-section.section-right {
-webkit-transform: translateX(100%); -webkit-transform: translateX(100%);
-ms-transform: translateX(100%); -ms-transform: translateX(100%);
transform: translateX(100%); transform: translateX(100%);
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); -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.000); transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
} }
.loaded #loader { .loaded #loader {
@ -174,8 +177,8 @@
} }
#loader-wrapper .load_title { #loader-wrapper .load_title {
font-family: 'Open Sans'; font-family: "Open Sans";
color: #FFF; color: #fff;
font-size: 19px; font-size: 19px;
width: 100%; width: 100%;
text-align: center; text-align: center;
@ -190,7 +193,7 @@
font-weight: normal; font-weight: normal;
font-style: italic; font-style: italic;
font-size: 13px; font-size: 13px;
color: #FFF; color: #fff;
opacity: 0.5; opacity: 0.5;
} }
</style> </style>

84
stdiet-ui/src/store/modules/recipes.js
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 { } else {
tarObj = { tarObj.data.push({
name: iObj.name,
id: iObj.id,
data: [{ num: dayIdx, day: cur.numDay }]
});
}
} else {
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;

122
stdiet-ui/src/views/custom/recipesBuild/InfoView/PieChart/index.vue
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() {
return { const nameDict = {
chart: null,
nameDict: {
p: "蛋白质", p: "蛋白质",
f: "脂肪", f: "脂肪",
c: "碳水", c: "碳水",
}, };
menuDict: { const menuDict = {
1: "早餐", 1: "早餐",
2: "早加餐", 2: "早加餐",
3: "午餐", 3: "午餐",
4: "午加餐", 4: "午加餐",
5: "晚餐", 5: "晚餐",
6: "晚加餐", 6: "晚加餐",
}, };
return {
chart: null,
nameDict,
menuDict,
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,16 +236,22 @@ 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,
@ -189,7 +261,7 @@ export default {
{ {
type: "text", type: "text",
style: { style: {
text: "总热量约", text: this.curTotalText,
fill: "#606266", fill: "#606266",
}, },
}, },
@ -199,8 +271,10 @@ export default {
left: 8, left: 8,
style: { style: {
text: `${ text: `${
data.totalHeat ? data.totalHeat.toFixed(1) : 0 data[`${this.curTotalName}`]
}千卡`, ? data[`${this.curTotalName}`].toFixed(1)
: 0
} ${this.curUnit}`,
font: '14px "Microsoft YaHei", sans-serif', font: '14px "Microsoft YaHei", sans-serif',
}, },
}, },
@ -211,15 +285,15 @@ export default {
top: 36, top: 36,
right: 10, right: 10,
silent: true, silent: true,
children: Object.keys(this.menuDict).reduce((arr, cur) => { children: Object.keys(this.curNameDict).reduce((arr, cur) => {
const tarData = data[`heat${cur}`]; const tarData = data[this.getDataName(cur)];
if (tarData) { if (tarData) {
arr.push({ arr.push({
type: "text", type: "text",
top: arr.length * 20, top: arr.length * 20,
right: 10, right: 10,
style: { style: {
text: `${this.menuDict[cur]}：${tarData.toFixed(1)}`, text: `${this.curNameDict[cur]}：${tarData.toFixed(1)}`,
fill: "#606266", fill: "#606266",
}, },
}); });
@ -227,23 +301,19 @@ export default {
return arr; 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,
}); });
} }

147
stdiet-ui/src/views/custom/recipesBuild/VerifyView/IngredientSearchCom/index.vue Normal file
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>

132
stdiet-ui/src/views/custom/recipesBuild/VerifyView/PhysicalSignCom/index.vue Normal file
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>

134
stdiet-ui/src/views/custom/recipesBuild/VerifyView/index.vue
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' : ''
} `"
v-for="item in verifyNotRecData"
:key="item.name"
@click="handleOnClick(item)"
>{{ item.name }}</span
> >
</div> <el-tab-pane label="病理忌口" name="0">
<div style="margin: 24px 0 8px 0">涉及食材</div> <PhysicalSignCom
<div v-for="key in Object.keys(igdTypeDetial).reverse()" :key="key"> :selectedIgd.sync="selectedIgd"
<div style="font-size: 14px; color: #8c8c8c">{{ igdTypeDict[key] }}</div> @onDayClick="handleOnDayClick"
<div class="content"> @onClick="handleOnClick"
<span />
:class="`item ${selectedIgd === item.id ? 'selected_item' : ''} `" </el-tab-pane>
v-for="item in igdTypeDetial[key]" <el-tab-pane label="食材忌口" name="1">
:key="item.id" <IngredientSearchCom
@click="handleOnIgdClick(item)" :selectedIgd.sync="selectedIgd"
>{{ item.name }} @onDayClick="handleOnDayClick"
</span> @onClick="handleOnClick"
</div> />
</div> </el-tab-pane>
</el-tabs>
</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>