复制功能

2021-03-05 14:32:47 +08:00
parent 0d36574c50
commit 4f08bedf61
5 changed files with 237 additions and 57 deletions
--- a/stdiet-ui/src/store/modules/recipes.js
+++ b/stdiet-ui/src/store/modules/recipes.js
@@ -28,7 +28,8 @@ const oriState = {
  startNum: 0,
  endNum: 0,
  reviewStatus: 0,
-  templateInfo: undefined
+  templateInfo: undefined,
+  copyData: undefined
 };

 const mutations = {
@@ -37,7 +38,7 @@ const mutations = {
      obj => obj.id === payload.id
    );
    if (tarDishes) {
-      if (tarDishes.dishesId !== payload.dishesId) {
+      if (payload.dishesId || payload.type !== undefined) {
        // 替换菜品
        Object.keys(payload).forEach(key => {
          if (key === "num") {
@@ -282,6 +283,7 @@ const actions = {
    // console.log(params);
  },
  async addDishes({ commit, state }, payload) {
+    console.log(payload);
    const tarDishesList = state.recipesData[payload.num].dishes.filter(
      obj => obj.type === payload.data.type
    );
@@ -367,26 +369,34 @@ const actions = {
      );
      if (tarDishes) {
        const mTarDishes = JSON.parse(JSON.stringify(tarDishes));
-        const tarIgd = mTarDishes.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);
+        let params = {
+          id: mTarDishes.id
+        };
+        if (payload.type !== undefined) {
+          // 修改餐类
+          params.type = payload.type;
+        } else {
+          // 修改食材
+          const tarIgd = mTarDishes.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);

-          const params = {
-            id: mTarDishes.id,
-            detail: mTarDishes.igdList.map(igd => ({
+            params.detail = mTarDishes.igdList.map(igd => ({
              id: igd.id,
              weight: igd.weight,
              cus_unit: igd.cusUnit,
              cus_weight: igd.cusWeight
-            }))
-          };
-          const result = await updateDishesDetailApi(params);
-          if (result.code === 200) {
-            commit("updateRecipesDishesDetail", payload);
+            }));
          }
        }
+        const result = await updateDishesDetailApi(params);
+        if (result.code === 200) {
+          commit("updateRecipesDishesDetail", payload);
+        }
      }
    } else {
      commit("updateRecipesDishesDetail", payload);
@@ -408,7 +418,21 @@ const actions = {
      commit("deleteSomeDayDishes", payload);
    }
  },
-  async deleteMenu({ commit }, payload) {}
+  async deleteMenu({ commit }, payload) {},
+  async setCopyData({ commit, state }, payload) {
+    return new Promise((res, rej) => {
+      const tarDishes = state.recipesData[payload.num].dishes.find(
+        obj => obj.id === payload.id
+      );
+      if (tarDishes) {
+        commit("updateStateData", { copyData: tarDishes });
+
+        res("复制成功");
+      } else {
+        rej("复制失败");
+      }
+    });
+  }
 };

 const getters = {
--- a/stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesCom/AddDishesDrawer/index.vue
+++ b/stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesCom/AddDishesDrawer/index.vue
@@ -92,13 +92,14 @@ export default {
          data.name
        }」`;
        this.id = data.id;
+        this.type = data.type;
      } else if (type) {
        this.title = `添加第${numDay}天${this.typeDict[type]}菜品`;
        this.type = type;
      }
      this.visible = true;
      this.$nextTick(() => {
-        this.$refs.dishesRef.getList({ type });
+        this.$refs.dishesRef.getList({ type: this.type });
      });
    },
    handleOnClosed(done) {
--- a/stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesCom/DishesSettingDialog/index.vue
+++ b/stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesCom/DishesSettingDialog/index.vue
@@ -0,0 +1,98 @@
+<template>
+  <el-dialog
+    :title="title"
+    :visible.sync="visible"
+    width="320px"
+    :close-on-click-modal="false"
+  >
+    <div v-loading="loading" @click="handleClick" class="reuse_dialog_wrapper">
+      <div style="margin-bottom: 12px">餐类</div>
+      <el-radio-group v-model="type">
+        <el-radio
+          style="padding: 8px 0"
+          v-for="item in menuTypeOptions"
+          :key="item.dictValue"
+          :label="item.dictValue"
+        >
+          {{ item.dictLabel }}
+        </el-radio>
+      </el-radio-group>
+    </div>
+    <div slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="submit">确 定</el-button>
+      <el-button @click="cancel">取 消</el-button>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import { createNamespacedHelpers } from "vuex";
+const { mapState } = createNamespacedHelpers("recipes");
+import { getDishes } from "@/api/custom/dishes";
+export default {
+  name: "DishesSettingDialog",
+  data() {
+    return {
+      visible: false,
+      loading: false,
+      data: undefined,
+      type: "",
+      menuTypeOptions: [],
+      title: "",
+    };
+  },
+  methods: {
+    handleClick(e) {
+      e.stopPropagation();
+    },
+    showDialog({ numDay, data }) {
+      if (!data) {
+        return;
+      }
+      this.data = data;
+      this.visible = true;
+      this.loading = true;
+      this.type = data.type;
+      this.title = `修改第${numDay}天「${data.name}」菜品`;
+      getDishes(data.dishesId).then((res) => {
+        if (res.code === 200) {
+          this.loading = false;
+          this.menuTypeOptions = res.data.type
+            .split(",")
+            .sort((a, b) => a - b)
+            .reduce((arr, cur) => {
+              const tarOpt = this.typeOptions.find(
+                (obj) => obj.dictValue === cur
+              );
+              if (tarOpt) {
+                arr.push(tarOpt);
+              }
+              return arr;
+            }, []);
+        }
+      });
+    },
+    cancel() {
+      this.visible = false;
+      this.data = undefined;
+    },
+    submit() {
+      this.visible = false;
+      this.$emit("onConfirm", { type: this.type, id: this.data.id });
+    },
+  },
+  computed: {
+    ...mapState(["typeOptions"]),
+  },
+};
+</script>
+<style lang="scss" scoped>
+.reuse_dialog_wrapper {
+  .item {
+    margin-bottom: 12px;
+  }
+
+  .menu_type {
+    padding: 8px 16px;
+  }
+}
+</style>
--- a/stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesCom/ReuseDialog/index.vue
+++ b/stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesCom/ReuseDialog/index.vue
@@ -1,20 +0,0 @@
-<template>
-  <el-dialog>
-  </el-dialog>
-</template>
-<script>
-export default {
-  name: 'ReuseDialog',
-  data() {
-    return {
-      visible: false,
-      data: undefined
-    }
-  },
-  methods: {
-    showDialog() {
-      this.visible = true;
-    }
-  }
-}
-</script>
--- a/stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesCom/index.vue
+++ b/stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesCom/index.vue
@@ -11,8 +11,22 @@
    >
      <el-table-column prop="type" :width="100" align="center">
        <template slot="header">
-          <div class="num_day" @click="handleOnResetCurrentDay">
-            <div>{{ `第${numDay}天` }}</div>
+          <el-popover placement="top" trigger="hover" v-if="!!copyData">
+            <div>
+              <el-button size="mini" type="primary" @click="handleOnPaste"
+                >粘贴</el-button
+              >
+            </div>
+            <div
+              slot="reference"
+              class="num_day"
+              @click="handleOnResetCurrentDay"
+            >
+              {{ `第${numDay}天` }}
+            </div>
+          </el-popover>
+          <div v-else>
+            {{ `第${numDay}天` }}
          </div>
        </template>
        <template slot-scope="scope">
@@ -44,23 +58,42 @@
        <template slot-scope="scope">
          <el-popover placement="right" trigger="hover" :title="scope.row.name">
            <div>
-              <el-button
-                type="primary"
-                size="mini"
-                icon="el-icon-refresh"
-                class="fun_button"
-                @click="handleOnReplace(scope.row)"
-              >
-                替换
-              </el-button>
-              <el-button
-                type="danger"
-                size="mini"
-                icon="el-icon-delete"
-                class="fun_button"
-                @click="handleOnDelete(scope.row)"
-                >删除</el-button
-              >
+              <div style="margin-bottom: 8px">
+                <el-button
+                  type="primary"
+                  size="mini"
+                  icon="el-icon-refresh"
+                  class="fun_button"
+                  @click="handleOnReplace(scope.row)"
+                >
+                  替换
+                </el-button>
+                <el-button
+                  type="danger"
+                  size="mini"
+                  icon="el-icon-delete"
+                  class="fun_button"
+                  @click="handleOnDelete(scope.row)"
+                  >删除</el-button
+                >
+              </div>
+              <div>
+                <el-button
+                  type="primary"
+                  size="mini"
+                  icon="el-icon-document-copy"
+                  class="fun_button"
+                  @click="handleOnCopy(scope.row)"
+                  >复制</el-button
+                >
+                <el-button
+                  size="mini"
+                  icon="el-icon-document-copy"
+                  class="fun_button"
+                  @click="handleOnSetting(scope.row)"
+                  >修改餐类</el-button
+                >
+              </div>
            </div>
            <span class="num_day" slot="reference">{{ scope.row.name }}</span>
          </el-popover>
@@ -172,7 +205,13 @@
      </el-table-column>
      <el-table-column label="做法" prop="methods" />
    </el-table>
+    <!-- 添加菜品抽屉 -->
    <AddDishesDrawer ref="drawerRef" @onConfirm="handleOnDishesConfirm" />
+    <!-- 菜品复用菜单 -->
+    <DishesSettingDialog
+      ref="settingDialogRef"
+      @onConfirm="handleOnSettingConfirm"
+    />
  </div>
 </template>
 <script>
@@ -187,6 +226,8 @@ const {
 import EditableText from "./EditableText";
 import EditableUnit from "./EditableUnit";
 import AddDishesDrawer from "./AddDishesDrawer";
+import DishesSettingDialog from "./DishesSettingDialog";
+import VueScrollTo from "vue-scrollto";

 export default {
  name: "RecipesCom",
@@ -213,6 +254,7 @@ export default {
    EditableText,
    EditableUnit,
    AddDishesDrawer,
+    DishesSettingDialog,
  },
  mounted() {
    // console.log(this.data);
@@ -313,12 +355,15 @@ export default {
      return mData;
    },
    ...mapGetters(["typeDict"]),
-    ...mapState(["currentDay"]),
+    ...mapState(["currentDay", "copyData"]),
  },
  methods: {
    handleParentClick(e) {
      // 校验某天
      this.setCurrentDay({ currentDay: this.num });
+      VueScrollTo.scrollTo(`#recipes${this.num}`, 500, {
+        container: "#recipes_content",
+      });
    },
    spanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
@@ -351,6 +396,27 @@ export default {
      // console.log(data);
      this.deleteDishes({ num: this.num, id: data.id });
    },
+    handleOnCopy(data) {
+      // console.log(data);
+      this.setCopyData({ num: this.num, id: data.id })
+        .then((msg) => {
+          this.$message.success(msg);
+        })
+        .catch((err) => {
+          this.$message.error(err);
+        });
+    },
+    handleOnPaste() {
+      // console.log(this.copyData);
+      if (this.copyData) {
+        this.addDishes({
+          num: this.num,
+          data: this.copyData,
+        }).catch((err) => {
+          this.$message.error(err);
+        });
+      }
+    },
    handleOnWeightChange(data, weight) {
      // console.log({ data, weight });
      this.updateDishes({
@@ -390,6 +456,16 @@ export default {
        });
      }
    },
+    handleOnSetting(data) {
+      this.$refs.settingDialogRef.showDialog({ numDay: this.numDay, data });
+    },
+    handleOnSettingConfirm({ type, id }) {
+      this.updateDishes({
+        num: this.num,
+        id,
+        type,
+      });
+    },
    handleOnMenuTypeClick(data) {
      this.$refs.drawerRef.showDrawer({ type: data.type, numDay: this.numDay });
    },
@@ -398,6 +474,7 @@ export default {
      "addDishes",
      "deleteDishes",
      "replaceDishes",
+      "setCopyData",
    ]),
    ...mapMutations(["setCurrentDay", "resetCurrentDay"]),
  },