refactor(components): 重构表单和表格组件并更新相关引用

feat(components): 新增scForm和scTable组件替代DynamicForm feat(pages): 添加用户管理页面到auth模块 chore(deps): 调整package.json依赖项顺序并添加vue-eslint-parser
2026-01-20 15:51:54 +08:00
parent 8c2d943dba
commit f877097398
7 changed files with 750 additions and 841 deletions
@@ -0,0 +1,180 @@
+<template>
+	<div class="system-user">
+		<a-card title="用户管理">
+			<template #extra>
+				<a-button type="primary" @click="handleAdd">
+					<PlusOutlined />
+					新增用户
+				</a-button>
+			</template>
+
+			<div class="search-form">
+				<sc-form :form-items="formItems" :initial-values="searchForm" :show-actions="true" submit-text="查询"
+					reset-text="重置" @finish="handleSearch" @reset="handleReset" layout="inline" />
+			</div>
+
+			<sc-table :columns="columns" :data-source="dataSource" :loading="loading" :pagination="pagination"
+				:show-action-column="true" :action-column="{
+					title: '操作',
+					key: 'action',
+					width: 150,
+				}">
+				<template #status="{ record }">
+					<a-tag :color="record.status === 1 ? 'green' : 'red'">
+						{{ record.status === 1 ? '正常' : '禁用' }}
+					</a-tag>
+				</template>
+				<template #action="{ record }">
+					<a-space>
+						<a-button type="link" size="small" @click="handleEdit(record)">编辑</a-button>
+						<a-button type="link" size="small" danger @click="handleDelete(record)">删除</a-button>
+					</a-space>
+				</template>
+			</sc-table>
+		</a-card>
+	</div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { message } from 'ant-design-vue'
+import { PlusOutlined } from '@ant-design/icons-vue'
+import ScTable from '@/components/scTable/index.vue'
+import ScForm from '@/components/scForm/index.vue'
+
+const columns = [
+	{
+		title: 'ID',
+		dataIndex: 'id',
+		key: 'id',
+		width: 80,
+	},
+	{
+		title: '用户名',
+		dataIndex: 'username',
+		key: 'username',
+	},
+	{
+		title: '昵称',
+		dataIndex: 'nickname',
+		key: 'nickname',
+	},
+	{
+		title: '状态',
+		dataIndex: 'status',
+		key: 'status',
+		width: 100,
+	},
+	{
+		title: '创建时间',
+		dataIndex: 'createTime',
+		key: 'createTime',
+	},
+]
+
+// 搜索表单配置
+const formItems = [
+	{
+		field: 'username',
+		label: '用户名',
+		type: 'input',
+		placeholder: '请输入用户名',
+		allowClear: true,
+	},
+	{
+		field: 'status',
+		label: '状态',
+		type: 'select',
+		placeholder: '请选择状态',
+		options: [
+			{ label: '全部', value: '' },
+			{ label: '正常', value: 1 },
+			{ label: '禁用', value: 0 },
+		],
+		allowClear: true,
+		style: 'width: 120px',
+	},
+]
+
+const searchForm = ref({
+	username: '',
+	status: '',
+})
+
+const dataSource = ref([])
+const loading = ref(false)
+const pagination = ref({
+	current: 1,
+	pageSize: 10,
+	total: 0,
+	showSizeChanger: true,
+	showTotal: (total) => `共 ${total} 条`,
+})
+
+// 模拟数据
+const mockData = [
+	{
+		id: 1,
+		username: 'admin',
+		nickname: '管理员',
+		status: 1,
+		createTime: '2024-01-01 10:00:00',
+	},
+	{
+		id: 2,
+		username: 'user',
+		nickname: '普通用户',
+		status: 1,
+		createTime: '2024-01-02 10:00:00',
+	},
+]
+
+const loadData = () => {
+	loading.value = true
+	// 模拟接口请求
+	setTimeout(() => {
+		dataSource.value = mockData
+		pagination.value.total = mockData.length
+		loading.value = false
+	}, 500)
+}
+
+const handleSearch = () => {
+	loadData()
+}
+
+const handleReset = () => {
+	searchForm.value = {
+		username: '',
+		status: '',
+	}
+	loadData()
+}
+
+const handleAdd = () => {
+	message.info('新增用户功能开发中')
+}
+
+const handleEdit = (record) => {
+	message.info('编辑用户功能开发中')
+}
+
+const handleDelete = (record) => {
+	message.info('删除用户功能开发中')
+}
+
+onMounted(() => {
+	loadData()
+})
+</script>
+
+<style scoped lang="scss">
+.system-user {
+	.search-form {
+		margin-bottom: 16px;
+		padding: 16px;
+		background-color: #fafafa;
+		border-radius: 4px;
+	}
+}
+</style>