|
|
@@ -1,148 +1,561 @@
|
|
|
<template>
|
|
|
- <div style="display: flex;">
|
|
|
- <div style="flex: 3">
|
|
|
- <a-form :form="form">
|
|
|
- 酒店名称<a-select
|
|
|
- show-search
|
|
|
- placeholder="请选择酒店"
|
|
|
- option-filter-prop="children"
|
|
|
- style="width: 200px"
|
|
|
- @change="hotelChange"
|
|
|
- >
|
|
|
- <a-select-option v-for="(item, index) in hotelId" :key="index">
|
|
|
- {{item.name}}
|
|
|
- </a-select-option>
|
|
|
- </a-select>
|
|
|
- <div></div>
|
|
|
- 楼栋名称<a-select
|
|
|
- show-search
|
|
|
- placeholder="请选择楼栋"
|
|
|
- option-filter-prop="children"
|
|
|
- style="width: 200px"
|
|
|
- @change="floorChange"
|
|
|
+ <div style="display: flex" v-if="step == 1">
|
|
|
+ <div style="flex: 3">
|
|
|
+ <a-form :form="form">
|
|
|
+ <!-- <a-form-model-item
|
|
|
+ label="酒店名称"
|
|
|
+ :labelCol="labelCol"
|
|
|
+ :wrapperCol="wrapperCol"
|
|
|
+ prop="layoutId"
|
|
|
+ >
|
|
|
+ <a-select
|
|
|
+ show-search
|
|
|
+ placeholder="请选择酒店"
|
|
|
+ option-filter-prop="children"
|
|
|
+ @change="hotelChange"
|
|
|
+ >
|
|
|
+ <a-select-option v-for="(item, index) in hotelId" :key="index">
|
|
|
+ {{ item.name }}
|
|
|
+ </a-select-option>
|
|
|
+ </a-select>
|
|
|
+ </a-form-model-item> -->
|
|
|
+
|
|
|
+ <a-form-model-item
|
|
|
+ label="楼栋名称"
|
|
|
+ :labelCol="labelCol"
|
|
|
+ :wrapperCol="wrapperCol"
|
|
|
+ prop="layoutId"
|
|
|
+ >
|
|
|
+ <a-select
|
|
|
+ show-search
|
|
|
+ placeholder="请选择楼栋"
|
|
|
+ v-model="buildingId"
|
|
|
+ option-filter-prop="children"
|
|
|
+ @change="floorChange"
|
|
|
+ >
|
|
|
+ <a-select-option v-for="item in buildingTreeData" :key="item.id">
|
|
|
+ {{ item.name }}
|
|
|
+ </a-select-option>
|
|
|
+ </a-select>
|
|
|
+ </a-form-model-item>
|
|
|
+
|
|
|
+ <a-form-model-item
|
|
|
+ label="层数最高"
|
|
|
+ :labelCol="labelCol"
|
|
|
+ :wrapperCol="wrapperCol"
|
|
|
+ prop="layoutId"
|
|
|
+ >
|
|
|
+ <a-input-number
|
|
|
+ placeholder="输入楼层数"
|
|
|
+ v-model="model.floorCount"
|
|
|
+ :min="1"
|
|
|
+ style="width: 120px"
|
|
|
+ />层
|
|
|
+ </a-form-model-item>
|
|
|
+ <a-form-model-item
|
|
|
+ label="每层房间数量"
|
|
|
+ :labelCol="labelCol"
|
|
|
+ :wrapperCol="wrapperCol"
|
|
|
+ prop="layoutId"
|
|
|
+ >
|
|
|
+ <a-input-number
|
|
|
+ placeholder="输入每层房间数"
|
|
|
+ v-model="model.roomCount"
|
|
|
+ :min="1"
|
|
|
+ style="width: 120px"
|
|
|
+ />间
|
|
|
+ </a-form-model-item>
|
|
|
+
|
|
|
+ <a-form-model-item
|
|
|
+ label="设置前缀"
|
|
|
+ :labelCol="labelCol"
|
|
|
+ :wrapperCol="wrapperCol"
|
|
|
+ prop="layoutId"
|
|
|
+ >
|
|
|
+ <a-input placeholder="输入房号前缀" v-model="model.prefix" />
|
|
|
+ </a-form-model-item>
|
|
|
+ <a-form-model-item
|
|
|
+ label="设置前缀"
|
|
|
+ :labelCol="labelCol"
|
|
|
+ :wrapperCol="wrapperCol"
|
|
|
+ prop="layoutId"
|
|
|
+ >
|
|
|
+ <a-checkbox v-model="model.isExpectEnd"> 尾号排除 </a-checkbox>
|
|
|
+ <a-input
|
|
|
+ :disabled="!model.isExpectEnd"
|
|
|
+ placeholder="输入排除的其他尾号"
|
|
|
+ v-model="tailNumber"
|
|
|
+ />
|
|
|
+ </a-form-model-item>
|
|
|
+ <a-button type="primary" @click="genRooms"> 批量生成 </a-button>
|
|
|
+ </a-form>
|
|
|
+ </div>
|
|
|
+ <div style="flex: 7">
|
|
|
+ <div v-if="roomTree.length > 0">
|
|
|
+ <div v-for="(item, index) in roomTree" :key="index" style="width: 100%">
|
|
|
+ <div style="font-width: 600; font-size: 20px" @click="sele(item)">
|
|
|
+ <a-input
|
|
|
+ placeholder="请填写楼层名"
|
|
|
+ v-model="item.name"
|
|
|
+ class="floor-input"
|
|
|
+ ></a-input>
|
|
|
+ <a-button
|
|
|
+ @click="delFloor(index)"
|
|
|
+ type="danger"
|
|
|
+ shape="circle"
|
|
|
+ size="small"
|
|
|
+ icon="minus"
|
|
|
+ style="margin-left: 5px"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ style="display: flex;justify-content: start;margin: 20px;flex-wrap: wrap;"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ v-for="(room, indexs) in item.children"
|
|
|
+ :key="indexs"
|
|
|
+ style="width: 25%; margin-top: 10px"
|
|
|
>
|
|
|
- <a-select-option v-for="(item, index) in buildId" :key="index">
|
|
|
- {{item.name}}
|
|
|
- </a-select-option>
|
|
|
- </a-select>
|
|
|
- <div>设置最高层数 最高<a-input placeholder="输入楼层数" v-model="floor"/>层</div>
|
|
|
- <div>每层房间数量<a-input placeholder="输入每层房间数" v-model="roomsFromOneFloor" />间</div>
|
|
|
- <div>设置前缀<a-input placeholder="输入房号前缀" v-model="prefixName"/></div>
|
|
|
- <a-form-item :label-col="formTailLayout.labelCol" :wrapper-col="formTailLayout.wrapperCol">
|
|
|
- <div>
|
|
|
- <a-checkbox :checked="checkNick" @change="tailNumberExclude">
|
|
|
- 尾号排除
|
|
|
- </a-checkbox>
|
|
|
- <a-input placeholder="输入排除的其他尾号" v-model="tailNumber"/>
|
|
|
- </div>
|
|
|
- </a-form-item>
|
|
|
- <a-form-item :label-col="formTailLayout.labelCol" :wrapper-col="formTailLayout.wrapperCol">
|
|
|
- <a-button type="primary" @click="check">
|
|
|
- 批量生成
|
|
|
- </a-button>
|
|
|
- </a-form-item>
|
|
|
- </a-form>
|
|
|
+ <input :value="room.name" style="width: 50%; margin: auto" />
|
|
|
+ <a-button
|
|
|
+ @click="delRoom(index, indexs)"
|
|
|
+ type="danger"
|
|
|
+ shape="circle"
|
|
|
+ size="small"
|
|
|
+ icon="minus"
|
|
|
+ style="margin-left: 5px"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <a-button
|
|
|
+ @click="addRoom(index)"
|
|
|
+ type="primary"
|
|
|
+ shape="circle"
|
|
|
+ size="small"
|
|
|
+ icon="plus"
|
|
|
+ style="margin-left: 20px; margin: 0 20px 20px"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div style="flex: 7">
|
|
|
-<!-- <a-collapse v-model="activeKey">-->
|
|
|
-<!-- <a-collapse-panel key="1" :header="item.name" v-for="(item, index) in floor" :key="index">-->
|
|
|
-<!--<!– <p>{{ item.name }}</p>–>-->
|
|
|
-<!-- <div style="display: flex; justify-content: space-between">-->
|
|
|
-<!-- <div v-for="(items, indexs) in item.chil" :key="indexs">-->
|
|
|
-<!-- {{items.name}}-->
|
|
|
-<!-- </div>-->
|
|
|
-<!-- </div>-->
|
|
|
-<!-- </a-collapse-panel>-->
|
|
|
-<!-- </a-collapse>-->
|
|
|
- <div v-for="(item, index) in floor" :key="index">
|
|
|
- <div style="font-width: 600; font-size: 20px" @click="sele(item)">
|
|
|
- {{item.name}}
|
|
|
- </div>
|
|
|
- <div v-if="item.show" style="display: flex; justify-content: space-around; padding: 20px">
|
|
|
- <div v-for="(items, indexs) in item.chil" :key="indexs" style="width: 25%;">
|
|
|
- <input :value="items.name" style="width: 50%; margin: auto"><a-button type="danger" shape="circle" size="small" icon="minus" style="margin-left: 5px;" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <a-button type="primary" shape="circle" size="small" icon="plus" style="margin-left: 20px;" />添加房间
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
+ </div>
|
|
|
+ <div v-else class="empty-tree">
|
|
|
+ <a-empty description="请在左侧生成房间" />
|
|
|
+ </div>
|
|
|
+ <div class="bottom-btns">
|
|
|
+ <a-button @click="back">取消</a-button>
|
|
|
+ <a-button @click="save" type="primary">保存</a-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-else class="room-layout-settings">
|
|
|
+ <div class="layout-rooms-item" v-for="(item, layoutIndex) in layouts" :key="item.id">
|
|
|
+ <div class="title-laytou">
|
|
|
+ {{ item.name }}
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="room-items">
|
|
|
+ <div v-for="(element, roomIndex) in item.rooms" :key="element.id" class="layout-room-item">
|
|
|
+ {{ element.name }}
|
|
|
+ <a-button
|
|
|
+ @click="delLayoutRoom(element, layoutIndex, roomIndex)"
|
|
|
+ type="danger"
|
|
|
+ shape="circle"
|
|
|
+ size="small"
|
|
|
+ icon="minus"
|
|
|
+ style="margin-left: 5px"
|
|
|
+ />
|
|
|
</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="wait-select-title">
|
|
|
+ <div class="color-title">待配置房间</div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ v-for="(item, index) in roomTree"
|
|
|
+ :key="index"
|
|
|
+ style="width: 100%; padding-left: 30px"
|
|
|
+ >
|
|
|
+ <div style="font-width: 600; font-size: 20px" @click="sele(item)">
|
|
|
+ {{ item.name }}
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ style="display: flex;justify-content: start;margin: 20px;flex-wrap: wrap;"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ v-for="(room, indexs) in item.children"
|
|
|
+ :key="indexs"
|
|
|
+ class="select-room-item"
|
|
|
+ :class="[room.checked ? 'checked-room' : '']"
|
|
|
+ @click="room.checked = !room.checked"
|
|
|
+ style="width: 80px; margin-top: 10px"
|
|
|
+ >
|
|
|
+ {{ room.name }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="bottom-sele-btn">
|
|
|
+ <a-popover placement="topRight" v-if="canMove.can">
|
|
|
+ <template slot="content">
|
|
|
+ <a-button
|
|
|
+ type="link"
|
|
|
+ v-for="(item, index) in layouts"
|
|
|
+ :key="item.id"
|
|
|
+ @click="moveTo(index)"
|
|
|
+ >
|
|
|
+ {{ item.name }}
|
|
|
+ </a-button>
|
|
|
+ </template>
|
|
|
+ <template slot="title">
|
|
|
+ <span>要移动到的目标房型</span>
|
|
|
+ </template>
|
|
|
+ <a-button :disabled="false" type="primary"
|
|
|
+ >移动到房型({{ canMove.count }})</a-button
|
|
|
+ >
|
|
|
+ </a-popover>
|
|
|
+ <a-button v-else :disabled="true" type="primary"
|
|
|
+ >移动到房型(0)</a-button
|
|
|
+ >
|
|
|
+ <a-button :disabled="saveLoading" :loading="saveLoading" @click="back" type="primary"
|
|
|
+ >取消</a-button
|
|
|
+ >
|
|
|
+ <a-button :disabled="saveLoading" :loading="saveLoading" @click="save" type="primary"
|
|
|
+ >保存并查看房间列表</a-button
|
|
|
+ >
|
|
|
+
|
|
|
</div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- const formItemLayout = {
|
|
|
- labelCol: { span: 4 },
|
|
|
- wrapperCol: { span: 8 },
|
|
|
- };
|
|
|
- const formTailLayout = {
|
|
|
- labelCol: { span: 4 },
|
|
|
- wrapperCol: { span: 8, offset: 4 },
|
|
|
- };
|
|
|
+import draggable from "vuedraggable";
|
|
|
+import { buildingTree, saveBatch } from "@/api/roomBuildingApi";
|
|
|
+import { getAllLayouts } from "@/api/roomLayout";
|
|
|
export default {
|
|
|
- name: 'HotelSaasTenantFrontendRoomGen',
|
|
|
+ name: "HotelSaasTenantFrontendRoomGen",
|
|
|
+ inject: ["closeCurrent"],
|
|
|
+ components: {
|
|
|
+ draggable,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ saveLoading: false,
|
|
|
+ myArray: [
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ name: "12",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ name: "33",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ step: 1,
|
|
|
+ layouts: [],
|
|
|
+ buildingId: undefined,
|
|
|
+ buildingTreeData: [],
|
|
|
+ hotelId: [{ name: "A酒店" }, { name: "B酒店" }, { name: "C酒店" }],
|
|
|
+ labelCol: {
|
|
|
+ xs: { span: 12 },
|
|
|
+ sm: { span: 5 },
|
|
|
+ },
|
|
|
+ wrapperCol: {
|
|
|
+ xs: { span: 10 },
|
|
|
+ sm: { span: 16 },
|
|
|
+ },
|
|
|
+ roomTree: [],
|
|
|
+ model: {
|
|
|
+ floorCount: 1,
|
|
|
+ roomCount: 10,
|
|
|
+ prefix: "",
|
|
|
+ isExpectEnd: false,
|
|
|
+ },
|
|
|
|
|
|
- data() {
|
|
|
- return {
|
|
|
- hotelId: [{name: 'A酒店'}, {name: 'B酒店'}, {name: 'C酒店'}],
|
|
|
- buildId: [{name: 'A栋'},{name: 'B栋'},{name: 'C栋'}],
|
|
|
- floor: [
|
|
|
- {name: '第一层', show: true,
|
|
|
- chil:[{name: '101'},{name: '102'},{name: '103'},{name: '104'}]
|
|
|
- },
|
|
|
- {name: '第二层', show: true,
|
|
|
- chil:[{name: '101'},{name: '102'},{name: '103'},{name: '104'}]
|
|
|
- },
|
|
|
- {name: '第三层', show: true,
|
|
|
- chil:[{name: '101'},{name: '102'},{name: '103'},{name: '104'}]
|
|
|
- }
|
|
|
- ],
|
|
|
+ prefixName: "room",
|
|
|
+ roomsFromOneFloor: 6,
|
|
|
+ tailNumber: "",
|
|
|
+ checkNick: false,
|
|
|
+ form: this.$form.createForm(this, { name: "dynamic_rule" }),
|
|
|
+ seleShow: "", // 用于切换折叠
|
|
|
+ };
|
|
|
+ },
|
|
|
|
|
|
+ computed: {
|
|
|
+ canMove() {
|
|
|
+ let canMove = {
|
|
|
+ can: false,
|
|
|
+ count: 0,
|
|
|
+ };
|
|
|
+ this.roomTree.forEach((floor) => {
|
|
|
+ floor.children.forEach((room) => {
|
|
|
+ if (room.checked) {
|
|
|
+ (canMove.can = true), canMove.count++;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ return canMove;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ buildingTree().then((res) => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.buildingTreeData = res.result;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ getAllLayouts().then((res) => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ res.result.records.forEach((s) => {
|
|
|
+ s["rooms"] = [];
|
|
|
+ });
|
|
|
+ this.layouts = res.result.records;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
|
|
|
+ methods: {
|
|
|
+ delLayoutRoom(item, layoutIndex, roomIndex) {
|
|
|
+ this.roomTree[item.floorIndex].children.push({
|
|
|
+ checked: false,
|
|
|
+ name: item.name,
|
|
|
+ floorIndex: item.floorIndex
|
|
|
+ })
|
|
|
+ this.layouts[layoutIndex].rooms.splice(roomIndex,1)
|
|
|
+ },
|
|
|
+ moveTo(idx) {
|
|
|
+ let roomItems = [];
|
|
|
+ let rmvObject = {};
|
|
|
+ this.roomTree.forEach((floor, floorIndex) => {
|
|
|
+ rmvObject["" + floorIndex] = [];
|
|
|
+ floor.children.forEach((room, roomIndex) => {
|
|
|
+ if (room.checked) {
|
|
|
+ rmvObject["" + floorIndex].push(roomIndex);
|
|
|
+ roomItems.push({
|
|
|
+ floorIndex: floorIndex,
|
|
|
+ floorName: floor.name,
|
|
|
+ name: room.name,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
|
|
|
+ let objKeys = Object.keys(rmvObject);
|
|
|
+ objKeys.forEach((item) => {
|
|
|
+ if (rmvObject[item].length > 0) {
|
|
|
+ rmvObject[item].reverse().forEach((index) => {
|
|
|
+ this.roomTree[parseInt(item)].children.splice(index, 1);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ let origItems = JSON.parse(JSON.stringify(this.layouts[idx].rooms));
|
|
|
|
|
|
- prefixName: 'room',
|
|
|
- roomsFromOneFloor: 6,
|
|
|
- tailNumber: 4,
|
|
|
- activeKey: ['1'],
|
|
|
- checkNick: false,
|
|
|
- formItemLayout,
|
|
|
- formTailLayout,
|
|
|
- form: this.$form.createForm(this, { name: 'dynamic_rule' }),
|
|
|
- seleShow: '', // 用于切换折叠
|
|
|
- };
|
|
|
+ origItems = origItems.concat(roomItems);
|
|
|
+ this.$set(this.layouts[idx], "rooms", origItems);
|
|
|
},
|
|
|
-
|
|
|
- mounted() {
|
|
|
-
|
|
|
+ onDrag(e) {
|
|
|
+ debugger;
|
|
|
+ },
|
|
|
+ onRoomSelect(index, subIndex) {
|
|
|
+ this.$set(this.roomTree[index].children[subIndex], "checked", true);
|
|
|
},
|
|
|
+ save() {
|
|
|
+ let result = [];
|
|
|
+ let param = {
|
|
|
+ hotelId: null,
|
|
|
+ buildId: null,
|
|
|
+ children: [],
|
|
|
+ };
|
|
|
+ let hotelInfo = JSON.parse(localStorage.getItem("storeInfo"));
|
|
|
+ if (!this.buildingId) {
|
|
|
+ this.$message.error("请选择楼栋");
|
|
|
+ return;
|
|
|
+ }
|
|
|
|
|
|
- methods: {
|
|
|
- hotelChange(value) {
|
|
|
- console.log(`selected ${value}`);
|
|
|
- },
|
|
|
- floorChange(value) {
|
|
|
- console.log(`selected ${value}`);
|
|
|
- },
|
|
|
- tailNumberExclude() {
|
|
|
- console.log(`selected ${value}`);
|
|
|
- },
|
|
|
- activeKey(key) {
|
|
|
- console.log(key);
|
|
|
- },
|
|
|
- sele(data) {
|
|
|
- data.show = !data.show
|
|
|
- },
|
|
|
- check() {
|
|
|
+ if (this.model.roomCount <= 0) {
|
|
|
+ this.$message.error("房间数不正确");
|
|
|
+ return;
|
|
|
+ }
|
|
|
|
|
|
- },
|
|
|
+ if (this.step == 1) {
|
|
|
+ this.step = 2;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let treeData = this.getParams();
|
|
|
+ this.saveLoading = true
|
|
|
+ saveBatch(treeData).then(res => {
|
|
|
+ if(res.code == 200) {
|
|
|
+ this.$message.success("批量保存成功")
|
|
|
+ this.closeCurrent()
|
|
|
+ }
|
|
|
+ }).finally(_ => {
|
|
|
+ this.saveLoading = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getParams() {
|
|
|
+ let param = {
|
|
|
+ hotelId: null,
|
|
|
+ buildId: null,
|
|
|
+ children: [],
|
|
|
+ };
|
|
|
+ let hotelInfo = JSON.parse(localStorage.getItem("storeInfo"));
|
|
|
+ param.buildId = this.buildingId;
|
|
|
+ param.hotelId = hotelInfo.id;
|
|
|
+ let roomTree = JSON.parse(JSON.stringify(this.roomTree))
|
|
|
+ roomTree.forEach(a => {
|
|
|
+ param.children.push({
|
|
|
+ floorName: a.name,
|
|
|
+ children: []
|
|
|
+ })
|
|
|
+ })
|
|
|
+ this.layouts.forEach(layout => {
|
|
|
+ layout.rooms.forEach(room => {
|
|
|
+ param.children[room.floorIndex].children.push({
|
|
|
+ hotelId: hotelInfo.id,
|
|
|
+ buildId: this.buildingId,
|
|
|
+ layoutId: layout.id,
|
|
|
+ name: room.name,
|
|
|
+ prefix: this.model.prefix,
|
|
|
+ })
|
|
|
+ })
|
|
|
+ })
|
|
|
|
|
|
+ return param
|
|
|
+ },
|
|
|
+ addRoom(index) {
|
|
|
+ this.roomTree[index].children.push({
|
|
|
+ name: "",
|
|
|
+ floorIndex: index,
|
|
|
+ checked: false,
|
|
|
+ });
|
|
|
},
|
|
|
+ delFloor(index) {
|
|
|
+ this.roomTree.splice(index, 1);
|
|
|
+ },
|
|
|
+ delRoom(index, roomIndex) {
|
|
|
+ this.roomTree[index].children.splice(roomIndex, 1);
|
|
|
+ },
|
|
|
+ hotelChange(value) {
|
|
|
+ console.log(`selected ${value}`);
|
|
|
+ },
|
|
|
+ floorChange(value) {
|
|
|
+ console.log(`selected ${value}`);
|
|
|
+ },
|
|
|
+ tailNumberExclude() {
|
|
|
+ console.log(`selected ${value}`);
|
|
|
+ },
|
|
|
+ sele(data) {
|
|
|
+ data.show = !data.show;
|
|
|
+ },
|
|
|
+ back() {
|
|
|
+ this.closeCurrent();
|
|
|
+ },
|
|
|
+ check() {},
|
|
|
+ genRooms() {
|
|
|
+ let floors = [];
|
|
|
+ let model = this.model;
|
|
|
+ for (let i = 0; i < model.floorCount; i++) {
|
|
|
+ let children = [];
|
|
|
+ for (let r = 0; r < model.roomCount; r++) {
|
|
|
+ let expectEndArr = [];
|
|
|
+ if (model.isExpectEnd) {
|
|
|
+ expectEndArr = (this.tailNumber || "").split(",");
|
|
|
+ }
|
|
|
+
|
|
|
+ let numStr = (r + 1).toString();
|
|
|
+ let lastChar = numStr[numStr.length - 1];
|
|
|
+ if (!expectEndArr.includes(lastChar)) {
|
|
|
+ children.push({
|
|
|
+ checked: false,
|
|
|
+ floorIndex: i,
|
|
|
+ name:
|
|
|
+ (i + 1).toString() +
|
|
|
+ "0" +
|
|
|
+ numStr.padStart(this.model.roomCount.toString().length, "0"),
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ floors.push({
|
|
|
+ name: `第${i + 1}层`,
|
|
|
+ children: children,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ this.roomTree = floors;
|
|
|
+ },
|
|
|
+ },
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
-<style lang="stylus" scoped>
|
|
|
-
|
|
|
+<style lang="css" scoped>
|
|
|
+.empty-tree {
|
|
|
+ width: 100%;
|
|
|
+ height: 300px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.bottom-btns {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+.floor-input {
|
|
|
+ width: 200px;
|
|
|
+}
|
|
|
+.room-items {
|
|
|
+ display: inline-block;
|
|
|
+ border: 1px solid #cccccc77;
|
|
|
+ height: 200px;
|
|
|
+ overflow-y: auto;
|
|
|
+ width: 90%;
|
|
|
+ border-radius: 10px;
|
|
|
+ margin-bottom: 30px;
|
|
|
+}
|
|
|
+.title-laytou {
|
|
|
+ font-size: 17px;
|
|
|
+ font-weight: bold;
|
|
|
+ width: 100px;
|
|
|
+ text-align: center;
|
|
|
+ height: 25px;
|
|
|
+ line-height: 25px;
|
|
|
+ background-color: antiquewhite;
|
|
|
+}
|
|
|
+.room-items-dr {
|
|
|
+ border: 1px solid #f00 !important;
|
|
|
+}
|
|
|
+.wait-select-title {
|
|
|
+ border-bottom: 4px solid #1cb1ac;
|
|
|
+}
|
|
|
+.color-title {
|
|
|
+ background-color: #1cb1ac;
|
|
|
+ color: white;
|
|
|
+ width: 100px;
|
|
|
+ height: 30px;
|
|
|
+ line-height: 30px;
|
|
|
+ border-top-left-radius: 4px;
|
|
|
+ border-top-right-radius: 4px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+.select-room-item {
|
|
|
+ border: 1px solid #cccccc77;
|
|
|
+ border-radius: 4px;
|
|
|
+ margin-right: 4px;
|
|
|
+ height: 80px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 80px;
|
|
|
+ background-color: white;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.checked-room {
|
|
|
+ background-color: #1cb1ac !important;
|
|
|
+ color: white !important;
|
|
|
+ border: none !important;
|
|
|
+}
|
|
|
+.bottom-sele-btn {
|
|
|
+ padding-bottom: 30px;
|
|
|
+}
|
|
|
+.layout-room-item{
|
|
|
+ display: inline-block;
|
|
|
+ width: fit-content;
|
|
|
+ padding: 10px 12px;
|
|
|
+}
|
|
|
</style>
|
