gas-injection/src/views/vent/monitorManager/windowMonitor/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 class="vent-flex-row input-box">
        <div class="label">风窗面积：</div>
        <a-input-number size="small" placeholder="0" :min="0" :max="90" :step="1" v-model:value="area" />
      </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 area = 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 = '';
    area.value = 0;
  });

  function handleOk() {
    //
    emit('handleOk', passWord.value, type.value, area.value);
  }
  function handleCancel() {
    //
    emit('handleCancel');
  }
</script>
<style scoped lang="less">
  .label {
    width: 80px;
  }
  .ant-input,
  .ant-input-number {
    width: 150px;
  }
</style>