bxztApp/packages/screen/src/views/RiskWarning/Dialog/dispatchDetailDialog.vue

<template>
  <base-dialog
    v-model:visible="props.visible"
    title="调度区县情况"
    :table-data="tableData"
    :table-columns="tableColumns"
    :table-height="tableHeight"
    :total="total"
    :current-page="currentPage"
    :page-size="pageSize"
    :z-index="2300"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    @close="handleClose"
  >
    <!-- 筛选区域 -->
    <template #filter>
      <div class="filter-row">
        <div class="filter-item">
          <span class="filter-label">影响区域</span>
          <el-select :teleported="false"
            v-model="filterForm.region"
            placeholder="请选择"
            popper-class="custom-select-popper"
            :popper-append-to-body="false"
            class="filter-select"
            clearable
          >
            <el-option
              v-for="item in regionOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div class="filter-item">
          <span class="filter-label">类型</span>
          <el-select :teleported="false"
            v-model="filterForm.type"
            placeholder="请选择"
            class="filter-select"
            clearable
          >
            <el-option
              v-for="item in typeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </div>
    </template>
  </base-dialog>
</template>

<script setup>
import { ref, computed, watch } from "vue";
import { Close } from "@element-plus/icons-vue";
import { regionOptions, typeOptions } from "../component/index.js";
import BaseDialog from "../component/baseDialog.vue";

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(["update:visible", "close"]);

// 筛选表单
const filterForm = ref({
  region: "",
  type: "",
});

// 影响区域选项
// 已从 index.js 导入

// 类型选项
// 已从 index.js 导入

// 表格高度
const tableHeight = ref(300);

// 表格列配置
const tableColumns = ref([
  { prop: "id", label: "序号", width: "60px" },
  { prop: "district", label: "区县/镇街", width: "120px" },
  { prop: "name", label: "姓名", width: "80px" },
  { prop: "phone", label: "电话", width: "120px" },
  { prop: "type", label: "类型", width: "120px" },
  { prop: "role", label: "角色", width: "120px" },
  { prop: "dispatchTime", label: "调度时间", width: "160px" },
]);

// 表格数据
const tableData = ref([
  {
    id: 1,
    district: "柏梓镇",
    name: "赵海浪",
    phone: "18623520681",
    type: "交通主管部门",
    role: "一般人员（路长履职）",
    dispatchTime: "2025-08-11 04:53:42",
  },
  {
    id: 2,
    district: "柏梓镇",
    name: "赵海浪",
    phone: "18623520681",
    type: "公路机构",
    role: "一般人员（路长履职）",
    dispatchTime: "2025-08-11 04:53:42",
  },
  {
    id: 3,
    district: "万州区",
    name: "王鑫",
    phone: "18623520682",
    type: "养护站",
    role: "站长",
    dispatchTime: "2025-08-10 14:30:00",
  },
  {
    id: 4,
    district: "沙坪坝区",
    name: "李华",
    phone: "18623520683",
    type: "护路员",
    role: "一般人员",
    dispatchTime: "2025-08-09 09:15:30",
  },
]);

// 分页
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(36);

const totalPages = computed(() => Math.ceil(total.value / pageSize.value));

const visiblePages = computed(() => {
  const pages = [];
  const maxVisible = 5;
  let start = Math.max(1, currentPage.value - Math.floor(maxVisible / 2));
  let end = Math.min(totalPages.value, start + maxVisible - 1);

  if (end - start + 1 < maxVisible) {
    start = Math.max(1, end - maxVisible + 1);
  }

  for (let i = start; i <= end; i++) {
    pages.push(i);
  }
  return pages;
});

// 关闭对话框
const handleClose = () => {
  emit("update:visible", false);
  emit("close");
};

// 分页操作
const handleSizeChange = (val) => {
  pageSize.value = val;
  fetchData();
};

const handleCurrentChange = (val) => {
  currentPage.value = val;
  fetchData();
};

// 获取数据
const fetchData = () => {
  console.log("获取第", currentPage.value, "页数据");
  // 实际项目中调用API获取数据
};

// 监听visible变化
watch(
  () => props.visible,
  (newVal) => {
    if (newVal) {
      currentPage.value = 1;
      fetchData();
    }
  },
);
</script>

<style lang="scss" scoped>
// 筛选区域样式
.filter-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.filter-item {
  display: flex;
  align-items: center;
  gap: 8px;

  .filter-label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
    white-space: nowrap;
  }

  .filter-select {
    width: 140px;

    :deep(.el-input__wrapper) {
      background-color: rgba(30, 70, 120, 0.4);
      border: 1px solid rgba(64, 169, 255, 0.3);
      box-shadow: none;
      border-radius: 4px;

      .el-input__inner {
        color: #fff;
        font-size: 13px;

        &::placeholder {
          color: rgba(255, 255, 255, 0.4);
        }
      }

      .el-input__suffix {
        .el-icon {
          color: rgba(255, 255, 255, 0.6);
        }
      }
    }
  }
}
</style>