mod: 修改table示例的写法
This commit is contained in:
张传龙
parent
21e0d86fcd
commit
c268b3c75d
@ -19,75 +19,26 @@
|
||||
<script setup>
|
||||
import { ref, onBeforeMount } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
import { getTableData, createColumns } from './post-table'
|
||||
import { usePostTable } from './usePostTable'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
// 静态变量
|
||||
const columns = createColumns({
|
||||
handleDelete,
|
||||
handleRecommend,
|
||||
handlePublish,
|
||||
})
|
||||
const pagination = ref({ pageSize: 10 })
|
||||
const { loading, columns, tableData, initColumns, initTableData } = usePostTable()
|
||||
|
||||
// refs
|
||||
let tableData = ref([])
|
||||
let pagination = ref({ pageSize: 10 })
|
||||
let loading = ref(false)
|
||||
|
||||
// 钩子函数
|
||||
onBeforeMount(() => {
|
||||
initColumns()
|
||||
initTableData()
|
||||
})
|
||||
|
||||
// fns
|
||||
async function initTableData() {
|
||||
loading.value = true
|
||||
tableData.value = await getTableData()
|
||||
loading.value = false
|
||||
}
|
||||
|
||||
function handleCreate() {
|
||||
router.push('/example/table/post-create')
|
||||
}
|
||||
|
||||
function handleDelete(row) {
|
||||
if (row && row.id) {
|
||||
$dialog.confirm({
|
||||
content: '确定删除？',
|
||||
confirm() {
|
||||
$message.success('删除成功')
|
||||
initTableData()
|
||||
},
|
||||
cancel() {
|
||||
$message.success('已取消')
|
||||
},
|
||||
})
|
||||
}
|
||||
function handleCheck(rowKeys) {
|
||||
$message.info(`选中${rowKeys.join(' ')}`)
|
||||
}
|
||||
|
||||
async function handleRecommend(row) {
|
||||
if (row && row.id) {
|
||||
row.recommending = true
|
||||
setTimeout(() => {
|
||||
$message.success(row.isRecommend ? '已取消推荐' : '已推荐')
|
||||
row.recommending = false
|
||||
}, 800)
|
||||
}
|
||||
}
|
||||
|
||||
async function handlePublish(row) {
|
||||
if (row && row.id) {
|
||||
row.publishing = true
|
||||
setTimeout(() => {
|
||||
$message.success(row.isPublish ? '已取消推荐' : '已推荐')
|
||||
row.publishing = false
|
||||
}, 800)
|
||||
}
|
||||
}
|
||||
|
||||
function handleCheck(rowKeys) {}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -1,99 +0,0 @@
|
||||
import { h } from 'vue'
|
||||
import { NButton, NSwitch } from 'naive-ui'
|
||||
import { getPosts } from '@/api/post'
|
||||
import { formatDateTime } from '@/utils'
|
||||
|
||||
export async function getTableData() {
|
||||
try {
|
||||
const res = await getPosts()
|
||||
if (res.code === 0) {
|
||||
return res.data
|
||||
}
|
||||
console.warn(res.message)
|
||||
return []
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
return []
|
||||
}
|
||||
}
|
||||
|
||||
export function createColumns({ handleDelete, handleRecommend, handlePublish }) {
|
||||
return [
|
||||
{ type: 'selection' },
|
||||
{ title: '标题', key: 'title', width: 150 },
|
||||
{ title: '分类', key: 'category', width: 80 },
|
||||
{
|
||||
title: '描述',
|
||||
key: 'description',
|
||||
width: 200,
|
||||
},
|
||||
{ title: '创建人', key: 'author', width: 80 },
|
||||
{
|
||||
title: '创建时间',
|
||||
key: 'createDate',
|
||||
width: 150,
|
||||
render(row) {
|
||||
return h('span', formatDateTime(row['createDate']))
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '最后更新时间',
|
||||
key: 'updateDate',
|
||||
width: 150,
|
||||
render(row) {
|
||||
return h('span', formatDateTime(row['updateDate']))
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '推荐',
|
||||
key: 'isRecommend',
|
||||
width: 100,
|
||||
align: 'center',
|
||||
fixed: 'right',
|
||||
render(row) {
|
||||
return h(NSwitch, {
|
||||
size: 'small',
|
||||
defaultValue: row['isRecommend'],
|
||||
loading: !!row.recommending,
|
||||
onUpdateValue: () => handleRecommend(row),
|
||||
})
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '发布',
|
||||
key: 'isPublish',
|
||||
width: 100,
|
||||
align: 'center',
|
||||
fixed: 'right',
|
||||
render(row) {
|
||||
return h(NSwitch, {
|
||||
size: 'small',
|
||||
defaultValue: row['isPublish'],
|
||||
loading: !!row.publishing,
|
||||
onUpdateValue: () => handlePublish(row),
|
||||
})
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'actions',
|
||||
width: 120,
|
||||
align: 'center',
|
||||
fixed: 'right',
|
||||
render(row) {
|
||||
return [
|
||||
h(
|
||||
NButton,
|
||||
{
|
||||
size: 'small',
|
||||
type: 'error',
|
||||
style: 'margin-left: 15px;',
|
||||
onClick: () => handleDelete(row),
|
||||
},
|
||||
{ default: () => '删除' }
|
||||
),
|
||||
]
|
||||
},
|
||||
},
|
||||
]
|
||||
}
|
||||
155
src/views/examples/table/post/usePostTable.js
Normal file
155
src/views/examples/table/post/usePostTable.js
Normal file
@ -0,0 +1,155 @@
|
||||
import { h, ref } from 'vue'
|
||||
import { NButton, NSwitch } from 'naive-ui'
|
||||
import { getPosts } from '@/api/post'
|
||||
import { formatDateTime } from '@/utils'
|
||||
|
||||
export const usePostTable = () => {
|
||||
// refs
|
||||
const loading = ref(false)
|
||||
const tableData = ref([])
|
||||
const columns = ref([])
|
||||
|
||||
async function initTableData() {
|
||||
loading.value = true
|
||||
tableData.value = await getTableData()
|
||||
loading.value = false
|
||||
}
|
||||
|
||||
function handleDelete(row) {
|
||||
if (row && row.id) {
|
||||
$dialog.confirm({
|
||||
content: '确定删除？',
|
||||
confirm() {
|
||||
$message.success('删除成功')
|
||||
initTableData()
|
||||
},
|
||||
cancel() {
|
||||
$message.success('已取消')
|
||||
},
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
async function handleRecommend(row) {
|
||||
if (row && row.id) {
|
||||
row.recommending = true
|
||||
setTimeout(() => {
|
||||
$message.success(row.isRecommend ? '已取消推荐' : '已推荐')
|
||||
row.recommending = false
|
||||
}, 800)
|
||||
}
|
||||
}
|
||||
|
||||
async function handlePublish(row) {
|
||||
if (row && row.id) {
|
||||
row.publishing = true
|
||||
setTimeout(() => {
|
||||
$message.success(row.isPublish ? '已取消推荐' : '已推荐')
|
||||
row.publishing = false
|
||||
}, 800)
|
||||
}
|
||||
}
|
||||
|
||||
function initColumns() {
|
||||
columns.value = [
|
||||
{ type: 'selection' },
|
||||
{ title: '标题', key: 'title', width: 150 },
|
||||
{ title: '分类', key: 'category', width: 80 },
|
||||
{
|
||||
title: '描述',
|
||||
key: 'description',
|
||||
width: 200,
|
||||
},
|
||||
{ title: '创建人', key: 'author', width: 80 },
|
||||
{
|
||||
title: '创建时间',
|
||||
key: 'createDate',
|
||||
width: 150,
|
||||
render(row) {
|
||||
return h('span', formatDateTime(row['createDate']))
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '最后更新时间',
|
||||
key: 'updateDate',
|
||||
width: 150,
|
||||
render(row) {
|
||||
return h('span', formatDateTime(row['updateDate']))
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '推荐',
|
||||
key: 'isRecommend',
|
||||
width: 100,
|
||||
align: 'center',
|
||||
fixed: 'right',
|
||||
render(row) {
|
||||
return h(NSwitch, {
|
||||
size: 'small',
|
||||
defaultValue: row['isRecommend'],
|
||||
loading: !!row.recommending,
|
||||
onUpdateValue: () => handleRecommend(row),
|
||||
})
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '发布',
|
||||
key: 'isPublish',
|
||||
width: 100,
|
||||
align: 'center',
|
||||
fixed: 'right',
|
||||
render(row) {
|
||||
return h(NSwitch, {
|
||||
size: 'small',
|
||||
defaultValue: row['isPublish'],
|
||||
loading: !!row.publishing,
|
||||
onUpdateValue: () => handlePublish(row),
|
||||
})
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'actions',
|
||||
width: 120,
|
||||
align: 'center',
|
||||
fixed: 'right',
|
||||
render(row) {
|
||||
return [
|
||||
h(
|
||||
NButton,
|
||||
{
|
||||
size: 'small',
|
||||
type: 'error',
|
||||
style: 'margin-left: 15px;',
|
||||
onClick: () => handleDelete(row),
|
||||
},
|
||||
{ default: () => '删除' }
|
||||
),
|
||||
]
|
||||
},
|
||||
},
|
||||
]
|
||||
}
|
||||
|
||||
async function getTableData() {
|
||||
try {
|
||||
const res = await getPosts()
|
||||
if (res.code === 0) {
|
||||
return res.data
|
||||
}
|
||||
console.warn(res.message)
|
||||
return []
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
return []
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
loading,
|
||||
columns,
|
||||
tableData,
|
||||
initColumns,
|
||||
initTableData,
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user