Revert "feat: 添加表格组件及模拟数据接口，支持分页和动态列渲染"
This commit is contained in:
xzz
GitHub
@@ -1,45 +1,8 @@
|
|||||||
import request from '@/axios'
|
import request from '@/axios'
|
||||||
import type { TableData } from './types'
|
import type { TableData } from './types'
|
||||||
|
|
||||||
interface Result {
|
export const getTableListApi = (params: any) => {
|
||||||
list: TableData[]
|
return request.get({ url: '/mock/example/list', params })
|
||||||
total: number
|
|
||||||
}
|
|
||||||
|
|
||||||
// 生成模拟数据的辅助函数
|
|
||||||
const generateMockData = (count: number): TableData[] => {
|
|
||||||
const stages = ['开发阶段', '测试阶段', '生产阶段', '验证阶段', '量产阶段']
|
|
||||||
const carTypes = ['SUV', '轿车', 'MPV', '跑车', '新能源']
|
|
||||||
const creators = ['张三', '李四', '王五', '赵六', '钱七']
|
|
||||||
|
|
||||||
return Array.from({ length: count }, (_, index) => ({
|
|
||||||
ProjectId: `PRJ${String(index + 1).padStart(3, '0')}`,
|
|
||||||
ProjectStage: stages[Math.floor(Math.random() * stages.length)],
|
|
||||||
CarType: carTypes[Math.floor(Math.random() * carTypes.length)],
|
|
||||||
Creator: creators[Math.floor(Math.random() * creators.length)],
|
|
||||||
CreateTime: new Date(Date.now() - Math.floor(Math.random() * 90) * 24 * 60 * 60 * 1000)
|
|
||||||
.toISOString()
|
|
||||||
.split('T')[0],
|
|
||||||
id: index + 1
|
|
||||||
}))
|
|
||||||
}
|
|
||||||
|
|
||||||
export const getTableListApi = (params: any): Promise<IResponse<Result>> => {
|
|
||||||
const mockData = generateMockData(100)
|
|
||||||
const { pageIndex = 1, pageSize = 10 } = params
|
|
||||||
const start = (pageIndex - 1) * pageSize
|
|
||||||
const end = start + pageSize
|
|
||||||
|
|
||||||
return Promise.resolve({
|
|
||||||
code: 0,
|
|
||||||
data: {
|
|
||||||
list: mockData.slice(start, end),
|
|
||||||
total: mockData.length
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
// 如果要切换到真实API，只需取消注释下面的代码
|
|
||||||
// return request.get({ url: '/mock/example/list', params })
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export const getCardTableListApi = (params: any) => {
|
export const getCardTableListApi = (params: any) => {
|
||||||
|
|||||||
@@ -1,8 +1,9 @@
|
|||||||
export interface TableData {
|
export type TableData = {
|
||||||
ProjectId: string
|
id: string
|
||||||
ProjectStage: string
|
author: string
|
||||||
CarType: string
|
title: string
|
||||||
Creator: string
|
content: string
|
||||||
CreateTime: string
|
importance: number
|
||||||
id?: number
|
display_time: string
|
||||||
|
pageviews: number
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,125 +1,20 @@
|
|||||||
<script setup lang="tsx">
|
<script setup lang="ts">
|
||||||
|
import { ElInput } from 'element-plus'
|
||||||
import { ContentWrap } from '@/components/ContentWrap'
|
import { ContentWrap } from '@/components/ContentWrap'
|
||||||
import { useI18n } from '@/hooks/web/useI18n'
|
import { useI18n } from '@/hooks/web/useI18n'
|
||||||
import { Table, TableColumn } from '@/components/Table'
|
|
||||||
import { getTableListApi } from '@/api/table'
|
|
||||||
import { TableData } from '@/api/table/types'
|
|
||||||
import { ref } from 'vue'
|
import { ref } from 'vue'
|
||||||
import { ElTag, ElPagination } from 'element-plus'
|
|
||||||
import { BaseButton } from '@/components/Button'
|
|
||||||
import TableColumns from './modules/TableColumn'
|
|
||||||
|
|
||||||
interface Params {
|
defineOptions({
|
||||||
pageIndex?: number
|
name: 'Menu2'
|
||||||
pageSize?: number
|
})
|
||||||
}
|
|
||||||
|
|
||||||
const { t } = useI18n()
|
const { t } = useI18n()
|
||||||
|
|
||||||
const columns: TableColumn[] = [
|
const text = ref('')
|
||||||
...TableColumns,
|
|
||||||
{
|
|
||||||
field: 'action',
|
|
||||||
label: '操作',
|
|
||||||
slots: {
|
|
||||||
default: (data) => {
|
|
||||||
return (
|
|
||||||
<div class="flex gap-2">
|
|
||||||
<BaseButton type="primary" onClick={() => actionFn(data)}>
|
|
||||||
操作
|
|
||||||
</BaseButton>
|
|
||||||
<BaseButton type="danger" onClick={() => handleDelete(data)}>
|
|
||||||
删除
|
|
||||||
</BaseButton>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
|
|
||||||
const loading = ref(true)
|
|
||||||
|
|
||||||
const tableDataList = ref<TableData[]>([])
|
|
||||||
|
|
||||||
// 分页相关数据
|
|
||||||
const currentPage = ref(1)
|
|
||||||
const pageSize = ref(10)
|
|
||||||
const total = ref(0)
|
|
||||||
|
|
||||||
const getTableList = async (params?: Params) => {
|
|
||||||
loading.value = true
|
|
||||||
const res = await getTableListApi(
|
|
||||||
params || {
|
|
||||||
pageIndex: currentPage.value,
|
|
||||||
pageSize: pageSize.value
|
|
||||||
}
|
|
||||||
)
|
|
||||||
.catch(() => {})
|
|
||||||
.finally(() => {
|
|
||||||
loading.value = false
|
|
||||||
})
|
|
||||||
if (res) {
|
|
||||||
tableDataList.value = res.data.list
|
|
||||||
total.value = res.data.total // 设置总数
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 分页方法
|
|
||||||
const handleSizeChange = (val: number) => {
|
|
||||||
pageSize.value = val
|
|
||||||
getTableList()
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleCurrentChange = (val: number) => {
|
|
||||||
currentPage.value = val
|
|
||||||
getTableList()
|
|
||||||
}
|
|
||||||
|
|
||||||
// 初始加载
|
|
||||||
getTableList()
|
|
||||||
|
|
||||||
const actionFn = (data: any) => {
|
|
||||||
console.log(data)
|
|
||||||
}
|
|
||||||
|
|
||||||
// 添加删除方法
|
|
||||||
const handleDelete = (data: any) => {
|
|
||||||
console.log('删除', data)
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<ContentWrap :title="t('tableDemo.table')" :message="t('tableDemo.tableDes')">
|
<ContentWrap :title="t('levelDemo.menu')">
|
||||||
<div class="table-container">
|
<div class="flex items-center"> Menu2: <ElInput v-model="text" class="pl-20px" /> </div>
|
||||||
<Table
|
|
||||||
:columns="columns"
|
|
||||||
:data="tableDataList"
|
|
||||||
:loading="loading"
|
|
||||||
:defaultSort="{ prop: 'display_time', order: 'descending' }"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div class="pagination-container">
|
|
||||||
<el-pagination
|
|
||||||
v-model:current-page="currentPage"
|
|
||||||
v-model:page-size="pageSize"
|
|
||||||
:page-sizes="[10, 20, 50, 100]"
|
|
||||||
:total="total"
|
|
||||||
layout="total, sizes, prev, pager, next, jumper"
|
|
||||||
@size-change="handleSizeChange"
|
|
||||||
@current-change="handleCurrentChange"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</ContentWrap>
|
</ContentWrap>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
|
||||||
.table-container {
|
|
||||||
.pagination-container {
|
|
||||||
margin-top: 20px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
@@ -1,26 +0,0 @@
|
|||||||
import { ElTag } from 'element-plus'
|
|
||||||
|
|
||||||
const columns = [
|
|
||||||
{
|
|
||||||
field: 'ProjectId',
|
|
||||||
label: '項目ID'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
field: 'ProjectStage',
|
|
||||||
label: '項目階段'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
field: 'CarType',
|
|
||||||
label: '車輛類型'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
field: 'Creator',
|
|
||||||
label: '創建人'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
field: 'CreateTime',
|
|
||||||
label: '創建時間'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
|
|
||||||
export default columns
|
|
||||||
@@ -1,105 +0,0 @@
|
|||||||
<script setup lang="tsx">
|
|
||||||
import { ContentWrap } from '@/components/ContentWrap'
|
|
||||||
import { useI18n } from '@/hooks/web/useI18n'
|
|
||||||
import { Table, TableColumn } from '@/components/Table'
|
|
||||||
import { getTableListApi } from '@/api/table'
|
|
||||||
import { TableData } from '@/api/table/types'
|
|
||||||
import { ref, h } from 'vue'
|
|
||||||
import { ElTag } from 'element-plus'
|
|
||||||
import { BaseButton } from '@/components/Button'
|
|
||||||
|
|
||||||
interface Params {
|
|
||||||
pageIndex?: number
|
|
||||||
pageSize?: number
|
|
||||||
}
|
|
||||||
|
|
||||||
const { t } = useI18n()
|
|
||||||
|
|
||||||
const columns: TableColumn[] = [
|
|
||||||
{
|
|
||||||
field: 'title',
|
|
||||||
label: t('tableDemo.title')
|
|
||||||
},
|
|
||||||
{
|
|
||||||
field: 'author',
|
|
||||||
label: t('tableDemo.author')
|
|
||||||
},
|
|
||||||
{
|
|
||||||
field: 'display_time',
|
|
||||||
label: t('tableDemo.displayTime'),
|
|
||||||
sortable: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
field: 'importance',
|
|
||||||
label: t('tableDemo.importance'),
|
|
||||||
formatter: (_: Recordable, __: TableColumn, cellValue: number) => {
|
|
||||||
return h(
|
|
||||||
ElTag,
|
|
||||||
{
|
|
||||||
type: cellValue === 1 ? 'success' : cellValue === 2 ? 'warning' : 'danger'
|
|
||||||
},
|
|
||||||
() =>
|
|
||||||
cellValue === 1
|
|
||||||
? t('tableDemo.important')
|
|
||||||
: cellValue === 2
|
|
||||||
? t('tableDemo.good')
|
|
||||||
: t('tableDemo.commonly')
|
|
||||||
)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
field: 'pageviews',
|
|
||||||
label: t('tableDemo.pageviews')
|
|
||||||
},
|
|
||||||
{
|
|
||||||
field: 'action',
|
|
||||||
label: t('tableDemo.action'),
|
|
||||||
slots: {
|
|
||||||
default: (data) => {
|
|
||||||
return (
|
|
||||||
<BaseButton type="primary" onClick={() => actionFn(data)}>
|
|
||||||
{t('tableDemo.action')}
|
|
||||||
</BaseButton>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
|
|
||||||
const loading = ref(true)
|
|
||||||
|
|
||||||
const tableDataList = ref<TableData[]>([])
|
|
||||||
|
|
||||||
const getTableList = async (params?: Params) => {
|
|
||||||
const res = await getTableListApi(
|
|
||||||
params || {
|
|
||||||
pageIndex: 1,
|
|
||||||
pageSize: 10
|
|
||||||
}
|
|
||||||
)
|
|
||||||
.catch(() => {})
|
|
||||||
.finally(() => {
|
|
||||||
loading.value = false
|
|
||||||
})
|
|
||||||
if (res) {
|
|
||||||
tableDataList.value = res.data.list
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
getTableList()
|
|
||||||
|
|
||||||
const actionFn = (data: any) => {
|
|
||||||
console.log(data)
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<ContentWrap :title="t('tableDemo.table')" :message="t('tableDemo.tableDes')">
|
|
||||||
<Table
|
|
||||||
:columns="columns"
|
|
||||||
:data="tableDataList"
|
|
||||||
:loading="loading"
|
|
||||||
:defaultSort="{ prop: 'display_time', order: 'descending' }"
|
|
||||||
/>
|
|
||||||
</ContentWrap>
|
|
||||||
</template>
|
|
||||||
Reference in New Issue
Block a user