10 changed files with 560 additions and 24 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