!26 完善菜品功能

Merge pull request !26 from 德仔/develop

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,7 +111,8 @@
     />
 
     <!-- 添加或修改菜品对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="720px" append-to-body>
+    <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="请输入菜品名称"/>
@@ -151,7 +176,6 @@
                   <el-input-number
                     v-model="scope.row.cusWeight"
                     size="small"
-                    type="number"
                     controls-position="right"
                     step="0.5"
                     :min="0.5"/>
@@ -173,7 +197,14 @@
                 prop="weight"
                 label="重量(g)">
                 <template slot-scope="scope">
-                <el-input v-model="scope.row.weight" size="mini" @change="handleInputChange" type="number" step="50"/>
+                  <el-input-number
+                    class="weight"
+                    v-model="scope.row.weight"
+                    size="mini"
+                    controls-position="right"
+                    @change="handleInputChange"
+                    :min="0"
+                    step="50"/>
                 </template>
               </el-table-column>
               <el-table-column
@@ -190,15 +221,34 @@
               </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="请输入内容"/>
+            <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>
-    </el-dialog>
+      </div>
+    </el-drawer>
   </div>
 </template>
 
@@ -237,6 +287,10 @@
         ingDataList: [],
         // 选中的食材列表
         selIngList: [],
+        //
+        selRec: [],
+        //
+        selNotRec: [],
         // 选中的食材id
         selIngIds: [],
         // 选中的食材分量列表
@@ -275,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;
         });
@@ -309,6 +387,8 @@
         this.selIngList = [];
         this.selTableData = [];
         this.oriDataList = [];
+        this.selRec = [];
+        this.selNotRec = [];
         this.ingType = '1';
         this.resetForm("form");
       },
@@ -354,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;
@@ -428,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);
@@ -440,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
         });
@@ -465,9 +577,9 @@
       getSummaries(param) {
         const {columns, data} = param;
         return columns.reduce((arr, cur, idx) => {
-          if (idx) {
+          if (idx > 1) {
             arr[idx] = data.reduce((acc, dAcc) => {
-              if (idx === 1) {
+              if (idx === 2) {
                 return acc + parseFloat(dAcc.weight);
               }
               return acc + dAcc[cur.property] * dAcc.weight / 100;
@@ -520,4 +632,33 @@
     padding: 0 4px;
     border: unset;
   }
+
+  .weight {
+    width: 70px
+  }
+
+  .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>