食谱制作状态

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

@@ -37,37 +37,43 @@
             />
           </el-select>
         </span>
-        <el-button size="mini" v-if="!recipesId" @click="handleOnBack"
-          >返回</el-button
-        >
+        <el-button size="mini" v-if="!recipesId" @click="handleOnBack">
+          返回
+        </el-button>
         <el-popover
           placement="bottom"
           trigger="click"
-          title="修改审核状态"
+          title="修改食谱状态"
           style="margin-right: 12px"
-          v-hasPermi="['recipes:plan:review']"
         >
           <div>
             <el-button
               size="mini"
               type="success"
+              v-hasPermi="['recipes:plan:review']"
               @click="hanldeOnReveiwChange(2)"
-              >审核通过</el-button
+              >已审核</el-button
             >
             <el-button
               size="mini"
               type="danger"
               @click="hanldeOnReveiwChange(1)"
-              >未审核通过</el-button
+              >未审核</el-button
+            >
+            <el-button
+              size="mini"
+              type="primary"
+              @click="hanldeOnReveiwChange(3)"
+              >制作中</el-button
             >
           </div>
           <el-button
             slot="reference"
             size="mini"
-            v-if="reviewStatus"
-            :type="reviewStatus === 1 ? 'danger' : 'success'"
+            v-if="!!recipesId"
+            :type="getReviewType(reviewStatus)"
           >
-            {{ reviewStatus === 1 ? "未审核" : "已审核" }}
+            {{ getReviewStatusName(reviewStatus) }}
           </el-button>
         </el-popover>
         <el-button
@@ -157,6 +163,32 @@ export default {
         }
       });
     },
+    getReviewStatusName(status) {
+      switch (status) {
+        case 1:
+          return "未审核";
+        case 2:
+          return "已审核";
+        case 3:
+          return "制作中";
+        case 0:
+        default:
+          return "未制作";
+      }
+    },
+    getReviewType(status) {
+      switch (status) {
+        case 1:
+          return "danger";
+        case 2:
+          return "success";
+        case 3:
+          return "primary";
+        case 0:
+        default:
+          return "info";
+      }
+    },
     ...mapActions(["saveRecipes", "updateReviewStatus"]),
     ...mapMutations(["updateStateData", "updateFontSize", "toggleLeftShow"]),
   },

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

@@ -3,10 +3,12 @@
     <div>忌口</div>
     <div class="content">
       <span
-        class="item"
+        :class="`item ${
+          selectedNotRec.includes(item.name) ? 'selected_item' : ''
+        } `"
         v-for="item in verifyNotRecData"
         :key="item.name"
-        @click="handleOnClick(item.data)"
+        @click="handleOnClick(item)"
         >{{ item.name }}</span
       >
     </div>
@@ -18,14 +20,38 @@ const { mapActions, mapState, mapGetters } = createNamespacedHelpers("recipes");
 export default {
   name: "VerifyView",
   data() {
-    return {};
+    return {
+      selectedNotRec: [],
+    };
   },
   computed: {
     ...mapGetters(["verifyNotRecData"]),
   },
   methods: {
     handleOnClick(data) {
-      console.log({ data, verifyNotRecData: this.verifyNotRecData });
+      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) => {
+        this.verifyNotRecData[cur].data.forEach((obj) => {
+          if (!arr.includes(obj.igdId)) {
+            arr.push(obj.igdId);
+          }
+        });
+        return arr;
+      }, []);
+
+      console.log({
+        data,
+        notRecIgds,
+        verifyNotRecData: this.verifyNotRecData,
+      });
     },
   },
 };
@@ -44,12 +70,21 @@ export default {
       border: 1px solid #8c8c8c;
       padding: 3px 8px;
       word-break: normal;
+      transition: all 0.3s;
 
       &:hover {
-        color: #d96969;
+        color: white;
+        background: #d96969;
         border-color: #d96969;
       }
     }
+
+    .selected_item {
+      color: white;
+      background: #d96969;
+      border-color: #d96969;
+      font-weight: bold;
+    }
   }
 }
 </style>