!307 添加食谱导出列选项

Merge pull request !307 from 德仔/develop

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) {

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;

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
-      <el-table-column label="备注" prop="remark" v-if="!preview">
+        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 {
+import { getDishClassNameById } from "@/api/custom/recipes";
-  getDishClassNameById 
-} from "@/api/custom/recipes";
 import { createNamespacedHelpers } from "vuex";
-const {
+const { mapActions, mapGetters, mapState, mapMutations } =
-  mapActions,
+  createNamespacedHelpers("recipes");
-  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 ||
+        column.label === "菜品" ||
-        columnIndex === 11 ||
+        column.label === "做法" ||
-        columnIndex === 12
+        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>

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>

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(
+const { mapActions, mapState, mapMutations } =
-  "recipes"
+  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("食谱开始天数", "导出图片", {
+      // this.$prompt("食谱开始天数", "导出图片", {
-        confirmButtonText: "确定",
+      //   confirmButtonText: "确定",
-        inputValue: this.oriStartNum,
+      //   inputValue: this.oriStartNum,
-        inputPattern: /^[1-9]\d*$/,
+      //   inputPattern: /^[1-9]\d*$/,
-        inputErrorMessage: "请输入正整数",
+      //   inputErrorMessage: "请输入正整数",
-      }).then(({ value }) => {
+      // }).then(({ value }) => {
-        this.handleOnExportImg(parseInt(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>