增加备注信息

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"
-              @click="handleOnResetCurrentDay"
+              style="font-weight: bold; font-size: 14px; cursor: pointer"
             >
-              {{ `第${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,
-        dishesId: data.dishesId,
-        igdId: data.igdId,
+        id,
+        dishesId,
+        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;