看房预约单

src/views/reservation/addRoom.vue

@@ -0,0 +1,521 @@
+<template>
+  <div v-loading="loading">
+    <el-form ref="form" :model="form" style="width: 100%;padding: 5px" :rules="rules" label-width="auto">
+      <el-row>
+        <el-col style="padding-bottom: 10px">
+          <el-card shadow="always" style="padding-top: 10px">
+            <el-row>
+              <el-col :span="3" class="col-txt"><span><span class="red-asterisk">*</span>父级</span></el-col>
+              <el-col :span="21" class="col-input">
+                <el-form-item prop="findids">
+                  <el-cascader
+                    ref="findids"
+                    v-model="form.findids"
+                    :append-to-body="false"
+                    style="width: 100%;"
+                    :options="options"
+                    clearable
+                    @change="buildChange"
+                  />
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="3" class="col-txt"><span><span class="red-asterisk">*</span>户室号</span></el-col>
+              <el-col :span="9" class="col-input">
+                <el-form-item prop="roomNo">
+                  <el-input v-model="form.roomNo" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="3" class="col-txt"><span><span class="red-asterisk">*</span>所在层</span></el-col>
+              <el-col :span="9" class="col-input">
+                <el-form-item prop="floor">
+                  <el-input v-model="form.floor" />
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="3" class="col-txt"><span>预测套内面积(㎡)</span></el-col>
+              <el-col :span="9" class="col-input">
+                <el-form-item>
+                  <el-input v-model="form.predictionInternalArea" type="number" />
+                </el-form-item>
+              </el-col>
+
+              <el-col :span="3" class="col-txt"><span>预测分摊面积(㎡)</span></el-col>
+              <el-col :span="9" class="col-input">
+                <el-form-item>
+                  <el-input v-model="form.predictionShareArea" type="number" />
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="3" class="col-txt"><span>预测建筑面积(㎡)</span></el-col>
+              <el-col :span="9" class="col-input">
+                <el-form-item>
+                  <el-input v-model="form.predictionBuildArea" type="number" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="3" class="col-txt"><span>预测土地面积(㎡)</span></el-col>
+              <el-col :span="9" class="col-input">
+                <el-form-item>
+                  <el-input v-model="form.predictionLandArea" type="number" />
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="3" class="col-txt"><span><span class="red-asterisk">*</span>实测套内面积(㎡)</span></el-col>
+              <el-col :span="9" class="col-input">
+                <el-form-item prop="actualInternalArea">
+                  <el-input v-model="form.actualInternalArea" type="number" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="3" class="col-txt"><span><span class="red-asterisk">*</span>实测分摊面积(㎡)</span></el-col>
+              <el-col :span="9" class="col-input">
+                <el-form-item prop="actualShareArea">
+                  <el-input v-model="form.actualShareArea" type="number" />
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="3" class="col-txt"><span><span class="red-asterisk">*</span>实测建筑面积(㎡)</span></el-col>
+              <el-col :span="9" class="col-input">
+                <el-form-item prop="actualBuildArea">
+                  <el-input v-model="form.actualBuildArea" type="number" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="3" class="col-txt"><span>实测土地面积(㎡)</span></el-col>
+              <el-col :span="9" class="col-input">
+                <el-form-item>
+                  <el-input v-model="form.actualLandArea" type="number" />
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="3" class="col-txt"><span><span class="red-asterisk">*</span>用途:</span></el-col>
+              <el-col :span="9" class="col-input">
+                <el-form-item prop="roomUse">
+                  <el-select
+                    v-model="form.roomUse"
+                    placeholder=""
+                    filterable
+                    clearable
+                  >
+                    <el-option
+                      v-for="item in dc_data.HOUSE_USAGE"
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value"
+                    />
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="3" class="col-txt"><span>房屋代码</span></el-col>
+              <el-col :span="9" class="col-input">
+                <el-form-item>
+                  <el-input v-model="form.roomNumber" />
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="3" class="col-txt"><span>装修情况:</span></el-col>
+              <el-col :span="9" class="col-input">
+                <el-form-item>
+                  <el-select
+                    v-model="form.decorationSituation"
+                    placeholder=""
+                    filterable
+                    clearable
+                  >
+                    <el-option
+                      v-for="item in dc_data.DECORATION_SITUATION"
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value"
+                    />
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="3" class="col-txt"><span>2.2米以上面积</span></el-col>
+              <el-col :span="9" class="col-input">
+                <el-form-item>
+                  <el-input v-model="form.twoPointTwo" />
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="3" class="col-txt"><span>户型</span></el-col>
+              <el-col :span="9" class="col-input">
+                <el-form-item>
+                  <el-select
+                    v-model="form.houseTypeId"
+                    placeholder=""
+                    filterable
+                    clearable
+                    @change="houseTypeChange"
+                  >
+                    <el-option
+                      v-for="item in houseTypeOption"
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value"
+                    />
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="3" class="col-txt"><span>房屋性质</span></el-col>
+              <el-col :span="9" class="col-input">
+                <el-form-item prop="roomUse">
+                  <el-select
+                    v-model="form.nature"
+                    placeholder=""
+                    filterable
+                    clearable
+                  >
+                    <el-option
+                      v-for="item in dc_data.GROUP_NATURE"
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value"
+                    />
+                  </el-select>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="3" class="col-txt"><span>房屋总价</span></el-col>
+              <el-col :span="9" class="col-input">
+                <el-form-item>
+                  <el-input v-model="form.houseTotalPrice" type="number" />
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="3" class="col-txt"><span>户型图:</span></el-col>
+              <el-col v-if="fileList.length>0" :span="20" class="col-input">
+                <el-form-item>
+                  <el-upload
+                    ref="upload"
+                    action
+                    accept="image/png,image/gif,image/jpg,image/jpeg"
+                    list-type="picture-card"
+                    :file-list="fileList"
+                    :limit="9"
+                    :http-request="uploadHouseTypePicture"
+                    :on-preview="handlePictureCardPreview"
+                    :on-remove="handleRemove"
+                    :on-exceed="handleExceed"
+                    disabled
+                  >
+                    <div slot="tip" class="el-upload__tip">
+                      只能上传jpg/png文件，限制上传9张
+                    </div>
+                  </el-upload>
+                </el-form-item>
+              </el-col>
+              <el-col v-else :span="9" class="col-input">
+                <el-form-item>
+                  <span>未上传</span>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="3" class="col-txt"><span>备注:</span></el-col>
+              <el-col :span="21" class="col-input">
+                <el-form-item>
+                  <el-input v-model="form.remark" type="textarea" maxlength="2000" show-word-limit />
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="3" class="col-txt"><span><span><span class="red-asterisk">*</span>可售状态:</span></span></el-col>
+              <el-col :span="21" class="col-input">
+                <el-form-item prop="saleStatus">
+                  <el-select
+                    v-model="form.saleStatus"
+                    placeholder="请选择"
+
+                    clearable
+                  >
+                    <el-option
+                      v-for="item in dc_data.SALE_STATUS"
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value"
+                    />
+                  </el-select>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-card>
+        </el-col>
+      </el-row>
+    </el-form>
+    <div slot="footer" style="text-align: right">
+      <el-button @click="handleClose">关 闭</el-button>
+      <el-button :loading="loadingFlag" type="primary" @click="confirmSubmit()">提 交</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import Base from '@/views/base/base'
+import { upload } from '@/static/utils/channel'
+import constant from '@/static/utils/constant'
+export default {
+    name: 'AddRoom',
+    mixins: [Base],
+    data() {
+        return {
+            id: '',
+            dc_key: ['SALE_STATUS', 'GROUP_NATURE', 'DECORATION_SITUATION', 'HOUSE_USAGE'],
+            loading: false,
+            loadingFlag: false,
+            form: {
+                houseTypeId: null
+            },
+            rules: {
+                findids: [{ required: true, trigger: 'blur', message: '请选择父级' }],
+                roomNo: [{ required: true, trigger: 'blur', message: '请输入户室号' }],
+                floor: [{ required: true, trigger: 'blur', message: '请输入所在层' }],
+                actualInternalArea: [{ required: true, trigger: 'blur', message: '请输入实测套内面积' }],
+                actualShareArea: [{ required: true, trigger: 'blur', message: '请输入实测分摊面积' }],
+                actualBuildArea: [{ required: true, trigger: 'blur', message: '请输入实测建筑面积' }],
+                roomUse: [{ required: true, trigger: 'change', message: '请选择用途' }],
+                saleStatus: [{ required: true, trigger: 'change', message: '请选择可售状态' }]
+            },
+            fileList: [],
+            options: [],
+            houseTypeOption: [],
+            // 图片预览及其他
+            dialogImageUrl: '',
+            dialogImageVisible: false
+        }
+    },
+    methods: {
+        initData(id) {
+            this.id = id
+            this.initDict(this.dc_key).then((res) => {
+                if (this.id) {
+                    this.getData()
+                }
+            })
+            this.getTreeSelectData()
+        },
+        getData() {
+            const _this = this
+            const postData = {
+                id: this.id
+            }
+            this.baseRequest('getById', postData).then(res => {
+                if (res.data) {
+                    _this.form = Object.assign({}, _this.form, res.data)
+                    if (res.data.roomUse) {
+                        _this.form.roomUse = res.data.roomUse + ''
+                    }
+                    if (res.data.decorationSituation) {
+                        _this.form.decorationSituation = res.data.decorationSituation + ''
+                    }
+                    if (res.data.houseTypeId) {
+                        _this.form.houseTypeId = res.data.houseTypeId + ''
+                    }
+                    if (res.data.saleStatus) {
+                        _this.form.saleStatus = res.data.saleStatus + ''
+                    }
+                    // 回显户型
+                    _this.houseTypeOption = []
+                    _this.baseHouseTypeRequest('listAll', { discId: _this.form.discId }).then(res => {
+                        if (res.data) {
+                            res.data.forEach(item => {
+                                _this.houseTypeOption.push({
+                                    label: item.name + ',建筑面积' + item.buildArea + ',使用面积' + item.useArea,
+                                    value: item.id,
+                                    files: item.fileList
+                                })
+                            })
+                            // 回显户型图片
+                            const obj = _this.houseTypeOption.find(item =>
+                                item.value === _this.form.houseTypeId
+                            )
+                            if (obj !== undefined) {
+                                this.fileList = []
+                                const files = JSON.parse(obj.files)
+                                files.forEach(v => {
+                                    if (v) {
+                                        this.fileList.push({
+                                            url: constant.BASE_URI + '/FileController/download/' + v.data,
+                                            id: v.data
+                                        })
+                                    }
+                                })
+                            } else {
+                                _this.form.houseTypeId = ''
+                            }
+                        }
+                    })
+                    // 填充父级
+                    this.form.findids = []
+                    if (this.form.groupId) {
+                        this.form.findids[0] = this.form.groupId
+                        if (this.form.discId) {
+                            this.form.findids[1] = this.form.discId
+                            if (this.form.buildId) {
+                                this.form.findids[2] = this.form.buildId
+                            }
+                        }
+                    }
+                }
+            })
+        },
+        getTreeSelectData() {
+            this.baseInfoRequest('getTreeData2', {}).then((res) => {
+                this.options = res.data.data || []
+            })
+        },
+        // 上传相关，包括图片、文件
+        handlePictureCardPreview(file) {
+            this.handlePicturePreview(file.url)
+        },
+        handlePicturePreview(url) {
+            this.dialogImageUrl = url
+            this.dialogImageVisible = true
+        },
+        uploadHouseTypePicture(param) {
+            upload(param, true).then((res) => {
+                this.fileList.push(res)
+            })
+        },
+        buildChange(val) {
+            const postData = {
+                discId: val[1]
+            }
+            this.getHouseTypeList(postData)
+            this.form.houseTypeId = ''
+            this.fileList = []
+        },
+        getHouseTypeList(val) {
+            const _this = this
+            _this.houseTypeOption = []
+            _this.baseHouseTypeRequest('listAll', val).then(res => {
+                if (res.data) {
+                    res.data.forEach(item => {
+                        _this.houseTypeOption.push({
+                            label: item.name + ',建筑面积' + item.buildArea + ',使用面积' + item.useArea,
+                            value: item.id,
+                            files: item.fileList
+                        })
+                    })
+                }
+            })
+        },
+        houseTypeChange(val) {
+            this.fileList = []
+            const obj = this.houseTypeOption.find(item =>
+                item.value === val
+            )
+            if (obj !== undefined) {
+                const files = JSON.parse(obj.files)
+                files.forEach(v => {
+                    if (v) {
+                        this.fileList.push({
+                            url: constant.BASE_URI + '/FileController/download/' + v.data,
+                            id: v.data
+                        })
+                    }
+                })
+            }
+        },
+        handleExceed() {
+            this.$message.info('超过文件个数限制')
+        },
+        handleRemove(item) {
+            const id = item.id
+            const idx = this.fileList.findIndex(item => item.id === id)
+            this.fileList.splice(idx, 1)
+        },
+        handleClose() {
+            this.$emit('handleClose')
+        },
+        confirmSubmit() {
+            const _this = this
+            this.$refs.form.validate(valid => {
+                if (valid) {
+                    const ids = this.form.findids
+                    const arr = this.$refs['findids'].getCheckedNodes()[0].pathLabels
+                    if (ids != null && ids != [] && ids != '') {
+                        this.form.groupId = ids[0]
+                        this.form.discId = ids[1]
+                        this.form.buildId = ids[2]
+                    }
+                    if (arr != null && arr != [] && arr != '') {
+                        this.form.groupName = arr[0]
+                        this.form.discName = arr[1]
+                        this.form.buildName = arr[2]
+                    }
+                    const extraData = {}
+                    const postData = Object.assign({}, this.form, extraData)
+                    if (!postData.groupId) {
+                        this.$message({
+                            message: '请选择小区',
+                            type: 'warning'
+                        })
+                        return
+                    }
+                    if (!postData.discId) {
+                        this.$message({
+                            message: '请选择分期',
+                            type: 'warning'
+                        })
+                        return
+                    }
+                    if (!postData.buildId) {
+                        this.$message({
+                            message: '请选择楼栋',
+                            type: 'warning'
+                        })
+                        return
+                    }
+                    _this.loading = true
+                    _this.loadingFlag = true
+                    const url = this.id ? 'edit' : 'add'
+                    this.baseRequest(url, postData).then((res) => {
+                        if (res.data.key === 200) {
+                            this.$message.success('提交成功')
+                            this.$emit('handleClose', true)
+                        } else {
+                            this.$message.error(res.data.msg)
+                        }
+                        _this.loading = false
+                        _this.loadingFlag = false
+                    })
+                }
+            })
+        },
+        baseRequest(opUrl, postData) {
+            return this.$channel.baseRequest('ParkRoomController', opUrl, postData, 'User')
+        },
+        baseInfoRequest(opUrl, postData) {
+            return this.$channel.baseRequest('ParkInfoController', opUrl, postData, 'User')
+        },
+        baseHouseTypeRequest(opUrl, postData) {
+            return this.$channel.baseRequest('HouseTypeController', opUrl, postData, 'Post')
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+ .doubleInput{
+   display: flex;
+   ::v-deep{
+     .el-input{
+       width: 50%;
+     }
+   }
+ }
+</style>
+<style lang="scss">
+.changedItem .el-form-item__label{
+    background-color: yellow;
+}
+</style>

src/views/reservation/index.vue

@@ -0,0 +1,368 @@
+<template>
+  <div>
+    <el-row class="handle-box" style="margin-bottom: 10px">
+      <el-col :span="24">
+        <el-input
+          v-model="search.keyword"
+          style="margin-left:16px;width: 200px"
+          size="small"
+          placeholder="请输入购房人姓名或电话"
+          class="ch-input ch-input-size"
+          @keyup.enter.native="handleSearch()"
+        />
+        <el-date-picker
+          v-model="dateRange"
+          size="small"
+          type="daterange"
+          range-separator="至"
+          value-format="yyyy-MM-dd"
+          start-placeholder="创建日期起"
+          end-placeholder="创建日期止"
+          @change="handleSearch"
+        />
+        <el-select v-model="search.reservationStatus" size="small" clearable placeholder="状态" @change="handleSearch">
+          <el-option :label="'已预约'" :value="1" />
+          <el-option :label="'已取消'" :value="2" />
+          <el-option :label="'待入户'" :value="3" />
+          <el-option :label="'已完成'" :value="4" />
+        </el-select>
+        <el-button size="small" class="ch-button" style="float: right; margin-top: 4px;margin-left: 8px" @click="handleAdd()"><i class="el-icon-plus" />&nbsp;新增看房预约单</el-button>
+        <el-button size="small" class="ch-button" style="float: right; margin-top: 4px" @click="handleSearch()"><i class="el-icon-search" />&nbsp;查询</el-button>
+        <el-button size="small" class="ch-button-warning" style="float: right;margin-top: 4px" @click="handleReset()"><i class="el-icon-refresh" />&nbsp;重置</el-button>
+      </el-col>
+    </el-row>
+    <el-row class="handle-box">
+      <el-col :span="24">
+        <el-table
+          ref="multipleTable"
+          v-loading="loading"
+          :data="AllData"
+          border
+          :header-cell-style="{ background:'#f2f2f2'}"
+        >
+          <el-table-column type="index" label="序号" width="60" />
+          <el-table-column label="楼盘/小区" prop="parkInfoName" />
+          <el-table-column label="分期" prop="parkFloorDiscName" />
+          <el-table-column label="单元/楼栋号" prop="mnpBuildingNo" />
+          <!--          <el-table-column label="所在层" prop="parkRoomFloor" />-->
+          <el-table-column label="户室号" prop="parkRoomNo" />
+          <el-table-column label="申请人" prop="applicantName" />
+          <el-table-column label="申请人电话" prop="applicantPhone" />
+          <el-table-column label="购房人" prop="buyerName" />
+          <el-table-column label="购房人电话" prop="buyerPhone" />
+          <el-table-column label="状态" prop="reservationStatusStr" />
+          <el-table-column label="看房日期" prop="reservationDate" />
+          <el-table-column label="排队号" prop="reservationOrder" />
+          <el-table-column label="开门密码" prop="doorPassStatusStr" />
+          <el-table-column label="创建人" prop="createUserName" />
+          <el-table-column label="创建日期" prop="createTime" />
+          <el-table-column label="操作" width="300" fixed="right">
+            <template scope="scope">
+              <el-button size="small" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
+              <el-button size="small" type="primary" @click="handleDetail(scope.row)">查看</el-button>
+              <el-dropdown size="small" type="primary" style="margin-left: 10px">
+                <el-button size="small" type="primary">
+                  更多菜单<i class="el-icon-arrow-down el-icon--right" />
+                </el-button>
+                <el-dropdown-menu slot="dropdown">
+                  <el-dropdown-item icon="el-icon-circle-plus-outline" @click.native="getPassword(scope.row)">获得密码</el-dropdown-item>
+                  <el-dropdown-item icon="el-icon-circle-close" @click.native="handleCancel(scope.row)">取消</el-dropdown-item>
+                  <el-dropdown-item icon="el-icon-delete" style="color: red" @click.native="handleDelete(scope.row)">删除</el-dropdown-item>
+                </el-dropdown-menu>
+              </el-dropdown>
+            </template>
+          </el-table-column>
+        </el-table>
+        <div class="table-page">
+          <el-pagination
+            :current-page.sync="currentPage"
+            :page-sizes="[10, 20, 50, 100]"
+            :page-size="pageSize"
+            background
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="allpage"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+          />
+        </div>
+      </el-col>
+    </el-row>
+
+    <el-dialog
+      :title="dialogTitle"
+      :visible.sync="dialogVisible"
+      width="70%"
+      top="50px"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      append-to-body
+      @close="handleEditClose"
+    >
+      <reservation-edit v-if="dialogVisible" ref="editDialog" @handleClose="handleEditClose" />
+    </el-dialog>
+
+  </div>
+</template>
+<script>
+import Base from '@/views/base/base'
+import ReservationEdit from '@/views/reservation/reservationEdit.vue'
+
+export default {
+    name: 'ReservationIndex',
+    components: { ReservationEdit },
+    mixins: [Base],
+    data() {
+        return {
+            dateRange: [],
+            search: {
+                keyword: '',
+                createTimeStart: '',
+                createTimeEnd: '',
+                reservationStatus: ''
+            },
+            AllData: [],
+            loading: false,
+            dialogTitle: '',
+            dialogVisible: false
+        }
+    },
+    mounted() {
+        this.getData()
+    },
+    methods: {
+        getData() {
+            const _this = this
+            _this.loading = true
+            _this.AllData = []
+
+            this.search.pageNum = this.currentPage
+            this.search.pageSize = this.pageSize
+            this.baseRequest('listPage', this.search).then((res) => {
+                _this.AllData = res.data.rows
+                _this.allpage = res.data.total || 0
+                _this.loading = false
+            }).catch(() => {
+            })
+        },
+        handleSearch() {
+            if (this.dateRange && this.dateRange.length) {
+                this.search.createTimeStart = this.dateRange[0]
+                this.search.createTimeEnd = this.dateRange[1]
+            } else {
+                this.search.createTimeStart = ''
+                this.search.createTimeEnd = ''
+            }
+            this.currentPage = 1
+            this.getData()
+        },
+        handleReset() {
+            for (const i in this.search) {
+                if (i !== 'pageNum' && i !== 'pageSize') {
+                    this.search[i] = ''
+                }
+            }
+            this.dateRange = []
+            this.handleSearch()
+        },
+        handleAdd() {
+            this.dialogVisible = true
+            this.dialogTitle = '新增'
+            this.$nextTick(() => {
+                this.$refs.editDialog.initData(null, false)
+            })
+        },
+        handleEdit(val) {
+            this.dialogVisible = true
+            this.dialogTitle = '编辑'
+            this.$nextTick(() => {
+                this.$refs.editDialog.initData(val.id, false)
+            })
+        },
+        handleDetail(val) {
+            this.dialogVisible = true
+            this.dialogTitle = '详情'
+            this.$nextTick(() => {
+                this.$refs.editDialog.initData(val.id, true)
+            })
+        },
+        handleEditClose(refresh) {
+            this.dialogVisible = false
+            if (refresh) {
+                this.getData()
+            }
+        },
+        getPassword(row) {
+            const _this = this
+            _this.$confirm('是否确定获取当前预约单开门密码', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(() => {
+                _this.loading = true
+                _this.baseRequest('getPassword', { id: row.id }).then((res) => {
+                    _this.loading = false
+                    if (res.data.code === 200) {
+                        _this.getData()
+                        _this.$confirm(res.data.data.msg, '请注意', {
+                            confirmButtonText: '确定',
+                            cancelButtonText: '取消',
+                            type: 'warning'
+                        }).then(() => {
+                            _this.pasteTextFromClipboard(res.data.data.password)
+                        })
+                    } else {
+                        _this.$message.error(res.data.msg)
+                    }
+                })
+            })
+        },
+        async pasteTextFromClipboard(text) {
+            try {
+                await navigator.clipboard.writeText(text)
+                this.$message.success('复制成功')
+            } catch (err) {
+                console.error('Failed to read clipboard!', err)
+            }
+        },
+        handleCancel(row) {
+            let msg = row.parkInfoName + row.parkFloorDiscName
+            if (row.mnpBuildingNo) {
+                msg += row.mnpBuildingNo
+                if (row.mnpBuildingNo.indexOf('号') === -1) {
+                    msg += '号'
+                }
+            }
+            if (row.parkRoomNo) {
+                msg += row.parkRoomNo
+                if (row.parkRoomNo.indexOf('室') === -1) {
+                    msg += '室'
+                }
+            }
+            this.$confirm(msg + '的看房预约将取消。', '请注意', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(() => {
+                this.loading = true
+                this.baseRequest('editCancel/' + row.id).then((res) => {
+                    this.loading = false
+                    if (res.data.code === 200) {
+                        this.$message({
+                            type: 'success',
+                            message: '取消成功!'
+                        })
+                        this.getData()
+                    } else {
+                        this.$message.error(res.data.msg)
+                    }
+                })
+            })
+        },
+        handleDelete(row) {
+            this.$confirm('确定删除该条预约单吗？', '删除', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(() => {
+                this.loading = true
+                this.baseRequest('remove/' + row.id).then((res) => {
+                    this.loading = false
+                    if (res.data.code === 200) {
+                        this.$message({
+                            type: 'success',
+                            message: '删除成功!'
+                        })
+                        this.getData()
+                    } else {
+                        this.$message.error(res.data.msg)
+                    }
+                })
+            })
+        },
+        baseRequest(opUrl, postData) {
+            return this.$channel.globeRequest('ParkRoomReservationController', opUrl, postData, '')
+        }
+    }
+}
+</script>
+
+<style scoped>
+.el-dropdown {
+  vertical-align: top;
+}
+.el-dropdown + .el-dropdown {
+  margin-left: 15px;
+}
+.el-icon-arrow-down {
+  font-size: 12px;
+}
+.ch-input .el-input__inner {
+    border-color: #32323A;
+}
+
+.ch-input-size {
+    width: 150px;
+}
+
+.ch-button {
+    border-color: #32323A;
+    background-color: #32323A;
+    color: #fff;
+}
+
+.ch-button-warning {
+    margin-left: 10px;
+    border-color: #E6A23C;
+    background-color: #E6A23C;
+    color: #fff;
+}
+
+.ch-button-export {
+    margin-left: 10px;
+    border-color: #98CC1F;
+    background-color: #98CC1F;
+    color: #fff;
+}
+
+.listBox {
+    margin-left: 20px;
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.list {
+
+    border-radius: 4px;
+    margin-right: 20px;
+    margin-top: 15px;
+    cursor: pointer;
+    margin-bottom: 15px;
+    width: 138px;
+    height: 28px;
+    text-align: center;
+    line-height: 28px;
+    background: #EBEBEB;
+    color: #777777;
+}
+
+.checked {
+    color: #2C27D0;
+    background: #EAEAF8;
+    /*border: 1px solid #3377ff;*/
+}
+
+.ch-button-danger {
+    margin-left: 10px;
+    border-color: #ff4949;
+    background-color: #ff4949;
+    color: #fff;
+}
+::v-deep .rowStyle {
+    background-color: #e8f7fd !important;
+    color: #1890ff;
+}
+::v-deep .el-table tbody tr:hover > td {
+    background-color: #e8f7fd !important;
+}
+
+</style>

src/views/reservation/reservationEdit.vue

@@ -0,0 +1,315 @@
+<template>
+  <div v-loading="loading">
+    <el-form ref="form" :model="form" style="width: 100%;padding: 5px" :rules="rules" label-width="auto">
+      <el-row>
+        <el-col style="padding-bottom: 10px">
+          <el-card shadow="always" style="padding: 15px 5px 5px 15px">
+            <el-row>
+              <el-col v-show="!isDetail" :span="20">
+                <el-form-item prop="parkRoomId" label="看房地址">
+                  <div style="display: ruby-text;">
+                    <el-input v-model="form.parkRoomId" placeholder="请选择" readonly @click.native="toSelectRoom" />
+                    <el-button type="primary" @click="toAddRoom">新增地址</el-button>
+                  </div>
+                </el-form-item>
+              </el-col>
+              <el-col :span="5">
+                <el-form-item label="楼盘/小区">
+                  <span>{{ form.parkInfoName }}</span>
+                </el-form-item>
+              </el-col>
+              <el-col :span="5">
+                <el-form-item label="分期">
+                  <span>{{ form.parkFloorDiscName }}</span>
+                </el-form-item>
+              </el-col>
+              <el-col :span="5">
+                <el-form-item label="单元/楼栋号">
+                  <span>{{ form.mnpBuildingNo }}</span>
+                </el-form-item>
+              </el-col>
+              <el-col :span="5">
+                <el-form-item label="所在层">
+                  <span>{{ form.parkRoomFloor }}</span>
+                </el-form-item>
+              </el-col>
+              <el-col :span="4">
+                <el-form-item label="户室号">
+                  <span>{{ form.parkRoomNo }}</span>
+                </el-form-item>
+              </el-col>
+              <el-col :span="24">
+                <el-divider />
+              </el-col>
+              <el-col :span="8">
+                <el-form-item prop="applicantName" label="申请人">
+                  <el-input v-model="form.applicantName" placeholder="请输入" :readonly="isDetail" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="16">
+                <el-form-item prop="applicantPhone" label="申请人电话">
+                  <el-input v-model="form.applicantPhone" placeholder="请输入" :readonly="isDetail" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item prop="buyerName" label="购房人">
+                  <el-input v-model="form.buyerName" placeholder="请输入" :readonly="isDetail" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item prop="buyerPhone" label="购房人电话">
+                  <el-input v-model="form.buyerPhone" placeholder="请输入" :readonly="isDetail" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item prop="buyerGender" label="购房人性别">
+                  <el-select v-model="form.buyerGender" placeholder="请输入" :disabled="isDetail">
+                    <el-option value="男" label="男" />
+                    <el-option value="女" label="女" />
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="24">
+                <el-form-item prop="buyerAddress" label="现住址">
+                  <el-input
+                    v-model="form.buyerAddress"
+                    type="textarea"
+                    placeholder="请输入"
+                    :autosize="{ minRows: 2, maxRows: 4}"
+                    :readonly="isDetail"
+                  />
+                </el-form-item>
+              </el-col>
+              <el-col :span="24">
+                <el-form-item prop="overviewContent" label="简况">
+                  <el-input
+                    v-model="form.overviewContent"
+                    type="textarea"
+                    placeholder="请输入"
+                    :autosize="{ minRows: 2, maxRows: 4}"
+                    :readonly="isDetail"
+                  />
+                </el-form-item>
+              </el-col>
+              <el-col :span="24">
+                <el-divider />
+              </el-col>
+              <el-col :span="8">
+                <el-form-item prop="reservationDate" label="看房日期">
+                  <el-date-picker
+                    v-model="form.reservationDate"
+                    placeholder="请选择"
+                    type="date"
+                    value-format="yyyy-MM-dd"
+                    :disabled="isDetail"
+                  />
+                </el-form-item>
+              </el-col>
+              <el-col :span="10">
+                <el-form-item prop="timeRange" label="看房日段">
+                  <el-time-picker
+                    v-model="form.timeRange"
+                    is-range
+                    format="HH:mm"
+                    value-format="HH:mm"
+                    range-separator="至"
+                    start-placeholder="开始时间"
+                    end-placeholder="结束时间"
+                    placeholder="选择时间范围"
+                    :disabled="isDetail"
+                    @change="timeChange"
+                  />
+                </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                <el-form-item label="排队号">
+                  <span>{{ form.reservationOrder }}</span>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-card>
+        </el-col>
+      </el-row>
+    </el-form>
+    <div slot="footer" style="text-align: right">
+      <el-button @click="handleClose">关 闭</el-button>
+      <el-button v-show="!isDetail" type="primary" @click="confirmSubmit()">提 交</el-button>
+    </div>
+    <el-dialog
+      :title="dialogTitle"
+      :visible.sync="dialogVisible"
+      width="70%"
+      top="50px"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      append-to-body
+      @close="handleEditClose"
+    >
+      <select-room v-if="dialogVisible" ref="roomList" @handleClose="handleEditClose" />
+    </el-dialog>
+    <el-dialog
+      :title="'新增地址'"
+      :visible.sync="addVisible"
+      width="70%"
+      top="50px"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      append-to-body
+      @close="handleAddClose"
+    >
+      <add-room v-if="addVisible" ref="addRoom" @handleClose="handleAddClose" />
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+
+import SelectRoom from '@/views/reservation/selectRoom.vue'
+import AddRoom from '@/views/reservation/addRoom.vue'
+
+export default {
+    name: 'ReservationEdit',
+    components: { AddRoom, SelectRoom },
+    data() {
+        return {
+            id: '',
+            isAdd: false,
+            isDetail: false,
+            loading: false,
+            form: {
+                parkInfoId: '',
+                parkInfoName: '',
+                parkFloorDiscId: '',
+                parkFloorDiscName: '',
+                mnpBuildingId: '',
+                mnpBuildingNo: '',
+                parkRoomId: '',
+                parkRoomFloor: '',
+                parkRoomNo: '',
+                buyerName: '',
+                buyerPhone: '',
+                buyerGender: '',
+                buyerAddress: '',
+                applicantName: '',
+                applicantPhone: '',
+                overviewContent: '',
+                reservationDate: '',
+                reservationTimeStart: '',
+                reservationTimeEnd: '',
+                reservationOrder: '',
+                timeRange: null
+            },
+            rules: {
+                parkRoomId: { required: true, message: '此项必填' },
+                applicantName: { required: true, message: '此项必填' },
+                applicantPhone: { required: true, message: '此项必填' },
+                reservationDate: { required: true, message: '此项必填' },
+                timeRange: { required: true, message: '此项必填' }
+            },
+            addVisible: false,
+            dialogVisible: false,
+            dialogTitle: '选择地址'
+        }
+    },
+    methods: {
+        initData(id, isDetail) {
+            this.id = id
+            this.isAdd = !this.id
+            this.isDetail = isDetail
+            if (this.id) {
+                this.getData()
+            }
+        },
+        getData() {
+            this.loading = true
+            this.baseRequest('getById', { id: this.id }).then(res => {
+                if (res.data) {
+                    this.form = res.data
+                    if (this.form.reservationTimeStart && this.form.reservationTimeEnd) {
+                        this.$set(this.form, 'timeRange', [this.form.reservationTimeStart, this.form.reservationTimeEnd])
+                    }
+                }
+                this.loading = false
+            })
+        },
+        toSelectRoom() {
+            this.dialogVisible = true
+            this.$nextTick(() => {
+                this.$refs.roomList.initData()
+            })
+        },
+        handleEditClose(data) {
+            this.dialogVisible = false
+            this.form.parkInfoId = data.groupId
+            this.form.parkInfoName = data.groupName
+            this.form.parkFloorDiscId = data.discId
+            this.form.parkFloorDiscName = data.discName
+            this.form.mnpBuildingId = data.buildId
+            this.form.mnpBuildingNo = data.buildName
+            this.form.parkRoomId = data.id
+            this.form.parkRoomFloor = data.floor
+            this.form.parkRoomNo = data.roomNo
+        },
+        toAddRoom() {
+            this.addVisible = true
+            this.$nextTick(() => {
+                this.$refs.addRoom.initData('')
+            })
+        },
+        handleAddClose() {
+            this.addVisible = false
+        },
+        timeChange(val) {
+            if (val && val.length) {
+                this.form.reservationTimeStart = val[0]
+                this.form.reservationTimeEnd = val[1]
+            } else {
+                this.form.reservationTimeStart = ''
+                this.form.reservationTimeEnd = ''
+            }
+        },
+        handleClose() {
+            this.$emit('handleClose')
+        },
+        confirmSubmit() {
+            this.$refs.form.validate((valid) => {
+                if (valid) {
+                    const postUrl = this.isAdd ? 'add' : 'edit'
+                    const postData = Object.assign({}, this.form)
+                    this.loading = true
+                    this.baseRequest(postUrl, postData).then(res => {
+                        this.loading = false
+                        if (res.data.key === 200) {
+                            this.$message.success('提交成功')
+                            this.$emit('handleClose', true)
+                        } else {
+                            this.$message.error(res.data.msg)
+                        }
+                    })
+                } else {
+                    return false
+                }
+            })
+        },
+        baseRequest(opUrl, postData, isArr) {
+            return this.$channel.globeRequest('ParkRoomReservationController', opUrl, postData, 'project', isArr)
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+ .doubleInput{
+   display: flex;
+   ::v-deep{
+     .el-input{
+       width: 50%;
+     }
+   }
+ }
+</style>
+<style lang="scss">
+.changedItem .el-form-item__label{
+    background-color: yellow;
+}
+</style>

src/views/reservation/roomBindDoor.vue

@@ -0,0 +1,214 @@
+<template>
+  <div v-loading="loading" class="SelectRoom">
+    <el-row class="handle-box" style="margin-bottom: 10px">
+      <el-col :span="24">
+        <el-input
+          v-model="search.houseName"
+          size="small"
+          style="width: 200px"
+          placeholder="小区"
+          class="ch-input ch-input-size"
+          @keyup.enter.native="handleSearch()"
+        />
+        <el-input
+          v-model="search.buildingName"
+          size="small"
+          style="width: 200px"
+          placeholder="楼栋"
+          class="ch-input ch-input-size"
+          @keyup.enter.native="handleSearch()"
+        />
+        <el-input
+          v-model="search.floorName"
+          size="small"
+          style="width: 200px"
+          placeholder="楼层"
+          class="ch-input ch-input-size"
+          @keyup.enter.native="handleSearch()"
+        />
+        <el-input
+          v-model="search.roomName"
+          size="small"
+          style="width: 200px"
+          placeholder="房间"
+          class="ch-input ch-input-size"
+          @keyup.enter.native="handleSearch()"
+        />
+        <el-button size="small" class="ch-button-warning" @click="handleReset()"><i class="el-icon-refresh" />&nbsp;重置</el-button>
+        <el-button size="small" class="ch-button" @click="handleSearch()"><i class="el-icon-search" />&nbsp;查询</el-button>
+      </el-col>
+    </el-row>
+    <el-row class="handle-box">
+      <el-col :span="24">
+        <el-table
+          ref="multipleTable"
+          :data="AllData"
+          border
+          class="section-table"
+          :header-cell-style="{ background:'#f2f2f2'}"
+          @row-click="clickRow"
+          @selection-change="handleSelectionChange"
+        >
+          <el-table-column type="selection" width="55" />
+          <el-table-column label="小区" prop="houseName" />
+          <el-table-column label="楼栋" prop="buildingName" />
+          <el-table-column label="楼层" prop="floorName" />
+          <el-table-column label="房间" prop="roomName" />
+          <el-table-column label="门锁配对">
+            <template v-slot="scope">
+              {{ scope.row.lockMac ? '已完成' : '未完成' }}
+            </template>
+          </el-table-column>
+        </el-table>
+        <div class="table-page">
+          <el-pagination
+            :current-page.sync="search.pageNum"
+            :page-sizes="[10, 20, 50]"
+            :page-size="search.pageSize"
+            background
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="total"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+          />
+        </div>
+      </el-col>
+    </el-row>
+    <div slot="footer" style="text-align: right;margin-top: 10px">
+      <el-button @click="handleClose">关 闭</el-button>
+      <el-button type="primary" @click="confirmSubmit()">确 定</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+    name: 'RoomBindDoor',
+    data() {
+        return {
+            loading: false,
+            AllData: [],
+            total: 0,
+            search: {
+                pageNum: 1,
+                pageSize: 10,
+                houseName: '',
+                buildingName: '',
+                floorName: '',
+                roomName: ''
+            },
+            id: ''
+        }
+    },
+    methods: {
+        initData(id) {
+            this.id = id
+            this.getData()
+        },
+        getData() {
+            this.loading = true
+            this.baseRequest('bindListPage', this.search).then(res => {
+                this.loading = false
+                if (res.data.code === 200) {
+                    this.AllData = res.data.data.list
+                    this.total = res.data.data.listSum
+                } else {
+                    this.AllData = []
+                    this.total = 0
+                    this.$message.error(res.data.msg)
+                }
+            })
+        },
+        handleSearch() {
+            this.search.pageNum = 1
+            this.getData()
+        },
+        handleReset() {
+            for (const i in this.search) {
+                if (i !== 'pageNum' && i !== 'pageSize') {
+                    this.search[i] = ''
+                }
+            }
+            this.handleSearch()
+        },
+        handleSizeChange(val) {
+            this.search.pageSize = val
+            this.handleSearch()
+        },
+        handleCurrentChange(val) {
+            this.search.pageNum = val
+            this.getData()
+        },
+        handleSelectionChange(val) {
+            this.selectList = val
+            // 单选
+            if (val.length > 1) {
+                this.$refs.multipleTable.clearSelection()
+                this.$refs.multipleTable.toggleRowSelection(val.pop())
+            }
+        },
+        clickRow(row) {
+            // 单选选中行
+            if (this.selectList[0] === row) {
+                // 取消
+                this.selectList = []
+                this.$refs.multipleTable.clearSelection()
+            } else {
+                // 选择
+                this.selectList = [row]
+                this.$refs.multipleTable.clearSelection()
+                this.$refs.multipleTable.toggleRowSelection(row, true)
+            }
+        },
+        handleClose() {
+            this.$emit('handleClose')
+        },
+        confirmSubmit() {
+            if (!this.selectList.length) {
+                this.$message.warning('请先选择一条数据')
+                return
+            }
+            const postData = {
+                roomId: this.id,
+                doorId: this.selectList[0].roomId
+            }
+            this.loading = true
+            this.baseRequest('roomBindDoor', postData).then(res => {
+                this.loading = false
+                if (res.data.key === 200) {
+                    this.$message.success('提交成功')
+                    this.$emit('handleClose', true)
+                } else {
+                    this.$message.error(res.data.msg)
+                }
+            })
+        },
+        baseRequest(opUrl, postData, isArr) {
+            return this.$channel.globeRequest('ParkRoomReservationController', opUrl, postData, 'project', isArr)
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+ .doubleInput{
+   display: flex;
+   ::v-deep{
+     .el-input{
+       width: 50%;
+     }
+   }
+ }
+</style>
+<style lang="scss">
+.SelectRoom {
+  /*  将全选项隐藏 */
+  .section-table thead .el-table-column--selection .cell {
+    display: none;
+  }
+}
+.changedItem .el-form-item__label{
+    background-color: yellow;
+}
+</style>

src/views/reservation/selectRoom.vue

@@ -0,0 +1,274 @@
+<template>
+  <div v-loading="loading" class="SelectRoom">
+    <el-row class="handle-box" style="margin-bottom: 10px">
+      <el-col :span="24">
+        <el-select v-model="search.parkInfoId" filterable clearable size="small" placeholder="楼盘/小区" @change="parkChange">
+          <el-option
+            v-for="item in parkOptions"
+            :key="item.id"
+            :value="item.id"
+            :label="item.groupName"
+          />
+        </el-select>
+        <el-select v-model="search.mnpBuildingId" filterable clearable size="small" placeholder="单元/楼栋号" @change="handleSearch">
+          <el-option
+            v-for="item in buildingOptions"
+            :key="item.id"
+            :value="item.id"
+            :label="item.buildNum"
+          />
+        </el-select>
+        <el-input
+          v-model="search.roomAddress"
+          style="width: 200px"
+          size="small"
+          placeholder="地址"
+          class="ch-input ch-input-size"
+          @keyup.enter.native="handleSearch()"
+        />
+        <el-button size="small" class="ch-button-warning" @click="handleReset()"><i class="el-icon-refresh" />&nbsp;重置</el-button>
+        <el-button size="small" class="ch-button" @click="handleSearch()"><i class="el-icon-search" />&nbsp;查询</el-button>
+      </el-col>
+    </el-row>
+    <el-row class="handle-box">
+      <el-col :span="24">
+        <el-table
+          ref="multipleTable"
+          :data="AllData"
+          border
+          class="section-table"
+          :header-cell-style="{ background:'#f2f2f2'}"
+          @row-click="clickRow"
+          @selection-change="handleSelectionChange"
+        >
+          <el-table-column type="selection" width="55" />
+          <el-table-column label="楼盘/小区" prop="groupName" />
+          <el-table-column label="分期" prop="discName" />
+          <el-table-column label="单元/楼栋号" prop="buildName" />
+          <el-table-column label="所在层" prop="floor" />
+          <el-table-column label="户室号" prop="roomNo" />
+          <el-table-column label="门锁匹配" prop="doorStatus" />
+          <el-table-column label="最近预约日期" prop="lastReservationDate" />
+          <el-table-column label="最近预约时段">
+            <template v-slot="scope">
+              {{ scope.row.lastReservationTimeStart ? scope.row.lastReservationTimeStart + ' ~ ' + scope.row.lastReservationTimeEnd : '' }}
+            </template>
+          </el-table-column>
+          <el-table-column label="已排队人数" prop="personNum" />
+          <el-table-column label="操作" width="300" fixed="right">
+            <template scope="scope">
+              <el-button size="small" type="primary" @click.stop="handleEdit(scope.row)">编辑</el-button>
+              <el-button :disabled="scope.row.doorStatus==='已匹配'" size="small" type="primary" @click.stop="handleBind(scope.row)">匹配门锁户室号</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <div class="table-page">
+          <el-pagination
+            :current-page.sync="search.pageNum"
+            :page-sizes="[10, 20, 50, 100]"
+            :page-size="search.pageSize"
+            background
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="total"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+          />
+        </div>
+      </el-col>
+    </el-row>
+    <div slot="footer" style="text-align: right;margin-top: 10px">
+      <el-button @click="handleClose">关 闭</el-button>
+      <el-button type="primary" @click="confirmSubmit()">确 定</el-button>
+    </div>
+    <el-dialog
+      :title="'编辑地址'"
+      :visible.sync="editVisible"
+      width="70%"
+      top="50px"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      append-to-body
+      @close="handleEditClose"
+    >
+      <add-room v-if="editVisible" ref="editRoom" @handleClose="handleEditClose" />
+    </el-dialog>
+    <el-dialog
+      :title="'匹配门锁户室号'"
+      :visible.sync="bindVisible"
+      width="70%"
+      top="50px"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      append-to-body
+      @close="handleBindClose"
+    >
+      <room-bind-door v-if="bindVisible" ref="bindDoor" @handleClose="handleBindClose" />
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+
+import AddRoom from '@/views/reservation/addRoom.vue'
+import RoomBindDoor from '@/views/reservation/roomBindDoor.vue'
+
+export default {
+    name: 'SelectRoom',
+    components: { RoomBindDoor, AddRoom },
+    data() {
+        return {
+            loading: false,
+            AllData: [],
+            total: 0,
+            search: {
+                pageNum: 1,
+                pageSize: 10,
+                parkInfoId: '',
+                MnpBuildingId: '',
+                roomAddress: ''
+            },
+            parkOptions: [],
+            buildingOptions: [],
+            selectList: [],
+            editVisible: false,
+            bindVisible: false
+        }
+    },
+    methods: {
+        initData() {
+            this.getParkOptions()
+            this.getBuildingOptions()
+            this.getData()
+        },
+        getData() {
+            this.loading = true
+            this.baseRequest('roomListPage', this.search).then(res => {
+                this.AllData = res.data.rows || []
+                this.total = res.data.total || 0
+                this.loading = false
+            })
+        },
+        getParkOptions() {
+            this.parkRequest('listAll', {}).then(res => { this.parkOptions = res.data || [] })
+        },
+        parkChange(val) {
+            this.search.mnpBuildingId = ''
+            this.getBuildingOptions()
+            this.handleSearch()
+        },
+        getBuildingOptions() {
+            const postData = {}
+            if (this.search.parkInfoId) {
+                postData.groupId = this.search.parkInfoId
+            }
+            this.buildingRequest('listAll', postData).then(res => { this.buildingOptions = res.data || [] })
+        },
+        handleSearch() {
+            this.search.pageNum = 1
+            this.getData()
+        },
+        handleReset() {
+            for (const i in this.search) {
+                if (i !== 'pageNum' && i !== 'pageSize') {
+                    this.search[i] = ''
+                }
+            }
+            this.handleSearch()
+        },
+        handleSizeChange(val) {
+            this.search.pageSize = val
+            this.handleSearch()
+        },
+        handleCurrentChange(val) {
+            this.search.pageNum = val
+            this.getData()
+        },
+        handleSelectionChange(val) {
+            this.selectList = val
+            // 单选
+            if (val.length > 1) {
+                this.$refs.multipleTable.clearSelection()
+                this.$refs.multipleTable.toggleRowSelection(val.pop())
+            }
+        },
+        clickRow(row) {
+            // 单选选中行
+            if (this.selectList[0] === row) {
+                // 取消
+                this.selectList = []
+                this.$refs.multipleTable.clearSelection()
+            } else {
+                // 选择
+                this.selectList = [row]
+                this.$refs.multipleTable.clearSelection()
+                this.$refs.multipleTable.toggleRowSelection(row, true)
+            }
+        },
+        handleClose() {
+            this.$emit('handleClose')
+        },
+        handleEdit(row) {
+            this.editVisible = true
+            this.$nextTick(() => {
+                this.$refs.editRoom.initData(row.id)
+            })
+        },
+        handleEditClose(refresh) {
+            this.editVisible = false
+            if (refresh) {
+                this.getData()
+            }
+        },
+        handleBind(row) {
+            this.bindVisible = true
+            this.$nextTick(() => {
+                this.$refs.bindDoor.initData(row.id)
+            })
+        },
+        handleBindClose(refresh) {
+            this.bindVisible = false
+            if (refresh) {
+                this.getData()
+            }
+        },
+        confirmSubmit() {
+            if (!this.selectList.length) {
+                this.$message.warning('请先选择一条数据')
+                return
+            }
+            this.$emit('handleClose', this.selectList[0])
+        },
+        baseRequest(opUrl, postData, isArr) {
+            return this.$channel.globeRequest('ParkRoomReservationController', opUrl, postData, 'project', isArr)
+        },
+        parkRequest(opUrl, postData, isArr) {
+            return this.$channel.globeRequest('ParkInfoController', opUrl, postData, 'project', isArr)
+        },
+        buildingRequest(opUrl, postData, isArr) {
+            return this.$channel.globeRequest('MnpBuildingController', opUrl, postData, 'project', isArr)
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+ .doubleInput{
+   display: flex;
+   ::v-deep{
+     .el-input{
+       width: 50%;
+     }
+   }
+ }
+</style>
+<style lang="scss">
+.SelectRoom {
+  /*  将全选项隐藏 */
+  .section-table thead .el-table-column--selection .cell {
+    display: none;
+  }
+}
+.changedItem .el-form-item__label{
+    background-color: yellow;
+}
+</style>