fix 批量生成房间号 贺姜乐

src/views/settings/components/roomModules/roomGen.vue

@@ -1,16 +1,117 @@
 <template>
-    <div>
-        实现功能
+    <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"
+            >
+                <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>
+        </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">-->
+<!--&lt;!&ndash;                    <p>{{ item.name }}</p>&ndash;&gt;-->
+<!--                    <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>
 </template>
 
 <script>
+    const formItemLayout = {
+        labelCol: { span: 4 },
+        wrapperCol: { span: 8 },
+    };
+    const formTailLayout = {
+        labelCol: { span: 4 },
+        wrapperCol: { span: 8, offset: 4 },
+    };
 export default {
     name: 'HotelSaasTenantFrontendRoomGen',
 
     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: 4,
+            activeKey: ['1'],
+            checkNick: false,
+            formItemLayout,
+            formTailLayout,
+            form: this.$form.createForm(this, { name: 'dynamic_rule' }),
+            seleShow: '', // 用于切换折叠
         };
     },
 
@@ -19,7 +120,25 @@ export default {
     },
 
     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() {
+
+        },
+
     },
 };
 </script>