增加运营商管理
This commit is contained in:
aaron
parent
d4454b818e
commit
d05216743c
@ -25,6 +25,9 @@
|
||||
<a-menu-item key="user-list">
|
||||
<router-link to="/user/list">用户列表</router-link>
|
||||
</a-menu-item>
|
||||
<a-menu-item key="user-partner">
|
||||
<router-link to="/user/partner">运营商管理</router-link>
|
||||
</a-menu-item>
|
||||
<a-menu-item key="deliveryman-list">
|
||||
<router-link to="/deliveryman/list">配送员列表</router-link>
|
||||
</a-menu-item>
|
||||
@ -226,6 +229,11 @@ export default defineComponent({
|
||||
key: 'user-list',
|
||||
title: '用户列表',
|
||||
path: '/user/list'
|
||||
},
|
||||
{
|
||||
key: 'user-partner',
|
||||
title: '运营商管理',
|
||||
path: '/user/partner'
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
@ -22,6 +22,12 @@ const routes = [
|
||||
component: () => import('../views/user/UserList.vue'),
|
||||
meta: { title: '用户列表' }
|
||||
},
|
||||
{
|
||||
path: '/user/partner',
|
||||
name: 'PartnerList',
|
||||
component: () => import('../views/user/PartnerList.vue'),
|
||||
meta: { title: '运营商管理' }
|
||||
},
|
||||
{
|
||||
path: '/deliveryman/list',
|
||||
name: 'DeliverymanList',
|
||||
|
||||
@ -516,7 +516,6 @@ export default defineComponent({
|
||||
|
||||
<style scoped>
|
||||
.deliveryman-list {
|
||||
padding: 24px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
|
||||
530
src/views/user/PartnerList.vue
Normal file
530
src/views/user/PartnerList.vue
Normal file
@ -0,0 +1,530 @@
|
||||
<template>
|
||||
<page-container>
|
||||
<div class="partner-list">
|
||||
<div class="table-header">
|
||||
<h1>运营商管理</h1>
|
||||
</div>
|
||||
|
||||
<!-- 筛选区域 -->
|
||||
<div class="table-filter">
|
||||
<a-form layout="inline">
|
||||
<a-form-item label="手机号">
|
||||
<a-input
|
||||
v-model:value="filterForm.phone"
|
||||
placeholder="请输入手机号"
|
||||
style="width: 200px"
|
||||
allowClear
|
||||
@change="handleFilterChange"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="小区">
|
||||
<a-select
|
||||
v-model:value="filterForm.community_id"
|
||||
style="width: 200px"
|
||||
placeholder="请选择小区"
|
||||
allowClear
|
||||
@change="handleFilterChange"
|
||||
>
|
||||
<a-select-option
|
||||
v-for="community in communityList"
|
||||
:key="community.id"
|
||||
:value="community.id"
|
||||
>
|
||||
{{ community.name }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item>
|
||||
<a-space>
|
||||
<a-button type="primary" @click="handleSearch">
|
||||
查询
|
||||
</a-button>
|
||||
<a-button @click="handleReset">
|
||||
重置
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data-source="tableData"
|
||||
:pagination="pagination"
|
||||
:loading="loading"
|
||||
@change="handleTableChange"
|
||||
row-key="userid"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'phone'">
|
||||
{{ formatPhone(record.phone) }}
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
|
||||
<!-- 角色编辑模态框 -->
|
||||
<a-modal
|
||||
v-model:visible="roleModalVisible"
|
||||
title="修改用户角色"
|
||||
@ok="handleRolesSave"
|
||||
@cancel="handleRolesCancel"
|
||||
:confirmLoading="rolesSaving"
|
||||
>
|
||||
<a-form layout="vertical">
|
||||
<a-form-item label="用户角色">
|
||||
<a-checkbox-group v-model:value="selectedRoles">
|
||||
<a-checkbox
|
||||
v-for="role in availableRoles"
|
||||
:key="role.value"
|
||||
:value="role.value"
|
||||
:disabled="role.value === 'user'"
|
||||
>
|
||||
{{ role.label }}
|
||||
</a-checkbox>
|
||||
</a-checkbox-group>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
|
||||
<!-- 密码重置结果模态框 -->
|
||||
<a-modal
|
||||
v-model:visible="passwordModalVisible"
|
||||
title="重置密码结果"
|
||||
>
|
||||
<p>密码重置成功！新密码为：</p>
|
||||
<div class="password-display">
|
||||
<a-input ref="passwordInput" v-model:value="newPassword" readonly />
|
||||
</div>
|
||||
<p class="password-tip">请及时保存并告知用户</p>
|
||||
|
||||
<template #footer>
|
||||
<a-space>
|
||||
<a-button type="primary" @click="handleCopyPassword">
|
||||
复制密码
|
||||
</a-button>
|
||||
<a-button @click="handleClosePasswordModal">
|
||||
关闭
|
||||
</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</a-modal>
|
||||
</page-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent, ref, onMounted } from 'vue'
|
||||
import { message, Tag, Modal, Checkbox, Select } from 'ant-design-vue'
|
||||
import { getUserList } from '@/api/user'
|
||||
import request from '@/utils/request'
|
||||
import PageContainer from '@/components/PageContainer.vue'
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
PageContainer,
|
||||
ATag: Tag,
|
||||
ACheckbox: Checkbox,
|
||||
ACheckboxGroup: Checkbox.Group,
|
||||
ASelect: Select,
|
||||
ASelectOption: Select.Option
|
||||
},
|
||||
setup() {
|
||||
const loading = ref(false)
|
||||
const tableData = ref([])
|
||||
const communityList = ref([]) // 小区列表
|
||||
const pagination = ref({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
showSizeChanger: true,
|
||||
showTotal: (total) => `共 ${total} 条记录`
|
||||
})
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: 'ID',
|
||||
dataIndex: 'userid',
|
||||
key: 'userid',
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
title: '昵称',
|
||||
dataIndex: 'nickname',
|
||||
key: 'nickname',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '手机号',
|
||||
dataIndex: 'phone',
|
||||
key: 'phone',
|
||||
width: 120,
|
||||
}
|
||||
]
|
||||
|
||||
// 格式化手机号，中间4位显示*
|
||||
const formatPhone = (phone) => {
|
||||
if (!phone) return ''
|
||||
return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
|
||||
}
|
||||
|
||||
// 添加筛选表单
|
||||
const filterForm = ref({
|
||||
phone: undefined,
|
||||
community_id: undefined
|
||||
})
|
||||
|
||||
// 获取运营商列表数据
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
loading.value = true
|
||||
const params = {
|
||||
skip: (pagination.value.current - 1) * pagination.value.pageSize,
|
||||
limit: pagination.value.pageSize,
|
||||
role: 'partner', // 固定为运营商角色
|
||||
phone: filterForm.value.phone,
|
||||
community_id: filterForm.value.community_id
|
||||
}
|
||||
|
||||
// 移除空值参数
|
||||
Object.keys(params).forEach(key => {
|
||||
if (params[key] === undefined || params[key] === '') {
|
||||
delete params[key]
|
||||
}
|
||||
})
|
||||
|
||||
const res = await getUserList(params)
|
||||
if (res.code === 200) {
|
||||
tableData.value = res.data.items
|
||||
pagination.value.total = res.data.total
|
||||
} else {
|
||||
message.error(res.message || '获取数据失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取运营商列表失败:', error)
|
||||
message.error('获取数据失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 表格变化处理（分页、排序等）
|
||||
const handleTableChange = (pag) => {
|
||||
pagination.value.current = pag.current
|
||||
pagination.value.pageSize = pag.pageSize
|
||||
fetchData()
|
||||
}
|
||||
|
||||
// 添加角色名称映射函数
|
||||
const getRoleName = (role) => {
|
||||
const roleMap = {
|
||||
'admin': '管理员',
|
||||
'user': '普通用户',
|
||||
'merchant': '商家',
|
||||
'deliveryman': '配送员',
|
||||
'partner': '运营商'
|
||||
}
|
||||
return roleMap[role] || role
|
||||
}
|
||||
|
||||
// 添加角色颜色映射函数
|
||||
const getRoleColor = (role) => {
|
||||
const colorMap = {
|
||||
'admin': 'red',
|
||||
'user': 'blue',
|
||||
'merchant': 'orange',
|
||||
'deliveryman': 'purple',
|
||||
'partner': 'green'
|
||||
}
|
||||
return colorMap[role] || 'default'
|
||||
}
|
||||
|
||||
// 共用的状态
|
||||
const currentUserId = ref(null)
|
||||
|
||||
// 角色编辑相关状态
|
||||
const roleModalVisible = ref(false)
|
||||
const rolesSaving = ref(false)
|
||||
const selectedRoles = ref([])
|
||||
|
||||
// 密码重置相关状态
|
||||
const passwordModalVisible = ref(false)
|
||||
const newPassword = ref('')
|
||||
const passwordInput = ref(null)
|
||||
|
||||
// 可选角色列表
|
||||
const availableRoles = [
|
||||
{ label: '普通用户', value: 'user' },
|
||||
{ label: '商家', value: 'merchant' },
|
||||
{ label: '配送员', value: 'deliveryman' },
|
||||
{ label: '运营商', value: 'partner' }
|
||||
]
|
||||
|
||||
// 角色编辑处理函数
|
||||
const handleEditRoles = (record) => {
|
||||
currentUserId.value = record.userid
|
||||
selectedRoles.value = record.roles || ['user']
|
||||
roleModalVisible.value = true
|
||||
}
|
||||
|
||||
// 保存角色修改
|
||||
const handleRolesSave = async () => {
|
||||
try {
|
||||
rolesSaving.value = true
|
||||
|
||||
// 获取原有角色列表
|
||||
const originalRoles = tableData.value.find(
|
||||
user => user.userid === currentUserId.value
|
||||
)?.roles || []
|
||||
|
||||
// 如果原来有 admin 角色，确保保留
|
||||
const newRoles = selectedRoles.value
|
||||
if (originalRoles.includes('admin')) {
|
||||
newRoles.push('admin')
|
||||
}
|
||||
|
||||
// 确保用户角色始终存在
|
||||
if (!newRoles.includes('user')) {
|
||||
newRoles.push('user')
|
||||
}
|
||||
|
||||
await request.put(`/api/user/roles`, {
|
||||
user_id: currentUserId.value,
|
||||
roles: newRoles
|
||||
})
|
||||
|
||||
message.success('角色修改成功')
|
||||
roleModalVisible.value = false
|
||||
fetchData() // 刷新列表
|
||||
} catch (error) {
|
||||
console.error('修改角色失败:', error)
|
||||
message.error('修改角色失败')
|
||||
} finally {
|
||||
rolesSaving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 修改取消处理函数
|
||||
const handleRolesCancel = () => {
|
||||
roleModalVisible.value = false
|
||||
resetStates()
|
||||
}
|
||||
|
||||
// 处理筛选变化
|
||||
const handleFilterChange = () => {
|
||||
pagination.value.current = 1 // 重置页码
|
||||
}
|
||||
|
||||
// 查询按钮点击
|
||||
const handleSearch = () => {
|
||||
pagination.value.current = 1
|
||||
fetchData()
|
||||
}
|
||||
|
||||
// 重置按钮点击
|
||||
const handleReset = () => {
|
||||
filterForm.value = {
|
||||
phone: undefined,
|
||||
community_id: undefined
|
||||
}
|
||||
pagination.value.current = 1
|
||||
fetchData()
|
||||
}
|
||||
|
||||
// 生成随机密码
|
||||
const generatePassword = () => {
|
||||
const chars = '1234567890'
|
||||
let password = ''
|
||||
for (let i = 0; i < 6; i++) {
|
||||
password += chars.charAt(Math.floor(Math.random() * chars.length))
|
||||
}
|
||||
return password
|
||||
}
|
||||
|
||||
// 处理重置密码
|
||||
const handleResetPassword = (record) => {
|
||||
Modal.confirm({
|
||||
title: '重置密码',
|
||||
content: `确定要重置用户 ${record.nickname || record.phone} 的密码吗？`,
|
||||
async onOk() {
|
||||
try {
|
||||
const password = generatePassword()
|
||||
await request.post('/api/user/reset-password', {
|
||||
user_id: record.userid,
|
||||
new_password: password
|
||||
})
|
||||
|
||||
newPassword.value = password
|
||||
passwordModalVisible.value = true
|
||||
message.success('密码重置成功')
|
||||
} catch (error) {
|
||||
console.error('重置密码失败:', error)
|
||||
message.error('重置密码失败')
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 复制密码
|
||||
const handleCopyPassword = async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(newPassword.value)
|
||||
message.success('密码已复制到剪贴板')
|
||||
} catch (err) {
|
||||
// 降级处理：如果剪贴板API不可用，使用输入框选择
|
||||
passwordInput.value.select()
|
||||
document.execCommand('copy')
|
||||
message.success('密码已复制到剪贴板')
|
||||
}
|
||||
}
|
||||
|
||||
// 关闭密码模态框
|
||||
const handleClosePasswordModal = () => {
|
||||
passwordModalVisible.value = false
|
||||
newPassword.value = ''
|
||||
resetStates()
|
||||
}
|
||||
|
||||
// 重置状态的函数
|
||||
const resetStates = () => {
|
||||
currentUserId.value = null
|
||||
selectedRoles.value = []
|
||||
}
|
||||
|
||||
// 获取小区列表
|
||||
const fetchCommunityList = async () => {
|
||||
try {
|
||||
const res = await request.get('/api/community')
|
||||
if (res.code === 200 && res.data && res.data.items) {
|
||||
communityList.value = res.data.items || []
|
||||
} else {
|
||||
message.error(res.message || '获取小区列表失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取小区列表失败:', error)
|
||||
message.error('获取小区列表失败')
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetchData()
|
||||
fetchCommunityList() // 获取小区列表
|
||||
})
|
||||
|
||||
return {
|
||||
loading,
|
||||
columns,
|
||||
tableData,
|
||||
communityList, // 返回小区列表
|
||||
pagination,
|
||||
handleTableChange,
|
||||
formatPhone,
|
||||
getRoleName,
|
||||
getRoleColor,
|
||||
roleModalVisible,
|
||||
rolesSaving,
|
||||
selectedRoles,
|
||||
availableRoles,
|
||||
handleEditRoles,
|
||||
handleRolesSave,
|
||||
handleRolesCancel,
|
||||
filterForm,
|
||||
handleFilterChange,
|
||||
handleSearch,
|
||||
handleReset,
|
||||
passwordModalVisible,
|
||||
newPassword,
|
||||
passwordInput,
|
||||
handleResetPassword,
|
||||
handleCopyPassword,
|
||||
handleClosePasswordModal,
|
||||
currentUserId
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.table-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.table-header h1 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
:deep(.ant-table-content) {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.partner-list {
|
||||
/* 保留其他必要样式 */
|
||||
}
|
||||
|
||||
:deep(.ant-tag) {
|
||||
min-width: 80px;
|
||||
text-align: center;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
:deep(.ant-space) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
:deep(.ant-btn-link) {
|
||||
padding: 0 4px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.table-filter {
|
||||
margin-bottom: 16px;
|
||||
padding: 16px 24px;
|
||||
background: #fff;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
:deep(.ant-form-item) {
|
||||
margin-bottom: 0;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
:deep(.ant-form-item:last-child) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.password-display {
|
||||
margin: 16px 0;
|
||||
background: #f5f5f5;
|
||||
padding: 12px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.password-tip {
|
||||
color: #ff4d4f;
|
||||
margin-top: 8px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
:deep(.ant-input[readonly]) {
|
||||
background-color: #fff;
|
||||
cursor: text;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
font-family: monospace;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
:deep(.ant-select) {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
:deep(.ant-input) {
|
||||
width: 200px !important;
|
||||
}
|
||||
</style>
|
||||
@ -275,7 +275,8 @@ export default defineComponent({
|
||||
'admin': '管理员',
|
||||
'user': '普通用户',
|
||||
'merchant': '商家',
|
||||
'deliveryman': '配送员'
|
||||
'deliveryman': '配送员',
|
||||
'partner': '运营商'
|
||||
}
|
||||
return roleMap[role] || role
|
||||
}
|
||||
@ -286,7 +287,8 @@ export default defineComponent({
|
||||
'admin': 'red',
|
||||
'user': 'blue',
|
||||
'merchant': 'orange',
|
||||
'deliveryman': 'purple'
|
||||
'deliveryman': 'purple',
|
||||
'partner': 'green'
|
||||
}
|
||||
return colorMap[role] || 'default'
|
||||
}
|
||||
@ -308,7 +310,8 @@ export default defineComponent({
|
||||
const availableRoles = [
|
||||
{ label: '普通用户', value: 'user' },
|
||||
{ label: '商家', value: 'merchant' },
|
||||
{ label: '配送员', value: 'deliveryman' }
|
||||
{ label: '配送员', value: 'deliveryman' },
|
||||
{ label: '运营商', value: 'partner' }
|
||||
]
|
||||
|
||||
// 角色编辑处理函数
|
||||
|
||||
Loading…
Reference in New Issue
Block a user