采购计划开发

2021-03-10 17:35:19 +08:00
parent 7709c85cb0
commit aa555d98c2
10 changed files with 394 additions and 40 deletions
--- a/stdiet-ui/src/views/custom/recipesShow/MenuDetail/index.vue
+++ b/stdiet-ui/src/views/custom/recipesShow/MenuDetail/index.vue
@@ -34,9 +34,15 @@
  </div>
 </template>
 <script>
+import { createNamespacedHelpers } from "vuex";
+const {
+  mapActions,
+  mapState,
+  mapMutations,
+  mapGetters,
+} = createNamespacedHelpers("recipesShow");
 // import NutriComputeCom from "./NutriComputeCom";
 import DishesDetailDialog from "./DishesDetailDialog";
-import { getDicts } from "@/api/custom/recipesShow";
 export default {
  name: "menuDetail",
  props: ["value", "date"],
@@ -44,26 +50,6 @@ export default {
    // NutriComputeCom,
    DishesDetailDialog,
  },
-  created() {
-    getDicts("cus_cus_unit").then((response) => {
-      this.curUnitDict = response.data.reduce((obj, cur) => {
-        obj[cur.dictValue] = cur.dictLabel;
-        return obj;
-      }, {});
-    });
-    getDicts("cus_cus_weight").then((response) => {
-      this.cusWeightDict = response.data.reduce((obj, cur) => {
-        obj[cur.dictValue] = cur.dictLabel;
-        return obj;
-      }, {});
-    });
-    getDicts("cus_dishes_type").then((response) => {
-      this.menuTypeDict = response.data.reduce((obj, cur) => {
-        obj[cur.dictValue] = cur.dictLabel;
-        return obj;
-      }, {});
-    });
-  },
  data() {
    return {
      logo: require("@/assets/logo/st_logo.png"),
@@ -71,9 +57,6 @@ export default {
        2: "10:00 - 10:30",
        4: "15:00 - 15:30",
      },
-      menuTypeDict: {},
-      curUnitDict: {},
-      cusWeightDict: {},
    };
  },
  computed: {
@@ -86,12 +69,12 @@ export default {
        if (!tarMenu.methods && tarMenu.igdList.length === 1) {
          tarMenu = tarMenu.igdList[0];
          tarMenu.cusStr = `${this.cusWeightDict[tarMenu.cusWeight] || ""}${
-            this.curUnitDict[tarMenu.cusUnit] || ""
+            this.cusUnitDict[tarMenu.cusUnit] || ""
          }`;
        } else {
          tarMenu.igdList.forEach((igd) => {
            igd.cusStr = `${this.cusWeightDict[igd.cusWeight] || ""}${
-              this.curUnitDict[igd.cusUnit] || ""
+              this.cusUnitDict[igd.cusUnit] || ""
            }`;
          });
        }
@@ -106,6 +89,7 @@ export default {
      // console.log(mMenus);
      return mMenus;
    },
+    ...mapState(["cusUnitDict", "cusWeightDict", "menuTypeDict"]),
  },
  methods: {
    handleOnDetailClick(data) {
--- a/stdiet-ui/src/views/custom/recipesShow/PlanDrawer/PlanTimeDialog/index.vue
+++ b/stdiet-ui/src/views/custom/recipesShow/PlanDrawer/PlanTimeDialog/index.vue
@@ -3,7 +3,7 @@
    :visible.sync="visible"
    width="80%"
    center
-    title="选择时间段"
+    title="请选择采购天数"
    append-to-body
    class="plan_time_wrapper"
  >
@@ -14,7 +14,7 @@
    </div>
    <div class="seperate_day">
      <el-button @click="handleOnTimeClick(3)">前3天计划</el-button>
-      <el-button @click="handleOnTimeClick(4)">后四天计划</el-button>
+      <el-button @click="handleOnTimeClick(4)">后4天计划</el-button>
    </div>
  </el-dialog>
 </template>
@@ -25,17 +25,21 @@ export default {
    return {
      visible: false,
      recipesId: "",
+      label: "",
    };
  },
+
  methods: {
-    showDialog(recipesId) {
+    showDialog({ recipesId, label }) {
      this.visible = true;
+      this.label = label;
      this.recipesId = recipesId;
    },
    handleOnTimeClick(num) {
      this.visible = false;
      this.$emit("onConfirm", {
        num,
+        label: this.label,
        recipesId: this.recipesId,
      });
    },
@@ -51,8 +55,11 @@ export default {
    margin-top: 10px;
    display: flex;

-    & > button {
-      flex: 1;
+    & > button:nth-child(1) {
+      flex: 3;
+    }
+    & > button:nth-child(2) {
+      flex: 4;
    }
  }
 }
--- a/stdiet-ui/src/views/custom/recipesShow/PlanDrawer/ShoppingPlanDrawer/index.vue
+++ b/stdiet-ui/src/views/custom/recipesShow/PlanDrawer/ShoppingPlanDrawer/index.vue
@@ -0,0 +1,220 @@
+<template>
+  <el-drawer
+    :visible.sync="visible"
+    :with-header="false"
+    direction="rtl"
+    size="100%"
+    append-to-body
+    class="shopping_plan_drawer_wrapper"
+  >
+    <div class="header">
+      <el-button
+        type="text"
+        icon="el-icon-back"
+        @click="handleOnBackClick"
+        class="icon_btn"
+      />
+      <span>{{ label }}</span>
+      <span class="hold" />
+    </div>
+    <div class="content" v-loading="loading">
+      <div class="top">
+        <!-- <img :src="logo" style="width: auto; height: 32px" alt="logo" /> -->
+        {{ title }}
+      </div>
+      <div class="notice">
+        <div>注：1. 以下采购计划仅供参考</div>
+        <div>2. 主食和油类可按斤购买</div>
+        <div>3. 调味食材可按半斤购买</div>
+      </div>
+      <el-card
+        v-for="typeName in Object.keys(shoppingCart)"
+        :key="typeName"
+        style="margin-top: 12px"
+      >
+        <div slot="header" class="clearfix">
+          <span>{{ typeName }}</span>
+        </div>
+        <div
+          v-for="igdObj in shoppingCart[typeName]"
+          :key="igdObj.name"
+          class="item_style"
+        >
+          <span>{{ igdObj.name }}</span>
+          <span>
+            <span style="margin-right: 2px">{{ igdObj.weight }}</span>
+            <span>{{ igdObj.unit }}</span>
+          </span>
+        </div>
+      </el-card>
+    </div>
+  </el-drawer>
+</template>
+<script>
+import { createNamespacedHelpers } from "vuex";
+const {
+  mapActions,
+  mapState,
+  mapMutations,
+  mapGetters,
+} = createNamespacedHelpers("recipesShow");
+export default {
+  name: "ShoppingPlanDrawer",
+  data() {
+    return {
+      visible: false,
+      loading: false,
+      title: "",
+      logo: require("@/assets/logo/st_logo.png"),
+      shoppingCart: {},
+      igdUnitDict: {
+        鸡蛋: "个",
+        牛奶: "盒",
+      },
+    };
+  },
+  methods: {
+    showDrawer(data) {
+      // console.log(data);
+      const { recipesId, num, label } = data;
+      this.label = label;
+      // num < 0 全部计算
+      this.title = `${
+        num === 3 ? "前3" : num === 4 ? "后4" : Math.abs(num)
+      }天采购计划`;
+      this.visible = true;
+      if (this.recipes[recipesId]) {
+        this.processShoppingCart(num, recipesId);
+      } else {
+        this.loading = true;
+        this.fetchFullRecipes({
+          recipesId,
+        }).then(() => {
+          this.loading = false;
+          setTimeout(() => {
+            this.processShoppingCart(num, recipesId);
+          }, 0);
+        });
+      }
+    },
+    processShoppingCart(num, recipesId) {
+      this.shoppingCart = (this.recipes[recipesId] || []).reduce(
+        (obj, cur, idx) => {
+          if (
+            num < 0 || // 全部计算
+            num === 7 ||
+            (num === 3 && num > idx) ||
+            (num === 4 && idx > 2)
+          ) {
+            cur.dishes.forEach((dObj) => {
+              dObj.igdList.forEach((iObj) => {
+                const tarTypeName = this.idgTypeDict[iObj.type];
+                const tarObj = obj[tarTypeName];
+                if (tarObj) {
+                  const tarIObj = tarObj.find(
+                    (zObj) => zObj.name === iObj.name
+                  );
+                  if (tarIObj) {
+                    tarIObj.weight += this.igdUnitDict[iObj.name]
+                      ? iObj.cusWeight
+                      : iObj.weight;
+                  } else {
+                    tarObj.push({
+                      type: iObj.type,
+                      name: iObj.name,
+                      weight: this.igdUnitDict[iObj.name]
+                        ? iObj.cusWeight
+                        : iObj.weight,
+                      unit: this.igdUnitDict[iObj.name] || "g",
+                    });
+                  }
+                } else {
+                  obj[tarTypeName] = [
+                    {
+                      type: iObj.type,
+                      name: iObj.name,
+                      weight: this.igdUnitDict[iObj.name]
+                        ? iObj.cusWeight
+                        : iObj.weight,
+                      unit: this.igdUnitDict[iObj.name] || "g",
+                    },
+                  ];
+                }
+              });
+            });
+          }
+          return obj;
+        },
+        {}
+      );
+      console.log(this.shoppingCart);
+    },
+    handleOnBackClick() {
+      this.visible = false;
+      this.shoppingCart = {};
+    },
+    ...mapActions(["fetchFullRecipes"]),
+  },
+  computed: {
+    ...mapState(["recipes", "idgTypeDict"]),
+  },
+};
+</script>
+<style lang="scss" scoped>
+.shopping_plan_drawer_wrapper {
+  height: 100vh;
+
+  .header {
+    padding: 2px 6px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 44px;
+
+    .icon_btn {
+      font-size: 24px;
+      padding: 6px;
+      color: #696969;
+    }
+
+    .hold {
+      display: block;
+      width: 39px;
+    }
+  }
+
+  .content {
+    height: calc(100vh - 44px);
+    overflow: auto;
+    padding: 12px;
+
+    .top {
+      text-align: center;
+      padding-bottom: 10px;
+    }
+
+    .notice {
+      font-size: 12px;
+      color: #d96969;
+
+      & > div {
+        padding: 2px 0;
+      }
+
+      & > div:not(:first-child) {
+        margin-left: 24px;
+      }
+    }
+
+    .item_style {
+      display: flex;
+      padding: 0 12px;
+      height: 28px;
+      font-size: 14px;
+      align-items: center;
+      justify-content: space-between;
+      border-bottom: 1px solid #e6ebf5;
+    }
+  }
+}
+</style>
--- a/stdiet-ui/src/views/custom/recipesShow/PlanDrawer/index.vue
+++ b/stdiet-ui/src/views/custom/recipesShow/PlanDrawer/index.vue
@@ -21,7 +21,6 @@
            <div class="title_style">
              <span>{{ plan.label }}</span>
              <em
-                v-show="false"
                class="el-icon-shopping-cart-full icon_style"
                @click="(e) => handleOnShoppingPlanClick(e, plan)"
              />
@@ -42,11 +41,15 @@
      </el-collapse>
    </div>

+    <!-- 时间选择弹窗 -->
    <plan-time-dialog ref="planRef" @onConfirm="handleOnTimeConfirm" />
+    <!-- 采购计划 -->
+    <shopping-plan-drawer ref="drawerRef" />
  </el-drawer>
 </template>
 <script>
 import PlanTimeDialog from "./PlanTimeDialog";
+import ShoppingPlanDrawer from "./ShoppingPlanDrawer";
 export default {
  name: "planDrawer",
  data() {
@@ -59,6 +62,7 @@ export default {
  },
  components: {
    PlanTimeDialog,
+    ShoppingPlanDrawer,
  },
  props: ["data", "planId", "menuId"],
  methods: {
@@ -74,13 +78,24 @@ export default {

      this.$emit("plan-change", menu);
    },
-    handleOnShoppingPlanClick(e, data) {
+    handleOnShoppingPlanClick(e, plan) {
      e.stopPropagation();
-      this.$refs.planRef.showDialog(data.id);
+      // console.log(plan);
+      const { recipesId, menus, label } = plan;
+      if (menus.length === 7) {
+        this.$refs.planRef.showDialog({ recipesId, label });
+      } else {
+        this.$refs.drawerRef.showDrawer({
+          num: menus.length * -1, // 全部计算
+          recipesId,
+          label,
+        });
+      }
      this.visible = false;
    },
-    handleOnTimeConfirm(val) {
-      console.log(val);
+    handleOnTimeConfirm({ num, recipesId, label }) {
+      // console.log(val);
+      this.$refs.drawerRef.showDrawer({ num, recipesId, label });
    },
  },
  computed: {},
--- a/stdiet-ui/src/views/custom/recipesShow/index.vue
+++ b/stdiet-ui/src/views/custom/recipesShow/index.vue
@@ -79,6 +79,9 @@ export default {
    };
  },
  created() {
+    //
+    this.init();
+    //
    getRecipesPlans(this.id).then((response) => {
      if (response.code === 200) {
        let curPlanId, curMenuId, curDate;
@@ -100,6 +103,7 @@ export default {
                  id: menu.id,
                };
              }),
+              recipesId: plan.recipesId,
              label: `第${plan.startNumDay} 至 ${plan.endNumDay}天`,
              id: plan.id,
            });
@@ -152,6 +156,7 @@ export default {
      this.curDate = date;
      this.fetchRecipesInfo(id);
    },
+    ...mapActions(["init"]),
  },
  watch: {},
 };