实现前端房态预定登记

src/views/room/fangtailive.vue

@@ -10,7 +10,7 @@
         <div style="display: flex; flex-direction: column">
           <div style="display: flex; gap: 5px">
             <a-dropdown>
-              <a-menu slot="overlay" @click="handleMenuClick">
+              <a-menu slot="overlay" @click="scheduleClick">
                 <a-menu-item key="1"> 散客预定 </a-menu-item>
                 <a-menu-item key="2"> 团队预定</a-menu-item>
               </a-menu>
@@ -381,6 +381,10 @@
       ref="ModalBillRoomForm"
       @ok="modalFormOk"
     ></bill-room-form-modal>
+    <schedule-room-modal
+      ref="ModalScheduleRoom"
+      @ok="modalFormOk"
+    ></schedule-room-modal>
   </a-card>
 </template>
 
@@ -392,6 +396,7 @@ import { httpAction, getAction } from "@/api/manage";
 import UpkeepRoomModal from "./modules/upkeep/UpkeepRoomModal.vue";
 import BillRoomInfoModal from "./modules/checkIn/BillRoomInfoModal.vue";
 import BillRoomFormModal from "./modules/checkIn/BillRoomFormModal.vue";
+import ScheduleRoomModal from "./modules/schedule/ScheduleRoomModal.vue";
 import { TreeSelect } from "ant-design-vue";
 const SHOW_PARENT = TreeSelect.SHOW_PARENT;
 const treeData = [
@@ -601,6 +606,7 @@ export default {
     UpkeepRoomModal,
     BillRoomInfoModal,
     BillRoomFormModal,
+    ScheduleRoomModal,
   },
   data() {
     return {
@@ -680,8 +686,30 @@ export default {
   mounted() {
     // this.handleBillInfo();
     // this.handleCheckInAdd()
+    // this.$refs.ModalScheduleRoom.addList([]);
+    //   this.$refs.ModalScheduleRoom.title = "预定登记";
+    //   this.$refs.ModalScheduleRoom.disableSubmit = false;
   },
   methods: {
+    scheduleClick() {
+      var selectRoom = [];
+      this.planList2.forEach((t) => {
+        t.child.forEach((c) => {
+          c.schedule.forEach((s) => {
+            if (s.detail.check === 1) {
+              selectRoom.push(s);
+            }
+          });
+        });
+      });
+      if (selectRoom.length === 0) {
+        this.$message.warning("请先选择房间");
+        return;
+      }
+      this.$refs.ModalScheduleRoom.addList(selectRoom);
+      this.$refs.ModalScheduleRoom.title = "预定登记";
+      this.$refs.ModalScheduleRoom.disableSubmit = false;
+    },
     handleMenuClick(e) {
       console.log("click", e);
       var selectRoom = [];

src/views/room/modules/schedule/ScheduleRoomForm.vue

@@ -0,0 +1,492 @@
+<template>
+  <a-spin :spinning="confirmLoading">
+    <j-form-container :disabled="formDisabled">
+      <a-form-model
+        ref="form"
+        :model="model"
+        :rules="validatorRules"
+        slot="detail"
+      >
+        <a-row>
+          <div style="display: flex; gap: 15px">
+            <div style="width: 39%">
+              <h4 style="color: rgba(255, 141, 26, 1); font-weight: 600">
+                订价信息
+              </h4>
+              <a-divider />
+              <a-col :span="24">
+                <a-form-model-item
+                  label="入住类型"
+                  :labelCol="labelCol"
+                  :wrapperCol="wrapperCol"
+                  prop="sex"
+                >
+                  <a-select placeholder="入住类型">
+                    <a-select-option value="全天"> 全天 </a-select-option>
+                    <a-select-option value="钟点"> 钟点 </a-select-option>
+                  </a-select>
+                </a-form-model-item>
+              </a-col>
+
+              <a-col :span="24">
+                <a-form-model-item
+                  label="预抵时间"
+                  :labelCol="labelCol"
+                  :wrapperCol="wrapperCol"
+                  prop="sex"
+                >
+                  <j-date
+                    placeholder="预抵时间"
+                    v-model="model.endTime"
+                    style="width: 180px"
+                  />
+                  <a-time-picker
+                    style="width: 80px; margin-left: 2px"
+                    :default-value="moment('18:00', 'HH:mm')"
+                    format="HH:mm"
+                  />
+                </a-form-model-item>
+              </a-col>
+              <a-col :span="24">
+                <a-form-model-item
+                  label="预离时间"
+                  :labelCol="labelCol"
+                  :wrapperCol="wrapperCol"
+                  prop="sex"
+                >
+                  <j-date
+                    placeholder="预离时间"
+                    v-model="model.endTime"
+                    style="width: 180px"
+                  />
+                  <a-time-picker
+                    style="width: 80px; margin-left: 2px"
+                    :default-value="moment('12:00', 'HH:mm')"
+                    format="HH:mm"
+                  />
+                </a-form-model-item>
+              </a-col>
+              <a-col :span="24">
+                <a-form-model-item
+                  label="客人来源"
+                  :labelCol="labelCol"
+                  :wrapperCol="wrapperCol"
+                  prop="sex"
+                >
+                  <a-select placeholder="订单来源">
+                    <a-select-option value="散客"> 散客 </a-select-option>
+                    <a-select-option value="美团"> 美团 </a-select-option>
+                  </a-select>
+                </a-form-model-item>
+              </a-col>
+              <a-col :span="24">
+                <a-form-model-item
+                  label="天数"
+                  :labelCol="labelCol"
+                  :wrapperCol="wrapperCol"
+                  prop="sex"
+                >
+                  <a-input-number
+                    v-model="model.userName"
+                    placeholder="天数"
+                    :min="1"
+                  ></a-input-number>
+                </a-form-model-item>
+              </a-col>
+              <a-col :span="24">
+                <a-form-model-item
+                  label="预定方式"
+                  :labelCol="labelCol"
+                  :wrapperCol="wrapperCol"
+                  prop="sex"
+                >
+                  <a-select placeholder="预定方式">
+                    <a-select-option value="美团酒店">
+                      美团酒店
+                    </a-select-option>
+                    <a-select-option value="携程酒店">
+                      携程酒店
+                    </a-select-option>
+                  </a-select>
+                </a-form-model-item>
+              </a-col>
+              <a-col :span="24">
+                <a-form-model-item
+                  label="客人类型"
+                  :labelCol="labelCol"
+                  :wrapperCol="wrapperCol"
+                  prop="sex"
+                >
+                  <a-select placeholder="客人类型">
+                    <a-select-option value="散客"> 散客 </a-select-option>
+                    <a-select-option value="会员"> 会员 </a-select-option>
+                  </a-select>
+                </a-form-model-item>
+              </a-col>
+              <a-col :span="24">
+                <a-form-model-item
+                  label="房价方案"
+                  :labelCol="labelCol"
+                  :wrapperCol="wrapperCol"
+                  prop="sex"
+                >
+                  <a-select placeholder="房价方案">
+                    <a-select-option value="会员价"> 会员价 </a-select-option>
+                    <a-select-option value="平日价"> 平日价 </a-select-option>
+                  </a-select>
+                </a-form-model-item>
+              </a-col>
+              <h4 style="color: rgba(255, 141, 26, 1); font-weight: 600">
+                其他信息
+              </h4>
+              <a-divider />
+              <a-col :span="24">
+                <a-form-model-item
+                  label="联系人"
+                  :labelCol="labelCol"
+                  :wrapperCol="wrapperCol"
+                  prop="sex"
+                >
+                  <a-auto-complete
+                    v-model="model.key1"
+                    placeholder="联系人"
+                    @search="handleSearch"
+                    @select="(e) => handleSelectMember(e)"
+                  >
+                    <template slot="dataSource">
+                      <a-select-option v-for="item in result" :key="item">{{
+                        item
+                      }}</a-select-option>
+                    </template>
+                  </a-auto-complete>
+                </a-form-model-item>
+              </a-col>
+              <a-col :span="24">
+                <a-form-model-item
+                  label="电话"
+                  :labelCol="labelCol"
+                  :wrapperCol="wrapperCol"
+                  prop="sex"
+                >
+                  <a-input v-model="model.mobile" placeholder="电话"></a-input>
+                </a-form-model-item>
+              </a-col>
+              <a-col :span="24">
+                <a-form-model-item
+                  label="担保方式"
+                  :labelCol="labelCol"
+                  :wrapperCol="wrapperCol"
+                  prop="sex"
+                >
+                  <a-select placeholder="担保方式">
+                    <a-select-option value="无担保"> 无担保 </a-select-option>
+                    <a-select-option value="有担保"> 有担保 </a-select-option>
+                  </a-select>
+                </a-form-model-item>
+              </a-col>
+              <a-col :span="24">
+                <a-form-model-item
+                  label="销售员"
+                  :labelCol="labelCol"
+                  :wrapperCol="wrapperCol"
+                  prop="sex"
+                >
+                  <a-select placeholder="销售员">
+                    <a-select-option value="a"> a </a-select-option>
+                    <a-select-option value="b"> b </a-select-option>
+                  </a-select>
+                </a-form-model-item>
+              </a-col>
+              <a-col :span="24">
+                <a-form-model-item
+                  label="外部单号"
+                  :labelCol="labelCol"
+                  :wrapperCol="wrapperCol"
+                  prop="sex"
+                >
+                  <a-input
+                    v-model="model.mobile"
+                    placeholder="外部单号"
+                  ></a-input>
+                </a-form-model-item>
+              </a-col>
+              <a-col :span="24">
+                <a-form-model-item
+                  label="备注"
+                  :labelCol="labelCol"
+                  :wrapperCol="wrapperCol"
+                  prop="remark"
+                >
+                  <a-textarea
+                    v-model="model.remark"
+                    rows="4"
+                    placeholder="备注"
+                  />
+                </a-form-model-item>
+              </a-col>
+            </div>
+            <div style="width: 61%">
+              <h4 style="color: rgba(255, 141, 26, 1); font-weight: 600">
+                选择房间
+              </h4>
+              <a-divider />
+              <p>
+                <span>占房天数：1晚</span>
+                <span style="padding-left: 10px">总价：599.00</span>
+              </p>
+              <a-table
+                :columns="columns"
+                :data-source="model.data"
+                :pagination="false"
+                rowKey="id"
+              >
+                <div
+                  slot="expandedRowRender"
+                  slot-scope="text, record, index"
+                  style="margin: 0"
+                >
+                  <p>
+                    已排房：<a-tag
+                      color="blue"
+                      closable
+                      :visible="visible"
+                      @close.stop="tagClose2(rindex, index)"
+                      v-for="(item, rindex) in text.rooms"
+                      :key="rindex"
+                      >{{ item.roomNo }}</a-tag
+                    >
+                  </p>
+                  <p>未排房：0间</p>
+                </div>
+                <template slot="key3" slot-scope="text, record, index">
+                  <editable-cell
+                    :text="text"
+                    @change="onCellChange('key3', index, $event)"
+                  />
+                </template>
+                <template slot="key6" slot-scope="text, record, index">
+                  <div>
+                    <a-input-number v-model="model.data[index].key6" :min="0" />
+                  </div>
+                </template>
+                <span slot="action" slot-scope="text, record, index">
+                  <a @click="pulsRoom(index)">排房</a>
+                </span>
+              </a-table>
+            </div>
+          </div>
+        </a-row>
+      </a-form-model>
+    </j-form-container>
+    <select-room-form-modal
+      ref="modalSelectRoomForm"
+      @ok="modalFormOk"
+    ></select-room-form-modal>
+  </a-spin>
+</template>
+
+<script>
+import { httpAction, getAction } from "@/api/manage";
+import { validateDuplicateValue } from "@/utils/util";
+import moment from "moment";
+import EditableCell from "@views/room/modules/checkIn/EditableCell.vue";
+import SelectRoomFormModal from "./SelectRoomFormModal.vue";
+const columns = [
+  // {
+  //     title: "",
+  //     dataIndex: "key",
+  //     width: 20,
+  //   },
+  {
+    title: "房型",
+    dataIndex: "key1",
+    width: 150,
+  },
+  {
+    title: "门市价",
+    dataIndex: "key2",
+    width: 100,
+  },
+  {
+    title: "优惠价",
+    dataIndex: "key3",
+    width: 120,
+    scopedSlots: { customRender: "key3" },
+  },
+  {
+    title: "可订数/可超数",
+    dataIndex: "key4",
+    width: 170,
+    customRender: function (text, record) {
+      return text + "/" + record.key5;
+    },
+  },
+  {
+    title: "预定间数",
+    dataIndex: "key6",
+    width: 100,
+    scopedSlots: { customRender: "key6" },
+  },
+  {
+    title: "操作",
+    dataIndex: "action",
+    align: "center",
+    fixed: "right",
+    width: 70,
+    scopedSlots: { customRender: "action" },
+  },
+];
+const data = [];
+for (let i = 0; i < 2; i++) {
+  data.push({
+    id: i,
+    key1: `双人床` + i,
+    key2: 298,
+    key3: 298,
+    key4: 8,
+    key5: 0,
+    key6: 0,
+  });
+}
+export default {
+  name: "ScheduleRoomForm",
+  components: { EditableCell, SelectRoomFormModal },
+  props: {
+    //表单禁用
+    disabled: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
+  },
+  data() {
+    return {
+      visible: true,
+      columns,
+      model: { data: data },
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 5 },
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 16 },
+      },
+      confirmLoading: false,
+      validatorRules: {
+        dateRange: [{ required: true, message: "请选择维修时间!" }],
+        remark: [{ required: true, message: "请输入维修原因!" }],
+      },
+      url: {
+        add: "/business/busMeetingRoom/add",
+        edit: "/business/busMeetingRoom/edit",
+        queryById: "/business/busMeetingRoom/queryById",
+      },
+      result: [],
+      selectIndex: 0,
+    };
+  },
+  computed: {
+    formDisabled() {
+      return this.disabled;
+    },
+  },
+  created() {
+    var _info = JSON.parse(localStorage.getItem("storeInfo"));
+    if (_info) {
+      this.model.hotelId = _info.id;
+    }
+    //备份model原始值
+    this.modelDefault = JSON.parse(JSON.stringify(this.model));
+  },
+  methods: {
+    tagClose2(rindex, index) {
+      this.model.data[index].rooms.splice(rindex, 1);
+    },
+    modalFormOk(e) {
+      // this.modelDefault = Object.assign({}, this.modelDefault, {
+      //   rooms: e,
+      // });
+      // this.edit(this.modelDefault);
+      this.$set(this.model.data[this.selectIndex], "rooms", e);
+    },
+    pulsRoom(index) {
+      this.selectIndex = index;
+      this.$refs.modalSelectRoomForm.add();
+      this.$refs.modalSelectRoomForm.title = "排房";
+      this.$refs.modalSelectRoomForm.disableSubmit = false;
+    },
+    handleSearch(value) {
+      let result;
+      if (!value) {
+        result = [];
+      } else {
+        result = ["a", "b", "c"].map(
+          (domain) => `${value}${domain}(15888888888)`
+        );
+      }
+      this.result = result;
+    },
+    handleSelectMember(e) {
+      this.model.mobile = "158888888888";
+    },
+    moment,
+    onChange(date, dateString) {
+      console.log(date, dateString);
+    },
+    add() {
+      this.edit(this.modelDefault);
+    },
+    addList(roomLiveList) {
+      this.modelDefault = Object.assign({}, this.modelDefault, {
+        rooms: roomLiveList,
+      });
+      this.edit(this.modelDefault);
+    },
+    edit(record) {
+      this.model = Object.assign({}, record);
+      this.visible = true;
+    },
+    submitForm() {
+      const that = this;
+      that.$message.warning("未实现");
+      return;
+      // 触发表单验证
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          that.confirmLoading = true;
+          let httpurl = "";
+          let method = "";
+          if (!this.model.id) {
+            httpurl += this.url.add;
+            method = "post";
+          } else {
+            httpurl += this.url.edit;
+            method = "put";
+          }
+          httpAction(httpurl, this.model, method)
+            .then((res) => {
+              if (res.success) {
+                that.$message.success(res.message);
+                that.$emit("ok");
+              } else {
+                that.$message.warning(res.message);
+              }
+            })
+            .finally(() => {
+              that.confirmLoading = false;
+            });
+        }
+      });
+    },
+  },
+};
+</script>
+<style scoped>
+/deep/.ant-divider-horizontal {
+  margin: 12px 0 !important;
+}
+/deep/ .ant-form-item {
+  margin-bottom: 5px !important;
+}
+</style>

src/views/room/modules/schedule/ScheduleRoomModal.vue

@@ -0,0 +1,88 @@
+<template>
+  <j-modal
+    :title="title"
+    :width="width"
+    :visible="visible"
+    switchFullscreen
+    @ok="handleOk"
+    :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
+    @cancel="handleCancel"
+    cancelText="关闭">
+    <schedule-room-form ref="realForm" @ok="submitCallback" :disabled="disableSubmit"></schedule-room-form>
+  </j-modal>
+</template>
+
+<script>
+
+  import ScheduleRoomForm from './ScheduleRoomForm'
+  export default {
+    name: 'ScheduleRoomModal',
+    components: {
+      ScheduleRoomForm
+    },
+    data () {
+      return {
+        title:'',
+        width:1300,
+        visible: false,
+        disableSubmit: false
+      }
+    },
+    methods: {
+      add () {
+        this.visible=true
+        this.$nextTick(()=>{
+          this.$refs.realForm.add();
+        })
+      },
+      addList(record) {
+      this.visible = true;
+      this.$nextTick(() => {
+        this.$refs.realForm.addList(record);
+      });
+    },
+      edit (record) {
+        this.visible=true
+        this.$nextTick(()=>{
+          this.$refs.realForm.edit(record);
+        })
+      },
+      close () {
+        this.$emit('close');
+        this.visible = false;
+      },
+      handleOk () {
+        this.$refs.realForm.submitForm();
+      },
+      submitCallback(){
+        this.$emit('ok');
+        this.visible = false;
+      },
+      handleCancel () {
+        this.close()
+      }
+    }
+  }
+</script>
+<style scoped>
+/deep/.ant-modal-body {
+  padding: 12px;
+  max-height: calc(80vh - 150px);
+  overflow-y: auto;
+  &::-webkit-scrollbar {
+    width: 6px;
+    /*高宽分别对应横竖滚动条的尺寸*/
+    height: 1px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #e3e3e6;
+    border-radius: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+    border-radius: 5px;
+  }
+}
+</style>

src/views/room/modules/schedule/SelectRoomForm.vue

@@ -0,0 +1,266 @@
+<template>
+  <a-spin :spinning="confirmLoading">
+    <j-form-container :disabled="formDisabled">
+      <a-form-model
+        ref="form"
+        :model="model"
+        :rules="validatorRules"
+        slot="detail"
+      >
+        <a-row>
+          <a-col :span="24">
+            <a-form-model-item
+              label="房型"
+              :labelCol="labelCol"
+              :wrapperCol="wrapperCol"
+              prop="roomType"
+            >
+              <a-checkbox-group
+                v-model="model.roomType"
+                :options="roomTypeOptions"
+              />
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="24">
+            <a-form-model-item
+              label="房态"
+              :labelCol="labelCol"
+              :wrapperCol="wrapperCol"
+              prop="roomStatus"
+            >
+              <a-checkbox-group
+                v-model="model.roomStatus"
+                :options="roomStatusOptions"
+              />
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="24">
+            <a-form-model-item
+            label="已排房"
+              :labelCol="labelCol"
+              :wrapperCol="wrapperCol"
+            >
+            {{model.rooms.length||0}}/1间
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="24">
+            <a-form-model-item
+              label="已选"
+              :labelCol="labelCol"
+              :wrapperCol="{
+                xs: { span: 24 },
+                sm: { span: 20 },
+              }"
+              prop="roomStatus"
+            >
+              <a-tag
+                color="blue"
+                closable
+                :visible="visible"
+                @close.stop="tagClose2(index, item.roomNo)"
+                v-for="(item, index) in model.rooms"
+                :key="index"
+                >{{ item.roomNo }}</a-tag
+              >
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="24">
+            <a-form-model-item
+              label="房间"
+              :labelCol="labelCol"
+              :wrapperCol="{
+                xs: { span: 24 },
+                sm: { span: 20 },
+              }"
+            >
+              <a-tabs
+                :default-active-key="0"
+                tab-position="left"
+                :style="{ height: '300px' }"
+              >
+                <a-tab-pane
+                  v-for="(room, index) in roomList"
+                  :key="index"
+                  :tab="room.key"
+                >
+                  <div
+                    id="components-grid-demo-playground"
+                    style="height: 300px; overflow: hidden auto"
+                  >
+                    <a-row :gutter="[8, 8]">
+                      <a-col
+                        :span="3"
+                        v-for="(r, rIndex) in room.child"
+                        :key="rIndex"
+                      >
+                        <div
+                          :class="[
+                            r.check == 1 ? 'check' : '',
+                            r.kz == 1 ? 'kz' : '',
+                          ]"
+                          @click="checkRoomClick(r)"
+                        >
+                          {{ r.roomNo }}
+                        </div></a-col
+                      >
+                    </a-row>
+                  </div>
+                </a-tab-pane>
+              </a-tabs>
+            </a-form-model-item>
+          </a-col>
+        </a-row>
+      </a-form-model>
+    </j-form-container>
+  </a-spin>
+</template>
+
+<script>
+import { httpAction, getAction } from "@/api/manage";
+import { validateDuplicateValue } from "@/utils/util";
+export default {
+  name: "SelectRoomForm",
+  components: {},
+  props: {
+    //表单禁用
+    disabled: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
+  },
+  data() {
+    const rooms = [];
+    for (let i = 0; i < 100; i++) {
+      rooms.push({
+        id: "100" + i,
+        roomNo: 1000 + i,
+        check: 0,
+        kz: i == 1 ? 1 : 0,
+      });
+    }
+    const rooms2 = [];
+    for (let i = 0; i < 50; i++) {
+      rooms2.push({
+        id: "200" + i,
+        roomNo: 2000 + i,
+        check: 0,
+        kz: i == 5 ? 1 : 0,
+      });
+    }
+    return {
+      visible: true,
+      roomList: [
+        { key: "1层", child: rooms },
+        { key: "2层", child: rooms2 },
+      ],
+      roomTypeOptions: ["休闲家庭房", "特价房"],
+      roomStatusOptions: ["空净", "空脏"],
+      model: { rooms: [] },
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 2 },
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 16 },
+      },
+      confirmLoading: false,
+      validatorRules: {
+        dateRange: [{ required: true, message: "请选择维修时间!" }],
+        remark: [{ required: true, message: "请输入维修原因!" }],
+      },
+      url: {
+        add: "/business/busMeetingRoom/add",
+        edit: "/business/busMeetingRoom/edit",
+        queryById: "/business/busMeetingRoom/queryById",
+      },
+    };
+  },
+  computed: {
+    formDisabled() {
+      return this.disabled;
+    },
+  },
+  created() {
+    var _info = JSON.parse(localStorage.getItem("storeInfo"));
+    if (_info) {
+      this.model.hotelId = _info.id;
+    }
+    //备份model原始值
+    this.modelDefault = JSON.parse(JSON.stringify(this.model));
+  },
+  methods: {
+    checkRoomClick(row) {
+      if (row.check === 1) {
+        row.check = 0;
+        var index = this.model.rooms.findIndex((t) => t.key1 == row.key1);
+        this.model.rooms.splice(index, 1);
+      } else {
+        row.check = 1;
+        this.model.rooms.push(row);
+      }
+    },
+    tagClose2(index, key1) {
+      this.model.rooms.splice(index, 1);
+      this.roomList.some((t) => {
+        var r = t.child.some((c) => {
+          if (c.roomNo === key1) {
+            c.check = 0;
+            return true;
+          }
+          return false;
+        });
+        if (r === true) {
+          return true;
+        }
+      });
+    },
+    onChange(date, dateString) {
+      console.log(date, dateString);
+    },
+    add() {
+      this.edit(this.modelDefault);
+    },
+    edit(record) {
+      this.model = Object.assign({}, record);
+      this.visible = true;
+    },
+    submitForm() {
+      const that = this;
+      if (that.model.rooms.length === 0) {
+        that.$message.warning("请先选择房间");
+        return;
+      }
+      that.$emit("ok", that.model.rooms);
+    },
+  },
+};
+</script>
+<style scoped>
+#components-grid-demo-playground [class~="ant-col"] {
+  background: transparent;
+  border: 0;
+}
+#components-grid-demo-playground [class~="ant-col"] > div {
+  /* background: #00a0e9; */
+  height: 28px;
+  line-height: 28px;
+  font-size: 13px;
+  text-align: center;
+  cursor: pointer;
+  border-radius: 5px;
+}
+#components-grid-demo-playground .check {
+  border: 1px solid #00a0e9;
+}
+#components-grid-demo-playground .kz {
+  background: rgba(166, 166, 166, 1);
+}
+#components-grid-demo-playground pre {
+  background: #f9f9f9;
+  border-radius: 6px;
+  font-size: 13px;
+  padding: 8px 16px;
+}
+</style>

src/views/room/modules/schedule/SelectRoomFormModal.vue

@@ -0,0 +1,65 @@
+<template>
+  <j-modal
+    :title="title"
+    :width="width"
+    :visible="visible"
+    switchFullscreen
+    @ok="handleOk"
+    :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }"
+    @cancel="handleCancel"
+    cancelText="关闭"
+  >
+    <select-room-form
+      ref="realForm"
+      @ok="submitCallback"
+      :disabled="disableSubmit"
+    ></select-room-form>
+  </j-modal>
+</template>
+
+<script>
+import SelectRoomForm from "./SelectRoomForm";
+export default {
+  name: "SelectRoomFormModal",
+  components: {
+    SelectRoomForm,
+  },
+  data() {
+    return {
+      title: "",
+      width: 800,
+      visible: false,
+      disableSubmit: false,
+    };
+  },
+  methods: {
+    add() {
+      this.visible = true;
+      this.$nextTick(() => {
+        this.$refs.realForm.add();
+      });
+    },
+    edit(record) {
+      this.visible = true;
+      this.$nextTick(() => {
+        this.$refs.realForm.edit(record);
+      });
+    },
+    close() {
+      this.$emit("close");
+      this.visible = false;
+    },
+    handleOk() {
+      this.$refs.realForm.submitForm();
+    },
+    submitCallback(e) {
+      console.log("e", e);
+      this.$emit("ok", e);
+      this.visible = false;
+    },
+    handleCancel() {
+      this.close();
+    },
+  },
+};
+</script>