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

<template>
  <base-dialog
    v-model:visible="props.visible"
    :title="props.allCountyData.name + '基本信息表'"
    :table-data="tableData"
    :table-columns="tableColumns"
    :table-height="320"
    :total="total"
    :current-page="currentPage"
    :page-size="pageSize"
    :z-index="2100"
    :max-width="1000"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    @close="handleClose"
  >
    <!-- 操作列插槽 -->
    <template #operation="{ row }">
      <div class="action-btns">
        <div class="action-btn" @click="handleVideo(row)" title="视频">
          <el-icon><VideoCamera /></el-icon>
        </div>
        <div class="action-btn" @click="handleVoice(row)" title="语音">
          <el-icon><Microphone /></el-icon>
        </div>
        <div class="action-btn" @click="handleCall(row)" title="电话">
          <el-icon><Phone /></el-icon>
        </div>
      </div>
    </template>

    <!-- 驻地名称列插槽 -->
    <template #stationName="{ row }">
      <el-tooltip :content="row.stationName" placement="top" :show-after="500">
        <span class="station-name-text" @click="handleStationNameClick(row)">
          {{ row.stationName }}
        </span>
      </el-tooltip>
    </template>
  </base-dialog>
</template>

<script setup>
import { ref, computed, watch } from 'vue';
import { VideoCamera, Microphone, Phone } from '@element-plus/icons-vue';
import baseDialog from '../component/baseDialog.vue';

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  allCountyData: {
    type: Object,
    default: () => {},
  },

  tongnanInfoItemData: {
    type: Object,
    default: () => ({
      name: '',
    }),
  },
});

const emit = defineEmits(['update:visible', 'close', 'video', 'voice', 'call', 'stationNameClick']);

// 表格列配置
const tableColumns = ref([
  { prop: 'id', label: '序号', width: '60px' },
  { prop: 'region', label: '区县/镇街', width: '140px' },
  { prop: 'name', label: '姓名', width: '100px' },
  { prop: 'phone', label: '电话', width: '120px' },
  { prop: 'stationName', label: '驻地名称', width: '180px', slot: 'stationName' },
  { prop: 'type', label: '类型', width: 'auto' },
  { prop: 'operation', label: '调度', width: '140px', slot: 'operation' },
]);

// 表格数据
const tableData = ref([
  {
    id: 1,
    region: '沙坪坝区',
    name: '赵海浪',
    phone: '18623520688',
    stationName: '沙坪坝区S545茅山峡公路桥新建工程（渝黔铁路扩能改造工程）项目经理部',
    type: '交通主管部门',
  },
  {
    id: 2,
    region: '沙坪坝区',
    name: '府效能',
    phone: '18623520688',
    stationName: '沙坪坝区S545茅山峡公路桥新建工程（渝黔铁路扩能改造工程）项目经理部',
    type: '公路机构',
  },
  {
    id: 3,
    region: '万州区柏梓镇',
    name: '王鑫',
    phone: '18623520688',
    stationName: '万州区项目经理部',
    type: '公路机构',
  },
  {
    id: 4,
    region: '万州区柏梓镇',
    name: '王鑫',
    phone: '18623520688',
    stationName: '万州区项目经理部',
    type: '公路机构',
  },
]);

// 分页
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 = 4;
  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 handleVideo = item => {
  emit('video', item);
};

const handleVoice = item => {
  emit('voice', item);
};

const handleCall = item => {
  emit('call', item);
};

// 点击驻地名称
const handleStationNameClick = item => {
  emit('stationNameClick', 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>
// 操作按钮样式
.action-btns {
  display: flex;
  justify-content: center;
  gap: 16px;

  .action-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    font-size: 18px;
    transition: all 0.3s;

    &:hover {
      color: #40a9ff;
      transform: scale(1.1);
    }

    .el-icon {
      font-size: 18px;
    }
  }
}

// 驻地名称样式
.station-name-text {
  display: block;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 180px;
  color: #40a9ff;
  transition: all 0.3s;

  &:hover {
    color: #69c0ff;
    text-shadow: 0 0 8px rgba(105, 192, 255, 0.6);
  }
}
</style>