From 144e3550aacefc225ac927282f8cb9107bc18960 Mon Sep 17 00:00:00 2001
From: huangdeliang <huangdeliang@skieer.com>
Date: Fri, 19 Mar 2021 17:08:21 +0800
Subject: [PATCH 1/4] =?UTF-8?q?=E8=B7=9F=E6=8D=A2=E8=8F=9C=E5=93=81?=
 =?UTF-8?q?=E6=8E=A7=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../IngredientListView/index.vue              | 131 ++++
 .../custom/dishes/EditDishesDrawer/index.vue  | 507 +++++++++++++++
 stdiet-ui/src/views/custom/dishes/index.vue   | 581 +-----------------
 .../src/views/custom/ingredient/index.vue     |  10 +
 4 files changed, 668 insertions(+), 561 deletions(-)
 create mode 100644 stdiet-ui/src/views/custom/dishes/EditDishesDrawer/IngredientListView/index.vue
 create mode 100644 stdiet-ui/src/views/custom/dishes/EditDishesDrawer/index.vue

diff --git a/stdiet-ui/src/views/custom/dishes/EditDishesDrawer/IngredientListView/index.vue b/stdiet-ui/src/views/custom/dishes/EditDishesDrawer/IngredientListView/index.vue
new file mode 100644
index 000000000..60cff0173
--- /dev/null
+++ b/stdiet-ui/src/views/custom/dishes/EditDishesDrawer/IngredientListView/index.vue
@@ -0,0 +1,131 @@
+<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"
+      border
+      :data="ingredientList"
+      :cell-style="{ padding: 0 }"
+      :header-cell-style="{ padding: 0, height: 'unset' }"
+      @current-change="handleCurrentChange"
+    >
+      <el-table-column label="食材名称" align="center" prop="name" />
+      <el-table-column
+        label="食材类别"
+        align="center"
+        prop="type"
+        :formatter="typeFormat"
+      />
+      <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>
+
+    <pagination
+      v-show="total > 0"
+      :background="false"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+      layout="total, prev, pager, next"
+    />
+  </div>
+</template>
+<script>
+import { listIngredient } from "@/api/custom/ingredient";
+export default {
+  name: "IngredientListView",
+  data() {
+    return {
+      loading: false,
+      total: 0,
+      ingredientList: [],
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        name: null,
+        type: null,
+        area: null,
+        reviewStatus: "yes",
+      },
+    };
+  },
+  props: ["typeOptions", "visible"],
+  watch: {},
+  methods: {
+    getList() {
+      this.loading = true;
+      listIngredient(this.queryParams).then((response) => {
+        this.ingredientList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    reset() {
+      this.resetForm("queryForm");
+    },
+    // 食材类别字典翻译
+    typeFormat(row, column) {
+      return this.selectDictLabel(this.typeOptions, row.type);
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    handleCurrentChange(data) {
+      this.$emit("onSelect", data);
+    },
+  },
+};
+</script>
diff --git a/stdiet-ui/src/views/custom/dishes/EditDishesDrawer/index.vue b/stdiet-ui/src/views/custom/dishes/EditDishesDrawer/index.vue
new file mode 100644
index 000000000..7ee9b0666
--- /dev/null
+++ b/stdiet-ui/src/views/custom/dishes/EditDishesDrawer/index.vue
@@ -0,0 +1,507 @@
+<template>
+  <el-drawer
+    :title="title"
+    :visible.sync="open"
+    :wrapperClosable="false"
+    :before-close="handleClose"
+    size="50%"
+    :close-on-press-escape="false"
+  >
+    <div class="edit_dishes_drawer_wrapper">
+      <el-row class="content_detail" v-loading="entireLoading">
+        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+          <el-col :span="12">
+            <el-form-item label="菜品名称" prop="name">
+              <el-input v-model="form.name" placeholder="请输入菜品名称" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="审核状态" prop="reviewStatus">
+              <el-select
+                v-model="form.reviewStatus"
+                placeholder="请选择审核状态"
+                clearable
+              >
+                <el-option
+                  v-for="dict in reviewStatusOptions"
+                  :key="dict.dictValue"
+                  :label="dict.dictLabel"
+                  :value="dict.dictValue"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="菜品种类" prop="dishClass">
+              <el-cascader
+                filterable
+                v-model="form.dishClass"
+                :options="dishClassOptions"
+                :props="{ expandTrigger: 'hover' }"
+                placeholder="请选择菜品种类"
+              ></el-cascader>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="菜品类型" prop="type">
+              <el-select
+                v-model="form.type"
+                placeholder="请选择菜品类型"
+                multiple
+              >
+                <el-option
+                  v-for="dict in typeOptions"
+                  :key="dict.dictValue"
+                  :label="dict.dictLabel"
+                  :value="dict.dictValue"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="是否主食" prop="isMain">
+              <el-radio-group v-model="form.isMain">
+                <el-radio :label="0">是</el-radio>
+                <el-radio :label="1">否</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="待选食材">
+              <IngredientListView
+                ref="igdRef"
+                :typeOptions="ingTypeOptions"
+                @onSelect="handleOnIgdSelect"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="已选食材" prop="igdList">
+              <el-table
+                :data="form.igdList"
+                border
+                show-summary
+                :cell-style="{ padding: 0 }"
+                :header-cell-style="{ padding: 0, height: 'unset' }"
+                :summary-method="getSummaries"
+              >
+                <el-table-column prop="name" label="食材" align="center" />
+                <el-table-column label="通俗计量" align="center">
+                  <template slot-scope="scope">
+                    <span class="cus-unit">
+                      <el-select size="mini" v-model="scope.row.cusWeight">
+                        <el-option
+                          v-for="dict in cusWeightOptions"
+                          :key="dict.dictValue"
+                          :label="dict.dictLabel"
+                          :value="parseInt(dict.dictValue)"
+                        />
+                      </el-select>
+                      <el-select size="mini" v-model="scope.row.cusUnit">
+                        <el-option
+                          v-for="dict in cusUnitOptions"
+                          :key="dict.dictValue"
+                          :label="dict.dictLabel"
+                          :value="parseInt(dict.dictValue)"
+                        />
+                      </el-select>
+                    </span>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="weight" label="重量(g)" align="center">
+                  <template slot-scope="scope">
+                    <el-input-number
+                      class="weight"
+                      v-model="scope.row.weight"
+                      size="mini"
+                      controls-position="right"
+                      :min="0"
+                      :step="5"
+                    />
+                  </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-column label="热量(kcal)" align="center">
+                  <template slot-scope="scope">
+                    {{
+                      `${(
+                        ((scope.row.proteinRatio * scope.row.weight) / 100) *
+                          4 +
+                        ((scope.row.fatRatio * scope.row.weight) / 100) * 9 +
+                        ((scope.row.carbonRatio * scope.row.weight) / 100) * 4
+                      ).toFixed(1)}`
+                    }}
+                  </template>
+                </el-table-column>
+                <el-table-column label="操作" align="center">
+                  <template slot-scope="scope">
+                    <el-button type="text" @click="handleOnDelete(scope.row)"
+                      >删除</el-button
+                    >
+                  </template>
+                </el-table-column>
+              </el-table>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="推荐人群" v-if="!!selRec.length">
+              <el-tag
+                style="margin-right: 4px"
+                v-for="rec in selRec"
+                :key="rec"
+                type="success"
+              >
+                {{ rec }}
+              </el-tag>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="忌口人群" v-if="!!selNotRec.length">
+              <el-tag
+                style="margin-right: 4px"
+                v-for="notRec in selNotRec"
+                :key="notRec"
+                type="danger"
+              >
+                {{ notRec }}
+              </el-tag>
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="24">
+            <el-form-item label="做法" prop="methods">
+              <el-input
+                v-model="form.methods"
+                type="textarea"
+                placeholder="请输入内容"
+                rows="4"
+              />
+            </el-form-item>
+          </el-col>
+        </el-form>
+      </el-row>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </div>
+  </el-drawer>
+</template>
+<script>
+import { addDishes, updateDishes, getDishes } from "@/api/custom/dishes";
+import IngredientListView from "./IngredientListView";
+
+export default {
+  name: "EditDishesDrawer",
+  components: {
+    IngredientListView,
+  },
+  created() {
+    this.getDicts("cus_ing_type").then((response) => {
+      this.ingTypeOptions = response.data;
+    });
+    this.getDicts("cus_cus_unit").then((response) => {
+      this.cusUnitOptions = response.data;
+    });
+    this.getDicts("cus_cus_weight").then((response) => {
+      this.cusWeightOptions = response.data;
+    });
+  },
+  data() {
+    return {
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 通俗单位
+      cusUnitOptions: [],
+      //
+      cusWeightOptions: [],
+      // 食材类别字典
+      ingTypeOptions: [],
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        name: [
+          { required: true, message: "菜品名称不能为空", trigger: "blur" },
+        ],
+        type: [
+          { required: true, message: "菜品类型不能为空", trigger: "blur" },
+        ],
+        igdList: [{ required: true, message: "食材不能为空", trigger: "blur" }],
+      },
+      //
+      entireLoading: false,
+      // 选中的食材分量列表
+      //
+      selRec: [],
+      selNotRec: [],
+    };
+  },
+  props: [
+    "typeOptions",
+    "reviewStatusOptions",
+    "dishClassBigOptions",
+    "dishClassOptions",
+    "dishClassSmallOptions",
+  ],
+  watch: {
+    "form.igdList": function (val) {
+      const selRec = [];
+      const selNotRec = [];
+      val.forEach((obj) => {
+        if (obj.rec) {
+          obj.rec.split(",").forEach((rec) => {
+            if (!selRec.includes(rec)) {
+              selRec.push(rec);
+            }
+          });
+        }
+        if (obj.notRec) {
+          obj.notRec.split(",").forEach((notRec) => {
+            if (!selNotRec.includes(notRec)) {
+              selNotRec.push(notRec);
+            }
+          });
+        }
+      });
+      this.selRec = selRec;
+      this.selNotRec = selNotRec;
+    },
+
+    showNotRec() {
+      return !!this.selNotRec.length;
+    },
+  },
+  methods: {
+    showDrawer(id) {
+      this.open = true;
+      this.title = id ? "修改菜品" : "新建菜品";
+      this.reset();
+      if (id) {
+        this.fetchDishesDetail(id);
+      }
+      this.$nextTick(() => {
+        this.$refs.igdRef.getList();
+      });
+    },
+    fetchDishesDetail(id) {
+      getDishes(id).then((response) => {
+        this.form = response.data;
+        this.form.dishClass = [this.form.bigClass, this.form.smallClass];
+        this.form.type = this.form.type ? this.form.type.split(",") : [];
+      });
+    },
+    handleOnIgdSelect(data) {
+      if (this.form.igdList.some((obj) => obj.id === data.id)) {
+        this.$message.error(`已存在食材${data.name}`);
+        return;
+      }
+      this.form.igdList.push({
+        ...data,
+        weight: 100,
+        cusUnit: 1,
+        cusWeight: 1,
+      });
+    },
+    handleOnDelete(data) {
+      this.form.igdList = this.form.igdList.filter((obj) => obj.id !== data.id);
+    },
+    cusUnitFormat(row, column) {
+      return this.selectDictLabel(this.cusUnitOptions, row.type);
+    },
+    cusWeightFormat(row, column) {
+      return this.selectDictLabel(this.cusWeightOptions, row.cusWeight);
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: null,
+        name: null,
+        type: [],
+        dishClass: [],
+        methods: null,
+        createBy: null,
+        createTime: null,
+        updateBy: null,
+        updateTime: null,
+        igdList: [],
+        isMain: 1,
+      };
+      this.selRec = [];
+      this.selNotRec = [];
+      this.resetForm("form");
+      this.$nextTick(() => {
+        this.$refs.igdRef.reset();
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate((valid) => {
+        if (valid) {
+          const data = JSON.parse(JSON.stringify(this.form));
+          // console.log({ data });
+          data.type = data.type.join(",");
+          if (data.id != null) {
+            updateDishes(data).then((response) => {
+              if (response.code === 200) {
+                this.msgSuccess("修改成功");
+                this.open = false;
+                this.$emit("onSuccess");
+              }
+            });
+          } else {
+            addDishes(data).then((response) => {
+              if (response.code === 200) {
+                this.msgSuccess("新增成功");
+                this.open = false;
+                this.$emit("onSuccess");
+              }
+            });
+          }
+        }
+      });
+    },
+
+    getSummaries(param) {
+      const { columns, data } = param;
+      // console.log(data);
+      return columns.reduce(
+        (arr, cur, idx) => {
+          if (idx > 1 && idx !== 7) {
+            if (idx === 6) {
+              arr[6] = (arr[3] * 4 + arr[4] * 9 + arr[5] * 4).toFixed(1);
+            } else {
+              arr[idx] = data.reduce((acc, dAcc) => {
+                if (idx === 2) {
+                  return acc + parseFloat(dAcc.weight);
+                }
+                return parseFloat(
+                  (
+                    acc +
+                    (dAcc[cur.property] * parseFloat(dAcc.weight)) / 100
+                  ).toFixed(1)
+                );
+              }, 0);
+            }
+          }
+          return arr;
+        },
+        ["合计"]
+      );
+    },
+    handleClose(done) {
+      this.reset();
+      done();
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.edit_dishes_drawer_wrapper {
+  height: 100%;
+  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">
+#el-drawer__title {
+  & > span:focus {
+    outline: 0;
+  }
+}
+
+.el-transfer-panel__filter {
+  margin: 2px;
+}
+
+.el-transfer-panel__list.is-filterable {
+  padding-bottom: 28px;
+}
+
+.cus-unit {
+  display: inline-flex;
+  .el-input-number--mini {
+    width: 38px;
+  }
+
+  .el-input-number {
+    .el-input-number__decrease {
+      display: none;
+    }
+    .el-input-number__increase {
+      display: none;
+    }
+
+    .el-input {
+      width: 38px;
+    }
+
+    .el-input .el-input__inner {
+      padding: 0;
+      border-radius: 0;
+      border: unset;
+      border-bottom: 1px solid #dcdfe6;
+    }
+  }
+
+  .el-select {
+    .el-input__suffix {
+      display: none;
+    }
+
+    .el-input__inner {
+      padding: 0 4px;
+      /* border: unset; */
+      text-align: center;
+    }
+  }
+}
+
+.weight {
+  width: 70px;
+
+  .el-input .el-input__inner {
+    padding: 0 32px 0 4px;
+  }
+}
+
+.pagination-container {
+  margin-top: 0;
+}
+</style>
diff --git a/stdiet-ui/src/views/custom/dishes/index.vue b/stdiet-ui/src/views/custom/dishes/index.vue
index b01a02a5b..532a79f82 100644
--- a/stdiet-ui/src/views/custom/dishes/index.vue
+++ b/stdiet-ui/src/views/custom/dishes/index.vue
@@ -97,11 +97,7 @@
         @queryTable="getList"
       ></right-toolbar>
     </el-row>
-    <el-table
-      v-loading="loading"
-      :data="dishesList"
-      @selection-change="handleSelectionChange"
-    >
+    <el-table v-loading="loading" :data="dishesList">
       <el-table-column label="审核状态" align="center" width="80">
         <template slot-scope="scope">
           <el-tag
@@ -177,247 +173,28 @@
     />
 
     <!-- 添加或修改菜品对话框 -->
-    <el-drawer
-      :title="title"
-      :visible.sync="open"
-      :wrapperClosable="false"
-      size="50%"
-      :close-on-press-escape="false"
-    >
-      <div class="drawer_content">
-        <el-row class="content_detail">
-          <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-            <el-col :span="24">
-              <el-form-item label="菜品名称" prop="name">
-                <el-input v-model="form.name" placeholder="请输入菜品名称" />
-              </el-form-item>
-            </el-col>
-            <el-col :span="8">
-              <el-form-item label="菜品种类" prop="dishClass">
-                <el-cascader
-                  filterable
-                  v-model="form.dishClass"
-                  :options="dishClassOptions"
-                  :props="{ expandTrigger: 'hover' }"
-                  placeholder="请选择菜品种类"
-                ></el-cascader>
-              </el-form-item>
-            </el-col>
-            <el-col :span="8">
-              <el-form-item label="菜品类型" prop="type">
-                <el-select
-                  v-model="form.type"
-                  placeholder="请选择菜品类型"
-                  multiple
-                >
-                  <el-option
-                    v-for="dict in typeOptions"
-                    :key="dict.dictValue"
-                    :label="dict.dictLabel"
-                    :value="dict.dictValue"
-                  ></el-option>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="8">
-              <el-form-item label="是否主食" prop="isMain">
-                <el-radio-group v-model="form.isMain">
-                  <el-radio :label="0">是</el-radio>
-                  <el-radio :label="1">否</el-radio>
-                </el-radio-group>
-              </el-form-item>
-            </el-col>
-            <el-col :span="24">
-              <el-form-item label="食材" prop="ingIds">
-                <el-transfer
-                  style="text-align: left; display: inline-block"
-                  v-model="selIngIds"
-                  size="mini"
-                  filterable
-                  :titles="['备选', '已选']"
-                  :button-texts="['', '']"
-                  :format="{
-                    noChecked: '${total}',
-                    hasChecked: '${checked}/${total}',
-                  }"
-                  @change="handleChange"
-                  :data="ingDataList"
-                >
-                  <el-select
-                    class="transfer-footer"
-                    slot="left-footer"
-                    size="small"
-                    filterable
-                    v-model="ingType"
-                    @change="handleOnTypeChange"
-                  >
-                    <el-option
-                      v-for="dict in ingTypeOptions"
-                      :key="dict.dictValue"
-                      :label="dict.dictLabel"
-                      :value="dict.dictValue"
-                    />
-                  </el-select>
-                  <div
-                    class="transfer-footer"
-                    slot="right-footer"
-                    size="small"
-                  />
-                </el-transfer>
-              </el-form-item>
-            </el-col>
-            <el-col :span="24">
-              <el-form-item label="分量" prop="weight">
-                <el-table
-                  :data="selTableData"
-                  border
-                  show-summary
-                  size="mini"
-                  :summary-method="getSummaries"
-                  style="width: 100%"
-                >
-                  <el-table-column prop="name" label="食材" align="center" />
-                  <el-table-column label="通俗计量" align="center">
-                    <template slot-scope="scope">
-                      <span class="cus-unit">
-                        <el-select size="mini" v-model="scope.row.cusWeight">
-                          <el-option
-                            v-for="dict in cusWeightOptions"
-                            :key="dict.dictValue"
-                            :label="dict.dictLabel"
-                            :value="parseInt(dict.dictValue)"
-                          />
-                        </el-select>
-                        <el-select size="mini" v-model="scope.row.cusUnit">
-                          <el-option
-                            v-for="dict in cusUnitOptions"
-                            :key="dict.dictValue"
-                            :label="dict.dictLabel"
-                            :value="parseInt(dict.dictValue)"
-                          />
-                        </el-select>
-                      </span>
-                    </template>
-                  </el-table-column>
-                  <el-table-column prop="weight" label="重量(g)" align="center">
-                    <template slot-scope="scope">
-                      <el-input-number
-                        class="weight"
-                        v-model="scope.row.weight"
-                        size="mini"
-                        controls-position="right"
-                        :min="0"
-                        :step="5"
-                      />
-                    </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-column label="热量" align="center">
-                    <template slot-scope="scope">
-                      {{
-                        `${(
-                          ((scope.row.proteinRatio * scope.row.weight) / 100) *
-                            4 +
-                          ((scope.row.fatRatio * scope.row.weight) / 100) * 9 +
-                          ((scope.row.carbonRatio * scope.row.weight) / 100) * 4
-                        ).toFixed(1)} kcal`
-                      }}
-                    </template>
-                  </el-table-column>
-                </el-table>
-              </el-form-item>
-            </el-col>
-            <el-col :span="24">
-              <el-form-item label="推荐人群">
-                <el-tag
-                  style="margin-right: 4px"
-                  v-for="rec in selRec"
-                  :key="rec"
-                  type="success"
-                >
-                  {{ rec }}
-                </el-tag>
-              </el-form-item>
-            </el-col>
-            <el-col :span="24">
-              <el-form-item label="忌口人群">
-                <el-tag
-                  style="margin-right: 4px"
-                  v-for="notRec in selNotRec"
-                  :key="notRec"
-                  type="danger"
-                >
-                  {{ notRec }}
-                </el-tag>
-              </el-form-item>
-            </el-col>
-            <el-col :span="24">
-              <el-form-item label="审核状态" prop="reviewStatus">
-                <el-select
-                  v-model="form.reviewStatus"
-                  placeholder="请选择审核状态"
-                  clearable
-                >
-                  <el-option
-                    v-for="dict in reviewStatusOptions"
-                    :key="dict.dictValue"
-                    :label="dict.dictLabel"
-                    :value="dict.dictValue"
-                  />
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="24">
-              <el-form-item label="做法" prop="methods">
-                <el-input
-                  v-model="form.methods"
-                  type="textarea"
-                  placeholder="请输入内容"
-                  rows="4"
-                />
-              </el-form-item>
-            </el-col>
-          </el-form>
-        </el-row>
-        <div slot="footer" class="dialog-footer">
-          <el-button type="primary" @click="submitForm">确 定</el-button>
-          <el-button @click="cancel">取 消</el-button>
-        </div>
-      </div>
-    </el-drawer>
+    <EditDishesDrawer
+      ref="dishesDrawerRef"
+      :typeOptions="typeOptions"
+      :reviewStatusOptions="reviewStatusOptions"
+      :dishClassBigOptions="dishClassBigOptions"
+      :dishClassSmallOptions="dishClassSmallOptions"
+      :dishClassOptions="dishClassOptions"
+      @onSuccess="getList"
+    />
   </div>
 </template>
 
 <script>
-import {
-  addDishes,
-  delDishes,
-  exportDishes,
-  getDishes,
-  listDishes,
-  updateDishes,
-} from "@/api/custom/dishes";
-import { listAllIngredient } from "@/api/custom/ingredient";
+import { delDishes, exportDishes, listDishes } from "@/api/custom/dishes";
 import AutoHideInfo from "@/components/AutoHideInfo";
+import EditDishesDrawer from "./EditDishesDrawer";
 
 export default {
   name: "Dishes",
   components: {
     autohideinfo: AutoHideInfo,
+    EditDishesDrawer,
   },
   data() {
     return {
@@ -425,10 +202,6 @@ export default {
       loading: true,
       // 选中数组
       ids: [],
-      // 非单个禁用
-      single: true,
-      // 非多个禁用
-      multiple: true,
       // 显示搜索条件
       showSearch: true,
       // 总条数
@@ -437,13 +210,7 @@ export default {
       dishesList: [],
       // 审核状态
       reviewStatusOptions: [],
-      // 弹出层标题
-      title: "",
-      // 是否显示弹出层
-      open: false,
-      ingType: "1",
-      // 食材类别字典
-      ingTypeOptions: [],
+
       // 远程数据缓存，预防新增的食材找不到
       oriDataList: [],
       // 备选食材列表
@@ -456,14 +223,10 @@ export default {
       selNotRec: [],
       // 选中的食材id
       selIngIds: [],
-      // 选中的食材分量列表
-      selTableData: [],
+
       // 菜品类别字典
       typeOptions: [],
-      // 通俗单位
-      cusUnitOptions: [],
-      //
-      cusWeightOptions: [],
+
       dishClassOptions: [],
       dishClassBigOptions: [],
       dishClassSmallOptions: [],
@@ -476,10 +239,6 @@ export default {
         bigClass: null,
         smallClass: null,
       },
-      // 表单参数
-      form: {},
-      // 表单校验
-      rules: {},
       //菜品种类查询种类
       dishClassQueryParam: [],
     };
@@ -489,15 +248,7 @@ export default {
     this.getDicts("cus_dishes_type").then((response) => {
       this.typeOptions = response.data;
     });
-    this.getDicts("cus_ing_type").then((response) => {
-      this.ingTypeOptions = response.data;
-    });
-    this.getDicts("cus_cus_unit").then((response) => {
-      this.cusUnitOptions = response.data;
-    });
-    this.getDicts("cus_cus_weight").then((response) => {
-      this.cusWeightOptions = response.data;
-    });
+
     this.getDicts("cus_review_status").then((response) => {
       this.reviewStatusOptions = response.data;
     });
@@ -582,12 +333,7 @@ export default {
             .split(",")
             .map((type) => this.selectDictLabel(this.typeOptions, type));
     },
-    cusUnitFormat(row, column) {
-      return this.selectDictLabel(this.cusUnitOptions, row.type);
-    },
-    cusWeightFormat(row, column) {
-      return this.selectDictLabel(this.cusWeightOptions, row.cusWeight);
-    },
+
     // 地域字典翻译
     reviewStatusFormat(row, column) {
       return this.selectDictLabel(this.reviewStatusOptions, row.area);
@@ -607,35 +353,6 @@ export default {
       }
       return "";
     },
-    // 取消按钮
-    cancel() {
-      this.open = false;
-      this.reset();
-    },
-    // 表单重置
-    reset() {
-      this.form = {
-        id: null,
-        name: null,
-        type: [],
-        dishClass: [],
-        methods: null,
-        createBy: null,
-        createTime: null,
-        updateBy: null,
-        updateTime: null,
-        igdList: [],
-        isMain: 1,
-      };
-      this.selIngIds = [];
-      this.selIngList = [];
-      this.selTableData = [];
-      this.oriDataList = [];
-      this.selRec = [];
-      this.selNotRec = [];
-      this.ingType = "1";
-      this.resetForm("form");
-    },
     /** 搜索按钮操作 */
     handleQuery() {
       this.queryParams.pageNum = 1;
@@ -647,101 +364,13 @@ export default {
       this.dishClassQueryParam = [];
       this.handleQuery();
     },
-    // 多选框选中数据
-    handleSelectionChange(selection) {
-      this.ids = selection.map((item) => item.id);
-      this.single = selection.length !== 1;
-      this.multiple = !selection.length;
-    },
     /** 新增按钮操作 */
     handleAdd() {
-      this.reset();
-      listAllIngredient({ type: this.ingType }).then((response) => {
-        this.open = true;
-        this.title = "添加菜品";
-        this.oriDataList = response.rows;
-        this.ingDataList = this.oriDataList.map((obj) => ({
-          key: obj.id,
-          label: obj.name,
-        }));
-      });
+      this.$refs.dishesDrawerRef.showDrawer();
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
-      this.reset();
-      const id = row.id || this.ids;
-      getDishes(id).then((response) => {
-        this.form = response.data;
-        this.form.dishClass = [this.form.bigClass, this.form.smallClass];
-        this.form.type = this.form.type ? this.form.type.split(",") : null;
-        this.form.igdList.forEach((obj) => {
-          this.selIngIds.push(obj.id);
-          this.selIngList.push({
-            key: obj.id,
-            label: obj.name,
-          });
-          this.selTableData.push(obj);
-          if (obj.rec) {
-            obj.rec.split(",").forEach((rec) => {
-              if (!this.selRec.includes(rec)) {
-                this.selRec.push(rec);
-              }
-            });
-          }
-          if (obj.notRec) {
-            obj.notRec.split(",").forEach((notRec) => {
-              if (!this.selNotRec.includes(notRec)) {
-                this.selNotRec.push(notRec);
-              }
-            });
-          }
-        });
-        listAllIngredient({ type: this.ingType }).then((res) => {
-          this.open = true;
-          this.title = "修改菜品";
-          this.oriDataList = res.rows.concat(this.form.igdList);
-          this.ingDataList = this.oriDataList.reduce((arr, cur) => {
-            if (!arr.some(({ key }) => key === cur.id)) {
-              arr.push({
-                key: cur.id,
-                label: cur.name,
-              });
-            }
-            return arr;
-          }, []);
-        });
-      });
-    },
-    /** 提交按钮 */
-    submitForm() {
-      this.$refs["form"].validate((valid) => {
-        if (valid) {
-          if (!this.selTableData.length) {
-            this.$message.error("食材不能为空");
-            return;
-          }
-          const data = JSON.parse(JSON.stringify(this.form));
-          data.igdList = this.selTableData;
-          data.type = data.type.join(",");
-          if (data.id != null) {
-            updateDishes(data).then((response) => {
-              if (response.code === 200) {
-                this.msgSuccess("修改成功");
-                this.open = false;
-                this.getList();
-              }
-            });
-          } else {
-            addDishes(data).then((response) => {
-              if (response.code === 200) {
-                this.msgSuccess("新增成功");
-                this.open = false;
-                this.getList();
-              }
-            });
-          }
-        }
-      });
+      this.$refs.dishesDrawerRef.showDrawer(row.id);
     },
     /** 删除按钮操作 */
     handleDelete(row) {
@@ -776,178 +405,8 @@ export default {
         })
         .catch(function () {});
     },
-    handleChange(value, direction, movedKeys) {
-      // console.log({
-      //   oriIgdList: this.oriDataList,
-      //   selIgdList: this.form.igdList,
-      //   ingDataList: this.ingDataList,
-      //   value,
-      //   ingType: this.ingType,
-      // });
-      const newTableData = [];
-      this.selRec = [];
-      this.selNotRec = [];
-      this.selIngList = value.map((id) => {
-        // 搜索table中的数据
-        let tmpTableObj = this.selTableData.find((obj) => obj.id === id);
-        if (tmpTableObj) {
-          newTableData.push(tmpTableObj);
-        } else {
-          // 搜索请求的缓存数据
-          tmpTableObj = this.oriDataList.find((obj) => obj.id === id);
-          if (tmpTableObj) {
-            newTableData.push({
-              ...tmpTableObj,
-              weight: 100,
-              cusWeight: 1,
-              cusUnit: 1,
-            });
-          }
-        }
-        if (tmpTableObj) {
-          if (tmpTableObj.rec) {
-            tmpTableObj.rec.split(",").forEach((rec) => {
-              if (!this.selRec.includes(rec)) {
-                this.selRec.push(rec);
-              }
-            });
-          }
-          if (tmpTableObj.notRec) {
-            tmpTableObj.notRec.split(",").forEach((notRec) => {
-              if (!this.selNotRec.includes(notRec)) {
-                this.selNotRec.push(notRec);
-              }
-            });
-          }
-        }
-        const tarObj = this.ingDataList.find(({ key }) => key === id);
-        return tarObj;
-      });
-      this.selTableData = newTableData;
-    },
-    handleOnTypeChange(value) {
-      listAllIngredient({ type: value }).then((res) => {
-        this.oriDataList = res.rows.concat(this.form.igdList);
-        this.ingDataList = this.oriDataList.reduce((arr, cur) => {
-          if (!arr.some(({ key }) => key === cur.id)) {
-            arr.push({
-              key: cur.id,
-              label: cur.name,
-            });
-          }
-          return arr;
-        }, []);
-      });
-    },
-    getSummaries(param) {
-      const { columns, data } = param;
-      // console.log(data);
-      return columns.reduce(
-        (arr, cur, idx) => {
-          if (idx > 1) {
-            if (idx === 6) {
-              arr[6] = arr[3] * 4 + arr[4] * 9 + arr[5] * 4 + " kcal";
-            } else {
-              arr[idx] = data.reduce((acc, dAcc) => {
-                if (idx === 2) {
-                  return acc + parseFloat(dAcc.weight);
-                }
-                return parseFloat(
-                  (
-                    acc +
-                    (dAcc[cur.property] * parseFloat(dAcc.weight)) / 100
-                  ).toFixed(1)
-                );
-              }, 0);
-            }
-          }
-          return arr;
-        },
-        ["合计"]
-      );
-    },
   },
 };
 </script>
 <style rel="stylesheet/scss" lang="scss">
-#el-drawer__title {
-  & > span:focus {
-    outline: 0;
-  }
-}
-
-.el-transfer-panel__filter {
-  margin: 2px;
-}
-
-.el-transfer-panel__list.is-filterable {
-  padding-bottom: 28px;
-}
-
-.cus-unit {
-  display: inline-flex;
-  .el-input-number--mini {
-    width: 38px;
-  }
-
-  .el-input-number {
-    .el-input-number__decrease {
-      display: none;
-    }
-    .el-input-number__increase {
-      display: none;
-    }
-
-    .el-input {
-      width: 38px;
-    }
-
-    .el-input .el-input__inner {
-      padding: 0;
-      border-radius: 0;
-      border: unset;
-      border-bottom: 1px solid #dcdfe6;
-    }
-  }
-
-  .el-select {
-    .el-input__suffix {
-      display: none;
-    }
-
-    .el-input__inner {
-      padding: 0 4px;
-      /* border: unset; */
-      text-align: center;
-    }
-  }
-}
-
-.weight {
-  width: 70px;
-
-  .el-input .el-input__inner {
-    padding: 0 32px 0 4px;
-  }
-}
-
-.drawer_content {
-  height: 100%;
-  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>
diff --git a/stdiet-ui/src/views/custom/ingredient/index.vue b/stdiet-ui/src/views/custom/ingredient/index.vue
index 8bac238f2..038315fdb 100644
--- a/stdiet-ui/src/views/custom/ingredient/index.vue
+++ b/stdiet-ui/src/views/custom/ingredient/index.vue
@@ -146,6 +146,16 @@
           </el-tag>
         </template>
       </el-table-column>
+      <el-table-column label="图片" align="center" width="100">
+        <template slot-scope="scope">
+          <img
+            width="100"
+            height="auto"
+            :src="scope.row.imgList[0] ? scope.row.imgList[0].previewUrl : ''"
+            :alt="scope.row.imgList[0] ? scope.row.imgList[0].name : ''"
+          />
+        </template>
+      </el-table-column>
       <el-table-column
         label="食材名称"
         align="center"

From efd7820da5a92121b9d9beb3685830f6dff8c0ae Mon Sep 17 00:00:00 2001
From: huangdeliang <huangdeliang@skieer.com>
Date: Fri, 19 Mar 2021 17:18:37 +0800
Subject: [PATCH 2/4] =?UTF-8?q?=E8=B0=83=E6=95=B4=E6=93=8D=E4=BD=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../EditDishesDrawer/IngredientListView/index.vue      | 10 ++++++++--
 .../src/views/custom/dishes/EditDishesDrawer/index.vue |  4 ++--
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/stdiet-ui/src/views/custom/dishes/EditDishesDrawer/IngredientListView/index.vue b/stdiet-ui/src/views/custom/dishes/EditDishesDrawer/IngredientListView/index.vue
index 60cff0173..eac438a22 100644
--- a/stdiet-ui/src/views/custom/dishes/EditDishesDrawer/IngredientListView/index.vue
+++ b/stdiet-ui/src/views/custom/dishes/EditDishesDrawer/IngredientListView/index.vue
@@ -51,7 +51,6 @@
       :data="ingredientList"
       :cell-style="{ padding: 0 }"
       :header-cell-style="{ padding: 0, height: 'unset' }"
-      @current-change="handleCurrentChange"
     >
       <el-table-column label="食材名称" align="center" prop="name" />
       <el-table-column
@@ -63,6 +62,13 @@
       <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-column label="操作" align="center">
+        <template slot-scope="scope">
+          <el-button type="text" size="mini" @click="handleOnSelect(scope.row)"
+            >选用</el-button
+          >
+        </template>
+      </el-table-column>
     </el-table>
 
     <pagination
@@ -123,7 +129,7 @@ export default {
       this.resetForm("queryForm");
       this.handleQuery();
     },
-    handleCurrentChange(data) {
+    handleOnSelect(data) {
       this.$emit("onSelect", data);
     },
   },
diff --git a/stdiet-ui/src/views/custom/dishes/EditDishesDrawer/index.vue b/stdiet-ui/src/views/custom/dishes/EditDishesDrawer/index.vue
index 7ee9b0666..2a0b99129 100644
--- a/stdiet-ui/src/views/custom/dishes/EditDishesDrawer/index.vue
+++ b/stdiet-ui/src/views/custom/dishes/EditDishesDrawer/index.vue
@@ -81,7 +81,7 @@
                 :data="form.igdList"
                 border
                 show-summary
-                :cell-style="{ padding: 0 }"
+                :cell-style="{ padding: '2px 0' }"
                 :header-cell-style="{ padding: 0, height: 'unset' }"
                 :summary-method="getSummaries"
               >
@@ -149,7 +149,7 @@
                 </el-table-column>
                 <el-table-column label="操作" align="center">
                   <template slot-scope="scope">
-                    <el-button type="text" @click="handleOnDelete(scope.row)"
+                    <el-button type="text" size="mini" @click="handleOnDelete(scope.row)"
                       >删除</el-button
                     >
                   </template>

From 21fac2ae86e8bda93d16320a13b7539c7e237809 Mon Sep 17 00:00:00 2001
From: huangdeliang <huangdeliang@skieer.com>
Date: Fri, 19 Mar 2021 18:57:07 +0800
Subject: [PATCH 3/4] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E8=80=81=E7=9A=84?=
 =?UTF-8?q?=E4=BD=93=E5=BE=81=E6=95=B0=E6=8D=AE=E5=A4=87=E6=B3=A8=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../custom/SysCustomerHealthyController.java  | 16 +++++
 stdiet-ui/src/api/custom/healthy.js           | 62 ++++++++++---------
 .../src/components/BodySignView/index.vue     | 14 ++---
 3 files changed, 57 insertions(+), 35 deletions(-)

diff --git a/stdiet-admin/src/main/java/com/stdiet/web/controller/custom/SysCustomerHealthyController.java b/stdiet-admin/src/main/java/com/stdiet/web/controller/custom/SysCustomerHealthyController.java
index 1d9c91beb..404dc8c54 100644
--- a/stdiet-admin/src/main/java/com/stdiet/web/controller/custom/SysCustomerHealthyController.java
+++ b/stdiet-admin/src/main/java/com/stdiet/web/controller/custom/SysCustomerHealthyController.java
@@ -3,7 +3,10 @@ package com.stdiet.custom.controller;
 import java.util.List;
 
 import com.stdiet.common.utils.StringUtils;
+import com.stdiet.custom.domain.SysCustomerPhysicalSigns;
+import com.stdiet.custom.domain.SysPhysicalSigns;
 import com.stdiet.custom.dto.request.HealthyDetailRequest;
+import com.stdiet.custom.service.ISysCustomerPhysicalSignsService;
 import org.springframework.security.access.prepost.PreAuthorize;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.web.bind.annotation.*;
@@ -29,6 +32,9 @@ public class SysCustomerHealthyController extends BaseController
     @Autowired
     private ISysCustomerHealthyService sysCustomerHealthyService;
 
+    @Autowired
+    private ISysCustomerPhysicalSignsService sysCustomerPhysicalSignsService;
+
     /**
      * 查询客户健康列表
      */
@@ -120,4 +126,14 @@ public class SysCustomerHealthyController extends BaseController
     {
         return sysCustomerHealthyService.generateHealthyReport(healthyDetailRequest);
     }
+
+    /**
+     * 修改老的体征数据
+     * @param sysPhysicalSigns
+     * @return
+     */
+    @PutMapping("/edit/physical")
+    public AjaxResult editPhysical(@RequestBody SysCustomerPhysicalSigns sysPhysicalSigns) {
+        return toAjax(sysCustomerPhysicalSignsService.updateSysCustomerPhysicalSigns(sysPhysicalSigns));
+    }
 }
\ No newline at end of file
diff --git a/stdiet-ui/src/api/custom/healthy.js b/stdiet-ui/src/api/custom/healthy.js
index f4b718818..213b419cb 100644
--- a/stdiet-ui/src/api/custom/healthy.js
+++ b/stdiet-ui/src/api/custom/healthy.js
@@ -1,74 +1,80 @@
-import request from '@/utils/request'
+import request from "@/utils/request";
 
 // 查询客户健康列表
 export function listHealthy(query) {
   return request({
-    url: '/custom/healthy/list',
-    method: 'get',
+    url: "/custom/healthy/list",
+    method: "get",
     params: query
-  })
+  });
 }
 
 // 查询客户健康详细
 export function getHealthy(id) {
   return request({
-    url: '/custom/healthy/' + id,
-    method: 'get'
-  })
+    url: "/custom/healthy/" + id,
+    method: "get"
+  });
 }
 
 // 新增客户健康
 export function addHealthy(data) {
   return request({
-    url: '/custom/healthy',
-    method: 'post',
+    url: "/custom/healthy",
+    method: "post",
     data: data
-  })
+  });
 }
 
 // 修改客户健康
 export function updateHealthy(data) {
   return request({
-    url: '/custom/healthy',
-    method: 'put',
+    url: "/custom/healthy",
+    method: "put",
     data: data
-  })
+  });
 }
 
 // 删除客户健康
 export function delHealthy(id) {
   return request({
-    url: '/custom/healthy/' + id,
-    method: 'delete'
-  })
+    url: "/custom/healthy/" + id,
+    method: "delete"
+  });
 }
 
 // 导出客户健康
 export function exportHealthy(query) {
   return request({
-    url: '/custom/healthy/export',
-    method: 'get',
+    url: "/custom/healthy/export",
+    method: "get",
     params: query
-  })
+  });
 }
 
 // 下载文件
 export function download(fileName) {
   return request({
-    url: '/common/download',
-    method: 'get',
-    params: {"fileName": fileName}
-  })
+    url: "/common/download",
+    method: "get",
+    params: { fileName: fileName }
+  });
 }
 
 // 生成健康体征报告
 export function generateHealthyReport(healthyDetail) {
   return request({
-    url: '/custom/healthy/generateHealthyReport',
-    method: 'post',
+    url: "/custom/healthy/generateHealthyReport",
+    method: "post",
     data: healthyDetail
-  })
+  });
 }
 
-
-
+// 修改老的体征
+export function editPhysicalSigns(data) {
+  return request({
+    url: "/custom/healthy/edit/physical",
+    method: "put",
+    data
+  });
+}
diff --git a/stdiet-ui/src/components/BodySignView/index.vue b/stdiet-ui/src/components/BodySignView/index.vue
index ed5c404dd..b3a228bc6 100644
--- a/stdiet-ui/src/components/BodySignView/index.vue
+++ b/stdiet-ui/src/components/BodySignView/index.vue
@@ -2,14 +2,14 @@
   <div class="body_sign_view_wrapper">
     <div>
       <h2>{{ this.data.name }}</h2>
-      <!-- <el-button
+      <el-button
         v-if="dev"
         size="mini"
         type="primary"
         class="remark_btn"
         @click="handleOnRemark"
         >修改备注</el-button
-      > -->
+      >
       <div class="msg-info" v-for="(info, idx) in basicInfo" :key="idx">
         <text-info
           v-for="con in info"
@@ -25,7 +25,7 @@
     <el-dialog title="修改备注" :visible.sync="open" width="480px">
       <el-input
         type="textarea"
-        v-model="data.remark"
+        v-model="data.remarks"
         rows="6"
         placeholder="请输入备注信息"
         maxlength="300"
@@ -40,7 +40,7 @@
 </template>
 <script>
 import TextInfo from "@/components/TextInfo";
-import { updateHealthy } from "@/api/custom/healthy";
+import { editPhysicalSigns } from "@/api/custom/healthy";
 
 export default {
   name: "BodySignView",
@@ -111,7 +111,7 @@ export default {
         { title: "不运动总热量", value: "notSportHeat" },
       ]);
       basicInfo.splice(basicInfo.length, 0, [
-        { title: "备注", value: "remark" },
+        { title: "备注", value: "remarks" },
       ]);
     }
     return {
@@ -127,8 +127,8 @@ export default {
       this.open = false;
     },
     submit() {
-      const { id, remark } = this.data;
-      updateHealthy({ id, remark }).then((res) => {
+      const { id, remarks } = this.data;
+      editPhysicalSigns({ id, remarks }).then((res) => {
         if (res.code === 200) {
           this.$message.success("修改成功");
           this.open = false;

From 180f994141d0b428746a26bc6ae4668a363adbba Mon Sep 17 00:00:00 2001
From: huangdeliang <huangdeliang@skieer.com>
Date: Sat, 20 Mar 2021 19:31:00 +0800
Subject: [PATCH 4/4] =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=A0=A1=E9=AA=8C?=
 =?UTF-8?q?=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 stdiet-ui/public/index.html                   | 365 +++++++++---------
 stdiet-ui/src/store/modules/recipes.js        |  84 ++--
 .../recipesBuild/InfoView/PieChart/index.vue  | 210 ++++++----
 .../VerifyView/IngredientSearchCom/index.vue  | 147 +++++++
 .../VerifyView/PhysicalSignCom/index.vue      | 132 +++++++
 .../custom/recipesBuild/VerifyView/index.vue  | 136 ++-----
 6 files changed, 703 insertions(+), 371 deletions(-)
 create mode 100644 stdiet-ui/src/views/custom/recipesBuild/VerifyView/IngredientSearchCom/index.vue
 create mode 100644 stdiet-ui/src/views/custom/recipesBuild/VerifyView/PhysicalSignCom/index.vue

diff --git a/stdiet-ui/public/index.html b/stdiet-ui/public/index.html
index 34b70ae6f..40cf9db93 100644
--- a/stdiet-ui/public/index.html
+++ b/stdiet-ui/public/index.html
@@ -1,208 +1,211 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-    <meta name="renderer" content="webkit">
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <link rel="stylesheet" href="//at.alicdn.com/t/font_2343184_8rlvxcc41j5.css">
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <meta name="renderer" content="webkit" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
+    />
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
+    <link
+      rel="stylesheet"
+      href="//at.alicdn.com/t/font_2343184_w0runuauamq.css"
+    />
     <title><%= webpackConfig.name %></title>
-	  <style>
-    html,
-    body,
-    #app {
-      height: 100%;
-      margin: 0px;
-      padding: 0px;
-    }
-    .chromeframe {
-      margin: 0.2em 0;
-      background: #ccc;
-      color: #000;
-      padding: 0.2em 0;
-    }
-
-    #loader-wrapper {
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      z-index: 999999;
-    }
-
-    #loader {
-      display: block;
-      position: relative;
-      left: 50%;
-      top: 50%;
-      width: 150px;
-      height: 150px;
-      margin: -75px 0 0 -75px;
-      border-radius: 50%;
-      border: 3px solid transparent;
-      border-top-color: #FFF;
-      -webkit-animation: spin 2s linear infinite;
-      -ms-animation: spin 2s linear infinite;
-      -moz-animation: spin 2s linear infinite;
-      -o-animation: spin 2s linear infinite;
-      animation: spin 2s linear infinite;
-      z-index: 1001;
-    }
-
-    #loader:before {
-      content: "";
-      position: absolute;
-      top: 5px;
-      left: 5px;
-      right: 5px;
-      bottom: 5px;
-      border-radius: 50%;
-      border: 3px solid transparent;
-      border-top-color: #FFF;
-      -webkit-animation: spin 3s linear infinite;
-      -moz-animation: spin 3s linear infinite;
-      -o-animation: spin 3s linear infinite;
-      -ms-animation: spin 3s linear infinite;
-      animation: spin 3s linear infinite;
-    }
-
-    #loader:after {
-      content: "";
-      position: absolute;
-      top: 15px;
-      left: 15px;
-      right: 15px;
-      bottom: 15px;
-      border-radius: 50%;
-      border: 3px solid transparent;
-      border-top-color: #FFF;
-      -moz-animation: spin 1.5s linear infinite;
-      -o-animation: spin 1.5s linear infinite;
-      -ms-animation: spin 1.5s linear infinite;
-      -webkit-animation: spin 1.5s linear infinite;
-      animation: spin 1.5s linear infinite;
-    }
-
-
-    @-webkit-keyframes spin {
-      0% {
-        -webkit-transform: rotate(0deg);
-        -ms-transform: rotate(0deg);
-        transform: rotate(0deg);
+    <style>
+      html,
+      body,
+      #app {
+        height: 100%;
+        margin: 0px;
+        padding: 0px;
       }
-      100% {
-        -webkit-transform: rotate(360deg);
-        -ms-transform: rotate(360deg);
-        transform: rotate(360deg);
+      .chromeframe {
+        margin: 0.2em 0;
+        background: #ccc;
+        color: #000;
+        padding: 0.2em 0;
       }
-    }
 
-    @keyframes spin {
-      0% {
-        -webkit-transform: rotate(0deg);
-        -ms-transform: rotate(0deg);
-        transform: rotate(0deg);
+      #loader-wrapper {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 999999;
       }
-      100% {
-        -webkit-transform: rotate(360deg);
-        -ms-transform: rotate(360deg);
-        transform: rotate(360deg);
+
+      #loader {
+        display: block;
+        position: relative;
+        left: 50%;
+        top: 50%;
+        width: 150px;
+        height: 150px;
+        margin: -75px 0 0 -75px;
+        border-radius: 50%;
+        border: 3px solid transparent;
+        border-top-color: #fff;
+        -webkit-animation: spin 2s linear infinite;
+        -ms-animation: spin 2s linear infinite;
+        -moz-animation: spin 2s linear infinite;
+        -o-animation: spin 2s linear infinite;
+        animation: spin 2s linear infinite;
+        z-index: 1001;
       }
-    }
 
+      #loader:before {
+        content: "";
+        position: absolute;
+        top: 5px;
+        left: 5px;
+        right: 5px;
+        bottom: 5px;
+        border-radius: 50%;
+        border: 3px solid transparent;
+        border-top-color: #fff;
+        -webkit-animation: spin 3s linear infinite;
+        -moz-animation: spin 3s linear infinite;
+        -o-animation: spin 3s linear infinite;
+        -ms-animation: spin 3s linear infinite;
+        animation: spin 3s linear infinite;
+      }
 
-    #loader-wrapper .loader-section {
-      position: fixed;
-      top: 0;
-      width: 51%;
-      height: 100%;
-      background: #7171C6;
-      z-index: 1000;
-      -webkit-transform: translateX(0);
-      -ms-transform: translateX(0);
-      transform: translateX(0);
-    }
+      #loader:after {
+        content: "";
+        position: absolute;
+        top: 15px;
+        left: 15px;
+        right: 15px;
+        bottom: 15px;
+        border-radius: 50%;
+        border: 3px solid transparent;
+        border-top-color: #fff;
+        -moz-animation: spin 1.5s linear infinite;
+        -o-animation: spin 1.5s linear infinite;
+        -ms-animation: spin 1.5s linear infinite;
+        -webkit-animation: spin 1.5s linear infinite;
+        animation: spin 1.5s linear infinite;
+      }
 
-    #loader-wrapper .loader-section.section-left {
-      left: 0;
-    }
+      @-webkit-keyframes spin {
+        0% {
+          -webkit-transform: rotate(0deg);
+          -ms-transform: rotate(0deg);
+          transform: rotate(0deg);
+        }
+        100% {
+          -webkit-transform: rotate(360deg);
+          -ms-transform: rotate(360deg);
+          transform: rotate(360deg);
+        }
+      }
 
-    #loader-wrapper .loader-section.section-right {
-      right: 0;
-    }
+      @keyframes spin {
+        0% {
+          -webkit-transform: rotate(0deg);
+          -ms-transform: rotate(0deg);
+          transform: rotate(0deg);
+        }
+        100% {
+          -webkit-transform: rotate(360deg);
+          -ms-transform: rotate(360deg);
+          transform: rotate(360deg);
+        }
+      }
 
+      #loader-wrapper .loader-section {
+        position: fixed;
+        top: 0;
+        width: 51%;
+        height: 100%;
+        background: #7171c6;
+        z-index: 1000;
+        -webkit-transform: translateX(0);
+        -ms-transform: translateX(0);
+        transform: translateX(0);
+      }
 
-    .loaded #loader-wrapper .loader-section.section-left {
-      -webkit-transform: translateX(-100%);
-      -ms-transform: translateX(-100%);
-      transform: translateX(-100%);
-      -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
-      transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
-    }
+      #loader-wrapper .loader-section.section-left {
+        left: 0;
+      }
 
-    .loaded #loader-wrapper .loader-section.section-right {
-      -webkit-transform: translateX(100%);
-      -ms-transform: translateX(100%);
-      transform: translateX(100%);
-      -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
-      transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
-    }
+      #loader-wrapper .loader-section.section-right {
+        right: 0;
+      }
 
-    .loaded #loader {
-      opacity: 0;
-      -webkit-transition: all 0.3s ease-out;
-      transition: all 0.3s ease-out;
-    }
+      .loaded #loader-wrapper .loader-section.section-left {
+        -webkit-transform: translateX(-100%);
+        -ms-transform: translateX(-100%);
+        transform: translateX(-100%);
+        -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+        transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+      }
 
-    .loaded #loader-wrapper {
-      visibility: hidden;
-      -webkit-transform: translateY(-100%);
-      -ms-transform: translateY(-100%);
-      transform: translateY(-100%);
-      -webkit-transition: all 0.3s 1s ease-out;
-      transition: all 0.3s 1s ease-out;
-    }
+      .loaded #loader-wrapper .loader-section.section-right {
+        -webkit-transform: translateX(100%);
+        -ms-transform: translateX(100%);
+        transform: translateX(100%);
+        -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+        transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+      }
 
-    .no-js #loader-wrapper {
-      display: none;
-    }
+      .loaded #loader {
+        opacity: 0;
+        -webkit-transition: all 0.3s ease-out;
+        transition: all 0.3s ease-out;
+      }
 
-    .no-js h1 {
-      color: #222222;
-    }
+      .loaded #loader-wrapper {
+        visibility: hidden;
+        -webkit-transform: translateY(-100%);
+        -ms-transform: translateY(-100%);
+        transform: translateY(-100%);
+        -webkit-transition: all 0.3s 1s ease-out;
+        transition: all 0.3s 1s ease-out;
+      }
 
-    #loader-wrapper .load_title {
-      font-family: 'Open Sans';
-      color: #FFF;
-      font-size: 19px;
-      width: 100%;
-      text-align: center;
-      z-index: 9999999999999;
-      position: absolute;
-      top: 60%;
-      opacity: 1;
-      line-height: 30px;
-    }
+      .no-js #loader-wrapper {
+        display: none;
+      }
 
-    #loader-wrapper .load_title span {
-      font-weight: normal;
-      font-style: italic;
-      font-size: 13px;
-      color: #FFF;
-      opacity: 0.5;
-    }
-  </style>
+      .no-js h1 {
+        color: #222222;
+      }
+
+      #loader-wrapper .load_title {
+        font-family: "Open Sans";
+        color: #fff;
+        font-size: 19px;
+        width: 100%;
+        text-align: center;
+        z-index: 9999999999999;
+        position: absolute;
+        top: 60%;
+        opacity: 1;
+        line-height: 30px;
+      }
+
+      #loader-wrapper .load_title span {
+        font-weight: normal;
+        font-style: italic;
+        font-size: 13px;
+        color: #fff;
+        opacity: 0.5;
+      }
+    </style>
   </head>
   <body>
     <div id="app">
-	    <div id="loader-wrapper">
-		    <div id="loader"></div>
-		    <div class="loader-section section-left"></div>
-		    <div class="loader-section section-right"></div>
-		    <div class="load_title">正在加载系统资源，请耐心等待</div>
-        </div>
-	</div>
+      <div id="loader-wrapper">
+        <div id="loader"></div>
+        <div class="loader-section section-left"></div>
+        <div class="loader-section section-right"></div>
+        <div class="load_title">正在加载系统资源，请耐心等待</div>
+      </div>
+    </div>
   </body>
 </html>
diff --git a/stdiet-ui/src/store/modules/recipes.js b/stdiet-ui/src/store/modules/recipes.js
index c5dc6652a..3f3d903d7 100644
--- a/stdiet-ui/src/store/modules/recipes.js
+++ b/stdiet-ui/src/store/modules/recipes.js
@@ -522,6 +522,8 @@ const getters = {
               (igd.weight / 100) * igd.proteinRatio * 4 +
               (igd.weight / 100) * igd.fatRatio * 9 +
               (igd.weight / 100) * igd.carbonRatio * 4;
+            obj[`weight${cur.type}`] += igd.weight;
+            obj.totalWeight += igd.weight;
           });
           return obj;
         },
@@ -533,66 +535,96 @@ const getters = {
           pHeat: 0,
           fHeat: 0,
           cHeat: 0,
+          //
           totalHeat: 0,
           heat1: 0,
           heat2: 0,
           heat3: 0,
           heat4: 0,
           heat5: 0,
-          heat6: 0
+          heat6: 0,
+          //
+          totalWeight: 0,
+          weight1: 0,
+          weight2: 0,
+          weight3: 0,
+          weight4: 0,
+          weight5: 0,
+          weight6: 0
         }
       )
     );
     console.log(nutriData);
     return nutriData;
   },
-  verifyNotRecData: state =>
-    state.recipesData.reduce((arr, cur, dayIdx) => {
+  verifyNotRecData: state => {
+    const data = state.recipesData.reduce((arr, cur, dayIdx) => {
       cur.dishes.forEach(dObj => {
         dObj.igdList.forEach(iObj => {
           (iObj.notRec || "").split(",").forEach(nRec => {
             if (nRec) {
-              let tarObj = arr.find(obj => obj.name === nRec);
+              const tarObj = arr.find(obj => obj.name === nRec);
               if (tarObj) {
-                tarObj.data.push({
-                  igdId: iObj.id,
-                  num: dayIdx,
-                  dishesId: dObj.dishesId,
-                  id: dObj.id
-                });
+                if (!tarObj.igdIds.includes(iObj.id)) {
+                  tarObj.igdIds.push(iObj.id);
+                }
+                const tarIgdObj = tarObj.data.find(obj => obj.id === iObj.id);
+                if (tarIgdObj) {
+                  if (!tarIgdObj.data.some(obj => obj.day === cur.numDay)) {
+                    tarIgdObj.data.push({ num: dayIdx, day: cur.numDay });
+                  }
+                } else {
+                  tarObj.data.push({
+                    name: iObj.name,
+                    id: iObj.id,
+                    data: [{ num: dayIdx, day: cur.numDay }]
+                  });
+                }
               } else {
-                tarObj = {
+                arr.push({
                   name: nRec,
+                  igdIds: [iObj.id],
                   data: [
                     {
-                      igdId: iObj.id,
-                      num: dayIdx,
-                      dishesId: dObj.dishesId,
-                      id: dObj.id
+                      name: iObj.name,
+                      id: iObj.id,
+                      data: [{ num: dayIdx, day: cur.numDay }]
                     }
                   ]
-                };
-                arr.push(tarObj);
+                });
               }
             }
           });
         });
       });
       return arr;
-    }, []),
-  igdTypeDetial: state =>
-    state.recipesData.reduce((obj, cur) => {
+    }, []);
+    // console.log(data);
+    return data;
+  },
+  igdTypeData: state => {
+    const data = state.recipesData.reduce((arr, cur, idx) => {
       cur.dishes.forEach(dObj => {
         dObj.igdList.forEach(iObj => {
-          if (!obj[iObj.type]) {
-            obj[iObj.type] = [{ name: iObj.name, id: iObj.id }];
-          } else if (!obj[iObj.type].some(tObj => tObj.id === iObj.id)) {
-            obj[iObj.type].push({ name: iObj.name, id: iObj.id });
+          let tarObj = arr.find(obj => obj.id === iObj.id);
+          if (!tarObj) {
+            tarObj = {
+              name: iObj.name,
+              id: iObj.id,
+              data: [{ num: idx, day: cur.numDay }]
+            };
+            arr.push(tarObj);
+          } else if (!tarObj.data.some(obj => obj.day === cur.numDay)) {
+            tarObj.data.push({ num: idx, day: cur.numDay });
           }
         });
       });
-      return obj;
-    }, {}),
+      return arr;
+    }, []);
+
+    // console.log(data);
+    return data;
+  },
   cusUnitDict: state =>
     state.cusUnitOptions.reduce((obj, cur) => {
       obj[cur.dictValue] = cur.dictLabel;
diff --git a/stdiet-ui/src/views/custom/recipesBuild/InfoView/PieChart/index.vue b/stdiet-ui/src/views/custom/recipesBuild/InfoView/PieChart/index.vue
index 3e4eda1bc..32c634733 100644
--- a/stdiet-ui/src/views/custom/recipesBuild/InfoView/PieChart/index.vue
+++ b/stdiet-ui/src/views/custom/recipesBuild/InfoView/PieChart/index.vue
@@ -20,6 +20,16 @@
           @click="handleOnViewChange(1)"
         />
       </el-tooltip>
+      <el-tooltip effect="dark" content="质量分析" placement="top">
+        <em
+          :class="[
+            'iconfont',
+            'icon-canshuiconyouhua-',
+            { sel_icon: view === 2 },
+          ]"
+          @click="handleOnViewChange(2)"
+        />
+      </el-tooltip>
     </div>
     <div v-if="view === 0" class="table_zone">
       <el-table
@@ -80,21 +90,23 @@ export default {
     },
   },
   data() {
+    const nameDict = {
+      p: "蛋白质",
+      f: "脂肪",
+      c: "碳水",
+    };
+    const menuDict = {
+      1: "早餐",
+      2: "早加餐",
+      3: "午餐",
+      4: "午加餐",
+      5: "晚餐",
+      6: "晚加餐",
+    };
     return {
       chart: null,
-      nameDict: {
-        p: "蛋白质",
-        f: "脂肪",
-        c: "碳水",
-      },
-      menuDict: {
-        1: "早餐",
-        2: "早加餐",
-        3: "午餐",
-        4: "午加餐",
-        5: "晚餐",
-        6: "晚加餐",
-      },
+      nameDict,
+      menuDict,
       typeDict: {
         Weight: "摄入量",
         Rate: "供能比",
@@ -122,6 +134,50 @@ export default {
       // console.log(mData);
       return mData;
     },
+    curNameDict() {
+      switch (this.view) {
+        case 0:
+          return this.nameDict;
+        case 1:
+          return this.menuDict;
+        case 2:
+          return this.menuDict;
+      }
+    },
+    curTitle() {
+      switch (this.view) {
+        case 0:
+          return "营养分析";
+        case 1:
+          return "热量分析";
+        case 2:
+          return "质量分析";
+      }
+    },
+    curTotalText() {
+      switch (this.view) {
+        case 1:
+          return "总热量约";
+        case 2:
+          return "总质量";
+      }
+    },
+    curTotalName() {
+      switch (this.view) {
+        case 1:
+          return "totalHeat";
+        case 2:
+          return "totalWeight";
+      }
+    },
+    curUnit() {
+      switch (this.view) {
+        case 1:
+          return "千卡";
+        case 2:
+          return "克";
+      }
+    },
     ...mapState(["recipesData"]),
   },
   mounted() {
@@ -144,12 +200,22 @@ export default {
     backToAll() {
       this.resetCurrentDay({ currentDay: -1 });
     },
+    getDataName(dim) {
+      switch (this.view) {
+        case 0:
+          return `${dim}Heat`;
+        case 1:
+          return `heat${dim}`;
+        case 2:
+          return `weight${dim}`;
+      }
+    },
     updateChart(data) {
-      // console.log(data);
+      console.log(data);
       this.chart.clear();
       const option = {
         title: {
-          text: !this.view ? "营养分析" : "热量分析",
+          text: this.curTitle,
           subtext: data.name,
         },
         tooltip: {
@@ -170,80 +236,84 @@ export default {
                   `摄入热量：${value.toFixed(1)}千卡`,
                   `供能比：${percent}%`,
                 ].join("</br>")
-              : [
+              : this.view === 1
+              ? [
                   `${marker} ${name}`,
                   `热量：${data[`heat${dim}`].toFixed(1)}千卡`,
                   `供能比：${percent}%`,
+                ].join("</br>")
+              : [
+                  `${marker} ${name}`,
+                  `质量：${data[`weight${dim}`].toFixed(1)}克`,
+                  `占比：${percent}%`,
                 ].join("</br>");
           },
         },
-        graphic:
-          this.view === 1
-            ? [
-                {
-                  type: "group",
-                  top: 60,
-                  left: 10,
-                  silent: true,
-                  children: [
-                    {
+        graphic: !this.view
+          ? []
+          : [
+              {
+                type: "group",
+                top: 60,
+                left: 10,
+                silent: true,
+                children: [
+                  {
+                    type: "text",
+                    style: {
+                      text: this.curTotalText,
+                      fill: "#606266",
+                    },
+                  },
+                  {
+                    type: "text",
+                    top: 18,
+                    left: 8,
+                    style: {
+                      text: `${
+                        data[`${this.curTotalName}`]
+                          ? data[`${this.curTotalName}`].toFixed(1)
+                          : 0
+                      } ${this.curUnit}`,
+                      font: '14px "Microsoft YaHei", sans-serif',
+                    },
+                  },
+                ],
+              },
+              {
+                type: "group",
+                top: 36,
+                right: 10,
+                silent: true,
+                children: Object.keys(this.curNameDict).reduce((arr, cur) => {
+                  const tarData = data[this.getDataName(cur)];
+                  if (tarData) {
+                    arr.push({
                       type: "text",
+                      top: arr.length * 20,
+                      right: 10,
                       style: {
-                        text: "总热量约",
+                        text: `${this.curNameDict[cur]}：${tarData.toFixed(1)}`,
                         fill: "#606266",
                       },
-                    },
-                    {
-                      type: "text",
-                      top: 18,
-                      left: 8,
-                      style: {
-                        text: `${
-                          data.totalHeat ? data.totalHeat.toFixed(1) : 0
-                        }千卡`,
-                        font: '14px "Microsoft YaHei", sans-serif',
-                      },
-                    },
-                  ],
-                },
-                {
-                  type: "group",
-                  top: 36,
-                  right: 10,
-                  silent: true,
-                  children: Object.keys(this.menuDict).reduce((arr, cur) => {
-                    const tarData = data[`heat${cur}`];
-                    if (tarData) {
-                      arr.push({
-                        type: "text",
-                        top: arr.length * 20,
-                        right: 10,
-                        style: {
-                          text: `${this.menuDict[cur]}：${tarData.toFixed(1)}`,
-                          fill: "#606266",
-                        },
-                      });
-                    }
-                    return arr;
-                  }, []),
-                },
-              ]
-            : [],
+                    });
+                  }
+                  return arr;
+                }, []),
+              },
+            ],
         series: [
           {
             name: data.name,
             type: "pie",
             radius: [0, !this.view ? 40 : 60],
             center: ["50%", "55%"],
-            data: (!this.view
-              ? Object.keys(this.nameDict)
-              : Object.keys(this.menuDict)
-            ).reduce((arr, dim) => {
+            data: Object.keys(this.curNameDict).reduce((arr, dim) => {
               if (!this.view || data[`heat${dim}`]) {
                 arr.push({
                   dim,
-                  value: !this.view ? data[`${dim}Heat`] : data[`heat${dim}`],
-                  name: (!this.view ? this.nameDict : this.menuDict)[dim],
+                  value: data[this.getDataName(dim)],
+                  name: this.curNameDict[dim],
                   oriData: data,
                 });
               }
diff --git a/stdiet-ui/src/views/custom/recipesBuild/VerifyView/IngredientSearchCom/index.vue b/stdiet-ui/src/views/custom/recipesBuild/VerifyView/IngredientSearchCom/index.vue
new file mode 100644
index 000000000..4308ad74b
--- /dev/null
+++ b/stdiet-ui/src/views/custom/recipesBuild/VerifyView/IngredientSearchCom/index.vue
@@ -0,0 +1,147 @@
+<template>
+  <div class="ingredient_search_com_wrapper">
+    <section class="header">
+      <el-input
+        v-model="keyword"
+        size="mini"
+        class="search"
+        placeholder="请输入食材"
+        clearable
+        @keydown.enter.native="handleOnSearch"
+      />
+      <el-button
+        size="mini"
+        type="primary"
+        class="search_btn"
+        @click="handleOnSearch"
+      >
+        搜索
+      </el-button>
+    </section>
+    <section class="content">
+      <el-popover
+        v-for="item in searchResults"
+        :key="item.name"
+        :title="item.name"
+        placement="top"
+        trigger="hover"
+      >
+        <el-button
+          type="text"
+          v-for="dData in item.data"
+          :key="dData.day"
+          @click="handleOnDayClick(item, dData.num)"
+          >{{ `第${dData.day}天` }}</el-button
+        >
+        <span
+          slot="reference"
+          :class="`item ${selectedIgd === item.id ? 'selected_item' : ''} `"
+          @click="handleOnIgdClick(item)"
+          >{{ item.name }}
+        </span>
+      </el-popover>
+    </section>
+  </div>
+</template>
+<script>
+import { createNamespacedHelpers } from "vuex";
+const { mapGetters } = createNamespacedHelpers("recipes");
+export default {
+  name: "IngredientSearchCom",
+  data() {
+    return {
+      keyword: "",
+      searchResults: [],
+    };
+  },
+  props: ["selectedIgd"],
+  computed: {
+    ...mapGetters(["igdTypeData"]),
+  },
+  methods: {
+    handleOnSearch() {
+      if (!this.keyword) {
+        return;
+      }
+      this.searchResults = this.igdTypeData.reduce((arr, igd) => {
+        if (igd.name.includes(this.keyword)) {
+          arr.push(igd);
+        }
+        return arr;
+      }, []);
+      // console.log(this.searchResults);
+    },
+    handleOnDayClick(data, numDay) {
+      const { name, id } = data;
+      this.$emit("onDayClick", { name, id, numDay });
+    },
+    handleOnIgdClick(data) {
+      const { name, id } = data;
+      this.$emit("onClick", { name, id });
+    },
+    reset() {
+      this.keyword = "";
+      this.searchResults = [];
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+/deep/ :focus {
+  outline: 0;
+}
+
+.ingredient_search_com_wrapper {
+  .header {
+    display: flex;
+    align-items: center;
+    padding: 4px;
+
+    .label {
+      width: 38px;
+    }
+    .search {
+      flex: 1;
+    }
+    .search_btn {
+      margin-left: 4px;
+    }
+  }
+
+  .content {
+    margin: 8px 0;
+
+    .title {
+      font-size: 14px;
+      color: #8c8c8c;
+      padding: 4px 0;
+    }
+
+    .item {
+      font-size: 14px;
+      margin: 4px;
+      border-radius: 8px;
+      cursor: pointer;
+      display: inline-block;
+      color: #262626;
+      border: 1px solid #8c8c8c;
+      padding: 3px 8px;
+      word-break: normal;
+      transition: all 0.3s;
+
+      &:hover {
+        color: white;
+        background: #d96969;
+        border-color: #d96969;
+      }
+    }
+
+    .selected_item {
+      color: white;
+      background: #d96969;
+      border-color: #d96969;
+      font-weight: bold;
+    }
+  }
+}
+</style>
diff --git a/stdiet-ui/src/views/custom/recipesBuild/VerifyView/PhysicalSignCom/index.vue b/stdiet-ui/src/views/custom/recipesBuild/VerifyView/PhysicalSignCom/index.vue
new file mode 100644
index 000000000..e0767867c
--- /dev/null
+++ b/stdiet-ui/src/views/custom/recipesBuild/VerifyView/PhysicalSignCom/index.vue
@@ -0,0 +1,132 @@
+<template>
+  <div class="physical_sign_com_wrapper">
+    <section class="content">
+      <span
+        v-for="item in verifyNotRecData"
+        :key="item.name"
+        :class="`item ${
+          selectedNotRecName === item.name ? 'selected_item' : ''
+        } `"
+        @click="handleOnNameClick(item)"
+        >{{ item.name }}
+      </span>
+
+      <div class="divider" v-if="!!igdDatas.length" />
+
+      <el-popover
+        v-for="item in igdDatas"
+        :key="item.name"
+        :title="item.name"
+        placement="top"
+        trigger="hover"
+      >
+        <el-button
+          type="text"
+          v-for="dData in item.data"
+          :key="dData.day"
+          @click="handleOnDayClick(item, dData.num)"
+          >{{ `第${dData.day}天` }}</el-button
+        >
+        <span
+          slot="reference"
+          :class="`item ${selectedIgd === item.id ? 'selected_item' : ''} `"
+          @click="handleOnIgdClick(item)"
+          >{{ item.name }}
+        </span>
+      </el-popover>
+    </section>
+  </div>
+</template>
+<script>
+import { createNamespacedHelpers } from "vuex";
+const { mapGetters } = createNamespacedHelpers("recipes");
+export default {
+  name: "PhysicalSignCom",
+  data() {
+    return {
+      selectedNotRecName: "",
+      igdDatas: [],
+    };
+  },
+  props: ["selectedIgd"],
+  computed: {
+    ...mapGetters(["verifyNotRecData"]),
+  },
+  methods: {
+    handleOnNameClick(obj) {
+      const { name, data } = obj;
+      if (this.selectedNotRecName === name) {
+        this.selectedNotRecName = "";
+        this.igdDatas = [];
+      } else {
+        this.selectedNotRecName = name;
+        this.igdDatas = data;
+      }
+    },
+    handleOnDayClick(data, numDay) {
+      const { name, id } = data;
+      this.$emit("onDayClick", { name, id, numDay });
+    },
+    handleOnIgdClick(data) {
+      const { name, id } = data;
+      this.$emit("onClick", { name, id });
+    },
+    reset() {
+      this.selectedNotRecName = "";
+      this.igdDatas = [];
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+/deep/ :focus {
+  outline: 0;
+}
+.physical_sign_com_wrapper {
+  .header {
+    display: flex;
+    align-items: center;
+    padding: 4px;
+  }
+  .content {
+    margin: 8px 0;
+
+    .title {
+      font-size: 14px;
+      color: #8c8c8c;
+      padding: 4px 0;
+    }
+
+    .divider {
+      border-bottom: 1px solid #e6ebf5;
+      margin: 12px 0;
+    }
+
+    .item {
+      font-size: 14px;
+      margin: 4px;
+      border-radius: 8px;
+      cursor: pointer;
+      display: inline-block;
+      color: #262626;
+      border: 1px solid #8c8c8c;
+      padding: 3px 8px;
+      word-break: normal;
+      transition: all 0.3s;
+
+      &:hover {
+        color: white;
+        background: #d96969;
+        border-color: #d96969;
+      }
+    }
+
+    .selected_item {
+      color: white;
+      background: #d96969;
+      border-color: #d96969;
+      font-weight: bold;
+    }
+  }
+}
+</style>
diff --git a/stdiet-ui/src/views/custom/recipesBuild/VerifyView/index.vue b/stdiet-ui/src/views/custom/recipesBuild/VerifyView/index.vue
index bb423afbc..aab65ef1f 100644
--- a/stdiet-ui/src/views/custom/recipesBuild/VerifyView/index.vue
+++ b/stdiet-ui/src/views/custom/recipesBuild/VerifyView/index.vue
@@ -1,33 +1,29 @@
 <template>
   <div class="verify_view_wrapper">
-    <div>病理忌口</div>
-    <div class="content">
-      <span
-        :class="`item ${
-          selectedNotRec.includes(item.name) ? 'selected_item' : ''
-        } `"
-        v-for="item in verifyNotRecData"
-        :key="item.name"
-        @click="handleOnClick(item)"
-        >{{ item.name }}</span
-      >
-    </div>
-    <div style="margin: 24px 0 8px 0">涉及食材</div>
-    <div v-for="key in Object.keys(igdTypeDetial).reverse()" :key="key">
-      <div style="font-size: 14px; color: #8c8c8c">{{ igdTypeDict[key] }}</div>
-      <div class="content">
-        <span
-          :class="`item ${selectedIgd === item.id ? 'selected_item' : ''} `"
-          v-for="item in igdTypeDetial[key]"
-          :key="item.id"
-          @click="handleOnIgdClick(item)"
-          >{{ item.name }}
-        </span>
-      </div>
-    </div>
+    <el-tabs
+      v-model="activeName"
+      @tab-click="handleOnTabClick"
+      :style="{ 'margin-right': '16px' }"
+    >
+      <el-tab-pane label="病理忌口" name="0">
+        <PhysicalSignCom
+          :selectedIgd.sync="selectedIgd"
+          @onDayClick="handleOnDayClick"
+          @onClick="handleOnClick"
+        />
+      </el-tab-pane>
+      <el-tab-pane label="食材忌口" name="1">
+        <IngredientSearchCom
+          :selectedIgd.sync="selectedIgd"
+          @onDayClick="handleOnDayClick"
+          @onClick="handleOnClick"
+        />
+      </el-tab-pane>
+    </el-tabs>
   </div>
 </template>
 <script>
+import VueScrollTo from "vue-scrollto";
 import { createNamespacedHelpers } from "vuex";
 const {
   mapActions,
@@ -35,63 +31,43 @@ const {
   mapGetters,
   mapMutations,
 } = createNamespacedHelpers("recipes");
+import IngredientSearchCom from "./IngredientSearchCom";
+import PhysicalSignCom from "./PhysicalSignCom";
 export default {
   name: "VerifyView",
   data() {
     return {
-      selectedNotRec: [],
+      activeName: "0",
       selectedIgd: 0,
     };
   },
+  components: { IngredientSearchCom, PhysicalSignCom },
   computed: {
-    ...mapGetters(["verifyNotRecData", "igdTypeDict", "igdTypeDetial"]),
+    ...mapGetters(["verifyNotRecData"]),
   },
   methods: {
-    handleOnClick(data) {
-      if (this.selectedIgd !== 0) {
-        this.selectedIgd = 0;
-        this.setNotRecIgds({ data: [] });
-      }
-      if (this.selectedNotRec.some((str) => data.name === str)) {
-        this.selectedNotRec = this.selectedNotRec.filter(
-          (str) => str !== data.name
-        );
-      } else {
-        this.selectedNotRec.push(data.name);
-        this.selectedNotRec = JSON.parse(JSON.stringify(this.selectedNotRec));
-      }
-
-      const notRecIgds = this.selectedNotRec.reduce((arr, cur) => {
-        const tarData = this.verifyNotRecData.find((obj) => obj.name === cur);
-        if (tarData) {
-          tarData.data.forEach((obj) => {
-            if (!arr.includes(obj.igdId)) {
-              arr.push(obj.igdId);
-            }
-          });
-        }
-        return arr;
-      }, []);
-
-      // console.log({
-      //   data,
-      //   notRecIgds,
-      //   verifyNotRecData: this.verifyNotRecData,
-      // });
-
-      this.setNotRecIgds({ data: notRecIgds });
+    handleOnTabClick(tab) {
+      this.activeName = tab.name;
     },
-    handleOnIgdClick(data) {
-      if (this.selectedNotRec.length > 0) {
-        this.selectedNotRec = [];
-        this.setNotRecIgds({ data: [] });
+    handleOnDayClick(data) {
+      console.log(data);
+      const { id, numDay } = data;
+      if (this.selectedIgd !== id) {
+        this.selectedIgd = id;
+        this.setNotRecIgds({ data: [this.selectedIgd] });
       }
 
+      this.setCurrentDay({ currentDay: numDay });
+      VueScrollTo.scrollTo(`#recipes${numDay}`, 500, {
+        container: "#recipes_content",
+      });
+    },
+    handleOnClick(data) {
       this.selectedIgd = data.id === this.selectedIgd ? 0 : data.id;
-
       this.setNotRecIgds({ data: [this.selectedIgd] });
     },
-    ...mapMutations(["setNotRecIgds"]),
+
+    ...mapMutations(["setNotRecIgds", "setCurrentDay"]),
   },
 };
 </script>
@@ -99,33 +75,5 @@ export default {
 .verify_view_wrapper {
   height: calc(100vh - 32px);
   overflow: auto;
-  .content {
-    margin: 8px 0;
-    .item {
-      font-size: 14px;
-      margin: 4px;
-      border-radius: 8px;
-      cursor: pointer;
-      display: inline-block;
-      color: #262626;
-      border: 1px solid #8c8c8c;
-      padding: 3px 8px;
-      word-break: normal;
-      transition: all 0.3s;
-
-      &:hover {
-        color: white;
-        background: #d96969;
-        border-color: #d96969;
-      }
-    }
-
-    .selected_item {
-      color: white;
-      background: #d96969;
-      border-color: #d96969;
-      font-weight: bold;
-    }
-  }
 }
 </style>