!307 添加食谱导出列选项

Merge pull request !307 from 德仔/develop
2021-07-06 03:26:10 +00:00
parent e84f3e1d04 723f0327d2
commit d780d7acd9
5 changed files with 211 additions and 38 deletions
--- a/stdiet-ui/src/components/BodySignView/index.vue
+++ b/stdiet-ui/src/components/BodySignView/index.vue
@@ -33,6 +33,7 @@ import TextInfo from "@/components/TextInfo";
 import ACFCom from "@/components/HealthyView/ACFCom";
 import RemarkCom from "@/components/HealthyView/RemarkCom";
 import { editPhysicalSigns } from "@/api/custom/healthy";
+import { updateRecipesPlan } from "@/api/custom/recipesPlan";

 export default {
  name: "BodySignView",
@@ -124,6 +125,18 @@ export default {
        }
      });
    },
+    handleOnRemarkConfirm(data) {
+      const { pathname } = window.location;
+      const recipesId = pathname.substring(pathname.lastIndexOf("/") + 1);
+      updateRecipesPlan({
+        id: recipesId,
+        ...data,
+      }).then((res) => {
+        if (res.code === 200) {
+          this.$message.success("修改成功");
+        }
+      });
+    },
  },
  watch: {
    data(val, oldVal) {
--- a/stdiet-ui/src/store/modules/recipes.js
+++ b/stdiet-ui/src/store/modules/recipes.js
@@ -50,7 +50,8 @@ const oriState = {
  physicalSignsOptions: [],
  //
  curShortCutObj: {},
-  recipesPlanRemark: ""
+  recipesPlanRemark: "",
+  exportCols: undefined
 };

 const mutations = {
@@ -126,6 +127,9 @@ const mutations = {
  setCurShortCutObj(state, payload) {
    state.curShortCutObj = payload.data;
  },
+  setExportCols(state, payload) {
+    state.exportCols = payload.exportCols;
+  },
  setDate(state, payload) {
    state.startDate = payload.startDate;
    state.endDate = payload.endDate;
--- a/stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesCom/index.vue
+++ b/stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesCom/index.vue
@@ -100,7 +100,12 @@
          </el-popover>
        </template>
      </el-table-column>
-      <el-table-column label="菜品" prop="name" align="center">
+      <el-table-column
+        v-if="checkExport('菜品')"
+        label="菜品"
+        prop="name"
+        align="center"
+      >
        <template slot="header">
          <div class="pointer_style" @click="handleOnAdd">菜品</div>
        </template>
@@ -172,7 +177,12 @@
          </el-popover>
        </template>
      </el-table-column>
-      <el-table-column label="食材" prop="igdName" align="center">
+      <el-table-column
+        v-if="checkExport('食材')"
+        label="食材"
+        prop="igdName"
+        align="center"
+      >
        <template slot-scope="scope">
          <span
            v-if="
@@ -205,7 +215,12 @@
          </el-popover>
        </template>
      </el-table-column>
-      <el-table-column label="分量估算" :width="80" align="center">
+      <el-table-column
+        v-if="checkExport('分量估算')"
+        label="分量估算"
+        :width="80"
+        align="center"
+      >
        <template slot-scope="scope">
          <EditableUnit
            :weight="scope.row.cusWeight"
@@ -215,7 +230,13 @@
          />
        </template>
      </el-table-column>
-      <el-table-column label="重量(g)" prop="weight" :width="80" align="center">
+      <el-table-column
+        v-if="checkExport('重量(g)')"
+        label="重量(g)"
+        prop="weight"
+        :width="80"
+        align="center"
+      >
        <template slot-scope="scope">
          <EditableText
            :value="scope.row.weight"
@@ -229,7 +250,7 @@
        prop="proteinRatio"
        :width="60"
        align="center"
-        v-if="!preview"
+        v-if="!preview && checkExport('蛋白质/100g')"
      >
        <template slot="header">
          <div class="pointer_style">
@@ -243,7 +264,7 @@
        prop="fatRatio"
        :width="60"
        align="center"
-        v-if="!preview"
+        v-if="!preview && checkExport('脂肪/100g')"
      >
        <template slot="header">
          <div class="pointer_style">
@@ -257,7 +278,7 @@
        prop="carbonRatio"
        :width="60"
        align="center"
-        v-if="!preview"
+        v-if="!preview && checkExport('碳水/100g')"
      >
        <template slot="header">
          <div class="pointer_style">
@@ -272,7 +293,7 @@
        :width="60"
        align="center"
        :formatter="nutriFormatter"
-        v-if="!preview"
+        v-if="!preview && checkExport('蛋白质含量')"
      >
        <template slot="header">
          <div class="pointer_style">
@@ -287,7 +308,7 @@
        :width="60"
        align="center"
        :formatter="nutriFormatter"
-        v-if="!preview"
+        v-if="!preview && checkExport('脂肪含量')"
      >
        <template slot="header">
          <div class="pointer_style">
@@ -302,7 +323,7 @@
        :width="60"
        align="center"
        :formatter="nutriFormatter"
-        v-if="!preview"
+        v-if="!preview && checkExport('碳水含量')"
      >
        <template slot="header">
          <div class="pointer_style">
@@ -311,8 +332,16 @@
          </div>
        </template>
      </el-table-column>
-      <el-table-column label="做法" prop="methods" v-if="!preview" />
-      <el-table-column label="备注" prop="remark" v-if="!preview">
+      <el-table-column
+        label="做法"
+        prop="methods"
+        v-if="!preview && checkExport('做法')"
+      />
+      <el-table-column
+        label="备注"
+        prop="remark"
+        v-if="!preview && checkExport('备注')"
+      >
        <template slot-scope="scope">
          <div
            v-if="!scope.row.remark"
@@ -342,16 +371,10 @@
  </div>
 </template>
 <script>
-import {
-  getDishClassNameById 
-} from "@/api/custom/recipes";
+import { getDishClassNameById } from "@/api/custom/recipes";
 import { createNamespacedHelpers } from "vuex";
-const {
-  mapActions,
-  mapGetters,
-  mapState,
-  mapMutations,
-} = createNamespacedHelpers("recipes");
+const { mapActions, mapGetters, mapState, mapMutations } =
+  createNamespacedHelpers("recipes");

 import EditableText from "./EditableText";
 import EditableUnit from "./EditableUnit";
@@ -442,6 +465,7 @@ export default {
      "curShortCutObj",
      "healthyData",
      "templateInfo",
+      "exportCols",
    ]),
  },
  methods: {
@@ -522,9 +546,12 @@ export default {
      if (columnIndex === 0) {
        return row.typeSpan;
      } else if (
-        columnIndex === 1 ||
-        columnIndex === 11 ||
-        columnIndex === 12
+        column.label === "菜品" ||
+        column.label === "做法" ||
+        column.label === "备注"
+        // columnIndex === 1 ||
+        // columnIndex === 11 ||
+        // columnIndex === 12
      ) {
        return row.nameSpan;
      }
@@ -570,6 +597,13 @@ export default {
          this.$message.error(err);
        });
    },
+    checkExport(colName) {
+      if (!this.exportCols) {
+        return true;
+      }
+
+      return this.exportCols.includes(colName);
+    },
    // handleOnPaste(type) {
    //   // console.log(this.copyData);
    //   if (this.copyData) {
@@ -712,7 +746,7 @@ export default {
      "setCopyData",
      "replaceMenu",
    ]),
-    ...mapMutations(["setCurrentDay", "resetCurrentDay"]),
+    ...mapMutations(["setCurrentDay", "resetCurrentDay", "setExportCols"]),
  },
 };
 </script>
--- a/stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesHeaderCom/ExportDialog/index.vue
+++ b/stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesHeaderCom/ExportDialog/index.vue
@@ -0,0 +1,104 @@
+<template>
+  <el-dialog
+    custom-class="export_dialog_wrapper"
+    title="导出图片"
+    :visible.sync="visible"
+    width="480px"
+  >
+    <el-form :model="form" label-position="top">
+      <el-form-item label="食谱开始天数">
+        <el-input v-model="form.startNum" />
+      </el-form-item>
+      <el-form-item label="导出列项">
+        <el-checkbox
+          :indeterminate="isIndeterminate"
+          v-model="checkAll"
+          @change="handleCheckAllChange"
+          >全选</el-checkbox
+        >
+        <el-checkbox-group
+          v-model="form.exportCols"
+          @change="handleOnCheckboxGroupChange"
+        >
+          <el-checkbox
+            class="checkbox_style"
+            v-for="col in cols"
+            :label="col"
+            :key="col"
+          />
+        </el-checkbox-group>
+      </el-form-item>
+    </el-form>
+    <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: "ExportDialog",
+  data() {
+    const cols = [
+      "菜品",
+      "食材",
+      "分量估算",
+      "重量(g)",
+      "蛋白质/100g",
+      "脂肪/100g",
+      "碳水/100g",
+      "蛋白质含量",
+      "脂肪含量",
+      "碳水含量",
+      "做法",
+      "备注",
+    ];
+    return {
+      visible: false,
+      isIndeterminate: false,
+      checkAll: true,
+      cols,
+      form: {
+        startNum: 1,
+        exportCols: cols.slice(),
+      },
+    };
+  },
+  methods: {
+    showDialog({ num }) {
+      this.visible = true;
+      this.form.startNum = num;
+    },
+    onSubmit() {
+      console.log(this.form);
+      this.$emit("onConfirm", this.form);
+      this.visible = false;
+      setTimeout(() => {
+        this.form = {
+          startNum: 1,
+          exportCols: this.cols.slice(),
+        };
+      }, 200);
+    },
+    onClosed() {
+      this.visible = false;
+      this.form.startNum = 1;
+    },
+    handleCheckAllChange(val) {
+      this.checkAll = val;
+      this.form.exportCols = val ? this.cols.slice() : [];
+      this.isIndeterminate = false;
+    },
+    handleOnCheckboxGroupChange(val) {
+      this.checkAll = val.length === this.cols.length;
+      this.isIndeterminate = val.length > 0 && val.length < this.cols.length;
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.export_dialog_wrapper {
+  .checkbox_style {
+  }
+}
+</style>
--- a/stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesHeaderCom/index.vue
+++ b/stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesHeaderCom/index.vue
@@ -98,20 +98,23 @@
    </div>
    <!-- 模板 -->
    <TemplateDialog ref="templateRef" @onConfirm="handleOnCopy" />
+    <!-- 导出对话框 -->
+    <ExportDialog ref="exportDialogRef" @onConfirm="handleOnExportImg" />
  </div>
 </template>
 <script>
 import { addRecipesTemplate } from "@/api/custom/recipesTemplate";
 import { createNamespacedHelpers } from "vuex";
-const { mapActions, mapState, mapMutations } = createNamespacedHelpers(
-  "recipes"
-);
+const { mapActions, mapState, mapMutations } =
+  createNamespacedHelpers("recipes");
 import TemplateDialog from "@/components/TemplateDialog";
 import html2canvans from "html2canvas";
+import ExportDialog from "./ExportDialog";
 export default {
  name: "RecipesHeaderCom",
  components: {
    TemplateDialog,
+    ExportDialog,
  },
  data() {
    return {
@@ -218,16 +221,23 @@ export default {
    },
    handleOnExportStartNumConfig() {
      this.oriStartNum = this.recipesData[0].numDay;
-      this.$prompt("食谱开始天数", "导出图片", {
-        confirmButtonText: "确定",
-        inputValue: this.oriStartNum,
-        inputPattern: /^[1-9]\d*$/,
-        inputErrorMessage: "请输入正整数",
-      }).then(({ value }) => {
-        this.handleOnExportImg(parseInt(value));
+      // this.$prompt("食谱开始天数", "导出图片", {
+      //   confirmButtonText: "确定",
+      //   inputValue: this.oriStartNum,
+      //   inputPattern: /^[1-9]\d*$/,
+      //   inputErrorMessage: "请输入正整数",
+      // }).then(({ value }) => {
+      //   this.handleOnExportImg(parseInt(value));
+      // });
+      this.$refs.exportDialogRef.showDialog({
+        num: this.oriStartNum,
      });
    },
-    handleOnExportImg(startNum) {
+    handleOnExportImg({ startNum, exportCols }) {
+      // 更新导出列
+      this.setExportCols({ exportCols });
+      this.$message.warning("食谱导出中，请勿操作界面...");
+      //
      this.downloading = true;
      this.$nextTick(() => {
        const centerContentDom = document.getElementById("center_content");
@@ -256,6 +266,7 @@ export default {
          scale: 1.5,
          height: recipesDom.scrollHeight,
        }).then((canvas) => {
+          // 还原
          const { name } = this.healthyData;
          // const startNum = this.recipesData[0].numDay;
          // const endNum = this.recipesData[this.recipesData.length - 1].numDay;
@@ -279,13 +290,20 @@ export default {
            }
          });

+          this.setExportCols({ exportCols: undefined });
+
          this.downloading = false;
          this.$message.success("食谱导出成功");
        });
      });
    },
    ...mapActions(["saveRecipes", "updateReviewStatus"]),
-    ...mapMutations(["updateStateData", "updateFontSize", "toggleLeftShow"]),
+    ...mapMutations([
+      "updateStateData",
+      "updateFontSize",
+      "toggleLeftShow",
+      "setExportCols",
+    ]),
  },
 };
 </script>