增加备注信息

stdiet-admin/src/main/java/com/stdiet/web/controller/custom/SysDishesController.java

@@ -1,5 +1,6 @@
 package com.stdiet.web.controller.custom;
 
+import com.alibaba.fastjson.JSONObject;
 import com.stdiet.common.annotation.Log;
 import com.stdiet.common.core.controller.BaseController;
 import com.stdiet.common.core.domain.AjaxResult;
@@ -9,13 +10,11 @@ import com.stdiet.common.utils.StringUtils;
 import com.stdiet.common.utils.poi.ExcelUtil;
 import com.stdiet.custom.domain.SysDishes;
 import com.stdiet.custom.domain.SysDishesIngredient;
-import com.stdiet.custom.domain.SysIngredient;
 import com.stdiet.custom.service.ISysDishesService;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.security.access.prepost.PreAuthorize;
 import org.springframework.web.bind.annotation.*;
 
-import java.lang.reflect.Array;
 import java.util.ArrayList;
 import java.util.List;
 
@@ -71,6 +70,19 @@ public class SysDishesController extends BaseController {
         return AjaxResult.success(sysDishesService.selectSysDishesById(id));
     }
 
+    /**
+     * 查看菜品可选餐类
+     *
+     * @param id
+     * @return
+     */
+    @GetMapping(value = "/menuTypes/{id}")
+    public AjaxResult getMenuTypes(@PathVariable("id") Long id) {
+        JSONObject object = new JSONObject();
+        object.put("type", sysDishesService.getDishesMenuTypeById(id));
+        return AjaxResult.success(object);
+    }
+
     /**
      * 新增菜品
      */

stdiet-custom/src/main/java/com/stdiet/custom/domain/SysRecipesDailyDishes.java

@@ -25,4 +25,6 @@ public class SysRecipesDailyDishes {
     private String type;
 
     private Integer isMain;
+
+    private String remark;
 }

stdiet-custom/src/main/java/com/stdiet/custom/mapper/SysDishesMapper.java

@@ -70,4 +70,6 @@ public interface SysDishesMapper
     public int deleteIngredientByIds(Long[] ids);
 
     public int bashInsertDishesIngredent(List<SysDishesIngredient> sysDishesIngredients);
+
+    String getDishesMenuTypeById(Long id);
 }

stdiet-custom/src/main/java/com/stdiet/custom/service/ISysDishesService.java

@@ -62,4 +62,6 @@ public interface ISysDishesService
      * @return 结果
      */
     public int deleteSysDishesById(Long id);
+
+    public String getDishesMenuTypeById(Long id);
 }

stdiet-custom/src/main/java/com/stdiet/custom/service/impl/SysDishesServiceImpl.java

@@ -124,4 +124,9 @@ public class SysDishesServiceImpl implements ISysDishesService {
         sysDishesMapper.deleteIngredientById(id);
         return sysDishesMapper.deleteSysDishesById(id);
     }
+
+    @Override
+    public String getDishesMenuTypeById(Long id) {
+        return sysDishesMapper.getDishesMenuTypeById(id);
+    }
 }

stdiet-custom/src/main/resources/mapper/custom/SysDishesMapper.xml

@@ -155,4 +155,8 @@
         </foreach>
     </insert>
 
+    <select id="getDishesMenuTypeById" parameterType="Long" resultType="String">
+        select type from sys_dishes where id=#{id}
+    </select>
+
 </mapper>

stdiet-custom/src/main/resources/mapper/custom/SysRecipesMapper.xml

@@ -22,6 +22,7 @@
         <result property="name" column="name"/>
         <result property="type" column="type"/>
         <result property="methods" column="methods"/>
+        <result property="remark" column="remark"/>
         <result property="isMain" column="is_main"/>
         <result property="detail" column="detail" typeHandler="com.stdiet.custom.typehandler.ArrayJsonHandler"
                 javaType="com.stdiet.custom.domain.SysDishesIngredient"/>
@@ -86,6 +87,7 @@
             <if test="dishesId != null">dishes_id = #{dishesId},</if>
             <if test="type != null">type = #{type},</if>
             <if test="detail != null">detail = #{detail, jdbcType=OTHER, typeHandler=com.stdiet.custom.typehandler.ArrayJsonHandler},</if>
+            <if test="remark != null">remark = #{remark},</if>
         </trim>
         where id = #{id}
     </update>
@@ -98,12 +100,14 @@
             <if test="dishesId != null">dishes_id,</if>
             <if test="type != null">type,</if>
             <if test="detail != null">detail,</if>
+            <if test="remark != null">remark,</if>
         </trim>
         <trim prefix="values (" suffix=")" suffixOverrides=",">
             <if test="menuId != null">#{menuId},</if>
             <if test="dishesId != null">#{dishesId},</if>
             <if test="type != null">#{type},</if>
             <if test="detail != null">#{detail, jdbcType=OTHER, typeHandler=com.stdiet.custom.typehandler.ArrayJsonHandler},</if>
+            <if test="remark != null">#{remark},</if>
         </trim>
     </insert>
 
@@ -138,9 +142,9 @@
 
     <!--    新增菜单对应菜品-->
     <insert id="bashAddDishes" >
-        insert into sys_customer_menu_dishes (menu_id, type, dishes_id, detail) values
+        insert into sys_customer_menu_dishes (menu_id, type, dishes_id, remark, detail) values
         <foreach collection="list" separator="," item="item" index="index">
-            (#{item.menuId}, #{item.type}, #{item.dishesId}, #{item.detail, jdbcType=OTHER, typeHandler=com.stdiet.custom.typehandler.ArrayJsonHandler})
+            (#{item.menuId}, #{item.type}, #{item.dishesId}, #{remark}, #{item.detail, jdbcType=OTHER, typeHandler=com.stdiet.custom.typehandler.ArrayJsonHandler})
         </foreach>
     </insert>
 

stdiet-ui/src/api/custom/dishes.js

@@ -17,6 +17,13 @@ export function getDishes(id) {
   })
 }
 
+export function getDishesMenuTypes(id) {
+  return request({
+    url: '/custom/dishes/menuTypes/' + id,
+    method: 'get'
+  })
+}
+
 // 新增菜品
 export function addDishes(data) {
   return request({

stdiet-ui/src/store/modules/recipes.js

@@ -7,6 +7,7 @@ import {
   deleteDishesApi,
   addRecipesApi
 } from "@/api/custom/recipes";
+import { getDishesMenuTypes } from "@/api/custom/dishes";
 import { getRecipesTemplateDetail } from "@/api/custom/recipesTemplate";
 import { getRecipesPlan, updateRecipesPlan } from "@/api/custom/recipesPlan";
 import { getDicts } from "@/api/system/dict/data";
@@ -30,33 +31,38 @@ const oriState = {
   reviewStatus: 0,
   templateInfo: undefined,
   copyData: undefined,
+  canCopyMenuTypes: [],
   fontSize: 12
 };
 
 const mutations = {
   updateRecipesDishesDetail(state, payload) {
-    const tarDishes = state.recipesData[payload.num].dishes.find(
+    const { num, actionType } = payload;
-      obj => obj.id === payload.id
+    const tarDishes = state.recipesData[num].dishes.find(
+      obj =>
+        obj.id === (actionType === "replace" ? payload.data.id : payload.id)
     );
     if (tarDishes) {
-      if (
+      if (actionType === "replace") {
-        payload.dishesId !== tarDishes.dishesId ||
+        // 替换菜品,修改类型
-        payload.type !== undefined
+        Object.keys(payload.data).forEach(key => {
-      ) {
+          tarDishes[key] = payload.data[key];
-        // 替换菜品
-        Object.keys(payload).forEach(key => {
-          if (key === "num") {
-            return;
-          }
-          tarDishes[key] = payload[key];
         });
-      } else {
+      } else if (actionType === "remark") {
+        tarDishes.remark = payload.remark;
+      } else if (actionType === "menuType") {
+        tarDishes.type = payload.type;
+      } else if (actionType === "weight" || actionType === "unit") {
         const tarIgd = tarDishes.igdList.find(obj => obj.id === payload.igdId);
         if (tarIgd) {
           payload.weight && (tarIgd.weight = payload.weight);
           payload.cusWeight && (tarIgd.cusWeight = payload.cusWeight);
           payload.cusUnit && (tarIgd.cusUnit = payload.cusUnit);
         }
+      } else if (actionType === "delIgd") {
+        tarDishes.igdList = tarDishes.igdList.filter(
+          igd => igd.id !== payload.igdId
+        );
       }
     }
   },
@@ -213,6 +219,7 @@ const actions = {
                   name: cur.name,
                   menuId: cur.menuId,
                   methods: cur.methods,
+                  remark: cur.remark,
                   type: cur.type,
                   isMain: cur.isMain,
                   igdList: cur.igdList.reduce((igdArr, igdData) => {
@@ -323,8 +330,9 @@ const actions = {
       commit("addRecipesDishes", payload);
     }
   },
-  async replaceDishes({ commit, state }, payload) {
+  async updateDishes({ commit, state }, payload) {
-    // console.log(payload);
+    const { num, actionType } = payload;
+    if (actionType === "replace") {
       const tarDishesList = state.recipesData[payload.num].dishes.filter(
         obj => obj.type === payload.data.type
       );
@@ -333,68 +341,59 @@ const actions = {
           rej(`目标餐类已有相同的菜品「${payload.data.name}」`)
         );
       }
-    if (state.recipesId) {
-      const tarDishes = state.recipesData[payload.num].dishes.find(
-        obj => obj.id === payload.data.id
-      );
-      if (tarDishes) {
-        const params = {
-          id: tarDishes.id,
-          dishesId: payload.data.dishesId,
-          detail: payload.data.igdList.map(igd => ({
-            id: igd.id,
-            weight: igd.weight,
-            cus_unit: igd.cusUnit,
-            cus_weight: igd.cusWeight
-          }))
-        };
-        // console.log(params);
-        const result = await updateDishesDetailApi(params);
-        if (result.code === 200) {
-          commit("updateRecipesDishesDetail", {
-            num: payload.num,
-            ...payload.data
-          });
     }
-      }
-    } else {
-      commit("updateRecipesDishesDetail", {
-        num: payload.num,
-        ...payload.data
-      });
-    }
-  },
-  async updateDishes({ commit, state }, payload) {
     // console.log(payload);
     if (state.recipesId) {
-      const tarDishes = state.recipesData[payload.num].dishes.find(
+      const tarDishes = state.recipesData[num].dishes.find(
-        obj => obj.id === payload.id
+        obj =>
+          obj.id === (actionType === "replace" ? payload.data.id : payload.id)
       );
       if (tarDishes) {
         const mTarDishes = JSON.parse(JSON.stringify(tarDishes));
-        let params = {
+        const params = {
           id: mTarDishes.id
         };
-        if (payload.type !== undefined) {
+        if (actionType === "menuType") {
           // 修改餐类
           params.type = payload.type;
-        } else {
+        } else if (actionType === "remark") {
-          // 修改食材
+          params.remark = payload.remark;
-          const tarIgd = mTarDishes.igdList.find(
+        } else if (actionType === "replace") {
-            obj => obj.id === payload.igdId
+          params.dishesId = payload.data.dishesId;
-          );
+          params.detail = payload.data.igdList.map(igd => ({
-          if (tarIgd) {
-            payload.weight && (tarIgd.weight = payload.weight);
-            payload.cusWeight && (tarIgd.cusWeight = payload.cusWeight);
-            payload.cusUnit && (tarIgd.cusUnit = payload.cusUnit);
-
-            params.detail = mTarDishes.igdList.map(igd => ({
             id: igd.id,
             weight: igd.weight,
             cus_unit: igd.cusUnit,
             cus_weight: igd.cusWeight
           }));
+        } else if (actionType === "delIgd") {
+          // 删除某食材
+          params.detail = mTarDishes.igdList.reduce((arr, igd) => {
+            if (igd.id !== payload.igdId) {
+              arr.push({
+                id: igd.id,
+                weight: igd.weight,
+                cus_unit: igd.cusUnit,
+                cus_weight: igd.cusWeight
+              });
             }
+            return arr;
+          }, []);
+        } else if (actionType === "unit" || actionType === "weight") {
+          // 修改食材
+          params.detail = mTarDishes.igdList.map(igd => {
+            const isTarIgd = igd.id === payload.igdId;
+            return {
+              id: igd.id,
+              weight: isTarIgd && payload.weight ? payload.weight : igd.weight,
+              cus_unit:
+                isTarIgd && payload.cusUnit ? payload.cusUnit : igd.cusUnit,
+              cus_weight:
+                isTarIgd && payload.cusWeight
+                  ? payload.cusWeight
+                  : igd.cusWeight
+            };
+          });
         }
         const result = await updateDishesDetailApi(params);
         if (result.code === 200) {
@@ -423,17 +422,24 @@ const actions = {
   },
   async deleteMenu({ commit }, payload) {},
   async setCopyData({ commit, state }, payload) {
-    return new Promise((res, rej) => {
+    return new Promise(async (res, rej) => {
       const tarDishes = state.recipesData[payload.num].dishes.find(
         obj => obj.id === payload.id
       );
       if (tarDishes) {
-        commit("updateStateData", { copyData: tarDishes });
+        const response = await getDishesMenuTypes(tarDishes.dishesId);
-
+        if (response.code === 200) {
+          commit("updateStateData", {
+            copyData: tarDishes,
+            canCopyMenuTypes: response.data.type.split(",")
+          });
           res("复制成功");
         } else {
           rej("复制失败");
         }
+      } else {
+        rej("复制失败");
+      }
     });
   }
 };

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

@@ -0,0 +1,49 @@
+<template>
+  <el-dialog title="修改备注" :visible.sync="open" width="480px">
+    <el-input
+      type="textarea"
+      v-model="remark"
+      rows="6"
+      placeholder="请输入备注信息"
+      maxlength="300"
+      show-word-limit
+    />
+    <div slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="onSubmit">确 定</el-button>
+      <el-button @click="onClosed">取 消</el-button>
+    </div>
+  </el-dialog>
+</template>
+<script>
+export default {
+  name: "RemarkDialog",
+  data() {
+    return {
+      value: "",
+      open: false,
+      remark: "",
+      data: undefined,
+    };
+  },
+  methods: {
+    showDialog(data) {
+      this.open = true;
+      this.data = data;
+      this.remark = data.remark || "";
+    },
+    onClosed() {
+      this.open = false;
+      this.data = undefined;
+      this.remark = "";
+    },
+    onSubmit() {
+      this.$emit("onConfirm", {
+        ...this.data,
+        remark: this.remark,
+      });
+      this.data = undefined;
+      this.open = false;
+    },
+  },
+};
+</script>

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

@@ -13,37 +13,38 @@
     >
       <el-table-column prop="type" :width="100" align="center">
         <template slot="header">
-          <el-popover placement="top" trigger="hover" v-if="!!copyData">
+          <div class="pointer_style" @click="handleOnResetCurrentDay">
+            {{ `第${numDay}天` }}
+          </div>
+        </template>
+        <template slot-scope="scope">
+          <el-popover
+            placement="top"
+            trigger="hover"
+            :title="typeFormatter(scope.row)"
+          >
             <div>
-              <el-button size="mini" type="primary" @click="handleOnPaste"
+              <el-button
+                size="mini"
+                type="primary"
+                @click="handleOnMenuTypeClick(scope.row)"
+                >添加
+              </el-button>
+              <el-button
+                size="mini"
+                type="primary"
+                @click="handleOnPaste"
+                v-if="canCopyMenuTypes.includes(scope.row.type)"
                 >粘贴</el-button
               >
             </div>
             <div
               slot="reference"
-              class="num_day"
+              style="font-weight: bold; font-size: 14px; cursor: pointer"
-              @click="handleOnResetCurrentDay"
             >
-              {{ `第${numDay}天` }}
+              {{ typeFormatter(scope.row) }}
             </div>
           </el-popover>
-          <div v-else>
-            {{ `第${numDay}天` }}
-          </div>
-        </template>
-        <template slot-scope="scope">
-          <el-tooltip
-            class="item"
-            effect="dark"
-            :content="`点击添加${typeFormatter(scope.row)}`"
-            placement="top"
-          >
-            <span
-              style="font-weight: bold; font-size: 14px; cursor: pointer"
-              @click="handleOnMenuTypeClick(scope.row)"
-              >{{ typeFormatter(scope.row) }}</span
-            >
-          </el-tooltip>
         </template>
       </el-table-column>
       <el-table-column label="菜品" prop="name" align="center" :width="180">
@@ -54,7 +55,7 @@
             content="点击添加菜品"
             placement="top"
           >
-            <span class="num_day" @click="handleOnAdd">菜品</span>
+            <div class="pointer_style" @click="handleOnAdd">菜品</div>
           </el-tooltip>
         </template>
         <template slot-scope="scope">
@@ -97,16 +98,42 @@
                 >
               </div>
             </div>
-            <span class="num_day" slot="reference">{{ scope.row.name }}</span>
+            <div class="pointer_style" slot="reference">
+              {{ scope.row.name }}
+            </div>
+          </el-popover>
+        </template>
+      </el-table-column>
+      <el-table-column label="食材" prop="igdName" align="center" :width="180">
+        <template slot-scope="scope">
+          <span
+            v-if="
+              scope.row.nameSpan.colspan === 1 &&
+              scope.row.nameSpan.rowspan === 1
+            "
+          >
+            {{ scope.row.igdName }}
+          </span>
+          <el-popover
+            v-else
+            placement="right"
+            trigger="hover"
+            :title="scope.row.igdName"
+          >
+            <el-button
+              type="danger"
+              size="mini"
+              icon="el-icon-delete"
+              class="fun_button"
+              @click="handleOnIgdDelete(scope.row)"
+              >删除</el-button
+            >
+            <div class="pointer_style" slot="reference">
+              {{ scope.row.igdName }}
+            </div>
           </el-popover>
         </template>
       </el-table-column>
-      <el-table-column
-        label="食材"
-        prop="igdName"
-        align="center"
-        :width="180"
-      />
       <el-table-column label="分量估算" :width="80" align="center">
         <template slot-scope="scope">
           <EditableUnit
@@ -131,7 +158,7 @@
         align="center"
       >
         <template slot="header">
-          <div class="num_day">
+          <div class="pointer_style">
             <div>蛋白质</div>
             <div>/100g</div>
           </div>
@@ -144,7 +171,7 @@
         align="center"
       >
         <template slot="header">
-          <div class="num_day">
+          <div class="pointer_style">
             <div>脂肪</div>
             <div>/100g</div>
           </div>
@@ -157,7 +184,7 @@
         align="center"
       >
         <template slot="header">
-          <div class="num_day">
+          <div class="pointer_style">
             <div>碳水</div>
             <div>/100g</div>
           </div>
@@ -171,7 +198,7 @@
         :formatter="nutriFormatter"
       >
         <template slot="header">
-          <div class="num_day">
+          <div class="pointer_style">
             <div>蛋白质</div>
             <div>含量</div>
           </div>
@@ -185,7 +212,7 @@
         :formatter="nutriFormatter"
       >
         <template slot="header">
-          <div class="num_day">
+          <div class="pointer_style">
             <div>脂肪</div>
             <div>含量</div>
           </div>
@@ -199,13 +226,30 @@
         :formatter="nutriFormatter"
       >
         <template slot="header">
-          <div class="num_day">
+          <div class="pointer_style">
             <div>碳水</div>
             <div>含量</div>
           </div>
         </template>
       </el-table-column>
       <el-table-column label="做法" prop="methods" />
+      <el-table-column label="备注" prop="remark">
+        <template slot-scope="scope">
+          <div
+            v-if="!scope.row.remark"
+            class="empty_remark"
+            @click="handleOnEditRemark(scope.row)"
+          >
+            <em class="el-icon-plus" />
+          </div>
+          <span
+            class="pointer_style"
+            @click="handleOnEditRemark(scope.row)"
+            v-else
+            >{{ scope.row.remark }}</span
+          >
+        </template>
+      </el-table-column>
     </el-table>
     <!-- 添加菜品抽屉 -->
     <AddDishesDrawer ref="drawerRef" @onConfirm="handleOnDishesConfirm" />
@@ -214,6 +258,8 @@
       ref="settingDialogRef"
       @onConfirm="handleOnSettingConfirm"
     />
+    <!-- 备注弹窗 -->
+    <RemarkDialog ref="remarkDialogRef" @onConfirm="handleOnRemarkConfirm" />
   </div>
 </template>
 <script>
@@ -230,6 +276,7 @@ import EditableUnit from "./EditableUnit";
 import AddDishesDrawer from "./AddDishesDrawer";
 import DishesSettingDialog from "./DishesSettingDialog";
 import VueScrollTo from "vue-scrollto";
+import RemarkDialog from "./RemarkDialog";
 
 export default {
   name: "RecipesCom",
@@ -257,6 +304,7 @@ export default {
     EditableUnit,
     AddDishesDrawer,
     DishesSettingDialog,
+    RemarkDialog,
   },
   mounted() {
     // console.log(this.data);
@@ -299,10 +347,11 @@ export default {
                     namePos = i;
                   }
                   arr[namePos].nameSpan.rowspan += 1;
-                  arr[namePos].methodsSpan.rowspan += 1;
                 }
               }
 
+              // console.log(cur);
+
               arr.push({
                 id: cur.id,
                 dishesId: cur.dishesId,
@@ -311,6 +360,7 @@ export default {
                 type: cur.type,
                 isMain: cur.isMain,
                 methods: cur.methods,
+                remark: cur.remark,
                 igdId: igd.id,
                 igdName: igd.name,
                 proteinRatio: igd.proteinRatio,
@@ -339,25 +389,17 @@ export default {
                       rowspan: 1,
                       colspan: 1,
                     },
-                methodsSpan: lastNameHit
-                  ? {
-                      rowspan: 0,
-                      colspan: 0,
-                    }
-                  : {
-                      rowspan: 1,
-                      colspan: 1,
-                    },
               });
             });
           }
           return arr;
         }, []);
       // console.log(mData);
+
       return mData;
     },
     ...mapGetters(["typeDict"]),
-    ...mapState(["currentDay", "copyData", "fontSize"]),
+    ...mapState(["currentDay", "copyData", "fontSize", "canCopyMenuTypes"]),
   },
   methods: {
     cellClassName({ row, column, rowIndex, columnIndex }) {
@@ -378,10 +420,12 @@ export default {
     spanMethod({ row, column, rowIndex, columnIndex }) {
       if (columnIndex === 0) {
         return row.typeSpan;
-      } else if (columnIndex === 1) {
+      } else if (
+        columnIndex === 1 ||
+        columnIndex === 11 ||
+        columnIndex === 12
+      ) {
         return row.nameSpan;
-      } else if (columnIndex === 11) {
-        return row.methodsSpan;
       }
     },
     typeFormatter(row) {
@@ -435,17 +479,20 @@ export default {
         dishesId: data.dishesId,
         igdId: data.igdId,
         weight,
+        actionType: "weight",
       });
     },
     handleOnCustomUnitChange(data, { cusWeight, cusUnit }) {
       // console.log({ data, cusWeight, cusUnit });
+      const { id, dishesId, igdId } = data;
       this.updateDishes({
         num: this.num,
-        id: data.id,
+        id,
-        dishesId: data.dishesId,
+        dishesId,
-        igdId: data.igdId,
+        igdId,
         cusWeight,
         cusUnit,
+        actionType: "unit",
       });
     },
     handleOnDishesConfirm({ type, data }) {
@@ -458,9 +505,10 @@ export default {
           this.$message.error(err);
         });
       } else if (type === "replace") {
-        this.replaceDishes({
+        this.updateDishes({
           num: this.num,
           data,
+          actionType: type,
         }).catch((err) => {
           this.$message.error(err);
         });
@@ -474,11 +522,35 @@ export default {
         num: this.num,
         id,
         type,
+        actionType: "menuType",
       });
     },
     handleOnMenuTypeClick(data) {
       this.$refs.drawerRef.showDrawer({ type: data.type, numDay: this.numDay });
     },
+    handleOnIgdDelete(data) {
+      // console.log(data);
+      const { id, igdId } = data;
+      this.updateDishes({
+        num: this.num,
+        id,
+        igdId,
+        actionType: "delIgd",
+      });
+    },
+    handleOnEditRemark(data) {
+      this.$refs.remarkDialogRef.showDialog(data);
+    },
+    handleOnRemarkConfirm(data) {
+      console.log(data);
+      const { id, remark } = data;
+      this.updateDishes({
+        num: this.num,
+        id,
+        remark,
+        actionType: "remark",
+      });
+    },
     ...mapActions([
       "updateDishes",
       "addDishes",
@@ -495,7 +567,7 @@ export default {
   margin-bottom: 24px;
   padding: 1px;
 
-  .num_day {
+  .pointer_style {
     cursor: pointer;
     outline: none;
   }
@@ -507,6 +579,25 @@ export default {
   padding: 4px 8px;
 }
 
+.empty_remark {
+  cursor: pointer;
+  text-align: center;
+  em {
+    visibility: hidden;
+    font-size: 14px;
+    font-weight: bold;
+    &:hover {
+      color: #1890ff;
+    }
+  }
+
+  &:hover {
+    em {
+      visibility: visible;
+    }
+  }
+}
+
 .recipes_header {
   & > th {
     background: #d53950 !important;