diff --git a/stdiet-ui/src/views/custom/dishes/index.vue b/stdiet-ui/src/views/custom/dishes/index.vue
index 474a43547..51719e3b9 100644
--- a/stdiet-ui/src/views/custom/dishes/index.vue
+++ b/stdiet-ui/src/views/custom/dishes/index.vue
@@ -11,7 +11,7 @@
         />
       </el-form-item>
       <el-form-item label="菜品类型" prop="type">
-        <el-select v-model="queryParams.type" placeholder="请选择菜品类型" clearable size="small">
+        <el-select v-model="queryParams.type" multiple placeholder="请选择菜品类型" clearable size="small">
           <el-option
             v-for="dict in typeOptions"
             :key="dict.dictValue"
@@ -55,6 +55,30 @@
       <!--      <el-table-column label="id" align="center" prop="id" />-->
       <el-table-column label="菜品名称" align="center" prop="name"/>
       <el-table-column label="菜品类型" align="center" prop="type" :formatter="typeFormat"/>
+      <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">
+          <div v-for="tag in scope.row.recTags"
+            :key="tag">
+            {{tag}}
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="忌口人群" align="center">
+        <template slot-scope="scope">
+          <div v-for="tag in scope.row.notRecTags"
+               :key="tag">
+            {{tag}}
+          </div>
+        </template>
+      </el-table-column>
       <el-table-column label="做法" align="center" prop="methods"/>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
@@ -87,71 +111,71 @@
     />
 
     <!-- 添加或修改菜品对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="720px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="菜品名称" prop="name">
-          <el-input v-model="form.name" placeholder="请输入菜品名称"/>
-        </el-form-item>
-        <el-form-item label="菜品类型" prop="type">
-          <el-select v-model="form.type" placeholder="请选择菜品类型">
-            <el-option
-              v-for="dict in typeOptions"
-              :key="dict.dictValue"
-              :label="dict.dictLabel"
-              :value="dict.dictValue"
-            ></el-option>
-          </el-select>
-        </el-form-item>
-        <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="{
+    <el-drawer :title="title" :visible.sync="open" size="50%">
+      <div class="drawer_content">
+        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+          <el-form-item label="菜品名称" prop="name">
+            <el-input v-model="form.name" placeholder="请输入菜品名称"/>
+          </el-form-item>
+          <el-form-item label="菜品类型" prop="type">
+            <el-select v-model="form.type" placeholder="请选择菜品类型">
+              <el-option
+                v-for="dict in typeOptions"
+                :key="dict.dictValue"
+                :label="dict.dictLabel"
+                :value="dict.dictValue"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <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-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="食材">
-            </el-table-column>
-            <el-table-column label="通俗计量">
-              <template slot-scope="scope">
+              @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-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="食材">
+              </el-table-column>
+              <el-table-column label="通俗计量">
+                <template slot-scope="scope">
                 <span class="cus-unit">
                   <el-input-number
                     v-model="scope.row.cusWeight"
                     size="small"
-                    type="number"
                     controls-position="right"
                     step="0.5"
                     :min="0.5"/>
@@ -167,46 +191,64 @@
                     />
                   </el-select>
                 </span>
-              </template>
-            </el-table-column>
-            <el-table-column
-              prop="weight"
-              label="重量(g)">
-              <template slot-scope="scope">
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="weight"
+                label="重量(g)">
+                <template slot-scope="scope">
                   <el-input-number
                     class="weight"
                     v-model="scope.row.weight"
                     size="mini"
                     controls-position="right"
                     @change="handleInputChange"
-                    type="number"
                     :min="0"
                     step="50"/>
-              </template>
-            </el-table-column>
-            <el-table-column
-              prop="proteinRatio"
-              label="P/100g">
-            </el-table-column>
-            <el-table-column
-              prop="fatRatio"
-              label="F/100g">
-            </el-table-column>
-            <el-table-column
-              prop="carbonRatio"
-              label="C/100g">
-            </el-table-column>
-          </el-table>
-        </el-form-item>
-        <el-form-item label="做法" prop="methods">
-          <el-input v-model="form.methods" type="textarea" placeholder="请输入内容"/>
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="proteinRatio"
+                label="P/100g">
+              </el-table-column>
+              <el-table-column
+                prop="fatRatio"
+                label="F/100g">
+              </el-table-column>
+              <el-table-column
+                prop="carbonRatio"
+                label="C/100g">
+              </el-table-column>
+            </el-table>
+          </el-form-item>
+          <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-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-form-item label="做法" prop="methods">
+            <el-input v-model="form.methods" type="textarea" placeholder="请输入内容" rows="4"/>
+          </el-form-item>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
       </div>
-    </el-dialog>
+    </el-drawer>
   </div>
 </template>
 
@@ -245,6 +287,10 @@
         ingDataList: [],
         // 选中的食材列表
         selIngList: [],
+        //
+        selRec: [],
+        //
+        selNotRec: [],
         // 选中的食材id
         selIngIds: [],
         // 选中的食材分量列表
@@ -283,7 +329,31 @@
       getList() {
         this.loading = true;
         listDishes(this.queryParams).then(response => {
-          this.dishesList = response.rows;
+          this.dishesList = response.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
+            }
+          });
+          console.log(this.dishesList)
           this.total = response.total;
           this.loading = false;
         });
@@ -317,6 +387,8 @@
         this.selIngList = [];
         this.selTableData = [];
         this.oriDataList = [];
+        this.selRec = [];
+        this.selNotRec = [];
         this.ingType = '1';
         this.resetForm("form");
       },
@@ -362,6 +434,20 @@
               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;
@@ -436,6 +522,8 @@
       handleChange(value, direction, movedKeys) {
         // console.log({oriIgdList: this.oriDataList, selIgdList: this.form.igdList});
         const newTableData = [];
+        this.selRec = [];
+        this.selNotRec = [];
         this.selIngList = value.map(id => {
           // 搜索table中的数据
           let tmpTableObj = this.selTableData.find(obj => obj.id === id);
@@ -448,6 +536,22 @@
               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
         });
@@ -536,4 +640,25 @@
   .weight .el-input .el-input__inner {
     padding: 0 32px 0 4px;
   }
+
+  .drawer_content {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .drawer_content .el-form {
+    /*height: calc(100% - 45px);*/
+    flex: 1 1 0;
+    padding: 12px;
+    overflow: auto;
+  }
+
+  .drawer_content > div {
+    flex: 0 0 45px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: flex-end;
+    padding: 0 12px;
+  }
 </style>