食谱编辑交互

stdiet-ui/src/components/AutoHideInfo/index.vue

@@ -3,9 +3,14 @@
     <div v-for="item in mData" :key="item">
       {{ item }}
     </div>
-    <div v-if="data.length > 3">
+    <div v-if="data.length > line">
-      <div>...</div>
+      <div v-if="line > 0">...</div>
-      <el-popover placement="top-start" width="200" popper-class="autohideinfo_detial" trigger="hover">
+      <el-popover
+        placement="top-start"
+        width="200"
+        popper-class="autohideinfo_detial"
+        trigger="hover"
+      >
         <div v-for="item in data" :key="item">{{ item }}</div>
         <el-button type="text" slot="reference">详情</el-button>
       </el-popover>
@@ -17,20 +22,23 @@
 export default {
   name: "AutoHideInfo",
   data() {
-      return {
+    return {};
-      };
   },
   props: {
     data: {
       type: Array,
-        default: '',
+      default: "",
       // required: true,
     },
+    line: {
+      type: Number,
+      default: 3,
+    },
   },
   computed: {
     mData: function () {
       if (this.data instanceof Array) {
-          return this.data.slice(0, 3);
+        return this.data.slice(0, this.line);
       }
       return [];
     },
@@ -40,7 +48,6 @@
 
 <style scoped>
 .autohideinfo_wrapper {
-
 }
 
 .autohideinfo_detial {

stdiet-ui/src/components/ContractDrawer/index.vue

@@ -4,6 +4,7 @@
       :title="title"
       :close-on-press-escape="false"
       :visible.sync="visible"
+      :wrapperClosable="false"
       @closed="handleOnClosed"
       size="40%"
     >
@@ -22,22 +23,48 @@
         </el-row>
 
         <el-table :data="contractList">
-          <el-table-column label="合同编号" align="center" prop="id"  width="150"/>
+          <el-table-column
-          <el-table-column label="合同状态" align="center" prop="status" width="80" >
+            label="合同编号"
+            align="center"
+            prop="id"
+            width="150"
+          />
+          <el-table-column
+            label="合同状态"
+            align="center"
+            prop="status"
+            width="80"
+          >
             <template slot-scope="scope">
               <el-tag
                 :type="scope.row.status === 'yes' ? 'success' : 'danger'"
-                disable-transitions>
+                disable-transitions
-                {{scope.row.status === 'yes' ? '已签订':'未签订'}}
+              >
+                {{ scope.row.status === "yes" ? "已签订" : "未签订" }}
               </el-tag>
             </template>
           </el-table-column>
-          <el-table-column label="客户姓名" align="center" prop="name" width="200"/>
+          <el-table-column
+            label="客户姓名"
+            align="center"
+            prop="name"
+            width="200"
+          />
 
-          <el-table-column label="合同地址" align="center" prop="path" width="80">
+          <el-table-column
+            label="合同地址"
+            align="center"
+            prop="path"
+            width="80"
+          >
             <template slot-scope="scope">
-              <el-button type="text" icon="el-icon-copy-document" @click="handleCopy(scope.row.path)" class="copyBtn"
+              <el-button
-                         :data-clipboard-text="copyValue">复制
+                type="text"
+                icon="el-icon-copy-document"
+                @click="handleCopy(scope.row.path)"
+                class="copyBtn"
+                :data-clipboard-text="copyValue"
+                >复制
               </el-button>
             </template>
           </el-table-column>
@@ -80,14 +107,14 @@
 <script>
 import { delContract, listContract } from "@/api/custom/contract";
 import ContractDetail from "@/components/ContractDetail";
-  import Clipboard from 'clipboard';
+import Clipboard from "clipboard";
 import ContractAdd from "@/components/ContractAdd";
 
 export default {
   name: "CustomerContractDrawer",
   components: {
-    'contract-detail': ContractDetail,
+    "contract-detail": ContractDetail,
-    'add-contract':ContractAdd
+    "add-contract": ContractAdd,
   },
   data() {
     return {
@@ -108,7 +135,7 @@ export default {
       this.fetchContractList(data.id);
     },
     fetchContractList(cusId) {
-      listContract({"customerId": cusId }).then((res) => {
+      listContract({ customerId: cusId }).then((res) => {
         this.contractList = res.rows;
         this.visible = true;
       });
@@ -118,7 +145,7 @@ export default {
         {
           customer: this.data.name,
           customerId: this.data.id,
-          nutritionistId: this.data.mainDietitian
+          nutritionistId: this.data.mainDietitian,
         },
         () => {
           this.fetchContractList(this.data.id);
@@ -131,9 +158,7 @@ export default {
     handleOnDetailClick(data) {
       this.$refs.contractDetailRef.showDialog(data.id);
     },
-    handleOnEditClick(data) {
+    handleOnEditClick(data) {},
-
-    },
     handleOnDeleteClick(data) {
       const contractIds = data.id;
       this.$confirm(
@@ -155,18 +180,18 @@ export default {
         .catch(function () {});
     },
     handleCopy(path) {
-      this.copyValue = window.location.origin.replace('manage', 'sign') + path;
+      this.copyValue = window.location.origin.replace("manage", "sign") + path;
-      const btnCopy = new Clipboard('.copyBtn');
+      const btnCopy = new Clipboard(".copyBtn");
       this.$message({
-        message: '拷贝成功',
+        message: "拷贝成功",
-        type: 'success'
+        type: "success",
       });
     },
     handleLook(path) {
-      const url = window.location.origin.replace('manage', 'sign') + path;
+      const url = window.location.origin.replace("manage", "sign") + path;
       // const url = "http://stsign.busyinn.com" + path;
-      window.open(url, '_blank');
+      window.open(url, "_blank");
-    }
+    },
   },
 };
 </script>

stdiet-ui/src/components/OrderDrawer/index.vue

@@ -4,6 +4,7 @@
       :title="title"
       :close-on-press-escape="false"
       :visible.sync="visible"
+      :wrapperClosable="false"
       @closed="handleOnClosed"
       size="40%"
     >

stdiet-ui/src/store/modules/recipes.js

@@ -12,6 +12,7 @@ const oriState = {
   recipesData: [],
   cusUnitOptions: [],
   cusWeightOptions: [],
+  dishesTypeOptions: [],
   typeOptions: [],
   currentDay: -1
 };
@@ -23,36 +24,29 @@ const mutations = {
   },
   setRecipesData(state, payload) {
     state.recipesData = payload.recipesData;
-    console.log(payload.recipesData);
+    // console.log(payload.recipesData);
   },
-  updateRecipesDishesWeight(state, payload) {
+  updateRecipesDishesDetail(state, payload) {
     const tarDishes = state.recipesData[payload.num].dishes.find(
       obj => obj.id === payload.dishesId
     );
     if (tarDishes) {
       const tarIgd = tarDishes.igdList.find(obj => obj.id === payload.igdId);
       if (tarIgd) {
-        tarIgd.weight = payload.weight;
+        payload.weight && (tarIgd.weight = payload.weight);
+        payload.cusWeight && (tarIgd.cusWeight = payload.cusWeight);
+        payload.cusUnit && (tarIgd.cusUnit = payload.cusUnit);
       }
     }
   },
-  updateRecipesDishesCustomWeight(state, payload) {
+  addRecipesDishes(state, payload) {
-    const tarDishes = state.recipesData[payload.num].dishes.find(
+
-      obj => obj.id === payload.dishesId
+    state.recipesData[payload.num].dishes.push(payload.data);
-    );
-    if (tarDishes) {
-      const tarIgd = tarDishes.igdList.find(obj => obj.id === payload.igdId);
-      if (tarIgd) {
-        tarIgd.cusWeight = payload.cusWeight;
-        tarIgd.cusUnit = payload.cusUnit;
-      }
-    }
   },
   updateOptions(state, payload) {
-    payload.cusUnitOptions && (state.cusUnitOptions = payload.cusUnitOptions);
+    Object.keys(payload).forEach(key => {
-    payload.cusWeightOptions &&
+      state[key] = payload[key];
-      (state.cusWeightOptions = payload.cusWeightOptions);
+    });
-    payload.typeOptions && (state.typeOptions = payload.typeOptions);
   },
   setCurrentDay(state, payload) {
     state.currentDay =
@@ -88,6 +82,9 @@ const actions = {
     getDicts("cus_dishes_type").then(response => {
       commit("updateOptions", { typeOptions: response.data });
     });
+    getDicts("cus_dishes_type").then(response => {
+      commit("updateOptions", { dishesTypeOptions: response.data });
+    });
 
     // 健康数据
     const healthyDataResult = await getCustomerPhysicalSignsByCusId(

stdiet-ui/src/utils/healthyData.js

@@ -384,7 +384,8 @@ export const yesNoName = [
   "longEatDrugFlag",
   "allergyFlag",
   "smokeFlag",
-  "secondSmoke"
+  "secondSmoke",
+  "sleepDrugFlag"
 ];
 
 export const dictName = [
@@ -550,7 +551,7 @@ export function dealHealthy(customerHealthy) {
     customerHealthy.getupTime += "点";
   }
   if (customerHealthy.hasOwnProperty("signList")) {
-    customerHealthy.signStr = customerHealthy.signList
+    customerHealthy.signStr = (customerHealthy.signList || [])
       .map(obj => obj.name)
       .join("，");
   }

stdiet-ui/src/views/custom/dishes/index.vue

@@ -162,9 +162,9 @@
     <el-drawer
       :title="title"
       :visible.sync="open"
+      :wrapperClosable="false"
       size="50%"
       :close-on-press-escape="false"
-      :close-on-click-modal="false"
     >
       <div class="drawer_content">
         <el-row class="content_detail">

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>

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>

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>

stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesCom/index.vue

@@ -11,31 +11,26 @@
         currentDay + 1 === num ? '1px solid #d96969' : 'none'
       }`"
     >
-      <el-table-column
+      <el-table-column prop="type" :width="100" align="center">
-        prop="type"
-        :formatter="typeFormatter"
-        :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-tooltip
-            <el-button
+            class="item"
-              type="primary"
+            effect="dark"
-              size="mini"
+            content="点击添加菜品"
-              icon="el-icon-edit"
+            placement="top"
-              class="fun_button"
-              @click="handleOnAdd"
-              >添加</el-button
           >
-            <span class="num_day" slot="reference">菜品</span>
+            <span class="num_day" @click="handleOnAdd">菜品</span>
-          </el-popover>
+          </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);
+      // console.log(this.num);
-    },
+      this.$refs.drawerRef.showDrawer();
-    handleOnEdit(data) {
-      console.log(data);
     },
     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",
+      "updateRecipesDishesDetail",
-      "updateRecipesDishesCustomWeight",
+      "addRecipesDishes",
     ]),
   },
 };
@@ -310,6 +312,7 @@ export default {
 
   .num_day {
     cursor: pointer;
+    outline: none;
   }
 }
 </style>