| | |
| | | </el-card> |
| | | <el-card class="stat-card"> |
| | | <div class="stat-content"> |
| | | <div class="stat-number">{{ stats.ongoing }}</div> |
| | | <div class="stat-number">{{ stats.underWay }}</div> |
| | | <div class="stat-label">进行中</div> |
| | | </div> |
| | | </el-card> |
| | |
| | | </el-card> |
| | | <el-card class="stat-card"> |
| | | <div class="stat-content"> |
| | | <div class="stat-number">{{ stats.upcoming }}</div> |
| | | <div class="stat-number">{{ stats.toStart }}</div> |
| | | <div class="stat-label">即将开始</div> |
| | | </div> |
| | | </el-card> |
| | |
| | | </el-tag> |
| | | </div> |
| | | <div class="meeting-time"> |
| | | <el-icon><Clock /></el-icon> |
| | | {{dayjs(meeting.startTime).format("YYYY-MM-DD")}}<el-icon><Clock /></el-icon> |
| | | {{ formatTime(meeting.startTime) }} - {{ formatTime(meeting.endTime) }} |
| | | </div> |
| | | </div> |
| | |
| | | </div> |
| | | |
| | | <div class="meeting-agenda"> |
| | | <h4>议程安排</h4> |
| | | <h4>会议纪要</h4> |
| | | <div class="agenda-list"> |
| | | <div class="editor-container"> |
| | | <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> |
| | | v-html="meeting.content" |
| | | /> |
| | | </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> |
| | | |
| | |
| | | import { ref, reactive, onMounted } from 'vue' |
| | | import { ElMessage } from 'element-plus' |
| | | import { Clock, Location, User, UserFilled } from '@element-plus/icons-vue' |
| | | import Editor from "@/components/Editor/index.vue"; |
| | | import {getMeetSummaryItems,getMeetSummary} from '@/api/collaborativeApproval/meeting.js' |
| | | import dayjs from "dayjs"; |
| | | |
| | | // 统计数据 |
| | | const stats = reactive({ |
| | | total: 12, |
| | | ongoing: 3, |
| | | completed: 7, |
| | | upcoming: 2 |
| | | const stats = ref({ |
| | | total: 0, |
| | | underWay: 0, |
| | | completed: 0, |
| | | toStart: 0 |
| | | }) |
| | | |
| | | // 会议数据 |
| | | const meetings = ref([ |
| | | { |
| | | id: 1, |
| | | title: '产品开发周会', |
| | | status: 'ongoing', |
| | | startTime: '2025-01-15 09:00:00', |
| | | endTime: '2025-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: '2025-01-15 14:00:00', |
| | | endTime: '2025-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: '2025-01-14 16:00:00', |
| | | endTime: '2025-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 getStatusType = (status) => { |
| | | const statusMap = { |
| | | 'ongoing': 'success', |
| | | 'upcoming': 'warning', |
| | | 'completed': 'info' |
| | | '2': 'success', |
| | | '1': 'warning', |
| | | '0': 'info' |
| | | } |
| | | return statusMap[status] || 'info' |
| | | } |
| | |
| | | // 获取状态文本 |
| | | const getStatusText = (status) => { |
| | | const statusMap = { |
| | | 'ongoing': '进行中', |
| | | 'upcoming': '即将开始', |
| | | 'completed': '已完成' |
| | | '2': '进行中', |
| | | '1': '即将开始', |
| | | '0': '已完成' |
| | | } |
| | | return statusMap[status] || '未知' |
| | | } |
| | |
| | | return date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' }) |
| | | } |
| | | |
| | | // 创建会议 |
| | | const createMeeting = () => { |
| | | dialogVisible.value = true |
| | | // 重置表单 |
| | | Object.assign(meetingForm, { |
| | | title: '', |
| | | timeRange: [], |
| | | location: '', |
| | | host: '', |
| | | description: '' |
| | | |
| | | onMounted( async () => { |
| | | let [resp1,resp2] = await Promise.all([getMeetSummary(),getMeetSummaryItems()]) |
| | | stats.value = resp1.data |
| | | meetings.value = resp2.data.map(item => { |
| | | return { |
| | | ...item, |
| | | participants: JSON.parse(item.participants) |
| | | } |
| | | }) |
| | | } |
| | | |
| | | // 提交会议 |
| | | 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> |