main
qsh
3 weeks ago
parent
b4a5c36fb0
commit
8f4da16e81
@ -0,0 +1,45 @@ |
||||
import request from '@/config/axios' |
||||
|
||||
export const createMeeting = (data) => { |
||||
return request.post({ |
||||
url: '/admin-api/okr/meeting/add', |
||||
data, |
||||
isSubmitForm: true |
||||
// headers: { 'instance-id': 1016 }
|
||||
}) |
||||
} |
||||
|
||||
// 修改
|
||||
export const updateMeeting = (data) => { |
||||
return request.put({ |
||||
url: '/admin-api/okr/meeting/update', |
||||
data |
||||
// headers: { 'instance-id': 1016 }
|
||||
}) |
||||
} |
||||
// 查询详情
|
||||
export const getMeetingDetail = (params) => { |
||||
return request.get({ |
||||
url: '/admin-api/okr/meeting/get', |
||||
params |
||||
// headers: { 'instance-id': 1016 }
|
||||
}) |
||||
} |
||||
|
||||
// 取消会议
|
||||
export const cancelMeeting = (data) => { |
||||
return request.put({ |
||||
url: '/admin-api/okr/meeting/cancel', |
||||
data |
||||
// headers: { 'instance-id': 1016 }
|
||||
}) |
||||
} |
||||
|
||||
// 分页查询
|
||||
export const getMeetingPage = (params) => { |
||||
return request.get({ |
||||
url: '/admin-api/okr/meeting/page', |
||||
params |
||||
// headers: { 'instance-id': 1016 }
|
||||
}) |
||||
} |
||||
@ -0,0 +1,293 @@ |
||||
<template> |
||||
<div> |
||||
<el-affix postion="top" :offset="95" v-if="!isDetail"> |
||||
<div class="flex justify-between mb-4 bg-white"> |
||||
<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" |
||||
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="选择参会人员" |
||||
clearable |
||||
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" |
||||
/> |
||||
</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="!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="12" :lg="12" :md="24" :sm="24" :xs="24"> |
||||
<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" 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> |
||||
</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' |
||||
|
||||
const route = useRoute() |
||||
const message = useMessage() |
||||
const tagsViewStore = useTagsViewStore() |
||||
|
||||
const defaultProps = { |
||||
value: 'nodeId', |
||||
label: 'nodeName', |
||||
children: 'children' |
||||
} |
||||
|
||||
const isDetail = route.query.isDetail |
||||
|
||||
onMounted(async () => { |
||||
await getOptions() |
||||
if (route.params.id && route.params.id != 0) { |
||||
// 这里可以调用API获取会议详情数据 |
||||
getMeetingInfo(route.params.id) |
||||
} else { |
||||
console.error('会议不存在') |
||||
} |
||||
}) |
||||
|
||||
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 + '' })) |
||||
// handleUserChange() |
||||
}) |
||||
.catch((error) => { |
||||
console.error('获取数据失败:', error) |
||||
}) |
||||
// // 获取OKR节点数据 |
||||
// getAllNodeTree().then((resp) => { |
||||
// peroidList.value = listToTree(resp?.tree || [], { |
||||
// id: 'nodeId', |
||||
// pid: 'parentId', |
||||
// children: 'children' |
||||
// }) |
||||
// }) |
||||
// // 获取人员数据 |
||||
// getEmployeeSimpleList().then((data) => { |
||||
// userOptions.value = data.map((it) => ({ ...it, id: it.id + '' })) |
||||
// }) |
||||
} |
||||
|
||||
const form = ref({ |
||||
meetingId: undefined, |
||||
meetingSubject: '', |
||||
startTime: '', |
||||
meetingRoom: '', |
||||
expectEndTime: '', |
||||
expectUsers: [], |
||||
actualUsers: [], |
||||
okrNodeName: '', |
||||
status: '1', |
||||
meetingContent: '', |
||||
meetingSummary: '', |
||||
absentReason: '' |
||||
}) |
||||
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) { |
||||
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 || [] |
||||
} |
||||
handleUserChange() |
||||
} |
||||
} catch (error) { |
||||
loading.value = false |
||||
console.error('获取会议详情失败:', error) |
||||
} |
||||
} |
||||
|
||||
function handleUserChange() { |
||||
// 当预约参会人员变化时，更新实际参会人员选项 |
||||
expectUserOptions.value = userOptions.value.filter((user) => |
||||
form.value.expectUsers.some((it) => it == user.id) |
||||
) |
||||
form.value.actualUsers = [...form.value.expectUsers] |
||||
} |
||||
|
||||
const router = useRouter() |
||||
async function submit() { |
||||
// 校验表单 |
||||
if (!formRef.value) return |
||||
const valid = await formRef.value.validate() |
||||
if (!valid) return |
||||
|
||||
try { |
||||
// 提交表单数据 |
||||
if (form.value.meetingId) { |
||||
if (form.value.status == 2 && !form.value.meetingSummary) { |
||||
message.error('会议结束时，会议纪要不能为空') |
||||
return |
||||
} |
||||
// 更新会议 |
||||
await MeetingApi.updateMeeting(form.value) |
||||
message.success('会议更新成功') |
||||
} else { |
||||
if (form.value.status == 1 && !form.value.meetingContent) { |
||||
message.error('预约会议时，会议内容不能为空') |
||||
return |
||||
} |
||||
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> |
||||
@ -0,0 +1,219 @@ |
||||
<template> |
||||
<div> |
||||
<!-- 搜索条件：主题、会议状态、会议时间（时间段）、选择OKR节点 --> |
||||
<el-form :model="searchForm" inline label-width="0"> |
||||
<el-form-item> |
||||
<el-input |
||||
v-model="searchForm.meetingSubject" |
||||
placeholder="会议主题" |
||||
style="width: 200px" |
||||
clearable |
||||
@keyup.enter="handleSearch" |
||||
/> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-select |
||||
v-model="searchForm.status" |
||||
placeholder="会议状态" |
||||
style="width: 150px" |
||||
@change="handleSearch" |
||||
> |
||||
<el-option label="未开始" value="1" /> |
||||
<el-option label="已结束" value="2" /> |
||||
<el-option label="已取消" value="3" /> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-date-picker |
||||
v-model="searchForm.dateRange" |
||||
type="daterange" |
||||
format="YYYY-MM-DD" |
||||
value-format="YYYY-MM-DD" |
||||
start-placeholder="会议时间" |
||||
end-placeholder="会议时间" |
||||
@change="handleSearch" |
||||
/> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-tree-select |
||||
v-model="searchForm.nodeId" |
||||
:data="peroidList" |
||||
:props="defaultProps" |
||||
:render-after-expand="false" |
||||
:default-expand-all="false" |
||||
check-strictly |
||||
placeholder="选择OKR节点" |
||||
style="width: 300px" |
||||
clearable |
||||
@change="handleSearch" |
||||
/> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-button @click="handleSearch">查询</el-button> |
||||
<el-button type="primary" @click="handleAdd">预约会议</el-button> |
||||
</el-form-item> |
||||
</el-form> |
||||
|
||||
<el-table :data="tableList" v-loading="loading" border stripe> |
||||
<el-table-column prop="meetingSubject" label="会议主题" /> |
||||
<el-table-column prop="startTime" label="会议时间" width="170px" /> |
||||
<el-table-column prop="meetingRoom" label="会议地点" width="140px" /> |
||||
<el-table-column prop="expectEndTime" label="预计结束时间" width="170px" /> |
||||
<el-table-column prop="expectUserName" label="预约参会人员" /> |
||||
<el-table-column prop="actualUserName" label="实际参会人员" /> |
||||
<el-table-column prop="nodeName" label="关联OKR节点" width="150px" /> |
||||
<el-table-column prop="status" label="会议状态" width="100px"> |
||||
<template #default="{ row }"> |
||||
<el-tag :type="['', 'info', 'success', 'warning'][row.status]" size="small"> |
||||
{{ ['', '未开始', '已结束', '已取消'][row.status] }} |
||||
</el-tag> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column fixed="right" label="操作" width="140"> |
||||
<template #default="{ row }"> |
||||
<template v-if="row.status == 1 && row.creator == currentUserId"> |
||||
<el-button type="primary" style="padding: 0" text @click="handleEdit(row.meetingId)"> |
||||
修改 |
||||
</el-button> |
||||
<el-button type="danger" text style="padding: 0" @click="handleCancel(row)"> |
||||
取消 |
||||
</el-button> |
||||
</template> |
||||
<el-button |
||||
v-else |
||||
type="primary" |
||||
style="padding: 0" |
||||
text |
||||
@click="handleDetail(row.meetingId)" |
||||
> |
||||
详情 |
||||
</el-button> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
<Pagination |
||||
v-model:limit="searchForm.pageSize" |
||||
v-model:page="searchForm.pageNo" |
||||
:total="total" |
||||
@pagination="getList" |
||||
/> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup name="Meeting"> |
||||
import { listToTree } from '@/utils/tree' |
||||
import { useUserStore } from '@/store/modules/user' |
||||
import { getAllNodeTree } from '@/api/okr/okr' |
||||
import * as MeetingApi from '@/api/okr/meeting' |
||||
|
||||
const currentUserId = useUserStore().getUser.id |
||||
|
||||
const defaultProps = { |
||||
value: 'nodeId', |
||||
label: 'nodeName', |
||||
children: 'children' |
||||
} |
||||
const message = useMessage() |
||||
|
||||
const searchForm = ref({ |
||||
meetingSubject: undefined, |
||||
status: '1', |
||||
dateRange: [], |
||||
nodeId: undefined, |
||||
pageNo: 1, |
||||
pageSize: 50 |
||||
}) |
||||
const total = ref(0) |
||||
|
||||
onMounted(() => { |
||||
getOptions() |
||||
handleSearch() |
||||
}) |
||||
|
||||
const peroidList = ref([]) |
||||
function getOptions() { |
||||
// 获取OKR节点数据 |
||||
getAllNodeTree().then((resp) => { |
||||
peroidList.value = listToTree(resp?.tree || [], { |
||||
id: 'nodeId', |
||||
pid: 'parentId', |
||||
children: 'children' |
||||
}) |
||||
}) |
||||
} |
||||
|
||||
const loading = ref(false) |
||||
const tableList = ref([]) |
||||
const handleSearch = () => { |
||||
searchForm.value.pageNo = 1 |
||||
getList() |
||||
} |
||||
|
||||
function getList() { |
||||
loading.value = true |
||||
// 获取会议列表 |
||||
try { |
||||
const params = { ...searchForm.value } |
||||
if (params.dateRange && params.dateRange.length) { |
||||
params.startTime = params.dateRange[0] + ' 00:00:00' |
||||
params.endTime = params.dateRange[1] + ' 23:59:59' |
||||
delete params.dateRange |
||||
} else { |
||||
delete params.startTime |
||||
delete params.endTime |
||||
} |
||||
MeetingApi.getMeetingPage(params) |
||||
.then((resp) => { |
||||
tableList.value = resp.list || [] |
||||
total.value = resp.total || 0 |
||||
}) |
||||
.finally(() => { |
||||
loading.value = false |
||||
}) |
||||
} catch (error) { |
||||
console.error('获取会议列表失败:', error) |
||||
loading.value = false |
||||
} |
||||
} |
||||
|
||||
const router = useRouter() |
||||
|
||||
const handleAdd = () => { |
||||
router.push({ name: 'MeetingInfo', params: { id: 0 } }) |
||||
} |
||||
|
||||
const handleEdit = (id) => { |
||||
router.push({ |
||||
name: `MeetingInfo`, |
||||
params: { |
||||
id |
||||
} |
||||
}) |
||||
} |
||||
|
||||
const handleDetail = (id) => { |
||||
router.push({ |
||||
name: `MeetingInfo`, |
||||
params: { |
||||
id |
||||
}, |
||||
query: { |
||||
isDetail: 1 |
||||
} |
||||
}) |
||||
} |
||||
|
||||
const handleCancel = async (row) => { |
||||
try { |
||||
await message.confirm('是否确认取消该会议？') |
||||
// 取消会议操作 |
||||
await MeetingApi.cancelMeeting({ meetingId: row.meetingId }) |
||||
message.success('会议取消成功') |
||||
getList() // 刷新列表 |
||||
} catch (error) { |
||||
console.log('取消操作被用户拒绝', error) |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped></style> |
||||
Loading…
Reference in new issue