modal.vue 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. <template>
  2. <a-modal v-model:visible="visible" :title="title" @ok="handleOk" @cancel="handleCancel">
  3. <div class="modal-container">
  4. <div class="vent-flex-row">
  5. <ExclamationCircleFilled style="color: #ffb700; font-size: 30px" />
  6. <div class="warning-text">您是否要进行{{ title }}操作?</div>
  7. </div>
  8. <div class="vent-flex-row input-box" v-if="type == '1' || type == '2'">
  9. <div class="label">{{ title.includes('角度') ? '风窗角度:' : '风窗面积:' }}</div>
  10. <a-input-number size="small" placeholder="0" :min="0" :max="90" v-model:value="area" />
  11. </div>
  12. <div v-if="!globalConfig?.simulatedPassword" class="vent-flex-row input-box">
  13. <div class="label">操作密码:</div>
  14. <a-input size="small" type="password" v-model:value="passWord" />
  15. </div>
  16. </div>
  17. </a-modal>
  18. </template>
  19. <script setup lang="ts">
  20. import { watch, ref, inject } from 'vue';
  21. import { ExclamationCircleFilled } from '@ant-design/icons-vue';
  22. const globalConfig = inject('globalConfig');
  23. const props = defineProps({
  24. modalIsShow: {
  25. type: Boolean,
  26. default: false,
  27. },
  28. modalTitle: {
  29. type: String,
  30. default: '',
  31. },
  32. modalType: {
  33. type: String,
  34. default: '',
  35. },
  36. });
  37. const emit = defineEmits(['handleOk', 'handleCancel']);
  38. const visible = ref<Boolean>(false);
  39. const title = ref<String>('');
  40. const type = ref<String>('');
  41. const passWord = ref('');
  42. const area = ref(0);
  43. watch([() => props.modalIsShow, () => props.modalTitle, () => props.modalType], ([newVal, newModalTitle, newModalType]) => {
  44. visible.value = newVal;
  45. if (newModalTitle) title.value = newModalTitle;
  46. if (newModalType) type.value = newModalType;
  47. passWord.value = '';
  48. area.value = 0;
  49. });
  50. function handleOk() {
  51. if (globalConfig?.simulatedPassword) {
  52. emit('handleOk', '', type.value, area.value);
  53. } else {
  54. emit('handleOk', passWord.value, type.value, area.value);
  55. }
  56. }
  57. function handleCancel() {
  58. //
  59. emit('handleCancel');
  60. }
  61. </script>
  62. <style scoped lang="less">
  63. @ventSpace: zxm;
  64. .label {
  65. width: 80px;
  66. }
  67. .@{ventSpace}-input,
  68. .@{ventSpace}-input-number {
  69. width: 150px;
  70. }
  71. </style>