提交设备管理优化 以及防抖功能

张诺

2025-07-25 77bb73aaef8f85d961b373731a05361cbe6921de

 src/components/dialog/DilogTable.vue

@@ -7,13 +7,19 @@
    @close="handleClose"
    class="dialog-table"
  >
    <ETable
      :columns="columns"
      :table-data="tableData"
      :loading="loading"
      :show-selection="false"
      :show-operations="false"
    />
    <div class="dialog-table-content">
      <div class="table-wrapper">
        <ETable
          :columns="columns"
          :table-data="tableData"
          :loading="loadings"
          :show-selection="false"
          :show-operations="false"
          :height="height"
          :style="{ minHeight: height }"
        />
      </div>
    </div>
  </el-dialog>
</template>

@@ -22,44 +28,20 @@
import ETable from '@/components/Table/ETable.vue'

const props = defineProps({
  // 弹窗控制
  modelValue: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: '数据表格'
  },
  width: {
    type: String,
    default: '80%'
  },
  
  // 表格数据
  tableData: {
    type: Array,
    default: () => []
  },
  columns: {
    type: Array,
    default: () => []
  },
  loading: {
    type: Boolean,
    default: false
  }
  modelValue: Boolean,
  title: String,
  width: String,
  tableData: Array,
  columns: Array,
  loading: Boolean,
  height: [String, Number]
})

const loadings = computed(() => props.loading || false)
const emit = defineEmits(['update:modelValue'])

// 弹窗显示控制
const visible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

// 关闭弹窗
const handleClose = () => {
  emit('update:modelValue', false)
}
@@ -109,4 +91,92 @@
    }
  }
}

.dialog-table-content {
  display: flex;
  flex-direction: column;
  min-height: 300px;
}

.table-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  background-color: #ffffff;
  border-radius: 6px;
  border: 1px dashed #d9d9d9;
}

.pagination-wrapper {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  padding: 16px 0;
  background-color: #ffffff;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  
  :deep(.el-pagination) {
    --el-pagination-font-size: 14px;
    --el-pagination-bg-color: #ffffff;
    --el-pagination-text-color: #606266;
    --el-pagination-border-radius: 4px;
    
    .btn-prev,
    .btn-next {
      background-color: #f5f7fa;
      color: #606266;
      
      &:hover {
        color: #409eff;
      }
      
      &:disabled {
        color: #c0c4cc;
        background-color: #f5f7fa;
      }
    }
    
    .el-pager li {
      background-color: #f5f7fa;
      color: #606266;
      
      &:hover {
        color: #409eff;
      }
      
      &.is-active {
        background-color: #409eff;
        color: #ffffff;
      }
    }
    
    .el-pagination__sizes .el-select .el-input__wrapper {
      background-color: #f5f7fa;
    }
    
    .el-pagination__jump .el-input__wrapper {
      background-color: #f5f7fa;
    }
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .pagination-wrapper {
    :deep(.el-pagination) {
      .el-pagination__sizes,
      .el-pagination__jump {
        display: none;
      }
    }
  }
}
</style>