|
|
|
|
@ -1,16 +1,23 @@ |
|
|
|
|
<template> |
|
|
|
|
<div> |
|
|
|
|
<el-affix postion="top" :offset="95"> |
|
|
|
|
<el-affix postion="top" :offset="95" v-if="!isDetail"> |
|
|
|
|
<div class="flex justify-between mb-4 bg-white"> |
|
|
|
|
<b class="text-20px">{{ form.id ? '修改会议' : '新增会议' }}</b> |
|
|
|
|
<b class="text-20px">{{ form.meetingId ? '修改会议' : '新增会议' }}</b> |
|
|
|
|
<el-button type="success" @click="submit()">保存</el-button> |
|
|
|
|
</div> |
|
|
|
|
</el-affix> |
|
|
|
|
<el-form :model="form" ref="formRef" :rules="rules" label-width="120px"> |
|
|
|
|
<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="subject"> |
|
|
|
|
<el-input v-model="form.subject" placeholder="请输入会议主题" /> |
|
|
|
|
<el-form-item label="会议主题" prop="meetingSubject"> |
|
|
|
|
<el-input v-model="form.meetingSubject" placeholder="请输入会议主题" /> |
|
|
|
|
</el-form-item> |
|
|
|
|
</el-col> |
|
|
|
|
<el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24"> |
|
|
|
|
@ -26,9 +33,9 @@ |
|
|
|
|
/> |
|
|
|
|
</el-col> |
|
|
|
|
<el-col :xl="6" :lg="6" :md="12" :sm="12" :xs="24"> |
|
|
|
|
<el-form-item label="会议时间" prop="startDate"> |
|
|
|
|
<el-form-item label="会议时间" prop="startTime"> |
|
|
|
|
<el-date-picker |
|
|
|
|
v-model="form.startDate" |
|
|
|
|
v-model="form.startTime" |
|
|
|
|
type="datetime" |
|
|
|
|
format="YYYY-MM-DD HH:mm" |
|
|
|
|
value-format="YYYY-MM-DD HH:mm" |
|
|
|
|
@ -37,9 +44,9 @@ |
|
|
|
|
</el-form-item> |
|
|
|
|
</el-col> |
|
|
|
|
<el-col :xl="6" :lg="6" :md="12" :sm="12" :xs="24"> |
|
|
|
|
<el-form-item label="预计结束时间" prop="expectEndDate"> |
|
|
|
|
<el-form-item label="预计结束时间" prop="expectEndTime"> |
|
|
|
|
<el-date-picker |
|
|
|
|
v-model="form.expectEndDate" |
|
|
|
|
v-model="form.expectEndTime" |
|
|
|
|
type="datetime" |
|
|
|
|
format="YYYY-MM-DD HH:mm" |
|
|
|
|
value-format="YYYY-MM-DD HH:mm" |
|
|
|
|
@ -48,21 +55,20 @@ |
|
|
|
|
</el-form-item> |
|
|
|
|
</el-col> |
|
|
|
|
<el-col :xl="6" :lg="6" :md="12" :sm="12" :xs="24"> |
|
|
|
|
<el-form-item label="会议地点" prop="address"> |
|
|
|
|
<el-input v-model="form.address" placeholder="请输入会议地点" /> |
|
|
|
|
<el-form-item label="会议地点" prop="meetingRoom"> |
|
|
|
|
<el-input v-model="form.meetingRoom" placeholder="请输入会议地点" /> |
|
|
|
|
</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="未开始" /> |
|
|
|
|
<el-option label="已结束" value="已结束" /> |
|
|
|
|
<el-option label="未开始" value="1" /> |
|
|
|
|
<el-option label="已结束" value="2" /> |
|
|
|
|
</el-select> |
|
|
|
|
</el-form-item> |
|
|
|
|
</el-col> |
|
|
|
|
<el-col :span="24" :offset="0"> |
|
|
|
|
<el-form-item label="预约参会人员" prop="expectUsers"> |
|
|
|
|
<!-- <el-input v-model="form.expectUsers" placeholder="请输入预约参会人员" /> --> |
|
|
|
|
<el-select |
|
|
|
|
v-model="form.expectUsers" |
|
|
|
|
placeholder="选择参会人员" |
|
|
|
|
@ -74,45 +80,45 @@ |
|
|
|
|
> |
|
|
|
|
<el-option |
|
|
|
|
v-for="item in userOptions" |
|
|
|
|
:key="item.value" |
|
|
|
|
:label="item.label" |
|
|
|
|
:value="item.value" |
|
|
|
|
:key="item.id" |
|
|
|
|
:label="item.name" |
|
|
|
|
:value="item.id" |
|
|
|
|
:disabled="item.status == 1" |
|
|
|
|
/> |
|
|
|
|
</el-select> |
|
|
|
|
</el-form-item> |
|
|
|
|
</el-col> |
|
|
|
|
<el-col :span="24" :offset="0"> |
|
|
|
|
<el-col :span="24" :offset="0" v-if="form.meetingId"> |
|
|
|
|
<el-form-item label="实际参会人员" prop="actualUsers"> |
|
|
|
|
<!-- <el-input v-model="form.actualUsers" placeholder="请输入实际参会人员" /> --> |
|
|
|
|
<el-checkbox-group v-model="form.actualUsers"> |
|
|
|
|
<el-checkbox |
|
|
|
|
v-for="item in expectUserOptions" |
|
|
|
|
:key="item.key" |
|
|
|
|
:label="item.value" |
|
|
|
|
:value="item.value" |
|
|
|
|
:key="item.id" |
|
|
|
|
:label="item.name" |
|
|
|
|
:value="item.id" |
|
|
|
|
> |
|
|
|
|
{{ item.label }} |
|
|
|
|
{{ item.name }} |
|
|
|
|
</el-checkbox> |
|
|
|
|
</el-checkbox-group> |
|
|
|
|
</el-form-item> |
|
|
|
|
</el-col> |
|
|
|
|
<el-col :span="24" :offset="0" v-if="!isAllActived"> |
|
|
|
|
<el-form-item label="缺席原因" prop="absenceReason"> |
|
|
|
|
<el-input v-model="form.absenceReason" placeholder="请输入缺席原因" /> |
|
|
|
|
<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="12" :lg="12" :md="24" :sm="24" :xs="24"> |
|
|
|
|
<el-form-item label="会议内容:" prop="content"> |
|
|
|
|
<div v-if="isDetail" v-dompurify-html="form.content" class="w-full"></div> |
|
|
|
|
<Editor v-else v-model="form.content" height="500px" /> |
|
|
|
|
<el-form-item label="会议内容:" prop="meetingContent"> |
|
|
|
|
<div v-if="!!isDetail" v-dompurify-html="form.meetingContent" class="w-full"></div> |
|
|
|
|
<Editor v-else v-model="form.meetingContent" height="500px" /> |
|
|
|
|
</el-form-item> |
|
|
|
|
</el-col> |
|
|
|
|
<el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24"> |
|
|
|
|
<el-form-item label="会议纪要:" prop="minutes"> |
|
|
|
|
<div v-if="isDetail" v-dompurify-html="form.minutes" class="w-full"></div> |
|
|
|
|
<Editor v-else v-model="form.minutes" height="500px" /> |
|
|
|
|
<el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24" v-if="!!form.meetingId"> |
|
|
|
|
<el-form-item label="会议纪要:" prop="meetingSummary"> |
|
|
|
|
<div v-if="!!isDetail" v-dompurify-html="form.meetingSummary" class="w-full"></div> |
|
|
|
|
<Editor v-else v-model="form.meetingSummary" height="500px" /> |
|
|
|
|
</el-form-item> |
|
|
|
|
</el-col> |
|
|
|
|
</el-row> |
|
|
|
|
@ -123,8 +129,15 @@ |
|
|
|
|
<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' |
|
|
|
|
|
|
|
|
|
const route = useRoute() |
|
|
|
|
const message = useMessage() |
|
|
|
|
const tagsViewStore = useTagsViewStore() |
|
|
|
|
|
|
|
|
|
const defaultProps = { |
|
|
|
|
value: 'nodeId', |
|
|
|
|
label: 'nodeName', |
|
|
|
|
@ -136,17 +149,16 @@ const isDetail = route.query.isDetail |
|
|
|
|
onMounted(() => { |
|
|
|
|
getOptions() |
|
|
|
|
if (route.params.id && route.params.id != 0) { |
|
|
|
|
// 模拟获取会议详情 |
|
|
|
|
// 这里可以调用API获取会议详情数据 |
|
|
|
|
getMeetingInfo() |
|
|
|
|
getMeetingInfo(route.params.id) |
|
|
|
|
} else { |
|
|
|
|
console.error('会议ID不存在') |
|
|
|
|
console.error('会议不存在') |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
const peroidList = ref([]) |
|
|
|
|
function getOptions() { |
|
|
|
|
// 模拟获取OKR节点数据 |
|
|
|
|
// 获取OKR节点数据 |
|
|
|
|
getAllNodeTree().then((resp) => { |
|
|
|
|
peroidList.value = listToTree(resp?.tree || [], { |
|
|
|
|
id: 'nodeId', |
|
|
|
|
@ -154,39 +166,36 @@ function getOptions() { |
|
|
|
|
children: 'children' |
|
|
|
|
}) |
|
|
|
|
}) |
|
|
|
|
// 获取人员数据 |
|
|
|
|
getEmployeeSimpleList().then((data) => { |
|
|
|
|
userOptions.value = data.map((it) => ({ ...it, id: it.id + '' })) |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const form = ref({ |
|
|
|
|
id: 0, |
|
|
|
|
subject: '', |
|
|
|
|
startDate: '', |
|
|
|
|
address: '', |
|
|
|
|
expectEndDate: '', |
|
|
|
|
meetingId: undefined, |
|
|
|
|
meetingSubject: '', |
|
|
|
|
startTime: '', |
|
|
|
|
meetingRoom: '', |
|
|
|
|
expectEndTime: '', |
|
|
|
|
expectUsers: [], |
|
|
|
|
actualUsers: [], |
|
|
|
|
okrNodeName: '', |
|
|
|
|
status: '未开始', |
|
|
|
|
content: '', |
|
|
|
|
minutes: '', |
|
|
|
|
absenceReason: '' |
|
|
|
|
status: '1', |
|
|
|
|
meetingContent: '', |
|
|
|
|
meetingSummary: '', |
|
|
|
|
absentReason: '' |
|
|
|
|
}) |
|
|
|
|
const rules = { |
|
|
|
|
subject: [{ required: true, message: '请输入会议主题', trigger: 'blur' }], |
|
|
|
|
startDate: [{ required: true, message: '请选择会议开始时间', trigger: 'change' }], |
|
|
|
|
expectEndDate: [{ required: true, message: '请选择预计结束时间', trigger: 'change' }], |
|
|
|
|
address: [{ required: true, message: '请输入会议地点', trigger: 'blur' }], |
|
|
|
|
status: [{ required: true, message: '请选择会议状态', trigger: 'change' }], |
|
|
|
|
expectUsers: [{ required: true, message: '请输入预约参会人员', trigger: 'blur' }], |
|
|
|
|
actualUsers: [{ required: true, message: '请输入实际参会人员', trigger: 'blur' }] |
|
|
|
|
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([ |
|
|
|
|
{ value: '张三', label: '张三' }, |
|
|
|
|
{ value: '李四', label: '李四' }, |
|
|
|
|
{ value: '王五', label: '王五' }, |
|
|
|
|
{ value: '赵六', label: '赵六' } |
|
|
|
|
]) |
|
|
|
|
const userOptions = ref([]) |
|
|
|
|
const expectUserOptions = ref([]) |
|
|
|
|
|
|
|
|
|
const isAllActived = computed(() => { |
|
|
|
|
@ -194,47 +203,72 @@ const isAllActived = computed(() => { |
|
|
|
|
return form.value.expectUsers.every((item) => form.value.actualUsers.includes(item)) |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
const loading = ref(false) |
|
|
|
|
// 获取详情 |
|
|
|
|
const getMeetingInfo = () => { |
|
|
|
|
// 模拟异步请求 |
|
|
|
|
setTimeout(() => { |
|
|
|
|
// 假设请求成功，模拟数据 |
|
|
|
|
const getMeetingInfo = async (meetingId) => { |
|
|
|
|
try { |
|
|
|
|
loading.value = true |
|
|
|
|
// 调用API获取会议详情 |
|
|
|
|
const resp = await MeetingApi.getMeetingDetail({ meetingId }) |
|
|
|
|
loading.value = false |
|
|
|
|
if (resp) { |
|
|
|
|
form.value = { |
|
|
|
|
id: route.params.id, |
|
|
|
|
subject: 'OKR会议', |
|
|
|
|
startDate: '2023-10-01 10:00', |
|
|
|
|
address: '会议室A', |
|
|
|
|
expectEndDate: '2023-10-01 11:00', |
|
|
|
|
expectUsers: ['张三', '李四', '王五'], |
|
|
|
|
actualUsers: ['张三', '李四'], |
|
|
|
|
okrNodeName: 'OKR节点1', |
|
|
|
|
status: '未开始', |
|
|
|
|
content: '<p>会议内容示例</p> <p><img src="https://picsum.photos/200/300" alt=""></p>', |
|
|
|
|
minutes: '<p>会议纪要示例</p>' |
|
|
|
|
...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 || [] |
|
|
|
|
} |
|
|
|
|
handleUserChange() |
|
|
|
|
}, 1000) |
|
|
|
|
} |
|
|
|
|
} catch (error) { |
|
|
|
|
loading.value = false |
|
|
|
|
console.error('获取会议详情失败:', error) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function handleUserChange() { |
|
|
|
|
// 当预约参会人员变化时，更新实际参会人员选项 |
|
|
|
|
expectUserOptions.value = userOptions.value.filter((user) => |
|
|
|
|
form.value.expectUsers.includes(user.value) |
|
|
|
|
form.value.expectUsers.some((it) => it == user.id) |
|
|
|
|
) |
|
|
|
|
form.value.actualUsers = [...form.value.expectUsers] |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function submit() { |
|
|
|
|
formRef.value.validate((valid) => { |
|
|
|
|
if (valid) { |
|
|
|
|
const router = useRouter() |
|
|
|
|
async function submit() { |
|
|
|
|
// 校验表单 |
|
|
|
|
if (!formRef.value) return |
|
|
|
|
const valid = await formRef.value.validate() |
|
|
|
|
if (!valid) return |
|
|
|
|
|
|
|
|
|
try { |
|
|
|
|
// 提交表单数据 |
|
|
|
|
console.log('提交的会议数据:', form.value) |
|
|
|
|
// 这里可以调用API保存会议数据 |
|
|
|
|
if (form.value.meetingId) { |
|
|
|
|
if (form.value.status == 2 && !form.value.meetingSummary) { |
|
|
|
|
message.error('会议结束时，会议纪要不能为空') |
|
|
|
|
return |
|
|
|
|
} |
|
|
|
|
// 更新会议 |
|
|
|
|
await MeetingApi.updateMeeting(form.value) |
|
|
|
|
message.success('会议更新成功') |
|
|
|
|
} else { |
|
|
|
|
console.error('表单验证失败') |
|
|
|
|
return false |
|
|
|
|
if (form.value.status == 1 && !form.value.meetingContent) { |
|
|
|
|
message.error('预约会议时，会议内容不能为空') |
|
|
|
|
return |
|
|
|
|
} |
|
|
|
|
// 新增会议 |
|
|
|
|
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> |
|
|
|
|
|
|
|
|
|
|
qsh
3 weeks ago