vent-template/src/views/vent/monitorManager/gateMonitor/modal.vue

<template>
  <a-modal v-model:visible="visible" :title="title" @ok="handleOk" @cancel="handleCancel">
    <div class="modal-container">
      <div class="vent-flex-row">
        <ExclamationCircleFilled style="color: #ffb700; font-size: 30px" />
        <div class="warning-text">您是否要进行{{ title }}操作？</div>
      </div>
      <div v-if="type == '10'">
        <div class="vent-flex-row input-box">
          <div class="label">风窗开启角度：</div>
          <a-input-number size="small" placeholder="0" :min="0" v-model:value="frontSetValue" />
        </div>
      </div>
      <div class="vent-flex-row input-box">
        <div class="label">操作密码：</div>
        <a-input size="small" type="password" v-model:value="passWord" />
      </div>
    </div>
  </a-modal>
</template>
<script setup lang="ts">
  import { watch, ref } from 'vue';
  import { ExclamationCircleFilled } from '@ant-design/icons-vue';

  const props = defineProps({
    modalIsShow: {
      type: Boolean,
      default: false,
    },
    modalTitle: {
      type: String,
      default: '',
    },
    modalType: {
      type: String,
      default: '',
    },
  });

  const emit = defineEmits(['handleOk', 'handleCancel']);

  const visible = ref<Boolean>(false);
  const title = ref<String>('');
  const type = ref<String>('');
  const passWord = ref('');
  const frontSetValue = ref(0);

  watch([() => props.modalIsShow, () => props.modalTitle, () => props.modalType], ([newVal, newModalTitle, newModalType]) => {
    visible.value = newVal;
    if (newModalTitle) title.value = newModalTitle;
    if (newModalType) type.value = newModalType;
    passWord.value = '';
  });

  function handleOk() {
    //
    if (type.value == '10') {
      emit('handleOk', passWord.value, type.value, frontSetValue.value);
    } else {
      emit('handleOk', passWord.value, type.value);
    }
  }
  function handleCancel() {
    //
    emit('handleCancel');
  }
</script>
<style scoped lang="less">
  @ventSpace: zxm;

  .label {
    width: 120px;
  }
  .@{ventSpace}-input {
    width: 150px;
  }
  .@{ventSpace}-input-number {
    width: 150px;
  }
</style>