<template>
|
<div class="app-container">
|
<!-- 页面标题 -->
|
<div class="page-header">
|
<h2>会议看板</h2>
|
<!-- <el-button type="primary" @click="createMeeting">创建会议</el-button>-->
|
</div>
|
|
<!-- 会议统计卡片 -->
|
<div class="stats-cards">
|
<el-card class="stat-card">
|
<div class="stat-content">
|
<div class="stat-number">{{ stats.total }}</div>
|
<div class="stat-label">总会议数</div>
|
</div>
|
</el-card>
|
<el-card class="stat-card">
|
<div class="stat-content">
|
<div class="stat-number">{{ stats.ongoing }}</div>
|
<div class="stat-label">进行中</div>
|
</div>
|
</el-card>
|
<el-card class="stat-card">
|
<div class="stat-content">
|
<div class="stat-number">{{ stats.completed }}</div>
|
<div class="stat-label">已完成</div>
|
</div>
|
</el-card>
|
<el-card class="stat-card">
|
<div class="stat-content">
|
<div class="stat-number">{{ stats.upcoming }}</div>
|
<div class="stat-label">即将开始</div>
|
</div>
|
</el-card>
|
</div>
|
|
<!-- 会议列表 -->
|
<div class="meeting-list">
|
<el-card v-for="meeting in meetings" :key="meeting.id" class="meeting-card">
|
<div class="meeting-header">
|
<div class="meeting-title">
|
<h3>{{ meeting.title }}</h3>
|
<el-tag :type="getStatusType(meeting.status)" size="small">
|
{{ getStatusText(meeting.status) }}
|
</el-tag>
|
</div>
|
<div class="meeting-time">
|
<el-icon><Clock /></el-icon>
|
{{ formatTime(meeting.startTime) }} - {{ formatTime(meeting.endTime) }}
|
</div>
|
</div>
|
|
<div class="meeting-info">
|
<div class="info-item">
|
<el-icon><Location /></el-icon>
|
<span>{{ meeting.location }}</span>
|
</div>
|
<div class="info-item">
|
<el-icon><User /></el-icon>
|
<span>主持人: {{ meeting.host }}</span>
|
</div>
|
<div class="info-item">
|
<el-icon><UserFilled /></el-icon>
|
<span>参会人数: {{ meeting.participants.length }}人</span>
|
</div>
|
</div>
|
|
<div class="meeting-agenda">
|
<h4>议程安排</h4>
|
<div class="agenda-list">
|
<div
|
v-for="(agenda, index) in meeting.agenda"
|
:key="index"
|
class="agenda-item"
|
:class="{ 'active': agenda.status === 'active', 'completed': agenda.status === 'completed' }"
|
>
|
<span class="agenda-time">{{ agenda.time }}</span>
|
<span class="agenda-content">{{ agenda.content }}</span>
|
<el-tag
|
:type="getAgendaStatusType(agenda.status)"
|
size="small"
|
>
|
{{ getAgendaStatusText(agenda.status) }}
|
</el-tag>
|
</div>
|
</div>
|
</div>
|
|
<!-- <div class="meeting-actions">-->
|
<!-- <el-button type="primary" size="small" @click="joinMeeting(meeting)">-->
|
<!-- 加入会议-->
|
<!-- </el-button>-->
|
<!-- <el-button type="info" size="small" @click="viewDetails(meeting)">-->
|
<!-- 查看详情-->
|
<!-- </el-button>-->
|
<!-- <el-button type="warning" size="small" @click="editMeeting(meeting)">-->
|
<!-- 编辑-->
|
<!-- </el-button>-->
|
<!-- </div>-->
|
</el-card>
|
</div>
|
|
<!-- 创建会议对话框 -->
|
<el-dialog v-model="dialogVisible" title="创建会议" width="600px">
|
<el-form :model="meetingForm" label-width="100px">
|
<el-form-item label="会议标题">
|
<el-input v-model="meetingForm.title" placeholder="请输入会议标题" />
|
</el-form-item>
|
<el-form-item label="会议时间">
|
<el-date-picker
|
v-model="meetingForm.timeRange"
|
type="datetimerange"
|
range-separator="至"
|
start-placeholder="开始时间"
|
end-placeholder="结束时间"
|
format="YYYY-MM-DD HH:mm"
|
value-format="YYYY-MM-DD HH:mm:ss"
|
/>
|
</el-form-item>
|
<el-form-item label="会议地点">
|
<el-input v-model="meetingForm.location" placeholder="请输入会议地点" />
|
</el-form-item>
|
<el-form-item label="主持人">
|
<el-input v-model="meetingForm.host" placeholder="请输入主持人姓名" />
|
</el-form-item>
|
<el-form-item label="会议描述">
|
<el-input
|
v-model="meetingForm.description"
|
type="textarea"
|
:rows="3"
|
placeholder="请输入会议描述"
|
/>
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button @click="dialogVisible = false">取消</el-button>
|
<el-button type="primary" @click="submitMeeting">确定</el-button>
|
</span>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, reactive, onMounted } from 'vue'
|
import { ElMessage } from 'element-plus'
|
import { Clock, Location, User, UserFilled } from '@element-plus/icons-vue'
|
|
// 统计数据
|
const stats = reactive({
|
total: 12,
|
ongoing: 3,
|
completed: 7,
|
upcoming: 2
|
})
|
|
// 会议数据
|
const meetings = ref([
|
{
|
id: 1,
|
title: '产品开发周会',
|
status: 'ongoing',
|
startTime: '2024-01-15 09:00:00',
|
endTime: '2024-01-15 10:30:00',
|
location: '会议室A',
|
host: '张经理',
|
participants: ['张经理', '李工程师', '王设计师', '赵测试员'],
|
agenda: [
|
{ time: '09:00-09:15', content: '上周工作总结', status: 'completed' },
|
{ time: '09:15-09:45', content: '本周开发计划', status: 'active' },
|
{ time: '09:45-10:00', content: '技术难点讨论', status: 'pending' },
|
{ time: '10:00-10:30', content: '问题反馈与解决', status: 'pending' }
|
]
|
},
|
{
|
id: 2,
|
title: '客户需求评审会',
|
status: 'upcoming',
|
startTime: '2024-01-15 14:00:00',
|
endTime: '2024-01-15 15:00:00',
|
location: '线上会议',
|
host: '陈总监',
|
participants: ['陈总监', '刘产品经理', '孙客户经理', '客户代表'],
|
agenda: [
|
{ time: '14:00-14:20', content: '需求背景介绍', status: 'pending' },
|
{ time: '14:20-14:40', content: '功能需求分析', status: 'pending' },
|
{ time: '14:40-15:00', content: '技术可行性评估', status: 'pending' }
|
]
|
},
|
{
|
id: 3,
|
title: '团队建设活动',
|
status: 'completed',
|
startTime: '2024-01-14 16:00:00',
|
endTime: '2024-01-14 18:00:00',
|
location: '公司大厅',
|
host: '人事部',
|
participants: ['全体员工'],
|
agenda: [
|
{ time: '16:00-16:30', content: '团队游戏', status: 'completed' },
|
{ time: '16:30-17:00', content: '经验分享', status: 'completed' },
|
{ time: '17:00-18:00', content: '自由交流', status: 'completed' }
|
]
|
}
|
])
|
|
// 对话框相关
|
const dialogVisible = ref(false)
|
const meetingForm = reactive({
|
title: '',
|
timeRange: [],
|
location: '',
|
host: '',
|
description: ''
|
})
|
|
// 获取状态类型
|
const getStatusType = (status) => {
|
const statusMap = {
|
'ongoing': 'success',
|
'upcoming': 'warning',
|
'completed': 'info'
|
}
|
return statusMap[status] || 'info'
|
}
|
|
// 获取状态文本
|
const getStatusText = (status) => {
|
const statusMap = {
|
'ongoing': '进行中',
|
'upcoming': '即将开始',
|
'completed': '已完成'
|
}
|
return statusMap[status] || '未知'
|
}
|
|
// 获取议程状态类型
|
const getAgendaStatusType = (status) => {
|
const statusMap = {
|
'completed': 'success',
|
'active': 'warning',
|
'pending': 'info'
|
}
|
return statusMap[status] || 'info'
|
}
|
|
// 获取议程状态文本
|
const getAgendaStatusText = (status) => {
|
const statusMap = {
|
'completed': '已完成',
|
'active': '进行中',
|
'pending': '待开始'
|
}
|
return statusMap[status] || '未知'
|
}
|
|
// 格式化时间
|
const formatTime = (timeStr) => {
|
const date = new Date(timeStr)
|
return date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
|
}
|
|
// 创建会议
|
const createMeeting = () => {
|
dialogVisible.value = true
|
// 重置表单
|
Object.assign(meetingForm, {
|
title: '',
|
timeRange: [],
|
location: '',
|
host: '',
|
description: ''
|
})
|
}
|
|
// 提交会议
|
const submitMeeting = () => {
|
if (!meetingForm.title || !meetingForm.timeRange.length || !meetingForm.location || !meetingForm.host) {
|
ElMessage.warning('请填写完整的会议信息')
|
return
|
}
|
|
// 创建新会议
|
const newMeeting = {
|
id: Date.now(),
|
title: meetingForm.title,
|
status: 'upcoming',
|
startTime: meetingForm.timeRange[0],
|
endTime: meetingForm.timeRange[1],
|
location: meetingForm.location,
|
host: meetingForm.host,
|
participants: [meetingForm.host],
|
agenda: [
|
{ time: '待定', content: '议程待定', status: 'pending' }
|
]
|
}
|
|
meetings.value.unshift(newMeeting)
|
stats.total++
|
stats.upcoming++
|
|
ElMessage.success('会议创建成功')
|
dialogVisible.value = false
|
}
|
|
// 加入会议
|
const joinMeeting = (meeting) => {
|
ElMessage.success(`已加入会议：${meeting.title}`)
|
}
|
|
// 查看详情
|
const viewDetails = (meeting) => {
|
ElMessage.info(`查看会议详情：${meeting.title}`)
|
}
|
|
// 编辑会议
|
const editMeeting = (meeting) => {
|
ElMessage.info(`编辑会议：${meeting.title}`)
|
}
|
|
onMounted(() => {
|
console.log('会议看板页面加载完成')
|
})
|
</script>
|
|
<style scoped>
|
.app-container {
|
padding: 20px;
|
}
|
|
.page-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 20px;
|
}
|
|
.page-header h2 {
|
margin: 0;
|
color: #303133;
|
}
|
|
.stats-cards {
|
display: grid;
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
gap: 20px;
|
margin-bottom: 30px;
|
}
|
|
.stat-card {
|
text-align: center;
|
}
|
|
.stat-content {
|
padding: 10px;
|
}
|
|
.stat-number {
|
font-size: 32px;
|
font-weight: bold;
|
color: #409eff;
|
margin-bottom: 8px;
|
}
|
|
.stat-label {
|
font-size: 14px;
|
color: #606266;
|
}
|
|
.meeting-list {
|
display: grid;
|
gap: 20px;
|
}
|
|
.meeting-card {
|
border-radius: 8px;
|
}
|
|
.meeting-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: flex-start;
|
margin-bottom: 15px;
|
}
|
|
.meeting-title {
|
display: flex;
|
align-items: center;
|
gap: 10px;
|
}
|
|
.meeting-title h3 {
|
margin: 0;
|
color: #303133;
|
}
|
|
.meeting-time {
|
display: flex;
|
align-items: center;
|
gap: 5px;
|
color: #606266;
|
font-size: 14px;
|
}
|
|
.meeting-info {
|
display: flex;
|
gap: 20px;
|
margin-bottom: 20px;
|
flex-wrap: wrap;
|
}
|
|
.info-item {
|
display: flex;
|
align-items: center;
|
gap: 5px;
|
color: #606266;
|
font-size: 14px;
|
}
|
|
.meeting-agenda {
|
margin-bottom: 20px;
|
}
|
|
.meeting-agenda h4 {
|
margin: 0 0 15px 0;
|
color: #303133;
|
font-size: 16px;
|
}
|
|
.agenda-list {
|
display: flex;
|
flex-direction: column;
|
gap: 10px;
|
}
|
|
.agenda-item {
|
display: flex;
|
align-items: center;
|
gap: 15px;
|
padding: 10px;
|
border-radius: 6px;
|
background-color: #f5f7fa;
|
}
|
|
.agenda-item.active {
|
background-color: #fdf6ec;
|
border-left: 3px solid #e6a23c;
|
}
|
|
.agenda-item.completed {
|
background-color: #f0f9ff;
|
border-left: 3px solid #409eff;
|
}
|
|
.agenda-time {
|
font-weight: bold;
|
color: #606266;
|
min-width: 80px;
|
}
|
|
.agenda-content {
|
flex: 1;
|
color: #303133;
|
}
|
|
.meeting-actions {
|
display: flex;
|
gap: 10px;
|
justify-content: flex-end;
|
}
|
|
.dialog-footer {
|
display: flex;
|
justify-content: flex-end;
|
gap: 10px;
|
}
|
|
@media (max-width: 768px) {
|
.stats-cards {
|
grid-template-columns: repeat(2, 1fr);
|
}
|
|
.meeting-header {
|
flex-direction: column;
|
gap: 10px;
|
}
|
|
.meeting-info {
|
flex-direction: column;
|
gap: 10px;
|
}
|
|
.meeting-actions {
|
flex-direction: column;
|
}
|
}
|
</style>
|
