hotel-saas-tenant-frontend/src/views/settings/components/roomModules/allDaysRoomFeeRule.vue

<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="false">
      <a-form-model
        ref="form"
        :model="model"
        layout="horizontal"
        :rules="validatorRules"
        slot="detail"
      >
        <div class="item-wrapper">
          <div class="wrapper-content">1、进店时间在</div>
          <div class="wrapper-form-item">
            <a-form-model-item
              label=""
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              prop="enterTime"
            >
              <a-time-picker
                :open.sync="open1"
                v-model="model.enterTime"
                format="HH:mm"
              >
                <a-button
                  slot="addon"
                  size="small"
                  type="primary"
                  @click="open1 = false"
                >
                  确定
                </a-button>
              </a-time-picker>
            </a-form-model-item>
          </div>
          <div class="wrapper-content">
            之后的，算第二天退房（例如，如果是6点，那么当天6点之后开的房间就是第二天中午退房，0点到6点开房就是当天中午退房）。
          </div>
        </div>

        <a-form-model-item
          label=""
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          prop="ass"
        >
          <a-input v-model="model.ass"></a-input>
        </a-form-model-item>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>
export default {
  data() {
    return {
      labelCol: {
        xs: { span: 0 },
        sm: { span: 0 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 24 },
      },
      open1: false,
      enterTime: "",
      confirmLoading: false,
      model: {
        enterTime: null,
        ass: null,
      },
      validatorRules: {
        enterTime: [
          {
            required: true,
            message: "进!",
          },
        ],
        ass: [{ required: true, message: "测试" }],
      },
    };
  },
};
</script>

<style lang="css" scoped>
.item-wrapper{
    display: flex;
    align-items: center;
    height: 50px;
}
</style>