You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
514 lines
17 KiB
514 lines
17 KiB
<template>
|
|
<div>
|
|
<!-- <el-affix postion="top" :offset="95" v-if="!isDetail"> -->
|
|
<div class="flex justify-between mb-4 bg-white" v-if="!isDetail">
|
|
<b class="text-20px">{{ form.meetingId ? '修改会议' : '新增会议' }}</b>
|
|
<div>
|
|
<el-button @click="submit(true)">保存至草稿</el-button>
|
|
<el-button type="success" @click="submit(false)">保存</el-button>
|
|
</div>
|
|
</div>
|
|
<!-- </el-affix> -->
|
|
<el-form
|
|
:model="form"
|
|
ref="formRef"
|
|
:rules="rules"
|
|
label-width="120px"
|
|
v-loading="loading"
|
|
:disabled="!!isDetail"
|
|
>
|
|
<el-row :gutter="20">
|
|
<el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
|
|
<el-form-item label="会议主题" prop="meetingSubject">
|
|
<el-input v-model="form.meetingSubject" placeholder="请输入会议主题" clearable />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
|
|
<el-form-item label="okr节点" prop="nodeId">
|
|
<el-tree-select
|
|
v-model="form.nodeId"
|
|
:data="peroidList"
|
|
:props="defaultProps"
|
|
:render-after-expand="false"
|
|
:default-expand-all="false"
|
|
check-strictly
|
|
clearable
|
|
placeholder="选择OKR节点"
|
|
style="width: 100%"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :xl="6" :lg="6" :md="12" :sm="12" :xs="24">
|
|
<el-form-item label="会议时间" prop="startTime">
|
|
<el-date-picker
|
|
v-model="form.startTime"
|
|
type="datetime"
|
|
format="YYYY-MM-DD HH:mm"
|
|
value-format="YYYY-MM-DD HH:mm"
|
|
placeholder="请选择会议开始时间"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :xl="6" :lg="6" :md="12" :sm="12" :xs="24">
|
|
<el-form-item label="预计结束时间" prop="expectEndTime">
|
|
<el-date-picker
|
|
v-model="form.expectEndTime"
|
|
type="datetime"
|
|
format="YYYY-MM-DD HH:mm"
|
|
value-format="YYYY-MM-DD HH:mm"
|
|
placeholder="请选择预计结束时间"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :xl="6" :lg="6" :md="12" :sm="12" :xs="24">
|
|
<el-form-item label="会议地点" prop="meetingRoom">
|
|
<el-input v-model="form.meetingRoom" placeholder="请输入会议地点" clearable />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :xl="6" :lg="6" :md="12" :sm="12" :xs="24">
|
|
<el-form-item label="会议状态" prop="status">
|
|
<el-select v-model="form.status" placeholder="请选择会议状态" style="width: 100%">
|
|
<el-option label="未开始" value="1" />
|
|
<el-option label="已结束" value="2" />
|
|
<el-option label="已取消" value="3" disabled />
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="24" :offset="0">
|
|
<el-form-item label="预约参会人员" prop="expectUsers">
|
|
<el-select
|
|
v-model="form.expectUsers"
|
|
placeholder="选择参会人员"
|
|
filterable
|
|
style="width: 100%"
|
|
multiple
|
|
@change="handleUserChange"
|
|
>
|
|
<el-option
|
|
v-for="item in userOptions"
|
|
:key="item.id"
|
|
:label="item.name"
|
|
:value="item.id"
|
|
:disabled="item.status == 1 || item.id == userStore.getUser.id"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="24" :offset="0" v-if="form.meetingId">
|
|
<el-form-item label="实际参会人员" prop="actualUsers">
|
|
<el-checkbox-group v-model="form.actualUsers">
|
|
<el-checkbox
|
|
v-for="item in expectUserOptions"
|
|
:key="item.id"
|
|
:label="item.name"
|
|
:value="item.id"
|
|
>
|
|
{{ item.name }}
|
|
</el-checkbox>
|
|
</el-checkbox-group>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="24" :offset="0" v-if="form.meetingId && !isAllActived">
|
|
<el-form-item label="缺席原因" prop="absentReason">
|
|
<el-input v-model="form.absentReason" placeholder="请输入缺席原因" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="20">
|
|
<el-col :xl="16" :lg="16" :md="24" :sm="24" :xs="24">
|
|
<el-tabs v-model="currentUserId" tab-position="top" @tab-click="userTabChange">
|
|
<el-tab-pane
|
|
v-for="item in form.meetingContentList"
|
|
:key="item.userId"
|
|
:label="item.userName"
|
|
:name="item.userId + ''"
|
|
/>
|
|
</el-tabs>
|
|
<el-tabs v-model="currentContentId" tab-position="left" addable @edit="handleTabsEdit">
|
|
<el-tab-pane
|
|
v-for="(item, index) in form.meetingContentList.find(
|
|
(it) => it.userId == currentUserId
|
|
)?.userMeetingContentList"
|
|
:key="index"
|
|
:label="'内容' + (index + 1)"
|
|
:name="index"
|
|
:closable="index > 0"
|
|
>
|
|
<div v-if="!!isDetail" v-dompurify-html="item.content" class="w-full"></div>
|
|
<Editor v-else v-model="item.content" height="500px" style="width: 100%" />
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</el-col>
|
|
<el-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24" v-if="!!form.meetingId">
|
|
<div v-if="!!isDetail" v-dompurify-html="form.meetingSummary" class="w-full"></div>
|
|
<div v-else>
|
|
<el-tabs v-model="summaryIdx" addable @edit="meetingSummaryEdit">
|
|
<el-tab-pane
|
|
v-for="(item, index) in form.meetingSummaryList"
|
|
:key="index"
|
|
:label="`会议纪要${index || ''}`"
|
|
:name="index"
|
|
:closable="index > 0"
|
|
>
|
|
<Editor
|
|
v-model="item.summary"
|
|
:toolbarConfig="toolbarConfig"
|
|
height="350px"
|
|
placeholder="请输入会议纪要"
|
|
style="width: 100%"
|
|
/>
|
|
<div class="mt-10px">
|
|
<el-form-item label="是否创建待办" label-width="auto">
|
|
<el-radio-group v-model="item.isCreateAgentWork">
|
|
<el-radio :label="true" :value="true"> 创建待办 </el-radio>
|
|
<el-radio :label="false" :value="false"> 不创建待办 </el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
</div>
|
|
<div class="flex items-center" v-if="item.isCreateAgentWork">
|
|
<el-select
|
|
class="flex-1"
|
|
v-model="item.agentUserList"
|
|
placeholder="选择执行人"
|
|
clearable
|
|
filterable
|
|
multiple
|
|
>
|
|
<el-option
|
|
v-for="it in userOptions"
|
|
:key="it.id"
|
|
:label="it.name"
|
|
:value="it.id"
|
|
:disabled="it.status == 1"
|
|
/>
|
|
</el-select>
|
|
<el-date-picker
|
|
class="flex-1 ml-10px"
|
|
v-model="item.endDate"
|
|
type="date"
|
|
format="YYYY-MM-DD"
|
|
value-format="YYYY-MM-DD"
|
|
placeholder="选择截止时间"
|
|
/>
|
|
</div>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
<el-divider />
|
|
<div class="text-black text-12px">
|
|
注：如果选择创建待办，请选择执行人及截止日期，默认每天9:00循环提醒，可于待办中修改
|
|
</div>
|
|
<div class="mt-10px">
|
|
<el-form-item label="会议纪要发送至群聊：" label-width="auto">
|
|
<el-select
|
|
filterable
|
|
clearable
|
|
v-model="form.wxId"
|
|
placeholder="请输入群聊名称"
|
|
style="width: 100%"
|
|
>
|
|
<el-option
|
|
v-for="item in groupOptions"
|
|
:key="item.wxGroupId"
|
|
:label="item.wxGroupName"
|
|
:value="item.wxGroupId"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup name="MeetingInfo">
|
|
import { listToTree } from '@/utils/tree'
|
|
import { getAllNodeTree } from '@/api/okr/okr'
|
|
import * as MeetingApi from '@/api/okr/meeting'
|
|
import { formatDate } from '@/utils/formatTime'
|
|
import { getEmployeeSimpleList } from '@/api/pers/employee'
|
|
import { useTagsViewStore } from '@/store/modules/tagsView'
|
|
import { useUserStore } from '@/store/modules/user'
|
|
|
|
const route = useRoute()
|
|
const message = useMessage()
|
|
const tagsViewStore = useTagsViewStore()
|
|
const userStore = useUserStore()
|
|
|
|
const defaultProps = {
|
|
value: 'nodeId',
|
|
label: 'nodeName',
|
|
children: 'children'
|
|
}
|
|
|
|
const isDetail = route.query.isDetail
|
|
const currentUserId = ref(undefined)
|
|
const currentContentId = ref(0) // 默认选中第一个标签页
|
|
const summaryIdx = ref(0) // 会议纪要的索引
|
|
|
|
const toolbarConfig = {
|
|
toolbarKeys: []
|
|
}
|
|
|
|
onMounted(async () => {
|
|
getWxGroupOptions()
|
|
await getOptions()
|
|
if (route.params.id && route.params.id != 0) {
|
|
// 这里可以调用API获取会议详情数据
|
|
getMeetingInfo(route.params.id)
|
|
} else {
|
|
form.value.meetingContentList = [
|
|
{
|
|
userId: userStore.getUser.id + '',
|
|
userName: userStore.getUser.nickname,
|
|
userMeetingContentList: [
|
|
{
|
|
content: ''
|
|
}
|
|
]
|
|
}
|
|
]
|
|
currentContentId.value = 0
|
|
}
|
|
})
|
|
|
|
const peroidList = ref([])
|
|
function getOptions() {
|
|
return Promise.all([getAllNodeTree(), getEmployeeSimpleList()])
|
|
.then(([okrResp, employeeResp]) => {
|
|
peroidList.value = listToTree(okrResp?.tree || [], {
|
|
id: 'nodeId',
|
|
pid: 'parentId',
|
|
children: 'children'
|
|
})
|
|
userOptions.value = employeeResp.map((it) => ({ ...it, id: it.id + '' }))
|
|
form.value.expectUsers = [userStore.getUser.id + ''] // 默认添加当前用户为预约参会人员
|
|
// form.value.actualUsers = [userStore.getUser.id + '']
|
|
currentUserId.value = userStore.getUser.id + '' // 默认选中当前用户
|
|
})
|
|
.catch((error) => {
|
|
console.error('获取数据失败:', error)
|
|
})
|
|
}
|
|
|
|
const form = ref({
|
|
meetingId: undefined,
|
|
meetingSubject: '',
|
|
startTime: '',
|
|
meetingRoom: '',
|
|
expectEndTime: '',
|
|
expectUsers: [],
|
|
actualUsers: [],
|
|
okrNodeName: '',
|
|
status: '1',
|
|
meetingContent: '',
|
|
meetingSummary: '',
|
|
absentReason: '',
|
|
meetingContentList: [],
|
|
meetingSummaryList: []
|
|
})
|
|
const rules = {
|
|
meetingSubject: [{ required: true, message: '请输入会议主题', trigger: 'blur' }],
|
|
startTime: [{ required: true, message: '请选择会议开始时间', trigger: 'change' }],
|
|
expectEndTime: [{ required: true, message: '请选择预计结束时间', trigger: 'change' }],
|
|
meetingRoom: [{ required: true, message: '请输入会议地点', trigger: 'blur' }],
|
|
expectUsers: [{ required: true, message: '请选择参会人员', trigger: 'change' }]
|
|
}
|
|
|
|
const formRef = ref(null)
|
|
const userOptions = ref([])
|
|
const expectUserOptions = ref([])
|
|
|
|
const isAllActived = computed(() => {
|
|
// 判断实际参会人员是否包含所有预约参会人员
|
|
return form.value.expectUsers.every((item) => form.value.actualUsers.includes(item))
|
|
})
|
|
|
|
const loading = ref(false)
|
|
// 获取详情
|
|
const getMeetingInfo = async (meetingId) => {
|
|
try {
|
|
loading.value = true
|
|
// 调用API获取会议详情
|
|
const resp = await MeetingApi.getMeetingDetail({ meetingId })
|
|
loading.value = false
|
|
if (resp) {
|
|
let summaryList = []
|
|
if (resp.meetingSummaryList && resp.meetingSummaryList.length > 0) {
|
|
summaryList = resp.meetingSummaryList.map((item) => ({
|
|
...item,
|
|
isCreateAgentWork: !!item.isCreateAgentWork,
|
|
agentUserList: item.agentUserList ? item.agentUserList.map((it) => it + '') : []
|
|
}))
|
|
} else {
|
|
summaryList = [
|
|
{
|
|
summary: resp.meetingSummary || '',
|
|
agentUserList: [],
|
|
endDate: '',
|
|
isCreateAgentWork: true
|
|
}
|
|
]
|
|
}
|
|
|
|
form.value = {
|
|
...form.value,
|
|
...resp,
|
|
startTime: formatDate(resp.startTime, 'YYYY-MM-DD HH:mm'),
|
|
expectEndTime: formatDate(resp.expectEndTime, 'YYYY-MM-DD HH:mm'),
|
|
expectUsers: resp.expectUsers || [],
|
|
actualUsers: resp.actualUsers || [],
|
|
meetingSummaryList: summaryList
|
|
}
|
|
currentContentId.value = 0
|
|
expectUserOptions.value = userOptions.value.filter((user) =>
|
|
form.value.expectUsers.some((it) => it == user.id)
|
|
)
|
|
}
|
|
} catch (error) {
|
|
loading.value = false
|
|
console.error('获取会议详情失败:', error)
|
|
}
|
|
}
|
|
|
|
const groupOptions = ref([])
|
|
|
|
function getWxGroupOptions() {
|
|
MeetingApi.refreshWxGroupList().then(() => {
|
|
MeetingApi.getWxGroupList()
|
|
.then((resp) => {
|
|
groupOptions.value = resp || []
|
|
})
|
|
.catch((error) => {
|
|
console.error('获取微信群列表失败:', error)
|
|
})
|
|
})
|
|
}
|
|
|
|
function userTabChange() {
|
|
currentContentId.value = 0
|
|
}
|
|
|
|
function handleTabsEdit(targetName, action) {
|
|
if (action === 'add') {
|
|
form.value.meetingContentList.forEach((item) => {
|
|
if (item.userId == currentUserId.value) {
|
|
item.userMeetingContentList.push({
|
|
content: ''
|
|
})
|
|
}
|
|
})
|
|
} else if (action === 'remove') {
|
|
form.value.meetingContentList.forEach((item) => {
|
|
if (item.userId == currentUserId.value) {
|
|
item.userMeetingContentList.splice(targetName, 1)
|
|
// 如果删除的是当前选中的标签页，则切换到下一个标签页
|
|
if (currentContentId.value == targetName) {
|
|
currentContentId.value = targetName - 1
|
|
}
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
function meetingSummaryEdit(targetName, action) {
|
|
if (action === 'add') {
|
|
form.value.meetingSummaryList.push({
|
|
summary: '',
|
|
agentUserList: [],
|
|
endDate: '',
|
|
isCreateAgentWork: true
|
|
})
|
|
} else if (action === 'remove') {
|
|
form.value.meetingSummaryList.splice(targetName, 1)
|
|
summaryIdx.value = targetName - 1
|
|
}
|
|
}
|
|
|
|
function handleUserChange(val) {
|
|
// 当预约参会人员变化时，更新实际参会人员选项
|
|
expectUserOptions.value = userOptions.value.filter((user) =>
|
|
form.value.expectUsers.some((it) => it == user.id)
|
|
)
|
|
if (!isDetail) {
|
|
form.value.actualUsers = [...form.value.expectUsers]
|
|
}
|
|
// 先过滤掉不存在的参会人员
|
|
form.value.meetingContentList = form.value.meetingContentList.filter((item) => {
|
|
return val.some((it) => it == item.userId)
|
|
})
|
|
// 再补充新增的
|
|
val.map((item) => {
|
|
if (!form.value.meetingContentList.some((it) => it.userId == item)) {
|
|
form.value.meetingContentList.push({
|
|
userId: item,
|
|
userName: userOptions.value.find((it) => it.id == item).name,
|
|
userMeetingContentList: [
|
|
{
|
|
content: ''
|
|
}
|
|
]
|
|
})
|
|
}
|
|
})
|
|
}
|
|
|
|
const router = useRouter()
|
|
async function submit(isDraft = false) {
|
|
// 校验表单
|
|
if (!formRef.value) return
|
|
const valid = await formRef.value.validate()
|
|
if (!valid) return
|
|
|
|
try {
|
|
form.value.isDraft = isDraft
|
|
// 提交表单数据
|
|
if (form.value.meetingId) {
|
|
if (
|
|
form.value.status == 2 &&
|
|
form.value.meetingSummaryList.some((it) => it.summary.trim() == '')
|
|
) {
|
|
message.error('会议结束时，会议纪要不能为空')
|
|
return
|
|
} else {
|
|
let text = ''
|
|
form.value.meetingSummaryList.map((item, index) => {
|
|
if (form.value.meetingSummaryList.length > 1) {
|
|
text += '<p>会议纪要' + (index + 1) + '：</p>'
|
|
}
|
|
text += item.summary
|
|
if (item.isCreateAgentWork) {
|
|
text += `<p>执行人：`
|
|
item.agentUserList.map((it) => {
|
|
if (it) {
|
|
text += `${userOptions.value.find((user) => user.id == it).name} `
|
|
}
|
|
})
|
|
text += '</p>'
|
|
text += `<p>截止日期：${item.endDate}</p>`
|
|
}
|
|
text += '<p><br></p>'
|
|
})
|
|
form.value.meetingSummary = text
|
|
}
|
|
// 更新会议
|
|
await MeetingApi.updateMeeting(form.value)
|
|
message.success('会议更新成功')
|
|
} else {
|
|
form.value.actualUsers = []
|
|
// 新增会议
|
|
await MeetingApi.createMeeting(form.value)
|
|
message.success('会议创建成功')
|
|
}
|
|
tagsViewStore.delView(route)
|
|
const visitedViews = tagsViewStore.getVisitedViews
|
|
const latestView = visitedViews.slice(-1)[0]
|
|
router.push(latestView)
|
|
} catch (error) {
|
|
console.error('保存会议数据失败:', error)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped></style>
|
|
|