新增/修改房间时添加增加套餐功能

src/api/system/pack.js

@@ -33,6 +33,14 @@ export function addPack(data) {
   })
 }
 
+export function insertPack(data) {
+  return request({
+    url: '/system/pack/add',
+    method: 'post',
+    data: data
+  })
+}
+
 // 修改套餐
 export function updatePack(data) {
   return request({

src/views/system/pack/index.vue

@@ -58,28 +58,28 @@
           v-hasPermi="['system:pack:add']"
         >新增</el-button>
       </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="success"
-          plain
-          icon="el-icon-edit"
-          size="mini"
-          :disabled="single"
-          @click="handleUpdate"
-          v-hasPermi="['system:pack:edit']"
-        >修改</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="danger"
-          plain
-          icon="el-icon-delete"
-          size="mini"
-          :disabled="multiple"
-          @click="handleDelete"
-          v-hasPermi="['system:pack:remove']"
-        >删除</el-button>
-      </el-col>
+<!--      <el-col :span="1.5">-->
+<!--        <el-button-->
+<!--          type="success"-->
+<!--          plain-->
+<!--          icon="el-icon-edit"-->
+<!--          size="mini"-->
+<!--          :disabled="single"-->
+<!--          @click="handleUpdate"-->
+<!--          v-hasPermi="['system:pack:edit']"-->
+<!--        >修改</el-button>-->
+<!--      </el-col>-->
+<!--      <el-col :span="1.5">-->
+<!--        <el-button-->
+<!--          type="danger"-->
+<!--          plain-->
+<!--          icon="el-icon-delete"-->
+<!--          size="mini"-->
+<!--          :disabled="multiple"-->
+<!--          @click="handleDelete"-->
+<!--          v-hasPermi="['system:pack:remove']"-->
+<!--        >删除</el-button>-->
+<!--      </el-col>-->
       <el-col :span="1.5">
         <el-button
           type="warning"
@@ -94,7 +94,7 @@
     </el-row>
 
     <el-table v-loading="loading" :data="packList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
+<!--      <el-table-column type="selection" width="55" align="center" />-->
       <el-table-column label="套餐名称" align="center" prop="name" />
       <el-table-column label="时长" align="center" prop="duration" />
       <el-table-column label="金额" align="center" prop="price" />
@@ -305,13 +305,12 @@ export default {
           roomnNameStr = `是否确认删除${row.name}数据及其关联的房间${str}下的绑定套餐？`
         }
         this.$modal.confirm(roomnNameStr).then((result) =>{
-          return delPack(ids);
+          return delPack(row.id);
         }).then(() => {
           this.getList();
           this.$modal.msgSuccess("删除成功");
         }).catch(() => {});
       });
-
     },
     /** 导出按钮操作 */
     handleExport() {

src/views/system/room/index.vue

@@ -218,8 +218,8 @@
                 :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>-->
+<!--            <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;" @click="packAdd"></i>
           </div>
         </el-form-item>
         <el-form-item label="备注" prop="remark">
@@ -232,30 +232,30 @@
       </div>
     </el-dialog>
     <!-- 添加或修改套餐对话框 -->
-    <el-dialog :title="packTitle" :visible.sync="packOpen" width="500px">
-      <el-form ref="form" :model="packFrom" label-width="120px">
+    <el-dialog :title="packTitle" :visible.sync="packOpen" width="80%px" append-to-bod>
+      <el-form ref="packForm" :model="packForm" label-width="120px">
         <el-form-item label="套餐名称" prop="name">
-          <el-input v-model="packFrom.name" placeholder="请输入套餐名称" />
+          <el-input v-model="packForm.name" placeholder="请输入套餐名称" />
         </el-form-item>
         <el-form-item label="时长" prop="duration">
-          <el-input v-model="packFrom.duration" placeholder="请输入时长" />
+          <el-input v-model="packForm.duration" placeholder="请输入时长" />
         </el-form-item>
         <el-form-item label="金额" prop="price">
-          <el-input v-model="packFrom.price" placeholder="请输入金额" />
+          <el-input v-model="packForm.price" placeholder="请输入金额" />
         </el-form-item>
         <el-form-item label="套餐开始时段" prop="packaStartPeriod">
-          <el-input v-model="packFrom.packaStartPeriod" placeholder="请输入套餐开始时段" />
+          <el-input v-model="packForm.packaStartPeriod" placeholder="请输入套餐开始时段" />
         </el-form-item>
         <el-form-item label="套餐结束时段" prop="packaEndPeriod">
-          <el-input v-model="packFrom.packaEndPeriod" placeholder="请输入套餐结束时段" />
+          <el-input v-model="packForm.packaEndPeriod" placeholder="请输入套餐结束时段" />
         </el-form-item>
         <el-form-item label="备注" prop="remark">
-          <el-input v-model="packFrom.remark" type="textarea" placeholder="请输入内容" />
+          <el-input v-model="packForm.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>
+        <el-button type="primary" @click="submitPackForm">确 定</el-button>
+        <el-button @click="packCancel">取 消</el-button>
       </div>
     </el-dialog>
 
@@ -265,7 +265,7 @@
 <script>
 import { listRoom, getRoom, delRoom, addRoom, updateRoom } from "@/api/system/room";
 import { allList } from '@/api/system/store'
-import { query } from '@/api/system/pack'
+import {insertPack, query} from '@/api/system/pack'
 
 export default {
   name: "Room",
@@ -317,7 +317,7 @@ export default {
       },
       // 表单参数
       form: {},
-      packFrom: {},
+      packForm: {},
       // 表单校验
       rules: {
         storeId: [
@@ -335,18 +335,12 @@ export default {
   created() {
     this.onGetAllStoreList()
     this.onPackList()
-
-  },
-  mounted() {
-    console.log(this.dict)
   },
   methods: {
     onChange(e){
-      console.log(e)
       this.form.facilities = e.join()
     },
     onChangePackId(e){
-      console.log(e)
       this.form.packIds = e.join()
     },
     onGetAllStoreList(){
@@ -367,11 +361,9 @@ export default {
             },
             value: obj.id.toString(),
             label: obj.name+'-'+'时段'+obj.packaStartPeriod+'-'+obj.packaEndPeriod,
-
-
           }
         })
-        console.log(this.packList,9090999)
+        this.$forceUpdate();
         this.getList();
       })
     },
@@ -396,8 +388,13 @@ export default {
       this.open = false;
       this.reset();
     },
+    packCancel() {
+      this.packOpen = false;
+      this.packReset();
+    },
     // 表单重置
     reset() {
+      this.packIds = []
       this.facilities = []
       this.form = {
         id: null,
@@ -410,6 +407,7 @@ export default {
         info: null,
         status: "0",
         price: null,
+        packIds:'',
         doorLockCode: null,
         electricControlCode: null,
         password: null,
@@ -424,7 +422,7 @@ export default {
       this.resetForm("form");
     },
     packReset() {
-      this.packFrom = {
+      this.packForm = {
         id: null,
         name: null,
         duration: null,
@@ -437,7 +435,7 @@ export default {
         updateTime: null,
         remark: null
       };
-      this.resetForm("packFrom");
+      this.resetForm("packForm");
     },
     /** 搜索按钮操作 */
     handleQuery() {
@@ -477,11 +475,7 @@ export default {
           this.facilities = this.form.facilities.split(",")
         }
         if(this.form.packIds){
-          //字符串转数字
-          var int = this.form.packIds.split(",")
-          this.packIds  = int.map((item) => {
-            return Number(item);
-          });
+          this.packIds = this.form.packIds.split(",").map(item=>Number(item))
         }
         this.open = true;
         this.title = "修改房间";
@@ -492,14 +486,17 @@ export default {
       this.$refs["form"].validate(valid => {
         if (valid) {
           if (this.form.id != null) {
+            if(this.packIds.length){
+              this.form.packIds = this.packIds.join();
+            }
             updateRoom(this.form).then(response => {
               this.$modal.msgSuccess("修改成功");
               this.open = false;
               this.getList();
             });
           } else {
-            if(this.form.packIds){
-              this.packIds = this.form.packIds.split(",")
+            if(this.packIds.length){
+              this.form.packIds = this.packIds.join();
             }
             addRoom(this.form).then(response => {
               this.$modal.msgSuccess("新增成功");
@@ -525,7 +522,21 @@ export default {
       this.download('system/room/export', {
         ...this.queryParams
       }, `room_${new Date().getTime()}.xlsx`)
-    }
+    },
+    submitPackForm() {
+      this.$refs["packForm"].validate(valid => {
+        if (valid) {
+          insertPack(this.packForm).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.packOpen = false;
+              this.onPackList();
+              this.$nextTick(() => {
+                this.packIds.push(response.data)
+              });
+            });
+        }
+      });
+    },
   }
 };
 </script>