gas-injection/src/views/vent/monitorManager/windowMonitor/components/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>
      <template
        v-if="type == '1' || type == '2' || type.startsWith('sameSetValue') || type.startsWith('middleSetValue') || type.startsWith('rearSetValue')"
      >
        <div class="vent-flex-row input-box">
          <div class="label">{{ title.includes('角度') ? '风窗角度：' : '风窗面积：' }}</div>
          <a-input-number size="small" placeholder="0" :min="0" v-model:value="data" />
        </div>
      </template>
      <template v-else-if="type == '7'">
        <div class="vent-flex-row input-box">
          <div class="label">风窗目标风量(m³/min)：</div>
          <a-input-number size="small" placeholder="0" :min="0" v-model:value="data" />
        </div>
      </template>
      <template v-else-if="type == '8'">
        <div class="vent-flex-row input-box">
          <div class="label">风窗目标风量(m³/min)：</div>
          <a-input-number size="small" placeholder="0" :min="0" v-model:value="data" />
        </div>
      </template>
      <template v-else-if="type == 'ldkzStart'">
        <div class="vent-flex-row input-box">
          <div class="label">瓦斯超限浓度(%)：</div>
          <a-input-number size="small" placeholder="0" :min="0" v-model:value="data" />
        </div>
      </template>
      <template v-else-if="type.startsWith('frontSetValue')">
        <div class="vent-flex-row input-box">
          <div class="label">风窗角度：</div>
          <a-input-number size="small" placeholder="0" :min="0" v-model:value="data" />
        </div>
      </template>
      <template v-else-if="type.startsWith('air')">
        <div class="vent-flex-row input-box">
          <div class="label">风窗过风量(m³/min)：</div>
          <a-input-number size="small" placeholder="0" :min="0" v-model:value="data" />
        </div>
      </template>
      <template v-else-if="type.startsWith('COTest')">
        <div class="vent-flex-row input-box">
          <div class="label">一氧化碳(ppm)：</div>
          <a-input-number size="small" placeholder="0" :min="0" v-model:value="data" />
        </div>
      </template>
      <template v-else>
        <div class="vent-flex-row input-box">
          <div class="label">{{ title }}：</div>
          <a-input-number size="small" placeholder="0" :min="0" v-model:value="data" />
        </div>
      </template>
      <div v-if="!globalConfig?.simulatedPassword" 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, inject } from 'vue';
  import { ExclamationCircleFilled } from '@ant-design/icons-vue';

  const globalConfig = inject('globalConfig');

  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 data = 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 = '';
    data.value = 0;
  });

  function handleOk() {
    if (globalConfig?.simulatedPassword) {
      emit('handleOk', '', type.value, data.value);
    } else {
      if (type.value == '3') {
        emit('handleOk', passWord.value, type.value, data.value);
      } else if (type.value == '7') {
        emit('handleOk', passWord.value, type.value, data.value);
      } else if (type.value == '8') {
        emit('handleOk', passWord.value, type.value, data.value);
      } else {
        emit('handleOk', passWord.value, type.value, data.value);
      }
    }
  }
  function handleCancel() {
    //
    emit('handleCancel');
    data.value = 0;
  }
</script>
<style scoped lang="less">
  @ventSpace: zxm;

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