10 changed files with 652 additions and 13 deletions
@ -0,0 +1,286 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-07-08 10:43:52 |
|||
@ 备注: 自定义应用时间轴视图 |
|||
--> |
|||
<script lang='ts' setup> |
|||
import { gainFormPageListCont } from '@/api/DesignForm/requestapi' |
|||
|
|||
const props = defineProps({ |
|||
searchSend:{ |
|||
type:Object, |
|||
default(){ |
|||
return {} |
|||
} |
|||
}, |
|||
viewSetup:{ |
|||
type:Object, |
|||
default(){ |
|||
return {} |
|||
} |
|||
}, |
|||
columnsFilter:{ |
|||
type:Object, |
|||
default(){ |
|||
return {} |
|||
} |
|||
}, |
|||
drawerWith:{ |
|||
type:Number, |
|||
default:0 |
|||
} |
|||
}); |
|||
|
|||
//---------pagination configs------ |
|||
const totalNum = ref(0) |
|||
const pageSize = ref(props.searchSend.pagesize) |
|||
const selectedMergeKeys = ref<string[]>([]) |
|||
|
|||
//------------------ by han2015: 支持表单排序功能---------------------- |
|||
const columnSortData = new Map(); |
|||
const setHeaderClass=(params:any)=>{ |
|||
if(columnSortData.has(params.column.property)){ |
|||
if(columnSortData.get(params.column.property)=="DESC"){ |
|||
params.column.order="descending" |
|||
return "sorted-desc" |
|||
}else{ |
|||
params.column.order="ascending" |
|||
return "sorted-asc" |
|||
} |
|||
} |
|||
return "" |
|||
} |
|||
// by han2015: 列表支持表头排序 |
|||
const onUpdateSort = (data: { prop: string; order: "ascending" | "descending" | null }) => { |
|||
if (data.order === "descending") { |
|||
columnSortData.set(data.prop, "DESC"); |
|||
} else if (data.order === "ascending") { |
|||
columnSortData.set(data.prop, "ASC"); |
|||
} else { |
|||
columnSortData.delete(data.prop); |
|||
} |
|||
|
|||
selectedMergeKeys.value=Array.from(columnSortData.keys()) |
|||
getPageData(); |
|||
} |
|||
|
|||
// 计算合并位置（预处理，避免每次渲染重复计算） |
|||
const spanMap = computed(() => { |
|||
const map = {} |
|||
const pos = {} |
|||
|
|||
// 按优先级排序的合并列，获取排序列 |
|||
selectedMergeKeys.value.forEach((key, index) => { |
|||
map[key] = [] |
|||
pos[key] = 0 |
|||
|
|||
for (let i = 0; i < tableDataList.value.length; i++) { |
|||
if (i === 0) { |
|||
map[key][i] = 1 // 第一行总是 1 |
|||
pos[key] = 0 |
|||
} else { |
|||
// 检查：当前列及其所有前置列是否都相同 |
|||
let shouldMerge = true |
|||
for (let j = 0; j <= index; j++) { |
|||
const checkKey = selectedMergeKeys.value[j] |
|||
if (tableDataList.value[i][checkKey] !== tableDataList.value[i-1][checkKey]) { |
|||
shouldMerge = false |
|||
break |
|||
} |
|||
} |
|||
|
|||
if (shouldMerge) { |
|||
// 合并：累加到合并起始位置，当前位置标记 0 |
|||
map[key][pos[key]] += 1 |
|||
map[key][i] = 0 |
|||
} else { |
|||
// 不合并：新开一个合并组 |
|||
map[key][i] = 1 |
|||
pos[key] = i // 更新合并起始位置 |
|||
} |
|||
} |
|||
} |
|||
}) |
|||
|
|||
return map |
|||
}) |
|||
|
|||
|
|||
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => { |
|||
const key = column.property |
|||
|
|||
if (spanMap.value[key]) { |
|||
const rowspan = spanMap.value[key][rowIndex] |
|||
return { |
|||
rowspan: rowspan, |
|||
colspan: rowspan > 0 ? 1 : 0 |
|||
} |
|||
} |
|||
|
|||
return { rowspan: 1, colspan: 1 } |
|||
} |
|||
const tableDataList = ref([]) // 表格行数据 |
|||
|
|||
const groupColumnSearch = (val:any,clas?:number) =>{ |
|||
getPageData() |
|||
} |
|||
|
|||
const handleSizeChange = (page: number) => { |
|||
// console.log("翻页操作",page) |
|||
pageSize.value = page; |
|||
getPageData(); |
|||
}; |
|||
const handleCurrentChange = (page: number) => { |
|||
props.searchSend.page = page |
|||
getPageData(); |
|||
}; |
|||
|
|||
const getPageData=async ()=>{ |
|||
// by han2015: 处理排序字段信息 |
|||
let arr:string[]=[]; |
|||
columnSortData.forEach((value, key) => { |
|||
arr.push(`${key} ${value}`) |
|||
}); |
|||
|
|||
let sendData = props.searchSend |
|||
sendData.sortData= arr.join(", ") |
|||
sendData.pagesize = 50 |
|||
await gainFormPageListCont(sendData) |
|||
.then(({data})=>{ |
|||
totalNum.value = data.total |
|||
tableDataList.value = data.list |
|||
}) |
|||
} |
|||
|
|||
onMounted(()=>{ |
|||
nextTick(()=>{ |
|||
getPageData() |
|||
}) |
|||
}) |
|||
|
|||
defineExpose({ |
|||
groupColumnSearch |
|||
}) |
|||
|
|||
|
|||
</script> |
|||
<template> |
|||
<div> |
|||
<el-row :gutter="20"> |
|||
<el-table |
|||
:data="tableDataList" |
|||
:span-method="objectSpanMethod" |
|||
@sort-change="onUpdateSort" |
|||
:header-cell-class-name="setHeaderClass" |
|||
border |
|||
> |
|||
<template v-for="item in columnsFilter" :key="item.id || item.label"> |
|||
<el-table-column |
|||
v-if="['-'].includes(item.fieldClass)" |
|||
:type="item.type" |
|||
:prop="item.field" |
|||
:label="item.label" |
|||
config="" |
|||
width="60" |
|||
fixed |
|||
header-align="center" |
|||
align="center" |
|||
> |
|||
<template v-if="item.help" #header="scope"> |
|||
{{ scope.column.label }} |
|||
<tooltip :content="item.help" /> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
v-else-if="item.fieldClass == '_lableTitle'" |
|||
label="标题" |
|||
config="" |
|||
min-width="90" |
|||
header-align="center" |
|||
align="center" |
|||
> |
|||
<template #default="scope"> |
|||
{{ scope.row[scope.column.property] }} |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column |
|||
v-else-if="item.fieldClass == ''" |
|||
:prop="item.field" |
|||
:label="item.label" |
|||
:min-width="(item.label?.length || 2) * 15 + 30" |
|||
header-align="center" |
|||
sortable="custom" |
|||
align="center" |
|||
> |
|||
<template #default="scope"> |
|||
<template v-for="sunItem in item.children" v-if="item.pattern == 'table'"> |
|||
<el-table-column v-if="sunItem.fieldClass == ''" :prop="sunItem.field" :label="sunItem.label" header-align="center" align="center" :min-width="readerColumnSun(sunItem)"> |
|||
<template #default="scopeChilder"> |
|||
{{scopeChilder.row[item.field]}} |
|||
</template> |
|||
</el-table-column> |
|||
</template> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
|
|||
<el-table-column |
|||
v-else-if="item.fieldClass == '__control'" |
|||
:prop="item.field" |
|||
:label="item.label" |
|||
config="" |
|||
min-width="1" |
|||
header-align="center" |
|||
align="center" |
|||
fixed="right" |
|||
> |
|||
|
|||
</el-table-column> |
|||
|
|||
|
|||
<el-table-column |
|||
v-else |
|||
:prop="item.field" |
|||
:label="item.label" |
|||
config="" |
|||
:min-width="(item.label?.length || 2) * 15 + 30" |
|||
header-align="center" |
|||
sortable="custom" |
|||
align="center" |
|||
> |
|||
<template v-if="item.fieldClass == 'associatedForms'" #default="scope"> |
|||
<el-link |
|||
key="primary" |
|||
type="primary" |
|||
> |
|||
{{ scope.row[scope.column.property] }} |
|||
</el-link> |
|||
</template> |
|||
<template v-else #default="scope"> |
|||
{{ scope.row[scope.column.property] }} |
|||
</template> |
|||
|
|||
</el-table-column> |
|||
</template> |
|||
|
|||
</el-table> |
|||
</el-row> |
|||
<div class="pageBox"> |
|||
<el-pagination |
|||
v-model:current-page="props.searchSend.page" |
|||
v-model:page-size="pageSize" |
|||
:page-sizes="[3, 9, 12, 30, 50, 100]" |
|||
:background="true" |
|||
layout="total, sizes, prev, pager, next, jumper" |
|||
:total="totalNum" |
|||
class="page" |
|||
@size-change="handleSizeChange" |
|||
@current-change="handleCurrentChange" |
|||
/> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
|
|||
</style> |
|||
Loading…
Reference in new issue