10 changed files with 418 additions and 12 deletions
@ -0,0 +1,236 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 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) |
|||
|
|||
|
|||
//------------------ 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); |
|||
} |
|||
getPageData() |
|||
} |
|||
|
|||
|
|||
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=()=>{ |
|||
// by han2015: 处理排序字段信息 |
|||
let arr:string[]=[]; |
|||
columnSortData.forEach((value, key) => { |
|||
arr.push(`${key} ${value}`) |
|||
}); |
|||
|
|||
let sendData = props.searchSend |
|||
sendData.sortData= arr.join(", ") |
|||
sendData.pagesize = 50 |
|||
gainFormPageListCont(sendData) |
|||
.then(({data})=>{ |
|||
totalNum.value = data.total |
|||
tableDataList.value = data.list |
|||
}) |
|||
} |
|||
|
|||
const spanMethod = (data: { row: any; rowIndex: number; column: TableColumnCtx<any>; columnIndex: number; }) => { |
|||
if(data.rowIndex==1){ |
|||
console.log(data.column) |
|||
} |
|||
|
|||
} |
|||
|
|||
|
|||
onMounted(()=>{ |
|||
nextTick(()=>{ |
|||
getPageData() |
|||
}) |
|||
}) |
|||
|
|||
defineExpose({ |
|||
groupColumnSearch |
|||
}) |
|||
|
|||
</script> |
|||
<template> |
|||
<div> |
|||
<el-row :gutter="20"> |
|||
<el-table |
|||
:data="tableDataList" |
|||
:span-method="spanMethod" |
|||
@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" |
|||
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="90" |
|||
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