1，修复复制数据问题
2，调整食谱制作界面
This commit is contained in:
huangdeliang
@ -1,176 +0,0 @@
|
||||
<template>
|
||||
<div :class="className" :style="{ height: height, width: width }" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from "echarts";
|
||||
import VueScrollTo from "vue-scrollto";
|
||||
require("@/utils/echarts/myShine");
|
||||
import resize from "@/views/dashboard/mixins/resize";
|
||||
import { createNamespacedHelpers } from "vuex";
|
||||
const { mapMutations } = createNamespacedHelpers("recipes");
|
||||
const animationDuration = 6000;
|
||||
|
||||
export default {
|
||||
mixins: [resize],
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: "chart",
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: "100%",
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: "300px",
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
max: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
nameDict: {
|
||||
pHeat: "蛋白质",
|
||||
fHeat: "脂肪",
|
||||
cHeat: "碳水",
|
||||
},
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart();
|
||||
});
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return;
|
||||
}
|
||||
this.chart.dispose();
|
||||
this.chart = null;
|
||||
},
|
||||
updated() {
|
||||
// console.log("updated");
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(["setCurrentDay"]),
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$el, "myShine");
|
||||
this.chart.on("click", this.handleOnClick);
|
||||
this.updateChart(this.data.length > 0 ? this.data : {});
|
||||
},
|
||||
updateChart(source) {
|
||||
// console.log(this.max);
|
||||
this.chart.clear();
|
||||
this.chart.setOption({
|
||||
title: {
|
||||
text: "营养统计",
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
appendToBody: true,
|
||||
formatter: (params) => {
|
||||
// console.log(params);
|
||||
const [param] = params;
|
||||
const { name } = param;
|
||||
let totalHeat = 0;
|
||||
const tooltips = params.reduce(
|
||||
(arr, cur) => {
|
||||
const { value, seriesName } = cur;
|
||||
const nutriName = this.nameDict[seriesName];
|
||||
totalHeat += value[seriesName];
|
||||
const heatVal = value[seriesName].toFixed(1);
|
||||
const weightVal = value[
|
||||
`${seriesName.substring(0, 1)}Weight`
|
||||
].toFixed(1);
|
||||
arr.push(
|
||||
`${cur.marker} ${nutriName}：${weightVal}克（${heatVal}千卡）`
|
||||
);
|
||||
return arr;
|
||||
},
|
||||
[name]
|
||||
);
|
||||
tooltips[0] += ` - 共${totalHeat.toFixed(1)}千卡`;
|
||||
return tooltips.join("</br>");
|
||||
},
|
||||
},
|
||||
dataset: {
|
||||
dimensions: [
|
||||
"name",
|
||||
"pWeight",
|
||||
"pHeat",
|
||||
"fWeight",
|
||||
"fHeat",
|
||||
"cWeight",
|
||||
"cHeat",
|
||||
],
|
||||
source,
|
||||
},
|
||||
grid: {
|
||||
top: 55,
|
||||
left: 20,
|
||||
right: 50,
|
||||
bottom: 10,
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
name: "热量（千卡）",
|
||||
nameTextStyle: {
|
||||
color: "#262626",
|
||||
},
|
||||
},
|
||||
series: ["pHeat", "fHeat", "cHeat"].map((dim, idx) => ({
|
||||
name: dim,
|
||||
type: "bar",
|
||||
barWidth: 26,
|
||||
stack: "bar",
|
||||
encode: {
|
||||
y: dim,
|
||||
x: 0,
|
||||
},
|
||||
markLine: {
|
||||
data: [{ name: "BMR", yAxis: this.max ? this.max - 400 : 0 }],
|
||||
symbol: "none",
|
||||
lineStyle: {
|
||||
color: "#d96969",
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
borderWidth: 2,
|
||||
borderColor: "#fff",
|
||||
},
|
||||
})),
|
||||
});
|
||||
},
|
||||
handleOnClick(params) {
|
||||
// console.log(params);
|
||||
const { dataIndex } = params;
|
||||
this.setCurrentDay({ currentDay: dataIndex });
|
||||
VueScrollTo.scrollTo(`#recipes${dataIndex}`, 500, {
|
||||
container: "#recipes_content",
|
||||
});
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
data(newVal, oldVal) {
|
||||
if (newVal) {
|
||||
this.$nextTick(() => {
|
||||
this.updateChart(newVal);
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -1,206 +0,0 @@
|
||||
<template>
|
||||
<div
|
||||
:class="`aspect_pie_chart_wrapper ${className || ''}`"
|
||||
:style="{ height: height, width: width }"
|
||||
>
|
||||
<div ref="echart" :style="{ height: height, width: '200px' }" />
|
||||
<div>
|
||||
<el-table
|
||||
:data="mData"
|
||||
size="mini"
|
||||
border
|
||||
:cell-style="{ padding: '2px 0' }"
|
||||
:header-cell-style="{ padding: '4px 0', height: 'unset' }"
|
||||
class="small_table"
|
||||
>
|
||||
<el-table-column label="营养" prop="type" align="center" width="60" />
|
||||
<el-table-column label="蛋白质" prop="p" align="center" width="80" />
|
||||
<el-table-column label="脂肪" prop="f" align="center" width="80" />
|
||||
<el-table-column label="碳水" prop="c" align="center" width="80" />
|
||||
</el-table>
|
||||
<div class="summary">
|
||||
<div style="font-size: 12px; color: #606266;">总热量约等于</div>
|
||||
<div style="color: #515a6e; font-weight: bold">{{ totalHeat.toFixed(1) }}千卡</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from "echarts";
|
||||
require("@/utils/echarts/myShine");
|
||||
import resize from "@/views/dashboard/mixins/resize";
|
||||
import TextInfo from "@/components/TextInfo";
|
||||
|
||||
export default {
|
||||
mixins: [resize],
|
||||
components: {
|
||||
TextInfo,
|
||||
},
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: "chart",
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: "100%",
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: "300px",
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
totalHeat: 0,
|
||||
nameDict: {
|
||||
p: "蛋白质",
|
||||
f: "脂肪",
|
||||
c: "碳水",
|
||||
},
|
||||
typeDict: {
|
||||
Weight: "摄入量",
|
||||
Rate: "供能比",
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
mData() {
|
||||
const [data] = this.data;
|
||||
if (!data) {
|
||||
this.totalHeat = 0;
|
||||
return [];
|
||||
}
|
||||
this.totalHeat = data.cHeat + data.fHeat + data.pHeat;
|
||||
const mData = ["Weight", "Rate"].map((t, idx) => ({
|
||||
type: this.typeDict[t],
|
||||
...["p", "f", "c"].reduce((obj, cur) => {
|
||||
obj[cur] = idx
|
||||
? `${((data[`${cur}Heat`] / this.totalHeat) * 100).toFixed(2)}%`
|
||||
: `${data[`${cur}Weight`].toFixed(1)}克`;
|
||||
return obj;
|
||||
}, {}),
|
||||
}));
|
||||
// console.log(mData);
|
||||
return mData;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart();
|
||||
});
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return;
|
||||
}
|
||||
this.chart.dispose();
|
||||
this.chart = null;
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$refs.echart, "myShine");
|
||||
this.updateChart(this.data.length > 0 ? this.data[0] : {});
|
||||
},
|
||||
updateChart(data) {
|
||||
this.chart.clear();
|
||||
this.chart.setOption({
|
||||
title: {
|
||||
text: `${data.name}营养分析`,
|
||||
},
|
||||
tooltip: {
|
||||
position: "right",
|
||||
trigger: "item",
|
||||
appendToBody: true,
|
||||
formatter: (params) => {
|
||||
const {
|
||||
name,
|
||||
marker,
|
||||
percent,
|
||||
data: { value, oriData, dim },
|
||||
} = params;
|
||||
return [
|
||||
`${marker} ${name}`,
|
||||
`摄入量：${oriData[`${dim}Weight`].toFixed(1)}克`,
|
||||
`摄入热量：${value.toFixed(1)}千卡`,
|
||||
`供能比：${percent}%`,
|
||||
].join("</br>");
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: data.name,
|
||||
type: "pie",
|
||||
radius: [0, 50],
|
||||
center: ["50%", "50%"],
|
||||
data: ["p", "f", "c"].map((dim) => ({
|
||||
dim,
|
||||
value: data[`${dim}Heat`],
|
||||
name: this.nameDict[dim],
|
||||
oriData: data,
|
||||
})),
|
||||
labelLine: {
|
||||
length: 5,
|
||||
length2: 5,
|
||||
},
|
||||
// label: {
|
||||
// show: true,
|
||||
// position: "inside",
|
||||
// color: '#fff'
|
||||
// },
|
||||
itemStyle: {
|
||||
borderWidth: 1,
|
||||
borderColor: "#fff",
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
data(newVal, oldVal) {
|
||||
if (newVal) {
|
||||
this.$nextTick(() => {
|
||||
this.updateChart(newVal[0]);
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.aspect_pie_chart_wrapper {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
||||
& > div:nth-child(1) {
|
||||
// width: 200px
|
||||
}
|
||||
|
||||
// & > div:nth-child(2) {
|
||||
.small_table {
|
||||
.my_cell {
|
||||
padding: 2px 0 !important;
|
||||
}
|
||||
}
|
||||
// }
|
||||
|
||||
.summary {
|
||||
padding: 2px;
|
||||
border-bottom: 1px solid #dfe6ec;
|
||||
border-left: 1px solid #dfe6ec;
|
||||
border-right: 1px solid #dfe6ec;
|
||||
|
||||
& > div {
|
||||
padding: 3px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,263 +0,0 @@
|
||||
<template>
|
||||
<div
|
||||
class="recipes_aspect_wrapper"
|
||||
:style="`height: ${collapse ? 30 : 200}px`"
|
||||
>
|
||||
<div class="header" v-loading="loading">
|
||||
<div class="header_btns">
|
||||
<span>
|
||||
<el-button
|
||||
size="mini"
|
||||
v-if="!!recipesId"
|
||||
type="primary"
|
||||
icon="el-icon-document-copy"
|
||||
@click="handleOnTemplateClick"
|
||||
>
|
||||
另存为模板
|
||||
</el-button>
|
||||
</span>
|
||||
<span>
|
||||
<span class="font_size_style">
|
||||
字体大小：
|
||||
<el-select
|
||||
v-model="mFontSize"
|
||||
size="mini"
|
||||
style="width: 80px"
|
||||
@change="handleOnSizeChange"
|
||||
>
|
||||
<el-option
|
||||
v-for="size in fontSizeOpts"
|
||||
:key="size.value"
|
||||
:label="size.label"
|
||||
:value="size.value"
|
||||
/>
|
||||
</el-select>
|
||||
</span>
|
||||
<el-button size="mini" v-if="!recipesId" @click="handleOnBack"
|
||||
>返回</el-button
|
||||
>
|
||||
<el-popover
|
||||
placement="bottom"
|
||||
trigger="click"
|
||||
title="修改审核状态"
|
||||
style="margin-right: 12px"
|
||||
v-hasPermi="['recipes:plan:review']"
|
||||
>
|
||||
<div>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="success"
|
||||
@click="hanldeOnReveiwChange(2)"
|
||||
>审核通过</el-button
|
||||
>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="danger"
|
||||
@click="hanldeOnReveiwChange(1)"
|
||||
>未审核通过</el-button
|
||||
>
|
||||
</div>
|
||||
<el-button
|
||||
slot="reference"
|
||||
size="mini"
|
||||
v-if="reviewStatus"
|
||||
:type="reviewStatus === 1 ? 'danger' : 'success'"
|
||||
>
|
||||
{{ reviewStatus === 1 ? "未审核" : "已审核" }}
|
||||
</el-button>
|
||||
</el-popover>
|
||||
<el-button
|
||||
v-if="!recipesId"
|
||||
size="mini"
|
||||
type="primary"
|
||||
@click="handleOnSave"
|
||||
>生成食谱</el-button
|
||||
>
|
||||
</span>
|
||||
</div>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
@click="handleCollapseClick"
|
||||
class="collapse_btn"
|
||||
>
|
||||
{{ `${collapse ? "展开" : "收起"}` }}
|
||||
<em
|
||||
class="el-icon-arrow-down arrow_icon"
|
||||
:style="
|
||||
collapse ? 'transform: rotate(-180deg);' : 'transform: unset;'
|
||||
"
|
||||
/>
|
||||
</el-button>
|
||||
</div>
|
||||
<div
|
||||
class="content"
|
||||
:style="`visibility: ${collapse ? 'hidden' : 'visible'};`"
|
||||
>
|
||||
<BarChart
|
||||
v-if="data.length > 1"
|
||||
:data="data"
|
||||
height="170px"
|
||||
width="500px"
|
||||
:max="
|
||||
healthyData.basicBMR
|
||||
? parseFloat(
|
||||
healthyData.basicBMR.substring(
|
||||
0,
|
||||
healthyData.basicBMR.indexOf('千卡')
|
||||
)
|
||||
)
|
||||
: 0
|
||||
"
|
||||
/>
|
||||
<PieChart
|
||||
v-if="data.length === 1"
|
||||
:data="data"
|
||||
height="170px"
|
||||
width="500px"
|
||||
/>
|
||||
</div>
|
||||
<!-- 模板 -->
|
||||
<TemplateDialog ref="templateRef" @onConfirm="handleOnCopy" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import BarChart from "./BarChart";
|
||||
import PieChart from "./PieChart";
|
||||
import { addRecipesTemplate } from "@/api/custom/recipesTemplate";
|
||||
import { createNamespacedHelpers } from "vuex";
|
||||
const { mapActions, mapState, mapMutations } = createNamespacedHelpers(
|
||||
"recipes"
|
||||
);
|
||||
import TemplateDialog from "@/components/TemplateDialog";
|
||||
export default {
|
||||
name: "RecipesAspectCom",
|
||||
components: {
|
||||
BarChart,
|
||||
PieChart,
|
||||
TemplateDialog,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
mFontSize: 12,
|
||||
fontSizeOpts: [
|
||||
{ value: 8, label: "8" },
|
||||
{ value: 10, label: "10" },
|
||||
{ value: 12, label: "12" },
|
||||
{ value: 14, label: "14" },
|
||||
{ value: 16, label: "16" },
|
||||
{ value: 18, label: "18" },
|
||||
],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
// this.mFontSize = parseInt(localStorage.getItem("fontSize")) || 12;
|
||||
// this.updateFontSize({fontSize:})
|
||||
},
|
||||
updated() {
|
||||
// console.log(this.data);
|
||||
if (this.fontSize !== this.mFontSize) {
|
||||
this.mFontSize = this.fontSize;
|
||||
// console.log(this.fontSize);
|
||||
}
|
||||
},
|
||||
props: ["collapse", "data"],
|
||||
computed: {
|
||||
...mapState(["recipesId", "reviewStatus", "healthyData", "fontSize"]),
|
||||
},
|
||||
watch: {
|
||||
// fontSize(val) {
|
||||
// this.mFontSize = val;
|
||||
// },
|
||||
},
|
||||
methods: {
|
||||
handleOnSizeChange(fontSize) {
|
||||
this.updateFontSize({ fontSize });
|
||||
},
|
||||
handleCollapseClick() {
|
||||
this.$emit("update:collapse", !this.collapse);
|
||||
},
|
||||
handleOnSave() {
|
||||
this.saveRecipes({
|
||||
callback: (query) => {
|
||||
// console.log(query);
|
||||
this.$router.replace({
|
||||
path: "/recipes/build/" + query.name + "/" + query.planId,
|
||||
});
|
||||
},
|
||||
});
|
||||
},
|
||||
hanldeOnReveiwChange(reviewStatus) {
|
||||
this.updateReviewStatus({ reviewStatus });
|
||||
},
|
||||
handleOnBack() {
|
||||
this.updateStateData({ recipesData: [] });
|
||||
},
|
||||
handleOnTemplateClick() {
|
||||
this.$refs.templateRef.showDialog();
|
||||
},
|
||||
handleOnCopy(form) {
|
||||
this.loading = true;
|
||||
addRecipesTemplate(form).then((response) => {
|
||||
if (response.code === 200) {
|
||||
const { planId, id } = response.data;
|
||||
this.saveRecipes({
|
||||
cusId: 0,
|
||||
planId,
|
||||
callback: () => {
|
||||
this.$message.success(`另存为模板「${form.name}」成功`);
|
||||
this.loading = false;
|
||||
// window.open(
|
||||
// "/recipes/build/" + form.name + "/" + planId + "?temId=" + id,
|
||||
// "_blank"
|
||||
// );
|
||||
},
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
...mapActions(["saveRecipes", "updateReviewStatus"]),
|
||||
...mapMutations(["updateStateData", "updateFontSize"]),
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scope>
|
||||
.recipes_aspect_wrapper {
|
||||
transition: all 0.3s;
|
||||
padding-bottom: 12px;
|
||||
|
||||
.header {
|
||||
text-align: right;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.header_btns {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.collapse_btn {
|
||||
width: 42px;
|
||||
}
|
||||
|
||||
.arrow_icon {
|
||||
transition: all 0.3s;
|
||||
transform-origin: center center;
|
||||
}
|
||||
|
||||
.font_size_style {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -11,7 +11,7 @@
|
||||
:cell-class-name="cellClassName"
|
||||
:style="`outline: ${currentDay === num ? '1px solid #d53950' : 'none'}`"
|
||||
>
|
||||
<el-table-column prop="type" :width="100" align="center">
|
||||
<el-table-column prop="type" :width="80" align="center">
|
||||
<template slot="header">
|
||||
<div class="pointer_style" @click="handleOnResetCurrentDay">
|
||||
{{ `第${numDay}天` }}
|
||||
@ -477,7 +477,7 @@ export default {
|
||||
// console.log(this.copyData);
|
||||
if (this.copyData) {
|
||||
const data = {
|
||||
...this.copyData,
|
||||
...JSON.parse(JSON.stringify(this.copyData)),
|
||||
type,
|
||||
};
|
||||
if (!this.recipesId) {
|
||||
@ -619,6 +619,10 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.el-table .cell {
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.recipes_header {
|
||||
& > th {
|
||||
background: #d53950 !important;
|
||||
|
||||
@ -0,0 +1,177 @@
|
||||
<template>
|
||||
<div class="recipes_header_com_wrapper">
|
||||
<div class="header_btns" v-loading="loading">
|
||||
<section>
|
||||
<el-button
|
||||
size="mini"
|
||||
v-if="!!recipesId"
|
||||
type="primary"
|
||||
icon="el-icon-document-copy"
|
||||
@click="handleOnTemplateClick"
|
||||
>
|
||||
另存为模板
|
||||
</el-button>
|
||||
</section>
|
||||
<section>
|
||||
<span class="font_size_style">
|
||||
字体大小：
|
||||
<el-select
|
||||
v-model="fontSize"
|
||||
size="mini"
|
||||
style="width: 80px"
|
||||
@change="handleOnSizeChange"
|
||||
>
|
||||
<el-option
|
||||
v-for="size in fontSizeOpts"
|
||||
:key="size.value"
|
||||
:label="size.label"
|
||||
:value="size.value"
|
||||
/>
|
||||
</el-select>
|
||||
</span>
|
||||
<el-button size="mini" v-if="!recipesId" @click="handleOnBack"
|
||||
>返回</el-button
|
||||
>
|
||||
<el-popover
|
||||
placement="bottom"
|
||||
trigger="click"
|
||||
title="修改审核状态"
|
||||
style="margin-right: 12px"
|
||||
v-hasPermi="['recipes:plan:review']"
|
||||
>
|
||||
<div>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="success"
|
||||
@click="hanldeOnReveiwChange(2)"
|
||||
>审核通过</el-button
|
||||
>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="danger"
|
||||
@click="hanldeOnReveiwChange(1)"
|
||||
>未审核通过</el-button
|
||||
>
|
||||
</div>
|
||||
<el-button
|
||||
slot="reference"
|
||||
size="mini"
|
||||
v-if="reviewStatus"
|
||||
:type="reviewStatus === 1 ? 'danger' : 'success'"
|
||||
>
|
||||
{{ reviewStatus === 1 ? "未审核" : "已审核" }}
|
||||
</el-button>
|
||||
</el-popover>
|
||||
<el-button
|
||||
v-if="!recipesId"
|
||||
size="mini"
|
||||
type="primary"
|
||||
@click="handleOnSave"
|
||||
>生成食谱</el-button
|
||||
>
|
||||
</section>
|
||||
</div>
|
||||
<!-- 模板 -->
|
||||
<TemplateDialog ref="templateRef" @onConfirm="handleOnCopy" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { addRecipesTemplate } from "@/api/custom/recipesTemplate";
|
||||
import { createNamespacedHelpers } from "vuex";
|
||||
const { mapActions, mapState, mapMutations } = createNamespacedHelpers(
|
||||
"recipes"
|
||||
);
|
||||
import TemplateDialog from "@/components/TemplateDialog";
|
||||
export default {
|
||||
name: "RecipesHeaderCom",
|
||||
components: {
|
||||
// BarChart,
|
||||
// PieChart,
|
||||
TemplateDialog,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
nFontSize: 0,
|
||||
fontSizeOpts: [
|
||||
{ value: 8, label: "8" },
|
||||
{ value: 10, label: "10" },
|
||||
{ value: 12, label: "12" },
|
||||
{ value: 14, label: "14" },
|
||||
{ value: 16, label: "16" },
|
||||
{ value: 18, label: "18" },
|
||||
],
|
||||
};
|
||||
},
|
||||
updated() {
|
||||
},
|
||||
computed: {
|
||||
...mapState(["recipesId", "reviewStatus", "fontSize"]),
|
||||
},
|
||||
watch: {
|
||||
},
|
||||
methods: {
|
||||
handleOnSizeChange(fontSize) {
|
||||
this.updateFontSize({ fontSize });
|
||||
},
|
||||
handleOnSave() {
|
||||
this.saveRecipes({
|
||||
callback: (query) => {
|
||||
// console.log(query);
|
||||
this.$router.replace({
|
||||
path: "/recipes/build/" + query.name + "/" + query.planId,
|
||||
});
|
||||
},
|
||||
});
|
||||
},
|
||||
hanldeOnReveiwChange(reviewStatus) {
|
||||
this.updateReviewStatus({ reviewStatus });
|
||||
},
|
||||
handleOnBack() {
|
||||
this.updateStateData({ recipesData: [] });
|
||||
},
|
||||
handleOnTemplateClick() {
|
||||
this.$refs.templateRef.showDialog();
|
||||
},
|
||||
handleOnCopy(form) {
|
||||
this.loading = true;
|
||||
addRecipesTemplate(form).then((response) => {
|
||||
if (response.code === 200) {
|
||||
const { planId, id } = response.data;
|
||||
this.saveRecipes({
|
||||
cusId: 0,
|
||||
planId,
|
||||
callback: () => {
|
||||
this.$message.success(`另存为模板「${form.name}」成功`);
|
||||
this.loading = false;
|
||||
// window.open(
|
||||
// "/recipes/build/" + form.name + "/" + planId + "?temId=" + id,
|
||||
// "_blank"
|
||||
// );
|
||||
},
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
...mapActions(["saveRecipes", "updateReviewStatus"]),
|
||||
...mapMutations(["updateStateData", "updateFontSize"]),
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style rel="stylesheet/scss" lang="scss" scope>
|
||||
.recipes_header_com_wrapper {
|
||||
.header_btns {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.font_size_style {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,11 +1,7 @@
|
||||
<template>
|
||||
<div class="recipes_view_wrapper">
|
||||
<RecipesAspectCom :collapse.sync="collapse" :data="analyseData" />
|
||||
<div
|
||||
id="recipes_content"
|
||||
class="recipes_content"
|
||||
:style="`height: calc(100vh - ${collapse ? 62 : 232}px)`"
|
||||
>
|
||||
<RecipesHeaderCom />
|
||||
<div id="recipes_content" class="recipes_content">
|
||||
<RecipesCom
|
||||
v-for="(item, index) in data"
|
||||
:id="`recipes${index}`"
|
||||
@ -20,22 +16,16 @@
|
||||
</template>
|
||||
<script>
|
||||
import RecipesCom from "./RecipesCom";
|
||||
import RecipesAspectCom from "./RecipesAspectCom";
|
||||
import RecipesHeaderCom from "./RecipesHeaderCom";
|
||||
export default {
|
||||
name: "RecipesView",
|
||||
components: {
|
||||
RecipesCom,
|
||||
RecipesAspectCom,
|
||||
},
|
||||
computed: {
|
||||
mCollapse() {
|
||||
return analyseData.length ? this.collapse : false;
|
||||
},
|
||||
RecipesHeaderCom,
|
||||
},
|
||||
computed: {},
|
||||
data() {
|
||||
return {
|
||||
collapse: false,
|
||||
};
|
||||
return {};
|
||||
},
|
||||
props: ["data", "analyseData", "name", "numRange"],
|
||||
};
|
||||
@ -46,6 +36,7 @@ export default {
|
||||
|
||||
.recipes_content {
|
||||
overflow: auto;
|
||||
height: calc(100vh - 48px);
|
||||
background: white;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user