222e5bb11a
完整的管理系统，包含账户管理、卡片管理、套餐管理、财务管理等功能模块。 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
298 lines
8.4 KiB
Markdown
298 lines
8.4 KiB
Markdown
# 页面创建模板
|
|
|
|
本文档提供快速创建页面的模板，所有页面遵循统一的风格和结构。
|
|
|
|
## 📋 已完成的页面
|
|
|
|
### ✅ 账号管理模块
|
|
- [x] 客户角色管理 (`account-management/customer-role`)
|
|
- [x] 代理商管理 (`account-management/agent`)
|
|
- [x] 客户账号管理 (`account-management/customer-account`)
|
|
- [ ] 客户账号佣金 (`account-management/customer-commission`) - 待创建
|
|
|
|
### ✅ 商品管理模块
|
|
- [x] 号卡管理 (`product/sim-card`)
|
|
- [ ] 号卡分配 (`product/sim-card-assign`) - 待创建
|
|
|
|
## 🔨 待创建的页面
|
|
|
|
### 财务管理模块 (`finance/`)
|
|
1. **佣金提现管理** (`withdrawal/index.vue`)
|
|
2. **佣金提现设置** (`withdrawal-settings/index.vue`)
|
|
3. **我的账户** (`my-account/index.vue`)
|
|
|
|
### 设置管理模块 (`settings/`)
|
|
1. **收款商户设置** (`payment-merchant/index.vue`)
|
|
2. **开发能力管理** (`developer-api/index.vue`)
|
|
3. **分佣模板** (`commission-template/index.vue`)
|
|
|
|
### 批量操作模块 (`batch/`)
|
|
1. **网卡批量导入** (`sim-import/index.vue`)
|
|
2. **设备批量导入** (`device-import/index.vue`)
|
|
3. **换卡通知** (`card-change-notice/index.vue`)
|
|
|
|
---
|
|
|
|
## 📝 标准页面模板
|
|
|
|
### 基础列表页面模板
|
|
|
|
```vue
|
|
<template>
|
|
<div class="page-content">
|
|
<!-- 搜索栏 -->
|
|
<ElRow>
|
|
<ElCol :xs="24" :sm="12" :lg="6">
|
|
<ElInput v-model="searchQuery" placeholder="搜索关键词" clearable></ElInput>
|
|
</ElCol>
|
|
<div style="width: 12px"></div>
|
|
<ElCol :xs="24" :sm="12" :lg="6" class="el-col2">
|
|
<ElButton v-ripple @click="handleSearch">搜索</ElButton>
|
|
<ElButton v-ripple @click="showDialog('add')">新增</ElButton>
|
|
</ElCol>
|
|
</ElRow>
|
|
|
|
<!-- 表格 -->
|
|
<ArtTable :data="filteredData" index>
|
|
<template #default>
|
|
<ElTableColumn label="名称" prop="name" />
|
|
<ElTableColumn label="编码" prop="code" />
|
|
<ElTableColumn label="状态" prop="status">
|
|
<template #default="scope">
|
|
<ElTag :type="scope.row.status === 'active' ? 'success' : 'info'">
|
|
{{ scope.row.status === 'active' ? '启用' : '禁用' }}
|
|
</ElTag>
|
|
</template>
|
|
</ElTableColumn>
|
|
<ElTableColumn label="创建时间" prop="createTime" width="180" />
|
|
<ElTableColumn fixed="right" label="操作" width="180">
|
|
<template #default="scope">
|
|
<el-button link @click="showDialog('edit', scope.row)">编辑</el-button>
|
|
<el-button link @click="handleDelete(scope.row)">删除</el-button>
|
|
</template>
|
|
</ElTableColumn>
|
|
</template>
|
|
</ArtTable>
|
|
|
|
<!-- 新增/编辑对话框 -->
|
|
<ElDialog
|
|
v-model="dialogVisible"
|
|
:title="dialogType === 'add' ? '新增' : '编辑'"
|
|
width="600px"
|
|
align-center
|
|
>
|
|
<ElForm ref="formRef" :model="form" :rules="rules" label-width="120px">
|
|
<ElFormItem label="名称" prop="name">
|
|
<ElInput v-model="form.name" placeholder="请输入名称" />
|
|
</ElFormItem>
|
|
<ElFormItem label="编码" prop="code">
|
|
<ElInput v-model="form.code" placeholder="请输入编码" />
|
|
</ElFormItem>
|
|
<ElFormItem label="状态">
|
|
<ElSwitch v-model="form.status" active-value="active" inactive-value="inactive" />
|
|
</ElFormItem>
|
|
</ElForm>
|
|
<template #footer>
|
|
<div class="dialog-footer">
|
|
<ElButton @click="dialogVisible = false">取消</ElButton>
|
|
<ElButton type="primary" @click="handleSubmit(formRef)">提交</ElButton>
|
|
</div>
|
|
</template>
|
|
</ElDialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
|
import type { FormInstance, FormRules } from 'element-plus'
|
|
|
|
defineOptions({ name: 'YourPageName' })
|
|
|
|
interface DataItem {
|
|
id?: string
|
|
name: string
|
|
code: string
|
|
status: 'active' | 'inactive'
|
|
createTime?: string
|
|
}
|
|
|
|
// Mock 数据
|
|
const mockData = ref<DataItem[]>([
|
|
{
|
|
id: '1',
|
|
name: '示例数据1',
|
|
code: 'CODE001',
|
|
status: 'active',
|
|
createTime: '2026-01-01 10:00:00'
|
|
}
|
|
])
|
|
|
|
const searchQuery = ref('')
|
|
const dialogVisible = ref(false)
|
|
const dialogType = ref<'add' | 'edit'>('add')
|
|
const formRef = ref<FormInstance>()
|
|
|
|
const form = reactive<DataItem>({
|
|
name: '',
|
|
code: '',
|
|
status: 'active'
|
|
})
|
|
|
|
const rules = reactive<FormRules>({
|
|
name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
|
|
code: [{ required: true, message: '请输入编码', trigger: 'blur' }]
|
|
})
|
|
|
|
const filteredData = computed(() => {
|
|
if (!searchQuery.value) return mockData.value
|
|
return mockData.value.filter((item) =>
|
|
item.name.toLowerCase().includes(searchQuery.value.toLowerCase())
|
|
)
|
|
})
|
|
|
|
const handleSearch = () => {}
|
|
|
|
const showDialog = (type: 'add' | 'edit', row?: DataItem) => {
|
|
dialogType.value = type
|
|
dialogVisible.value = true
|
|
if (type === 'edit' && row) {
|
|
Object.assign(form, row)
|
|
} else {
|
|
Object.assign(form, { name: '', code: '', status: 'active' })
|
|
}
|
|
}
|
|
|
|
const handleSubmit = async (formEl: FormInstance | undefined) => {
|
|
if (!formEl) return
|
|
await formEl.validate((valid) => {
|
|
if (valid) {
|
|
if (dialogType.value === 'add') {
|
|
mockData.value.push({
|
|
...form,
|
|
id: Date.now().toString(),
|
|
createTime: new Date().toLocaleString('zh-CN')
|
|
})
|
|
ElMessage.success('新增成功')
|
|
} else {
|
|
const index = mockData.value.findIndex((item) => item.id === form.id)
|
|
if (index !== -1) mockData.value[index] = { ...form }
|
|
ElMessage.success('修改成功')
|
|
}
|
|
dialogVisible.value = false
|
|
formEl.resetFields()
|
|
}
|
|
})
|
|
}
|
|
|
|
const handleDelete = (row: DataItem) => {
|
|
ElMessageBox.confirm('确定删除吗？', '删除确认', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'error'
|
|
}).then(() => {
|
|
const index = mockData.value.findIndex((item) => item.id === row.id)
|
|
if (index !== -1) mockData.value.splice(index, 1)
|
|
ElMessage.success('删除成功')
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.page-content {
|
|
// 自定义样式
|
|
}
|
|
</style>
|
|
```
|
|
|
|
---
|
|
|
|
## 🎯 快速创建步骤
|
|
|
|
1. **复制模板**：复制上面的标准模板
|
|
2. **修改组件名**：修改 `defineOptions({ name: 'YourPageName' })`
|
|
3. **调整接口**：根据业务需求修改 `DataItem` 接口
|
|
4. **修改 Mock 数据**：替换 `mockData` 中的示例数据
|
|
5. **调整表单字段**：根据需求增删表单项
|
|
6. **调整表格列**：修改 `ElTableColumn` 配置
|
|
|
|
---
|
|
|
|
## 📚 常用组件
|
|
|
|
### 1. ArtTable - 表格组件
|
|
```vue
|
|
<ArtTable :data="tableData" index>
|
|
<template #default>
|
|
<ElTableColumn label="列名" prop="propName" />
|
|
</template>
|
|
</ArtTable>
|
|
```
|
|
|
|
### 2. 搜索栏布局
|
|
```vue
|
|
<ElRow>
|
|
<ElCol :xs="24" :sm="12" :lg="6">
|
|
<ElInput v-model="search" placeholder="搜索" clearable />
|
|
</ElCol>
|
|
<div style="width: 12px"></div>
|
|
<ElCol :xs="24" :sm="12" :lg="6">
|
|
<ElSelect v-model="filter" placeholder="筛选" clearable style="width: 100%">
|
|
<ElOption label="选项1" value="1" />
|
|
</ElSelect>
|
|
</ElCol>
|
|
<div style="width: 12px"></div>
|
|
<ElCol :xs="24" :sm="12" :lg="6" class="el-col2">
|
|
<ElButton v-ripple>搜索</ElButton>
|
|
</ElCol>
|
|
</ElRow>
|
|
```
|
|
|
|
### 3. 状态标签
|
|
```vue
|
|
<ElTag :type="getStatusType(status)">
|
|
{{ getStatusText(status) }}
|
|
</ElTag>
|
|
```
|
|
|
|
### 4. 操作按钮
|
|
```vue
|
|
<el-button link @click="handleEdit(row)">编辑</el-button>
|
|
<el-button link type="danger" @click="handleDelete(row)">删除</el-button>
|
|
```
|
|
|
|
---
|
|
|
|
## 💡 开发规范
|
|
|
|
1. **命名规范**
|
|
- 组件名：大驼峰 `YourComponent`
|
|
- 变量名：小驼峰 `yourVariable`
|
|
- 文件名：小写+连字符 `your-file.vue`
|
|
|
|
2. **Mock 数据格式**
|
|
- 统一使用 `ref<Type[]>([])` 定义
|
|
- 包含 `id`, `createTime` 等公共字段
|
|
- 数据应具有代表性，便于测试
|
|
|
|
3. **表单验证**
|
|
- 必填字段添加 `required` 规则
|
|
- 手机号/邮箱使用正则验证
|
|
- 提供友好的错误提示
|
|
|
|
4. **用户体验**
|
|
- 操作前使用 `ElMessageBox.confirm` 确认
|
|
- 操作后使用 `ElMessage` 提示结果
|
|
- 表单提交后关闭对话框并重置
|
|
|
|
---
|
|
|
|
## 🔄 下一步
|
|
|
|
1. 根据模板快速创建剩余页面
|
|
2. 完善 Mock 数据使其更真实
|
|
3. 添加路由配置
|
|
4. 测试页面功能
|
|
5. 优化用户体验
|
|
|
|
祝开发顺利！🚀
|