168 lines
3.6 KiB
Vue
168 lines
3.6 KiB
Vue
<template>
|
|
<base-dialog
|
|
v-model:visible="props.visible"
|
|
:title="props.allCountyData.name + '建设项目责任人明细'"
|
|
:table-data="tableData"
|
|
:table-columns="tableColumns"
|
|
:table-height="400"
|
|
:total="total"
|
|
:current-page="currentPage"
|
|
:page-size="pageSize"
|
|
:z-index="1000"
|
|
:max-width="1100"
|
|
@size-change="handleSizeChange"
|
|
@current-change="handleCurrentChange"
|
|
@close="handleClose"
|
|
>
|
|
<!-- 操作列插槽 -->
|
|
<template #operation="{ row }">
|
|
<span class="detail-link" @click="handleDetail(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,
|
|
},
|
|
allCountyData: {
|
|
type: Object,
|
|
default: () => ({
|
|
name: '',
|
|
}),
|
|
},
|
|
tongnanInfoItemData: {
|
|
type: Object,
|
|
default: () => ({
|
|
name: '',
|
|
}),
|
|
},
|
|
});
|
|
|
|
const emit = defineEmits(['update:visible', 'close', 'detail']);
|
|
|
|
// 表格列配置
|
|
const tableColumns = ref([
|
|
{ prop: 'id', label: '序号', width: '' },
|
|
{ prop: 'region', label: '区县/镇街', width: '' },
|
|
{ prop: 'totalCount', label: '总人数', width: '' },
|
|
{ prop: 'whistleblower', label: '吹哨人', width: '' },
|
|
{ prop: 'constructionUnit', label: '建设单位包保责任人', width: '' },
|
|
{ prop: 'contractorUnit', label: '施工单位包保责任人', width: '' },
|
|
{ prop: 'stationed', label: '驻地包保责任人', width: '' },
|
|
{ prop: 'districtLevel', label: '区县级包保责任人', width: '' },
|
|
{ prop: 'cityLevel', label: '市级包保责任人', width: '' },
|
|
{ prop: 'operation', label: '操作', width: '60px', slot: 'operation' },
|
|
]);
|
|
|
|
// 表格数据
|
|
const tableData = ref([
|
|
{
|
|
id: 1,
|
|
region: '万州区',
|
|
totalCount: 6,
|
|
whistleblower: 2,
|
|
constructionUnit: 2,
|
|
contractorUnit: 2,
|
|
stationed: 2,
|
|
districtLevel: 2,
|
|
cityLevel: 2,
|
|
},
|
|
{
|
|
id: 2,
|
|
region: '柏梓镇',
|
|
totalCount: 6,
|
|
whistleblower: 2,
|
|
constructionUnit: 2,
|
|
contractorUnit: 2,
|
|
stationed: 2,
|
|
districtLevel: 2,
|
|
cityLevel: 2,
|
|
},
|
|
]);
|
|
|
|
// 分页
|
|
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 handleDetail = item => {
|
|
emit('detail', 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>
|
|
// 详情链接样式
|
|
.detail-link {
|
|
color: #40a9ff;
|
|
cursor: pointer;
|
|
font-size: 13px;
|
|
|
|
&:hover {
|
|
color: #69c0ff;
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
</style>
|