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

<template>
  <base-dialog
    v-model:visible="props.visible"
    title="潼南护路团队成员"
    :table-data="tableData"
    :table-columns="tableColumns"
    :table-height="400"
    :total="total"
    :current-page="currentPage"
    :page-size="pageSize"
    :z-index="2000"
    :max-width="900"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    @close="handleClose"
  >
    <!-- 操作列插槽 -->
    <template #operation="{ row }">
      <span class="view-link" @click="handleView(row)">查看</span>
    </template>
  </base-dialog>
</template>

<script setup>
import { ref, computed, watch } from "vue";
import baseDialog from "../component/baseDialog.vue";

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

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

// 表格列配置
const tableColumns = ref([
  { prop: "id", label: "序号", width: "60px" },
  { prop: "district", label: "区县", width: "100px" },
  { prop: "totalCount", label: "总人数", width: "80px" },
  { prop: "trafficDept", label: "交通主管部门责任人", width: "140px" },
  { prop: "roadOrg", label: "公路机构责任人", width: "120px" },
  { prop: "maintenance", label: "养护站道班责任人", width: "140px" },
  { prop: "roadKeeper", label: "护路员", width: "80px" },
  { prop: "operation", label: "操作", width: "auto", slot: "operation" },
]);

// 表格数据
const tableData = ref([
  {
    id: 1,
    district: "潼南",
    totalCount: 128,
    trafficDept: 2,
    roadOrg: 3,
    maintenance: 6,
    roadKeeper: 117,
  },
  {
    id: 2,
    district: "万州",
    totalCount: 96,
    trafficDept: 1,
    roadOrg: 2,
    maintenance: 4,
    roadKeeper: 89,
  },
  {
    id: 3,
    district: "沙坪坝",
    totalCount: 156,
    trafficDept: 3,
    roadOrg: 4,
    maintenance: 8,
    roadKeeper: 141,
  },
  {
    id: 4,
    district: "渝中",
    totalCount: 64,
    trafficDept: 1,
    roadOrg: 2,
    maintenance: 3,
    roadKeeper: 58,
  },
]);

// 分页
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");
};

// 点击遮罩关闭已由base-dialog组件处理

// 查看详情
const handleView = (item) => {
  emit("view", item);
};

// 分页事件处理
const handleSizeChange = (size) => {
  pageSize.value = size;
  currentPage.value = 1;
  fetchData();
};

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

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

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

<style lang="scss" scoped>
// 查看链接样式
.view-link {
  color: #40a9ff;
  cursor: pointer;
  font-size: 13px;
  transition: color 0.3s;

  &:hover {
    color: #69c0ff;
    text-decoration: underline;
  }
}
</style>