详情ui

src/api/roomLayout.js

@@ -14,5 +14,18 @@ export function modifyAppState(parameter) {
     })
 }
 
+/**
+ * 修改
+ * @param {Object} parameter layoutId
+ * @returns Axios Promise
+ */
+ export function modify(parameter) {
+    return axios({
+        url: '/rooms/cesRoomLayout/modify/',
+        method: 'put',
+        data: parameter
+    })
+}
+
 
 

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

@@ -3,12 +3,13 @@
     :title="title"
     :width="width"
     :visible="visible"
+    :footer="null"
     switchFullscreen
     @ok="handleOk"
     :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
     @cancel="handleCancel"
     cancelText="关闭">
-    <bus-market-member-form ref="detailForm" @ok="submitCallback" :disabled="disableSubmit"></bus-market-member-form>
+    <bus-market-member-form @saveOk="onSaveOk" ref="detailForm" @ok="submitCallback" :disabled="disableSubmit"></bus-market-member-form>
   </j-modal>
 </template>
 
@@ -47,6 +48,9 @@
         },
         submitCallback() {
           
+        },
+        onSaveOk() {
+          this.$emit("saveOk")
         }
     }
   }

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

@@ -1,13 +1,13 @@
 <template>
     <a-tabs default-active-key="1" @change="()=>{}">
         <a-tab-pane key="1" tab="房型详情">
-          <detail></detail>
+          <detail ref="detail" @saveOk="onSaveOk"></detail>
         </a-tab-pane>
         <a-tab-pane key="2" tab="设备服务">
-          <device></device>
+          <device ref="device"></device>
         </a-tab-pane>
         <a-tab-pane key="3" tab="房型图片">
-          <layout-image></layout-image>
+          <layout-image ref="img"></layout-image>
         </a-tab-pane>
       </a-tabs>
 </template>
@@ -87,8 +87,12 @@ export default {
         this.modelDefault = JSON.parse(JSON.stringify(this.model));
     },
     methods: {
+        onSaveOk() {
+            this.$emit('saveOk')
+        },
         setRaw(item) {
             this.model = JSON.parse(JSON.stringify(item))
+            this.$refs.detail.setData(this.model)
         },
         initData() {
             getRoomPlans(this.model.hotelId, null).then((res) => {

src/views/settings/components/roomModules/roomLayoutDetailForm/roomLayoutDetail.vue

@@ -1,32 +1,133 @@
 <template>
     <div>
         <a-form-model ref="form" :model="model" :rules="validatorRules">
-            TODO：详情配置
+            <a-form-model-item label="启用类别" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="checkType">
+                <a-checkbox-group :default-value="defvals" v-model="model.checkType" :options="checkOptions" @change="onChange" />
+            </a-form-model-item>
+            <a-form-model-item label="窗户" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="windows">
+                <a-radio-group v-model="model.windows" default-value="1">
+                    <a-radio :value="1">
+                      有
+                    </a-radio>
+                    <a-radio :value="0">
+                      无
+                    </a-radio>
+                    
+                  </a-radio-group>
+            </a-form-model-item>
+            <a-form-model-item label="房型面积" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="area">
+                <a-input-number v-model="model.area" />
+            </a-form-model-item>
+            <a-form-model-item label="床型面积" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="bedSize">
+                <a-input-number v-model="model.bedSize" />
+            </a-form-model-item>
+
+            <a-form-model-item label="描述" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="remark">
+                <j-editor v-model="model.remark"/>
+            </a-form-model-item>
+            <a-button :disabled="submitLoading" :loading="submitLoading" @click="submitForm" type="primary">保存</a-button>
         </a-form-model>
     </div>
 </template>
 
 <script>
+import { modify } from '@/api/roomLayout'
 export default {
     name: 'HotelSaasTenantFrontendRoomLayoutDetail',
-
+    props: {
+       
+    },
     data() {
         return {
+            submitLoading: false,
+            defvals:[],
+            checkOptions: [
+                {
+                    label: '全天房',
+                    value: '1'
+                },
+                {
+                    label: '钟点房',
+                    value: '2'
+                }
+            ],
+            labelCol: {
+                xs: { span: 24 },
+                sm: { span: 5 },
+            },
+            wrapperCol: {
+                xs: { span: 24 },
+                sm: { span: 16 },
+            },
             model: {
-
+                id: null,
+                checkType: null,
+                windows: null,
+                area: 0,
+                bedSize: 0,
+                remark: ''
             },
             validatorRules: {
-
+                windows: [{ required: true, message: "请选择是否有窗" }],
+                area: [{ required: true, message: "请填写通用面积" }],
+                bedSize: [{ required: true, message: "请填写床型面积" }],
             }
         };
     },
 
     mounted() {
-        
+
     },
 
     methods: {
-        
+        setData(data) {
+            this.model = JSON.parse(JSON.stringify(data))
+            if(this.model.checkType) {
+                this.model.checkType = this.model.checkType.split(',')
+                this.defvals = this.model.checkType
+            } else {
+                this.model.checkType = null
+            }
+            this.model.windows = this.model.windows? 1:0
+        },
+        submitForm() {
+            const that = this;
+            // 触发表单验证
+            this.$refs.form.validate((valid) => {
+                if (valid) {
+                    let data = JSON.parse(JSON.stringify(this.model))
+                    data.checkType = (data.checkType||[]).toString()
+                    data.windows = data.windows == 1
+                    
+                    // that.confirmLoading = true;
+                    modify({
+                        id: data.id,
+                        hotelId: data.hotelId,
+                        name: data.name,
+                        marketPrice: data.marketPrice,
+                        canLivePersonNum: data.canLivePersonNum,
+                        breakfastNum: data.breakfastNum,
+                        lunchNum: data.lunchNum,
+                        dinnerNum: data.dinnerNum,
+                        checkType: data.checkType,
+                        windows: data.windows,
+                        remark: data.remark,
+                        area: data.area,
+                        bedSize: data.bedSize
+                    }).then(res => {
+                        if(res.code == 200) {
+                            this.$emit('saveOk')
+                            this.$message.success("保存成功")
+                        }
+                    })
+                }
+            });
+
+        },
+        onChange(e) {
+            console.log(this.model.checkType);
+        }
+
     },
 };
 </script>

src/views/settings/components/roomModules/roomLayoutDetailForm/roomLayoutDevice.vue

@@ -1,32 +1,208 @@
 <template>
     <div>
         <a-form-model ref="form" :model="model" :rules="validatorRules">
-            TODO：房间配置
+            <a-form-model-item label="房型标签" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="tags">
+                <div style="display: flex;">
+                    <div>
+                        <a-tag closable color="cyan" closavle v-for="(item, index) in model.tags"
+                            @close="onTagClose(index)">
+                            {{ item }}
+                        </a-tag>
+                    </div>
+                    <div style="display: flex;justify-content:center;align-items:center;" v-if="addIng">
+                        <span slot="enterButton" style="flex: 1;">
+                            <a-input v-model="addText" placeholder="请输入标签">
+                            </a-input>
+                        </span>
+                        <a-button @click="onadd">
+                            确定
+                        </a-button>
+                        <a-button @click="addIng = false">
+                            取消
+                        </a-button>
+                    </div>
+                    <a-button v-else type="primary" @click="addTag">添加</a-button>
+                </div>
+            </a-form-model-item>
+            <a-form-model-item label="房间设施" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="facilities">
+                <a-checkbox-group :default-value="defvals" v-model="model.facilities" :options="checkOptions" />
+            </a-form-model-item>
+            <a-form-model-item label="取消规则" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="cancelRule">
+                <a-radio-group v-model="model.cancelRule">
+                    <a-radio :style="radioStyle" :value="1">
+                        <span style="display: inline-block;">
+                            <span style="width: 76px;display:inline-block;">入住当天</span>
+                            <span style="display: inline-block;width: 20px;height:1px;"></span>
+                            <a-time-picker :open.sync="open1" v-model="beforeTime1" format="HH:mm">
+                                <a-button slot="addon" size="small" type="primary" @click="open1 = false">
+                                  确定
+                                </a-button>
+                              </a-time-picker>
+                              <span>前可取消</span>
+                            </span>
+                    </a-radio>
+                    <a-radio :style="radioStyle" :value="2">
+                        <span style="display: inline-block;">
+                            <span style="width: 76px;display:inline-block;">入住前</span>
+                            <span style="display: inline-block;width: 20px;height:1px;"></span>
+                            <a-input-number id="inputNumber" v-model="cancelDay1" :min="1" />
+                            <span>天</span>
+                            <a-time-picker :open.sync="open2" v-model="beforeTime2" format="HH:mm">
+                                <a-button slot="addon" size="small" type="primary" @click="open2 = false">
+                                  确定
+                                </a-button>
+                              </a-time-picker>
+                              <span>前可取消</span>
+                            </span>
+                    </a-radio>
+                    <a-radio :style="radioStyle" :value="3">
+                        <span style="display: inline-block;">
+                            <span style="width: 76px;display:inline-block;">入住前</span>
+                            <span style="display: inline-block;width: 20px;height:1px;"></span>
+                            <a-input-number id="inputNumber" v-model="cancelDay1" :min="1" />
+                            <span>天</span>
+                            <a-time-picker :open.sync="open2" v-model="beforeTime2" format="HH:mm">
+                                <a-button slot="addon" size="small" type="primary" @click="open2 = false">
+                                  确定
+                                </a-button>
+                              </a-time-picker>
+                              <span>前可取消,</span>
+                              <span>收取</span>
+                              <a-input-number id="inputNumber" v-model="model.cancelMoney" :min="0" />
+                              %罚金
+                            </span>
+                    </a-radio>
+                    <a-radio :style="radioStyle" :value="4">
+                        不可取消
+                    </a-radio>
+                    <a-radio :style="radioStyle" :value="5">
+                        可取消
+                    </a-radio>
+                </a-radio-group>
+            </a-form-model-item>
+            <a-button :disabled="submitLoading" :loading="submitLoading" @click="submitForm"
+                type="primary">保存</a-button>
         </a-form-model>
     </div>
 </template>
 
 <script>
 export default {
-    name: 'HotelSaasTenantFrontendRoomLayoutDevice',
+    name: 'HotelSaasTenantFrontendRoomLayoutDetail',
 
     data() {
         return {
+            cancelDay1: 1,
+            cancelDay2: 1,
+            beforeTime1: null,
+            beforeTime2: null,
+            beforeTime3: null,
+            radioStyle: {
+                display: 'block',
+                height: '30px',
+                lineHeight: '30px',
+            },
+            open1: false,
+            open2: false,
+            open3: false,
+            submitLoading: false,
+            defvals: [],
+            checkOptions: [
+                {
+                    label: '有窗户',
+                    value: '有窗户'
+                },
+                {
+                    label: '无烟房',
+                    value: '无烟房'
+                },
+                {
+                    label: '空调',
+                    value: '空调'
+                },
+                {
+                    label: '洗衣机',
+                    value: '洗衣机'
+                },
+                {
+                    label: '大床',
+                    value: '大床'
+                }
+            ],
+            labelCol: {
+                xs: { span: 24 },
+                sm: { span: 5 },
+            },
+            wrapperCol: {
+                xs: { span: 24 },
+                sm: { span: 16 },
+            },
+            addIng: false,
+            addText: '',
             model: {
-
+                id: null,
+                tags: [],
+                facilities: null,
+                cancelRule: null,
+                windows: null,
+                cancelBeforeTime: null,
+                cancelMoney: 0,
+                area: 0,
+                bedSize: 0,
+                remark: ''
             },
             validatorRules: {
-
+                windows: [{ required: true, message: "请选择是否有窗" }],
+                area: [{ required: true, message: "请填写通用面积" }],
+                bedSize: [{ required: true, message: "请填写床型面积" }],
             }
         };
     },
 
     mounted() {
-        
+
     },
 
     methods: {
-        
+        onTagClose(item) {
+            delete this.model.tags[item]
+        },
+        addTag() {
+            this.addIng = true
+            this.addText = ''
+        },
+        onadd() {
+            if (!this.addText) {
+                this.$message.warning('请输入标签名')
+                return
+            }
+            if (!this.model.tags.includes(this.addText)) {
+                this.model.tags.push(this.addText)
+                this.addIng = false
+            } else {
+                this.$message.warning(`已存在该标签`)
+            }
+
+        },
+        submitForm() {
+            const that = this;
+            // 触发表单验证
+            this.$refs.form.validate((valid) => {
+                if (valid) {
+                    that.confirmLoading = true;
+                    if (this.model.id && this.model.id != '') {
+                        this.doModify()
+                    } else {
+                        this.doCreate()
+                    }
+                }
+            });
+
+        },
+        onChange(item) {
+
+        }
+
     },
 };
 </script>

src/views/settings/components/roomModules/roomLayoutDetailForm/roomLayoutImage.vue

@@ -1,7 +1,14 @@
 <template>
     <div>
         <a-form-model ref="form" :model="model" :rules="validatorRules">
-            TODO：房型大图
+            <a-form-model-item label="房型大图" >
+                <j-image-upload class="avatar-uploader" text="上传" v-model="model.ewm" ></j-image-upload>
+              </a-form-model-item>
+              <a-form-model-item label="图片" >
+                <j-image-upload class="avatar-uploader" text="上传" v-model="model.imgList" :isMultiple="true"></j-image-upload>
+              </a-form-model-item>
+              <a-button :disabled="submitLoading" :loading="submitLoading" @click="submitForm"
+                type="primary">保存</a-button>
         </a-form-model>
     </div>
 </template>
@@ -12,8 +19,11 @@ export default {
 
     data() {
         return {
+            submitLoading: false,
             model: {
-
+                id: 0,
+                ewm: null,
+                imgList: null
             },
             validatorRules: {
 
@@ -26,7 +36,21 @@ export default {
     },
 
     methods: {
-        
+        submitForm() {
+            const that = this;
+            // 触发表单验证
+            this.$refs.form.validate((valid) => {
+                if (valid) {
+                    that.confirmLoading = true;
+                    if (this.model.id && this.model.id != '') {
+                        this.doModify()
+                    } else {
+                        this.doCreate()
+                    }
+                }
+            });
+
+        },
     },
 };
 </script>

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

@@ -96,7 +96,7 @@
         </div>
         <room-layout-form ref="modalForm" @ok="modalFormOk"></room-layout-form>
         <room-layout-price-modal ref="priceModal" @ok="onPriceSave"></room-layout-price-modal>
-        <room-layout-detail-modal ref="detailModal"></room-layout-detail-modal>
+        <room-layout-detail-modal @saveOk="onSaveOk" ref="detailModal"></room-layout-detail-modal>
     </a-card>
 </template>
   
@@ -199,6 +199,7 @@ export default {
                 importExcelUrl:
                     "rooms/cesRoomLayout/importExcel",
             },
+           
             dictOptions: {},
             superFieldList: [],
             selectedRowKeys: [],
@@ -212,6 +213,9 @@ export default {
         // this.loadData()
     },
     methods: {
+        onSaveOk() {
+                this.loadData()
+            },
         onPriceSave() {
 
         },