食谱编辑交互

2021-02-19 19:08:08 +08:00
parent e404c3be1a
commit 854171897d
10 changed files with 644 additions and 107 deletions
--- a/stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesCom/AddDishesDrawer/ConfigDishes.vue
+++ b/stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesCom/AddDishesDrawer/ConfigDishes.vue
@ -0,0 +1,165 @@
+<template>
+  <el-form>
+    <el-form-item label="菜品名">
+      <span style="color: #262626; font-size: 16px; font-weight: bold">{{
+        name
+      }}</span>
+    </el-form-item>
+    <el-form-item label="菜品类型">
+      <el-radio-group v-model="type" @change="handleOnTypeChange">
+        <el-radio
+          v-for="item in typeOptions"
+          :key="item.dictValue"
+          :label="item.dictValue"
+          >{{ item.dictLabel }}</el-radio
+        >
+      </el-radio-group>
+    </el-form-item>
+    <el-form-item label="食材分量">
+      <el-table
+        :data="igdList"
+        border
+        show-summary
+        size="mini"
+        :summary-method="getSummaries"
+      >
+        <el-table-column prop="name" label="食材" align="center" />
+        <el-table-column label="分量估算" align="center">
+          <template slot-scope="scope">
+            <EditableUnit
+              :weight="scope.row.cusWeight"
+              :unit="scope.row.cusUnit"
+              @onChange="(val) => handleOnCustomUnitChange(scope.row, val)"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column prop="weight" label="重量(g)" align="center">
+          <template slot-scope="scope">
+            <EditableText
+              :value="scope.row.weight"
+              @onChange="(val) => handleOnWeightChange(scope.row, val)"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="proteinRatio"
+          label="蛋白质/100g"
+          align="center"
+        />
+        <el-table-column prop="fatRatio" label="脂肪/100g" align="center" />
+        <el-table-column prop="carbonRatio" label="碳水/100g" align="center" />
+      </el-table>
+    </el-form-item>
+    <el-form-item label="推荐人群">
+      <el-tag
+        style="margin-right: 4px"
+        v-for="rec in recTags"
+        :key="rec"
+        type="success"
+      >
+        {{ rec }}
+      </el-tag>
+    </el-form-item>
+    <el-form-item label="忌口人群">
+      <el-tag
+        style="margin-right: 4px"
+        v-for="notRec in notRecTags"
+        :key="notRec"
+        type="danger"
+      >
+        {{ notRec }}
+      </el-tag>
+    </el-form-item>
+  </el-form>
+</template>
+<script>
+import produce from "immer";
+import EditableText from "../EditableText";
+import EditableUnit from "../EditableUnit";
+export default {
+  name: "ConfigDishes",
+  data() {
+    return {
+      nType: this.type,
+    };
+  },
+  props: {
+    name: {
+      type: String,
+      default: "",
+    },
+    type: {
+      type: String,
+      default: "",
+    },
+    igdList: {
+      type: Array,
+      default: [],
+    },
+    typeOptions: {
+      type: Array,
+      default: [],
+    },
+    notRecTags: {
+      type: Array,
+      default: [],
+    },
+    recTags: {
+      type: Array,
+      default: [],
+    },
+  },
+  components: {
+    EditableText,
+    EditableUnit,
+  },
+  computed: {},
+  methods: {
+    handleOnTypeChange(type) {
+      this.$emit("onChane", { type });
+    },
+    handleOnWeightChange(data, val) {
+      // console.log({ data, val });
+      this.$emit("onChane", {
+        igdList: produce(this.igdList, (draftState) => {
+          const tarIgd = draftState.find((obj) => obj.id === data.id);
+          if (tarIgd) {
+            tarIgd.weight = val;
+          }
+        }),
+      });
+    },
+    handleOnCustomUnitChange(data, val) {
+      // console.log({ data, val });
+      this.$emit("onChane", {
+        igdList: produce(this.igdList, (draftState) => {
+          const tarIgd = draftState.find((obj) => obj.id === data.id);
+          if (tarIgd) {
+            tarIgd.cusWeight = val.cusWeight;
+            tarIgd.cusUnit = val.cusUnit;
+          }
+        }),
+      });
+    },
+    getSummaries(param) {
+      const { columns, data } = param;
+      return columns.reduce(
+        (arr, cur, idx) => {
+          if (idx > 1) {
+            arr[idx] = data.reduce((acc, dAcc) => {
+              if (idx === 2) {
+                return acc + parseFloat(dAcc.weight);
+              }
+              return parseFloat(
+                (acc + (dAcc[cur.property] * dAcc.weight) / 100).toFixed(1)
+              );
+            }, 0);
+          }
+          return arr;
+        },
+        ["合计"]
+      );
+    },
+  },
+};
+</script>
--- a/stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesCom/AddDishesDrawer/SelectDishes.vue
+++ b/stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesCom/AddDishesDrawer/SelectDishes.vue
@ -0,0 +1,172 @@
+<template>
+  <div>
+    <el-form
+      :model="queryParams"
+      ref="queryForm"
+      :inline="true"
+      label-width="68px"
+    >
+      <el-form-item label="菜品名称" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入菜品名称"
+          clearable
+          size="mini"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="菜品类型" prop="type">
+        <el-select
+          v-model="queryParams.type"
+          placeholder="请选择菜品类型"
+          clearable
+          size="mini"
+        >
+          <el-option
+            v-for="dict in typeOptions"
+            :key="dict.dictValue"
+            :label="dict.dictLabel"
+            :value="dict.dictValue"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button
+          type="cyan"
+          icon="el-icon-search"
+          size="mini"
+          @click="handleQuery"
+          >搜索
+        </el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
+          >重置
+        </el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-table
+      v-loading="loading"
+      size="mini"
+      :data="dishesList"
+      height="600"
+      highlight-current-row
+      @current-change="handleCurrentChange"
+    >
+      <el-table-column label="菜品名称" align="center" prop="name" />
+      <el-table-column label="菜品类型" align="center" prop="type">
+        <template slot-scope="scope">
+          <AutoHideInfo :data="typeFormat(scope.row)" />
+        </template>
+      </el-table-column>
+      <el-table-column label="包含食材" align="center">
+        <template slot-scope="scope">
+          <div v-for="igd in scope.row.igdList" :key="igd.id">
+            {{ igd.name }}
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="推荐人群" align="center">
+        <template slot-scope="scope">
+          <AutoHideInfo :data="scope.row.recTags" :line="0" />
+        </template>
+      </el-table-column>
+      <el-table-column label="忌口人群" align="center">
+        <template slot-scope="scope">
+          <AutoHideInfo :data="scope.row.notRecTags" :line="0" />
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      layout="total, prev, pager, next"
+      @pagination="getList"
+    />
+  </div>
+</template>
+<script>
+import AutoHideInfo from "@/components/AutoHideInfo";
+import { listDishes } from "@/api/custom/dishes";
+import { createNamespacedHelpers } from "vuex";
+const { mapState } = createNamespacedHelpers("recipes");
+export default {
+  name: "SelectDishes",
+  props: [],
+  data() {
+    return {
+      loading: false,
+      total: 0,
+      dishesList: [],
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        name: null,
+        type: null,
+        reviewStatus: "yes",
+      },
+    };
+  },
+  components: {
+    AutoHideInfo,
+  },
+  computed: {
+    ...mapState(["typeOptions"]),
+  },
+  methods: {
+    getList() {
+      // console.log('getList')
+      this.loading = true;
+      listDishes(this.queryParams).then((result) => {
+        this.dishesList = result.rows.map((d) => {
+          const recTags = [],
+            notRecTags = [];
+          d.igdList.forEach((igd) => {
+            if (igd.rec) {
+              igd.rec.split(",").forEach((rec) => {
+                if (!recTags.includes(rec)) {
+                  recTags.push(rec);
+                }
+              });
+            }
+            if (igd.notRec) {
+              igd.notRec.split(",").forEach((notRec) => {
+                if (!notRecTags.includes(notRec)) {
+                  notRecTags.push(notRec);
+                }
+              });
+            }
+          });
+          return {
+            ...d,
+            recTags,
+            notRecTags,
+          };
+        });
+        this.total = result.total;
+        this.loading = false;
+      });
+    },
+    handleCurrentChange(data) {
+      this.$emit("onChange", data);
+    },
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    typeFormat(row, column) {
+      return !row.type
+        ? ""
+        : row.type
+            .split(",")
+            .map((type) => this.selectDictLabel(this.typeOptions, type));
+    },
+  },
+};
+</script>
--- a/stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesCom/AddDishesDrawer/index.vue
+++ b/stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesCom/AddDishesDrawer/index.vue
@ -0,0 +1,166 @@
+<template>
+  <el-drawer
+    title="添加菜品"
+    :visible.sync="visible"
+    :close-on-press-escape="false"
+    :before-close="handleOnClosed"
+    :wrapperClosable="false"
+    class="add_dishes_drawer_wrapper"
+    direction="ltr"
+    size="40%"
+  >
+    <div class="content_wrapper">
+      <div class="content_detail">
+        <el-steps :active="active" style="margin-bottom: 20px">
+          <el-step title="选择菜品" />
+          <el-step title="配置菜品" />
+        </el-steps>
+
+        <SelectDishes
+          ref="dishesRef"
+          v-show="active === 0"
+          @onChange="handleCurrentChange"
+        />
+        <ConfigDishes
+          v-show="active === 1"
+          v-bind="selDishes"
+          :typeOptions="typeOptions"
+          @onChange="handleOnConfigChange"
+        />
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button
+          size="small"
+          v-show="active === 1"
+          type="info"
+          @click="handleOnLastStepClick"
+          >上一步</el-button
+        >
+        <el-button
+          size="small"
+          v-show="active === 1"
+          type="primary"
+          @click="handleOnConfirmClick"
+          >确 定</el-button
+        >
+        <el-button size="small" @click="handleOnCancelClick">取 消</el-button>
+      </div>
+    </div>
+  </el-drawer>
+</template>
+<script>
+import { createNamespacedHelpers } from "vuex";
+const { mapState } = createNamespacedHelpers("recipes");
+
+import SelectDishes from "./SelectDishes";
+import ConfigDishes from "./ConfigDishes";
+
+export default {
+  name: "AddDishesDrawer",
+  components: {
+    SelectDishes,
+    ConfigDishes,
+  },
+  data() {
+    return {
+      visible: false,
+      active: 0,
+      typeOptions: [],
+      selDishes: {
+        name: "",
+        type: "",
+        igdList: [],
+        recTags:[],
+        notRecTags: []
+      },
+    };
+  },
+  computed: {
+    ...mapState(["dishesTypeOptions"]),
+  },
+  methods: {
+    showDrawer() {
+      this.visible = true;
+      this.$nextTick(() => {
+        this.$refs.dishesRef.getList();
+      });
+    },
+    handleOnClosed(done) {
+      done();
+    },
+    handleCurrentChange(data) {
+      if (!data) {
+        return;
+      }
+      console.log(data);
+      this.selDishes = data;
+      this.active = 1;
+      this.typeOptions = data.type.split(",").reduce((arr, cur, idx) => {
+        if (idx === 0) {
+          this.selDishes.type = cur;
+        }
+        const tarOpt = this.dishesTypeOptions.find(
+          (obj) => obj.dictValue === cur
+        );
+        if (tarOpt) {
+          arr.push(tarOpt);
+        }
+        return arr;
+      }, []);
+    },
+    handleOnConfigChange(val) {
+      Object.keys(val).forEach((key) => {
+        this.selDishes[key] = val[key];
+      });
+    },
+    handleOnCancelClick() {
+      this.visible = false;
+      this.active = 0;
+    },
+    handleOnLastStepClick() {
+      this.active = 0;
+    },
+    handleOnConfirmClick() {
+      this.visible = false;
+      this.active = 0;
+      this.$emit("onConfirm", this.selDishes);
+      // console.log(this.selDishes);
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+/deep/ :focus {
+  outline: 0;
+}
+.add_dishes_drawer_wrapper {
+  .content_wrapper {
+    padding: 16px 20px;
+    height: 100%;
+    overflow: auto;
+    display: flex;
+    flex-direction: column;
+
+    .content_detail {
+      flex: 1 1 0;
+      padding: 12px;
+      overflow: auto;
+    }
+
+    .dialog-footer {
+      flex: 0 0 45px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: flex-end;
+      padding: 0 12px;
+    }
+  }
+}
+</style>
+<style lang="scss">
+.add_dishes_drawer_wrapper {
+  #el-drawer__title {
+    margin-bottom: 0 !important;
+  }
+}
+</style>
--- a/stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesCom/index.vue
+++ b/stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesCom/index.vue
@ -11,31 +11,26 @@
        currentDay + 1 === num ? '1px solid #d96969' : 'none'
      }`"
    >
-      <el-table-column
-        prop="type"
-        :formatter="typeFormatter"
-        :width="100"
-        align="center"
-      >
+      <el-table-column prop="type" :width="100" align="center">
        <template slot="header">
          <span class="num_day" @click="handleOnOneDayAnalysis">{{
            `${name}第${num}天`
          }}</span>
        </template>
+        <template slot-scope="scope">
+          <span style="font-weight: bold; font-size: 14px">{{ typeFormatter(scope.row) }}</span>
+        </template>
      </el-table-column>
      <el-table-column label="菜品" prop="name" align="center">
        <template slot="header">
-          <el-popover placement="top" trigger="hover">
-            <el-button
-              type="primary"
-              size="mini"
-              icon="el-icon-edit"
-              class="fun_button"
-              @click="handleOnAdd"
-              >添加</el-button
-            >
-            <span class="num_day" slot="reference">菜品</span>
-          </el-popover>
+          <el-tooltip
+            class="item"
+            effect="dark"
+            content="点击添加菜品"
+            placement="top"
+          >
+            <span class="num_day" @click="handleOnAdd">菜品</span>
+          </el-tooltip>
        </template>
        <template slot-scope="scope">
          <el-popover placement="right" trigger="hover">
@ -63,7 +58,7 @@
          />
        </template>
      </el-table-column>
-      <el-table-column label="质量(g)" prop="weight" :width="80" align="center">
+      <el-table-column label="重量(g)" prop="weight" :width="80" align="center">
        <template slot-scope="scope">
          <EditableText
            :value="scope.row.weight"
@ -112,6 +107,7 @@
      />
      <el-table-column label="做法" prop="methods" />
    </el-table>
+    <AddDishesDrawer ref="drawerRef" @onConfirm="handleOnDishesConfirm" />
  </div>
 </template>
 <script>
@ -125,6 +121,7 @@ const {

 import EditableText from "./EditableText";
 import EditableUnit from "./EditableUnit";
+import AddDishesDrawer from "./AddDishesDrawer";

 export default {
  name: "RecipesCom",
@ -146,6 +143,7 @@ export default {
  components: {
    EditableText,
    EditableUnit,
+    AddDishesDrawer,
  },
  mounted() {
    // console.log(this.data);
@ -267,10 +265,8 @@ export default {
      this.setCurrentDay({ currentDay: this.num - 1 });
    },
    handleOnAdd() {
-      console.log(this.num);
-    },
-    handleOnEdit(data) {
-      console.log(data);
+      // console.log(this.num);
+      this.$refs.drawerRef.showDrawer();
    },
    handleOnDelete(data) {
      // console.log(data);
@ -278,7 +274,7 @@ export default {
    },
    handleOnWeightChange(data, weight) {
      // console.log({ data, weight });
-      this.updateRecipesDishesWeight({
+      this.updateRecipesDishesDetail({
        num: this.num - 1,
        dishesId: data.id,
        igdId: data.igdId,
@ -286,7 +282,7 @@ export default {
      });
    },
    handleOnCustomUnitChange(data, { cusWeight, cusUnit }) {
-      this.updateRecipesDishesCustomWeight({
+      this.updateRecipesDishesDetail({
        num: this.num - 1,
        dishesId: data.id,
        igdId: data.igdId,
@ -294,11 +290,17 @@ export default {
        cusUnit,
      });
    },
+    handleOnDishesConfirm(data) {
+      this.addRecipesDishes({
+        num: this.num - 1,
+        data,
+      });
+    },
    ...mapMutations([
      "setCurrentDay",
      "deleteSomeDayDishes",
-      "updateRecipesDishesWeight",
-      "updateRecipesDishesCustomWeight",
+      "updateRecipesDishesDetail",
+      "addRecipesDishes",
    ]),
  },
 };
@ -310,6 +312,7 @@ export default {

  .num_day {
    cursor: pointer;
+    outline: none;
  }
 }
 </style>