From 723f0327d2f91a0ac28e44f35e55a225436b5181 Mon Sep 17 00:00:00 2001
From: huangdeliang <huangdeliang@skieer.com>
Date: Tue, 6 Jul 2021 11:21:36 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E9=A3=9F=E8=B0=B1?=
=?UTF-8?q?=E5=AF=BC=E5=87=BA=E5=88=97=E9=80=89=E9=A1=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../src/components/BodySignView/index.vue | 13 +++
stdiet-ui/src/store/modules/recipes.js | 6 +-
.../RecipesView/RecipesCom/index.vue | 84 +++++++++-----
.../RecipesHeaderCom/ExportDialog/index.vue | 104 ++++++++++++++++++
.../RecipesView/RecipesHeaderCom/index.vue | 42 +++++--
5 files changed, 211 insertions(+), 38 deletions(-)
create mode 100644 stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesHeaderCom/ExportDialog/index.vue
diff --git a/stdiet-ui/src/components/BodySignView/index.vue b/stdiet-ui/src/components/BodySignView/index.vue
index 1f379cf07..c60286b1c 100644
--- 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) {
diff --git a/stdiet-ui/src/store/modules/recipes.js b/stdiet-ui/src/store/modules/recipes.js
index f01aaecf2..22a5bff73 100644
--- 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;
diff --git a/stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesCom/index.vue b/stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesCom/index.vue
index b5dab009f..748d80cea 100644
--- 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>
diff --git a/stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesHeaderCom/ExportDialog/index.vue b/stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesHeaderCom/ExportDialog/index.vue
new file mode 100644
index 000000000..e4f63f1f8
--- /dev/null
+++ 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>
diff --git a/stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesHeaderCom/index.vue b/stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesHeaderCom/index.vue
index 3403859e2..e1bf886dc 100644
--- 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>
From 133182293c5bd7c6bd34d8ebe82e1ff65ac22c55 Mon Sep 17 00:00:00 2001
From: huangdeliang <huangdeliang@skieer.com>
Date: Tue, 6 Jul 2021 12:11:50 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=AE=BD=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../RecipesView/RecipesHeaderCom/index.vue | 56 ++++++++++++-------
1 file changed, 35 insertions(+), 21 deletions(-)
diff --git a/stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesHeaderCom/index.vue b/stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesHeaderCom/index.vue
index e1bf886dc..8f713478a 100644
--- a/stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesHeaderCom/index.vue
+++ b/stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesHeaderCom/index.vue
@@ -221,14 +221,6 @@ 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.$refs.exportDialogRef.showDialog({
num: this.oriStartNum,
});
@@ -239,18 +231,20 @@ export default {
this.$message.warning("食谱导出中，请勿操作界面...");
//
this.downloading = true;
- this.$nextTick(() => {
- const centerContentDom = document.getElementById("center_content");
- if (!centerContentDom) {
- this.downloading = false;
- return;
- }
- centerContentDom.style.overflow = "visible";
- const recipesDom = document.getElementById("recipes_content");
- if (!recipesDom) {
- this.downloading = false;
- return;
- }
+ const centerContentDom = document.getElementById("center_content");
+ if (!centerContentDom) {
+ this.downloading = false;
+ return;
+ }
+ centerContentDom.style.overflow = "visible";
+ const recipesDom = document.getElementById("recipes_content");
+ if (!recipesDom) {
+ this.downloading = false;
+ return;
+ }
+ recipesDom.style.overflow = "visible";
+ recipesDom.style.width = this.getRecipesDomWidth(exportCols);
+ setTimeout(() => {
Array.from({ length: this.recipesData.length }).forEach((_, idx) => {
const tmpElm = document.getElementById(`cus_name_${idx}`);
if (tmpElm) {
@@ -261,7 +255,7 @@ export default {
tmpNum.innerText = `第${startNum + idx}天`;
}
});
- recipesDom.style.overflow = "visible";
+
html2canvans(recipesDom, {
scale: 1.5,
height: recipesDom.scrollHeight,
@@ -278,6 +272,7 @@ export default {
centerContentDom.style.overflow = "auto";
recipesDom.style.overflow = "auto";
+ recipesDom.style.width = "unset";
Array.from({ length: this.recipesData.length }).forEach((_, idx) => {
const tmpElm = document.getElementById(`cus_name_${idx}`);
@@ -295,7 +290,26 @@ export default {
this.downloading = false;
this.$message.success("食谱导出成功");
});
+ }, 500);
+ },
+ getRecipesDomWidth(cols) {
+ let width = 80;
+ cols.forEach((col) => {
+ if (
+ col === "菜品" ||
+ col === "食材" ||
+ col === "做法" ||
+ col === "备注"
+ ) {
+ width += 220;
+ } else if (col === "分量估算" || col === "重量(g)") {
+ width += 80;
+ } else {
+ width += 60;
+ }
});
+
+ return `${width}px`;
},
...mapActions(["saveRecipes", "updateReviewStatus"]),
...mapMutations([