refactor(components): 重构表单和表格组件并更新相关引用
feat(components): 新增scForm和scTable组件替代DynamicForm feat(pages): 添加用户管理页面到auth模块 chore(deps): 调整package.json依赖项顺序并添加vue-eslint-parser
This commit is contained in:
350
src/components/scTable/index.vue
Normal file
350
src/components/scTable/index.vue
Normal file
@@ -0,0 +1,350 @@
|
||||
<template>
|
||||
<div class="sc-table-wrapper">
|
||||
<!-- 表格操作栏 -->
|
||||
<div class="table-toolbar" v-if="showToolbar">
|
||||
<div class="toolbar-left">
|
||||
<slot name="toolbar-left"></slot>
|
||||
</div>
|
||||
<div class="toolbar-right">
|
||||
<!-- 列设置 -->
|
||||
<a-dropdown v-if="showColumnSetting" :trigger="['click']">
|
||||
<a-button size="small">
|
||||
<SettingOutlined /> 列设置
|
||||
</a-button>
|
||||
<template #overlay>
|
||||
<a-menu @click="handleColumnSetting">
|
||||
<a-menu-item v-for="column in columns" :key="column.key || column.dataIndex">
|
||||
<a-checkbox :checked="visibleColumns.includes(column.key || column.dataIndex)">
|
||||
{{ column.title }}
|
||||
</a-checkbox>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
|
||||
<!-- 刷新按钮 -->
|
||||
<a-button v-if="showRefresh" size="small" @click="handleRefresh">
|
||||
<ReloadOutlined />
|
||||
</a-button>
|
||||
|
||||
<slot name="toolbar-right"></slot>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 表格主体 -->
|
||||
<a-table v-bind="tableProps" :columns="processedColumns" :data-source="dataSource"
|
||||
:pagination="paginationConfig" :loading="loading" :row-selection="rowSelectionConfig" :scroll="scrollConfig"
|
||||
@change="handleTableChange" @row="handleRow" @row-click="handleRowClick" @row-dblclick="handleRowDblClick">
|
||||
<!-- 自定义列插槽将通过customRender在processedColumns中处理 -->
|
||||
|
||||
<!-- 操作列插槽 -->
|
||||
<template v-if="showActionColumn" #action="scope">
|
||||
<slot name="action" v-bind="scope"></slot>
|
||||
</template>
|
||||
|
||||
<!-- 空数据提示 -->
|
||||
<template #empty>
|
||||
<a-empty v-if="!error" :description="emptyText" />
|
||||
<div v-else class="table-error">
|
||||
<span>{{ errorMessage }}</span>
|
||||
<a-button size="small" type="link" @click="handleRefresh">重试</a-button>
|
||||
</div>
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import { SettingOutlined, ReloadOutlined } from '@ant-design/icons-vue'
|
||||
|
||||
const props = defineProps({
|
||||
// 表格列配置
|
||||
columns: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
required: true,
|
||||
},
|
||||
|
||||
// 数据源
|
||||
dataSource: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
|
||||
// 加载状态
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
|
||||
// 错误状态
|
||||
error: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
|
||||
// 错误信息
|
||||
errorMessage: {
|
||||
type: String,
|
||||
default: '加载失败，请稍后重试',
|
||||
},
|
||||
|
||||
// 空数据提示
|
||||
emptyText: {
|
||||
type: String,
|
||||
default: '暂无数据',
|
||||
},
|
||||
|
||||
// 分页配置
|
||||
pagination: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
showSizeChanger: true,
|
||||
pageSizeOptions: ['10', '20', '50', '100'],
|
||||
showTotal: (total, range) => `共 ${total} 条记录，第 ${range[0]}-${range[1]} 条`,
|
||||
}),
|
||||
},
|
||||
|
||||
// 是否显示分页
|
||||
showPagination: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
|
||||
// 行选择配置
|
||||
rowSelection: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
type: 'checkbox',
|
||||
selectedRowKeys: [],
|
||||
onChange: () => { },
|
||||
}),
|
||||
},
|
||||
|
||||
// 是否显示行选择
|
||||
showRowSelection: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
|
||||
// 滚动配置
|
||||
scroll: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
|
||||
// 表格属性
|
||||
tableProps: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
|
||||
// 操作列配置
|
||||
actionColumn: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 150,
|
||||
fixed: 'right',
|
||||
}),
|
||||
},
|
||||
|
||||
// 是否显示操作列
|
||||
showActionColumn: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
|
||||
// 是否显示工具栏
|
||||
showToolbar: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
|
||||
// 是否显示列设置
|
||||
showColumnSetting: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
|
||||
// 是否显示刷新按钮
|
||||
showRefresh: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
|
||||
// 可见列配置
|
||||
visibleColumns: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
})
|
||||
|
||||
const emit = defineEmits(['change', 'row-click', 'row-dblclick', 'refresh', 'column-change', 'selection-change', 'page-change', 'size-change', 'sort-change', 'filter-change'])
|
||||
|
||||
// 处理后的列配置
|
||||
const processedColumns = computed(() => {
|
||||
let result = [...props.columns]
|
||||
|
||||
// 过滤可见列
|
||||
if (props.visibleColumns.length > 0) {
|
||||
result = result.filter((column) => props.visibleColumns.includes(column.key || column.dataIndex))
|
||||
}
|
||||
|
||||
// 为每列添加customRender支持插槽
|
||||
result = result.map((column) => {
|
||||
const columnKey = column.key || column.dataIndex
|
||||
return {
|
||||
...column,
|
||||
customRender: (_, record, index) => {
|
||||
// 使用渲染函数返回空内容，实际内容通过插槽渲染
|
||||
return null
|
||||
},
|
||||
}
|
||||
})
|
||||
|
||||
// 添加操作列
|
||||
if (props.showActionColumn) {
|
||||
result.push({
|
||||
...props.actionColumn,
|
||||
customRender: (_, record, index) => {
|
||||
// 使用渲染函数返回空内容，实际内容通过插槽渲染
|
||||
return null
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
return result
|
||||
})
|
||||
|
||||
// 分页配置
|
||||
const paginationConfig = computed(() => {
|
||||
if (!props.showPagination) return false
|
||||
|
||||
return {
|
||||
...props.pagination,
|
||||
onChange: (page, pageSize) => {
|
||||
emit('page-change', page)
|
||||
emit('change', { current: page, pageSize })
|
||||
},
|
||||
onShowSizeChange: (current, pageSize) => {
|
||||
emit('size-change', pageSize)
|
||||
emit('change', { current, pageSize })
|
||||
},
|
||||
}
|
||||
})
|
||||
|
||||
// 行选择配置
|
||||
const rowSelectionConfig = computed(() => {
|
||||
if (!props.showRowSelection) return null
|
||||
|
||||
return {
|
||||
...props.rowSelection,
|
||||
onChange: (selectedRowKeys, selectedRows) => {
|
||||
emit('selection-change', selectedRowKeys, selectedRows)
|
||||
},
|
||||
}
|
||||
})
|
||||
|
||||
// 滚动配置
|
||||
const scrollConfig = computed(() => {
|
||||
return {
|
||||
...props.scroll,
|
||||
}
|
||||
})
|
||||
|
||||
// 处理表格变化
|
||||
const handleTableChange = (pagination, filters, sorter, extra) => {
|
||||
if (sorter.field) {
|
||||
emit('sort-change', sorter)
|
||||
}
|
||||
|
||||
if (Object.keys(filters).length > 0) {
|
||||
emit('filter-change', filters)
|
||||
}
|
||||
|
||||
emit('change', { pagination, filters, sorter, extra })
|
||||
}
|
||||
|
||||
// 处理行点击
|
||||
const handleRowClick = (record, event) => {
|
||||
emit('row-click', record, event)
|
||||
}
|
||||
|
||||
// 处理行双击
|
||||
const handleRowDblClick = (record, event) => {
|
||||
emit('row-dblclick', record, event)
|
||||
}
|
||||
|
||||
// 处理行配置
|
||||
const handleRow = (record) => {
|
||||
return {
|
||||
onClick: (event) => handleRowClick(record, event),
|
||||
onDblclick: (event) => handleRowDblClick(record, event),
|
||||
}
|
||||
}
|
||||
|
||||
// 处理列设置
|
||||
const handleColumnSetting = ({ key, domEvent }) => {
|
||||
const checkbox = domEvent.target.closest('.ant-checkbox-wrapper').querySelector('.ant-checkbox-input')
|
||||
const checked = checkbox.checked
|
||||
|
||||
emit('column-change', {
|
||||
key,
|
||||
visible: checked,
|
||||
})
|
||||
}
|
||||
|
||||
// 处理刷新
|
||||
const handleRefresh = () => {
|
||||
emit('refresh')
|
||||
}
|
||||
|
||||
// 暴露方法
|
||||
defineExpose({
|
||||
handleRefresh,
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.sc-table-wrapper {
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
|
||||
.table-toolbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
|
||||
.toolbar-left,
|
||||
.toolbar-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.table-error {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 40px 0;
|
||||
|
||||
.error-icon {
|
||||
font-size: 48px;
|
||||
color: #ff4d4f;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user