luo/one-pipe-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fetch(add): 账户管理

Browse Source
This commit is contained in:
sexygoat
2026-01-23 17:18:24 +08:00
parent 339abca4c0
commit b53fea43c6
93 changed files with 7094 additions and 3153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/views/account-management/account/index.vue
View File

@@ -134,7 +134,7 @@
const loading = ref(false)
const roleSubmitLoading = ref(false)
const currentAccountId = ref<number>(0)
const selectedRole = ref<number | null>(null)
const selectedRole = ref<number | undefined>(undefined)
const allRoles = ref<PlatformRole[]>([])
// 定义表单搜索初始值
@@ -258,23 +258,19 @@
const { columnChecks, columns } = useCheckedColumns(() => [
{
prop: 'ID',
label: 'ID',
width: 80
label: 'ID'
},
{
prop: 'username',
label: '账号名称',
minWidth: 120
label: '账号名称'
},
{
prop: 'phone',
label: '手机号',
width: 130
label: '手机号'
},
{
prop: 'user_type',
label: '账号类型',
width: 120,
formatter: (row: any) => {
const typeMap: Record<number, string> = {
1: '超级管理员',
@@ -288,7 +284,6 @@
{
prop: 'status',
label: '状态',
width: 100,
formatter: (row: any) => {
return h(ElSwitch, {
modelValue: row.status,
@@ -297,20 +292,18 @@
activeText: getStatusText(CommonStatus.ENABLED),
inactiveText: getStatusText(CommonStatus.DISABLED),
inlinePrompt: true,
'onUpdate:modelValue': (val: number) => handleStatusChange(row, val)
'onUpdate:modelValue': (val: string | number | boolean) => handleStatusChange(row, val as number)
})
}
},
{
prop: 'CreatedAt',
label: '创建时间',
width: 180,
formatter: (row: any) => formatDateTime(row.CreatedAt)
},
{
prop: 'operation',
label: '操作',
width: 180,
fixed: 'right',
formatter: (row: any) => {
return h('div', { style: 'display: flex; gap: 8px;' }, [
@@ -363,7 +356,7 @@
// 显示分配角色对话框
const showRoleDialog = async (row: any) => {
currentAccountId.value = row.ID
selectedRole.value = null
selectedRole.value = undefined
// 先加载当前账号的角色，再打开对话框
try {
@@ -371,7 +364,7 @@
if (res.code === 0) {
// 提取角色ID（只取第一个角色）
const roles = res.data || []
selectedRole.value = roles.length > 0 ? roles[0].ID : null
selectedRole.value = roles.length > 0 ? roles[0].ID : undefined
// 数据加载完成后再打开对话框
roleDialogVisible.value = true
}
@@ -382,7 +375,7 @@
// 提交分配角色
const handleAssignRoles = async () => {
if (selectedRole.value === null) {
if (selectedRole.value === undefined) {
ElMessage.warning('请选择一个角色')
return
}
@@ -516,7 +509,7 @@
}
.role-radio-item {
margin-bottom: 16px;
padding: 8px;
margin-bottom: 16px;
}
</style>

25
src/views/account-management/agent/index.vue
View File

@@ -89,8 +89,13 @@
</ElCol>
<ElCol :span="12">
<ElFormItem label="上级代理" prop="parentId">
<ElSelect v-model="form.parentId" placeholder="请选择上级代理" clearable style="width: 100%">
<ElOption label="无" :value="null" />
<ElSelect
v-model="form.parentId"
placeholder="请选择上级代理"
clearable
style="width: 100%"
>
<ElOption label="无" :value="undefined" />
<ElOption
v-for="agent in parentAgentOptions"
:key="agent.id"
@@ -160,7 +165,7 @@
</ElTableColumn>
<ElTableColumn label="创建时间" prop="createTime" />
<ElTableColumn fixed="right" label="操作" width="150">
<template #default="scope">
<template #default>
<el-button link>编辑</el-button>
<el-button link>禁用</el-button>
</template>
@@ -245,7 +250,7 @@
address: '上海市浦东新区',
accountCount: 5,
simCardCount: 1000,
totalCommission: 158900.50,
totalCommission: 158900.5,
status: 'active',
createTime: '2026-01-01 10:00:00'
},
@@ -262,7 +267,7 @@
address: '江苏省南京市',
accountCount: 3,
simCardCount: 500,
totalCommission: 78500.00,
totalCommission: 78500.0,
status: 'active',
createTime: '2026-01-05 11:00:00'
},
@@ -279,7 +284,7 @@
address: '江苏省南京市玄武区',
accountCount: 2,
simCardCount: 200,
totalCommission: 32800.00,
totalCommission: 32800.0,
status: 'active',
createTime: '2026-01-10 12:00:00'
}
@@ -344,7 +349,8 @@
if (searchQuery.value) {
data = data.filter(
(item) =>
item.agentName.includes(searchQuery.value) || item.contactPerson.includes(searchQuery.value)
item.agentName.includes(searchQuery.value) ||
item.contactPerson.includes(searchQuery.value)
)
}
if (levelFilter.value) {
@@ -359,7 +365,7 @@
}
const getLevelTagType = (level: number) => {
const typeMap: Record<number, string> = { 1: '', 2: 'success', 3: 'warning' }
const typeMap: Record<number, string> = { 1: 'primary', 2: 'success', 3: 'warning' }
return typeMap[level] || 'info'
}
@@ -444,11 +450,14 @@
const viewAccountList = (row: Agent) => {
accountDialogVisible.value = true
// 实际应用中应该根据代理商ID加载账号列表
console.log(row)
}
const viewCommission = (row: Agent) => {
commissionDialogVisible.value = true
// 实际应用中应该根据代理商ID加载佣金配置
console.log(row)
}
const addSubAccount = () => {

754
src/views/account-management/customer-account/index.vue
View File

@@ -1,276 +1,570 @@
<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">
<ElSelect v-model="typeFilter" placeholder="客户类型" clearable style="width: 100%">
<ElOption label="代理商" value="agent" />
<ElOption label="企业客户" value="enterprise" />
</ElSelect>
</ElCol>
<div style="width: 12px"></div>
<ElCol :xs="24" :sm="12" :lg="6">
<ElSelect v-model="statusFilter" placeholder="账号状态" clearable style="width: 100%">
<ElOption label="正常" value="active" />
<ElOption label="禁用" value="disabled" />
<ElOption label="已锁定" value="locked" />
</ElSelect>
</ElCol>
<div style="width: 12px"></div>
<ElCol :xs="24" :sm="12" :lg="6" class="el-col2">
<ElButton v-ripple @click="handleSearch">搜索</ElButton>
</ElCol>
</ElRow>
<ArtTableFullScreen>
<div class="customer-account-page" id="table-full-screen">
<!-- 搜索栏 -->
<ArtSearchBar
v-model:filter="searchForm"
:items="searchFormItems"
:show-expand="false"
@reset="handleReset"
@search="handleSearch"
></ArtSearchBar>
<ArtTable :data="filteredData" index>
<template #default>
<ElTableColumn label="账号" prop="username" min-width="120" />
<ElTableColumn label="真实姓名" prop="realName" />
<ElTableColumn label="客户类型" prop="customerType">
<template #default="scope">
<ElTag :type="scope.row.customerType === 'agent' ? '' : 'success'">
{{ scope.row.customerType === 'agent' ? '代理商' : '企业客户' }}
</ElTag>
<ElCard shadow="never" class="art-table-card">
<!-- 表格头部 -->
<ArtTableHeader
:columnList="columnOptions"
v-model:columns="columnChecks"
@refresh="handleRefresh"
>
<template #left>
<ElButton @click="showDialog('add')">新增代理商账号</ElButton>
</template>
</ElTableColumn>
<ElTableColumn label="所属组织" prop="organizationName" show-overflow-tooltip />
<ElTableColumn label="手机号" prop="phone" />
<ElTableColumn label="邮箱" prop="email" show-overflow-tooltip />
<ElTableColumn label="登录次数" prop="loginCount" />
<ElTableColumn label="最后登录" prop="lastLoginTime" width="180" />
<ElTableColumn label="状态" prop="status">
<template #default="scope">
<ElTag :type="getStatusTagType(scope.row.status)">
{{ getStatusText(scope.row.status) }}
</ElTag>
</template>
</ElTableColumn>
<ElTableColumn label="创建时间" prop="createTime" width="180" />
<ElTableColumn fixed="right" label="操作" width="280">
<template #default="scope">
<el-button link @click="viewDetail(scope.row)">详情</el-button>
<el-button link @click="unbindPhone(scope.row)">解绑手机</el-button>
<el-button link @click="resetPassword(scope.row)">重置密码</el-button>
<el-button
link
:type="scope.row.status === 'active' ? 'danger' : 'primary'"
@click="toggleStatus(scope.row)"
>
{{ scope.row.status === 'active' ? '禁用' : '启用' }}
</el-button>
</template>
</ElTableColumn>
</template>
</ArtTable>
</ArtTableHeader>
<!-- 操作记录对话框 -->
<ElDialog v-model="detailDialogVisible" title="账号详情" width="800px" align-center>
<ElDescriptions :column="2" border>
<ElDescriptionsItem label="账号">{{ currentAccount?.username }}</ElDescriptionsItem>
<ElDescriptionsItem label="真实姓名">{{ currentAccount?.realName }}</ElDescriptionsItem>
<ElDescriptionsItem label="客户类型">{{
currentAccount?.customerType === 'agent' ? '代理商' : '企业客户'
}}</ElDescriptionsItem>
<ElDescriptionsItem label="所属组织">{{
currentAccount?.organizationName
}}</ElDescriptionsItem>
<ElDescriptionsItem label="手机号">{{ currentAccount?.phone }}</ElDescriptionsItem>
<ElDescriptionsItem label="邮箱">{{ currentAccount?.email }}</ElDescriptionsItem>
<ElDescriptionsItem label="注册时间">{{ currentAccount?.createTime }}</ElDescriptionsItem>
<ElDescriptionsItem label="最后登录">{{
currentAccount?.lastLoginTime
}}</ElDescriptionsItem>
<ElDescriptionsItem label="登录次数">{{ currentAccount?.loginCount }}</ElDescriptionsItem>
<ElDescriptionsItem label="状态">
<ElTag :type="getStatusTagType(currentAccount?.status || 'active')">
{{ getStatusText(currentAccount?.status || 'active') }}
</ElTag>
</ElDescriptionsItem>
</ElDescriptions>
<!-- 表格 -->
<ArtTable
ref="tableRef"
row-key="id"
:loading="loading"
:data="accountList"
:currentPage="pagination.page"
:pageSize="pagination.pageSize"
:total="pagination.total"
:marginTop="10"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
>
<template #default>
<ElTableColumn v-for="col in columns" :key="col.prop || col.type" v-bind="col" />
</template>
</ArtTable>
<ElDivider>操作记录</ElDivider>
<ArtTable :data="operationRecords" index max-height="300">
<template #default>
<ElTableColumn label="操作类型" prop="operationType" />
<ElTableColumn label="操作描述" prop="description" />
<ElTableColumn label="操作人" prop="operator" />
<ElTableColumn label="操作时间" prop="operateTime" width="180" />
</template>
</ArtTable>
</ElDialog>
</div>
<!-- 新增/编辑对话框 -->
<ElDialog
v-model="dialogVisible"
:title="dialogType === 'add' ? '新增代理商账号' : '编辑账号'"
width="500px"
>
<ElForm ref="formRef" :model="form" :rules="rules" label-width="80px">
<ElFormItem label="用户名" prop="username">
<ElInput
v-model="form.username"
placeholder="请输入用户名"
:disabled="dialogType === 'edit'"
/>
</ElFormItem>
<ElFormItem label="手机号" prop="phone">
<ElInput v-model="form.phone" placeholder="请输入手机号" />
</ElFormItem>
<ElFormItem v-if="dialogType === 'add'" label="密码" prop="password">
<ElInput
v-model="form.password"
type="password"
placeholder="请输入密码(6-20位)"
show-password
/>
</ElFormItem>
<ElFormItem label="店铺" prop="shop_id">
<ElSelect
v-model="form.shop_id"
placeholder="请选择店铺"
filterable
remote
:remote-method="searchShops"
:loading="shopLoading"
clearable
style="width: 100%"
>
<ElOption
v-for="shop in shopList"
:key="shop.id"
:label="shop.shop_name"
:value="shop.id"
/>
</ElSelect>
</ElFormItem>
</ElForm>
<template #footer>
<div class="dialog-footer">
<ElButton @click="dialogVisible = false">取消</ElButton>
<ElButton type="primary" @click="handleSubmit(formRef)" :loading="submitLoading">
提交
</ElButton>
</div>
</template>
</ElDialog>
<!-- 修改密码对话框 -->
<ElDialog v-model="passwordDialogVisible" title="修改密码" width="400px">
<ElForm ref="passwordFormRef" :model="passwordForm" :rules="passwordRules">
<ElFormItem label="新密码" prop="password">
<ElInput
v-model="passwordForm.password"
type="password"
placeholder="请输入新密码(6-20位)"
show-password
/>
</ElFormItem>
</ElForm>
<template #footer>
<div class="dialog-footer">
<ElButton @click="passwordDialogVisible = false">取消</ElButton>
<ElButton
type="primary"
@click="handlePasswordSubmit(passwordFormRef)"
:loading="passwordSubmitLoading"
>
提交
</ElButton>
</div>
</template>
</ElDialog>
</ElCard>
</div>
</ArtTableFullScreen>
</template>
<script setup lang="ts">
import { ElMessage, ElMessageBox } from 'element-plus'
import { h } from 'vue'
import { CustomerAccountService, ShopService } from '@/api/modules'
import { ElMessage, ElTag, ElSwitch } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import type { CustomerAccountItem, ShopResponse } from '@/types/api'
import type { SearchFormItem } from '@/types'
import { useCheckedColumns } from '@/composables/useCheckedColumns'
import ArtButtonTable from '@/components/core/forms/ArtButtonTable.vue'
import { formatDateTime } from '@/utils/business/format'
defineOptions({ name: 'CustomerAccount' })
interface CustomerAccount {
id: string
username: string
realName: string
customerType: 'agent' | 'enterprise'
organizationName: string
phone: string
email: string
loginCount: number
lastLoginTime: string
status: 'active' | 'disabled' | 'locked'
createTime: string
const dialogVisible = ref(false)
const passwordDialogVisible = ref(false)
const loading = ref(false)
const submitLoading = ref(false)
const passwordSubmitLoading = ref(false)
const shopLoading = ref(false)
const tableRef = ref()
const currentAccountId = ref<number>(0)
const shopList = ref<ShopResponse[]>([])
// 搜索表单初始值
const initialSearchState = {
username: '',
phone: '',
user_type: undefined as number | undefined,
status: undefined as number | undefined
}
// Mock 数据
const mockData = ref<CustomerAccount[]>([
// 搜索表单
const searchForm = reactive({ ...initialSearchState })
// 用户类型选项
const userTypeOptions = [
{ label: '个人账号', value: 2 },
{ label: '代理账号', value: 3 },
{ label: '企业账号', value: 4 }
]
// 状态选项
const statusOptions = [
{ label: '启用', value: 1 },
{ label: '禁用', value: 0 }
]
// 搜索表单配置
const searchFormItems = computed<SearchFormItem[]>(() => [
{
id: '1',
username: 'agent001',
realName: '张三',
customerType: 'agent',
organizationName: '华东区总代理',
phone: '13800138001',
email: 'zhangsan@example.com',
loginCount: 328,
lastLoginTime: '2026-01-09 08:30:00',
status: 'active',
createTime: '2026-01-01 10:00:00'
label: '用户名',
prop: 'username',
type: 'input',
config: {
clearable: true,
placeholder: '请输入用户名'
}
},
{
id: '2',
username: 'enterprise001',
realName: '李四',
customerType: 'enterprise',
organizationName: '某某科技有限公司',
phone: '13800138002',
email: 'lisi@example.com',
loginCount: 156,
lastLoginTime: '2026-01-08 18:45:00',
status: 'active',
createTime: '2026-01-03 11:00:00'
label: '手机号',
prop: 'phone',
type: 'input',
config: {
clearable: true,
placeholder: '请输入手机号'
}
},
{
id: '3',
username: 'agent002',
realName: '王五',
customerType: 'agent',
organizationName: '江苏省代理',
phone: '13800138003',
email: 'wangwu@example.com',
loginCount: 89,
lastLoginTime: '2026-01-07 14:20:00',
status: 'disabled',
createTime: '2026-01-05 12:00:00'
label: '用户类型',
prop: 'user_type',
type: 'select',
options: userTypeOptions,
config: {
clearable: true,
placeholder: '请选择用户类型'
}
},
{
label: '状态',
prop: 'status',
type: 'select',
options: statusOptions,
config: {
clearable: true,
placeholder: '请选择状态'
}
}
])
const operationRecords = ref([
{
operationType: '重置密码',
description: '管理员重置登录密码',
operator: 'admin',
operateTime: '2026-01-08 10:00:00'
},
{
operationType: '解绑手机',
description: '解绑原手机号并重新绑定',
operator: 'admin',
operateTime: '2026-01-06 15:30:00'
}
])
const searchQuery = ref('')
const typeFilter = ref('')
const statusFilter = ref('')
const detailDialogVisible = ref(false)
const currentAccount = ref<CustomerAccount | null>(null)
const filteredData = computed(() => {
let data = mockData.value
if (searchQuery.value) {
const query = searchQuery.value.toLowerCase()
data = data.filter(
(item) =>
item.username.toLowerCase().includes(query) ||
item.realName.includes(query) ||
item.phone.includes(query)
)
}
if (typeFilter.value) {
data = data.filter((item) => item.customerType === typeFilter.value)
}
if (statusFilter.value) {
data = data.filter((item) => item.status === statusFilter.value)
}
return data
// 分页
const pagination = reactive({
page: 1,
pageSize: 20,
total: 0
})
const getStatusText = (status: string) => {
const statusMap: Record<string, string> = {
active: '正常',
disabled: '禁用',
locked: '已锁定'
// 列配置
const columnOptions = [
{ label: 'ID', prop: 'id' },
{ label: '用户名', prop: 'username' },
{ label: '手机号', prop: 'phone' },
{ label: '用户类型', prop: 'user_type_name' },
{ label: '店铺名称', prop: 'shop_name' },
{ label: '企业名称', prop: 'enterprise_name' },
{ label: '状态', prop: 'status' },
{ label: '创建时间', prop: 'created_at' },
{ label: '操作', prop: 'operation' }
]
const formRef = ref<FormInstance>()
const passwordFormRef = ref<FormInstance>()
const rules = reactive<FormRules>({
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 2, max: 50, message: '用户名长度为2-50个字符', trigger: 'blur' }
],
phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 6, max: 20, message: '密码长度为6-20位', trigger: 'blur' }
],
shop_id: [{ required: true, message: '请输入店铺ID', trigger: 'blur' }]
})
const passwordRules = reactive<FormRules>({
password: [
{ required: true, message: '请输入新密码', trigger: 'blur' },
{ min: 6, max: 20, message: '密码长度为6-20位', trigger: 'blur' }
]
})
const dialogType = ref('add')
const form = reactive<any>({
id: 0,
username: '',
phone: '',
password: '',
shop_id: null
})
const passwordForm = reactive({
password: ''
})
const accountList = ref<CustomerAccountItem[]>([])
// 动态列配置
const { columnChecks, columns } = useCheckedColumns(() => [
{
prop: 'id',
label: 'ID',
width: 80
},
{
prop: 'username',
label: '用户名',
minWidth: 120
},
{
prop: 'phone',
label: '手机号',
width: 130
},
{
prop: 'user_type_name',
label: '用户类型',
width: 100,
formatter: (row: CustomerAccountItem) => {
return h(
ElTag,
{ type: row.user_type === 3 ? 'primary' : 'success' },
() => row.user_type_name
)
}
},
{
prop: 'shop_name',
label: '店铺名称',
minWidth: 150,
showOverflowTooltip: true,
formatter: (row: CustomerAccountItem) => row.shop_name || '-'
},
{
prop: 'enterprise_name',
label: '企业名称',
minWidth: 150,
showOverflowTooltip: true,
formatter: (row: CustomerAccountItem) => row.enterprise_name || '-'
},
{
prop: 'status',
label: '状态',
width: 100,
formatter: (row: CustomerAccountItem) => {
return h(ElSwitch, {
modelValue: row.status,
activeValue: 1,
inactiveValue: 0,
activeText: '启用',
inactiveText: '禁用',
inlinePrompt: true,
'onUpdate:modelValue': (val: string | number | boolean) => handleStatusChange(row, val as number)
})
}
},
{
prop: 'created_at',
label: '创建时间',
width: 180,
formatter: (row: CustomerAccountItem) => formatDateTime(row.created_at)
},
{
prop: 'operation',
label: '操作',
width: 160,
fixed: 'right',
formatter: (row: CustomerAccountItem) => {
return h('div', { style: 'display: flex; gap: 8px;' }, [
h(ArtButtonTable, {
icon: '&#xe72b;',
onClick: () => showPasswordDialog(row)
}),
h(ArtButtonTable, {
type: 'edit',
onClick: () => showDialog('edit', row)
})
])
}
}
])
onMounted(() => {
getTableData()
loadShopList()
})
// 加载店铺列表(默认加载20条)
const loadShopList = async (shopName?: string) => {
shopLoading.value = true
try {
const params: any = {
page: 1,
pageSize: 20
}
if (shopName) {
params.shop_name = shopName
}
const res = await ShopService.getShops(params)
if (res.code === 0) {
shopList.value = res.data.items || []
}
} catch (error) {
console.error('获取店铺列表失败:', error)
} finally {
shopLoading.value = false
}
return statusMap[status] || '未知'
}
const getStatusTagType = (status: string) => {
const typeMap: Record<string, string> = {
active: 'success',
disabled: 'info',
locked: 'danger'
// 搜索店铺
const searchShops = (query: string) => {
if (query) {
loadShopList(query)
} else {
loadShopList()
}
return typeMap[status] || 'info'
}
// 获取客户账号列表
const getTableData = async () => {
loading.value = true
try {
const params = {
page: pagination.page,
page_size: pagination.pageSize,
username: searchForm.username || undefined,
phone: searchForm.phone || undefined,
user_type: searchForm.user_type,
status: searchForm.status
}
const res = await CustomerAccountService.getCustomerAccounts(params)
if (res.code === 0) {
accountList.value = res.data.items || []
pagination.total = res.data.total || 0
}
} catch (error) {
console.error(error)
} finally {
loading.value = false
}
}
// 重置搜索
const handleReset = () => {
Object.assign(searchForm, { ...initialSearchState })
pagination.page = 1
getTableData()
}
// 搜索
const handleSearch = () => {
// 搜索逻辑已通过 computed 实现
pagination.page = 1
getTableData()
}
const viewDetail = (row: CustomerAccount) => {
currentAccount.value = row
detailDialogVisible.value = true
// 刷新表格
const handleRefresh = () => {
getTableData()
}
const unbindPhone = (row: CustomerAccount) => {
ElMessageBox.confirm(`确定要解绑账号 ${row.username} 的手机号吗？`, '解绑确认', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
ElMessage.success('手机号解绑成功')
// 处理表格分页变化
const handleSizeChange = (newPageSize: number) => {
pagination.pageSize = newPageSize
getTableData()
}
const handleCurrentChange = (newCurrentPage: number) => {
pagination.page = newCurrentPage
getTableData()
}
// 显示新增/编辑对话框
const showDialog = (type: string, row?: CustomerAccountItem) => {
dialogType.value = type
if (type === 'edit' && row) {
form.id = row.id
form.username = row.username
form.phone = row.phone
form.shop_id = row.shop_id
} else {
form.id = 0
form.username = ''
form.phone = ''
form.password = ''
form.shop_id = null
}
// 重置表单验证状态
nextTick(() => {
formRef.value?.clearValidate()
})
dialogVisible.value = true
}
// 显示修改密码对话框
const showPasswordDialog = (row: CustomerAccountItem) => {
currentAccountId.value = row.id
passwordForm.password = ''
// 重置表单验证状态
nextTick(() => {
passwordFormRef.value?.clearValidate()
})
passwordDialogVisible.value = true
}
// 提交表单
const handleSubmit = async (formEl: FormInstance | undefined) => {
if (!formEl) return
await formEl.validate(async (valid) => {
if (valid) {
submitLoading.value = true
try {
if (dialogType.value === 'add') {
const data = {
username: form.username,
phone: form.phone,
password: form.password,
shop_id: form.shop_id
}
await CustomerAccountService.createCustomerAccount(data)
ElMessage.success('新增成功')
} else {
const data: any = {}
if (form.username) data.username = form.username
if (form.phone) data.phone = form.phone
await CustomerAccountService.updateCustomerAccount(form.id, data)
ElMessage.success('修改成功')
}
dialogVisible.value = false
formEl.resetFields()
getTableData()
} catch (error) {
console.error(error)
} finally {
submitLoading.value = false
}
}
})
}
const resetPassword = (row: CustomerAccount) => {
ElMessageBox.confirm(`确定要重置账号 ${row.username} 的密码吗？新密码将发送至其手机。`, '重置密码', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
ElMessage.success('密码重置成功，新密码已发送至手机')
// 提交修改密码
const handlePasswordSubmit = async (formEl: FormInstance | undefined) => {
if (!formEl) return
await formEl.validate(async (valid) => {
if (valid) {
passwordSubmitLoading.value = true
try {
await CustomerAccountService.updateCustomerAccountPassword(currentAccountId.value, {
password: passwordForm.password
})
ElMessage.success('密码修改成功')
passwordDialogVisible.value = false
formEl.resetFields()
} catch (error) {
console.error(error)
} finally {
passwordSubmitLoading.value = false
}
}
})
}
const toggleStatus = (row: CustomerAccount) => {
const action = row.status === 'active' ? '禁用' : '启用'
ElMessageBox.confirm(`确定要${action}账号 ${row.username} 吗？`, `${action}确认`, {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
row.status = row.status === 'active' ? 'disabled' : 'active'
ElMessage.success(`${action}成功`)
})
// 状态切换
const handleStatusChange = async (row: CustomerAccountItem, newStatus: number) => {
const oldStatus = row.status
// 先更新UI
row.status = newStatus
try {
await CustomerAccountService.updateCustomerAccountStatus(row.id, {
status: newStatus as 0 | 1
})
ElMessage.success('状态切换成功')
} catch (error) {
// 切换失败，恢复原状态
row.status = oldStatus
console.error(error)
}
}
</script>
<style lang="scss" scoped>
.page-content {
:deep(.el-descriptions__label) {
font-weight: 500;
}
.customer-account-page {
// 可以在这里添加客户账号页面特定样式
}
</style>

88
src/views/account-management/customer-commission/index.vue
View File

@@ -30,7 +30,9 @@
¥{{ statistics.totalWithdrawn.toFixed(2) }}
</div>
</div>
<el-icon class="stat-icon" style="color: var(--el-color-warning)"><WalletFilled /></el-icon>
<el-icon class="stat-icon" style="color: var(--el-color-warning)"
><WalletFilled
/></el-icon>
</ElCard>
</ElCol>
<ElCol :xs="24" :sm="12" :lg="6">
@@ -59,7 +61,12 @@
</ElSelect>
</ElCol>
<ElCol :xs="24" :sm="12" :lg="6">
<ElSelect v-model="commissionRangeFilter" placeholder="佣金范围" clearable style="width: 100%">
<ElSelect
v-model="commissionRangeFilter"
placeholder="佣金范围"
clearable
style="width: 100%"
>
<ElOption label="全部" value="" />
<ElOption label="0-1000元" value="0-1000" />
<ElOption label="1000-5000元" value="1000-5000" />
@@ -87,7 +94,7 @@
<ElTableColumn label="联系电话" prop="phone" width="130" />
<ElTableColumn label="累计佣金" prop="totalCommission" width="130" sortable>
<template #default="scope">
<span style="color: var(--el-color-success); font-weight: 600">
<span style="font-weight: 600; color: var(--el-color-success)">
¥{{ scope.row.totalCommission.toFixed(2) }}
</span>
</template>
@@ -101,7 +108,7 @@
</ElTableColumn>
<ElTableColumn label="待提现" prop="pendingAmount" width="130" sortable>
<template #default="scope">
<span style="color: var(--el-color-danger); font-weight: 600">
<span style="font-weight: 600; color: var(--el-color-danger)">
¥{{ scope.row.pendingAmount.toFixed(2) }}
</span>
</template>
@@ -116,8 +123,12 @@
<ElTableColumn label="注册时间" prop="registerTime" width="180" />
<ElTableColumn fixed="right" label="操作" width="220">
<template #default="scope">
<el-button link :icon="View" @click="viewCommissionDetail(scope.row)">佣金详情</el-button>
<el-button link :icon="List" @click="viewWithdrawalHistory(scope.row)">提现记录</el-button>
<el-button link :icon="View" @click="viewCommissionDetail(scope.row)"
>佣金详情</el-button
>
<el-button link :icon="List" @click="viewWithdrawalHistory(scope.row)"
>提现记录</el-button
>
</template>
</ElTableColumn>
</template>
@@ -133,7 +144,7 @@
</ElTag>
</ElDescriptionsItem>
<ElDescriptionsItem label="累计佣金">
<span style="color: var(--el-color-success); font-weight: 600">
<span style="font-weight: 600; color: var(--el-color-success)">
¥{{ currentCustomer.totalCommission.toFixed(2) }}
</span>
</ElDescriptionsItem>
@@ -143,11 +154,13 @@
</span>
</ElDescriptionsItem>
<ElDescriptionsItem label="待提现">
<span style="color: var(--el-color-danger); font-weight: 600">
<span style="font-weight: 600; color: var(--el-color-danger)">
¥{{ currentCustomer.pendingAmount.toFixed(2) }}
</span>
</ElDescriptionsItem>
<ElDescriptionsItem label="提现次数">{{ currentCustomer.withdrawalCount }}</ElDescriptionsItem>
<ElDescriptionsItem label="提现次数">{{
currentCustomer.withdrawalCount
}}</ElDescriptionsItem>
</ElDescriptions>
<ElDivider content-position="left">佣金明细</ElDivider>
@@ -157,7 +170,9 @@
<ElTableColumn label="订单号" prop="orderNo" width="180" />
<ElTableColumn label="佣金金额" prop="amount" width="120">
<template #default="scope">
<span style="color: var(--el-color-success)">+¥{{ scope.row.amount.toFixed(2) }}</span>
<span style="color: var(--el-color-success)"
>+¥{{ scope.row.amount.toFixed(2) }}</span
>
</template>
</ElTableColumn>
<ElTableColumn label="佣金比例" prop="rate" width="100" />
@@ -184,7 +199,7 @@
<ElTableColumn label="提现单号" prop="withdrawalNo" width="180" />
<ElTableColumn label="提现金额" prop="amount" width="120">
<template #default="scope">
<span style="color: var(--el-color-danger); font-weight: 600">
<span style="font-weight: 600; color: var(--el-color-danger)">
¥{{ scope.row.amount.toFixed(2) }}
</span>
</template>
@@ -253,9 +268,9 @@
const statistics = reactive({
totalCustomers: 156,
totalCommission: 580000.00,
totalWithdrawn: 420000.00,
pendingWithdrawal: 160000.00
totalCommission: 580000.0,
totalWithdrawn: 420000.0,
pendingWithdrawal: 160000.0
})
const mockData = ref<CustomerCommission[]>([
@@ -264,9 +279,9 @@
customerName: '华东区总代理',
customerType: 'agent',
phone: '13800138000',
totalCommission: 85000.00,
withdrawnAmount: 70000.00,
pendingAmount: 15000.00,
totalCommission: 85000.0,
withdrawnAmount: 70000.0,
pendingAmount: 15000.0,
withdrawalCount: 12,
cardCount: 500,
lastWithdrawalTime: '2026-01-08 10:00:00',
@@ -277,9 +292,9 @@
customerName: '深圳市科技有限公司',
customerType: 'enterprise',
phone: '13900139000',
totalCommission: 45000.00,
withdrawnAmount: 30000.00,
pendingAmount: 15000.00,
totalCommission: 45000.0,
withdrawnAmount: 30000.0,
pendingAmount: 15000.0,
withdrawalCount: 8,
cardCount: 300,
lastWithdrawalTime: '2026-01-05 14:30:00',
@@ -290,9 +305,9 @@
customerName: '北京智能制造',
customerType: 'enterprise',
phone: '13700137000',
totalCommission: 68000.00,
withdrawnAmount: 55000.00,
pendingAmount: 13000.00,
totalCommission: 68000.0,
withdrawnAmount: 55000.0,
pendingAmount: 13000.0,
withdrawalCount: 10,
cardCount: 450,
lastWithdrawalTime: '2026-01-07 16:00:00',
@@ -319,7 +334,7 @@
id: '1',
source: '套餐销售',
orderNo: 'ORD202601090001',
amount: 150.00,
amount: 150.0,
rate: '10%',
orderAmount: '¥1,500.00',
createTime: '2026-01-09 09:30:00',
@@ -329,7 +344,7 @@
id: '2',
source: '卡片激活',
orderNo: 'ORD202601080025',
amount: 80.00,
amount: 80.0,
rate: '8%',
orderAmount: '¥1,000.00',
createTime: '2026-01-08 15:20:00',
@@ -341,9 +356,9 @@
{
id: '1',
withdrawalNo: 'WD202601080001',
amount: 10000.00,
fee: 20.00,
actualAmount: 9980.00,
amount: 10000.0,
fee: 20.0,
actualAmount: 9980.0,
method: '银行卡',
status: 'completed',
applyTime: '2026-01-08 10:00:00',
@@ -352,9 +367,9 @@
{
id: '2',
withdrawalNo: 'WD202601050002',
amount: 5000.00,
fee: 10.00,
actualAmount: 4990.00,
amount: 5000.0,
fee: 10.0,
actualAmount: 4990.0,
method: '支付宝',
status: 'completed',
applyTime: '2026-01-05 14:00:00',
@@ -368,8 +383,7 @@
if (searchQuery.value) {
data = data.filter(
(item) =>
item.customerName.includes(searchQuery.value) ||
item.phone.includes(searchQuery.value)
item.customerName.includes(searchQuery.value) || item.phone.includes(searchQuery.value)
)
}
@@ -381,8 +395,10 @@
data = data.filter((item) => {
const commission = item.totalCommission
if (commissionRangeFilter.value === '0-1000') return commission >= 0 && commission < 1000
if (commissionRangeFilter.value === '1000-5000') return commission >= 1000 && commission < 5000
if (commissionRangeFilter.value === '5000-10000') return commission >= 5000 && commission < 10000
if (commissionRangeFilter.value === '1000-5000')
return commission >= 1000 && commission < 5000
if (commissionRangeFilter.value === '5000-10000')
return commission >= 5000 && commission < 10000
if (commissionRangeFilter.value === '10000+') return commission >= 10000
return true
})
@@ -420,9 +436,9 @@
.stat-content {
.stat-label {
margin-bottom: 8px;
font-size: 14px;
color: var(--el-text-color-secondary);
margin-bottom: 8px;
}
.stat-value {

17
src/views/account-management/customer-role/index.vue
View File

@@ -72,7 +72,12 @@
</ElCheckboxGroup>
</ElFormItem>
<ElFormItem label="描述" prop="description">
<ElInput v-model="form.description" type="textarea" :rows="3" placeholder="请输入角色描述" />
<ElInput
v-model="form.description"
type="textarea"
:rows="3"
placeholder="请输入角色描述"
/>
</ElFormItem>
<ElFormItem label="状态">
<ElSwitch v-model="form.status" active-value="active" inactive-value="inactive" />
@@ -128,7 +133,15 @@
id: '3',
roleName: '企业客户',
roleCode: 'CUSTOMER_ENTERPRISE',
abilities: ['查看网卡', '操作网卡', '查看套餐', '购买套餐', '查看设备', '管理设备', '查看佣金'],
abilities: [
'查看网卡',
'操作网卡',
'查看套餐',
'购买套餐',
'查看设备',
'管理设备',
'查看佣金'
],
description: '企业客户角色，拥有完整业务权限',
status: 'active',
createTime: '2026-01-03 12:00:00'

1093
src/views/account-management/enterprise-customer/index.vue
View File

File diff suppressed because it is too large Load Diff

14
src/views/account-management/platform-account/index.vue
View File

@@ -333,23 +333,19 @@
const { columnChecks, columns } = useCheckedColumns(() => [
{
prop: 'ID',
label: 'ID',
width: 80
label: 'ID'
},
{
prop: 'username',
label: '账号名称',
minWidth: 120
label: '账号名称'
},
{
prop: 'phone',
label: '手机号',
width: 130
label: '手机号'
},
{
prop: 'user_type',
label: '账号类型',
width: 120,
formatter: (row: PlatformAccountResponse) => {
const typeMap: Record<number, string> = {
1: '超级管理员',
@@ -363,7 +359,6 @@
{
prop: 'status',
label: '状态',
width: 100,
formatter: (row: PlatformAccountResponse) => {
return h(ElSwitch, {
modelValue: row.status,
@@ -372,14 +367,13 @@
activeText: getStatusText(CommonStatus.ENABLED),
inactiveText: getStatusText(CommonStatus.DISABLED),
inlinePrompt: true,
'onUpdate:modelValue': (val: number) => handleStatusChange(row, val)
'onUpdate:modelValue': (val: string | number | boolean) => handleStatusChange(row, val as number)
})
}
},
{
prop: 'CreatedAt',
label: '创建时间',
width: 180,
formatter: (row: PlatformAccountResponse) => formatDateTime(row.CreatedAt)
},
{

179
src/views/account-management/shop-account/index.vue
View File

@@ -46,43 +46,72 @@
:title="dialogType === 'add' ? '新增代理账号' : '编辑代理账号'"
width="500px"
>
<ElForm ref="formRef" :model="formData" :rules="rules" label-width="120px">
<ElForm ref="formRef" :model="formData" :rules="rules" label-width="80px">
<ElFormItem label="用户名" prop="username">
<ElInput v-model="formData.username" placeholder="请输入用户名" />
</ElFormItem>
<ElFormItem v-if="dialogType === 'add'" label="密码" prop="password">
<ElInput v-model="formData.password" type="password" placeholder="请输入密码" show-password />
<ElInput
v-model="formData.password"
type="password"
placeholder="请输入密码"
show-password
/>
</ElFormItem>
<ElFormItem label="手机号" prop="phone">
<ElInput v-model="formData.phone" placeholder="请输入手机号" maxlength="11" />
</ElFormItem>
<ElFormItem label="店铺ID" prop="shop_id">
<ElInputNumber v-model="formData.shop_id" :min="1" placeholder="请输入店铺ID" style="width: 100%" />
<ElFormItem label="店铺" prop="shop_id">
<ElSelect
v-model="formData.shop_id"
placeholder="请选择店铺"
filterable
remote
:remote-method="searchShops"
:loading="shopLoading"
clearable
style="width: 100%"
>
<ElOption
v-for="shop in shopList"
:key="shop.id"
:label="shop.shop_name"
:value="shop.id"
/>
</ElSelect>
</ElFormItem>
</ElForm>
<template #footer>
<div class="dialog-footer">
<ElButton @click="dialogVisible = false">取消</ElButton>
<ElButton type="primary" @click="handleSubmit" :loading="submitLoading">提交</ElButton>
<ElButton type="primary" @click="handleSubmit" :loading="submitLoading"
>提交</ElButton
>
</div>
</template>
</ElDialog>
<!-- 修改密码对话框 -->
<ElDialog
v-model="passwordDialogVisible"
title="重置密码"
width="400px"
>
<ElDialog v-model="passwordDialogVisible" title="重置密码" width="400px">
<ElForm ref="passwordFormRef" :model="passwordForm" :rules="passwordRules">
<ElFormItem label="新密码" prop="new_password">
<ElInput v-model="passwordForm.new_password" type="password" placeholder="请输入新密码" show-password />
<ElInput
v-model="passwordForm.new_password"
type="password"
placeholder="请输入新密码"
show-password
/>
</ElFormItem>
</ElForm>
<template #footer>
<div class="dialog-footer">
<ElButton @click="passwordDialogVisible = false">取消</ElButton>
<ElButton type="primary" @click="handleChangePassword" :loading="passwordSubmitLoading">提交</ElButton>
<ElButton
type="primary"
@click="handleChangePassword"
:loading="passwordSubmitLoading"
>提交</ElButton
>
</div>
</template>
</ElDialog>
@@ -93,13 +122,13 @@
<script setup lang="ts">
import { h } from 'vue'
import { FormInstance, ElMessage, ElMessageBox, ElSwitch } from 'element-plus'
import { FormInstance, ElMessage, ElMessageBox, ElSwitch, ElSelect, ElOption } from 'element-plus'
import type { FormRules } from 'element-plus'
import { useCheckedColumns } from '@/composables/useCheckedColumns'
import ArtButtonTable from '@/components/core/forms/ArtButtonTable.vue'
import { ShopAccountService } from '@/api/modules'
import { ShopAccountService, ShopService } from '@/api/modules'
import type { SearchFormItem } from '@/types'
import type { ShopAccountResponse } from '@/types/api'
import type { ShopAccountResponse, ShopResponse } from '@/types/api'
import { formatDateTime } from '@/utils/business/format'
import { CommonStatus, getStatusText, STATUS_SELECT_OPTIONS } from '@/config/constants'
@@ -111,7 +140,10 @@
const loading = ref(false)
const submitLoading = ref(false)
const passwordSubmitLoading = ref(false)
const shopLoading = ref(false)
const currentAccountId = ref<number>(0)
const shopList = ref<ShopResponse[]>([])
const searchShopList = ref<ShopResponse[]>([])
// 定义表单搜索初始值
const initialSearchState = {
@@ -154,7 +186,7 @@
}
// 表单配置项
const searchFormItems: SearchFormItem[] = [
const searchFormItems = computed<SearchFormItem[]>(() => [
{
label: '用户名',
prop: 'username',
@@ -174,12 +206,17 @@
}
},
{
label: '店铺ID',
label: '店铺',
prop: 'shop_id',
type: 'input',
type: 'select',
options: searchShopList.value.map((shop) => ({ label: shop.shop_name, value: shop.id })),
config: {
clearable: true,
placeholder: '请输入店铺ID'
filterable: true,
remote: true,
remoteMethod: handleSearchShop,
loading: shopLoading.value,
placeholder: '请选择或搜索店铺'
}
},
{
@@ -192,14 +229,14 @@
placeholder: '请选择状态'
}
}
]
])
// 列配置
const columnOptions = [
{ label: 'ID', prop: 'id' },
{ label: '用户名', prop: 'username' },
{ label: '手机号', prop: 'phone' },
{ label: '店铺ID', prop: 'shop_id' },
{ label: '店铺名称', prop: 'shop_name' },
{ label: '状态', prop: 'status' },
{ label: '创建时间', prop: 'created_at' },
{ label: '操作', prop: 'operation' }
@@ -207,14 +244,8 @@
// 显示对话框
const showDialog = (type: string, row?: ShopAccountResponse) => {
dialogVisible.value = true
dialogType.value = type
// 重置表单验证状态
if (formRef.value) {
formRef.value.resetFields()
}
if (type === 'edit' && row) {
formData.id = row.id
formData.username = row.username
@@ -228,16 +259,26 @@
formData.shop_id = 0
formData.password = ''
}
// 重置表单验证状态
nextTick(() => {
formRef.value?.clearValidate()
})
dialogVisible.value = true
}
// 显示修改密码对话框
const showPasswordDialog = (row: ShopAccountResponse) => {
currentAccountId.value = row.id
passwordForm.new_password = ''
// 重置表单验证状态
nextTick(() => {
passwordFormRef.value?.clearValidate()
})
passwordDialogVisible.value = true
if (passwordFormRef.value) {
passwordFormRef.value.resetFields()
}
}
// 状态切换处理
@@ -260,27 +301,23 @@
{
prop: 'id',
label: 'ID',
width: 80
},
{
prop: 'username',
label: '用户名',
minWidth: 120
},
{
prop: 'phone',
label: '手机号',
width: 130
},
{
prop: 'shop_id',
label: '店铺ID',
width: 100
prop: 'shop_name',
label: '店铺名称',
showOverflowTooltip: true
},
{
prop: 'status',
label: '状态',
width: 100,
formatter: (row: ShopAccountResponse) => {
return h(ElSwitch, {
modelValue: row.status,
@@ -289,14 +326,13 @@
activeText: getStatusText(CommonStatus.ENABLED),
inactiveText: getStatusText(CommonStatus.DISABLED),
inlinePrompt: true,
'onUpdate:modelValue': (val: number) => handleStatusChange(row, val)
'onUpdate:modelValue': (val: string | number | boolean) => handleStatusChange(row, val as number)
})
}
},
{
prop: 'created_at',
label: '创建时间',
width: 180,
formatter: (row: ShopAccountResponse) => formatDateTime(row.created_at)
},
{
@@ -339,8 +375,69 @@
onMounted(() => {
getAccountList()
loadShopList()
loadSearchShopList()
})
// 加载店铺列表(用于新增/编辑对话框,默认加载20条)
const loadShopList = async (shopName?: string) => {
shopLoading.value = true
try {
const params: any = {
page: 1,
pageSize: 20
}
if (shopName) {
params.shop_name = shopName
}
const res = await ShopService.getShops(params)
if (res.code === 0) {
shopList.value = res.data.items || []
}
} catch (error) {
console.error('获取店铺列表失败:', error)
} finally {
shopLoading.value = false
}
}
// 加载搜索栏店铺列表(默认加载20条)
const loadSearchShopList = async (shopName?: string) => {
try {
const params: any = {
page: 1,
pageSize: 20
}
if (shopName) {
params.shop_name = shopName
}
const res = await ShopService.getShops(params)
if (res.code === 0) {
searchShopList.value = res.data.items || []
}
} catch (error) {
console.error('获取店铺列表失败:', error)
}
}
// 搜索店铺(用于新增/编辑对话框)
const searchShops = (query: string) => {
if (query) {
loadShopList(query)
} else {
loadShopList()
}
}
// 搜索店铺(用于搜索栏)
const handleSearchShop = (query: string) => {
if (query) {
loadSearchShopList(query)
} else {
loadSearchShopList()
}
}
// 提交修改密码
const handleChangePassword = async () => {
if (!passwordFormRef.value) return
@@ -412,8 +509,8 @@
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号格式', trigger: 'blur' }
],
shop_id: [
{ required: true, message: '请输入店铺ID', trigger: 'blur' },
{ type: 'number', min: 1, message: '店铺ID必须大于0', trigger: 'blur' }
{ required: true, message: '请选择店铺', trigger: 'change' },
{ type: 'number', min: 0, message: '店铺ID必须大于0', trigger: 'change' }
]
})