104 lines
2.4 KiB
Vue
104 lines
2.4 KiB
Vue
|
<template>
|
|||
|
|
<ContentWrap>
|
|||
|
|
<div style="width: 100%; height: 500px">
|
|||
|
|
<el-auto-resizer>
|
|||
|
|
<template #default="{ height, width }">
|
|||
|
|
<el-table-v2 :columns="columns" :data="tableData" :width="width" :height="height" fixed />
|
|||
|
|
</template>
|
|||
|
|
</el-auto-resizer>
|
|||
|
|
<el-pagination
|
|||
|
|
:current-page="queryParms.pageNo"
|
|||
|
|
:page-size="queryParms.pageSize"
|
|||
|
|
layout="total, prev, pager, next"
|
|||
|
|
:total="tableTotal"
|
|||
|
|
@size-change="getList"
|
|||
|
|
@current-change="getList"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</ContentWrap>
|
|||
|
|
</template>
|
|||
|
|
<script setup lang="ts">
|
|||
|
|
import { Column, TableV2FixedDir } from 'element-plus'
|
|||
|
|
import * as NoticeApi from '@/api/system/notice'
|
|||
|
|
import { XTextButton } from '@/components/XButton'
|
|||
|
|
const { t } = useI18n() // 国际化
|
|||
|
|
|
|||
|
|
const columns: Column<any>[] = [
|
|||
|
|
{
|
|||
|
|
key: 'id',
|
|||
|
|
dataKey: 'id', //需要渲染当前列的数据字段，如{id:9527,name:'Mike'}，则填id
|
|||
|
|
title: 'id', //显示在单元格表头的文本
|
|||
|
|
width: 80, //当前列的宽度，必须设置
|
|||
|
|
fixed: true //是否固定列
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
key: 'title',
|
|||
|
|
dataKey: 'title',
|
|||
|
|
title: '公告标题',
|
|||
|
|
width: 180
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
key: 'type',
|
|||
|
|
dataKey: 'type',
|
|||
|
|
title: '公告类型',
|
|||
|
|
width: 180
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
key: 'status',
|
|||
|
|
dataKey: 'status',
|
|||
|
|
title: t('common.status'),
|
|||
|
|
width: 180
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
key: 'content',
|
|||
|
|
dataKey: 'content',
|
|||
|
|
title: '公告内容',
|
|||
|
|
width: 180
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
key: 'createTime',
|
|||
|
|
dataKey: 'createTime',
|
|||
|
|
title: t('common.createTime'),
|
|||
|
|
width: 180
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
key: 'actionbtns',
|
|||
|
|
dataKey: 'actionbtns', //需要渲染当前列的数据字段，如{id:9527,name:'Mike'}，则填id
|
|||
|
|
title: '操作', //显示在单元格表头的文本
|
|||
|
|
width: 80, //当前列的宽度，必须设置
|
|||
|
|
fixed: TableV2FixedDir.RIGHT, //是否固定列
|
|||
|
|
align: 'center',
|
|||
|
|
cellRenderer: (date) =>
|
|||
|
|
h(XTextButton, {
|
|||
|
|
onClick: () => handleDelete(date.rowData),
|
|||
|
|
type: 'danger',
|
|||
|
|
preIcon: 'ep:delete',
|
|||
|
|
title: t('action.del')
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
const tableData = ref([])
|
|||
|
|
|
|||
|
|
const tableTotal = ref(0)
|
|||
|
|
|
|||
|
|
const queryParms = reactive({
|
|||
|
|
title: '',
|
|||
|
|
status: undefined,
|
|||
|
|
pageNo: 1,
|
|||
|
|
pageSize: 10
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const getList = async () => {
|
|||
|
|
const res = await NoticeApi.getNoticePageApi(queryParms)
|
|||
|
|
tableData.value = res.list
|
|||
|
|
tableTotal.value = res.total
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const handleDelete = (row) => {
|
|||
|
|
console.info(row.id)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
getList()
|
|||
|
|
</script>
|