更改房间管理页面

src/views/system/room/index.vue

@@ -209,14 +209,18 @@
           <el-input v-model="form.price" placeholder="请输入房间单价(默认单位：元/小时)" />
         </el-form-item>
         <el-form-item label="套餐" prop="packIds">
-          <el-select style="width: 100%;" v-model="packIds" multiple  placeholder="套餐" @change="onChangePackId">
-            <el-option
-              v-for="item in packList"
-              :key="item.id"
-              :label="item.name+'-'+'时段'+item.packaStartPeriod+'-'+item.packaEndPeriod"
-              :value="item.id"
-            ></el-option>
-          </el-select>
+          <div style="display: flex;flex-direction: row;align-items: center;width: 100%;">
+            <el-select style="width: 100%;" v-model="packIds" multiple  placeholder="套餐" @change="onChangePackId">
+              <el-option
+                v-for="item in packList"
+                :key="item.id"
+                :label="item.name+'-'+'时段'+item.packaStartPeriod+'-'+item.packaEndPeriod"
+                :value="item.id"
+              ></el-option>
+            </el-select>
+            <el-button type="primary" icon="el-icon-circle-plus"  @change="packAdd"/>
+<!--              <i class="el-icon-circle-plus" style="font-size: 32px;color: #1c84c6;margin-left:4px;" @change="packAdd"></i>-->
+          </div>
         </el-form-item>
         <el-form-item label="备注" prop="remark">
           <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
@@ -227,6 +231,34 @@
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
+    <!-- 添加或修改套餐对话框 -->
+    <el-dialog :title="packTitle" :visible.sync="packOpen" width="500px">
+      <el-form ref="form" :model="packFrom" label-width="120px">
+        <el-form-item label="套餐名称" prop="name">
+          <el-input v-model="packFrom.name" placeholder="请输入套餐名称" />
+        </el-form-item>
+        <el-form-item label="时长" prop="duration">
+          <el-input v-model="packFrom.duration" placeholder="请输入时长" />
+        </el-form-item>
+        <el-form-item label="金额" prop="price">
+          <el-input v-model="packFrom.price" placeholder="请输入金额" />
+        </el-form-item>
+        <el-form-item label="套餐开始时段" prop="packaStartPeriod">
+          <el-input v-model="packFrom.packaStartPeriod" placeholder="请输入套餐开始时段" />
+        </el-form-item>
+        <el-form-item label="套餐结束时段" prop="packaEndPeriod">
+          <el-input v-model="packFrom.packaEndPeriod" placeholder="请输入套餐结束时段" />
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="packFrom.remark" 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>
+      </div>
+    </el-dialog>
+
   </div>
 </template>
 
@@ -260,6 +292,8 @@ export default {
       roomList: [],
       // 弹出层标题
       title: "",
+      packTitle: "",
+      packOpen: false,
       // 是否显示弹出层
       open: false,
       // 查询参数
@@ -283,6 +317,7 @@ export default {
       },
       // 表单参数
       form: {},
+      packFrom: {},
       // 表单校验
       rules: {
         storeId: [
@@ -331,7 +366,7 @@ export default {
               cssClass:''
             },
             value: obj.id.toString(),
-            label: obj.name,
+            label: obj.name+'-'+'时段'+obj.packaStartPeriod+'-'+obj.packaEndPeriod,
 
 
           }
@@ -388,6 +423,22 @@ export default {
       };
       this.resetForm("form");
     },
+    packReset() {
+      this.packFrom = {
+        id: null,
+        name: null,
+        duration: null,
+        price: null,
+        packaStartPeriod: null,
+        packaEndPeriod: null,
+        createBy: null,
+        createTime: null,
+        updateBy: null,
+        updateTime: null,
+        remark: null
+      };
+      this.resetForm("packFrom");
+    },
     /** 搜索按钮操作 */
     handleQuery() {
       this.queryParams.pageNum = 1;
@@ -411,6 +462,11 @@ export default {
       console.log(this.facilities)
       this.title = "添加房间";
     },
+    packAdd(){
+      this.packReset();
+      this.packOpen = true;
+      this.packTitle = "添加套餐";
+    },
     /** 修改按钮操作 */
     handleUpdate(row) {
       this.reset();