418aa57ea8
一、超管端设计优化 - 文档管理SOP体系建立，docs目录重组 - 统一用户管理：跨租户全局视角，合并用户管理+公众用户 - 活动监管全模块重构：全部活动（统计卡片+阶段筛选+SuperDetail详情页）、报名数据/作品数据/评审进度（两层合一扁平列表）、成果发布（去Tab+统计+隐藏写操作） - 菜单精简：移除评委管理/评审规则/通知管理 - Bug修复：租户编辑丢失隐藏菜单、pageSize限制、主色统一 二、UGC绘本创作社区P0 - 数据库：10张新表（user_works/user_work_pages/work_tags等） - 子女账号独立化：Child升级为独立User，家长切换+独立登录 - 用户作品库：CRUD+发布审核，8个API - AI创作流程：提交→生成→保存到作品库，4个API - 作品广场：首页改造为推荐流，标签+搜索+排序 - 内容审核（超管端）：作品审核+作品管理+标签管理 - 活动联动：WorkSelector作品选择器 - 布局改造：底部5Tab（发现/创作/活动/作品库/我的） Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
628 lines
16 KiB
Vue
628 lines
16 KiB
Vue
<template>
|
|
<div class="judges-page">
|
|
<a-card class="mb-4">
|
|
<template #title>评委管理</template>
|
|
<template #extra>
|
|
<a-space>
|
|
<a-button
|
|
v-permission="'judge:create'"
|
|
type="primary"
|
|
@click="handleAdd"
|
|
>
|
|
<template #icon><PlusOutlined /></template>
|
|
新增
|
|
</a-button>
|
|
<a-button v-permission="'judge:create'">
|
|
<template #icon><UploadOutlined /></template>
|
|
导入
|
|
</a-button>
|
|
<a-button v-permission="'judge:read'">
|
|
<template #icon><DownloadOutlined /></template>
|
|
导出
|
|
</a-button>
|
|
<a-popconfirm
|
|
v-permission="'judge:delete'"
|
|
title="确定要删除选中的评委吗？"
|
|
:disabled="selectedRowKeys.length === 0"
|
|
@confirm="handleBatchDelete"
|
|
>
|
|
<a-button danger :disabled="selectedRowKeys.length === 0">
|
|
<template #icon><DeleteOutlined /></template>
|
|
删除
|
|
</a-button>
|
|
</a-popconfirm>
|
|
</a-space>
|
|
</template>
|
|
</a-card>
|
|
|
|
<!-- 搜索表单 -->
|
|
<a-form
|
|
:model="searchParams"
|
|
layout="inline"
|
|
class="search-form"
|
|
@finish="handleSearch"
|
|
>
|
|
<a-form-item label="所属单位">
|
|
<a-input
|
|
v-model:value="searchParams.organization"
|
|
placeholder="请输入所属单位"
|
|
allow-clear
|
|
style="width: 200px"
|
|
/>
|
|
</a-form-item>
|
|
<a-form-item label="姓名">
|
|
<a-input
|
|
v-model:value="searchParams.nickname"
|
|
placeholder="请输入姓名"
|
|
allow-clear
|
|
style="width: 150px"
|
|
/>
|
|
</a-form-item>
|
|
<a-form-item label="账号">
|
|
<a-input
|
|
v-model:value="searchParams.username"
|
|
placeholder="请输入账号"
|
|
allow-clear
|
|
style="width: 150px"
|
|
/>
|
|
</a-form-item>
|
|
<a-form-item label="状态">
|
|
<a-select
|
|
v-model:value="searchParams.status"
|
|
placeholder="请选择状态"
|
|
allow-clear
|
|
style="width: 120px"
|
|
>
|
|
<a-select-option value="disabled">停用</a-select-option>
|
|
<a-select-option value="enabled">启用</a-select-option>
|
|
</a-select>
|
|
</a-form-item>
|
|
<a-form-item>
|
|
<a-button type="primary" html-type="submit">
|
|
<template #icon><SearchOutlined /></template>
|
|
搜索
|
|
</a-button>
|
|
<a-button style="margin-left: 8px" @click="handleReset">
|
|
<template #icon><ReloadOutlined /></template>
|
|
重置
|
|
</a-button>
|
|
</a-form-item>
|
|
</a-form>
|
|
|
|
<!-- 数据表格 -->
|
|
<a-table
|
|
:columns="columns"
|
|
:data-source="dataSource"
|
|
:loading="loading"
|
|
:pagination="pagination"
|
|
:row-selection="rowSelection"
|
|
row-key="id"
|
|
@change="handleTableChange"
|
|
>
|
|
<template #bodyCell="{ column, record, index }">
|
|
<template v-if="column.key === 'index'">
|
|
{{ (pagination.current - 1) * pagination.pageSize + index + 1 }}
|
|
</template>
|
|
<template v-else-if="column.key === 'organization'">
|
|
{{ record.organization || "-" }}
|
|
</template>
|
|
<template v-else-if="column.key === 'gender'">
|
|
<span v-if="record.gender === 'male'">男</span>
|
|
<span v-else-if="record.gender === 'female'">女</span>
|
|
<span v-else>-</span>
|
|
</template>
|
|
<template v-else-if="column.key === 'status'">
|
|
<a-tag :color="record.status === 'enabled' ? 'success' : 'error'">
|
|
{{ record.status === "enabled" ? "启用" : "停用" }}
|
|
</a-tag>
|
|
</template>
|
|
<template v-else-if="column.key === 'ongoingContests'">
|
|
<template
|
|
v-if="record.contestJudges && record.contestJudges.length > 0"
|
|
>
|
|
<a-tooltip>
|
|
<template #title>
|
|
<div v-for="cj in record.contestJudges" :key="cj.contest.id">
|
|
{{ cj.contest.contestName }}
|
|
</div>
|
|
</template>
|
|
<a-tag color="processing">
|
|
{{ record.contestJudges.length }}个活动
|
|
</a-tag>
|
|
</a-tooltip>
|
|
</template>
|
|
<span v-else>-</span>
|
|
</template>
|
|
<template v-else-if="column.key === 'action'">
|
|
<a-space>
|
|
<a-button
|
|
v-permission="'judge:update'"
|
|
type="link"
|
|
size="small"
|
|
@click="handleToggleStatus(record)"
|
|
>
|
|
{{ record.status === "enabled" ? "冻结" : "解冻" }}
|
|
</a-button>
|
|
<a-button
|
|
v-permission="'judge:update'"
|
|
type="link"
|
|
size="small"
|
|
@click="handleEdit(record)"
|
|
>
|
|
编辑
|
|
</a-button>
|
|
<a-popconfirm
|
|
v-permission="'judge:delete'"
|
|
title="确定要删除这个评委吗？"
|
|
@confirm="handleDelete(record.id)"
|
|
>
|
|
<a-button type="link" danger size="small">删除</a-button>
|
|
</a-popconfirm>
|
|
</a-space>
|
|
</template>
|
|
</template>
|
|
</a-table>
|
|
|
|
<!-- 新增/编辑评委抽屉 -->
|
|
<a-drawer
|
|
v-model:open="drawerVisible"
|
|
:title="isEditing ? '编辑评委' : '新增评委'"
|
|
placement="right"
|
|
width="500px"
|
|
:footer-style="{ textAlign: 'right' }"
|
|
>
|
|
<a-form
|
|
ref="formRef"
|
|
:model="form"
|
|
:rules="rules"
|
|
:label-col="{ span: 6 }"
|
|
:wrapper-col="{ span: 18 }"
|
|
>
|
|
<a-form-item label="账号" name="username">
|
|
<a-input
|
|
v-model:value="form.username"
|
|
placeholder="请输入账号"
|
|
:maxlength="50"
|
|
:disabled="isEditing"
|
|
/>
|
|
</a-form-item>
|
|
<a-form-item label="姓名" name="nickname">
|
|
<a-input
|
|
v-model:value="form.nickname"
|
|
placeholder="请输入姓名"
|
|
:maxlength="50"
|
|
/>
|
|
</a-form-item>
|
|
<a-form-item label="性别" name="gender">
|
|
<a-radio-group v-model:value="form.gender">
|
|
<a-radio value="male">男</a-radio>
|
|
<a-radio value="female">女</a-radio>
|
|
</a-radio-group>
|
|
</a-form-item>
|
|
<a-form-item label="所属单位" name="organization">
|
|
<a-input
|
|
v-model:value="form.organization"
|
|
placeholder="请输入所属单位"
|
|
:maxlength="100"
|
|
/>
|
|
</a-form-item>
|
|
<a-form-item label="联系方式" name="phone">
|
|
<a-input
|
|
v-model:value="form.phone"
|
|
placeholder="请输入联系方式"
|
|
:maxlength="20"
|
|
/>
|
|
</a-form-item>
|
|
<a-form-item label="初始密码" name="password">
|
|
<a-input-password
|
|
v-model:value="form.password"
|
|
:placeholder="isEditing ? '请输入新密码' : '请输入初始密码'"
|
|
:maxlength="50"
|
|
/>
|
|
</a-form-item>
|
|
</a-form>
|
|
<template #footer>
|
|
<a-button style="margin-right: 8px" @click="handleCancel"
|
|
>取消</a-button
|
|
>
|
|
<a-button type="primary" :loading="submitLoading" @click="handleSubmit">
|
|
确定
|
|
</a-button>
|
|
</template>
|
|
</a-drawer>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, reactive, computed, onMounted } from "vue"
|
|
import { useRoute } from "vue-router"
|
|
import { message } from "ant-design-vue"
|
|
import type { FormInstance, TableProps } from "ant-design-vue"
|
|
import {
|
|
PlusOutlined,
|
|
UploadOutlined,
|
|
DownloadOutlined,
|
|
DeleteOutlined,
|
|
SearchOutlined,
|
|
ReloadOutlined,
|
|
} from "@ant-design/icons-vue"
|
|
import { useListRequest } from "@/composables/useListRequest"
|
|
import { contestsApi } from "@/api/contests"
|
|
import {
|
|
judgesManagementApi,
|
|
type Judge,
|
|
type QueryJudgeParams,
|
|
} from "@/api/judges-management"
|
|
|
|
const route = useRoute()
|
|
const contestId = route.params.id ? Number(route.params.id) : null
|
|
const tenantCode = route.params.tenantCode as string
|
|
|
|
// 检查 contestId 是否有效
|
|
const isValidContestId =
|
|
contestId !== null && !isNaN(contestId) && contestId > 0
|
|
|
|
// 获取评委列表
|
|
const fetchJudgesList = async (params: QueryJudgeParams) => {
|
|
const response = await judgesManagementApi.getList(params)
|
|
return response
|
|
}
|
|
|
|
// 使用列表请求组合函数
|
|
const {
|
|
loading,
|
|
dataSource,
|
|
pagination,
|
|
searchParams,
|
|
fetchList,
|
|
resetSearch,
|
|
search,
|
|
handleTableChange,
|
|
} = useListRequest<Judge, QueryJudgeParams>({
|
|
requestFn: fetchJudgesList,
|
|
defaultSearchParams: {} as QueryJudgeParams,
|
|
defaultPageSize: 10,
|
|
errorMessage: "获取评委列表失败",
|
|
})
|
|
|
|
// 活动信息
|
|
const contestName = ref("")
|
|
|
|
// 表格选择
|
|
const selectedRowKeys = ref<number[]>([])
|
|
const rowSelection = computed<TableProps["rowSelection"]>(() => ({
|
|
selectedRowKeys: selectedRowKeys.value,
|
|
onChange: (keys: any) => {
|
|
selectedRowKeys.value = keys
|
|
},
|
|
}))
|
|
|
|
// 抽屉相关
|
|
const drawerVisible = ref(false)
|
|
const isEditing = ref(false)
|
|
const editingId = ref<number | null>(null)
|
|
const submitLoading = ref(false)
|
|
const formRef = ref<FormInstance>()
|
|
|
|
const form = reactive<{
|
|
username: string
|
|
nickname: string
|
|
gender: "male" | "female" | undefined
|
|
organization: string
|
|
phone: string
|
|
password: string
|
|
}>({
|
|
username: "",
|
|
nickname: "",
|
|
gender: undefined,
|
|
organization: "",
|
|
phone: "",
|
|
password: "",
|
|
})
|
|
|
|
// 表单验证规则
|
|
const rules = computed(() => ({
|
|
username: isEditing.value
|
|
? []
|
|
: [{ required: true, message: "请输入账号", trigger: "blur" }],
|
|
nickname: [{ required: true, message: "请输入姓名", trigger: "blur" }],
|
|
gender: [{ required: true, message: "请选择性别", trigger: "change" }],
|
|
organization: [{ required: true, message: "请输入所属单位", trigger: "blur" }],
|
|
phone: [{ required: true, message: "请输入联系方式", trigger: "blur" }],
|
|
password: isEditing.value
|
|
? []
|
|
: [{ required: true, message: "请输入初始密码", trigger: "blur" }],
|
|
}))
|
|
|
|
// 表格列定义
|
|
const columns = [
|
|
{
|
|
title: "序号",
|
|
key: "index",
|
|
width: 70,
|
|
},
|
|
{
|
|
title: "所属单位",
|
|
key: "organization",
|
|
dataIndex: "organization",
|
|
width: 150,
|
|
},
|
|
{
|
|
title: "姓名",
|
|
dataIndex: "nickname",
|
|
key: "nickname",
|
|
width: 120,
|
|
},
|
|
{
|
|
title: "性别",
|
|
key: "gender",
|
|
width: 80,
|
|
},
|
|
{
|
|
title: "账号",
|
|
dataIndex: "username",
|
|
key: "username",
|
|
width: 150,
|
|
},
|
|
{
|
|
title: "联系方式",
|
|
dataIndex: "phone",
|
|
key: "phone",
|
|
width: 130,
|
|
},
|
|
{
|
|
title: "关联进行中的活动",
|
|
key: "ongoingContests",
|
|
width: 150,
|
|
},
|
|
{
|
|
title: "状态",
|
|
key: "status",
|
|
width: 80,
|
|
},
|
|
{
|
|
title: "操作",
|
|
key: "action",
|
|
width: 180,
|
|
fixed: "right" as const,
|
|
},
|
|
]
|
|
|
|
// 加载活动信息
|
|
const loadContestInfo = async () => {
|
|
// 如果 contestId 无效，跳过加载
|
|
if (!isValidContestId) {
|
|
return
|
|
}
|
|
try {
|
|
const contest = await contestsApi.getDetail(contestId!)
|
|
contestName.value = contest.contestName
|
|
} catch (error) {
|
|
console.error("获取活动信息失败", error)
|
|
}
|
|
}
|
|
|
|
// 搜索
|
|
const handleSearch = () => {
|
|
search()
|
|
}
|
|
|
|
// 重置搜索
|
|
const handleReset = () => {
|
|
resetSearch()
|
|
}
|
|
|
|
// 新增
|
|
const handleAdd = () => {
|
|
isEditing.value = false
|
|
editingId.value = null
|
|
drawerVisible.value = true
|
|
form.username = ""
|
|
form.nickname = ""
|
|
form.gender = undefined
|
|
form.organization = ""
|
|
form.phone = ""
|
|
form.password = ""
|
|
}
|
|
|
|
// 编辑
|
|
const handleEdit = (record: Judge) => {
|
|
isEditing.value = true
|
|
editingId.value = record.id
|
|
drawerVisible.value = true
|
|
form.username = record.username || ""
|
|
form.nickname = record.nickname || ""
|
|
form.gender = record.gender as "male" | "female" | undefined
|
|
form.organization = record.organization || ""
|
|
form.phone = record.phone || ""
|
|
form.password = ""
|
|
}
|
|
|
|
// 切换状态（冻结/解冻）
|
|
const handleToggleStatus = async (record: Judge) => {
|
|
try {
|
|
if (record.status === "enabled") {
|
|
await judgesManagementApi.freeze(record.id)
|
|
message.success("冻结成功")
|
|
} else {
|
|
await judgesManagementApi.unfreeze(record.id)
|
|
message.success("解冻成功")
|
|
}
|
|
fetchList()
|
|
} catch (error: any) {
|
|
message.error(error?.response?.data?.message || "操作失败")
|
|
}
|
|
}
|
|
|
|
// 删除
|
|
const handleDelete = async (id: number) => {
|
|
try {
|
|
await judgesManagementApi.delete(id)
|
|
message.success("删除成功")
|
|
fetchList()
|
|
} catch (error: any) {
|
|
message.error(error?.response?.data?.message || "删除失败")
|
|
}
|
|
}
|
|
|
|
// 批量删除
|
|
const handleBatchDelete = async () => {
|
|
if (selectedRowKeys.value.length === 0) return
|
|
try {
|
|
await judgesManagementApi.batchDelete(selectedRowKeys.value)
|
|
message.success("批量删除成功")
|
|
selectedRowKeys.value = []
|
|
fetchList()
|
|
} catch (error: any) {
|
|
message.error(error?.response?.data?.message || "批量删除失败")
|
|
}
|
|
}
|
|
|
|
// 提交表单
|
|
const handleSubmit = async () => {
|
|
try {
|
|
await formRef.value?.validate()
|
|
submitLoading.value = true
|
|
|
|
if (isEditing.value && editingId.value) {
|
|
// 编辑评委
|
|
await judgesManagementApi.update(editingId.value, {
|
|
nickname: form.nickname,
|
|
gender: form.gender,
|
|
organization: form.organization,
|
|
phone: form.phone,
|
|
...(form.password && { password: form.password }),
|
|
})
|
|
message.success("编辑成功")
|
|
} else {
|
|
// 新增评委
|
|
await judgesManagementApi.create({
|
|
username: form.username,
|
|
nickname: form.nickname,
|
|
gender: form.gender!,
|
|
organization: form.organization,
|
|
phone: form.phone,
|
|
password: form.password,
|
|
status: "enabled",
|
|
})
|
|
message.success("创建成功")
|
|
}
|
|
|
|
drawerVisible.value = false
|
|
fetchList()
|
|
} catch (error: any) {
|
|
if (error?.errorFields) {
|
|
return
|
|
}
|
|
message.error(
|
|
error?.response?.data?.message ||
|
|
(isEditing.value ? "编辑失败" : "创建失败")
|
|
)
|
|
} finally {
|
|
submitLoading.value = false
|
|
}
|
|
}
|
|
|
|
// 取消
|
|
const handleCancel = () => {
|
|
drawerVisible.value = false
|
|
formRef.value?.resetFields()
|
|
}
|
|
|
|
onMounted(() => {
|
|
loadContestInfo()
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
// 主色调
|
|
$primary: #1890ff;
|
|
$primary-dark: #0958d9;
|
|
$gradient-primary: linear-gradient(135deg, $primary 0%, $primary-dark 100%);
|
|
|
|
.judges-page {
|
|
// 标题卡片样式
|
|
:deep(.ant-card) {
|
|
border: none;
|
|
border-radius: 12px;
|
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
|
margin-bottom: 16px;
|
|
|
|
.ant-card-head {
|
|
border-bottom: none;
|
|
padding: 16px 24px;
|
|
|
|
.ant-card-head-title {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: rgba(0, 0, 0, 0.85);
|
|
}
|
|
}
|
|
|
|
.ant-card-body {
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
// 渐变主按钮样式
|
|
:deep(.ant-btn-primary) {
|
|
background: $gradient-primary;
|
|
border: none;
|
|
box-shadow: 0 4px 12px rgba($primary, 0.35);
|
|
transition: all 0.3s ease;
|
|
|
|
&:hover {
|
|
background: linear-gradient(135deg, $primary-dark 0%, darken($primary-dark, 8%) 100%);
|
|
box-shadow: 0 6px 16px rgba($primary, 0.45);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
&:active {
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
// 表格样式
|
|
:deep(.ant-table-wrapper) {
|
|
background: #fff;
|
|
border-radius: 12px;
|
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
|
overflow: hidden;
|
|
|
|
.ant-table {
|
|
.ant-table-thead > tr > th {
|
|
background: #fafafa;
|
|
font-weight: 600;
|
|
color: rgba(0, 0, 0, 0.85);
|
|
border-bottom: 1px solid #f0f0f0;
|
|
}
|
|
|
|
.ant-table-tbody > tr {
|
|
transition: all 0.2s ease;
|
|
|
|
&:hover > td {
|
|
background: rgba($primary, 0.04);
|
|
}
|
|
|
|
> td {
|
|
border-bottom: 1px solid #f5f5f5;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ant-table-pagination {
|
|
padding: 16px;
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.search-form {
|
|
margin-bottom: 16px;
|
|
padding: 20px 24px;
|
|
background: #fff;
|
|
border-radius: 12px;
|
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
|
}
|
|
</style>
|