wip: crud table

This commit is contained in:
张传龙 2022-09-01 14:53:18 +08:00
parent 9ea8ffd7fd
commit f2e2fc6819
4 changed files with 330 additions and 98 deletions

View File

@ -1,17 +1,8 @@
export default [
const posts = [
{
url: '/api/posts',
method: 'get',
response: () => {
return {
code: 0,
message: 'ok',
data: [
{
id: 36,
title: '使用纯css优雅配置移动端rem布局',
author: 'Ronnie',
category: '移动端,Css',
author: '大脸怪',
category: 'Css',
description: '通常配置rem布局会使用js进行处理比如750的设计稿会这样...',
content: '通常配置rem布局会使用js进行处理比如750的设计稿会这样',
isRecommend: true,
@ -20,9 +11,8 @@ export default [
updateDate: '2021-11-04T04:03:36.000Z',
},
{
id: 35,
title: 'Vue2&Vue3项目风格指南',
author: 'Ronnie',
author: '大脸怪',
category: 'Vue',
description: '总结的Vue2和Vue3的项目风格',
content: '### 1. 命名风格\n\n> 文件夹如果是由多个单词组成,应该始终是横线连接 ',
@ -32,7 +22,6 @@ export default [
updateDate: '2022-02-28T04:02:39.000Z',
},
{
id: 28,
title: '如何优雅的给图片添加水印',
author: '大脸怪',
category: 'JavaScript',
@ -45,7 +34,6 @@ export default [
},
{
id: 26,
title: '前端缓存的理解',
author: '大脸怪',
category: 'Http',
@ -57,7 +45,6 @@ export default [
updateDate: '2021-09-17T09:33:24.000Z',
},
{
id: 18,
title: 'Promise的五个静态方法',
author: '大脸怪',
category: 'JavaScript',
@ -68,7 +55,37 @@ export default [
createDate: '2021-02-22T22:37:06.000Z',
updateDate: '2021-09-17T09:33:24.000Z',
},
],
]
export default [
{
url: '/api/posts',
method: 'get',
response: (data = {}) => {
const { title, pageNo, pageSize } = data.query
let pageData = []
let total = 60
const filterData = posts.filter((item) => item.title.includes(title))
if (filterData.length) {
while (pageData.length < pageSize) {
pageData.push(filterData[Math.round(Math.random() * (filterData.length - 1))])
}
pageData = pageData.map((item, index) => ({
id: pageSize * (pageNo - 1) + index + 1,
...item,
}))
} else {
total = 0
}
return {
code: 0,
message: 'ok',
data: {
pageData,
total,
pageNo,
pageSize,
},
}
},
},

View File

@ -5,8 +5,12 @@
</n-space>
<div flex-shrink-0>
<n-button secondary type="primary">重置</n-button>
<n-button ml-20 type="primary">搜索</n-button>
<n-button secondary type="primary" @click="emit('reset')">重置</n-button>
<n-button ml-20 type="primary" @click="emit('search')">搜索</n-button>
</div>
</div>
</template>
<script setup>
const emit = defineEmits(['search', 'reset'])
</script>

View File

@ -1,16 +1,106 @@
<template>
<QueryBar v-if="$slots.queryBar" mb-30>
<QueryBar v-if="$slots.queryBar" mb-30 @search="handleSearch" @reset="handleReset">
<slot name="queryBar" />
</QueryBar>
<slot />
<n-data-table
:remote="remote"
:loading="loading"
:scroll-x="scrollX"
:columns="columns"
:data="tableData"
:row-key="(row) => row[rowKey]"
:pagination="isPagination ? pagination : false"
@update:checked-row-keys="onChecked"
@update:page="onPageChange"
/>
</template>
<script setup>
const props = defineProps({
/**
* @remote true: 后端分页 false 前端分页
*/
remote: {
type: Boolean,
default: true,
},
/**
* @remote 是否分页
*/
isPagination: {
type: Boolean,
default: true,
},
scrollX: {
type: Number,
default: 1200,
},
rowKey: {
type: String,
default: 'id',
},
columns: {
type: Array,
required: true,
},
queryForm: {
type: Object,
required: true,
},
getData: {
type: Function,
required: true,
},
})
const emit = defineEmits(['update:queryForm', 'onChecked'])
const loading = ref(false)
const initQuery = { ...props.queryForm }
const tableData = ref([])
const showModal = ref(true)
const segmented = {
content: 'soft',
footer: 'soft',
const pagination = reactive({ page: 1, pageSize: 10, itemCount: 100 })
async function handleQuery(extraParams = {}) {
try {
loading.value = true
const res = await props.getData(
{ ...props.queryForm, ...extraParams },
{ pageNo: pagination.page, pageSize: pagination.pageSize }
)
tableData.value = res?.pageData || res
pagination.itemCount = res.total ?? res.length
} catch (error) {
tableData.value = []
pagination.itemCount = 0
$message.error(error.message)
} finally {
loading.value = false
}
}
function handleSearch() {
pagination.page = 1
handleQuery()
}
async function handleReset() {
emit('update:queryForm', { ...initQuery })
await nextTick()
pagination.page = 1
handleQuery()
}
function onChecked(rowKeys) {
if (props.columns.some((item) => item.type === 'selection')) {
emit('onChecked', rowKeys)
}
}
function onPageChange(currentPage) {
pagination.page = currentPage
if (props.remote) {
handleQuery()
}
}
defineExpose({
handleSearch,
handleReset,
})
</script>

View File

@ -6,51 +6,172 @@
</n-button>
</template>
<CrudTable>
<CrudTable
ref="$table"
v-model:query-form="queryForm"
:scroll-x="1600"
:columns="columns"
:get-data="getTableData"
@on-checked="onChecked"
>
<template #queryBar>
<QueryBarItem label="标题" :label-width="50">
<n-input v-model:value="queryForm.title" type="text" placeholder="请输入标题" />
</QueryBarItem>
</template>
<n-data-table
:loading="loading"
:scroll-x="1600"
:data="tableData.filter((item) => item.title.includes(queryForm.title))"
:columns="columns"
:pagination="pagination"
:row-key="(row) => row.id"
@update:checked-row-keys="handleCheck"
/>
</CrudTable>
<!-- 新增/编辑/查看 -->
<CrudModal v-model:visible="modalVisible" :title="modalTitle" @on-save="handleSave"> 内容 </CrudModal>
</CrudTable>
</CommonPage>
</template>
<script setup>
import { usePostTable } from './usePostTable'
import { NButton, NSwitch } from 'naive-ui'
import { formatDateTime } from '@/utils'
import { renderIcon } from '@/utils/icon'
import api from './api'
const queryForm = reactive({
const $table = ref(null)
const queryForm = ref({
title: '',
})
async function getTableData(query = {}, pagination = {}) {
const { pageSize = 10, pageNo = 1 } = pagination
try {
// * pagination
const res = await api.getPosts({ ...query, pageSize, pageNo })
if (res.code === 0) {
return Promise.resolve(res.data)
}
} catch (error) {
return Promise.reject(error)
}
}
//
function onChecked(rowKeys) {
if (rowKeys.length) $message.info(`选中${rowKeys.join(' ')}`)
}
const columns = [
{ type: 'selection' },
{ title: '标题', key: 'title', width: 150, ellipsis: { tooltip: true } },
{ title: '分类', key: 'category', width: 80, ellipsis: { tooltip: true } },
{
title: '描述',
key: 'description',
width: 200,
ellipsis: { tooltip: true },
},
{ 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: 120,
align: 'center',
fixed: 'right',
render(row) {
return h(NSwitch, {
size: 'small',
value: row['isRecommend'],
rubberBand: false,
loading: !!row.recommending,
onUpdateValue: () => handleRecommend(row),
})
},
},
{
title: '发布',
key: 'isPublish',
width: 120,
align: 'center',
fixed: 'right',
render(row) {
return h(NSwitch, {
size: 'small',
rubberBand: false,
value: row['isPublish'],
loading: !!row.publishing,
onUpdateValue: () => handlePublish(row),
})
},
},
{
title: '操作',
key: 'actions',
width: 200,
align: 'center',
fixed: 'right',
render(row) {
return [
h(
NButton,
{
size: 'small',
type: 'primary',
onClick: () => handleEdit(row),
},
{ default: () => '编辑', icon: renderIcon('material-symbols:edit-outline', { size: 14 }) }
),
h(
NButton,
{
size: 'small',
type: 'error',
style: 'margin-left: 15px;',
onClick: () => handleDelete(row),
},
{ default: () => '删除', icon: renderIcon('material-symbols:delete-outline', { size: 14 }) }
),
]
},
},
]
onMounted(() => {
$table.value?.handleSearch()
})
const modalVisible = ref(false)
const modalTitle = ref('新增文章')
const pagination = reactive({ pageSize: 10 })
const { loading, columns, tableData, initColumns, initTableData } = usePostTable()
onBeforeMount(() => {
initColumns()
function handleDelete(row) {
if (row && row.id) {
$dialog.confirm({
content: '确定删除?',
confirm() {
$message.success('删除成功')
initTableData()
},
cancel() {
$message.success('已取消')
},
})
}
}
function handleEdit(row) {
modalTitle.value = '编辑文章'
modalVisible.value = true
}
function handleSave() {
modalVisible.value = false
}
function handleCheck(rowKeys) {
if (rowKeys.length) $message.info(`选中${rowKeys.join(' ')}`)
}
</script>