fix:将侧边栏兼容移动端
This commit is contained in:
+10
-2
@@ -105,16 +105,24 @@ const forgetPassword = () => {
|
||||
const handleLogin = () => {
|
||||
loginFormRef.value?.validate(async valid =>{
|
||||
window.localStorage.removeItem('token')
|
||||
window.localStorage.removeItem('tokenExpire')
|
||||
window.localStorage.removeItem('userInfo')
|
||||
if (valid) {
|
||||
loading.value = true
|
||||
let resp = await userLogin(loginForm.username, loginForm.password)
|
||||
console.log("login:",resp)
|
||||
loading.value = false
|
||||
if(resp.code === 200){
|
||||
|
||||
window.localStorage.setItem('token',resp.data.token)
|
||||
// 保存token和过期时间
|
||||
window.localStorage.setItem('token', resp.data.token)
|
||||
if (resp.data.expire) {
|
||||
window.localStorage.setItem('tokenExpire', resp.data.expire.toString())
|
||||
}
|
||||
|
||||
let userInfo = await getUserInfo()
|
||||
if(userInfo.data.is_admin){
|
||||
// 保存用户信息到localStorage
|
||||
window.localStorage.setItem('userInfo', JSON.stringify(userInfo.data))
|
||||
await router.push('/dashboard')
|
||||
} else {
|
||||
ElMessage.warning('你不是管理员，不能登陆到后台控制面板')
|
||||
|
||||
@@ -0,0 +1,906 @@
|
||||
<template>
|
||||
<div class="group-buy-manage-container">
|
||||
<el-card class="main-container" shadow="never">
|
||||
<el-tabs v-model="activeTab" class="group-buy-tabs">
|
||||
<!-- 拼团活动标签页 -->
|
||||
<el-tab-pane label="拼团活动" name="activity">
|
||||
<div class="header-actions">
|
||||
<el-button type="primary" icon="Plus" @click="openCreateDialog">
|
||||
创建随机队伍
|
||||
</el-button>
|
||||
<el-button type="success" icon="Download" @click="handleExport" :loading="exportLoading">
|
||||
导出成功队伍
|
||||
</el-button>
|
||||
<el-button type="info" icon="Refresh" @click="fetchGroupList" :loading="activityLoading">
|
||||
刷新列表
|
||||
</el-button>
|
||||
<el-button type="danger" @click="handleClearAll">
|
||||
清除所有队伍
|
||||
</el-button>
|
||||
<el-button type="warning" @click="showClearUserDialog = true">
|
||||
清除用户队伍
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<div class="table-section">
|
||||
<el-table :data="groupList" v-loading="activityLoading" stripe border>
|
||||
<el-table-column prop="id" label="队伍ID" />
|
||||
<el-table-column prop="name" label="队伍名称" min-width="150" />
|
||||
<el-table-column prop="currentMembers" label="当前人数" width="100" align="center" />
|
||||
<el-table-column prop="maxMembers" label="需要人数" width="100" align="center" />
|
||||
<el-table-column label="状态" width="120">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="getStatusType(row.status)">
|
||||
{{ getStatusText(row.status) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="280" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button
|
||||
v-if="row.status === 'pending'"
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="handleAddRandomUser(row)"
|
||||
:loading="row.addingUser"
|
||||
>
|
||||
添加伪人
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="row.status === 'success'"
|
||||
type="success"
|
||||
size="small"
|
||||
@click="handleSetOrder(row)"
|
||||
:loading="row.settingOrder"
|
||||
>
|
||||
下发订单
|
||||
</el-button>
|
||||
<el-button
|
||||
type="info"
|
||||
size="small"
|
||||
@click="handleViewMembers(row)"
|
||||
>
|
||||
查看详情
|
||||
</el-button>
|
||||
<el-button
|
||||
type="danger"
|
||||
size="small"
|
||||
@click="handleRemoveGroup(row)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
|
||||
<!-- 拼团类型标签页 -->
|
||||
<el-tab-pane label="拼团类型" name="type">
|
||||
<div class="header-actions">
|
||||
<el-button type="primary" icon="Plus" @click="handleAddType">新增类型</el-button>
|
||||
<el-select v-model="searchTag" placeholder="请选择标签" style="width: 180px; margin-left: 12px" @change="handleTagChange">
|
||||
<el-option v-for="tag in tagList" :key="tag" :label="tag" :value="tag" />
|
||||
</el-select>
|
||||
<el-input v-model="searchKey" placeholder="关键词搜索" style="width: 200px; margin-left: 12px" clearable :disabled="!searchTag" @keyup.enter="fetchTypeList" />
|
||||
<el-button type="info" icon="Refresh" @click="fetchTypeList" :loading="typeLoading" :disabled="!searchTag" style="margin-left: 12px">刷新</el-button>
|
||||
</div>
|
||||
|
||||
<div class="table-section">
|
||||
<el-empty v-if="!searchTag" description="请先选择标签" />
|
||||
<template v-else>
|
||||
<el-table :data="typeTableData" v-loading="typeLoading" stripe border>
|
||||
<el-table-column prop="id" label="ID" width="80" />
|
||||
<el-table-column prop="name" label="名称" min-width="120" />
|
||||
<el-table-column label="价格" width="120">
|
||||
<template #default="{ row }">¥{{ (row.price / 100).toFixed(2) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="续费价格" width="120">
|
||||
<template #default="{ row }">¥{{ (row.renewPrice / 100).toFixed(2) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="maxPerson" label="拼团人数" width="100" align="center" />
|
||||
<el-table-column prop="tag" label="标签" width="120">
|
||||
<template #default="{ row }">
|
||||
<el-tag v-if="row.tag" type="info">{{ row.tag }}</el-tag>
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="过期时间" width="180">
|
||||
<template #default="{ row }">{{ row.expireTime ? formatTime(row.expireTime) : '永久' }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="note" label="备注" min-width="150" show-overflow-tooltip />
|
||||
<el-table-column label="操作" width="160" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button type="primary" size="small" @click="handleEditType(row)">编辑</el-button>
|
||||
<el-button type="danger" size="small" @click="handleDeleteType(row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="pagination-wrapper">
|
||||
<el-pagination v-model:current-page="typePage" v-model:page-size="typePageSize" :total="typeTotal" :page-sizes="[10, 20, 50]" layout="total, sizes, prev, pager, next" @size-change="fetchTypeList" @current-change="fetchTypeList" />
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-card>
|
||||
|
||||
<!-- 创建随机队伍对话框 -->
|
||||
<el-dialog
|
||||
v-model="showCreateDialog"
|
||||
title="创建随机伪人队伍"
|
||||
width="500px"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<el-form :model="createForm" :rules="createRules" ref="createFormRef" label-width="100px">
|
||||
<el-form-item label="队伍名称" prop="name">
|
||||
<el-input v-model="createForm.name" placeholder="请输入队伍名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="标签" prop="tag">
|
||||
<el-select v-model="createForm.tag" placeholder="请选择标签" style="width: 100%" @change="handleCreateTagChange">
|
||||
<el-option v-for="tag in tagList" :key="tag" :label="tag" :value="tag" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="拼团类型" prop="groupBuyTypeId">
|
||||
<el-select v-model="createForm.groupBuyTypeId" placeholder="请先选择标签" :disabled="!createForm.tag" style="width: 100%">
|
||||
<el-option v-for="item in createTypeList" :key="item.id" :label="`${item.name} (${item.maxPerson}人)`" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="showCreateDialog = false">取消</el-button>
|
||||
<el-button type="primary" @click="handleCreate" :loading="createLoading">
|
||||
创建
|
||||
</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 查看成员对话框 -->
|
||||
<el-dialog
|
||||
v-model="showMembersDialog"
|
||||
title="队伍成员列表"
|
||||
width="700px"
|
||||
>
|
||||
<el-table :data="currentMembers" border stripe>
|
||||
<el-table-column label="头像" width="80" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-avatar :size="50" :src="row.cover" v-if="row.cover">
|
||||
<img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png" />
|
||||
</el-avatar>
|
||||
<el-avatar :size="50" v-else>
|
||||
{{ row.username?.charAt(0) || '?' }}
|
||||
</el-avatar>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="userId" label="用户ID" width="100" />
|
||||
<el-table-column prop="username" label="用户名" min-width="120" />
|
||||
<el-table-column label="队长" width="80" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-tag v-if="row.teamLeader" type="warning" size="small">队长</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="120" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-button type="danger" size="small" @click="handleClearUserGroups(row.userId)">清除队伍</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 清除用户队伍对话框 -->
|
||||
<el-dialog
|
||||
v-model="showClearUserDialog"
|
||||
title="清除指定用户的所有队伍"
|
||||
width="400px"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<el-form :model="clearUserForm" label-width="80px">
|
||||
<el-form-item label="用户ID">
|
||||
<el-input v-model="clearUserForm.userId" placeholder="请输入用户ID" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="showClearUserDialog = false">取消</el-button>
|
||||
<el-button type="danger" @click="handleClearUserSubmit" :loading="clearUserLoading">确认清除</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 拼团类型表单对话框 -->
|
||||
<el-dialog v-model="typeDialogVisible" :title="isEditType ? '编辑拼团类型' : '新增拼团类型'" width="500px" :close-on-click-modal="false">
|
||||
<el-form :model="typeForm" :rules="typeRules" ref="typeFormRef" label-width="100px">
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input v-model="typeForm.name" placeholder="请输入名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="价格(分)" prop="price">
|
||||
<el-input-number v-model="typeForm.price" :min="0" style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item label="续费价格(分)" prop="renewPrice">
|
||||
<el-input-number v-model="typeForm.renewPrice" :min="0" style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item label="拼团人数" prop="maxPerson">
|
||||
<el-input-number v-model="typeForm.maxPerson" :min="2" :max="100" style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item label="标签" prop="tag">
|
||||
<el-select v-model="typeForm.tag" placeholder="选择标签" filterable allow-create style="width: 100%">
|
||||
<el-option v-for="tag in tagList" :key="tag" :label="tag" :value="tag" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="过期时间" prop="expireTime">
|
||||
<el-date-picker v-model="typeForm.expireTime" type="datetime" placeholder="选择过期时间" style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注字段">
|
||||
<div class="note-fields-container">
|
||||
<el-button type="primary" size="small" @click="addNoteField" style="margin-bottom: 10px">+ 添加字段</el-button>
|
||||
<el-table :data="typeForm.noteFields" border size="small" v-if="typeForm.noteFields.length">
|
||||
<el-table-column label="名称" min-width="120">
|
||||
<template #default="{ row }">
|
||||
<el-input v-model="row.label" placeholder="如：内存" size="small" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="默认值" min-width="120">
|
||||
<template #default="{ row }">
|
||||
<el-input v-model="row.defaultValue" placeholder="如：20GB" size="small" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="60" align="center">
|
||||
<template #default="{ $index }">
|
||||
<el-button type="danger" size="small" link @click="removeNoteField($index)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="typeDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="handleTypeSubmit" :loading="typeSubmitLoading">确定</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, watch } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import {
|
||||
getGroupBuyList,
|
||||
getGroupBuyDetail,
|
||||
addRandomUser,
|
||||
addRandomGroup,
|
||||
exportIdcInfo,
|
||||
setOrder
|
||||
} from '@/api/admin/activity'
|
||||
import {
|
||||
getGroupBuyTypeList,
|
||||
getGroupBuyTypeTags,
|
||||
removeGroupBuy,
|
||||
clearAllGroupBuy,
|
||||
clearUserGroupBuy,
|
||||
addGroupBuyType,
|
||||
updateGroupBuyType,
|
||||
deleteGroupBuyType
|
||||
} from '@/api/groupBuy'
|
||||
|
||||
const route = useRoute()
|
||||
|
||||
// 当前激活的标签页
|
||||
const activeTab = ref('activity')
|
||||
|
||||
// ==================== 拼团活动相关 ====================
|
||||
const activityLoading = ref(false)
|
||||
const exportLoading = ref(false)
|
||||
const createLoading = ref(false)
|
||||
const groupList = ref([])
|
||||
|
||||
const showCreateDialog = ref(false)
|
||||
const showMembersDialog = ref(false)
|
||||
const showClearUserDialog = ref(false)
|
||||
const currentMembers = ref([])
|
||||
const clearUserLoading = ref(false)
|
||||
const clearUserForm = reactive({ userId: '' })
|
||||
|
||||
const createFormRef = ref(null)
|
||||
const createForm = reactive({
|
||||
name: '',
|
||||
tag: '',
|
||||
groupBuyTypeId: ''
|
||||
})
|
||||
const createTypeList = ref([])
|
||||
const tagList = ref([])
|
||||
|
||||
const createRules = {
|
||||
name: [
|
||||
{ required: true, message: '请输入队伍名称', trigger: 'blur' }
|
||||
],
|
||||
tag: [
|
||||
{ required: true, message: '请选择标签', trigger: 'change' }
|
||||
],
|
||||
groupBuyTypeId: [
|
||||
{ required: true, message: '请选择拼团类型', trigger: 'change' }
|
||||
]
|
||||
}
|
||||
|
||||
// ==================== 拼团类型相关 ====================
|
||||
const typeLoading = ref(false)
|
||||
const typeTableData = ref([])
|
||||
const typeTotal = ref(0)
|
||||
const typePage = ref(1)
|
||||
const typePageSize = ref(10)
|
||||
const searchKey = ref('')
|
||||
const searchTag = ref('')
|
||||
const typeDialogVisible = ref(false)
|
||||
const isEditType = ref(false)
|
||||
const typeSubmitLoading = ref(false)
|
||||
const typeFormRef = ref(null)
|
||||
|
||||
const typeForm = reactive({
|
||||
id: '',
|
||||
name: '',
|
||||
price: 0,
|
||||
renewPrice: 0,
|
||||
maxPerson: 5,
|
||||
tag: '',
|
||||
expireTime: null,
|
||||
noteFields: []
|
||||
})
|
||||
|
||||
const typeRules = {
|
||||
name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
|
||||
price: [{ required: true, message: '请输入价格', trigger: 'blur' }],
|
||||
renewPrice: [{ required: true, message: '请输入续费价格', trigger: 'blur' }],
|
||||
maxPerson: [{ required: true, message: '请输入拼团人数', trigger: 'blur' }],
|
||||
tag: [{ required: true, message: '请选择标签', trigger: 'change' }],
|
||||
expireTime: [{ required: true, message: '请选择过期时间', trigger: 'change' }]
|
||||
}
|
||||
|
||||
// ==================== 通用方法 ====================
|
||||
const formatTime = (timeStr) => {
|
||||
if (!timeStr) return '-'
|
||||
return new Date(timeStr).toLocaleString('zh-CN')
|
||||
}
|
||||
|
||||
// 获取标签列表
|
||||
const fetchTags = async () => {
|
||||
try {
|
||||
const res = await getGroupBuyTypeTags()
|
||||
if (res.code === 200) {
|
||||
tagList.value = res.data || []
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取标签失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// ==================== 拼团活动方法 ====================
|
||||
// 根据 tag 获取拼团类型列表（用于创建对话框）
|
||||
const fetchCreateTypeListByTag = async (tag) => {
|
||||
try {
|
||||
const res = await getGroupBuyTypeList({ page: 1, count: 100, tag })
|
||||
if (res.code === 200) {
|
||||
createTypeList.value = res.data?.data || []
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取拼团类型失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// tag 变化时获取对应的拼团类型（创建对话框）
|
||||
const handleCreateTagChange = (tag) => {
|
||||
createForm.groupBuyTypeId = ''
|
||||
createTypeList.value = []
|
||||
if (tag) {
|
||||
fetchCreateTypeListByTag(tag)
|
||||
}
|
||||
}
|
||||
|
||||
// 打开创建对话框
|
||||
const openCreateDialog = () => {
|
||||
createForm.name = ''
|
||||
createForm.tag = ''
|
||||
createForm.groupBuyTypeId = ''
|
||||
createTypeList.value = []
|
||||
fetchTags()
|
||||
showCreateDialog.value = true
|
||||
}
|
||||
|
||||
// 获取队伍列表
|
||||
const fetchGroupList = async () => {
|
||||
activityLoading.value = true
|
||||
try {
|
||||
const res = await getGroupBuyList()
|
||||
if (res.data.code === 200) {
|
||||
const allGroups = res.data.data.group_buy_list || []
|
||||
const lackGroups = res.data.data.lack_group_buy_list || []
|
||||
const successGroups = res.data.data.success_group_buy_list || []
|
||||
|
||||
const successIds = successGroups.map(g => g.group_buy_id)
|
||||
const lackIds = lackGroups.map(g => g.group_buy_id)
|
||||
|
||||
groupList.value = allGroups.map(group => {
|
||||
let status = 'empty'
|
||||
if (successIds.includes(group.group_buy_id)) {
|
||||
status = 'success'
|
||||
} else if (lackIds.includes(group.group_buy_id)) {
|
||||
status = 'pending'
|
||||
}
|
||||
|
||||
return {
|
||||
id: group.group_buy_id,
|
||||
name: group.name,
|
||||
type: group.maxPerson === 5 ? 0 : 1,
|
||||
currentMembers: group.users?.length || 0,
|
||||
maxMembers: group.maxPerson,
|
||||
status: status,
|
||||
createTime: group.createTime || '-',
|
||||
members: group.users || [],
|
||||
addingUser: false,
|
||||
settingOrder: false
|
||||
}
|
||||
})
|
||||
|
||||
ElMessage.success(`加载成功，共 ${allGroups.length} 个队伍`)
|
||||
} else {
|
||||
ElMessage.error(res.message || '获取队伍列表失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取队伍列表出错:', error)
|
||||
ElMessage.error('网络错误，请稍后重试')
|
||||
} finally {
|
||||
activityLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const getStatusText = (status) => {
|
||||
const statusMap = {
|
||||
'empty': '空队伍',
|
||||
'pending': '进行中',
|
||||
'success': '已满员'
|
||||
}
|
||||
return statusMap[status] || status
|
||||
}
|
||||
|
||||
const getStatusType = (status) => {
|
||||
const typeMap = {
|
||||
'empty': 'info',
|
||||
'pending': 'warning',
|
||||
'success': 'success'
|
||||
}
|
||||
return typeMap[status] || ''
|
||||
}
|
||||
|
||||
const handleCreate = async () => {
|
||||
if (!createFormRef.value) return
|
||||
|
||||
await createFormRef.value.validate(async (valid) => {
|
||||
if (valid) {
|
||||
createLoading.value = true
|
||||
try {
|
||||
const res = await addRandomGroup({ name: createForm.name, group_buy_type_id: String(createForm.groupBuyTypeId) })
|
||||
|
||||
if (res.data.code === 200) {
|
||||
ElMessage.success(`创建成功！队伍ID: ${res.data.group_buy_id}`)
|
||||
showCreateDialog.value = false
|
||||
createForm.name = ''
|
||||
createForm.groupBuyTypeId = ''
|
||||
fetchGroupList()
|
||||
} else {
|
||||
ElMessage.error(res.message || '创建失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('创建队伍出错:', error)
|
||||
ElMessage.error('网络错误，请稍后重试')
|
||||
} finally {
|
||||
createLoading.value = false
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const handleAddRandomUser = async (row) => {
|
||||
row.addingUser = true
|
||||
try {
|
||||
const res = await addRandomUser(row.id)
|
||||
if (res.data.code === 200) {
|
||||
ElMessage.success('添加伪人成功')
|
||||
fetchGroupList()
|
||||
} else {
|
||||
ElMessage.error(res.message || '添加伪人失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('添加伪人出错:', error)
|
||||
ElMessage.error('网络错误，请稍后重试')
|
||||
} finally {
|
||||
row.addingUser = false
|
||||
}
|
||||
}
|
||||
|
||||
const handleSetOrder = async (row) => {
|
||||
try {
|
||||
await ElMessageBox.confirm(
|
||||
'确定要为该队伍下发订单吗？',
|
||||
'确认操作',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}
|
||||
)
|
||||
|
||||
row.settingOrder = true
|
||||
try {
|
||||
const res = await setOrder(row.id)
|
||||
if (res.data.code === 200) {
|
||||
ElMessage.success('订单下发成功')
|
||||
fetchGroupList()
|
||||
} else {
|
||||
ElMessage.error(res.message || '订单下发失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('下发订单出错:', error)
|
||||
ElMessage.error('网络错误，请稍后重试')
|
||||
} finally {
|
||||
row.settingOrder = false
|
||||
}
|
||||
} catch {
|
||||
// 用户取消操作
|
||||
}
|
||||
}
|
||||
|
||||
const handleViewMembers = async (row) => {
|
||||
try {
|
||||
const res = await getGroupBuyDetail(row.id)
|
||||
if (res && res.data && res.data.code === 200) {
|
||||
const detail = res.data.data
|
||||
currentMembers.value = (detail.users || []).map(member => ({
|
||||
userId: member.user_id,
|
||||
username: member.user_name || `用户${member.user_id}`,
|
||||
cover: member.cover || '',
|
||||
teamLeader: member.team_leader || false,
|
||||
idcUid: member.idc_uid || '-',
|
||||
idcPhone: member.idc_phone || '-'
|
||||
}))
|
||||
|
||||
row.name = detail.name
|
||||
row.currentMembers = detail.users?.length || 0
|
||||
row.maxMembers = detail.maxPerson
|
||||
row.members = detail.users || []
|
||||
} else {
|
||||
currentMembers.value = row.members.map(member => ({
|
||||
userId: member.user_id,
|
||||
username: member.user_name || `用户${member.user_id}`,
|
||||
cover: member.cover || '',
|
||||
teamLeader: member.team_leader || false,
|
||||
idcUid: member.idc_uid || '-',
|
||||
idcPhone: member.idc_phone || '-'
|
||||
}))
|
||||
}
|
||||
showMembersDialog.value = true
|
||||
} catch (error) {
|
||||
console.error('获取成员信息失败:', error)
|
||||
currentMembers.value = row.members.map(member => ({
|
||||
userId: member.user_id,
|
||||
username: member.user_name || `用户${member.user_id}`,
|
||||
cover: member.cover || '',
|
||||
teamLeader: member.team_leader || false,
|
||||
idcUid: member.idc_uid || '-',
|
||||
idcPhone: member.idc_phone || '-'
|
||||
}))
|
||||
showMembersDialog.value = true
|
||||
}
|
||||
}
|
||||
|
||||
const handleExport = async () => {
|
||||
exportLoading.value = true
|
||||
try {
|
||||
const res = await exportIdcInfo()
|
||||
|
||||
if (res.data && res.data.code === 200) {
|
||||
const jsonStr = JSON.stringify(res.data.data, null, 2)
|
||||
const blob = new Blob([jsonStr], { type: 'application/json' })
|
||||
const url = window.URL.createObjectURL(blob)
|
||||
const link = document.createElement('a')
|
||||
link.href = url
|
||||
link.download = `拼团成功队伍_${new Date().getTime()}.json`
|
||||
document.body.appendChild(link)
|
||||
link.click()
|
||||
document.body.removeChild(link)
|
||||
window.URL.revokeObjectURL(url)
|
||||
|
||||
ElMessage.success('导出成功')
|
||||
} else {
|
||||
ElMessage.error(res.data?.message || '导出失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('导出出错:', error)
|
||||
ElMessage.error('导出失败，请稍后重试')
|
||||
} finally {
|
||||
exportLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const handleRemoveGroup = async (row) => {
|
||||
try {
|
||||
await ElMessageBox.confirm('确定要删除该队伍吗？', '确认删除', { type: 'warning' })
|
||||
const res = await removeGroupBuy(row.id)
|
||||
if (res.code === 200) {
|
||||
ElMessage.success('删除成功')
|
||||
fetchGroupList()
|
||||
} else {
|
||||
ElMessage.error(res.message || '删除失败')
|
||||
}
|
||||
} catch { /* 取消 */ }
|
||||
}
|
||||
|
||||
const handleClearAll = async () => {
|
||||
try {
|
||||
await ElMessageBox.confirm('确定要清除所有队伍吗？此操作不可恢复！', '危险操作', { type: 'error', confirmButtonText: '确定清除' })
|
||||
const res = await clearAllGroupBuy()
|
||||
if (res.code === 200) {
|
||||
ElMessage.success('已清除所有队伍')
|
||||
fetchGroupList()
|
||||
} else {
|
||||
ElMessage.error(res.message || '清除失败')
|
||||
}
|
||||
} catch { /* 取消 */ }
|
||||
}
|
||||
|
||||
const handleClearUserGroups = async (userId) => {
|
||||
try {
|
||||
await ElMessageBox.confirm(`确定要清除用户 ${userId} 的所有队伍吗？`, '确认操作', { type: 'warning' })
|
||||
const res = await clearUserGroupBuy(userId)
|
||||
if (res.code === 200) {
|
||||
ElMessage.success('清除成功')
|
||||
showMembersDialog.value = false
|
||||
fetchGroupList()
|
||||
} else {
|
||||
ElMessage.error(res.message || '清除失败')
|
||||
}
|
||||
} catch { /* 取消 */ }
|
||||
}
|
||||
|
||||
const handleClearUserSubmit = async () => {
|
||||
if (!clearUserForm.userId) {
|
||||
ElMessage.warning('请输入用户ID')
|
||||
return
|
||||
}
|
||||
clearUserLoading.value = true
|
||||
try {
|
||||
const res = await clearUserGroupBuy(clearUserForm.userId)
|
||||
if (res.code === 200) {
|
||||
ElMessage.success('清除成功')
|
||||
showClearUserDialog.value = false
|
||||
clearUserForm.userId = ''
|
||||
fetchGroupList()
|
||||
} else {
|
||||
ElMessage.error(res.message || '清除失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('清除用户队伍失败:', error)
|
||||
ElMessage.error('网络错误')
|
||||
} finally {
|
||||
clearUserLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// ==================== 拼团类型方法 ====================
|
||||
const fetchTypeList = async () => {
|
||||
typeLoading.value = true
|
||||
try {
|
||||
const res = await getGroupBuyTypeList({ page: typePage.value, count: typePageSize.value, key: searchKey.value || undefined, tag: searchTag.value || undefined })
|
||||
if (res.code === 200) {
|
||||
typeTableData.value = res.data?.data || []
|
||||
typeTotal.value = res.data?.all_count || 0
|
||||
} else {
|
||||
ElMessage.error(res.data.message || '获取列表失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取列表失败:', error)
|
||||
ElMessage.error('网络错误')
|
||||
} finally {
|
||||
typeLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const handleTagChange = (tag) => {
|
||||
typePage.value = 1
|
||||
searchKey.value = ''
|
||||
typeTableData.value = []
|
||||
typeTotal.value = 0
|
||||
if (tag) {
|
||||
fetchTypeList()
|
||||
}
|
||||
}
|
||||
|
||||
const handleAddType = () => {
|
||||
isEditType.value = false
|
||||
Object.assign(typeForm, { id: '', name: '', price: 0, renewPrice: 0, maxPerson: 5, tag: '', expireTime: null, noteFields: [] })
|
||||
typeDialogVisible.value = true
|
||||
}
|
||||
|
||||
const handleEditType = (row) => {
|
||||
isEditType.value = true
|
||||
let noteFields = []
|
||||
try {
|
||||
noteFields = row.note ? JSON.parse(row.note) : []
|
||||
} catch { noteFields = [] }
|
||||
Object.assign(typeForm, { id: row.id, name: row.name, price: row.price, renewPrice: row.renewPrice, maxPerson: row.maxPerson, tag: row.tag || '', expireTime: row.expireTime || null, noteFields })
|
||||
typeDialogVisible.value = true
|
||||
}
|
||||
|
||||
const addNoteField = () => {
|
||||
typeForm.noteFields.push({ label: '', defaultValue: '' })
|
||||
}
|
||||
|
||||
const removeNoteField = (index) => {
|
||||
typeForm.noteFields.splice(index, 1)
|
||||
}
|
||||
|
||||
const handleTypeSubmit = async () => {
|
||||
if (!typeFormRef.value) return
|
||||
await typeFormRef.value.validate(async (valid) => {
|
||||
if (!valid) return
|
||||
typeSubmitLoading.value = true
|
||||
try {
|
||||
const noteJson = JSON.stringify(typeForm.noteFields.filter(f => f.label))
|
||||
const data = {
|
||||
name: typeForm.name,
|
||||
price: String(typeForm.price),
|
||||
renew_price: String(typeForm.renewPrice),
|
||||
max_person: String(typeForm.maxPerson),
|
||||
tag: typeForm.tag,
|
||||
expire_time: typeForm.expireTime ? Math.floor(new Date(typeForm.expireTime).getTime() / 1000) : 0,
|
||||
note: noteJson
|
||||
}
|
||||
if (isEditType.value) data.id = String(typeForm.id)
|
||||
const res = isEditType.value ? await updateGroupBuyType(data) : await addGroupBuyType(data)
|
||||
if (res.code === 200) {
|
||||
ElMessage.success(isEditType.value ? '修改成功' : '新增成功')
|
||||
typeDialogVisible.value = false
|
||||
fetchTypeList()
|
||||
fetchTags()
|
||||
} else {
|
||||
ElMessage.error(res.message || '操作失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('提交失败:', error)
|
||||
ElMessage.error('网络错误')
|
||||
} finally {
|
||||
typeSubmitLoading.value = false
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const handleDeleteType = async (row) => {
|
||||
try {
|
||||
await ElMessageBox.confirm('确定要删除该拼团类型吗？', '确认删除', { type: 'warning' })
|
||||
const res = await deleteGroupBuyType(row.id)
|
||||
if (res.code === 200) {
|
||||
ElMessage.success('删除成功')
|
||||
fetchTypeList()
|
||||
fetchTags()
|
||||
} else {
|
||||
ElMessage.error(res.data.message || '删除失败')
|
||||
}
|
||||
} catch { /* 取消 */ }
|
||||
}
|
||||
|
||||
// 监听标签页切换
|
||||
watch(activeTab, (newVal) => {
|
||||
if (newVal === 'activity') {
|
||||
fetchGroupList()
|
||||
} else if (newVal === 'type') {
|
||||
fetchTags()
|
||||
}
|
||||
})
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
fetchGroupList()
|
||||
fetchTags()
|
||||
|
||||
// 检查路由参数决定初始标签页
|
||||
if (route.query.tab === 'type') {
|
||||
activeTab.value = 'type'
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.group-buy-manage-container {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.main-container {
|
||||
border: 1px solid #e1e8ed;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.group-buy-tabs {
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 16px 0;
|
||||
border-bottom: 1px solid #e1e8ed;
|
||||
background: #fafbfc;
|
||||
margin: 0 -20px;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.table-section {
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.pagination-wrapper {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.note-fields-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 表格样式优化 */
|
||||
:deep(.el-table) {
|
||||
border: none;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
:deep(.el-table__header) {
|
||||
background: #f8f9fa;
|
||||
}
|
||||
|
||||
:deep(.el-table th) {
|
||||
background: #f8f9fa !important;
|
||||
border-bottom: 2px solid #e1e8ed;
|
||||
color: #2c3e50;
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
:deep(.el-table td) {
|
||||
border-bottom: 1px solid #f0f2f5;
|
||||
color: #34495e;
|
||||
}
|
||||
|
||||
:deep(.el-table tr:hover > td) {
|
||||
background-color: #f8f9fa !important;
|
||||
}
|
||||
|
||||
:deep(.el-card__body) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:deep(.el-tabs__header) {
|
||||
margin: 0;
|
||||
padding: 0 0 0 0;
|
||||
border-bottom: 1px solid #e1e8ed;
|
||||
}
|
||||
|
||||
:deep(.el-tabs__nav-wrap::after) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
:deep(.el-tabs__item) {
|
||||
padding: 0 20px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
:deep(.el-tabs__item.is-active) {
|
||||
color: #2c3e50;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
:deep(.el-tabs__active-bar) {
|
||||
background-color: #2c3e50;
|
||||
}
|
||||
</style>
|
||||
+151
-77
@@ -186,36 +186,64 @@
|
||||
<el-input v-model="orderForm.table" placeholder="请输入所属表" />
|
||||
</el-form-item>
|
||||
<el-form-item label="用户ID" prop="user_id">
|
||||
<div class="selector-field">
|
||||
<div class="selector-info" v-if="selectedUserInfo">
|
||||
<el-tag type="primary" effect="plain">
|
||||
ID: {{ orderForm.user_id }} - {{ selectedUserInfo.user_name }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<div class="selector-actions">
|
||||
<el-button type="primary" @click="userSelectorVisible = true">
|
||||
<el-input
|
||||
v-if="selectedUserInfo"
|
||||
:model-value="`${selectedUserInfo.user_name} (ID: ${orderForm.user_id})`"
|
||||
readonly
|
||||
style="width: 100%"
|
||||
>
|
||||
<template #suffix>
|
||||
<el-icon class="clear-icon" @click="clearUser"><Close /></el-icon>
|
||||
</template>
|
||||
<template #append>
|
||||
<el-button @click="userSelectorVisible = true">
|
||||
<el-icon><User /></el-icon>
|
||||
{{ orderForm.user_id ? '更换用户' : '选择用户' }}
|
||||
</el-button>
|
||||
<el-button v-if="orderForm.user_id" @click="clearUser">清除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-input>
|
||||
<el-input
|
||||
v-else
|
||||
placeholder="请选择用户"
|
||||
readonly
|
||||
style="width: 100%"
|
||||
@click="userSelectorVisible = true"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="userSelectorVisible = true">
|
||||
<el-icon><User /></el-icon>
|
||||
</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品ID" prop="commodity_id">
|
||||
<div class="selector-field">
|
||||
<div class="selector-info" v-if="selectedProductInfo">
|
||||
<el-tag type="success" effect="plain">
|
||||
ID: {{ orderForm.commodity_id }} - {{ selectedProductInfo.name }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<div class="selector-actions">
|
||||
<el-button type="success" @click="productSelectorVisible = true">
|
||||
<el-input
|
||||
v-if="selectedProductInfo"
|
||||
:model-value="`${selectedProductInfo.name} (ID: ${orderForm.commodity_id})`"
|
||||
readonly
|
||||
style="width: 100%"
|
||||
>
|
||||
<template #suffix>
|
||||
<el-icon class="clear-icon" @click="clearProduct"><Close /></el-icon>
|
||||
</template>
|
||||
<template #append>
|
||||
<el-button @click="productSelectorVisible = true">
|
||||
<el-icon><ShoppingCart /></el-icon>
|
||||
{{ orderForm.commodity_id ? '更换商品' : '选择商品' }}
|
||||
</el-button>
|
||||
<el-button v-if="orderForm.commodity_id" @click="clearProduct">清除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-input>
|
||||
<el-input
|
||||
v-else
|
||||
placeholder="请选择商品"
|
||||
readonly
|
||||
style="width: 100%"
|
||||
@click="productSelectorVisible = true"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="productSelectorVisible = true">
|
||||
<el-icon><ShoppingCart /></el-icon>
|
||||
</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="购买数量" prop="pay_num">
|
||||
<el-input-number v-model="orderForm.pay_num" :min="1" placeholder="请输入数量" style="width: 100%" />
|
||||
@@ -227,39 +255,74 @@
|
||||
<el-input-number v-model="orderForm.renew_price" :min="0" placeholder="请输入续费价格(分)" style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item label="过期时间" prop="expire_time">
|
||||
<el-input-number v-model="orderForm.expire_time" :min="0" placeholder="请输入过期时间(时间戳)" style="width: 100%" />
|
||||
<el-date-picker
|
||||
v-model="orderForm.expire_time"
|
||||
type="datetime"
|
||||
placeholder="请选择过期时间"
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
value-format="x"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="优惠码ID" prop="discount_code_id">
|
||||
<div class="selector-field">
|
||||
<div class="selector-info" v-if="selectedDiscountCodeInfo">
|
||||
<el-tag type="warning" effect="plain">
|
||||
ID: {{ orderForm.discount_code_id }} - {{ selectedDiscountCodeInfo.name || selectedDiscountCodeInfo.code }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<div class="selector-actions">
|
||||
<el-button type="warning" @click="discountCodeSelectorVisible = true">
|
||||
<el-input
|
||||
v-if="selectedDiscountCodeInfo"
|
||||
:model-value="`${selectedDiscountCodeInfo.name || selectedDiscountCodeInfo.code} (ID: ${orderForm.discount_code_id})`"
|
||||
readonly
|
||||
style="width: 100%"
|
||||
>
|
||||
<template #suffix>
|
||||
<el-icon class="clear-icon" @click="clearDiscountCode"><Close /></el-icon>
|
||||
</template>
|
||||
<template #append>
|
||||
<el-button @click="discountCodeSelectorVisible = true">
|
||||
<el-icon><Ticket /></el-icon>
|
||||
{{ orderForm.discount_code_id ? '更换优惠码' : '选择优惠码' }}
|
||||
</el-button>
|
||||
<el-button v-if="orderForm.discount_code_id" @click="clearDiscountCode">清除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-input>
|
||||
<el-input
|
||||
v-else
|
||||
placeholder="请选择优惠码（可选）"
|
||||
readonly
|
||||
style="width: 100%"
|
||||
@click="discountCodeSelectorVisible = true"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="discountCodeSelectorVisible = true">
|
||||
<el-icon><Ticket /></el-icon>
|
||||
</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="代金券ID" prop="coupon_id">
|
||||
<div class="selector-field">
|
||||
<div class="selector-info" v-if="selectedVoucherInfo">
|
||||
<el-tag type="danger" effect="plain">
|
||||
ID: {{ orderForm.coupon_id }} - {{ selectedVoucherInfo.name || selectedVoucherInfo.code }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<div class="selector-actions">
|
||||
<el-button type="danger" @click="voucherSelectorVisible = true">
|
||||
<el-input
|
||||
v-if="selectedVoucherInfo"
|
||||
:model-value="`${selectedVoucherInfo.name || selectedVoucherInfo.code} (ID: ${orderForm.coupon_id})`"
|
||||
readonly
|
||||
style="width: 100%"
|
||||
>
|
||||
<template #suffix>
|
||||
<el-icon class="clear-icon" @click="clearVoucher"><Close /></el-icon>
|
||||
</template>
|
||||
<template #append>
|
||||
<el-button @click="voucherSelectorVisible = true">
|
||||
<el-icon><Money /></el-icon>
|
||||
{{ orderForm.coupon_id ? '更换代金券' : '选择代金券' }}
|
||||
</el-button>
|
||||
<el-button v-if="orderForm.coupon_id" @click="clearVoucher">清除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-input>
|
||||
<el-input
|
||||
v-else
|
||||
placeholder="请选择代金券（可选）"
|
||||
readonly
|
||||
style="width: 100%"
|
||||
@click="voucherSelectorVisible = true"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="voucherSelectorVisible = true">
|
||||
<el-icon><Money /></el-icon>
|
||||
</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="订单状态" prop="state">
|
||||
<el-radio-group v-model="orderForm.state">
|
||||
@@ -319,12 +382,13 @@
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { Plus, Delete, Search, Download, Refresh, User, ShoppingCart, Ticket, Money } from '@element-plus/icons-vue'
|
||||
import { Plus, Delete, Search, Download, Refresh, User, ShoppingCart, Ticket, Money, Close } from '@element-plus/icons-vue'
|
||||
import { getOrderList, getOrderDetail, createOrder, updateOrder, deleteOrder } from '@/api/admin/order'
|
||||
import UserListSelector from '@/components/admin/UserListSelector.vue'
|
||||
import ProductSelector from '@/components/admin/ProductSelector.vue'
|
||||
import DiscountCodeSelector from '@/components/admin/DiscountCodeSelector.vue'
|
||||
import VoucherSelector from '@/components/admin/VoucherSelector.vue'
|
||||
import { isoToMilliseconds, timeToTimestamp, formatDate as formatDateTool } from '@/utils/tool'
|
||||
|
||||
// 查询参数
|
||||
const queryParams = reactive({
|
||||
@@ -415,7 +479,17 @@ const fetchOrderList = async () => {
|
||||
const res = await getOrderList(params)
|
||||
console.log('订单列表数据:', res.data)
|
||||
if (res.data.code === 200) {
|
||||
orderList.value = res.data.data.list || []
|
||||
// 处理时间数据：将ISO格式转换为毫秒级时间戳（用于时间选择器）
|
||||
const list = (res.data.data.list || []).map(item => {
|
||||
if (item.expireTime) {
|
||||
// 保存原始时间用于显示
|
||||
item._originalExpireTime = item.expireTime
|
||||
// 转换为毫秒级时间戳用于时间选择器
|
||||
item._expireTimeMs = isoToMilliseconds(item.expireTime)
|
||||
}
|
||||
return item
|
||||
})
|
||||
orderList.value = list
|
||||
total.value = res.data.data.all_count || 0
|
||||
}
|
||||
} catch (error) {
|
||||
@@ -426,16 +500,9 @@ const fetchOrderList = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
// 格式化日期
|
||||
// 格式化日期 - 使用工具函数
|
||||
const formatDate = (dateStr) => {
|
||||
if (!dateStr) return '-'
|
||||
const date = new Date(dateStr)
|
||||
const year = date.getFullYear()
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0')
|
||||
const day = String(date.getDate()).padStart(2, '0')
|
||||
const hours = String(date.getHours()).padStart(2, '0')
|
||||
const minutes = String(date.getMinutes()).padStart(2, '0')
|
||||
return `${year}-${month}-${day} ${hours}:${minutes}`
|
||||
return formatDateTool(dateStr)
|
||||
}
|
||||
|
||||
// 获取订单状态类型
|
||||
@@ -536,6 +603,14 @@ const handleEdit = (row) => {
|
||||
dialogVisible.value = true
|
||||
clearAllSelections()
|
||||
|
||||
// 处理过期时间：优先使用已转换的时间戳，否则转换ISO格式
|
||||
let expireTimeMs = null
|
||||
if (row._expireTimeMs !== undefined) {
|
||||
expireTimeMs = row._expireTimeMs
|
||||
} else if (row.expireTime) {
|
||||
expireTimeMs = isoToMilliseconds(row.expireTime)
|
||||
}
|
||||
|
||||
Object.assign(orderForm, {
|
||||
order_id: row.id,
|
||||
name: row.name,
|
||||
@@ -545,7 +620,7 @@ const handleEdit = (row) => {
|
||||
pay_num: row.payNum,
|
||||
price: row.price,
|
||||
renew_price: row.renewPrice,
|
||||
expire_time: row.expireTime ? new Date(row.expireTime).getTime() / 1000 : 0,
|
||||
expire_time: expireTimeMs,
|
||||
discount_code_id: 0, // 从详情接口获取
|
||||
coupon_id: 0, // 从详情接口获取
|
||||
state: row.state,
|
||||
@@ -604,6 +679,13 @@ const submitForm = () => {
|
||||
orderFormRef.value?.validate(async (valid) => {
|
||||
if (valid) {
|
||||
try {
|
||||
// 处理过期时间：将毫秒级时间戳转换为秒级时间戳
|
||||
let expireTimeSeconds = 0
|
||||
if (orderForm.expire_time) {
|
||||
const timestamp = timeToTimestamp(new Date(orderForm.expire_time))
|
||||
expireTimeSeconds = timestamp || 0
|
||||
}
|
||||
|
||||
// 准备提交的数据
|
||||
const submitData = {
|
||||
name: orderForm.name,
|
||||
@@ -613,7 +695,7 @@ const submitForm = () => {
|
||||
pay_num: Number(orderForm.pay_num),
|
||||
price: Number(orderForm.price),
|
||||
renew_price: Number(orderForm.renew_price),
|
||||
expire_time: Number(orderForm.expire_time),
|
||||
expire_time: expireTimeSeconds,
|
||||
discount_code_id: Number(orderForm.discount_code_id),
|
||||
coupon_id: Number(orderForm.coupon_id),
|
||||
state: Number(orderForm.state),
|
||||
@@ -865,22 +947,14 @@ onMounted(() => {
|
||||
100% { background-position: -200% 0; }
|
||||
}
|
||||
|
||||
/* 选择器字段样式 */
|
||||
.selector-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
/* 选择器清除图标样式 */
|
||||
.clear-icon {
|
||||
cursor: pointer;
|
||||
color: #909399;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.selector-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.selector-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
.clear-icon:hover {
|
||||
color: #f56c6c;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -500,12 +500,26 @@ const fetchProductList = async () => {
|
||||
// 计算未删除数据的总数（API返回的all_count包含已删除的，需要减去已删除的数量）
|
||||
const deletedCount = allData.filter(item => item.delete == true).length
|
||||
total.value = (res.data.data.data.length || 0) - deletedCount
|
||||
productList.value = productList.value.map(item => {
|
||||
item.image = item.coverId ? getFileDetail({ file_id: item.coverId }).then(res => res.data.data.url) : ''
|
||||
|
||||
// 异步获取所有商品的封面图片
|
||||
const imagePromises = productList.value.map(async (item) => {
|
||||
if (item.coverId) {
|
||||
try {
|
||||
const fileRes = await getFileDetail({ file_id: item.coverId })
|
||||
item.image = fileRes.data?.data?.url || ''
|
||||
} catch (error) {
|
||||
console.error('获取商品图片失败:', error)
|
||||
item.image = ''
|
||||
}
|
||||
} else {
|
||||
item.image = ''
|
||||
}
|
||||
return item
|
||||
})
|
||||
|
||||
// 等待所有图片加载完成
|
||||
await Promise.all(imagePromises)
|
||||
console.log('productList', productList.value)
|
||||
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error('获取商品列表失败')
|
||||
|
||||
@@ -184,25 +184,57 @@ import {
|
||||
User, Edit, Document, Timer, EditPen, Message,
|
||||
Phone, OfficeBuilding, UploadFilled
|
||||
} from '@element-plus/icons-vue'
|
||||
import { useUserStore } from '@/store/userStore.js'
|
||||
|
||||
// 是否处于编辑模式
|
||||
const isEditing = ref(false)
|
||||
const loading = ref(false)
|
||||
|
||||
const userStore = useUserStore()
|
||||
|
||||
// 从localStorage或store获取用户信息
|
||||
const getSavedUserInfo = () => {
|
||||
const savedInfo = userStore.userInfo
|
||||
if (savedInfo && Object.keys(savedInfo).length > 0) {
|
||||
return {
|
||||
username: savedInfo.user_name || '',
|
||||
realName: savedInfo.real_name?.Name || savedInfo.user_name || '',
|
||||
email: savedInfo.email || '',
|
||||
phone: savedInfo.phone || '',
|
||||
department: savedInfo.admin_group?.name || '',
|
||||
position: savedInfo.is_admin ? '管理员' : '普通用户',
|
||||
role: savedInfo.admin_group?.name || '普通用户',
|
||||
createTime: savedInfo.created_at || '',
|
||||
lastLogin: savedInfo.created_at || '',
|
||||
bio: savedInfo.admin_group?.note || '',
|
||||
avatar: savedInfo.cover || 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
|
||||
sex: savedInfo.sex || '',
|
||||
age: savedInfo.age || '',
|
||||
userId: savedInfo.user_id || '',
|
||||
userGroup: savedInfo.user_group?.Name || ''
|
||||
}
|
||||
}
|
||||
return {
|
||||
username: '',
|
||||
realName: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
department: '',
|
||||
position: '',
|
||||
role: '',
|
||||
createTime: '',
|
||||
lastLogin: '',
|
||||
bio: '',
|
||||
avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
|
||||
sex: '',
|
||||
age: '',
|
||||
userId: '',
|
||||
userGroup: ''
|
||||
}
|
||||
}
|
||||
|
||||
// 用户信息数据
|
||||
const userInfo = reactive({
|
||||
username: 'admin',
|
||||
realName: '管理员',
|
||||
email: 'admin@example.com',
|
||||
phone: '13800138000',
|
||||
department: '技术部',
|
||||
position: '系统管理员',
|
||||
role: '超级管理员',
|
||||
createTime: '2023-01-01 00:00:00',
|
||||
lastLogin: '2023-06-15 10:30:45',
|
||||
bio: '系统管理员，负责系统的日常维护和管理工作。拥有丰富的系统管理经验，精通Linux服务器配置和维护，熟悉网络安全，对系统性能优化有独到见解。',
|
||||
avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
|
||||
})
|
||||
const userInfo = reactive(getSavedUserInfo())
|
||||
|
||||
// 表单数据
|
||||
const userForm = reactive({...userInfo})
|
||||
@@ -296,9 +328,9 @@ const handleAvatarSuccess = (res) => {
|
||||
// 获取用户信息
|
||||
const fetchUserInfo = async () => {
|
||||
try {
|
||||
// 模拟API调用
|
||||
await new Promise(resolve => setTimeout(resolve, 500))
|
||||
// 实际项目中，应该从后端获取用户信息并更新userInfo
|
||||
// 从store获取最新用户信息
|
||||
const savedInfo = getSavedUserInfo()
|
||||
Object.assign(userInfo, savedInfo)
|
||||
} catch (error) {
|
||||
ElMessage.error('获取用户信息失败')
|
||||
console.error(error)
|
||||
|
||||
@@ -0,0 +1,918 @@
|
||||
<template>
|
||||
<div class="setting-manage-container">
|
||||
<el-card class="main-container" shadow="never">
|
||||
<el-tabs v-model="activeTab" class="setting-tabs">
|
||||
<!-- 配置组管理标签页 -->
|
||||
<el-tab-pane label="配置组管理" name="group">
|
||||
<!-- 搜索和操作栏 -->
|
||||
<div class="filter-section">
|
||||
<div class="filter-content">
|
||||
<el-form :inline="true" :model="groupQueryParams" class="search-form">
|
||||
<el-form-item label="关键词筛选">
|
||||
<el-input v-model="groupQueryParams.key" placeholder="请输入关键词" clearable style="width: 200px" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleGroupQuery">
|
||||
<el-icon><Search /></el-icon>查询
|
||||
</el-button>
|
||||
<el-button @click="resetGroupQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="action-bar">
|
||||
<el-button type="primary" @click="handleAddGroup">
|
||||
<el-icon><Plus /></el-icon>新增配置组
|
||||
</el-button>
|
||||
<el-button type="danger" :disabled="!selectedGroupRows.length" @click="handleBatchDeleteGroup">
|
||||
<el-icon><Delete /></el-icon>批量删除
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 配置组列表 -->
|
||||
<div class="table-section">
|
||||
<el-table
|
||||
v-loading="groupLoading"
|
||||
:data="groupList"
|
||||
@selection-change="handleGroupSelectionChange"
|
||||
style="width: 100%"
|
||||
:header-cell-style="{ background: '#fafafa', color: '#333', fontWeight: 600 }"
|
||||
>
|
||||
<el-table-column type="selection" width="55" />
|
||||
<el-table-column prop="id" label="ID" width="80" />
|
||||
<el-table-column prop="name" label="名称" min-width="200" />
|
||||
<el-table-column prop="note" label="备注" min-width="250" show-overflow-tooltip />
|
||||
<el-table-column label="创建时间" width="180">
|
||||
<template #default="{ row }">
|
||||
{{ formatDate(row.CreatedAt) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="更新时间" width="180">
|
||||
<template #default="{ row }">
|
||||
{{ formatDate(row.UpdatedAt) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="200" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button type="primary" link @click="handleEditGroup(row)">编辑</el-button>
|
||||
<el-button type="success" link @click="viewGroupSettings(row)">查看配置</el-button>
|
||||
<el-button type="danger" link @click="handleDeleteGroup(row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<el-pagination
|
||||
v-model:current-page="groupQueryParams.page"
|
||||
v-model:page-size="groupQueryParams.count"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="groupTotal"
|
||||
@size-change="handleGroupSizeChange"
|
||||
@current-change="handleGroupCurrentChange"
|
||||
background
|
||||
class="pagination"
|
||||
/>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
|
||||
<!-- 配置管理标签页 -->
|
||||
<el-tab-pane label="配置管理" name="setting">
|
||||
<!-- 搜索和操作栏 -->
|
||||
<div class="filter-section">
|
||||
<div class="filter-content">
|
||||
<el-form :inline="true" :model="settingQueryParams" class="search-form">
|
||||
<el-form-item label="配置组">
|
||||
<el-select v-model="settingQueryParams.group_id" placeholder="请选择配置组" clearable style="width: 200px" @change="handleSettingQuery">
|
||||
<el-option
|
||||
v-for="group in allGroupList"
|
||||
:key="group.id"
|
||||
:label="group.name"
|
||||
:value="group.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="关键词筛选">
|
||||
<el-input v-model="settingQueryParams.key" placeholder="请输入关键词" clearable style="width: 200px" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleSettingQuery">
|
||||
<el-icon><Search /></el-icon>查询
|
||||
</el-button>
|
||||
<el-button @click="resetSettingQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="action-bar">
|
||||
<el-button type="primary" @click="handleAddSetting">
|
||||
<el-icon><Plus /></el-icon>新增配置
|
||||
</el-button>
|
||||
<el-button type="danger" :disabled="!selectedSettingRows.length" @click="handleBatchDeleteSetting">
|
||||
<el-icon><Delete /></el-icon>批量删除
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 配置列表 -->
|
||||
<div class="table-section">
|
||||
<el-table
|
||||
v-loading="settingLoading"
|
||||
:data="settingList"
|
||||
@selection-change="handleSettingSelectionChange"
|
||||
style="width: 100%"
|
||||
:header-cell-style="{ background: '#fafafa', color: '#333', fontWeight: 600 }"
|
||||
>
|
||||
<el-table-column type="selection" width="55" />
|
||||
<el-table-column prop="id" label="ID" width="80" />
|
||||
<el-table-column prop="name" label="名称" min-width="150" />
|
||||
<el-table-column prop="value" label="值" min-width="200" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
<span v-if="row.type === 'bool'">{{ row.value ? '是' : '否' }}</span>
|
||||
<span v-else>{{ row.value }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="type" label="类型" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="getTypeColor(row.type)">
|
||||
{{ row.type || '未知' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="settingGroupID" label="配置组" width="150" />
|
||||
<el-table-column label="是否开放" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-switch
|
||||
v-model="row.open"
|
||||
@change="handleToggleOpen(row)"
|
||||
:disabled="toggleLoading === row.id"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="note" label="备注" min-width="200" show-overflow-tooltip />
|
||||
<el-table-column label="创建时间" width="180">
|
||||
<template #default="{ row }">
|
||||
{{ formatDate(row.CreatedAt) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="150" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button type="primary" link @click="handleEditSetting(row)">编辑</el-button>
|
||||
<el-button type="danger" link @click="handleDeleteSetting(row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<el-pagination
|
||||
v-model:current-page="settingQueryParams.page"
|
||||
v-model:page-size="settingQueryParams.count"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="settingTotal"
|
||||
@size-change="handleSettingSizeChange"
|
||||
@current-change="handleSettingCurrentChange"
|
||||
background
|
||||
class="pagination"
|
||||
/>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-card>
|
||||
|
||||
<!-- 配置组表单对话框 -->
|
||||
<el-dialog
|
||||
v-model="groupDialogVisible"
|
||||
:title="groupDialogTitle"
|
||||
width="500px"
|
||||
destroy-on-close
|
||||
>
|
||||
<el-form
|
||||
ref="groupFormRef"
|
||||
:model="groupForm"
|
||||
:rules="groupRules"
|
||||
label-width="100px"
|
||||
>
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input v-model="groupForm.name" placeholder="请输入配置组名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="note">
|
||||
<el-input
|
||||
v-model="groupForm.note"
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
placeholder="请输入备注信息"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="groupDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="submitGroupForm">确定</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 配置表单对话框 -->
|
||||
<el-dialog
|
||||
v-model="settingDialogVisible"
|
||||
:title="settingDialogTitle"
|
||||
width="600px"
|
||||
destroy-on-close
|
||||
>
|
||||
<el-form
|
||||
ref="settingFormRef"
|
||||
:model="settingForm"
|
||||
:rules="settingRules"
|
||||
label-width="120px"
|
||||
>
|
||||
<el-form-item label="配置组" prop="settingGroupID">
|
||||
<el-select v-model="settingForm.settingGroupID" placeholder="请选择配置组" style="width: 100%">
|
||||
<el-option
|
||||
v-for="group in allGroupList"
|
||||
:key="group.id"
|
||||
:label="group.name"
|
||||
:value="group.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input v-model="settingForm.name" placeholder="请输入配置名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-select v-model="settingForm.type" placeholder="请选择类型" style="width: 100%" @change="handleTypeChange">
|
||||
<el-option label="字符串 (string)" value="string" />
|
||||
<el-option label="整数 (int)" value="int" />
|
||||
<el-option label="浮点数 (float)" value="float" />
|
||||
<el-option label="布尔值 (bool)" value="bool" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="值" prop="value">
|
||||
<el-input
|
||||
v-if="settingForm.type === 'string'"
|
||||
v-model="settingForm.value"
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
placeholder="请输入配置值"
|
||||
/>
|
||||
<el-input-number
|
||||
v-else-if="settingForm.type === 'int'"
|
||||
v-model="settingForm.value"
|
||||
:controls="false"
|
||||
placeholder="请输入整数"
|
||||
style="width: 100%"
|
||||
/>
|
||||
<el-input-number
|
||||
v-else-if="settingForm.type === 'float'"
|
||||
v-model="settingForm.value"
|
||||
:controls="false"
|
||||
:precision="2"
|
||||
placeholder="请输入浮点数"
|
||||
style="width: 100%"
|
||||
/>
|
||||
<el-switch
|
||||
v-else-if="settingForm.type === 'bool'"
|
||||
v-model="settingForm.value"
|
||||
/>
|
||||
<el-input
|
||||
v-else
|
||||
v-model="settingForm.value"
|
||||
placeholder="请输入配置值"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否开放访问">
|
||||
<el-switch v-model="settingForm.open" />
|
||||
<span style="margin-left: 10px; color: #909399; font-size: 12px;">
|
||||
开启后允许公开访问
|
||||
</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="note">
|
||||
<el-input
|
||||
v-model="settingForm.note"
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
placeholder="请输入备注信息"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="settingDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="submitSettingForm">确定</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, watch } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { Search, Plus, Delete } from '@element-plus/icons-vue'
|
||||
import {
|
||||
getSettingGroupList,
|
||||
getSettingGroupInfo,
|
||||
createSettingGroup,
|
||||
updateSettingGroup,
|
||||
deleteSettingGroup,
|
||||
getSettingList,
|
||||
getSettingInfo,
|
||||
createSetting,
|
||||
updateSetting,
|
||||
setSettingOpen,
|
||||
deleteSetting
|
||||
} from '@/api/admin/setting'
|
||||
|
||||
const route = useRoute()
|
||||
|
||||
// 当前激活的标签页
|
||||
const activeTab = ref('group')
|
||||
|
||||
// ==================== 配置组相关 ====================
|
||||
const groupQueryParams = reactive({
|
||||
key: '',
|
||||
page: 1,
|
||||
count: 10
|
||||
})
|
||||
|
||||
const groupForm = reactive({
|
||||
id: undefined,
|
||||
name: '',
|
||||
note: ''
|
||||
})
|
||||
|
||||
const groupRules = {
|
||||
name: [
|
||||
{ required: true, message: '请输入配置组名称', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
|
||||
const groupLoading = ref(false)
|
||||
const groupList = ref([])
|
||||
const allGroupList = ref([]) // 用于下拉选择的完整列表
|
||||
const groupTotal = ref(0)
|
||||
const selectedGroupRows = ref([])
|
||||
const groupDialogVisible = ref(false)
|
||||
const groupDialogTitle = ref('新增配置组')
|
||||
const groupFormRef = ref(null)
|
||||
|
||||
// ==================== 配置相关 ====================
|
||||
const settingQueryParams = reactive({
|
||||
group_id: undefined,
|
||||
key: '',
|
||||
page: 1,
|
||||
count: 10
|
||||
})
|
||||
|
||||
const settingForm = reactive({
|
||||
id: undefined,
|
||||
name: '',
|
||||
value: '',
|
||||
type: 'string',
|
||||
settingGroupID: undefined,
|
||||
open: false,
|
||||
note: ''
|
||||
})
|
||||
|
||||
const settingRules = {
|
||||
name: [
|
||||
{ required: true, message: '请输入配置名称', trigger: 'blur' }
|
||||
],
|
||||
value: [
|
||||
{ required: true, message: '请输入配置值', trigger: 'blur' }
|
||||
],
|
||||
type: [
|
||||
{ required: true, message: '请选择配置类型', trigger: 'change' }
|
||||
],
|
||||
settingGroupID: [
|
||||
{ required: true, message: '请选择配置组', trigger: 'change' }
|
||||
]
|
||||
}
|
||||
|
||||
const settingLoading = ref(false)
|
||||
const settingList = ref([])
|
||||
const settingTotal = ref(0)
|
||||
const selectedSettingRows = ref([])
|
||||
const settingDialogVisible = ref(false)
|
||||
const settingDialogTitle = ref('新增配置')
|
||||
const settingFormRef = ref(null)
|
||||
const toggleLoading = ref(null)
|
||||
|
||||
// 格式化日期时间
|
||||
const formatDate = (dateString) => {
|
||||
if (!dateString) return '-'
|
||||
const date = new Date(dateString)
|
||||
const year = date.getFullYear()
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0')
|
||||
const day = String(date.getDate()).padStart(2, '0')
|
||||
const hours = String(date.getHours()).padStart(2, '0')
|
||||
const minutes = String(date.getMinutes()).padStart(2, '0')
|
||||
const seconds = String(date.getSeconds()).padStart(2, '0')
|
||||
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
|
||||
}
|
||||
|
||||
// 获取类型颜色
|
||||
const getTypeColor = (type) => {
|
||||
const colorMap = {
|
||||
'string': 'primary',
|
||||
'int': 'success',
|
||||
'float': 'warning',
|
||||
'bool': 'info'
|
||||
}
|
||||
return colorMap[type] || ''
|
||||
}
|
||||
|
||||
// ==================== 配置组方法 ====================
|
||||
const fetchGroupList = async () => {
|
||||
groupLoading.value = true
|
||||
try {
|
||||
const res = await getSettingGroupList(groupQueryParams)
|
||||
if (res.data.code === 200) {
|
||||
groupList.value = res.data.data.data || []
|
||||
groupTotal.value = res.data.data.all_count || 0
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取配置组列表失败:', error)
|
||||
ElMessage.error('获取配置组列表失败')
|
||||
} finally {
|
||||
groupLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const fetchAllGroupList = async () => {
|
||||
try {
|
||||
const res = await getSettingGroupList({ page: 1, count: 1000 })
|
||||
if (res.data.code === 200) {
|
||||
allGroupList.value = res.data.data.data || []
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取配置组列表失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const handleGroupQuery = () => {
|
||||
groupQueryParams.page = 1
|
||||
fetchGroupList()
|
||||
}
|
||||
|
||||
const resetGroupQuery = () => {
|
||||
groupQueryParams.key = ''
|
||||
groupQueryParams.page = 1
|
||||
fetchGroupList()
|
||||
}
|
||||
|
||||
const handleGroupSelectionChange = (selection) => {
|
||||
selectedGroupRows.value = selection
|
||||
}
|
||||
|
||||
const handleGroupSizeChange = (size) => {
|
||||
groupQueryParams.count = size
|
||||
fetchGroupList()
|
||||
}
|
||||
|
||||
const handleGroupCurrentChange = (page) => {
|
||||
groupQueryParams.page = page
|
||||
fetchGroupList()
|
||||
}
|
||||
|
||||
const handleAddGroup = () => {
|
||||
groupDialogTitle.value = '新增配置组'
|
||||
Object.assign(groupForm, {
|
||||
id: undefined,
|
||||
name: '',
|
||||
note: ''
|
||||
})
|
||||
groupDialogVisible.value = true
|
||||
}
|
||||
|
||||
const handleEditGroup = async (row) => {
|
||||
groupDialogTitle.value = '编辑配置组'
|
||||
try {
|
||||
const res = await getSettingGroupInfo({ setting_group_id: row.id })
|
||||
if (res.data.code === 200) {
|
||||
Object.assign(groupForm, {
|
||||
id: res.data.data.id,
|
||||
name: res.data.data.name || '',
|
||||
note: res.data.data.note || ''
|
||||
})
|
||||
groupDialogVisible.value = true
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取配置组详情失败:', error)
|
||||
ElMessage.error('获取配置组详情失败')
|
||||
}
|
||||
}
|
||||
|
||||
const viewGroupSettings = (row) => {
|
||||
activeTab.value = 'setting'
|
||||
settingQueryParams.group_id = row.id
|
||||
fetchSettingList()
|
||||
}
|
||||
|
||||
const handleDeleteGroup = (row) => {
|
||||
ElMessageBox.confirm(`确认删除配置组 "${row.name}" 吗？`, '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(async () => {
|
||||
try {
|
||||
const res = await deleteSettingGroup({ setting_group_id: row.id })
|
||||
if (res.data.code === 200) {
|
||||
ElMessage.success('删除成功')
|
||||
fetchGroupList()
|
||||
fetchAllGroupList()
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('删除失败:', error)
|
||||
ElMessage.error(error.response?.data?.message || '删除失败')
|
||||
}
|
||||
}).catch(() => {})
|
||||
}
|
||||
|
||||
const handleBatchDeleteGroup = () => {
|
||||
if (selectedGroupRows.value.length === 0) {
|
||||
ElMessage.warning('请至少选择一条记录')
|
||||
return
|
||||
}
|
||||
ElMessageBox.confirm(`确认删除选中的 ${selectedGroupRows.value.length} 条记录吗？`, '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(async () => {
|
||||
try {
|
||||
const deletePromises = selectedGroupRows.value.map(row =>
|
||||
deleteSettingGroup({ setting_group_id: row.id })
|
||||
)
|
||||
await Promise.all(deletePromises)
|
||||
ElMessage.success('批量删除成功')
|
||||
fetchGroupList()
|
||||
fetchAllGroupList()
|
||||
} catch (error) {
|
||||
console.error('批量删除失败:', error)
|
||||
ElMessage.error('批量删除失败')
|
||||
}
|
||||
}).catch(() => {})
|
||||
}
|
||||
|
||||
const submitGroupForm = () => {
|
||||
groupFormRef.value?.validate(async (valid) => {
|
||||
if (valid) {
|
||||
try {
|
||||
const submitData = {
|
||||
name: groupForm.name,
|
||||
note: groupForm.note
|
||||
}
|
||||
if (groupForm.id) {
|
||||
submitData.id = groupForm.id
|
||||
}
|
||||
const res = groupForm.id
|
||||
? await updateSettingGroup(submitData)
|
||||
: await createSettingGroup(submitData)
|
||||
if (res.data.code === 200) {
|
||||
ElMessage.success(groupForm.id ? '修改成功' : '创建成功')
|
||||
groupDialogVisible.value = false
|
||||
fetchGroupList()
|
||||
fetchAllGroupList()
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('提交失败:', error)
|
||||
ElMessage.error(error.response?.data?.message || '提交失败')
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// ==================== 配置方法 ====================
|
||||
const fetchSettingList = async () => {
|
||||
settingLoading.value = true
|
||||
try {
|
||||
const params = { ...settingQueryParams }
|
||||
if (!params.group_id) {
|
||||
delete params.group_id
|
||||
}
|
||||
const res = await getSettingList(params)
|
||||
if (res.data.code === 200) {
|
||||
settingList.value = res.data.data.data || []
|
||||
settingTotal.value = res.data.data.all_count || 0
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取配置列表失败:', error)
|
||||
ElMessage.error('获取配置列表失败')
|
||||
} finally {
|
||||
settingLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const handleSettingQuery = () => {
|
||||
settingQueryParams.page = 1
|
||||
fetchSettingList()
|
||||
}
|
||||
|
||||
const resetSettingQuery = () => {
|
||||
settingQueryParams.group_id = undefined
|
||||
settingQueryParams.key = ''
|
||||
settingQueryParams.page = 1
|
||||
fetchSettingList()
|
||||
}
|
||||
|
||||
const handleSettingSelectionChange = (selection) => {
|
||||
selectedSettingRows.value = selection
|
||||
}
|
||||
|
||||
const handleSettingSizeChange = (size) => {
|
||||
settingQueryParams.count = size
|
||||
fetchSettingList()
|
||||
}
|
||||
|
||||
const handleSettingCurrentChange = (page) => {
|
||||
settingQueryParams.page = page
|
||||
fetchSettingList()
|
||||
}
|
||||
|
||||
const handleTypeChange = (type) => {
|
||||
if (type === 'bool') {
|
||||
settingForm.value = false
|
||||
} else if (type === 'int' || type === 'float') {
|
||||
settingForm.value = 0
|
||||
} else {
|
||||
settingForm.value = ''
|
||||
}
|
||||
}
|
||||
|
||||
const handleAddSetting = () => {
|
||||
settingDialogTitle.value = '新增配置'
|
||||
Object.assign(settingForm, {
|
||||
id: undefined,
|
||||
name: '',
|
||||
value: '',
|
||||
type: 'string',
|
||||
settingGroupID: settingQueryParams.group_id || undefined,
|
||||
open: false,
|
||||
note: ''
|
||||
})
|
||||
settingDialogVisible.value = true
|
||||
}
|
||||
|
||||
const handleEditSetting = async (row) => {
|
||||
settingDialogTitle.value = '编辑配置'
|
||||
try {
|
||||
const res = await getSettingInfo({ id: row.id })
|
||||
if (res.data.code === 200) {
|
||||
const data = res.data.data
|
||||
Object.assign(settingForm, {
|
||||
id: data.id,
|
||||
name: data.name || '',
|
||||
value: data.value,
|
||||
type: data.type || 'string',
|
||||
settingGroupID: data.settingGroupID,
|
||||
open: data.open || false,
|
||||
note: data.note || ''
|
||||
})
|
||||
if (data.type === 'bool') {
|
||||
settingForm.value = data.value === true || data.value === 'true' || data.value === 1
|
||||
} else if (data.type === 'int') {
|
||||
settingForm.value = parseInt(data.value) || 0
|
||||
} else if (data.type === 'float') {
|
||||
settingForm.value = parseFloat(data.value) || 0
|
||||
}
|
||||
settingDialogVisible.value = true
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取配置详情失败:', error)
|
||||
ElMessage.error('获取配置详情失败')
|
||||
}
|
||||
}
|
||||
|
||||
const handleToggleOpen = async (row) => {
|
||||
toggleLoading.value = row.id
|
||||
try {
|
||||
const res = await setSettingOpen({
|
||||
id: row.id,
|
||||
open: row.open
|
||||
})
|
||||
if (res.data.code === 200) {
|
||||
ElMessage.success('修改成功')
|
||||
} else {
|
||||
row.open = !row.open
|
||||
ElMessage.error(res.data.message || '修改失败')
|
||||
}
|
||||
} catch (error) {
|
||||
row.open = !row.open
|
||||
console.error('修改失败:', error)
|
||||
ElMessage.error(error.response?.data?.message || '修改失败')
|
||||
} finally {
|
||||
toggleLoading.value = null
|
||||
}
|
||||
}
|
||||
|
||||
const handleDeleteSetting = (row) => {
|
||||
ElMessageBox.confirm(`确认删除配置 "${row.name}" 吗？`, '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(async () => {
|
||||
try {
|
||||
const res = await deleteSetting({ id: row.id })
|
||||
if (res.data.code === 200) {
|
||||
ElMessage.success('删除成功')
|
||||
fetchSettingList()
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('删除失败:', error)
|
||||
ElMessage.error(error.response?.data?.message || '删除失败')
|
||||
}
|
||||
}).catch(() => {})
|
||||
}
|
||||
|
||||
const handleBatchDeleteSetting = () => {
|
||||
if (selectedSettingRows.value.length === 0) {
|
||||
ElMessage.warning('请至少选择一条记录')
|
||||
return
|
||||
}
|
||||
ElMessageBox.confirm(`确认删除选中的 ${selectedSettingRows.value.length} 条记录吗？`, '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(async () => {
|
||||
try {
|
||||
const deletePromises = selectedSettingRows.value.map(row =>
|
||||
deleteSetting({ id: row.id })
|
||||
)
|
||||
await Promise.all(deletePromises)
|
||||
ElMessage.success('批量删除成功')
|
||||
fetchSettingList()
|
||||
} catch (error) {
|
||||
console.error('批量删除失败:', error)
|
||||
ElMessage.error('批量删除失败')
|
||||
}
|
||||
}).catch(() => {})
|
||||
}
|
||||
|
||||
const submitSettingForm = () => {
|
||||
settingFormRef.value?.validate(async (valid) => {
|
||||
if (valid) {
|
||||
try {
|
||||
const submitData = {
|
||||
name: settingForm.name,
|
||||
value: String(settingForm.value),
|
||||
type: settingForm.type,
|
||||
setting_group_id: settingForm.settingGroupID,
|
||||
open: settingForm.open,
|
||||
note: settingForm.note
|
||||
}
|
||||
if (settingForm.id) {
|
||||
submitData.id = settingForm.id
|
||||
}
|
||||
const res = settingForm.id
|
||||
? await updateSetting(submitData)
|
||||
: await createSetting(submitData)
|
||||
if (res.data.code === 200) {
|
||||
ElMessage.success(settingForm.id ? '修改成功' : '创建成功')
|
||||
settingDialogVisible.value = false
|
||||
fetchSettingList()
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('提交失败:', error)
|
||||
ElMessage.error(error.response?.data?.message || '提交失败')
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 监听标签页切换
|
||||
watch(activeTab, (newVal) => {
|
||||
if (newVal === 'group') {
|
||||
fetchGroupList()
|
||||
} else if (newVal === 'setting') {
|
||||
fetchSettingList()
|
||||
}
|
||||
})
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
fetchGroupList()
|
||||
fetchAllGroupList()
|
||||
|
||||
// 检查路由参数决定初始标签页
|
||||
if (route.query.tab === 'setting') {
|
||||
activeTab.value = 'setting'
|
||||
fetchSettingList()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.setting-manage-container {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.main-container {
|
||||
border: 1px solid #e1e8ed;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.setting-tabs {
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.filter-section {
|
||||
padding: 0;
|
||||
border-bottom: 1px solid #e1e8ed;
|
||||
background: #fafbfc;
|
||||
margin: 0 -20px;
|
||||
}
|
||||
|
||||
.filter-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16px 20px;
|
||||
gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.search-form {
|
||||
margin: 0;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.search-form :deep(.el-form-item) {
|
||||
margin-bottom: 0;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.action-bar {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.table-section {
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
margin-top: 20px;
|
||||
padding: 16px 0;
|
||||
border-top: 1px solid #e1e8ed;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
/* 表格样式优化 */
|
||||
:deep(.el-table) {
|
||||
border: none;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
:deep(.el-table__header) {
|
||||
background: #f8f9fa;
|
||||
}
|
||||
|
||||
:deep(.el-table th) {
|
||||
background: #f8f9fa !important;
|
||||
border-bottom: 2px solid #e1e8ed;
|
||||
color: #2c3e50;
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
:deep(.el-table td) {
|
||||
border-bottom: 1px solid #f0f2f5;
|
||||
color: #34495e;
|
||||
}
|
||||
|
||||
:deep(.el-table tr:hover > td) {
|
||||
background-color: #f8f9fa !important;
|
||||
}
|
||||
|
||||
:deep(.el-card__body) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:deep(.el-tabs__header) {
|
||||
margin: 0;
|
||||
padding: 0 0 0 0;
|
||||
border-bottom: 1px solid #e1e8ed;
|
||||
}
|
||||
|
||||
:deep(.el-tabs__nav-wrap::after) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
:deep(.el-tabs__item) {
|
||||
padding: 0 20px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
:deep(.el-tabs__item.is-active) {
|
||||
color: #2c3e50;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
:deep(.el-tabs__active-bar) {
|
||||
background-color: #2c3e50;
|
||||
}
|
||||
</style>
|
||||
@@ -56,7 +56,7 @@
|
||||
</el-table-column>
|
||||
<el-table-column prop="type" label="文件类型" width="120">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="getFileTypeColor(row.type)">
|
||||
<el-tag :type="getFileTypeColor(row.type, row.url, row.realName)">
|
||||
{{ row.type || '未知' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
@@ -112,7 +112,7 @@
|
||||
<div class="preview-label">文件预览</div>
|
||||
<div class="preview-content">
|
||||
<el-image
|
||||
v-if="isImageFile(fileDetail.type) && fileDetail.url"
|
||||
v-if="isImageFile(fileDetail.type, fileDetail.url, fileDetail.realName) && fileDetail.url"
|
||||
:src="fileDetail.url"
|
||||
fit="contain"
|
||||
style="max-width: 100%; max-height: 400px; border-radius: 8px;"
|
||||
@@ -140,7 +140,7 @@
|
||||
<el-descriptions-item label="真实文件名" label-align="right" :span="2">{{ fileDetail.realName }}</el-descriptions-item>
|
||||
<el-descriptions-item label="保存名称" label-align="right">{{ fileDetail.saveName }}</el-descriptions-item>
|
||||
<el-descriptions-item label="文件类型" label-align="right">
|
||||
<el-tag :type="getFileTypeColor(fileDetail.type)">{{ fileDetail.type || '未知' }}</el-tag>
|
||||
<el-tag :type="getFileTypeColor(fileDetail.type, fileDetail.url, fileDetail.realName)">{{ fileDetail.type || '未知' }}</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="文件大小" label-align="right">{{ formatFileSize(fileDetail.size) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="是否公开" label-align="right">
|
||||
@@ -302,14 +302,37 @@ const uploadForm = reactive({
|
||||
const uploadFileList = ref([])
|
||||
|
||||
// 判断是否为图片文件
|
||||
const isImageFile = (type) => {
|
||||
const imageTypes = ['cover', 'image', 'avatar', 'photo', 'picture']
|
||||
return imageTypes.includes(type?.toLowerCase())
|
||||
const isImageFile = (type, url, realName) => {
|
||||
// 检查type字段
|
||||
const imageTypes = ['cover', 'image', 'avatar', 'photo', 'picture', 'work_order']
|
||||
if (type && imageTypes.includes(type?.toLowerCase())) {
|
||||
return true
|
||||
}
|
||||
|
||||
// 检查文件扩展名
|
||||
if (realName) {
|
||||
const extension = realName.split('.').pop()?.toLowerCase()
|
||||
const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg', 'ico']
|
||||
if (extension && imageExtensions.includes(extension)) {
|
||||
return true
|
||||
}
|
||||
}
|
||||
|
||||
// 检查URL中的文件扩展名
|
||||
if (url) {
|
||||
const urlExtension = url.split('.').pop()?.toLowerCase().split('?')[0]
|
||||
const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg', 'ico']
|
||||
if (urlExtension && imageExtensions.includes(urlExtension)) {
|
||||
return true
|
||||
}
|
||||
}
|
||||
|
||||
return false
|
||||
}
|
||||
|
||||
// 获取文件类型颜色
|
||||
const getFileTypeColor = (type) => {
|
||||
if (isImageFile(type)) return 'success'
|
||||
const getFileTypeColor = (type, url, realName) => {
|
||||
if (isImageFile(type, url, realName)) return 'success'
|
||||
const colorMap = {
|
||||
'document': 'primary',
|
||||
'video': 'warning',
|
||||
@@ -394,8 +417,12 @@ const handleView = async (row) => {
|
||||
const res = await getFileDetail({ file_id: row.id })
|
||||
console.log('文件详情数据:', res.data)
|
||||
if (res.data.code === 200) {
|
||||
fileDetail.value = res.data.data.data
|
||||
fileDetail.value.url = res.data.data.url
|
||||
// 确保正确设置文件详情和URL
|
||||
const fileData = res.data.data.data || res.data.data
|
||||
fileDetail.value = {
|
||||
...fileData,
|
||||
url: fileData.url || res.data.data.url || ''
|
||||
}
|
||||
detailDialogVisible.value = true
|
||||
}
|
||||
} catch (error) {
|
||||
@@ -597,7 +624,7 @@ const handleCustomUpload = async (options) => {
|
||||
|
||||
// 根据返回码严格区分成功和失败
|
||||
if (res && res.data && res.data.code === 200) {
|
||||
onSuccess(res.data.data, file)
|
||||
console.log("上传成功")
|
||||
} else {
|
||||
const errorMsg = res?.data?.message || res?.data?.msg || '上传失败'
|
||||
const error = new Error(errorMsg)
|
||||
@@ -612,13 +639,9 @@ const handleCustomUpload = async (options) => {
|
||||
|
||||
// 上传成功
|
||||
const handleUploadSuccess = (response, file, fileList) => {
|
||||
console.log('上传成功文件:', file)
|
||||
console.log('上传成功文件列表：',fileList)
|
||||
|
||||
|
||||
// 成功回调只会在 code === 200 时触发
|
||||
// ElMessage.success(`文件 ${file.name} 上传成功`)
|
||||
// 更新文件列表状态
|
||||
|
||||
uploadFileList.value = fileList
|
||||
// 如果所有文件都上传成功，关闭对话框并刷新列表
|
||||
const allSuccess = fileList.every(f => f.status === 'success')
|
||||
|
||||
+130
-59
@@ -44,24 +44,32 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="profile-stats">
|
||||
<div class="stat-item">
|
||||
<div class="stat-label">实名状态</div>
|
||||
<div class="stat-value">
|
||||
<el-tag :type="userInfo.RealName?.Status === 1 ? 'success' : 'warning'" size="small" effect="light">
|
||||
{{ getRealNameStatusText(userInfo.RealName?.Status) }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-label">推荐人ID</div>
|
||||
<div class="stat-value">{{ userInfo.RecommendUserId || '-' }}</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-label">用户组ID</div>
|
||||
<div class="stat-value">{{ userInfo.UserGroupId || '-' }}</div>
|
||||
</div>
|
||||
<!-- 统一的用户数据概览区域 -->
|
||||
<div class="profile-stats-unified">
|
||||
<!-- 余额数据 -->
|
||||
<div class="stat-item" v-for="balance in userBalanceList" :key="balance.id">
|
||||
<div class="stat-label">{{ balance.typeName }}</div>
|
||||
<div class="stat-value" :style="{ color: balance.typeColor }">{{ formatBalance(balance.price) }}</div>
|
||||
</div>
|
||||
<!-- 分隔线 -->
|
||||
<el-divider direction="vertical" v-if="userBalanceList.length > 0" class="stats-divider" />
|
||||
<!-- 其他状态数据 -->
|
||||
<div class="stat-item">
|
||||
<div class="stat-label">实名状态</div>
|
||||
<div class="stat-value">
|
||||
<el-tag :type="userInfo.RealName?.Status === 1 ? 'success' : 'warning'" size="small" effect="light">
|
||||
{{ getRealNameStatusText(userInfo.RealName?.Status) }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-label">推荐人ID</div>
|
||||
<div class="stat-value">{{ userInfo.RecommendUserId || '-' }}</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-label">用户组ID</div>
|
||||
<div class="stat-value">{{ userInfo.UserGroupId || '-' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -298,19 +306,34 @@
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="推荐人">
|
||||
<div class="recommend-user-selector">
|
||||
<div class="selected-user" v-if="recommendUserInfo.UserId">
|
||||
<el-avatar :size="32" :src="recommendUserInfo.Avatar" />
|
||||
<span class="user-name">{{ recommendUserInfo.UserName }}</span>
|
||||
<span class="user-id">(ID: {{ recommendUserInfo.UserId }})</span>
|
||||
<el-button type="danger" link size="small" @click="clearRecommendUser">
|
||||
<el-icon><Close /></el-icon>
|
||||
<el-input
|
||||
v-if="recommendUserInfo.UserId"
|
||||
:model-value="`${recommendUserInfo.UserName} (ID: ${recommendUserInfo.UserId})`"
|
||||
readonly
|
||||
style="width: 100%"
|
||||
>
|
||||
<template #suffix>
|
||||
<el-icon class="clear-icon" @click="clearRecommendUser"><Close /></el-icon>
|
||||
</template>
|
||||
<template #append>
|
||||
<el-button @click="showUserSelectorDialog = true">
|
||||
<el-icon><User /></el-icon>
|
||||
</el-button>
|
||||
</div>
|
||||
<el-button v-else type="primary" plain @click="showUserSelectorDialog = true">
|
||||
<el-icon><User /></el-icon> 选择推荐人
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-input>
|
||||
<el-input
|
||||
v-else
|
||||
placeholder="请选择推荐人"
|
||||
readonly
|
||||
style="width: 100%"
|
||||
@click="showUserSelectorDialog = true"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="showUserSelectorDialog = true">
|
||||
<el-icon><User /></el-icon>
|
||||
</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
@@ -559,6 +582,16 @@ const userBalance = ref({
|
||||
total_consume: 0
|
||||
})
|
||||
|
||||
// 用户余额列表（用于概览卡片展示）
|
||||
const userBalanceList = ref([])
|
||||
|
||||
// 余额类型映射
|
||||
const balanceTypeMap = {
|
||||
entity: { name: '云钻', type: 'cloud_diamond', color: '#409EFF' },
|
||||
general: { name: '云币', type: 'cloud_coin', color: '#67C23A' },
|
||||
withdraw: { name: '云点', type: 'cloud_points', color: '#E6A23C' }
|
||||
}
|
||||
|
||||
// 编辑用户相关
|
||||
const editDialogVisible = ref(false)
|
||||
const editForm = reactive({
|
||||
@@ -684,6 +717,8 @@ const fetchUserInfo = async () => {
|
||||
if (userInfo.value.CoverID) {
|
||||
fetchCurrentAvatar(userInfo.value.CoverID)
|
||||
}
|
||||
// 获取用户余额列表
|
||||
fetchUserBalanceList(userId)
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error('获取用户信息失败')
|
||||
@@ -692,6 +727,25 @@ const fetchUserInfo = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
// 获取用户余额列表（用于概览卡片展示）
|
||||
const fetchUserBalanceList = async (userId) => {
|
||||
try {
|
||||
const res = await getUserBalanceCount({ user_id: userId })
|
||||
if (res.data.code === 200) {
|
||||
// 只保留映射类型中存在的余额
|
||||
userBalanceList.value = (res.data.data || []).filter(item => {
|
||||
return balanceTypeMap[item.type]
|
||||
}).map(item => ({
|
||||
...item,
|
||||
typeName: balanceTypeMap[item.type]?.name || item.type,
|
||||
typeColor: '#000000'
|
||||
}))
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取用户余额失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 刷新数据
|
||||
const refreshData = () => {
|
||||
fetchUserInfo()
|
||||
@@ -1038,7 +1092,7 @@ const handleViewOrder = (row) => {
|
||||
const handleViewTicket = (row) => {
|
||||
router.push({
|
||||
path: '/ticket/detail',
|
||||
query: { work_id: row.work_id }
|
||||
query: { id: row.work_id }
|
||||
})
|
||||
}
|
||||
|
||||
@@ -1286,6 +1340,12 @@ const formatDate = (dateString) => {
|
||||
})
|
||||
}
|
||||
|
||||
// 余额格式化（分转元，保留2位小数）
|
||||
const formatBalance = (price) => {
|
||||
if (price === undefined || price === null) return '0.00'
|
||||
return (price / 100).toFixed(2)
|
||||
}
|
||||
|
||||
const loadUserData = async () => {
|
||||
if(!route.query.user_id){
|
||||
ElMessage.error('缺少用户ID参数');
|
||||
@@ -1375,6 +1435,7 @@ onActivated(() => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.avatar-wrapper {
|
||||
@@ -1435,27 +1496,37 @@ onActivated(() => {
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.profile-stats {
|
||||
/* 统一的用户数据概览区域 */
|
||||
.profile-stats-unified {
|
||||
display: flex;
|
||||
gap: 32px;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
margin-left: auto;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
.profile-stats-unified .stat-item {
|
||||
text-align: center;
|
||||
min-width: 70px;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
.profile-stats-unified .stat-label {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
.profile-stats-unified .stat-value {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.stats-divider {
|
||||
height: 40px;
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
.action-divider {
|
||||
margin: 0 0 20px 0;
|
||||
}
|
||||
@@ -1540,28 +1611,15 @@ onActivated(() => {
|
||||
}
|
||||
|
||||
/* 推荐人选择器 */
|
||||
.recommend-user-selector {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.selected-user {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 8px 12px;
|
||||
background: #f5f7fa;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #e4e7ed;
|
||||
}
|
||||
|
||||
.selected-user .user-name {
|
||||
font-weight: 500;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.selected-user .user-id {
|
||||
/* 推荐人选择器样式 */
|
||||
.clear-icon {
|
||||
cursor: pointer;
|
||||
color: #909399;
|
||||
font-size: 12px;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.clear-icon:hover {
|
||||
color: #f56c6c;
|
||||
}
|
||||
|
||||
|
||||
@@ -1671,12 +1729,17 @@ onActivated(() => {
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.profile-stats {
|
||||
.profile-stats-unified {
|
||||
width: 100%;
|
||||
justify-content: space-around;
|
||||
justify-content: flex-start;
|
||||
background: #f9fafc;
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.stats-divider {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.balance-overview {
|
||||
@@ -1688,5 +1751,13 @@ onActivated(() => {
|
||||
.balance-overview {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.profile-stats-unified {
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.profile-stats-unified .stat-item {
|
||||
min-width: 60px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -141,20 +141,34 @@
|
||||
<el-input v-model="groupForm.auth" type="textarea" :rows="4" placeholder="请输入权限配置（JSON格式）" />
|
||||
</el-form-item>
|
||||
<el-form-item label="下一级用户组ID">
|
||||
<div class="selector-field">
|
||||
<div class="selector-info" v-if="selectedHigherGroupInfo">
|
||||
<el-tag type="primary" effect="plain">
|
||||
ID: {{ groupForm.higher_level_id }} - {{ selectedHigherGroupInfo.group_name || selectedHigherGroupInfo.name }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<div class="selector-actions">
|
||||
<el-button type="primary" @click="groupSelectorVisible = true">
|
||||
<el-input
|
||||
v-if="selectedHigherGroupInfo"
|
||||
:model-value="`${selectedHigherGroupInfo.Name || selectedHigherGroupInfo.name} (ID: ${groupForm.higher_level_id})`"
|
||||
readonly
|
||||
style="width: 100%"
|
||||
>
|
||||
<template #suffix>
|
||||
<el-icon class="clear-icon" @click="clearHigherGroup"><Close /></el-icon>
|
||||
</template>
|
||||
<template #append>
|
||||
<el-button @click="groupSelectorVisible = true">
|
||||
<el-icon><Connection /></el-icon>
|
||||
{{ groupForm.higher_level_id ? '更换用户组' : '选择用户组' }}
|
||||
</el-button>
|
||||
<el-button v-if="groupForm.higher_level_id" @click="clearHigherGroup">清除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-input>
|
||||
<el-input
|
||||
v-else
|
||||
placeholder="请选择下一级用户组（可选）"
|
||||
readonly
|
||||
style="width: 100%"
|
||||
@click="groupSelectorVisible = true"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="groupSelectorVisible = true">
|
||||
<el-icon><Connection /></el-icon>
|
||||
</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 用户组选择器 -->
|
||||
@@ -274,7 +288,7 @@
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { Plus, Refresh, Edit, User, Delete, Connection } from '@element-plus/icons-vue'
|
||||
import { Plus, Refresh, Edit, User, Delete, Connection, Close } from '@element-plus/icons-vue'
|
||||
import {
|
||||
getUserGroupList,
|
||||
getUserGroupMemberList,
|
||||
@@ -747,22 +761,14 @@ onMounted(() => {
|
||||
100% { background-position: -200% 0; }
|
||||
}
|
||||
|
||||
/* 选择器字段样式 */
|
||||
.selector-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
/* 选择器清除图标样式 */
|
||||
.clear-icon {
|
||||
cursor: pointer;
|
||||
color: #909399;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.selector-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.selector-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
.clear-icon:hover {
|
||||
color: #f56c6c;
|
||||
}
|
||||
</style>
|
||||
|
||||
+340
-52
@@ -4,35 +4,42 @@
|
||||
<el-card class="main-container" shadow="never">
|
||||
<!-- 搜索和操作栏 -->
|
||||
<div class="filter-section">
|
||||
<div class="filter-content">
|
||||
<el-form :inline="true" :model="queryParams" class="search-form">
|
||||
<el-form-item label="关键字">
|
||||
<el-input v-model="queryParams.key" placeholder="请输入用户名/邮箱" clearable style="width: 200px" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleQuery">
|
||||
<el-icon><Search /></el-icon>查询
|
||||
</el-button>
|
||||
<el-button @click="resetQuery">重置</el-button>
|
||||
<el-button type="success" @click="fetchUserList">
|
||||
<el-icon><Refresh /></el-icon>刷新
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户ID">
|
||||
<el-input
|
||||
v-model="jumpUserId"
|
||||
placeholder="输入用户ID跳转"
|
||||
clearable
|
||||
style="width: 150px"
|
||||
@keyup.enter="handleJumpToUser"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="warning" @click="handleJumpToUser">
|
||||
<el-icon><Position /></el-icon>跳转
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<!-- 第一行：搜索区域 -->
|
||||
<div class="filter-row search-row">
|
||||
<div class="search-group">
|
||||
<span class="search-label">关键字</span>
|
||||
<el-input
|
||||
v-model="queryParams.key"
|
||||
placeholder="请输入用户名/邮箱"
|
||||
clearable
|
||||
class="search-input"
|
||||
/>
|
||||
</div>
|
||||
<div class="search-group">
|
||||
<span class="search-label">用户ID</span>
|
||||
<el-input
|
||||
v-model="jumpUserId"
|
||||
placeholder="输入ID跳转"
|
||||
clearable
|
||||
class="search-input-small"
|
||||
@keyup.enter="handleJumpToUser"
|
||||
/>
|
||||
</div>
|
||||
<div class="search-buttons">
|
||||
<el-button type="primary" @click="handleQuery">
|
||||
<el-icon><Search /></el-icon><span class="btn-text">查询</span>
|
||||
</el-button>
|
||||
<el-button @click="resetQuery">重置</el-button>
|
||||
<el-button type="success" @click="fetchUserList">
|
||||
<el-icon><Refresh /></el-icon><span class="btn-text">刷新</span>
|
||||
</el-button>
|
||||
<el-button type="warning" @click="handleJumpToUser">
|
||||
<el-icon><Position /></el-icon><span class="btn-text">跳转</span>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 第二行：操作栏 -->
|
||||
<div class="filter-row action-row">
|
||||
<div class="action-bar">
|
||||
<el-button type="primary" @click="handleAdd">
|
||||
<el-icon><Plus /></el-icon>新增用户
|
||||
@@ -70,12 +77,69 @@
|
||||
<div class="skeleton-cell skeleton-action"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 数据表格 -->
|
||||
|
||||
<!-- 移动端卡片列表 -->
|
||||
<div v-else class="mobile-card-list">
|
||||
<div v-for="row in userList" :key="row.UserId" class="user-card">
|
||||
<div class="card-header">
|
||||
<el-checkbox v-model="row.selected" @change="handleCardSelect(row)" />
|
||||
<el-avatar :size="48" :src="row.avatarUrl || ''" class="card-avatar" />
|
||||
<div class="card-user-info">
|
||||
<div class="card-username">{{ row.UserName }}</div>
|
||||
<div class="card-email">{{ row.Email || '未设置邮箱' }}</div>
|
||||
</div>
|
||||
<el-tag :type="row.IsDeleted ? 'danger' : 'success'" size="small">
|
||||
{{ row.IsDeleted ? '已删除' : '正常' }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-info-row">
|
||||
<span class="card-label">用户ID:</span>
|
||||
<span class="card-value">{{ row.UserId }}</span>
|
||||
</div>
|
||||
<div class="card-info-row">
|
||||
<span class="card-label">手机号:</span>
|
||||
<span class="card-value">{{ row.Phone || '未设置' }}</span>
|
||||
</div>
|
||||
<div class="card-info-row">
|
||||
<span class="card-label">用户组:</span>
|
||||
<span class="card-value">{{ row.UserGroup?.Name || '默认用户组' }}</span>
|
||||
</div>
|
||||
<div class="card-info-row">
|
||||
<span class="card-label">实名:</span>
|
||||
<span class="card-value">{{ row.RealName?.Name || '未实名' }}</span>
|
||||
</div>
|
||||
<div class="card-info-row">
|
||||
<span class="card-label">注册时间:</span>
|
||||
<span class="card-value">{{ formatDate(row.CreatedAt) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<el-button type="primary" size="small" @click="handleUserDetail(row)">详情</el-button>
|
||||
<el-dropdown trigger="click" @command="(command) => handleCommand(command, row)">
|
||||
<el-button size="small">更多<el-icon><ArrowDown /></el-icon></el-button>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item command="edit">编辑用户</el-dropdown-item>
|
||||
<el-dropdown-item command="avatar">修改头像</el-dropdown-item>
|
||||
<el-dropdown-item command="password">修改密码</el-dropdown-item>
|
||||
<el-dropdown-item command="group">修改用户组</el-dropdown-item>
|
||||
<el-dropdown-item command="realname">实名信息</el-dropdown-item>
|
||||
<el-dropdown-item command="balance">余额管理</el-dropdown-item>
|
||||
<el-dropdown-item command="delete" divided>删除用户</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 数据表格（PC端） -->
|
||||
<el-table
|
||||
v-else
|
||||
v-if="!loading"
|
||||
:data="userList"
|
||||
@selection-change="handleSelectionChange"
|
||||
style="width: 100%"
|
||||
class="desktop-table"
|
||||
:header-cell-style="{ background: '#fafafa', color: '#333', fontWeight: 600 }"
|
||||
>
|
||||
<el-table-column type="selection" width="55" />
|
||||
@@ -969,52 +1033,276 @@ onMounted(() => {
|
||||
background: #fafbfc;
|
||||
}
|
||||
|
||||
.filter-content {
|
||||
.filter-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16px 20px;
|
||||
gap: 20px;
|
||||
padding: 12px 20px;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.search-form {
|
||||
margin: 0;
|
||||
flex: 1;
|
||||
.filter-row:not(:last-child) {
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
}
|
||||
|
||||
.search-row {
|
||||
padding: 16px 20px;
|
||||
}
|
||||
|
||||
.action-row {
|
||||
padding: 12px 20px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.search-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
min-width: 400px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.search-form :deep(.el-form-item) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.search-form :deep(.el-form-item__label) {
|
||||
margin-right: 8px;
|
||||
.search-label {
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.search-input-small {
|
||||
width: 140px;
|
||||
}
|
||||
|
||||
.search-buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.action-bar {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
/* 移动端卡片列表样式 */
|
||||
.mobile-card-list {
|
||||
display: none;
|
||||
padding: 16px;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.user-card {
|
||||
background: #fff;
|
||||
border: 1px solid #e1e8ed;
|
||||
padding: 16px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid #f0f2f5;
|
||||
}
|
||||
|
||||
.card-avatar {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.filter-content {
|
||||
.card-user-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.card-username {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #2c3e50;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.card-email {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 12px 0;
|
||||
}
|
||||
|
||||
.card-info-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 6px 0;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.card-label {
|
||||
color: #909399;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.card-value {
|
||||
color: #2c3e50;
|
||||
text-align: right;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid #f0f2f5;
|
||||
}
|
||||
|
||||
/* PC端表格显示 */
|
||||
.desktop-table {
|
||||
display: table;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 平板适配 */
|
||||
@media (max-width: 1024px) {
|
||||
.search-row {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.search-form {
|
||||
min-width: 100%;
|
||||
.search-group {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.search-input,
|
||||
.search-input-small {
|
||||
flex: 1;
|
||||
width: auto !important;
|
||||
}
|
||||
|
||||
.search-buttons {
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
/* 移动端适配 */
|
||||
@media (max-width: 768px) {
|
||||
.filter-row {
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
.search-row {
|
||||
padding: 12px 16px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.action-row {
|
||||
padding: 10px 16px;
|
||||
}
|
||||
|
||||
.search-group {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.search-label {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.search-input,
|
||||
.search-input-small {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.search-buttons {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.search-buttons .el-button {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.action-bar {
|
||||
width: 100%;
|
||||
justify-content: flex-end;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.action-bar .el-button {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 移动端显示卡片，隐藏表格 */
|
||||
.mobile-card-list {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.desktop-table {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* 分页移动端样式 */
|
||||
.pagination {
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
.pagination :deep(.el-pagination__sizes),
|
||||
.pagination :deep(.el-pagination__jump) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* 超小屏幕适配 */
|
||||
@media (max-width: 480px) {
|
||||
.filter-row {
|
||||
padding: 10px 12px;
|
||||
}
|
||||
|
||||
.search-buttons {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
|
||||
.search-buttons .el-button {
|
||||
padding: 8px 0;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.action-bar {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.action-bar .el-button {
|
||||
font-size: 13px;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user