327 lines
7.7 KiB
Vue
327 lines
7.7 KiB
Vue
|
<template>
|
|||
|
|
<div class="container">
|
|||
|
|
<Breadcrumb :items="['menu.list', '公共组件Demo']" />
|
|||
|
|
|
|||
|
|
<!-- 使用 SearchTable 公共组件 -->
|
|||
|
|
<SearchTable
|
|||
|
|
:form-model="formModel"
|
|||
|
|
:form-items="formItems"
|
|||
|
|
:data="tableData"
|
|||
|
|
:columns="columns"
|
|||
|
|
:loading="loading"
|
|||
|
|
:pagination="pagination"
|
|||
|
|
title="公共组件演示"
|
|||
|
|
search-button-text="查询"
|
|||
|
|
reset-button-text="重置"
|
|||
|
|
download-button-text="导出"
|
|||
|
|
refresh-tooltip-text="刷新数据"
|
|||
|
|
density-tooltip-text="表格密度"
|
|||
|
|
column-setting-tooltip-text="列设置"
|
|||
|
|
@search="handleSearch"
|
|||
|
|
@reset="handleReset"
|
|||
|
|
@page-change="handlePageChange"
|
|||
|
|
@refresh="handleRefresh"
|
|||
|
|
@download="handleDownload"
|
|||
|
|
>
|
|||
|
|
<!-- 工具栏左侧按钮 -->
|
|||
|
|
<template #toolbar-left>
|
|||
|
|
<a-button type="primary" @click="handleAdd">
|
|||
|
|
<template #icon>
|
|||
|
|
<icon-plus />
|
|||
|
|
</template>
|
|||
|
|
新增
|
|||
|
|
</a-button>
|
|||
|
|
<a-button status="success" @click="handleBatchDelete">
|
|||
|
|
<template #icon>
|
|||
|
|
<icon-delete />
|
|||
|
|
</template>
|
|||
|
|
批量删除
|
|||
|
|
</a-button>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<!-- 表格自定义列：序号 -->
|
|||
|
|
<template #index="{ rowIndex }">
|
|||
|
|
{{ rowIndex + 1 + (pagination.current - 1) * pagination.pageSize }}
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<!-- 表格自定义列：状态 -->
|
|||
|
|
<template #status="{ record }">
|
|||
|
|
<a-tag :color="record.status === 'active' ? 'green' : 'red'">
|
|||
|
|
{{ record.status === 'active' ? '启用' : '禁用' }}
|
|||
|
|
</a-tag>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<!-- 表格自定义列：头像 -->
|
|||
|
|
<template #avatar="{ record }">
|
|||
|
|
<a-avatar :style="{ backgroundColor: record.avatarColor }">
|
|||
|
|
{{ record.name.charAt(0) }}
|
|||
|
|
</a-avatar>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<!-- 表格自定义列：操作 -->
|
|||
|
|
<template #operations="{ record }">
|
|||
|
|
<a-space>
|
|||
|
|
<a-button type="text" size="small" @click="handleView(record)">
|
|||
|
|
查看
|
|||
|
|
</a-button>
|
|||
|
|
<a-button type="text" size="small" @click="handleEdit(record)">
|
|||
|
|
编辑
|
|||
|
|
</a-button>
|
|||
|
|
<a-popconfirm content="确定要删除吗？" @ok="handleDelete(record)">
|
|||
|
|
<a-button type="text" size="small" status="danger">
|
|||
|
|
删除
|
|||
|
|
</a-button>
|
|||
|
|
</a-popconfirm>
|
|||
|
|
</a-space>
|
|||
|
|
</template>
|
|||
|
|
</SearchTable>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script lang="ts" setup>
|
|||
|
|
import { computed, ref, reactive } from 'vue'
|
|||
|
|
import { Message } from '@arco-design/web-vue'
|
|||
|
|
import type { TableColumnData } from '@arco-design/web-vue/es/table/interface'
|
|||
|
|
import type { FormItem } from '@/components/search-form/types'
|
|||
|
|
|
|||
|
|
// 定义表格数据类型
|
|||
|
|
interface UserRecord {
|
|||
|
|
id: number
|
|||
|
|
name: string
|
|||
|
|
email: string
|
|||
|
|
department: string
|
|||
|
|
role: string
|
|||
|
|
status: 'active' | 'inactive'
|
|||
|
|
avatarColor: string
|
|||
|
|
createdAt: string
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 模拟数据生成
|
|||
|
|
const generateMockData = (count: number): UserRecord[] => {
|
|||
|
|
const departments = ['技术部', '产品部', '运营部', '市场部', '财务部']
|
|||
|
|
const roles = ['管理员', '普通用户', '访客']
|
|||
|
|
const names = ['张三', '李四', '王五', '赵六', '钱七', '孙八', '周九', '吴十']
|
|||
|
|
const colors = ['#165DFF', '#0FC6C2', '#722ED1', '#F53F3F', '#FF7D00', '#00B42A']
|
|||
|
|
|
|||
|
|
return Array.from({ length: count }, (_, i) => ({
|
|||
|
|
id: i + 1,
|
|||
|
|
name: names[i % names.length] + (Math.floor(i / names.length) || ''),
|
|||
|
|
email: `user${i + 1}@example.com`,
|
|||
|
|
department: departments[i % departments.length],
|
|||
|
|
role: roles[i % roles.length],
|
|||
|
|
status: i % 3 === 0 ? 'inactive' : 'active',
|
|||
|
|
avatarColor: colors[i % colors.length],
|
|||
|
|
createdAt: `2024-${String((i % 12) + 1).padStart(2, '0')}-${String((i % 28) + 1).padStart(2, '0')}`,
|
|||
|
|
}))
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 状态管理
|
|||
|
|
const loading = ref(false)
|
|||
|
|
const tableData = ref<UserRecord[]>([])
|
|||
|
|
const formModel = ref({
|
|||
|
|
name: '',
|
|||
|
|
department: '',
|
|||
|
|
status: '',
|
|||
|
|
email: '',
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const pagination = reactive({
|
|||
|
|
current: 1,
|
|||
|
|
pageSize: 10,
|
|||
|
|
total: 0,
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 表单项配置
|
|||
|
|
const formItems = computed<FormItem[]>(() => [
|
|||
|
|
{
|
|||
|
|
field: 'name',
|
|||
|
|
label: '用户名',
|
|||
|
|
type: 'input',
|
|||
|
|
placeholder: '请输入用户名',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
field: 'email',
|
|||
|
|
label: '邮箱',
|
|||
|
|
type: 'input',
|
|||
|
|
placeholder: '请输入邮箱',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
field: 'department',
|
|||
|
|
label: '部门',
|
|||
|
|
type: 'select',
|
|||
|
|
placeholder: '请选择部门',
|
|||
|
|
options: [
|
|||
|
|
{ label: '技术部', value: '技术部' },
|
|||
|
|
{ label: '产品部', value: '产品部' },
|
|||
|
|
{ label: '运营部', value: '运营部' },
|
|||
|
|
{ label: '市场部', value: '市场部' },
|
|||
|
|
{ label: '财务部', value: '财务部' },
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
field: 'status',
|
|||
|
|
label: '状态',
|
|||
|
|
type: 'select',
|
|||
|
|
placeholder: '请选择状态',
|
|||
|
|
options: [
|
|||
|
|
{ label: '启用', value: 'active' },
|
|||
|
|
{ label: '禁用', value: 'inactive' },
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
])
|
|||
|
|
|
|||
|
|
// 表格列配置
|
|||
|
|
const columns = computed<TableColumnData[]>(() => [
|
|||
|
|
{
|
|||
|
|
title: '序号',
|
|||
|
|
dataIndex: 'index',
|
|||
|
|
slotName: 'index',
|
|||
|
|
width: 80,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '头像',
|
|||
|
|
dataIndex: 'avatar',
|
|||
|
|
slotName: 'avatar',
|
|||
|
|
width: 80,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '用户名',
|
|||
|
|
dataIndex: 'name',
|
|||
|
|
width: 120,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '邮箱',
|
|||
|
|
dataIndex: 'email',
|
|||
|
|
width: 200,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '部门',
|
|||
|
|
dataIndex: 'department',
|
|||
|
|
width: 120,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '角色',
|
|||
|
|
dataIndex: 'role',
|
|||
|
|
width: 100,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '状态',
|
|||
|
|
dataIndex: 'status',
|
|||
|
|
slotName: 'status',
|
|||
|
|
width: 100,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '创建时间',
|
|||
|
|
dataIndex: 'createdAt',
|
|||
|
|
width: 120,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '操作',
|
|||
|
|
dataIndex: 'operations',
|
|||
|
|
slotName: 'operations',
|
|||
|
|
width: 200,
|
|||
|
|
fixed: 'right',
|
|||
|
|
},
|
|||
|
|
])
|
|||
|
|
|
|||
|
|
// 模拟异步获取数据
|
|||
|
|
const fetchData = async () => {
|
|||
|
|
loading.value = true
|
|||
|
|
|
|||
|
|
// 模拟网络延迟
|
|||
|
|
await new Promise(resolve => setTimeout(resolve, 500))
|
|||
|
|
|
|||
|
|
let data = generateMockData(86)
|
|||
|
|
|
|||
|
|
// 根据搜索条件过滤
|
|||
|
|
if (formModel.value.name) {
|
|||
|
|
data = data.filter(item => item.name.includes(formModel.value.name))
|
|||
|
|
}
|
|||
|
|
if (formModel.value.email) {
|
|||
|
|
data = data.filter(item => item.email.includes(formModel.value.email))
|
|||
|
|
}
|
|||
|
|
if (formModel.value.department) {
|
|||
|
|
data = data.filter(item => item.department === formModel.value.department)
|
|||
|
|
}
|
|||
|
|
if (formModel.value.status) {
|
|||
|
|
data = data.filter(item => item.status === formModel.value.status)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 更新分页
|
|||
|
|
pagination.total = data.length
|
|||
|
|
|
|||
|
|
// 分页截取
|
|||
|
|
const start = (pagination.current - 1) * pagination.pageSize
|
|||
|
|
const end = start + pagination.pageSize
|
|||
|
|
tableData.value = data.slice(start, end)
|
|||
|
|
|
|||
|
|
loading.value = false
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 事件处理
|
|||
|
|
const handleSearch = () => {
|
|||
|
|
pagination.current = 1
|
|||
|
|
fetchData()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const handleReset = () => {
|
|||
|
|
formModel.value = {
|
|||
|
|
name: '',
|
|||
|
|
department: '',
|
|||
|
|
status: '',
|
|||
|
|
email: '',
|
|||
|
|
}
|
|||
|
|
pagination.current = 1
|
|||
|
|
fetchData()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const handlePageChange = (current: number) => {
|
|||
|
|
pagination.current = current
|
|||
|
|
fetchData()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const handleRefresh = () => {
|
|||
|
|
fetchData()
|
|||
|
|
Message.success('数据已刷新')
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const handleDownload = () => {
|
|||
|
|
Message.info('导出功能开发中...')
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const handleAdd = () => {
|
|||
|
|
Message.info('新增功能开发中...')
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const handleBatchDelete = () => {
|
|||
|
|
Message.warning('请先选择要删除的数据')
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const handleView = (record: UserRecord) => {
|
|||
|
|
Message.info(`查看用户：${record.name}`)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const handleEdit = (record: UserRecord) => {
|
|||
|
|
Message.info(`编辑用户：${record.name}`)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const handleDelete = (record: UserRecord) => {
|
|||
|
|
Message.success(`已删除用户：${record.name}`)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 初始化加载数据
|
|||
|
|
fetchData()
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<script lang="ts">
|
|||
|
|
export default {
|
|||
|
|
name: 'SearchTableDemo',
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="less">
|
|||
|
|
.container {
|
|||
|
|
padding: 0 20px 20px 20px;
|
|||
|
|
}
|
|||
|
|
</style>
|