feat: 7月迭代

src/views/asset-management/asset-information/components/dialogs/SpeedLimitDialog.vue

@@ -1,39 +1,66 @@
 <template>
-  <ElDialog v-model="visible" title="设置限速" width="500px">
+  <ElDialog
+    v-model="visible"
+    title="设置限速"
+    width="500px"
+    :lock-scroll="true"
+    :z-index="4000"
+    modal-class="speed-limit-modal"
+  >
     <ElForm ref="formRef" :model="form" :rules="rules" label-width="120px">
       <ElFormItem label="固定档位" prop="code">
-        <ElSelect v-model="form.code" style="width: 100%">
-          <ElOption v-for="tier in speedTiers" :key="tier.code" :label="tier.label" :value="tier.code" />
+        <ElSelect
+          v-model="form.code"
+          style="width: 100%"
+          :teleported="true"
+          append-to="body"
+          popper-class="speed-limit-select-popper"
+          :popper-style="{ zIndex: 4001 }"
+        >
+          <ElOption
+            v-for="tier in speedTiers"
+            :key="tier.code"
+            :label="tier.label"
+            :value="tier.code"
+          />
         </ElSelect>
       </ElFormItem>
     </ElForm>
     <template #footer>
       <ElButton @click="handleCancel">取消</ElButton>
-      <ElButton type="primary" @click="handleConfirm" :loading="loading"> 确认设置 </ElButton>
+      <ElButton
+        type="primary"
+        @click="handleConfirm"
+        :loading="confirmLoading"
+        :disabled="confirmLoading"
+      >
+        确认设置
+      </ElButton>
     </template>
   </ElDialog>
 </template>
 
 <script setup lang="ts">
-  import { ref, reactive, computed, watch } from 'vue'
+  import { ref, reactive, computed, onUnmounted, watch } from 'vue'
   import { ElDialog, ElForm, ElFormItem, ElSelect, ElOption, ElButton } from 'element-plus'
   import type { FormInstance, FormRules } from 'element-plus'
 
   interface Props {
     modelValue: boolean
+    confirmLoading?: boolean
   }
 
   interface Emits {
     (e: 'update:modelValue', value: boolean): void
-     (e: 'confirm', data: { code: -1 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 }): void
+    (e: 'confirm', data: { code: -1 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 }): void
   }
 
-  const props = defineProps<Props>()
+  const props = withDefaults(defineProps<Props>(), {
+    confirmLoading: false
+  })
   const emit = defineEmits<Emits>()
 
   const formRef = ref<FormInstance>()
-  const loading = ref(false)
-
   const speedTiers = [
     { code: -1, label: '不限速' },
     { code: 0, label: '0kbps' },
@@ -59,10 +86,25 @@
   })
 
   // 监听对话框打开，重置表单
-  watch(visible, (newVal) => {
-    if (newVal) {
-       form.code = 3
-    }
+  const setLayoutScrollLock = (locked: boolean) => {
+    document
+      .querySelector<HTMLElement>('.layouts')
+      ?.classList.toggle('speed-limit-scroll-locked', locked)
+  }
+
+  watch(
+    visible,
+    (newVal) => {
+      setLayoutScrollLock(newVal)
+      if (newVal) {
+        form.code = 3
+      }
+    },
+    { immediate: true }
+  )
+
+  onUnmounted(() => {
+    setLayoutScrollLock(false)
   })
 
   const handleCancel = () => {
@@ -70,6 +112,7 @@
   }
 
   const handleConfirm = async () => {
+    if (props.confirmLoading) return
     if (!formRef.value) return
 
     try {
@@ -83,4 +126,28 @@
   }
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss">
+  .speed-limit-modal .el-dialog__body {
+    overflow: visible;
+  }
+
+  .speed-limit-select-popper {
+    z-index: 4001 !important;
+    overscroll-behavior: contain;
+  }
+
+  .speed-limit-select-popper .el-select-dropdown__wrap,
+  .speed-limit-select-popper .el-scrollbar__wrap {
+    max-height: none !important;
+    overflow-y: visible !important;
+  }
+
+  .speed-limit-modal {
+    overflow: hidden;
+    overscroll-behavior: contain;
+  }
+
+  .layouts.speed-limit-scroll-locked {
+    overflow: hidden !important;
+  }
+</style>