删除未审核的食谱计划

stdiet-ui/src/views/custom/recipesBuild/InfoView/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="recipes_build_info_view_wrapper">
-    <div class="top" v-if="!!recipesData.length">
+    <div class="top" v-if="showChart">
       <BarChart
         v-if="analyseData.length > 1"
         :data="analyseData"
@@ -15,7 +15,10 @@
         width="100%"
       />
     </div>
-    <div class="content">
+    <div
+      class="content"
+      :style="`height: calc(100vh - ${showChart ? 192 : 32}px);`"
+    >
       <TemplateInfoView v-if="!!temId" :data="templateInfo" />
       <HealthyView :data="healthyData" v-else-if="healthyDataType === 0" dev />
       <BodySignView :data="healthyData" v-else dev />
@@ -24,11 +27,7 @@
 </template>
 <script>
 import { createNamespacedHelpers } from "vuex";
-const {
-  mapActions,
-  mapState,
-  mapGetters,
-} = createNamespacedHelpers("recipes");
+const { mapActions, mapState, mapGetters } = createNamespacedHelpers("recipes");
 import BarChart from "./BarChart";
 import PieChart from "./PieChart";
 import TemplateInfoView from "./TemplateInfoView";
@@ -54,6 +53,9 @@ export default {
         ? parseFloat(basicBMR.substring(0, basicBMR.indexOf("千卡")))
         : 0;
     },
+    showChart() {
+      return !!this.recipesData.length;
+    },
     ...mapState([
       "recipesData",
       "healthyData",
@@ -72,7 +74,6 @@ export default {
 
   .content {
     overflow: auto;
-    height: calc(100vh - 192px);
   }
 }
 </style>

stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesHeaderCom/index.vue

@@ -2,7 +2,12 @@
   <div class="recipes_header_com_wrapper">
     <div class="header_btns" v-loading="loading">
       <section style="display: flex; align-items: center">
-        <em class="el-icon-s-unfold collapse_btn" />
+        <em
+          :class="`${
+            leftShow ? 'el-icon-s-fold' : 'el-icon-s-unfold'
+          } collapse_btn`"
+          @click="toggleLeftShow"
+        />
         <div>食谱制作</div>
         <el-button
           size="mini"
@@ -88,8 +93,6 @@ import TemplateDialog from "@/components/TemplateDialog";
 export default {
   name: "RecipesHeaderCom",
   components: {
-    // BarChart,
-    // PieChart,
     TemplateDialog,
   },
   data() {
@@ -108,7 +111,7 @@ export default {
   },
   updated() {},
   computed: {
-    ...mapState(["recipesId", "reviewStatus", "fontSize"]),
+    ...mapState(["recipesId", "reviewStatus", "fontSize", "leftShow"]),
   },
   watch: {},
   methods: {
@@ -155,7 +158,7 @@ export default {
       });
     },
     ...mapActions(["saveRecipes", "updateReviewStatus"]),
-    ...mapMutations(["updateStateData", "updateFontSize"]),
+    ...mapMutations(["updateStateData", "updateFontSize", "toggleLeftShow"]),
   },
 };
 </script>
@@ -168,7 +171,9 @@ export default {
     padding-bottom: 8px;
 
     .collapse_btn {
-
+      font-size: 18px;
+      padding: 4px;
+      cursor: pointer;
     }
   }
 

stdiet-ui/src/views/custom/recipesBuild/VerifyView/index.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="verify_view_wrapper">
+    <div>忌口</div>
+    <div class="content">
+      <span
+        class="item"
+        v-for="item in verifyNotRecData"
+        :key="item.name"
+        @click="handleOnClick(item.data)"
+        >{{ item.name }}</span
+      >
+    </div>
+  </div>
+</template>
+<script>
+import { createNamespacedHelpers } from "vuex";
+const { mapActions, mapState, mapGetters } = createNamespacedHelpers("recipes");
+export default {
+  name: "VerifyView",
+  data() {
+    return {};
+  },
+  computed: {
+    ...mapGetters(["verifyNotRecData"]),
+  },
+  methods: {
+    handleOnClick(data) {
+      console.log({ data, verifyNotRecData: this.verifyNotRecData });
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.verify_view_wrapper {
+  .content {
+    margin-top: 8px;
+    .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;
+
+      &:hover {
+        color: #d96969;
+        border-color: #d96969;
+      }
+    }
+  }
+}
+</style>

stdiet-ui/src/views/custom/recipesBuild/index.vue

@@ -1,6 +1,13 @@
 <template>
   <div class="recipes_build_wrapper" v-title :data-title="name">
-    <div class="left"></div>
+    <div
+      :class="`left ${leftShow ? 'left_show' : ''}`"
+      :style="`width: ${leftShow ? 260 : 0}px`"
+    >
+      <div v-show="leftShow">
+        <VerifyView />
+      </div>
+    </div>
     <div class="content" v-loading="recipesDataLoading">
       <RecipesView
         v-if="!!recipesData.length"
@@ -25,6 +32,7 @@ const {
 import RecipesView from "./RecipesView";
 import RecommendView from "./RecommendView";
 import InfoView from "./InfoView";
+import VerifyView from "./VerifyView";
 
 export default {
   name: "BuildRecipies",
@@ -53,10 +61,12 @@ export default {
     RecipesView,
     RecommendView,
     InfoView,
+    VerifyView,
   },
   props: ["name", "planId"],
   computed: {
     ...mapState([
+      "leftShow",
       "healthyData",
       "recipesData",
       "recipesDataLoading",
@@ -74,19 +84,27 @@ export default {
   padding: 16px;
   display: flex;
   height: 100vh;
+
   .left {
+    // transition: all 0.5s;
   }
+
+  .left_show {
+    margin-right: 16px;
+    border-right: 1px solid #e6ebf5;
+  }
+
   .content {
-    flex: 4;
+    flex: 1;
     border-right: 1px solid #e6ebf5;
     height: 100%;
     overflow: hidden;
-    padding-right: 20px;
+    padding-right: 16px;
   }
   .right {
-    flex: 1;
+    width: 380px;
     height: 100%;
-    padding-left: 20px;
+    padding-left: 16px;
   }
 }
 </style>