Compare commits
31 Commits
Author | SHA1 | Date |
---|---|---|
![]() |
e620cc5cd6 | 1 week ago |
![]() |
c4c4e49b39 | 2 weeks ago |
![]() |
f0020d5c82 | 2 weeks ago |
![]() |
03467e1d6e | 2 weeks ago |
![]() |
15f83f7193 | 2 weeks ago |
![]() |
e45cf7db0c | 3 weeks ago |
![]() |
80d9e93e46 | 3 weeks ago |
![]() |
ec34235cc2 | 3 weeks ago |
![]() |
0409e9ef11 | 3 weeks ago |
![]() |
f3293ef14d | 3 weeks ago |
![]() |
26ff7cd434 | 3 weeks ago |
![]() |
b15e0d0f8f | 4 weeks ago |
![]() |
e5e86e24e5 | 4 weeks ago |
![]() |
33965c55f9 | 4 weeks ago |
![]() |
683bfa0d38 | 1 month ago |
![]() |
83793b6591 | 1 month ago |
![]() |
ab4d644526 | 1 month ago |
![]() |
3e8a9220f6 | 1 month ago |
![]() |
8f20e04701 | 2 months ago |
![]() |
e007be1f2d | 2 months ago |
![]() |
1f29e02135 | 2 months ago |
![]() |
8f2ac77fd1 | 2 months ago |
![]() |
dc449979fa | 2 months ago |
![]() |
ff3f4d9e47 | 2 months ago |
![]() |
5098a5cf01 | 2 months ago |
![]() |
5ee61f7f6b | 2 months ago |
![]() |
51140a3c41 | 2 months ago |
![]() |
53d66f9676 | 2 months ago |
![]() |
f2f14789f0 | 2 months ago |
![]() |
f93e1f7187 | 2 months ago |
|
74efe8409f | 2 months ago |
@ -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,87 @@ |
||||
const staticRouter: AppCustomRouteRecordRaw[] = [ |
||||
{ |
||||
icon: 'ep:calendar', |
||||
path: '/Okr', |
||||
component: '', |
||||
name: 'OKR', |
||||
componentName: '', |
||||
redirect: '', |
||||
parentId: 0, |
||||
visible: true, |
||||
alwaysShow: true, |
||||
children: [ |
||||
{ |
||||
icon: 'ep:finished', |
||||
path: 'okr-management', |
||||
name: 'OKR管理', |
||||
componentName: 'OkrManagement', |
||||
component: 'OKR/Management/index', |
||||
visible: true, |
||||
alwaysShow: true, |
||||
meta: { |
||||
title: 'OKR管理' |
||||
}, |
||||
redirect: '' |
||||
}, |
||||
{ |
||||
icon: 'ep:alarm-clock', |
||||
path: 'okr-wait', |
||||
name: '待办事项', |
||||
componentName: 'OkrWait', |
||||
component: 'OKR/Wait/index', |
||||
meta: { |
||||
title: '待办事项' |
||||
}, |
||||
visible: true, |
||||
alwaysShow: true, |
||||
redirect: '' |
||||
}, |
||||
{ |
||||
icon: 'ep:data-line', |
||||
path: 'okr-analysis', |
||||
name: 'OKR统计', |
||||
componentName: 'OkrAnalysis', |
||||
component: 'OKR/Analysis/index', |
||||
meta: { |
||||
title: 'OKR统计' |
||||
}, |
||||
visible: true, |
||||
alwaysShow: true, |
||||
redirect: '' |
||||
}, |
||||
{ |
||||
icon: 'ep:data-board', |
||||
path: 'okr-meeting', |
||||
name: '会议管理', |
||||
componentName: 'OkrMeeting', |
||||
component: 'OKR/Meeting/index', |
||||
meta: { |
||||
title: '会议管理' |
||||
}, |
||||
visible: true, |
||||
alwaysShow: true, |
||||
redirect: '' |
||||
}, |
||||
{ |
||||
icon: 'ep:data-board', |
||||
path: 'okr-meeting-info/:id', |
||||
name: '会议详情', |
||||
componentName: 'MeetingInfo', |
||||
component: 'OKR/Meeting/MeetingInfo', |
||||
meta: { |
||||
title: '会议详情' |
||||
}, |
||||
visible: false, |
||||
alwaysShow: true, |
||||
redirect: '', |
||||
keepAlive: true |
||||
} |
||||
], |
||||
meta: { |
||||
title: 'OKR', |
||||
icon: 'ep:calendar' |
||||
} |
||||
} |
||||
] |
||||
|
||||
export default staticRouter |
@ -1,7 +1,96 @@ |
||||
<template> |
||||
<div> 首页 </div> |
||||
<div> |
||||
<el-card shadow="never"> |
||||
<el-skeleton :loading="loading" animated> |
||||
<el-row :gutter="20" justify="space-between"> |
||||
<el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24"> |
||||
<div class="flex items-center"> |
||||
<img :src="avatar" alt="" class="w-40px h-40px rounded-[50%] mr-20px" /> |
||||
<div class="text-20px text-700"> |
||||
{{ t('workplace.welcome') }} {{ username }} {{ t('workplace.happyDay') }} |
||||
</div> |
||||
</div> |
||||
</el-col> |
||||
<el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24"> |
||||
<div class="flex h-40px items-center justify-end <sm:mt-10px"> |
||||
<div |
||||
class="px-8px text-right" |
||||
@click="router.push({ path: '/Okr/okr-wait', query: { type: 1 } })" |
||||
> |
||||
<div class="text-14px text-red-600 mb-20px">今日待办</div> |
||||
<CountTo |
||||
class="text-20px number-font" |
||||
:start-val="0" |
||||
:end-val="waitCount.dayEndAgentWorkNum" |
||||
:duration="2600" |
||||
/> |
||||
</div> |
||||
<el-divider direction="vertical" border-style="dashed" /> |
||||
<div |
||||
class="px-8px text-right" |
||||
@click="router.push({ path: '/Okr/okr-wait', query: { type: 2 } })" |
||||
> |
||||
<div class="text-14px text-gray-400 mb-20px">我的待办</div> |
||||
<CountTo |
||||
class="text-20px number-font" |
||||
:start-val="0" |
||||
:end-val="waitCount.myAgentWorkNum" |
||||
:duration="2600" |
||||
/> |
||||
</div> |
||||
</div> |
||||
</el-col> |
||||
</el-row> |
||||
</el-skeleton> |
||||
</el-card> |
||||
</div> |
||||
</template> |
||||
<script setup lang="ts" name="Home"> |
||||
import { useUserStore } from '@/store/modules/user' |
||||
import avatarImg from '@/assets/imgs/avatar.gif' |
||||
import { getWaitCount } from '@/api/okr/wait' |
||||
|
||||
<script setup name="Home"></script> |
||||
const { t } = useI18n() |
||||
const userStore = useUserStore() |
||||
const router = useRouter() // 路由对象 |
||||
const loading = ref(false) |
||||
const avatar = userStore.getUser.avatar ? userStore.getUser.avatar : avatarImg |
||||
const username = userStore.getUser.nickname |
||||
|
||||
<style lang="scss" scoped></style> |
||||
function getWaitTargetCount() { |
||||
getWaitCount({}).then((res) => { |
||||
waitCount.value = res |
||||
}) |
||||
} |
||||
|
||||
const waitCount = ref({ |
||||
dayEndAgentWorkNum: 0, |
||||
myAgentWorkNum: 0, |
||||
urgeAgentWorkNum: 0, |
||||
notifyNum: 0 |
||||
}) |
||||
|
||||
const getAllApi = async () => { |
||||
await getWaitTargetCount() |
||||
loading.value = false |
||||
} |
||||
|
||||
onMounted(() => { |
||||
getAllApi() |
||||
}) |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
@font-face { |
||||
font-family: numberFont; |
||||
src: url('@/assets/fonts/DISPLAY FREE TFB.ttf'); |
||||
} |
||||
|
||||
.number-font { |
||||
font-family: numberFont !important; |
||||
} |
||||
|
||||
:deep(.el-card__header) { |
||||
padding: 10px; |
||||
} |
||||
</style> |
||||
|
@ -0,0 +1,602 @@ |
||||
<template> |
||||
<div> |
||||
<el-row class="mb-10px flex justify-between items-start"> |
||||
<el-tree-select |
||||
v-model="searchForm.nodeId" |
||||
:data="peroidList" |
||||
:props="defaultProps" |
||||
:render-after-expand="false" |
||||
:default-expand-all="false" |
||||
check-strictly |
||||
style="width: 300px" |
||||
@change="nodeChange" |
||||
/> |
||||
<div class="flex justify-end flex-1"> |
||||
<el-button type="info" @click="handleExport">导出</el-button> |
||||
<el-popover |
||||
ref="countRef" |
||||
placement="left" |
||||
:title="`${currentNode?.nodeName} 数据汇总`" |
||||
trigger="click" |
||||
width="500px" |
||||
v-model:visible="showCountPop" |
||||
> |
||||
<template #reference><el-button>数据汇总</el-button></template> |
||||
<el-table :data="countInfo" stripe> |
||||
<el-table-column prop="keyResultShowName" label="项目名称" /> |
||||
<el-table-column prop="currentValue" label="当前值" width="90" /> |
||||
<el-table-column prop="targetValue" label="预期值" width="90" /> |
||||
<el-table-column label="完成度" width="150"> |
||||
<template #default="{ row }"> |
||||
<el-progress |
||||
:percentage="parseInt((row.currentValue / row.targetValue) * 100) || 0" |
||||
:color="customColors" |
||||
/> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
</el-popover> |
||||
<el-button type="primary" @click="openDrawer(1, currentNode.nodeId, currentNode.nodeName)"> |
||||
节点笔谈 |
||||
</el-button> |
||||
</div> |
||||
</el-row> |
||||
|
||||
<el-table |
||||
id="okrAnalysisTable" |
||||
:data="originList" |
||||
border |
||||
:span-method="objectSpanMethod" |
||||
:show-summary="!!tableKeywords" |
||||
@cell-click="handleClickCell" |
||||
> |
||||
<el-table-column prop="objectInfo.objectiveName" label="目标"> |
||||
<template #default="{ row }"> |
||||
{{ row.objectInfo.objectiveName }} |
||||
</template> |
||||
</el-table-column> |
||||
<!-- <el-table-column prop="objectiveId" label="占比" width="100px"> |
||||
<template #default> 0 </template> |
||||
</el-table-column> --> |
||||
<el-table-column prop="keyResultShowName"> |
||||
<template #header> |
||||
<div class="flex items-center justify-center"> |
||||
<div class="flex-1 mr-10px"> |
||||
<el-input |
||||
v-if="showTableSearch" |
||||
v-model="tableKeywords" |
||||
placeholder="请输入关键字" |
||||
size="small" |
||||
style="width: 100%" |
||||
clearable |
||||
@change="handleTableFilter" |
||||
/> |
||||
<div v-else>关键成果</div> |
||||
</div> |
||||
<el-button type="primary" size="small" @click="handleFilterTableClick"> |
||||
{{ showTableSearch ? '取消' : '筛选' }} |
||||
</el-button> |
||||
</div> |
||||
</template> |
||||
<template #default="{ row }"> |
||||
{{ row.sourceName ? `【${row.sourceName}】` : '' }} {{ row.keyResultShowName }} |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="targetValue" label="目标值" width="100px" /> |
||||
<el-table-column prop="currentValue" label="当前进度" width="100px" /> |
||||
<el-table-column label="开始日期" width="120px"> |
||||
<template #default> |
||||
{{ currentNode.startTime }} |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="status" label="完成状态" width="100px"> |
||||
<template #default="{ row }"> |
||||
<el-tag v-if="row.currentValue >= row.targetValue" type="success">完成</el-tag> |
||||
<el-tag v-else type="danger">未完成</el-tag> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="muis" label="差值" width="100px"> |
||||
<template #default="{ row }"> |
||||
<span |
||||
:style="{ |
||||
color: row.targetValue >= row.currentValue ? 'red' : '#333', |
||||
'font-weight': row.targetValue >= row.currentValue ? 'bold' : '500' |
||||
}" |
||||
> |
||||
{{ parseInt(row.targetValue - row.currentValue) }} |
||||
</span> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="complete" label="完成度" width="200px"> |
||||
<template #default="{ row }"> |
||||
<el-progress :percentage="parseInt(row.progress)" :color="customColors" /> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="endTime" label="结束日期" width="120px"> |
||||
<template #default> |
||||
{{ currentNode.endTime }} |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="objectInfo.progress" label="目标完成度" width="100px" align="center"> |
||||
<template #default="{ row }"> |
||||
{{ parseInt(row.objectInfo.progress) }}% |
||||
<!-- <el-progress :percentage="parseInt(row.objectInfo.progress)" :color="customColors" /> --> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
|
||||
<el-drawer |
||||
v-if="showDrawer" |
||||
v-model="showDrawer" |
||||
:title="drawerTitle" |
||||
size="60vw" |
||||
direction="rtl" |
||||
append-to-body |
||||
destroy-on-close |
||||
> |
||||
<el-tabs v-model="currentType" @tab-click="searchCommentList()"> |
||||
<el-tab-pane |
||||
v-for="item in commentTypeOptions" |
||||
:key="item.id" |
||||
:label="item.label" |
||||
:name="item.id" |
||||
> |
||||
<div v-if="item.id == currentType"> |
||||
<div v-if="addNewComment"> |
||||
<div class="flex justify-between items-center"> |
||||
<div> |
||||
<el-button size="small" @click="addNewComment = false"> 取消 </el-button> |
||||
<el-button type="primary" size="small" @click="handleSaveComment"> |
||||
发布 |
||||
</el-button> |
||||
</div> |
||||
</div> |
||||
<div class="mt-10px" v-if="addNewComment"> |
||||
<Editor |
||||
v-model:modelValue="form.commentValue" |
||||
height="300px" |
||||
:toolbarConfig="toolbarConfig" |
||||
/> |
||||
</div> |
||||
</div> |
||||
<el-button v-else type="primary" size="small" @click="handleInsertComment"> |
||||
新增 |
||||
</el-button> |
||||
<div |
||||
v-for="(it, index) in commentList" |
||||
:key="it.commentId" |
||||
class="border-b-1" |
||||
style="padding: 10px 5px" |
||||
> |
||||
<div |
||||
class="flex items-center justify-between overflow-hidden text-16px" |
||||
style="line-height: 30px" |
||||
> |
||||
<div class="flex items-center"> |
||||
<el-avatar |
||||
shape="circle" |
||||
style=" |
||||
background-color: var(--el-color-primary-light-3); |
||||
width: 30px; |
||||
height: 30px; |
||||
" |
||||
fit="fill" |
||||
> |
||||
<span class="text-12px">{{ it.creatorName.slice(-2) }}</span> |
||||
</el-avatar> |
||||
<div class="ml-10px text-16px">{{ it.creatorName }}</div> |
||||
</div> |
||||
</div> |
||||
<div class="ml-10px" v-dompurify-html="it.content"></div> |
||||
<div |
||||
class="ml-10px mt-10px flex items-center justify-between text-12px" |
||||
style="line-height: 20px; color: #aaa" |
||||
> |
||||
<div class="flex items-center"> |
||||
<div class="flex items-center mr-50px"> |
||||
<el-button link @click="good(it)"> |
||||
<Icon |
||||
icon="fa:thumbs-o-up" |
||||
:size="16" |
||||
:color="it.currentUserIsLike ? 'var(--el-color-primary)' : '#333'" |
||||
/> |
||||
</el-button> |
||||
<span |
||||
class="ml-5px" |
||||
:style="{ |
||||
color: it.currentUserIsLike ? 'var(--el-color-primary)' : '#333' |
||||
}" |
||||
>{{ it.likeCount }}</span |
||||
> |
||||
</div> |
||||
<div class="flex items-center mr-50px"> |
||||
<el-button link @click="showChildComment(index)"> |
||||
<Icon icon="ep:chat-dot-square" :size="16" color="#333" /> |
||||
</el-button> |
||||
<span class="ml-5px" style="color: #333">{{ it.commentCount }}</span> |
||||
</div> |
||||
</div> |
||||
<div class="ml-10px text-13px text-gray-400"> |
||||
{{ formatDate(it.createTime, 'YYYY-MM-DD HH:mm') }} |
||||
</div> |
||||
</div> |
||||
<!-- 评论 --> |
||||
<div |
||||
v-if="showCommentIndex == index" |
||||
class="bg-gray-100 pl-10px pr-10px pt-5px pb-5px" |
||||
style="margin: 10px 10px 0 10px; border-radius: 4px" |
||||
label="笔谈" |
||||
> |
||||
<div |
||||
v-for="subComment in it.children.sort((a, b) => a.createTime - b.createTime)" |
||||
:key="subComment.commentId" |
||||
class="text-14px" |
||||
style="line-height: 24px" |
||||
> |
||||
<span class="font-bold">{{ subComment.creatorName }}:</span> |
||||
<span> |
||||
{{ subComment.content }} |
||||
</span> |
||||
</div> |
||||
<div class="mt-10px relative"> |
||||
<!-- <el-input |
||||
v-model="form.commentValue" |
||||
placeholder="请输入评论" |
||||
type="textarea" |
||||
:autosize="{ minRows: 4 }" |
||||
clearable |
||||
size="small" |
||||
style="width: 100%" |
||||
/> --> |
||||
<el-mention |
||||
v-model="form.commentValue" |
||||
type="textarea" |
||||
:autosize="{ minRows: 4 }" |
||||
:options="employeeOptions" |
||||
style="width: 100%" |
||||
size="small" |
||||
whole |
||||
placeholder="请输入内容" |
||||
@select="handleMention" |
||||
> |
||||
<template #label="scope"> |
||||
<div class="flex items-center justify-between h-full"> |
||||
<span class="text-14px text-dark-700">{{ scope.item.name }}</span> |
||||
<span class="text-12px text-gray-400">{{ scope.item.dept }}</span> |
||||
</div> |
||||
</template> |
||||
</el-mention> |
||||
<el-button |
||||
type="primary" |
||||
size="small" |
||||
style="position: absolute; right: 2px; bottom: 2px" |
||||
@click="handleSendCommnet(index)" |
||||
> |
||||
发布 |
||||
</el-button> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</el-tab-pane> |
||||
</el-tabs> |
||||
</el-drawer> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup name="Analysis"> |
||||
import { listToTree, findNode } from '@/utils/tree' |
||||
import { formatDate } from '@/utils/formatTime' |
||||
import { getAllNodeTree, getAllOkrPage, getOkrStatisticsTotal } from '@/api/okr/okr' |
||||
import { getEmployeeSimpleList } from '@/api/pers/employee' |
||||
import { cloneDeep } from 'lodash-es' |
||||
import { |
||||
getCommentTypeOptions, |
||||
createComment, |
||||
getCommentPage, |
||||
likeComment |
||||
} from '@/api/okr/comment' |
||||
import { exportTableWithVue } from '@/utils' |
||||
|
||||
const message = useMessage() |
||||
const defaultProps = { |
||||
value: 'nodeId', |
||||
label: 'nodeName', |
||||
children: 'children' |
||||
} |
||||
const searchForm = ref({ |
||||
nodeId: undefined |
||||
}) |
||||
|
||||
const currentNode = ref(undefined) |
||||
const showDrawer = ref(false) |
||||
const drawerTitle = ref('详情') |
||||
|
||||
const customColors = [ |
||||
{ color: 'rgb(196, 86.4, 86.4)', percentage: 20 }, |
||||
{ color: 'rgb(196, 86.4, 86.4)', percentage: 40 }, |
||||
{ color: 'rgb(237.5, 189.9, 118.5)', percentage: 60 }, |
||||
{ color: 'rgb(159.5, 206.5, 255)', percentage: 80 }, |
||||
{ color: 'rgb(179, 224.5, 156.5)', percentage: 100 } |
||||
] |
||||
|
||||
const peroidList = ref([]) |
||||
|
||||
const showTableSearch = ref(false) |
||||
const tableKeywords = ref('') |
||||
|
||||
handleSearchPeroid() |
||||
getOptions() |
||||
|
||||
// 当前是否是叶子节点 |
||||
// 如果不是叶子节点,则表格数据不可修改 |
||||
const isCurrentLeafNode = ref(false) |
||||
|
||||
function handleSearchPeroid() { |
||||
getAllNodeTree().then((resp) => { |
||||
if (resp.nodeId) { |
||||
peroidList.value = listToTree(resp?.tree || [], { |
||||
id: 'nodeId', |
||||
pid: 'parentId', |
||||
children: 'children' |
||||
}) |
||||
nodeChange(resp.nodeId) |
||||
currentNode.value = (resp.tree || []).find((item) => item.nodeId === resp.nodeId) |
||||
} else { |
||||
message.warning('请先创建节点数据') |
||||
} |
||||
}) |
||||
} |
||||
const showCountPop = ref(false) |
||||
function nodeChange(nodeId) { |
||||
if (nodeId) { |
||||
showTableSearch.value = false |
||||
tableKeywords.value = '' |
||||
searchForm.value.nodeId = nodeId |
||||
getOkrList() |
||||
getCountInfo() |
||||
currentNode.value = findNode(peroidList.value, (node) => { |
||||
return node.nodeId == nodeId |
||||
}) |
||||
searchForm.value.creatorId = currentNode.value.creatorId |
||||
if (!currentNode.value.children || currentNode.value.children.length == 0) { |
||||
isCurrentLeafNode.value = true |
||||
} else { |
||||
isCurrentLeafNode.value = false |
||||
} |
||||
} |
||||
} |
||||
|
||||
const originList = ref([]) |
||||
const defaultTableList = ref([]) |
||||
const spanObj = ref([]) |
||||
function getOkrList() { |
||||
getAllOkrPage(searchForm.value).then((resp) => { |
||||
originList.value = [] |
||||
spanObj.value = [] |
||||
if (resp && resp.length) { |
||||
resp.map((o) => { |
||||
if (o.keyResults && o.keyResults.length) { |
||||
const arr = o.keyResults.map((k, index) => { |
||||
spanObj.value.push(index == 0 ? o.keyResults.length : 0) |
||||
const obj = cloneDeep(o) |
||||
delete obj.keyResults |
||||
return { |
||||
...k, |
||||
objectInfo: obj |
||||
} |
||||
}) |
||||
originList.value = [...originList.value, ...arr] |
||||
} |
||||
}) |
||||
defaultTableList.value = [...originList.value] |
||||
} |
||||
}) |
||||
} |
||||
|
||||
const countInfo = ref([]) |
||||
function getCountInfo() { |
||||
getOkrStatisticsTotal({ nodeId: searchForm.value.nodeId }).then(async (resp) => { |
||||
countInfo.value = resp || [] |
||||
// await nextTick(() =) |
||||
showCountPop.value = true |
||||
}) |
||||
} |
||||
|
||||
function objectSpanMethod({ column, rowIndex }) { |
||||
if (['目标', '目标完成度'].includes(column.label)) { |
||||
let _row = spanObj.value[rowIndex] |
||||
let _col = _row > 0 ? 1 : 0 |
||||
return { |
||||
rowspan: _row, |
||||
colspan: _col |
||||
} |
||||
} |
||||
} |
||||
|
||||
function handleClickCell(row, column) { |
||||
if (column.property === 'keyResultShowName') { |
||||
openDrawer(2, row.keyResultId, `${row.sourceName} ${row.keyResultShowName}`) |
||||
} else if (column.property === 'objectInfo.objectiveName') { |
||||
openDrawer(3, row.objectInfo.objectiveId, row.objectInfo.objectiveName) |
||||
} |
||||
} |
||||
|
||||
const commentTypeOptions = ref([]) |
||||
const currentType = ref(1) // 默认评论类型为1 |
||||
function getOptions() { |
||||
getCommentTypeOptions().then((resp) => { |
||||
commentTypeOptions.value = (resp || []).sort((pre, cur) => pre.sort - cur.sort) |
||||
currentType.value = resp[0].id |
||||
}) |
||||
getEmployeeSimpleList({ status: 0 }).then((resp) => { |
||||
employeeOptions.value = resp.map((item) => ({ |
||||
...item, |
||||
label: item.name, |
||||
value: item.name |
||||
})) |
||||
}) |
||||
} |
||||
|
||||
const commentList = ref([]) |
||||
const commentInfo = ref({ |
||||
businessType: undefined, |
||||
businessId: undefined, |
||||
commentType: undefined, |
||||
pageSize: -1 |
||||
}) |
||||
function openDrawer(type, id, name) { |
||||
showDrawer.value = true |
||||
drawerTitle.value = `【${name}】笔谈` |
||||
commentInfo.value = { |
||||
businessType: type, |
||||
businessId: id, |
||||
commentType: currentType.value, |
||||
pageSize: -1 |
||||
} |
||||
searchCommentList() |
||||
} |
||||
|
||||
function searchCommentList() { |
||||
commentInfo.value.commentType = currentType.value |
||||
getCommentPage(commentInfo.value).then((resp) => { |
||||
// commentList.value = resp.list |
||||
commentList.value = listToTree(resp.list, { |
||||
id: 'commentId', |
||||
pid: 'parentId', |
||||
children: 'children' |
||||
}) |
||||
}) |
||||
} |
||||
|
||||
const showCommentIndex = ref(-1) |
||||
function showChildComment(index) { |
||||
showCommentIndex.value = showCommentIndex.value == index ? -1 : index |
||||
} |
||||
|
||||
function good(item) { |
||||
likeComment(item.commentId).then(() => { |
||||
message.success('点赞成功') |
||||
searchCommentList() |
||||
}) |
||||
} |
||||
|
||||
const form = ref({ |
||||
commentValue: '', |
||||
mentionedUserIdList: [] |
||||
}) |
||||
const employeeOptions = ref([]) |
||||
|
||||
function handleMention(item) { |
||||
form.value.mentionedUserIdList.push(item.id) |
||||
} |
||||
|
||||
function handleSendCommnet(idx) { |
||||
try { |
||||
// 过滤掉删除的用户,方式为遍历mentionedUserIdList,查找评论中是否有对应的用户名 |
||||
const userList = [...form.value.mentionedUserIdList] |
||||
const arr = [] |
||||
userList.map((item) => { |
||||
if (form.value.commentValue.indexOf(`@${item.name}`) != -1) { |
||||
arr.push(item.id) |
||||
// 然后移除对应的用户名,防止有多个 |
||||
form.value.commentValue = form.value.commentValue.replace(`@${item.name}`, '') |
||||
} |
||||
}) |
||||
const data = { |
||||
businessType: commentInfo.value.businessType, |
||||
businessId: commentInfo.value.businessId, |
||||
commentType: currentType.value, |
||||
content: form.value.commentValue, |
||||
mentionedUserIdList: arr, |
||||
parentId: commentList.value[idx].commentId |
||||
} |
||||
createComment(data) |
||||
.then(() => { |
||||
message.success('创建成功') |
||||
searchCommentList() |
||||
}) |
||||
.finally(() => { |
||||
form.value.commentValue = '' |
||||
}) |
||||
} catch (error) { |
||||
console.log(error) |
||||
message.error('创建失败') |
||||
} |
||||
} |
||||
|
||||
const addNewComment = ref(false) |
||||
function handleInsertComment() { |
||||
addNewComment.value = true |
||||
form.value.commentValue = commentTypeOptions.value.find( |
||||
(item) => item.id == currentType.value |
||||
).remark |
||||
} |
||||
|
||||
const toolbarConfig = { |
||||
toolbarKeys: [ |
||||
'bold', // 加粗 |
||||
'underline', // 下划线 |
||||
'italic', // 斜体 |
||||
'color', // 文字颜色 |
||||
'bgColor', // 背景色 |
||||
'fontSize', // 字号 |
||||
'bulletedList', // 无序列表 |
||||
'numberedList', // 有序列表 |
||||
'insertTable', // 插入表格 |
||||
'insertLink', // 插入链接 |
||||
'undo' // 撤销 |
||||
] |
||||
} |
||||
|
||||
function handleSaveComment() { |
||||
addNewComment.value = false |
||||
try { |
||||
const data = { |
||||
businessType: commentInfo.value.businessType, |
||||
businessId: commentInfo.value.businessId, |
||||
commentType: currentType.value, |
||||
content: form.value.commentValue, |
||||
mentionedUserIdList: form.value.mentionedUserIdList |
||||
} |
||||
createComment(data) |
||||
.then(() => { |
||||
message.success('创建成功') |
||||
searchCommentList() |
||||
}) |
||||
.finally(() => { |
||||
form.value.commentValue = '' |
||||
}) |
||||
} catch (error) { |
||||
message.error('创建失败') |
||||
} |
||||
} |
||||
|
||||
function handleExport() { |
||||
exportTableWithVue('#okrAnalysisTable', `OKR分析报表-${currentNode.value.nodeName}`) |
||||
} |
||||
|
||||
function handleTableFilter() { |
||||
console.log('tableKeywords', tableKeywords.value) |
||||
|
||||
if (tableKeywords.value) { |
||||
originList.value = defaultTableList.value.filter( |
||||
(item) => |
||||
item.keyResultShowName.includes(tableKeywords.value) || |
||||
item.sourceName.includes(tableKeywords.value) |
||||
) |
||||
} else { |
||||
originList.value = [...defaultTableList.value] |
||||
} |
||||
} |
||||
|
||||
function handleFilterTableClick() { |
||||
showTableSearch.value = !showTableSearch.value |
||||
if (!showTableSearch.value) { |
||||
tableKeywords.value = '' |
||||
originList.value = [...defaultTableList.value] |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped></style> |
@ -0,0 +1,125 @@ |
||||
<template> |
||||
<div class="h-full flex flex-col"> |
||||
<div class="flex items-center justify-between"> |
||||
<el-row> |
||||
<el-tree-select |
||||
v-model="searchForm.nodeId" |
||||
:data="peroidList" |
||||
:props="defaultProps" |
||||
:render-after-expand="false" |
||||
:default-expand-all="false" |
||||
style="width: 400px" |
||||
@change="nodeChange" |
||||
/> |
||||
</el-row> |
||||
<el-row> |
||||
<el-button type="info" @click="handleShowOkr(searchForm.nodeId)"> 节点详情 </el-button> |
||||
<el-button |
||||
type="warning" |
||||
v-if="currentUserId == searchForm.creatorId" |
||||
@click="handleEditOkr(searchForm.nodeId)" |
||||
> |
||||
修改当前节点 |
||||
</el-button> |
||||
</el-row> |
||||
</div> |
||||
|
||||
<OkrTable ref="okrTableRef" canEdit /> |
||||
<DialogOkr ref="dialogOkr" @edit="handleEditOkr" /> |
||||
<DialogOkrInfo ref="dialogOkrInfo" @success="handleSearchPeroid" /> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup name="MySon"> |
||||
import OkrTable from './OkrTable.vue' |
||||
import DialogOkr from './DialogOkr.vue' |
||||
import DialogOkrInfo from './DialogOkrInfo.vue' |
||||
import { listToTree, findNode } from '@/utils/tree' |
||||
import { useUserStore } from '@/store/modules/user' |
||||
|
||||
import { getMySonNodeTree, getMySonOkrPage } from '@/api/okr/okr' |
||||
|
||||
const props = defineProps({ |
||||
userId: { |
||||
type: Number, |
||||
default: undefined |
||||
} |
||||
}) |
||||
|
||||
const defaultProps = { |
||||
value: 'nodeId', |
||||
label: 'nodeName', |
||||
children: 'children' |
||||
} |
||||
|
||||
const userStore = useUserStore() |
||||
const currentUserId = userStore.getUser.id |
||||
|
||||
const okrTableRef = ref(null) |
||||
const searchForm = ref({ |
||||
nodeId: undefined |
||||
}) |
||||
|
||||
const peroidList = ref([]) |
||||
|
||||
handleSearchPeroid() |
||||
|
||||
function handleSearchPeroid() { |
||||
getMySonNodeTree({ userId: props.userId }).then((resp) => { |
||||
peroidList.value = listToTree(resp?.tree || [], { |
||||
id: 'nodeId', |
||||
pid: 'parentId', |
||||
children: 'children' |
||||
}) |
||||
nodeChange(resp.nodeId) |
||||
}) |
||||
} |
||||
|
||||
function getOkrList() { |
||||
getMySonOkrPage({ |
||||
...searchForm.value, |
||||
userId: props.userId |
||||
}).then((resp) => { |
||||
if (resp && resp.length > 0) { |
||||
nextTick(() => { |
||||
okrTableRef.value.prepareData(resp) |
||||
}) |
||||
} else { |
||||
// 如果没有数据,清空表格 |
||||
okrTableRef.value.prepareData([]) |
||||
} |
||||
}) |
||||
} |
||||
|
||||
function nodeChange(nodeId) { |
||||
searchForm.value.nodeId = nodeId |
||||
getOkrList() |
||||
const currentNode = findNode(peroidList.value, (node) => { |
||||
return node.nodeId == nodeId |
||||
}) |
||||
searchForm.value.creatorId = currentNode.creatorId |
||||
} |
||||
|
||||
const dialogOkr = ref(null) |
||||
function handleShowOkr(id) { |
||||
dialogOkr.value.open({ |
||||
nodeId: id, |
||||
canEdit: true, |
||||
queryType: 2 |
||||
}) |
||||
} |
||||
|
||||
const dialogOkrInfo = ref(null) |
||||
function handleEditOkr(nodeId = undefined) { |
||||
dialogOkr.value.close() |
||||
dialogOkrInfo.value.open('update', nodeId || searchForm.value.nodeId, 2) |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
:deep(.el-overlay-dialog) { |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
} |
||||
</style> |
@ -0,0 +1,305 @@ |
||||
<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> |
||||
<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="16" :lg="16" :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" style="width: 100%" /> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24" v-if="!!form.meetingId"> |
||||
<el-form-item label="会议纪要" prop="meetingSummary" label-width="80px"> |
||||
<!-- <div v-if="!!isDetail" v-dompurify-html="form.meetingSummary" class="w-full"></div> |
||||
<Editor v-else v-model="form.meetingSummary" height="500px" /> --> |
||||
<div v-if="!!isDetail" class="w-full">{{ form.meetingSummary }}</div> |
||||
<el-input |
||||
v-else |
||||
v-model="form.meetingSummary" |
||||
type="textarea" |
||||
placeholder="请输入会议纪要" |
||||
:maxlength="-1" |
||||
:show-word-limit="false" |
||||
:autosize="{ minRows: 20 }" |
||||
/> |
||||
</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) |
||||
) |
||||
if (!isDetail) { |
||||
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