修改样式，修改逻辑

2021-02-24 18:20:45 +08:00
parent 13727e8d39
commit 31088215b5
23 changed files with 423 additions and 216 deletions
--- a/stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesAspectCom/BarChart.vue
+++ b/stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesAspectCom/BarChart.vue
@ -4,9 +4,11 @@

 <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 {
@ -55,8 +57,10 @@ export default {
    // 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) {
@ -134,6 +138,14 @@ export default {
        })),
      });
    },
+    handleOnClick(params) {
+      // console.log(params);
+      const { dataIndex } = params;
+      this.setCurrentDay({ currentDay: dataIndex });
+      VueScrollTo.scrollTo(`#recipes${dataIndex}`, 500, {
+        container: "#recipes_content",
+      });
+    },
  },
  watch: {
    data(newVal, oldVal) {
--- a/stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesAspectCom/PieChart.vue
+++ b/stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesAspectCom/PieChart.vue
@ -124,6 +124,7 @@ export default {
          text: `${data.name}营养统计`,
        },
        tooltip: {
+          position: 'right',
          trigger: "item",
          appendToBody: true,
          formatter: (params) => {
--- a/stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesAspectCom/index.vue
+++ b/stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesAspectCom/index.vue
@ -60,7 +60,12 @@ export default {
      this.$emit("update:collapse", !this.collapse);
    },
    handleOnSave() {
-      this.saveRecipes();
+      this.saveRecipes({
+        callback: (query) => {
+          console.log(query);
+          this.$router.replace({ path: "/recipes/build", query });
+        },
+      });
    },
    ...mapActions(["saveRecipes"]),
  },
--- a/stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesCom/AddDishesDrawer/ConfigDishes.vue
+++ b/stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesCom/AddDishesDrawer/ConfigDishes.vue
@ -6,7 +6,7 @@
      }}</span>
    </el-form-item>
    <el-form-item label="菜品类型">
-      <el-radio-group v-model="type" @change="handleOnTypeChange">
+      <el-radio-group v-model="mType" @change="handleOnTypeChange">
        <el-radio
          v-for="item in typeOptions"
          :key="item.dictValue"
@ -41,11 +41,7 @@
            />
          </template>
        </el-table-column>
-        <el-table-column
-          prop="proteinRatio"
-          label="P/100g"
-          align="center"
-        />
+        <el-table-column prop="proteinRatio" label="P/100g" align="center" />
        <el-table-column prop="fatRatio" label="F/100g" align="center" />
        <el-table-column prop="carbonRatio" label="C/100g" align="center" />
      </el-table>
@ -80,7 +76,7 @@ export default {
  name: "ConfigDishes",
  data() {
    return {
-      nType: this.type,
+      mType: this.type,
    };
  },
  props: {
@ -113,14 +109,19 @@ export default {
    EditableText,
    EditableUnit,
  },
+  watch: {
+    type(val) {
+      this.mType = val;
+    },
+  },
  computed: {},
  methods: {
    handleOnTypeChange(type) {
-      this.$emit("onChane", { type });
+      this.$emit("onChange", { type });
    },
    handleOnWeightChange(data, val) {
      // console.log({ data, val });
-      this.$emit("onChane", {
+      this.$emit("onChange", {
        igdList: produce(this.igdList, (draftState) => {
          const tarIgd = draftState.find((obj) => obj.id === data.id);
          if (tarIgd) {
@ -131,7 +132,7 @@ export default {
    },
    handleOnCustomUnitChange(data, val) {
      // console.log({ data, val });
-      this.$emit("onChane", {
+      this.$emit("onChange", {
        igdList: produce(this.igdList, (draftState) => {
          const tarIgd = draftState.find((obj) => obj.id === data.id);
          if (tarIgd) {
--- a/stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesCom/index.vue
+++ b/stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesCom/index.vue
@ -7,15 +7,14 @@
      :cell-style="{ padding: '2px 0' }"
      :header-cell-style="{ padding: '4px 0', height: 'unset' }"
      size="mini"
-      :style="`outline: ${
-        currentDay + 1 === num ? '1px solid #d96969' : 'none'
-      }`"
+      :style="`outline: ${currentDay === num ? '1px solid #d96969' : 'none'}`"
    >
      <el-table-column prop="type" :width="100" align="center">
        <template slot="header">
-          <span class="num_day" @click="handleOnOneDayAnalysis">{{
-            `${name}第${num}天`
-          }}</span>
+          <div class="num_day" @click="handleOnOneDayAnalysis">
+            <div>{{ name }}</div>
+            <div>{{ `第${numDay}天` }}</div>
+          </div>
        </template>
        <template slot-scope="scope">
          <span style="font-weight: bold; font-size: 14px">{{
@ -23,7 +22,7 @@
          }}</span>
        </template>
      </el-table-column>
-      <el-table-column label="菜品" prop="name" align="center">
+      <el-table-column label="菜品" prop="name" align="center" :width="180">
        <template slot="header">
          <el-tooltip
            class="item"
@ -50,7 +49,12 @@
          </el-popover>
        </template>
      </el-table-column>
-      <el-table-column label="食材" prop="igdName" align="center" />
+      <el-table-column
+        label="食材"
+        prop="igdName"
+        align="center"
+        :width="180"
+      />
      <el-table-column label="分量估算" :width="80" align="center">
        <template slot-scope="scope">
          <EditableUnit
@ -71,42 +75,84 @@
      <el-table-column
        label="蛋白质/100g"
        prop="proteinRatio"
-        :width="100"
+        :width="60"
        align="center"
-      />
+      >
+        <template slot="header">
+          <div class="num_day" @click="handleOnOneDayAnalysis">
+            <div>蛋白质</div>
+            <div>/100g</div>
+          </div>
+        </template>
+      </el-table-column>
      <el-table-column
        label="脂肪/100g"
        prop="fatRatio"
-        :width="90"
+        :width="60"
        align="center"
-      />
+      >
+        <template slot="header">
+          <div class="num_day" @click="handleOnOneDayAnalysis">
+            <div>脂肪</div>
+            <div>/100g</div>
+          </div>
+        </template>
+      </el-table-column>
      <el-table-column
        label="碳水/100g"
        prop="carbonRatio"
-        :width="90"
+        :width="60"
        align="center"
-      />
+      >
+        <template slot="header">
+          <div class="num_day" @click="handleOnOneDayAnalysis">
+            <div>碳水</div>
+            <div>/100g</div>
+          </div>
+        </template>
+      </el-table-column>
      <el-table-column
        label="蛋白质含量"
        prop="proteinRatio"
-        :width="90"
+        :width="60"
        align="center"
        :formatter="nutriFormatter"
-      />
+      >
+        <template slot="header">
+          <div class="num_day" @click="handleOnOneDayAnalysis">
+            <div>蛋白质</div>
+            <div>含量</div>
+          </div>
+        </template>
+      </el-table-column>
      <el-table-column
        label="脂肪含量"
        prop="fatRatio"
-        :width="90"
+        :width="60"
        align="center"
        :formatter="nutriFormatter"
-      />
+      >
+        <template slot="header">
+          <div class="num_day" @click="handleOnOneDayAnalysis">
+            <div>脂肪</div>
+            <div>含量</div>
+          </div>
+        </template>
+      </el-table-column>
      <el-table-column
        label="碳水含量"
        prop="carbonRatio"
-        :width="90"
+        :width="60"
        align="center"
        :formatter="nutriFormatter"
-      />
+      >
+        <template slot="header">
+          <div class="num_day" @click="handleOnOneDayAnalysis">
+            <div>碳水</div>
+            <div>含量</div>
+          </div>
+        </template>
+      </el-table-column>
      <el-table-column label="做法" prop="methods" />
    </el-table>
    <AddDishesDrawer ref="drawerRef" @onConfirm="handleOnDishesConfirm" />
@ -141,6 +187,10 @@ export default {
      type: Number,
      default: 0,
    },
+    numDay: {
+      type: Number,
+      default: 0,
+    },
  },
  components: {
    EditableText,
@ -266,7 +316,7 @@ export default {
    },
    handleOnOneDayAnalysis(e) {
      // 校验某天
-      this.setCurrentDay({ currentDay: this.num - 1 });
+      this.setCurrentDay({ currentDay: this.num });
    },
    handleOnAdd() {
      // console.log(this.num);
@ -274,12 +324,12 @@ export default {
    },
    handleOnDelete(data) {
      // console.log(data);
-      this.deleteDishes({ num: this.num - 1, id: data.id });
+      this.deleteDishes({ num: this.num, id: data.id });
    },
    handleOnWeightChange(data, weight) {
-      // console.log({ data, weight });
+      console.log({ data, weight });
      this.updateDishes({
-        num: this.num - 1,
+        num: this.num,
        dishesId: data.dishesId,
        igdId: data.igdId,
        weight,
@ -288,7 +338,7 @@ export default {
    handleOnCustomUnitChange(data, { cusWeight, cusUnit }) {
      // console.log({ data, cusWeight, cusUnit });
      this.updateDishes({
-        num: this.num - 1,
+        num: this.num,
        dishesId: data.dishesId,
        igdId: data.igdId,
        cusWeight,
@ -298,7 +348,7 @@ export default {
    handleOnDishesConfirm(data) {
      // console.log(data);
      this.addDishes({
-        num: this.num - 1,
+        num: this.num,
        data,
      });
    },
--- a/stdiet-ui/src/views/custom/recipesBuild/RecipesView/index.vue
+++ b/stdiet-ui/src/views/custom/recipesBuild/RecipesView/index.vue
@ -2,15 +2,18 @@
  <div class="recipes_view_wrapper">
    <RecipesAspectCom :collapse.sync="collapse" :data="analyseData" />
    <div
+      id="recipes_content"
      class="recipes_content"
-      :style="`height: calc(100vh - ${collapse ? 142 : 312}px)`"
+      :style="`height: calc(100vh - ${collapse ? 62 : 232}px)`"
    >
      <RecipesCom
        v-for="(item, index) in data"
+        :id="`recipes${index}`"
        :key="item.id"
        :data="item"
        :name="name"
-        :num="index + 1"
+        :num="index"
+        :numDay="item.numDay"
      />
    </div>
  </div>
--- a/stdiet-ui/src/views/custom/recipesBuild/index.vue
+++ b/stdiet-ui/src/views/custom/recipesBuild/index.vue
@ -1,5 +1,5 @@
 <template>
-  <div class="recipes_build_wrapper">
+  <div class="recipes_build_wrapper" v-title :data-title="$route.query.name">
    <div class="left" v-loading="recipesDataLoading">
      <RecipesView
        v-if="!!recipesData.length"
@ -35,13 +35,13 @@ export default {
    return {};
  },
  mounted() {
-    const { cusId, planId, startDate, endDate, recipesId } = this.$route.query;
+    const { cusId, planId, startNum, endNum, recipesId } = this.$route.query;

    this.init({
      cusId,
      planId,
-      startDate,
-      endDate,
+      startNum: parseInt(startNum),
+      endNum: parseInt(endNum),
      recipesId,
    }).catch((err) => {
      this.$message.error(err.message);
@ -78,7 +78,7 @@ export default {
 .recipes_build_wrapper {
  padding: 16px;
  display: flex;
-  height: calc(100vh - 86px);
+  height: 100vh;
  .left {
    flex: 4;
    border-right: 1px solid #e6ebf5;