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