mky-vent-base/src/views/vent/monitorManager/airDoor/components/timeSetModal.vue

<template>
  <div class="time-set">
    <a-modal v-model:visible="Visible" width="550px" :title="Title" centered destroyOnClose @ok="handleOk"
      @cancel="$emit('handleCancelTime', false)">

      <a-form :model="formState" name="basic" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" autocomplete="off">
        <a-form-item label="开启时间">
          <a-select ref="select" v-model:value="formState.hourS" style="width:130px" placeholder="请选择...">
            <a-select-option v-for="(item, index) in hourOption" :key="index" :value="item.value">{{ item.label
            }}</a-select-option>
          </a-select>
          <div class="unit">时</div>
          <a-select ref="select" v-model:value="formState.minuteS" style="width:130px" placeholder="请选择...">
            <a-select-option v-for="(item, index) in minuteOption" :key="index" :value="item.value">{{ item.label
            }}</a-select-option>
          </a-select>
          <div class="unit">分</div>
        </a-form-item>
        <a-form-item label="关闭时间">
          <a-select ref="select" v-model:value="formState.hourE" style="width:130px" placeholder="请选择...">
            <a-select-option v-for="(item, index) in hourOption" :key="index" :value="item.value">{{ item.label
            }}</a-select-option>
          </a-select>
          <div class="unit">时</div>
          <a-select ref="select" v-model:value="formState.minuteE" style="width:130px" placeholder="请选择...">
            <a-select-option v-for="(item, index) in minuteOption" :key="index" :value="item.value">{{ item.label
            }}</a-select-option>
          </a-select>
          <div class="unit">分</div>
        </a-form-item>
        <a-form-item label="启动定时">
          <a-switch v-model:checked="formState.checked" />
        </a-form-item>
        <a-form-item label="输入密码">
          <a-input v-model:value="formState.passWord" placeholder="请输入" style="width: 240px" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watchEffect } from 'vue'

let props = defineProps({
  visibleTime: {
    type: Boolean,
    default: false
  },
  Title: {
    type: String,
    default: '设定定时'
  }
})

let Visible = ref(false)
let formState = reactive({
  hourS: '',
  minuteS: '',
  hourE: '',
  minuteE: '',
  checked: true,
  passWord: ''
})
let hourOption = ref<any[]>([
  { label: '00', value: 0 },
  { label: '01', value: 1 },
  { label: '02', value: 2 },
  { label: '03', value: 3 },
  { label: '04', value: 4 },
  { label: '05', value: 5 },
  { label: '06', value: 6 },
  { label: '07', value: 7 },
  { label: '08', value: 8 },
  { label: '09', value: 9 },
  { label: '10', value: 10 },
  { label: '11', value: 11 },
  { label: '12', value: 12 },
  { label: '13', value: 13 },
  { label: '14', value: 14 },
  { label: '15', value: 15 },
  { label: '16', value: 16 },
  { label: '17', value: 17 },
  { label: '18', value: 18 },
  { label: '19', value: 19 },
  { label: '20', value: 20 },
  { label: '21', value: 21 },
  { label: '22', value: 22 },
  { label: '23', value: 23 },
])
let minuteOption = ref<any[]>([
  { label: '00', value: 0 },
  { label: '01', value: 1 },
  { label: '02', value: 2 },
  { label: '03', value: 3 },
  { label: '04', value: 4 },
  { label: '05', value: 5 },
  { label: '06', value: 6 },
  { label: '07', value: 7 },
  { label: '08', value: 8 },
  { label: '09', value: 9 },
  { label: '10', value: 10 },
  { label: '11', value: 11 },
  { label: '12', value: 12 },
  { label: '13', value: 13 },
  { label: '14', value: 14 },
  { label: '15', value: 15 },
  { label: '16', value: 16 },
  { label: '17', value: 17 },
  { label: '18', value: 18 },
  { label: '19', value: 19 },
  { label: '20', value: 20 },
  { label: '21', value: 21 },
  { label: '22', value: 22 },
  { label: '23', value: 23 },
  { label: '24', value: 24 },
  { label: '25', value: 25 },
  { label: '26', value: 26 },
  { label: '27', value: 27 },
  { label: '28', value: 28 },
  { label: '29', value: 29 },
  { label: '30', value: 30 },
  { label: '31', value: 31 },
  { label: '32', value: 32 },
  { label: '33', value: 33 },
  { label: '34', value: 34 },
  { label: '35', value: 35 },
  { label: '36', value: 36 },
  { label: '37', value: 37 },
  { label: '38', value: 38 },
  { label: '39', value: 39 },
  { label: '40', value: 40 },
  { label: '41', value: 41 },
  { label: '42', value: 42 },
  { label: '43', value: 43 },
  { label: '44', value: 44 },
  { label: '45', value: 45 },
  { label: '46', value: 46 },
  { label: '47', value: 47 },
  { label: '48', value: 48 },
  { label: '49', value: 49 },
  { label: '50', value: 50 },
  { label: '51', value: 51 },
  { label: '52', value: 52 },
  { label: '53', value: 53 },
  { label: '54', value: 54 },
  { label: '55', value: 55 },
  { label: '56', value: 56 },
  { label: '57', value: 57 },
  { label: '58', value: 58 },
  { label: '59', value: 59 },

])

//确定
function handleOk() {

}

watchEffect(() => {
  Visible.value = props.visibleTime
})
</script>

<style lang="less" scoped>
.zxm-form {
  margin: 20px;
}

.unit {
  color: #fff;
  margin: 0px 10px;
}

::v-deep .zxm-form-item-control-input-content {
  display: flex;
  align-items: center;
}
</style>