Compare commits
49 Commits
@ -1,38 +0,0 @@ |
||||
import request from '@/config/axios' |
||||
|
||||
// 创建
|
||||
export const createComment = (data) => { |
||||
return request.post({ |
||||
url: '/admin-api/okr/comments/create', |
||||
data, |
||||
isSubmitForm: true |
||||
// headers: { 'instance-id': 1016 }
|
||||
}) |
||||
} |
||||
|
||||
// 分页
|
||||
export const getCommentPage = (params) => { |
||||
return request.get({ |
||||
url: '/admin-api/okr/comments/page', |
||||
params |
||||
// headers: { 'instance-id': 1016 }
|
||||
}) |
||||
} |
||||
|
||||
// 获取评论类型
|
||||
export const getCommentTypeOptions = () => { |
||||
return request.get({ |
||||
url: '/admin-api/okr/dict-data/get-by-type', |
||||
params: { dictType: 'comment_type' } |
||||
// headers: { 'instance-id': 1016 }
|
||||
}) |
||||
} |
||||
|
||||
// 点赞评论
|
||||
export const likeComment = (commentId) => { |
||||
return request.put({ |
||||
url: '/admin-api/okr/comments-likes/update', |
||||
data: { commentId } |
||||
// headers: { 'instance-id': 1016 }
|
||||
}) |
||||
} |
||||
@ -1,45 +0,0 @@ |
||||
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 }
|
||||
}) |
||||
} |
||||
@ -1,154 +0,0 @@ |
||||
import request from '@/config/axios' |
||||
|
||||
// 创建
|
||||
export const createOkrNode = (data) => { |
||||
return request.post({ |
||||
url: '/admin-api/okr/node/add', |
||||
data, |
||||
isSubmitForm: true |
||||
// headers: { 'instance-id': 1016 }
|
||||
}) |
||||
} |
||||
|
||||
// 修改
|
||||
export const updateOkrNode = (data) => { |
||||
return request.put({ |
||||
url: '/admin-api/okr/node/update', |
||||
data |
||||
// headers: { 'instance-id': 1016 }
|
||||
}) |
||||
} |
||||
|
||||
// 查询详情
|
||||
export const getOkrNodeDetail = (params) => { |
||||
return request.get({ |
||||
url: '/admin-api/okr/node/get', |
||||
params |
||||
// headers: { 'instance-id': 1016 }
|
||||
}) |
||||
} |
||||
|
||||
// 我负责的 - 节点树
|
||||
export const getMyNodeTree = (params) => { |
||||
return request.get({ |
||||
url: '/admin-api/okr/node/my/list', |
||||
params |
||||
// headers: { 'instance-id': 1016 }
|
||||
}) |
||||
} |
||||
|
||||
// 我负责的 - okr列表
|
||||
export const getMyOkrPage = (params) => { |
||||
return request.get({ |
||||
url: '/admin-api/okr/node/my/object/list', |
||||
params |
||||
// headers: { 'instance-id': 1016 }
|
||||
}) |
||||
} |
||||
|
||||
// 全部目标 - 节点树
|
||||
export const getAllNodeTree = (params) => { |
||||
return request.get({ |
||||
url: '/admin-api/okr/node/all/list', |
||||
params |
||||
// headers: { 'instance-id': 1016 }
|
||||
}) |
||||
} |
||||
|
||||
// 全部目标 - okr列表
|
||||
export const getAllOkrPage = (params) => { |
||||
return request.get({ |
||||
url: '/admin-api/okr/node/all/object/list', |
||||
params |
||||
// headers: { 'instance-id': 1016 }
|
||||
}) |
||||
} |
||||
|
||||
// 获取节点操作历史
|
||||
export const getOkrNodeHistory = (nodeId) => { |
||||
return request.get({ |
||||
url: '/admin-api/okr/record/list', |
||||
params: { nodeId } |
||||
// headers: { 'instance-id': 1016 }
|
||||
}) |
||||
} |
||||
|
||||
// 获取系统默认的关键成果内容
|
||||
export const getDefaultOkrOptions = () => { |
||||
return request.get({ |
||||
url: '/admin-api/okr/dict-data/get-by-type', |
||||
params: { dictType: 'key_result_source' } |
||||
// headers: { 'instance-id': 1016 }
|
||||
}) |
||||
} |
||||
|
||||
// 更新OKR进度
|
||||
export const updateOkrProgress = (data) => { |
||||
return request.put({ |
||||
url: '/admin-api/okr/node/progress/update', |
||||
data |
||||
// headers: { 'instance-id': 1016 }
|
||||
}) |
||||
} |
||||
|
||||
// 获取目标关系树一级节点
|
||||
export const getOkrRelationTree = (params) => { |
||||
return request.get({ |
||||
url: '/admin-api/okr/node/first-node', |
||||
params |
||||
// headers: { 'instance-id': 1016 }
|
||||
}) |
||||
} |
||||
|
||||
// 获取目标关系树下级节点数据
|
||||
export const getOkrRelationTreeChildren = (params) => { |
||||
return request.get({ |
||||
url: '/admin-api/okr/node/node-tree', |
||||
params |
||||
// headers: { 'instance-id': 1016 }
|
||||
}) |
||||
} |
||||
|
||||
// 获取我的组员
|
||||
export const getMyMemberList = (params) => { |
||||
return request.get({ |
||||
url: '/admin-api/okr/node/my-members', |
||||
params |
||||
// headers: { 'instance-id': 1016 }
|
||||
}) |
||||
} |
||||
|
||||
// 获取我的组员节点树
|
||||
export const getMySonNodeTree = (params) => { |
||||
return request.get({ |
||||
url: '/admin-api/okr/node/member/node/list', |
||||
params |
||||
// headers: { 'instance-id': 1016 }
|
||||
}) |
||||
} |
||||
|
||||
// 获取我的组员OKR列表
|
||||
export const getMySonOkrPage = (params) => { |
||||
return request.get({ |
||||
url: '/admin-api/okr/node/member/objective/list', |
||||
params |
||||
// headers: { 'instance-id': 1016 }
|
||||
}) |
||||
} |
||||
|
||||
// 获取渠道
|
||||
export const getChannelOptions = () => { |
||||
return request.get({ |
||||
url: '/admin-api/okr/node/source' |
||||
// headers: { 'instance-id': 1016 }
|
||||
}) |
||||
} |
||||
|
||||
// 获取统计表中的合计信息
|
||||
export const getOkrStatisticsTotal = (params) => { |
||||
return request.get({ |
||||
url: '/admin-api/okr/node/data/count', |
||||
params |
||||
// headers: { 'instance-id': 1016 }
|
||||
}) |
||||
} |
||||
@ -1,83 +0,0 @@ |
||||
import request from '@/config/axios' |
||||
|
||||
// 创建
|
||||
export const createWait = (data) => { |
||||
return request.post({ |
||||
url: '/admin-api/okr/agent-work/create', |
||||
data, |
||||
isSubmitForm: true |
||||
// headers: { 'instance-id': 1016 }
|
||||
}) |
||||
} |
||||
|
||||
// 修改
|
||||
export const updateWait = (data) => { |
||||
return request.put({ |
||||
url: '/admin-api/okr/agent-work/update', |
||||
data |
||||
// headers: { 'instance-id': 1016 }
|
||||
}) |
||||
} |
||||
|
||||
// 分页
|
||||
export const getWaitPage = (params) => { |
||||
return request.get({ |
||||
url: '/admin-api/okr/agent-work/page', |
||||
params |
||||
// headers: { 'instance-id': 1016 }
|
||||
}) |
||||
} |
||||
|
||||
// 详情
|
||||
export const getWaitDetail = (id) => { |
||||
return request.get({ |
||||
url: '/admin-api/okr/agent-work/get', |
||||
params: { id } |
||||
// headers: { 'instance-id': 1016 }
|
||||
}) |
||||
} |
||||
|
||||
// 删除
|
||||
export const deleteWait = (id) => { |
||||
return request.delete({ |
||||
url: '/admin-api/okr/agent-work/delete', |
||||
params: { id } |
||||
// headers: { 'instance-id': 1016 }
|
||||
}) |
||||
} |
||||
|
||||
// 催办
|
||||
export const urgeWait = (workId) => { |
||||
return request.get({ |
||||
url: '/admin-api/okr/agent-work/urge', |
||||
params: { workId } |
||||
// headers: { 'instance-id': 1016 }
|
||||
}) |
||||
} |
||||
|
||||
// 跟进待办
|
||||
export const followWait = (data) => { |
||||
return request.post({ |
||||
url: '/admin-api/okr/agent-work-follow/create', |
||||
data, |
||||
isSubmitForm: true |
||||
// headers: { 'instance-id': 1016 }
|
||||
}) |
||||
} |
||||
|
||||
// 查询跟进记录
|
||||
export const getFollowWaitPage = (params) => { |
||||
return request.get({ |
||||
url: '/admin-api/okr/agent-work-follow/list', |
||||
params |
||||
// headers: { 'instance-id': 1016 }
|
||||
}) |
||||
} |
||||
|
||||
export const getWaitCount = (params) => { |
||||
return request.get({ |
||||
url: '/admin-api/okr/agent-work/getAgentWorkNum', |
||||
params |
||||
// headers: { 'instance-id': 1016 }
|
||||
}) |
||||
} |
||||
@ -1,36 +0,0 @@ |
||||
import request from '@/config/axios' |
||||
|
||||
// 创建
|
||||
export const createPlan = (data) => { |
||||
return request.post({ url: '/admin-api/oa/attendance-setting/create', data, isSubmitForm: true }) |
||||
} |
||||
|
||||
// 修改
|
||||
export const updatePlan = (data) => { |
||||
return request.put({ url: '/admin-api/oa/attendance-setting/update', data }) |
||||
} |
||||
|
||||
// 修改状态
|
||||
export const updatePlanStatus = (data) => { |
||||
return request.put({ url: '/admin-api/oa/attendance-setting/status/update', data }) |
||||
} |
||||
|
||||
// 分页
|
||||
export const getPlanPage = (params) => { |
||||
return request.get({ url: '/admin-api/oa/attendance-setting/page', params }) |
||||
} |
||||
|
||||
// 列表
|
||||
export const getPlanSimpleList = (params) => { |
||||
return request.get({ url: '/admin-api/oa/attendance-setting/simple-list', params }) |
||||
} |
||||
|
||||
// 详情
|
||||
export const getPlanDetail = (id) => { |
||||
return request.get({ url: '/admin-api/oa/attendance-setting/get', params: { id } }) |
||||
} |
||||
|
||||
// 删除
|
||||
export const deletePlan = (id) => { |
||||
return request.delete({ url: '/admin-api/oa/attendance-setting/delete', params: { id } }) |
||||
} |
||||
@ -1,41 +0,0 @@ |
||||
import request from '@/config/axios' |
||||
|
||||
// 创建
|
||||
export const createEmployee = (data) => { |
||||
return request.post({ url: '/admin-api/oa/employee/create', data, isSubmitForm: true }) |
||||
} |
||||
|
||||
// 分页
|
||||
export const getEmployeeSimpleList = (params) => { |
||||
return request.get({ url: '/admin-api/oa/employee/list-all-simple', params }) |
||||
} |
||||
|
||||
// 修改
|
||||
export const updateEmployee = (data) => { |
||||
return request.put({ url: '/admin-api/oa/employee/update', data }) |
||||
} |
||||
|
||||
// 修改状态
|
||||
export const updateEmployeeStatus = (data) => { |
||||
return request.put({ url: '/admin-api/oa/employee/status/update', data }) |
||||
} |
||||
|
||||
// 分页
|
||||
export const getEmployeePage = (params) => { |
||||
return request.get({ url: '/admin-api/oa/employee/page', params }) |
||||
} |
||||
|
||||
// 详情
|
||||
export const getEmployeeDetail = (id) => { |
||||
return request.get({ url: '/admin-api/oa/employee/get', params: { id } }) |
||||
} |
||||
|
||||
// 删除
|
||||
export const deleteEmployee = (id) => { |
||||
return request.delete({ url: '/admin-api/oa/employee/delete', params: { id } }) |
||||
} |
||||
|
||||
// 获取钉钉id
|
||||
export const getDingUserId = (params) => { |
||||
return request.get({ url: '/admin-api/oa/employee/getDingTalkUserIdByMobile', params }) |
||||
} |
||||
@ -1,2 +1,2 @@ |
||||
@import './process-designer.scss'; |
||||
@import './process-panel.scss'; |
||||
@import './process-panel.scss'; |
||||
|
||||
@ -1,87 +0,0 @@ |
||||
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,600 +0,0 @@ |
||||
<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 |
||||
:show-summary="!!tableKeywords" |
||||
:span-method="objectSpanMethod" |
||||
@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) { |
||||
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> |
||||
@ -1,150 +0,0 @@ |
||||
<template> |
||||
<div class="flex flex-col w-full h-full p-4 bg-white rounded-lg shadow-md overflow-hidden"> |
||||
<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" |
||||
check-strictly |
||||
style="width: 400px" |
||||
@change="nodeChange" |
||||
/> |
||||
<el-button class="ml-10px" type="primary" @click="handleAddNode">新建节点</el-button> |
||||
</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-button |
||||
type="success" |
||||
v-if="searchForm.executor?.includes(currentUserId)" |
||||
@click="handleUpdateProcess" |
||||
>更新进度</el-button |
||||
> |
||||
</el-row> |
||||
</div> |
||||
<OkrTable ref="okrTableRef" :canEdit="isCurrentLeafNode" /> |
||||
<DialogOkr ref="dialogOkr" @edit="handleEditOkr" /> |
||||
<DialogOkrInfo ref="dialogOkrInfo" @success="handleSearchPeroid" /> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup name="AllTarget"> |
||||
import OkrTable from './OkrTable.vue' |
||||
import DialogOkrInfo from './DialogOkrInfo.vue' |
||||
import DialogOkr from './DialogOkr.vue' |
||||
|
||||
import { getAllNodeTree, getAllOkrPage } from '@/api/okr/okr' |
||||
import { listToTree, findNode } from '@/utils/tree' |
||||
import { useUserStore } from '@/store/modules/user' |
||||
|
||||
const message = useMessage() |
||||
const userStore = useUserStore() |
||||
const currentUserId = userStore.getUser.id |
||||
|
||||
const defaultProps = { |
||||
value: 'nodeId', |
||||
label: 'nodeName', |
||||
children: 'children' |
||||
} |
||||
|
||||
const okrTableRef = ref(null) |
||||
const searchForm = ref({ |
||||
nodeId: undefined |
||||
}) |
||||
|
||||
const peroidList = ref([]) |
||||
|
||||
handleSearchPeroid() |
||||
|
||||
// 当前是否是叶子节点 |
||||
// 如果不是叶子节点，则表格数据不可修改 |
||||
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) |
||||
} else { |
||||
message.warning('请先创建节点数据') |
||||
} |
||||
}) |
||||
} |
||||
|
||||
function nodeChange(nodeId) { |
||||
if (nodeId) { |
||||
searchForm.value.nodeId = nodeId |
||||
getOkrList() |
||||
const currentNode = findNode(peroidList.value, (node) => { |
||||
return node.nodeId == nodeId |
||||
}) |
||||
searchForm.value.creatorId = currentNode.creatorId |
||||
if (!currentNode.children || currentNode.children.length == 0) { |
||||
isCurrentLeafNode.value = true |
||||
} else { |
||||
isCurrentLeafNode.value = false |
||||
} |
||||
} |
||||
} |
||||
|
||||
function getOkrList() { |
||||
getAllOkrPage(searchForm.value).then((resp) => { |
||||
const list = resp |
||||
if (list && list.length > 0) { |
||||
nextTick(() => { |
||||
okrTableRef.value.prepareData(list) |
||||
}) |
||||
} else { |
||||
// 如果没有数据，清空表格 |
||||
okrTableRef.value.prepareData([]) |
||||
} |
||||
}) |
||||
} |
||||
|
||||
const dialogOkrInfo = ref(null) |
||||
function handleAddNode() { |
||||
dialogOkrInfo.value.open('create', null) |
||||
} |
||||
|
||||
function handleEditOkr(nodeId = undefined) { |
||||
dialogOkr.value.close() |
||||
dialogOkrInfo.value.open('update', nodeId || searchForm.value.nodeId, 2) |
||||
} |
||||
|
||||
function handleUpdateProcess() { |
||||
okrTableRef.value.updateProcess(searchForm.value.nodeId).then(() => { |
||||
message.success('更新成功') |
||||
getOkrList() |
||||
}) |
||||
} |
||||
|
||||
const dialogOkr = ref(null) |
||||
function handleShowOkr(id) { |
||||
dialogOkr.value.open({ |
||||
nodeId: id, |
||||
canEdit: isCurrentLeafNode.value, |
||||
queryType: 2 |
||||
}) |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
:deep(.el-overlay-dialog) { |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
} |
||||
</style> |
||||
@ -1,682 +0,0 @@ |
||||
<template> |
||||
<el-dialog |
||||
v-if="show" |
||||
v-model="show" |
||||
width="94vw" |
||||
class="dialog-okr" |
||||
:show-close="false" |
||||
:close-on-click-modal="false" |
||||
> |
||||
<template #header> |
||||
<div class="dialog-okr-header"> |
||||
<div class="flex-1 flex items-center" style="line-height: 50px"> |
||||
<div class="dialog-okr-title"> |
||||
<Icon icon="ep:circle-check-filled" color="#30d1fc" :size="14" /> |
||||
<span>目标</span> |
||||
</div> |
||||
<el-divider direction="vertical" /> |
||||
<span class="text-14px ml-0.25">ork落地</span> |
||||
<div class="ml-20px text-14px"> |
||||
<span>【节点】</span> |
||||
<span |
||||
v-for="(item, index) in nodeInfo.parentNodes" |
||||
:key="item.nodeId" |
||||
@click="handleChildItem(item)" |
||||
> |
||||
<span |
||||
class="cursor-pointer" |
||||
:style="{ |
||||
color: index < nodeInfo.parentNodes.length - 1 ? '#409eff' : '#333', |
||||
borderBottom: |
||||
index < nodeInfo.parentNodes.length - 1 ? '1px solid #409eff' : 'none' |
||||
}" |
||||
> |
||||
{{ item.nodeName }} |
||||
</span> |
||||
<span v-if="index != nodeInfo.parentNodes.length - 1"> -> </span> |
||||
</span> |
||||
</div> |
||||
</div> |
||||
<div class="flex items-center"> |
||||
<el-button |
||||
v-if="nodeInfo.creatorId == currentUserId" |
||||
link |
||||
@click="emit('edit', nodeInfo.nodeId)" |
||||
> |
||||
<el-tooltip content="编辑" placement="top" effect="dark"> |
||||
<Icon icon="ep:edit" :size="16" /> |
||||
</el-tooltip> |
||||
</el-button> |
||||
|
||||
<el-button link @click="show = false"> |
||||
<el-tooltip content="关闭" placement="top" effect="dark"> |
||||
<Icon icon="ep:close" :size="16" /> |
||||
</el-tooltip> |
||||
</el-button> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
<template #default> |
||||
<div class="dialog-okr-body"> |
||||
<div class="dialog-okr-content pr-10px"> |
||||
<div class="dialog-okr-content-detail"> |
||||
<div class="detail-basic-title"> |
||||
<div class="basic-title-item"> |
||||
<div class="basic-title-label">创建人</div> |
||||
<div class="basic-title-value">{{ nodeInfo.creator }}</div> |
||||
</div> |
||||
<div class="basic-title-item"> |
||||
<div class="basic-title-label">执行人</div> |
||||
<div class="basic-title-value">{{ nodeInfo.executorName || '无' }}</div> |
||||
</div> |
||||
<div class="basic-title-item"> |
||||
<div class="basic-title-label">目标数</div> |
||||
<div class="basic-title-value">{{ okrList.length }}</div> |
||||
</div> |
||||
<div class="basic-title-item" style="min-width: 200px"> |
||||
<div class="basic-title-label">总体进度</div> |
||||
<el-progress :percentage="parseInt(nodeInfo.progress) || 0" :stroke-width="8" /> |
||||
</div> |
||||
</div> |
||||
<div class="flex detail-basic-info"> |
||||
<span>开始日期：{{ nodeInfo.startTime }}</span> |
||||
<span>截止日期：{{ nodeInfo.endTime }}</span> |
||||
<span>最新更新时间：{{ nodeInfo.updateTime }}</span> |
||||
</div> |
||||
</div> |
||||
<div class="flex" style="position: relative; flex: 1; height: 100px"> |
||||
<el-tabs v-model="workIndex" style="flex: 1"> |
||||
<el-tab-pane label="目标/关键成果" name="okr"> |
||||
<div class="content-wrap"> |
||||
<OkrTable ref="okrTableRef" :canEdit="canEdit" /> |
||||
</div> |
||||
</el-tab-pane> |
||||
</el-tabs> |
||||
<el-button v-if="canEdit" class="sav-btn" type="primary" @click="handleSaveProcess"> |
||||
保存并更新 |
||||
</el-button> |
||||
</div> |
||||
</div> |
||||
<div class="dialog-okr-side pl-10px"> |
||||
<el-tabs v-model="sideIndex" style="flex: 1; height: 100%"> |
||||
<el-tab-pane label="子节点" name="subNode" key=" "> |
||||
<div class="overflow-y-auto" style="height: calc(100% - 50px)"> |
||||
<div |
||||
v-for="item in childNodeList" |
||||
:key="item.nodeId" |
||||
class="border-b-1 child-item" |
||||
style="padding: 10px 5px; cursor: pointer" |
||||
@click="handleChildItem(item)" |
||||
> |
||||
<div |
||||
class="flex justify-between items-center overflow-hidden text-16px" |
||||
style="line-height: 30px" |
||||
> |
||||
<div class="child-label">【节点】{{ item.nodeName }}</div> |
||||
<el-progress |
||||
type="line" |
||||
:percentage="parseInt(item.progress) || 0" |
||||
:stroke-width="6" |
||||
style="width: 120px" |
||||
/> |
||||
</div> |
||||
<div class="ml-10px flex items-center text-13px" style="line-height: 30px"> |
||||
<span>目标数：</span> |
||||
<span style="color: #aaa">{{ item.objectiveNum }}</span> |
||||
<el-divider direction="vertical" style="margin: 0 20px" /> |
||||
<div |
||||
class="flex-1 overflow-hidden h-30px" |
||||
style="text-overflow: ellipsis; white-space: nowrap" |
||||
> |
||||
<span>执行人：</span> |
||||
<span style="color: #aaa">{{ item.executorName || '无' }}</span> |
||||
</div> |
||||
</div> |
||||
<div |
||||
class="ml-10px flex items-center text-12px" |
||||
style="line-height: 20px; color: #aaa" |
||||
> |
||||
<span>开始日期：{{ item.startTime }}</span> |
||||
<el-divider direction="vertical" style="margin: 0 20px" /> |
||||
<span>截止日期：{{ item.endTime }}</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</el-tab-pane> |
||||
<el-tab-pane label="笔谈" name="conclusion" key="conclusion"> |
||||
<div class="relative overflow-y-auto" style="height: calc(100% - 50px)"> |
||||
<div v-if="addNewComment"> |
||||
<div class="flex justify-between items-center"> |
||||
<el-select |
||||
v-model="form.commentType" |
||||
filterable |
||||
size="small" |
||||
style="width: 120px" |
||||
@change="getCommentTemplate" |
||||
> |
||||
<el-option |
||||
v-for="it in commentTypeOptions" |
||||
:label="it.label" |
||||
:value="it.id" |
||||
:key="it.id" |
||||
/> |
||||
</el-select> |
||||
|
||||
<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="showComment(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="{ item }"> |
||||
<div class="flex items-center justify-between h-full"> |
||||
<span class="text-14px text-dark-700">{{ item.name }}</span> |
||||
<span class="text-12px text-gray-400">{{ 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-tab-pane label="进度历史" name="history" key="history"> |
||||
<div class="overflow-y-auto pl-15px" style="height: calc(100% - 50px)"> |
||||
<el-timeline class="ml-10px"> |
||||
<el-timeline-item |
||||
v-for="item in nodeRecords" |
||||
:key="item.recordId" |
||||
placement="bottom" |
||||
:timestamp="formatDate(item.createTime, 'YYYY-MM-DD HH:mm:ss')" |
||||
color="#30d1fc" |
||||
> |
||||
<div>{{ item.creator }}</div> |
||||
<div class="mt-10px text-14px" style="line-height: 24px; color: #666"> |
||||
{{ item.content }} |
||||
</div> |
||||
</el-timeline-item> |
||||
</el-timeline> |
||||
</div> |
||||
</el-tab-pane> |
||||
</el-tabs> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
</el-dialog> |
||||
</template> |
||||
|
||||
<script setup name="DialogOkr"> |
||||
import { formatDate } from '@/utils/formatTime' |
||||
import OkrTable from './OkrTable.vue' |
||||
|
||||
import { getOkrNodeDetail, getOkrNodeHistory } from '@/api/okr/okr' |
||||
import { |
||||
getCommentTypeOptions, |
||||
createComment, |
||||
getCommentPage, |
||||
likeComment |
||||
} from '@/api/okr/comment' |
||||
import { listToTree } from '@/utils/tree' |
||||
import { getEmployeeSimpleList } from '@/api/pers/employee' |
||||
import { useUserStore } from '@/store/modules/user' |
||||
|
||||
const message = useMessage() |
||||
const userStore = useUserStore() |
||||
const currentUserId = userStore.getUser.id |
||||
const emit = defineEmits(['edit', 'close']) |
||||
|
||||
const show = ref(false) |
||||
|
||||
watch( |
||||
() => show.value, |
||||
(newValue, oldValue) => { |
||||
if (oldValue && !newValue) { |
||||
emit('close', nodeInfo.value) |
||||
} |
||||
} |
||||
) |
||||
|
||||
const canEdit = ref(false) |
||||
|
||||
const toolbarConfig = { |
||||
toolbarKeys: [ |
||||
'bold', // 加粗 |
||||
'underline', // 下划线 |
||||
'italic', // 斜体 |
||||
'color', // 文字颜色 |
||||
'bgColor', // 背景色 |
||||
'fontSize', // 字号 |
||||
'bulletedList', // 无序列表 |
||||
'numberedList', // 有序列表 |
||||
'insertTable', // 插入表格 |
||||
'insertLink', // 插入链接 |
||||
'undo' // 撤销 |
||||
] |
||||
} |
||||
|
||||
const workIndex = ref('okr') |
||||
const okrList = ref([]) |
||||
const childNodeList = ref([]) |
||||
const sideIndex = ref('subNode') |
||||
|
||||
const okrTableRef = ref(null) |
||||
const nodeInfo = ref({}) |
||||
|
||||
const nodeRecords = ref([]) |
||||
const commentTypeOptions = ref([]) |
||||
|
||||
const queryType = ref(1) |
||||
function open(curNode) { |
||||
canEdit.value = curNode.canEdit |
||||
nodeInfo.value.nodeId = curNode.nodeId |
||||
queryType.value = curNode.queryType |
||||
// 获取数据详情 |
||||
searchInfo(curNode) |
||||
show.value = true |
||||
} |
||||
|
||||
const employeeOptions = ref([]) |
||||
|
||||
function searchInfo(curNode) { |
||||
try { |
||||
getOkrNodeDetail({ nodeId: curNode.nodeId, queryType: queryType.value }).then((resp) => { |
||||
nodeInfo.value = { |
||||
...resp, |
||||
executor: resp.executor || [] |
||||
} |
||||
canEdit.value = canEdit.value && nodeInfo.value.executor.includes(currentUserId + '') |
||||
if (resp.objectives) { |
||||
okrList.value = resp.objectives.map((item) => ({ |
||||
...item, |
||||
keyResults: item.keyResults || [] |
||||
})) |
||||
} else { |
||||
okrList.value = [] |
||||
} |
||||
childNodeList.value = [...resp.children] |
||||
nextTick(() => { |
||||
okrTableRef.value.prepareData(okrList.value) |
||||
}) |
||||
}) |
||||
getOkrNodeHistory(curNode.nodeId).then((resp) => { |
||||
nodeRecords.value = resp |
||||
}) |
||||
getEmployeeSimpleList({ status: 0 }).then((resp) => { |
||||
employeeOptions.value = resp.map((item) => ({ |
||||
...item, |
||||
label: item.name, |
||||
value: item.name |
||||
})) |
||||
}) |
||||
getCommentTypeOptions().then((resp) => { |
||||
commentTypeOptions.value = resp |
||||
}) |
||||
searchCommentList() |
||||
} finally { |
||||
} |
||||
} |
||||
|
||||
function close() { |
||||
show.value = false |
||||
} |
||||
|
||||
defineExpose({ open, close }) |
||||
|
||||
function handleMention(item) { |
||||
form.value.mentionedUserIdList.push(item.id) |
||||
} |
||||
|
||||
function handleSaveProcess() { |
||||
okrTableRef.value.updateProcess(nodeInfo.value.nodeId).then(() => { |
||||
message.success('更新成功') |
||||
searchInfo({ nodeId: nodeInfo.value.nodeId }) |
||||
}) |
||||
} |
||||
|
||||
function handleChildItem(item) { |
||||
const arr = item.executor || [] |
||||
const isExecutor = arr.includes(currentUserId) |
||||
canEdit.value = isExecutor && (!item.children || item.children.length == 0) |
||||
searchInfo(item) |
||||
} |
||||
|
||||
const addNewComment = ref(false) |
||||
const form = ref({ |
||||
commentValue: '', |
||||
commentType: undefined, |
||||
mentionedUserIdList: [] |
||||
}) |
||||
function handleInsertComment() { |
||||
addNewComment.value = true |
||||
const defaultComment = commentTypeOptions.value[0] |
||||
if (defaultComment) { |
||||
form.value = { |
||||
commentType: defaultComment.id, |
||||
mentionedUserIdList: [] |
||||
} |
||||
} |
||||
getCommentTemplate() |
||||
} |
||||
|
||||
function getCommentTemplate() { |
||||
if (form.value.commentType) { |
||||
form.value.commentValue = commentTypeOptions.value.find( |
||||
(item) => item.id == form.value.commentType |
||||
).remark |
||||
} else { |
||||
form.value.commentValue = `<h2 style=\"text-align: start;\">一、工作概况</h2><p> </p><h2 style=\"text-align: start;\">二、数据统计</h2><ol><li>呼出电话数：</li><li>有效沟通数：</li><li>销售成果</li></ol><h2 style=\"text-align: start;\">三、问题与改进方案</h2><p><br></p>` |
||||
} |
||||
} |
||||
|
||||
function handleSaveComment() { |
||||
addNewComment.value = false |
||||
try { |
||||
const data = { |
||||
businessType: 1, |
||||
businessId: nodeInfo.value.nodeId, |
||||
commentType: form.value.commentType, |
||||
content: form.value.commentValue, |
||||
mentionedUserIdList: form.value.mentionedUserIdList |
||||
} |
||||
createComment(data) |
||||
.then(() => { |
||||
message.success('创建成功') |
||||
searchCommentList() |
||||
}) |
||||
.finally(() => { |
||||
form.value.commentValue = '' |
||||
}) |
||||
} catch (error) { |
||||
message.error('创建失败') |
||||
} |
||||
} |
||||
const commentList = ref([]) |
||||
|
||||
function searchCommentList() { |
||||
getCommentPage({ |
||||
businessType: 1, |
||||
businessId: nodeInfo.value.nodeId, |
||||
pageNum: 1, |
||||
pageSize: -1 |
||||
}).then((resp) => { |
||||
commentList.value = listToTree(resp.list, { |
||||
id: 'commentId', |
||||
pid: 'parentId', |
||||
children: 'children' |
||||
}) |
||||
}) |
||||
} |
||||
|
||||
function good(item) { |
||||
likeComment(item.commentId).then(() => { |
||||
message.success('点赞成功') |
||||
searchCommentList() |
||||
}) |
||||
} |
||||
|
||||
const showCommentIndex = ref(-1) |
||||
function showComment(index) { |
||||
showCommentIndex.value = showCommentIndex.value == index ? -1 : index |
||||
} |
||||
|
||||
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: 1, |
||||
businessId: nodeInfo.value.nodeId, |
||||
contentType: 1, |
||||
commentType: form.value.commentType, |
||||
content: form.value.commentValue, |
||||
mentionedUserIdList: arr, |
||||
parentId: commentList.value[idx].commentId |
||||
} |
||||
createComment(data) |
||||
.then(() => { |
||||
message.success('创建成功') |
||||
searchCommentList() |
||||
}) |
||||
.finally(() => { |
||||
form.value.commentValue = '' |
||||
}) |
||||
} catch (error) { |
||||
message.error('创建失败') |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.dialog-okr { |
||||
.dialog-okr-header { |
||||
display: flex; |
||||
height: 51px; |
||||
min-height: 51px; |
||||
vertical-align: middle; |
||||
justify-content: space-between; |
||||
-webkit-box-align: center; |
||||
-ms-flex-align: center; |
||||
align-items: center; |
||||
padding: 0 1.25rem; |
||||
.dialog-okr-title { |
||||
display: flex; |
||||
margin-right: 5px; |
||||
align-items: center; |
||||
background: rgba(48, 209, 252, 0.1); |
||||
border-radius: 3px; |
||||
padding: 0 10px; |
||||
line-height: 24px; |
||||
span { |
||||
color: #2a344b; |
||||
font-size: 12px; |
||||
margin-left: 6px; |
||||
} |
||||
} |
||||
} |
||||
.dialog-okr-body { |
||||
display: flex; |
||||
background: #f0f3fa; |
||||
overflow: hidden; |
||||
min-width: 1064px; |
||||
height: calc(94vh - 85px); |
||||
.dialog-okr-content { |
||||
display: flex; |
||||
flex-direction: column; |
||||
height: 100%; |
||||
width: 70%; |
||||
flex: auto; |
||||
min-width: 700px; |
||||
background: #fff; |
||||
margin: 0 1px 0 0; |
||||
justify-content: space-between; |
||||
overflow-y: hidden !important; |
||||
.dialog-okr-content-detail { |
||||
position: relative; |
||||
margin-bottom: 30px; |
||||
overflow-y: auto; |
||||
display: -webkit-box; |
||||
display: -ms-flexbox; |
||||
display: flex; |
||||
-webkit-box-orient: vertical; |
||||
-webkit-box-direction: normal; |
||||
-ms-flex-direction: column; |
||||
flex-direction: column; |
||||
.detail-basic-title { |
||||
display: flex; |
||||
font-size: 14px; |
||||
margin-bottom: 16px; |
||||
.basic-title-item { |
||||
margin-right: 50px; |
||||
.basic-title-label { |
||||
color: #aaa; |
||||
margin-bottom: 6px; |
||||
} |
||||
.basic-title-value { |
||||
color: #2a344b; |
||||
font-size: 14px; |
||||
} |
||||
} |
||||
} |
||||
.detail-basic-info { |
||||
font-size: 14px; |
||||
color: #aaa; |
||||
span { |
||||
margin-right: 40px; |
||||
} |
||||
} |
||||
} |
||||
.content-wrap { |
||||
display: flex; |
||||
flex-direction: column; |
||||
height: calc(100% - 15px); |
||||
} |
||||
} |
||||
.dialog-okr-side { |
||||
padding-left: 10px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
width: 30%; |
||||
overflow: hidden; |
||||
min-width: 364px; |
||||
max-width: 500px; |
||||
background: #fff; |
||||
margin: 0; |
||||
.child-item:hover { |
||||
background: #f0f3fa; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.sav-btn { |
||||
position: absolute; |
||||
right: 10px; |
||||
top: 0; |
||||
width: auto; |
||||
} |
||||
</style> |
||||
@ -1,647 +0,0 @@ |
||||
<template> |
||||
<el-dialog |
||||
v-model="show" |
||||
width="88vw" |
||||
class="dialog-okr" |
||||
:show-close="false" |
||||
:close-on-click-modal="false" |
||||
> |
||||
<template #header> |
||||
<div class="dialog-okr-header"> |
||||
<div class="flex-1 flex items-center" style="line-height: 50px"> {{ title }} </div> |
||||
<div class="flex items-center"> |
||||
<el-button type="primary" link :disabled="formLoading" @click="handleSave"> |
||||
保存 |
||||
</el-button> |
||||
<el-button link @click="show = false"> 关闭 </el-button> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
<template #default> |
||||
<div class="dialog-okr-body" v-loading="formLoading"> |
||||
<el-form :model="form" ref="formRef" :rules="rules" label-width="0"> |
||||
<el-row :gutter="10"> |
||||
<el-col :span="4" :offset="0"> |
||||
<el-form-item prop="parentId"> |
||||
<el-tree-select |
||||
v-model="form.parentId" |
||||
:data="parentNodeList" |
||||
check-strictly |
||||
:props="{ value: 'nodeId', label: 'nodeName', children: 'children' }" |
||||
:render-after-expand="false" |
||||
placeholder="父节点" |
||||
clearable |
||||
:disabled="!!form.nodeId" |
||||
@change="handleChangeParent" |
||||
/> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="4" :offset="0"> |
||||
<el-form-item prop="nodeName"> |
||||
<el-input v-model="form.nodeName" placeholder="请输入节点名称" /> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="4" :offset="0"> |
||||
<el-form-item prop="startTime"> |
||||
<el-date-picker |
||||
v-model="form.startTime" |
||||
type="date" |
||||
format="YYYY-MM-DD" |
||||
value-format="YYYY-MM-DD" |
||||
placeholder="开始日期" |
||||
/> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="4" :offset="0"> |
||||
<el-form-item prop="endTime"> |
||||
<el-date-picker |
||||
v-model="form.endTime" |
||||
type="date" |
||||
format="YYYY-MM-DD" |
||||
value-format="YYYY-MM-DD" |
||||
placeholder="截止日期" |
||||
/> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="4" :offset="0"> |
||||
<el-form-item prop="executor"> |
||||
<el-select |
||||
v-model="form.executor" |
||||
placeholder="选择执行人，可多选" |
||||
multiple |
||||
collapse-tags |
||||
collapse-tags-tooltip |
||||
clearable |
||||
filterable |
||||
> |
||||
<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="4" :offset="0"> |
||||
<el-form-item prop="dataScope"> |
||||
<el-select v-model="form.dataScope" placeholder="选择权限" clearable filterable> |
||||
<el-option label="公开" :value="1" /> |
||||
<el-option label="仅上级可见" :value="2" /> |
||||
</el-select> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
</el-form> |
||||
<div class="relative"> |
||||
<el-button |
||||
v-if="okrKey == 'okr'" |
||||
style="position: absolute; right: 10px; top: 10px; z-index: 9" |
||||
type="primary" |
||||
size="small" |
||||
@click="addObjective" |
||||
> |
||||
添加目标 |
||||
</el-button> |
||||
<el-button |
||||
v-else-if="okrKey == 'childNode'" |
||||
style="position: absolute; right: 10px; top: 10px; z-index: 9" |
||||
type="primary" |
||||
size="small" |
||||
@click="addChildNode" |
||||
> |
||||
添加子节点 |
||||
</el-button> |
||||
<el-tabs v-model="okrKey"> |
||||
<el-tab-pane label="目标/关键成果" name="okr"> |
||||
<div> |
||||
<div |
||||
class="flex items-center w-full" |
||||
v-for="(item, i) in objectList" |
||||
:key="item.objectiveId" |
||||
style="padding-bottom: 5px" |
||||
> |
||||
<div class="flex-1 w-100px"> |
||||
<div class="flex items-center"> |
||||
<el-tooltip content="点击可折叠/展开目标" placement="top" effect="dark"> |
||||
<el-tag |
||||
type="success" |
||||
class="mr-10px" |
||||
@click="item.hideChild = !item.hideChild" |
||||
> |
||||
O{{ i + 1 }} |
||||
</el-tag> |
||||
</el-tooltip> |
||||
|
||||
<el-input |
||||
v-model="item.objectiveName" |
||||
placeholder="目标名称" |
||||
class="flex-1 w-150px" |
||||
:disabled="!!item.objectiveId" |
||||
/> |
||||
<el-select |
||||
v-model="item.executor" |
||||
placeholder="选择执行人，可多选" |
||||
multiple |
||||
clearable |
||||
collapse-tags |
||||
filterable |
||||
style="width: 240px; margin-left: 10px" |
||||
> |
||||
<el-option |
||||
v-for="it in userOptions" |
||||
:key="it.id" |
||||
:label="it.name" |
||||
:value="it.id + ''" |
||||
:disabled="it.status == 1" |
||||
/> |
||||
</el-select> |
||||
<el-select |
||||
v-model="item.dataScope" |
||||
placeholder="选择权限" |
||||
clearable |
||||
filterable |
||||
style="width: 120px; margin-left: 10px" |
||||
> |
||||
<el-option label="公开" :value="1" /> |
||||
<el-option label="仅上级可见" :value="2" /> |
||||
</el-select> |
||||
<div class="ml-10px"> |
||||
<el-button type="primary" text @click="AddKR(i)">新增关键成果</el-button> |
||||
<el-button type="danger" text @click="removeObj(i)">删除目标</el-button> |
||||
</div> |
||||
</div> |
||||
<div v-if="!item.hideChild" style="background: #f0f3fa; padding-bottom: 10px"> |
||||
<div |
||||
class="ml-50px" |
||||
v-for="(kr, index) in item.keyResults" |
||||
:key="kr.keyResultId" |
||||
> |
||||
<div class="flex flex-1 items-center pb-5px pt-5px"> |
||||
<el-tag class="mr-10px">KR{{ index + 1 }}</el-tag> |
||||
<el-select |
||||
v-model="kr.keyResultName" |
||||
placeholder="选择或输入关键成果" |
||||
filterable |
||||
:props="{ value: 'keyResultId', label: 'keyResultName' }" |
||||
allow-create |
||||
:reserve-keyword="false" |
||||
class="flex-1 w-150px" |
||||
@change="krChange(i, index)" |
||||
> |
||||
<el-option |
||||
v-for="it in krOptions" |
||||
:key="it.value" |
||||
:label="it.label" |
||||
:value="it.value" |
||||
/> |
||||
</el-select> |
||||
<el-button type="danger" text @click="removeKR(i, index)"> |
||||
删除关键成果 |
||||
</el-button> |
||||
</div> |
||||
<div class="mt-5px flex items-center"> |
||||
<el-tree-select |
||||
v-model="kr.source" |
||||
:data="sourceOptions" |
||||
:props="defaultProps" |
||||
check-strictly |
||||
clearable |
||||
filterable |
||||
style="width: 200px" |
||||
node-key="sourceId" |
||||
placeholder="请选择渠道" |
||||
/> |
||||
<!-- <el-radio-group v-model="kr.resultType" class="ml-10px"> |
||||
<el-radio-button :value="1">目标值</el-radio-button> |
||||
<el-radio-button :value="2">是/否</el-radio-button> |
||||
</el-radio-group> --> |
||||
|
||||
<el-input |
||||
v-if="kr.resultType == 1" |
||||
v-model="kr.targetValue" |
||||
type="number" |
||||
placeholder="目标值" |
||||
class="ml-10px" |
||||
style="width: 120px" |
||||
/> |
||||
|
||||
<el-select |
||||
v-model="kr.executor" |
||||
placeholder="选择执行人，可多选" |
||||
multiple |
||||
clearable |
||||
filterable |
||||
collapse-tags |
||||
collapse-tags-tooltip |
||||
style="width: 240px; margin-left: 10px" |
||||
> |
||||
<el-option |
||||
v-for="it in userOptions" |
||||
:key="it.id" |
||||
:label="it.name" |
||||
:value="it.id + ''" |
||||
:disabled="it.status == 1" |
||||
/> |
||||
</el-select> |
||||
<el-select |
||||
v-model="kr.dataScope" |
||||
placeholder="选择权限" |
||||
clearable |
||||
filterable |
||||
style="width: 120px; margin-left: 10px" |
||||
> |
||||
<el-option label="公开" :value="1" /> |
||||
<el-option label="仅上级可见" :value="2" /> |
||||
</el-select> |
||||
<el-radio-group v-model="kr.isCount" class="ml-10px"> |
||||
<el-radio :label="true" :value="true">参与统计</el-radio> |
||||
<el-radio :label="false" :value="false">不参与统计</el-radio> |
||||
</el-radio-group> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<!-- <div class="w-100px"></div> --> |
||||
</div> |
||||
</div> |
||||
</el-tab-pane> |
||||
<el-tab-pane label="子节点" name="childNode"> |
||||
<el-table :data="childNodeList"> |
||||
<el-table-column label="名称"> |
||||
<template #default="{ row }"> |
||||
<el-input v-model="row.nodeName" placeholder="子节点名称" /> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="开始日期" width="160px"> |
||||
<template #default="{ row }"> |
||||
<el-date-picker |
||||
v-model="row.startTime" |
||||
type="date" |
||||
format="YYYY-MM-DD" |
||||
value-format="YYYY-MM-DD" |
||||
placeholder="选择日期时间" |
||||
style="width: 130px" |
||||
/> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="截止日期" width="160px"> |
||||
<template #default="{ row }"> |
||||
<el-date-picker |
||||
v-model="row.endTime" |
||||
type="date" |
||||
format="YYYY-MM-DD" |
||||
value-format="YYYY-MM-DD" |
||||
placeholder="选择日期时间" |
||||
style="width: 130px" |
||||
/> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="权限" width="160px"> |
||||
<template #default="{ row }"> |
||||
<el-select v-model="row.dataScope" placeholder="请选择" style="width: 130px"> |
||||
<el-option label="公开" :value="1" /> |
||||
<el-option label="仅上级可见" :value="2" /> |
||||
</el-select> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="执行人" width="300px"> |
||||
<template #default="{ row }"> |
||||
<el-select |
||||
v-model="row.executor" |
||||
placeholder="选择执行人，可多选" |
||||
multiple |
||||
clearable |
||||
filterable |
||||
style="width: 100%" |
||||
> |
||||
<el-option |
||||
v-for="item in userOptions" |
||||
:key="item.id" |
||||
:label="item.name" |
||||
:value="item.id + ''" |
||||
:disabled="item.status == 1" |
||||
/> |
||||
</el-select> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column fixed="right" label="删除" :width="100"> |
||||
<template #default="{ $index }"> |
||||
<el-button type="danger" text @click="removeChildNode($index)">删除</el-button> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
</el-tab-pane> |
||||
</el-tabs> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
</el-dialog> |
||||
</template> |
||||
|
||||
<script setup name="DialogOkrInfo"> |
||||
import { |
||||
getAllNodeTree, |
||||
getOkrNodeDetail, |
||||
createOkrNode, |
||||
updateOkrNode, |
||||
getAllOkrPage, |
||||
getDefaultOkrOptions, |
||||
getChannelOptions |
||||
} from '@/api/okr/okr' |
||||
import { listToTree } from '@/utils/tree' |
||||
import { getEmployeeSimpleList } from '@/api/pers/employee' |
||||
|
||||
const { t } = useI18n() // 国际化 |
||||
const message = useMessage() // 消息弹窗 |
||||
|
||||
const show = ref(false) |
||||
|
||||
watch( |
||||
() => show.value, |
||||
(newValue, oldValue) => { |
||||
if (oldValue && !newValue) { |
||||
emit('close') |
||||
} |
||||
} |
||||
) |
||||
|
||||
const title = ref('') |
||||
const formType = ref('create') |
||||
|
||||
const form = ref({}) |
||||
const formLoading = ref(false) |
||||
const rules = ref({ |
||||
nodeName: { required: true, message: '节点名称不可为空', trigger: 'blur' }, |
||||
startTime: { required: true, message: '开始日期不可为空', trigger: 'change' }, |
||||
endTime: { required: true, message: '截止日期不可为空', trigger: 'change' } |
||||
}) |
||||
|
||||
const okrKey = ref('okr') |
||||
|
||||
const parentNodeList = ref([]) |
||||
|
||||
const childNodeList = ref([]) |
||||
|
||||
const userOptions = ref([]) |
||||
const krOptions = ref([]) |
||||
const defaultProps = { |
||||
children: 'children', |
||||
label: 'sourceName', |
||||
value: 'sourceId', |
||||
isLeaf: 'leaf' |
||||
} |
||||
const sourceOptions = ref([]) |
||||
const objectList = ref([]) |
||||
function open(type, val, queryType) { |
||||
show.value = true |
||||
title.value = type == 'update' ? '修改Okr' : '新增Okr' |
||||
formType.value = type |
||||
resetForm() |
||||
getEmployeeSimpleList().then((data) => { |
||||
userOptions.value = data |
||||
}) |
||||
getAllNodeTree().then((resp) => { |
||||
parentNodeList.value = listToTree(resp.tree, { |
||||
id: 'nodeId', |
||||
pid: 'parentId', |
||||
children: 'children' |
||||
}) |
||||
}) |
||||
getDefaultOkrOptions().then((resp) => { |
||||
krOptions.value = resp |
||||
}) |
||||
getChannelOptions().then((resp) => { |
||||
sourceOptions.value = listToTree(resp, { |
||||
id: 'sourceId', |
||||
pid: 'parentId', |
||||
children: 'children' |
||||
}) |
||||
}) |
||||
if (val) { |
||||
formLoading.value = true |
||||
try { |
||||
getOkrNodeDetail({ |
||||
nodeId: val, |
||||
queryType |
||||
}).then((resp) => { |
||||
form.value = resp |
||||
if (resp.objectives) { |
||||
objectList.value = resp.objectives.map((item) => ({ |
||||
...item, |
||||
keyResults: item.keyResults || [] |
||||
})) |
||||
} else { |
||||
objectList.value = [] |
||||
} |
||||
childNodeList.value = [...resp.children] |
||||
}) |
||||
} finally { |
||||
formLoading.value = false |
||||
} |
||||
} |
||||
} |
||||
function resetForm() { |
||||
form.value = { |
||||
parentId: undefined, |
||||
nodeName: undefined, |
||||
startTime: undefined, |
||||
endTime: undefined, |
||||
executor: [], |
||||
dataScope: 2 |
||||
} |
||||
} |
||||
|
||||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗 |
||||
|
||||
const formRef = ref() |
||||
/** 提交表单 */ |
||||
const emit = defineEmits(['success', 'close']) // 定义 success 事件，用于操作成功后的回调 |
||||
|
||||
function addObjective() { |
||||
objectList.value.push({ |
||||
objectiveName: '', |
||||
executor: form.value.executor || [], |
||||
keyResults: [], |
||||
dataScope: form.value.dataScope || 2 |
||||
}) |
||||
} |
||||
|
||||
function AddKR(idx) { |
||||
if (!objectList.value[idx].keyResults) { |
||||
objectList.value[idx].keyResults = [] |
||||
} |
||||
const obj = objectList.value[idx] |
||||
objectList.value[idx].keyResults.push({ |
||||
keyResultName: undefined, |
||||
resultType: 1, |
||||
source: undefined, |
||||
targetValue: undefined, |
||||
process: undefined, |
||||
currentValue: undefined, |
||||
executor: obj.executor, |
||||
dataScope: obj.dataScope, |
||||
isCount: false |
||||
}) |
||||
} |
||||
|
||||
function removeObj(idx) { |
||||
objectList.value.splice(idx, 1) |
||||
} |
||||
|
||||
function removeKR(oIdx, krIdx) { |
||||
objectList.value[oIdx].keyResults.splice(krIdx, 1) |
||||
} |
||||
|
||||
function addChildNode() { |
||||
childNodeList.value.push({ dataScope: 2 }) |
||||
} |
||||
|
||||
function removeChildNode(idx) { |
||||
childNodeList.value.splice(idx, 1) |
||||
} |
||||
|
||||
// 读取父节点的OKR，并展示出来 |
||||
function handleChangeParent() { |
||||
// 通过父节点Id,查询父节点的okr，需要继承 |
||||
if (form.value.parentId) { |
||||
getAllOkrPage({ nodeId: form.value.parentId }).then((resp) => { |
||||
objectList.value = resp |
||||
}) |
||||
} |
||||
} |
||||
|
||||
function getLastDayOfMonth(year, month) { |
||||
// 创建一个日期对象，将月份设置为指定月份的下一个月，日期设置为 0 |
||||
const date = new Date(year, month + 1, 0) |
||||
// 返回该日期对象的日期部分，即指定年月的最后一天 |
||||
return date.getDate() |
||||
} |
||||
|
||||
function krChange(idx, krIdx) { |
||||
const kr = objectList.value[idx].keyResults[krIdx] |
||||
if (kr.keyResultName) { |
||||
const obj = krOptions.value.find((item) => item.value == kr.keyResultName) |
||||
if (obj) { |
||||
kr.isSys = true |
||||
} else { |
||||
kr.isSys = false |
||||
} |
||||
} |
||||
} |
||||
|
||||
async function handleSave() { |
||||
// 校验表单 |
||||
if (!formRef.value) return |
||||
const valid = await formRef.value.validate() |
||||
if (!valid) return |
||||
|
||||
form.value.executor = form.value.executor || [] |
||||
if (form.value.executor.length > 1) { |
||||
message |
||||
.confirm('是否按照当前节点所选的多个执行人自动新增对应的员工节点？', { |
||||
type: 'warning', |
||||
showCancelButton: true, |
||||
cancelButtonText: '不新增员工节点', |
||||
confirmButtonText: '新增员工节点' |
||||
}) |
||||
.then(() => { |
||||
saveOkrData(true) |
||||
}) |
||||
.catch(() => { |
||||
saveOkrData(false) |
||||
}) |
||||
} else { |
||||
saveOkrData(false) |
||||
} |
||||
} |
||||
|
||||
async function saveOkrData(isAutoAddChild = false) { |
||||
// 提交请求 |
||||
formLoading.value = true |
||||
try { |
||||
form.value.isAutoAddChild = isAutoAddChild |
||||
form.value.objectives = objectList.value |
||||
form.value.children = childNodeList.value |
||||
if (formType.value === 'create') { |
||||
// 创建的是一级节点,且子节点为空时，自动新增12个月子节点，并且每月添加4周的周子节点 |
||||
if (!form.value.parentId) { |
||||
if (form.value.children.length == 0) { |
||||
const defaultTime = new Date(form.value.startTime) |
||||
for (let month = 0; month < 12; month++) { |
||||
form.value.children.push({ |
||||
nodeName: `${month + 1}月`, |
||||
startTime: `${defaultTime.getFullYear()}-${String(month + 1).padStart(2, '0')}-01`, |
||||
endTime: `${defaultTime.getFullYear()}-${String(month + 1).padStart( |
||||
2, |
||||
'0' |
||||
)}-${getLastDayOfMonth(defaultTime.getFullYear(), month)}`, |
||||
dataScope: form.value.dataScope, |
||||
executor: form.value.executor |
||||
// children: [ |
||||
// { |
||||
// nodeName: `${month + 1}月第1周`, |
||||
// dataScope: form.value.dataScope, |
||||
// executor: form.value.executor, |
||||
// children: [] |
||||
// }, |
||||
// { |
||||
// nodeName: `${month + 1}月第2周`, |
||||
// dataScope: form.value.dataScope, |
||||
// executor: form.value.executor, |
||||
// children: [] |
||||
// }, |
||||
// { |
||||
// nodeName: `${month + 1}月第3周`, |
||||
// dataScope: form.value.dataScope, |
||||
// executor: form.value.executor, |
||||
// children: [] |
||||
// }, |
||||
// { |
||||
// nodeName: `${month + 1}月第4周`, |
||||
// dataScope: form.value.dataScope, |
||||
// executor: form.value.executor, |
||||
// children: [] |
||||
// } |
||||
// ] |
||||
}) |
||||
} |
||||
} |
||||
} |
||||
await createOkrNode(form.value) |
||||
message.success(t('common.createSuccess')) |
||||
} else { |
||||
await updateOkrNode(form.value) |
||||
message.success(t('common.updateSuccess')) |
||||
} |
||||
show.value = false |
||||
// 发送操作成功的事件 |
||||
emit('success') |
||||
} finally { |
||||
formLoading.value = false |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.dialog-okr { |
||||
.dialog-okr-header { |
||||
display: flex; |
||||
height: 51px; |
||||
min-height: 51px; |
||||
vertical-align: middle; |
||||
justify-content: space-between; |
||||
-webkit-box-align: center; |
||||
-ms-flex-align: center; |
||||
align-items: center; |
||||
padding: 0 1.25rem; |
||||
} |
||||
.dialog-okr-body { |
||||
overflow-x: hidden; |
||||
overflow-y: auto; |
||||
min-width: 1064px; |
||||
height: calc(94vh - 85px); |
||||
} |
||||
} |
||||
</style> |
||||
@ -1,113 +0,0 @@ |
||||
<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="getOkrList" |
||||
/> |
||||
</el-row> |
||||
<el-row> |
||||
<el-button type="info" @click="handleShowOkr(searchForm.nodeId)"> 节点详情 </el-button> |
||||
<el-button type="success" @click="handleUpdateProcess">更新进度</el-button> |
||||
</el-row> |
||||
</div> |
||||
|
||||
<OkrTable ref="okrTableRef" canEdit /> |
||||
<DialogOkr ref="dialogOkr" @edit="handleEditOkr" /> |
||||
<DialogOkrInfo ref="dialogOkrInfo" /> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup name="MyDuty"> |
||||
import OkrTable from './OkrTable.vue' |
||||
import DialogOkrInfo from './DialogOkrInfo.vue' |
||||
import DialogOkr from './DialogOkr.vue' |
||||
import { listToTree } from '@/utils/tree' |
||||
|
||||
import { getMyNodeTree, getMyOkrPage } from '@/api/okr/okr' |
||||
|
||||
const message = useMessage() |
||||
|
||||
const defaultProps = { |
||||
value: 'nodeId', |
||||
label: 'nodeName', |
||||
children: 'children' |
||||
} |
||||
|
||||
const okrTableRef = ref(null) |
||||
const searchForm = ref({ |
||||
nodeId: undefined |
||||
}) |
||||
|
||||
const peroidList = ref([]) |
||||
|
||||
// onMounted(() => { |
||||
handleSearchPeroid() |
||||
// }) |
||||
|
||||
function handleSearchPeroid() { |
||||
getMyNodeTree().then((resp) => { |
||||
peroidList.value = listToTree(resp?.tree || [], { |
||||
id: 'nodeId', |
||||
pid: 'parentId', |
||||
children: 'children' |
||||
}) |
||||
searchForm.value.nodeId = resp.nodeId |
||||
getOkrList() |
||||
}) |
||||
} |
||||
|
||||
function getOkrList() { |
||||
getMyOkrPage(searchForm.value).then((resp) => { |
||||
const list = resp |
||||
if (list && list.length > 0) { |
||||
nextTick(() => { |
||||
okrTableRef.value.prepareData(list) |
||||
}) |
||||
} else { |
||||
// 如果没有数据，清空表格 |
||||
okrTableRef.value.prepareData([]) |
||||
} |
||||
}) |
||||
} |
||||
|
||||
const dialogOkrInfo = ref(null) |
||||
// function handleAddNode() { |
||||
// dialogOkrInfo.value.open('create', null) |
||||
// } |
||||
|
||||
function handleEditOkr(nodeId = undefined) { |
||||
dialogOkr.value.close() |
||||
dialogOkrInfo.value.open('update', nodeId || searchForm.value.nodeId, 1) |
||||
} |
||||
|
||||
function handleUpdateProcess() { |
||||
okrTableRef.value.updateProcess(searchForm.value.nodeId).then(() => { |
||||
message.success('更新成功') |
||||
getOkrList() |
||||
}) |
||||
} |
||||
|
||||
const dialogOkr = ref(null) |
||||
function handleShowOkr(id) { |
||||
dialogOkr.value.open({ |
||||
nodeId: id, |
||||
canEdit: true, |
||||
queryType: 1 |
||||
}) |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
:deep(.el-overlay-dialog) { |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
} |
||||
</style> |
||||
@ -1,125 +0,0 @@ |
||||
<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> |
||||
@ -1,270 +0,0 @@ |
||||
<template> |
||||
<div style="height: 100vh"> |
||||
<div class="flex items-center"> |
||||
<el-popover placement="bottom" width="500px" trigger="click" @show="handleSearchPeroid"> |
||||
<template #reference> |
||||
<div class="flex items-center border-1px w-300px h-32px p-10px peroid-select"> |
||||
<Icon icon="ep:calendar" style="color: #aaa" /> |
||||
<span class="text-14px ml-10px" style="color: #aaa"> |
||||
{{ searchForm.nodeName ? searchForm.nodeName : '选择周期' }} |
||||
</span> |
||||
</div> |
||||
</template> |
||||
<div> |
||||
<div class="mt-10px" style="height: 400px"> |
||||
<el-table :data="peroidList" @row-click="handleSelectPeroid"> |
||||
<el-table-column label="节点名称"> |
||||
<template #default="{ row }"> |
||||
<el-radio v-model="searchForm.nodeId" :label="row.nodeId">{{ |
||||
row.nodeName |
||||
}}</el-radio> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="开始日期" prop="startTime" width="120" /> |
||||
<el-table-column label="截止日期" prop="endTime" width="120" /> |
||||
</el-table> |
||||
</div> |
||||
</div> |
||||
</el-popover> |
||||
<el-button class="ml-10px" type="primary" @click="handleAddNode">新建节点</el-button> |
||||
</div> |
||||
|
||||
<vue3-tree-org |
||||
ref="treeOrgRef" |
||||
:data="dataList" |
||||
center |
||||
collapsable |
||||
:default-expand-keys="lastExpendKeys" |
||||
:props="treeProps" |
||||
@on-node-click="handleClickNode" |
||||
> |
||||
<template #default="{ node }"> |
||||
<div style="cursor: pointer"> |
||||
<div class="tree-org-node__text node-label"> |
||||
<el-popover placement="right" title="目标" width="270px" trigger="hover"> |
||||
<template #reference> |
||||
<div> |
||||
<div style="max-height: 40px; overflow: hidden">{{ node.label }}</div> |
||||
<div class="tip"> 目标数： {{ getNodePropData(node.id, 'objectiveNum') }}</div> |
||||
<!-- 执行人 --> |
||||
<div class="tip"> |
||||
执行人： {{ getNodePropData(node.id, 'executorName') || '无' }} |
||||
</div> |
||||
</div> |
||||
</template> |
||||
<template #default> |
||||
<div style="font-size: 0.875rem; line-height: 1.5"> |
||||
<div v-for="i in getNodePropData(node.id, 'objectives')" :key="i.id" class="mt-5"> |
||||
<span style="color: #aaa">{{ parseInt(i.progress) }}%</span> |
||||
<span style="margin-left: 0.5rem"> |
||||
{{ i.objectiveName }} |
||||
</span> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
</el-popover> |
||||
</div> |
||||
<div class="p-5px"> |
||||
<el-progress |
||||
type="line" |
||||
:percentage="parseInt(getNodePropData(node.id, 'progress')) || 0" |
||||
text-inside |
||||
:stroke-width="12" |
||||
/> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
</vue3-tree-org> |
||||
<DialogOkr ref="dialogOkr" @edit="handleEditOkr" /> |
||||
<DialogOkrInfo ref="dialogOkrInfo" @close="openOkr" @success="resetTreeData" /> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup name="ObjectList"> |
||||
import { Vue3TreeOrg } from 'vue3-tree-org' |
||||
import 'vue3-tree-org/lib/vue3-tree-org.css' |
||||
import DialogOkr from './DialogOkr.vue' |
||||
import DialogOkrInfo from './DialogOkrInfo.vue' |
||||
|
||||
import { getOkrRelationTree, getOkrRelationTreeChildren } from '@/api/okr/okr' |
||||
import { listToTree } from '@/utils/tree' |
||||
|
||||
const dataList = ref({}) |
||||
const helpDataList = ref([]) |
||||
const lastExpendKeys = ref([]) |
||||
const treeProps = { |
||||
children: 'children', |
||||
label: 'nodeName', |
||||
id: 'nodeId', |
||||
pid: 'parentId' |
||||
} |
||||
|
||||
const searchForm = ref({ |
||||
nodeName: '', |
||||
nodeId: null |
||||
}) |
||||
|
||||
const peroidList = ref([]) |
||||
|
||||
handleSearchPeroid() |
||||
|
||||
function handleSearchPeroid() { |
||||
lastExpendKeys.value = [] |
||||
getOkrRelationTree().then((resp) => { |
||||
peroidList.value = resp |
||||
if (resp && resp.length && !searchForm.value.nodeId) { |
||||
searchForm.value.nodeId = resp[0].nodeId |
||||
searchForm.value.nodeName = resp[0].nodeName |
||||
getOkrList() |
||||
} |
||||
}) |
||||
} |
||||
|
||||
const treeOrgRef = ref(null) |
||||
function resetTreeData() { |
||||
if (treeOrgRef.value) { |
||||
lastExpendKeys.value = treeOrgRef.value.getExpandKeys() |
||||
} |
||||
|
||||
// 重新获取tree数据 |
||||
getOkrRelationTree().then((resp) => { |
||||
peroidList.value = resp |
||||
if (resp && resp.length) { |
||||
if (!searchForm.value.nodeId) { |
||||
searchForm.value.nodeId = resp[0].nodeId |
||||
searchForm.value.nodeName = resp[0].nodeName |
||||
} |
||||
getOkrRelationTreeChildren({ |
||||
nodeId: searchForm.value.nodeId |
||||
}).then((resp) => { |
||||
const tree = listToTree(resp, { |
||||
id: 'nodeId', |
||||
pid: 'parentId', |
||||
children: 'children' |
||||
}) |
||||
// // 设置展开的keys |
||||
// if (treeOrgRef.value) { |
||||
// treeOrgRef.value.setExpandKeys(lastExpendKeys.value) |
||||
// } |
||||
helpDataList.value = resp |
||||
if (tree && tree.length) { |
||||
dataList.value = tree[0] |
||||
} else { |
||||
dataList.value = {} |
||||
} |
||||
}) |
||||
} |
||||
}) |
||||
} |
||||
|
||||
function getOkrList() { |
||||
getOkrRelationTreeChildren({ |
||||
nodeId: searchForm.value.nodeId |
||||
}).then((resp) => { |
||||
const tree = listToTree(resp, { |
||||
id: 'nodeId', |
||||
pid: 'parentId', |
||||
children: 'children' |
||||
}) |
||||
helpDataList.value = resp |
||||
if (tree && tree.length) { |
||||
dataList.value = tree[0] |
||||
} else { |
||||
dataList.value = {} |
||||
} |
||||
}) |
||||
} |
||||
|
||||
function handleSelectPeroid(row) { |
||||
searchForm.value.nodeName = row.nodeName |
||||
searchForm.value.nodeId = row.nodeId |
||||
getOkrList() |
||||
} |
||||
|
||||
function getNodePropData(nodeId, prop) { |
||||
const nodeData = helpDataList.value.find((it) => it.nodeId == nodeId) |
||||
if (nodeData) { |
||||
return nodeData[prop] |
||||
} else { |
||||
return '' |
||||
} |
||||
} |
||||
|
||||
function toggleExpand(data, val) { |
||||
if (Array.isArray(data)) { |
||||
data.forEach((item) => { |
||||
item.expand = val |
||||
if (item.children) { |
||||
toggleExpand(item.children, val) |
||||
} |
||||
}) |
||||
} else { |
||||
data.expand = val |
||||
if (data.children) { |
||||
toggleExpand(data.children, val) |
||||
} |
||||
} |
||||
} |
||||
|
||||
toggleExpand(dataList.value, true) |
||||
|
||||
const dialogOkr = ref(null) |
||||
const clickNode = ref(null) |
||||
function handleClickNode(node, data) { |
||||
clickNode.value = data |
||||
openOkr() |
||||
} |
||||
|
||||
function openOkr() { |
||||
clickNode.value && |
||||
dialogOkr.value.open({ |
||||
nodeId: clickNode.value.nodeId, |
||||
queryType: 2, |
||||
canEdit: !clickNode.value.children || clickNode.value.children.length == 0 |
||||
}) |
||||
} |
||||
|
||||
const dialogOkrInfo = ref(null) |
||||
function handleAddNode() { |
||||
clickNode.value = null |
||||
dialogOkrInfo.value.open('create', null) |
||||
} |
||||
|
||||
function handleEditOkr(nodeId = undefined) { |
||||
dialogOkr.value.close() |
||||
dialogOkrInfo.value.open('update', nodeId || searchForm.value.nodeId, 2) |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.peroid-select { |
||||
border-radius: 4px; |
||||
cursor: pointer; |
||||
&:hover { |
||||
border-color: var(--el-color-primary-light-5); |
||||
} |
||||
} |
||||
|
||||
.tree-org-node__text { |
||||
min-width: 200px; |
||||
min-height: 80px; |
||||
text-align: left; |
||||
font-size: 14px; |
||||
border-bottom: 1px solid #ccc; |
||||
padding: 5px; |
||||
} |
||||
.tip { |
||||
position: relative; |
||||
color: #aaa; |
||||
font-size: 0.875rem; |
||||
} |
||||
:deep(.el-progress-bar__innerText) { |
||||
display: block; |
||||
font-size: 0.75rem !important; |
||||
} |
||||
:deep(.el-overlay-dialog) { |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
} |
||||
</style> |
||||
@ -1,194 +0,0 @@ |
||||
<template> |
||||
<div class="flex-1 h-200px overflow-hidden"> |
||||
<el-table |
||||
ref="tableRef" |
||||
:data="okrList" |
||||
default-expand-all |
||||
row-key="id" |
||||
size="large" |
||||
height="100%" |
||||
@row-click="handleRowClick" |
||||
@expand-change="handleExpand" |
||||
> |
||||
<el-table-column label="目标/关键成果"> |
||||
<template #default="{ row, $index }"> |
||||
<span |
||||
v-if="!expandedRows[row.id]" |
||||
class="line1" |
||||
:style="{ |
||||
top: row.type == '目标' ? '30px' : 0, |
||||
height: getHeight(row, $index) |
||||
}" |
||||
></span> |
||||
<span v-if="row.type == '目标'"> |
||||
<el-tag type="success" size="small">目标</el-tag> |
||||
{{ row.name }} |
||||
</span> |
||||
<template v-else> |
||||
<span class="line2"></span> |
||||
<span> |
||||
<el-tag type="primary" size="small">关键成果</el-tag> |
||||
<span class="font-bold text-black" v-if="row.sourceName"> |
||||
【{{ row.sourceName }}】 |
||||
</span> |
||||
<span>{{ row.name }}</span> |
||||
<span v-if="row.resultType == 1">达 {{ row.targetValue }}</span> |
||||
</span> |
||||
<div class="flex items-center mt-10px ml-50px"> |
||||
<span>当前进度：</span> |
||||
<span v-if="row.isSys || !props.canEdit">{{ row.currentValue }}</span> |
||||
<el-input |
||||
v-else-if="row.resultType == 1" |
||||
v-model="row.currentValue" |
||||
clearable |
||||
size="small" |
||||
style="width: 200px" |
||||
/> |
||||
<el-radio-group |
||||
v-else-if="row.resultType == 2" |
||||
v-model="row.currentValue" |
||||
size="small" |
||||
> |
||||
<el-radio :value="1">是</el-radio> |
||||
<el-radio :value="0">否</el-radio> |
||||
</el-radio-group> |
||||
</div> |
||||
</template> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="progress" label="进度" width="200px"> |
||||
<template #default="{ row }"> |
||||
<el-progress :percentage="parseInt(row.progress) || 0" /> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="executorName" label="执行人" width="200px" /> |
||||
</el-table> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup name="OkrTable"> |
||||
import { updateOkrProgress } from '@/api/okr/okr' |
||||
|
||||
const emit = defineEmits(['rowClick']) |
||||
|
||||
const props = defineProps({ |
||||
canEdit: { |
||||
type: Boolean, |
||||
default: false |
||||
} |
||||
}) |
||||
|
||||
const okrList = ref([]) |
||||
const helpList = ref([]) |
||||
|
||||
function prepareData(list) { |
||||
if (!list || !Array.isArray(list) || list.length === 0) { |
||||
okrList.value = [] |
||||
return |
||||
} |
||||
helpList.value = [] |
||||
expandedRows.value = {} |
||||
okrList.value = list.map((item) => { |
||||
let obj = { |
||||
id: item.objectiveId, |
||||
name: item.objectiveName, |
||||
progress: item.progress, |
||||
executorName: item.executorName, |
||||
type: '目标' |
||||
} |
||||
helpList.value.push(obj) |
||||
if (item.keyResults) { |
||||
obj.children = item.keyResults.map((child) => { |
||||
let kr = { |
||||
id: child.keyResultId, |
||||
keyResultId: child.keyResultId, |
||||
objectiveId: child.objectiveId, |
||||
nodeId: child.nodeId, |
||||
isSys: child.isSys, |
||||
processId: child.id, |
||||
name: child.keyResultShowName, |
||||
progress: child.progress, |
||||
executorName: child.executorName, |
||||
type: '关键成果', |
||||
resultType: child.resultType, |
||||
targetValue: child.targetValue, |
||||
currentValue: Number(child.currentValue), |
||||
sourceName: child.sourceName |
||||
} |
||||
helpList.value.push(kr) |
||||
return kr |
||||
}) |
||||
} |
||||
return obj |
||||
}) |
||||
} |
||||
|
||||
defineExpose({ |
||||
prepareData, |
||||
updateProcess |
||||
}) |
||||
function getHeight(row, index) { |
||||
if (helpList.value.length - 1 == index || helpList.value[index + 1].type == '目标') { |
||||
return '22px' |
||||
} else { |
||||
return '100%' |
||||
} |
||||
} |
||||
|
||||
const expandedRows = ref({}) |
||||
function handleExpand(row, expanded) { |
||||
expandedRows.value[row.id] = !expanded |
||||
} |
||||
|
||||
function updateProcess(nodeId) { |
||||
return new Promise((resolve, reject) => { |
||||
try { |
||||
let arr = [] |
||||
okrList.value.map((item) => { |
||||
arr = [...arr, ...(item.children || []).map((it) => ({ ...it, id: it.processId }))] |
||||
}) |
||||
updateOkrProgress({ |
||||
nodeId, |
||||
keyResultProgressList: arr |
||||
}).then((resp) => { |
||||
resolve(resp) |
||||
}) |
||||
} catch (error) { |
||||
reject(error) |
||||
} |
||||
}) |
||||
} |
||||
|
||||
function handleRowClick(row) { |
||||
emit('rowClick', row) |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.line1 { |
||||
position: absolute; |
||||
width: 1px; |
||||
left: 21px; |
||||
border-left: 1px dashed #ccc; |
||||
} |
||||
.line2 { |
||||
position: absolute; |
||||
width: 26px; |
||||
height: 1px; |
||||
left: 21px; |
||||
top: 22px; |
||||
border-bottom: 1px dashed #ccc; |
||||
&::after { |
||||
position: absolute; |
||||
left: 25px; |
||||
top: -3px; |
||||
display: block; |
||||
width: 6px; |
||||
height: 6px; |
||||
border-radius: 6px; |
||||
margin: 0 auto; |
||||
border: 1px solid #ddd; |
||||
content: ''; |
||||
} |
||||
} |
||||
</style> |
||||
@ -1,77 +0,0 @@ |
||||
<template> |
||||
<div :style="{ height: `${height}px` }"> |
||||
<el-tabs tab-position="left" v-model="tabIndex" style="height: 100%"> |
||||
<el-tab-pane disabled name="-1"> |
||||
<template #label> |
||||
<div class="w-full"> |
||||
<div style="text-align: left; transform: translateX(-10px)">目标</div> |
||||
</div> |
||||
</template> |
||||
</el-tab-pane> |
||||
<el-tab-pane label="我负责的" name="0"> |
||||
<MyDuty v-if="tabIndex == 0" /> |
||||
</el-tab-pane> |
||||
<!-- <el-tab-pane label="待办事项" name="1"> |
||||
<WaitTarget v-if="tabIndex == 1" /> |
||||
</el-tab-pane> --> |
||||
<el-tab-pane label="全部目标" name="2"> |
||||
<AllTarget v-if="tabIndex == 2" /> |
||||
</el-tab-pane> |
||||
<el-tab-pane label="目标关系树" name="3"> |
||||
<ObjectList v-if="tabIndex == 3" /> |
||||
</el-tab-pane> |
||||
<el-tab-pane disabled v-if="employeeList.length > 0"> |
||||
<template #label> |
||||
<div class="w-full"> |
||||
<el-divider |
||||
direction="horizontal" |
||||
style="width: calc(100% + 10px) !important; transform: translateX(-10px)" |
||||
/> |
||||
<div style="text-align: left; transform: translateX(-10px)">成员</div> |
||||
</div> |
||||
</template> |
||||
</el-tab-pane> |
||||
<el-tab-pane |
||||
v-for="item in employeeList" |
||||
:key="item.userId" |
||||
:label="item.userName" |
||||
:name="item.userId" |
||||
> |
||||
<MySon v-if="tabIndex == item.userId" :userId="item.userId" /> |
||||
</el-tab-pane> |
||||
</el-tabs> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup name="OkrManagement"> |
||||
import AllTarget from './Components/AllTarget.vue' |
||||
import MyDuty from './Components/MyDuty.vue' |
||||
import MySon from './Components/MySon.vue' |
||||
import ObjectList from './Components/ObjectList.vue' |
||||
// import WaitTarget from './Components/WaitTarget.vue' |
||||
|
||||
import { getMyMemberList } from '@/api/okr/okr' |
||||
|
||||
const tabIndex = ref('0') |
||||
const height = ref(innerHeight - 115) |
||||
|
||||
const employeeList = ref([]) |
||||
onMounted(() => { |
||||
getMyMemberList().then((res) => { |
||||
employeeList.value = res |
||||
}) |
||||
}) |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
:deep(.el-tabs__content) { |
||||
height: 100%; |
||||
} |
||||
:deep(.el-tab-pane) { |
||||
height: 100%; |
||||
} |
||||
:deep(.el-popover__title) { |
||||
font-size: 0.875rem; |
||||
color: #aaa !important; |
||||
} |
||||
</style> |
||||
@ -1,305 +0,0 @@ |
||||
<template> |
||||
<div> |
||||
<!-- <el-affix postion="top" :offset="95" target="#app" 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> |
||||
@ -1,219 +0,0 @@ |
||||
<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> |
||||
@ -1,347 +0,0 @@ |
||||
<template> |
||||
<Dialog :title="title" v-model="show" :width="formType == 'create' ? '750px' : '1100px'"> |
||||
<div class="flex items-baseline"> |
||||
<el-form |
||||
:model="form" |
||||
ref="formRef" |
||||
:disabled="formType == 'do'" |
||||
:rules="rules" |
||||
label-width="80px" |
||||
class="flex-1" |
||||
> |
||||
<el-row :gutter="20"> |
||||
<el-col :span="24" :offset="0"> |
||||
<el-form-item label="标题" prop="title"> |
||||
<el-input v-model="form.title" placeholder="请输入待办标题" /> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="24"> |
||||
<el-form-item label="内容" prop="content"> |
||||
<Editor |
||||
v-model:modelValue="form.content" |
||||
height="400px" |
||||
:disabled="formType == 'do'" |
||||
/> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row :gutter="20"> |
||||
<el-col :span="12" :offset="0"> |
||||
<el-form-item label="优先级" prop="priority"> |
||||
<el-select v-model="form.priority" placeholder="选择优先级" filterable> |
||||
<el-option |
||||
v-for="item in props.priorityOptions" |
||||
:key="item.value" |
||||
:label="item.label" |
||||
:value="item.value" |
||||
/> |
||||
</el-select> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="12" :offset="0"> |
||||
<el-form-item label="完成状态" prop="completeStatus"> |
||||
<el-select v-model="form.completeStatus" placeholder="选择完成状态" filterable> |
||||
<el-option |
||||
v-for="item in props.statusOptions" |
||||
:key="item.value" |
||||
:label="item.label" |
||||
:value="item.value" |
||||
/> |
||||
</el-select> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row :gutter="20"> |
||||
<el-col :span="12" :offset="0"> |
||||
<el-form-item label="截止日期" prop="endDate"> |
||||
<el-date-picker |
||||
v-model="form.endDate" |
||||
type="date" |
||||
format="YYYY-MM-DD" |
||||
value-format="YYYY-MM-DD" |
||||
placeholder="选择日期时间" |
||||
/> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="12" :offset="0"> |
||||
<el-form-item label="执行人" prop="userList"> |
||||
<el-select |
||||
v-model="form.userList" |
||||
placeholder="选择执行人，可多选" |
||||
multiple |
||||
clearable |
||||
filterable |
||||
style="width: 100%" |
||||
> |
||||
<el-option |
||||
v-for="item in employeeOptions" |
||||
:key="item.id" |
||||
:disabled="item.status == 1" |
||||
:label="item.name" |
||||
:value="item.id" |
||||
/> |
||||
</el-select> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row :gutter="0"> |
||||
<el-col :span="8" :offset="0"> |
||||
<el-form-item prop="notifyType"> |
||||
<template #label> |
||||
<el-tooltip |
||||
content="新增待办时会立刻发送消息通知执行人，若后续无需再次提醒，频率可选择“不提醒”" |
||||
placement="top" |
||||
effect="dark" |
||||
> |
||||
<Icon icon="ep:info-filled" :size="12" /> |
||||
</el-tooltip> |
||||
<span>提醒频率</span> |
||||
</template> |
||||
<el-select v-model="form.notifyType" placeholder="选择提醒频率"> |
||||
<el-option label="不提醒" value="1" /> |
||||
<el-option label="单次提醒" value="2" /> |
||||
<el-option label="循环提醒" value="3" /> |
||||
</el-select> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="8" :offset="0" v-if="form.notifyType != 1"> |
||||
<el-form-item label="提醒时间" prop="remindTime" class="wait-form"> |
||||
<el-input |
||||
v-if="form.notifyType == 2" |
||||
v-model="form.notifyBeforeTime" |
||||
placeholder="输入小时数" |
||||
min="0" |
||||
type="number" |
||||
> |
||||
<template #prepend> |
||||
<span>提前</span> |
||||
</template> |
||||
<template #append> 小时 </template> |
||||
</el-input> |
||||
<el-input |
||||
v-else-if="form.notifyType == 3" |
||||
v-model="form.intervalTime" |
||||
placeholder="输入小时数" |
||||
min="0" |
||||
type="number" |
||||
> |
||||
<template #prepend> |
||||
<span>每</span> |
||||
</template> |
||||
<template #append> 小时 </template> |
||||
</el-input> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="8" :offset="0" v-if="form.notifyType == 3"> |
||||
<el-form-item label="首次提醒" prop="firstNotifyTime"> |
||||
<el-time-picker |
||||
v-model="form.firstNotifyTime" |
||||
format="HH:mm" |
||||
value-format="HH:mm" |
||||
style="width: 100%" |
||||
:picker-options="enableTimeRange" |
||||
placeholder="选择时间点" |
||||
/> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
</el-form> |
||||
<div v-if="formType != 'create'" class="w-350px ml-10px h-full"> |
||||
<div class="mb-10px" v-if="formType == 'do'"> |
||||
<Editor |
||||
v-model:modelValue="form.followUpContent" |
||||
height="150px" |
||||
:toolbarConfig="toolbarConfig" |
||||
/> |
||||
<el-button class="absolute" style="right: 20px; top: 195px" type="primary" @click="addDo"> |
||||
更新进度 |
||||
</el-button> |
||||
</div> |
||||
<div class="overflow-y-auto pl-15px" style="height: calc(100% - 50px)"> |
||||
<el-timeline class="ml-10px"> |
||||
<el-timeline-item |
||||
v-for="item in followList" |
||||
:key="item.followId" |
||||
placement="bottom" |
||||
:timestamp="formatDate(item.createTime, 'YYYY-MM-DD HH:mm:ss')" |
||||
color="#30d1fc" |
||||
> |
||||
<div class="font-bold" style="font-size: 16px">{{ item.followUserName }}</div> |
||||
<div v-dompurify-html="item.content"></div> |
||||
</el-timeline-item> |
||||
</el-timeline> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<template #footer v-if="formType != 'do'"> |
||||
<span> |
||||
<el-button @click="show = false">取 消</el-button> |
||||
<el-button type="primary" :disabled="formLoading" @click="handleSave">保 存</el-button> |
||||
</span> |
||||
</template> |
||||
</Dialog> |
||||
</template> |
||||
|
||||
<script setup name="DialogWait"> |
||||
import { |
||||
createWait, |
||||
updateWait, |
||||
getWaitDetail, |
||||
getFollowWaitPage, |
||||
followWait |
||||
} from '@/api/okr/wait' |
||||
import { getEmployeeSimpleList } from '@/api/pers/employee' |
||||
import { formatDate } from '@/utils/formatTime' |
||||
|
||||
const props = defineProps({ |
||||
priorityOptions: { |
||||
type: Array, |
||||
default: () => [ |
||||
{ label: '高', value: '1' }, |
||||
{ label: '中', value: '2' }, |
||||
{ label: '低', value: '3' } |
||||
] |
||||
}, |
||||
statusOptions: { |
||||
type: Array, |
||||
default: () => [ |
||||
{ label: '未完成', value: '1', tagType: 'warning' }, |
||||
{ label: '已关闭', value: '2', tagType: 'success' } |
||||
] |
||||
} |
||||
}) |
||||
|
||||
const { t } = useI18n() // 国际化 |
||||
const message = useMessage() // 消息弹窗 |
||||
|
||||
const toolbarConfig = { |
||||
toolbarKeys: [] |
||||
} |
||||
|
||||
const enableTimeRange = { |
||||
selectableRange: '07:00 - 22:00' |
||||
} |
||||
|
||||
const show = ref(false) |
||||
const title = ref('') |
||||
const formType = ref('create') |
||||
|
||||
const form = ref({}) |
||||
const formLoading = ref(false) |
||||
const rules = ref({ |
||||
title: [{ required: true, message: '请输入标题', trigger: 'blur' }], |
||||
endDate: [{ required: true, message: '请选择截止日期', trigger: 'change' }], |
||||
userList: [{ required: true, message: '请选择执行人', trigger: 'change' }] |
||||
}) |
||||
|
||||
const followList = ref([]) |
||||
|
||||
function open(type, id) { |
||||
show.value = true |
||||
title.value = { create: '新增待办', update: '修改待办', do: '更新待办进度' }[type] |
||||
formType.value = type |
||||
resetForm() |
||||
if (id) { |
||||
formLoading.value = true |
||||
try { |
||||
// 表单数据 |
||||
getWaitDetail(id).then((info) => { |
||||
form.value = { |
||||
...info, |
||||
endDate: formatDate(info.endDate, 'YYYY-MM-DD'), |
||||
userList: info.userIdList |
||||
} |
||||
}) |
||||
getFollowList(id) |
||||
} finally { |
||||
formLoading.value = false |
||||
} |
||||
} |
||||
getOptions() |
||||
} |
||||
|
||||
function getFollowList(id) { |
||||
// 跟进数据 |
||||
getFollowWaitPage({ |
||||
workId: id |
||||
}).then((data) => { |
||||
followList.value = data |
||||
}) |
||||
} |
||||
|
||||
function getOptions() { |
||||
getEmployeeSimpleList().then((data) => { |
||||
employeeOptions.value = data |
||||
}) |
||||
} |
||||
|
||||
function resetForm() { |
||||
form.value = { |
||||
title: undefined, |
||||
content: undefined, |
||||
priority: '1', |
||||
completeStatus: '1', |
||||
endDate: undefined, |
||||
userList: [], |
||||
notifyType: '3', |
||||
remindTime: 12, |
||||
firstNotifyTime: '09:00' |
||||
} |
||||
} |
||||
|
||||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗 |
||||
|
||||
const formRef = ref() |
||||
|
||||
/** 提交表单 */ |
||||
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调 |
||||
async function handleSave() { |
||||
// 校验表单 |
||||
if (!formRef.value) return |
||||
const valid = await formRef.value.validate() |
||||
if (!valid) return |
||||
// 提交请求 |
||||
formLoading.value = true |
||||
try { |
||||
if (formType.value === 'create') { |
||||
await createWait(form.value) |
||||
message.success(t('common.createSuccess')) |
||||
} else { |
||||
await updateWait(form.value) |
||||
message.success(t('common.updateSuccess')) |
||||
} |
||||
show.value = false |
||||
// 发送操作成功的事件 |
||||
emit('success') |
||||
} finally { |
||||
formLoading.value = false |
||||
} |
||||
} |
||||
|
||||
const employeeOptions = ref([]) |
||||
|
||||
function addDo() { |
||||
followWait({ |
||||
workId: form.value.workId, |
||||
content: form.value.followUpContent |
||||
}).then(() => { |
||||
message.success('跟进成功') |
||||
getFollowList(form.value.workId) |
||||
}) |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.wait-form { |
||||
:deep(.el-input-group__prepend) { |
||||
padding: 0 10px; |
||||
} |
||||
:deep(.el-input-group__append) { |
||||
padding: 0 10px; |
||||
} |
||||
:deep(.el-input__inner) { |
||||
text-align: center; |
||||
} |
||||
} |
||||
</style> |
||||
@ -1,297 +0,0 @@ |
||||
<template> |
||||
<div> |
||||
<el-form :model="searchForm" inline label-width="0" @submit.prevent="searchList"> |
||||
<el-form-item> |
||||
<el-input v-model="searchForm.title" placeholder="输入标题" /> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-select v-model="searchForm.priority" placeholder="选择优先级" clearable filterable> |
||||
<el-option |
||||
v-for="item in priorityOptions" |
||||
:key="item.value" |
||||
:label="item.label" |
||||
:value="item.value" |
||||
/> |
||||
</el-select> |
||||
</el-form-item> |
||||
<!-- <el-form-item> |
||||
<el-select |
||||
v-model="searchForm.completeStatus" |
||||
placeholder="选择完成状态" |
||||
clearable |
||||
filterable |
||||
> |
||||
<el-option |
||||
v-for="item in statusOptions" |
||||
:key="item.value" |
||||
:label="item.label" |
||||
:value="item.value" |
||||
/> |
||||
</el-select> |
||||
</el-form-item> --> |
||||
<el-form-item> |
||||
<el-button @click="searchList"> 搜索</el-button> |
||||
<el-button type="primary" @click="handleAdd"> 新增</el-button> |
||||
</el-form-item> |
||||
</el-form> |
||||
<el-tabs v-model="tabIndex" @tab-change="searchList"> |
||||
<el-tab-pane :name="1"> |
||||
<template #label> |
||||
<el-badge :value="tabCount.dayEndAgentWorkNum" :max="99" :show-zero="false"> |
||||
<el-tooltip content="截止日在今日及之前的未关闭事项" placement="top" effect="dark"> |
||||
<Icon icon="ep:question-filled" /> |
||||
</el-tooltip> |
||||
<span>今日截止</span> |
||||
</el-badge> |
||||
</template> |
||||
</el-tab-pane> |
||||
<el-tab-pane :name="2"> |
||||
<template #label> |
||||
<el-tooltip content="需要我执行的全部事项" placement="top" effect="dark"> |
||||
<Icon icon="ep:question-filled" /> |
||||
</el-tooltip> |
||||
<span>我的待办</span> |
||||
</template> |
||||
</el-tab-pane> |
||||
<el-tab-pane :name="3"> |
||||
<template #label> |
||||
<el-badge :value="tabCount.urgeAgentWorkNum" :max="99" :show-zero="false"> |
||||
<el-tooltip content="指派他人去办的事项" placement="top" effect="dark"> |
||||
<Icon icon="ep:question-filled" /> |
||||
</el-tooltip> |
||||
<span>催办事项</span> |
||||
</el-badge> |
||||
</template> |
||||
</el-tab-pane> |
||||
<!-- <el-tab-pane :name="4"> |
||||
<template #label> |
||||
<el-badge :value="tabCount.notifyNum" :max="99" :show-zero="false"> |
||||
<el-tooltip content="特指OKR中@我的消息" placement="top" effect="dark"> |
||||
<Icon icon="ep:question-filled" /> |
||||
</el-tooltip> |
||||
<span>通知我的</span> |
||||
</el-badge> |
||||
</template> |
||||
<el-table :data="mentionedList"> |
||||
<el-table-column type="index" width="50" /> |
||||
<el-table-column prop="content" label="okr标题" /> |
||||
<el-table-column prop="createUserName" label="创建人" /> |
||||
<el-table-column prop="createDate" label="创建日期" /> |
||||
<el-table-column fixed="right" label="操作" width="140"> |
||||
<template #default="{ row }"> |
||||
<el-button style="padding: 0" type="primary" text @click="handleShow(row)"> |
||||
查看 |
||||
</el-button> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
</el-tab-pane> --> |
||||
</el-tabs> |
||||
|
||||
<el-table v-if="tabIndex != 4" :data="tableList"> |
||||
<el-table-column type="index" width="50" /> |
||||
<el-table-column prop="title" label="标题" /> |
||||
<el-table-column prop="priority" label="优先级"> |
||||
<template #default="{ row }"> |
||||
<el-tag :type="priorityFilter(row.priority)"> |
||||
{{ priorityNameFilter(row.priority) }} |
||||
</el-tag> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="creatorName" label="创建人" /> |
||||
<el-table-column prop="createTime" label="创建日期" :formatter="dateFormatter" /> |
||||
<el-table-column prop="userNameStr" label="执行人" /> |
||||
<el-table-column prop="endDate" label="截止日期" :formatter="dateFormatter" /> |
||||
<el-table-column label="状态"> |
||||
<template #default="{ row }"> |
||||
<el-tag :type="statusFilter(row.completeStatus)">{{ |
||||
statusNameFilter(row.completeStatus) |
||||
}}</el-tag> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="completedDate" label="关闭日期" :formatter="dateFormatter" /> |
||||
<el-table-column fixed="right" label="操作" width="140"> |
||||
<template #default="{ row }"> |
||||
<el-button |
||||
v-if="row.userIdList.includes(currentUserId) && row.completeStatus == 1" |
||||
style="padding: 0; margin-right: 10px" |
||||
type="primary" |
||||
text |
||||
@click="handleDo(row)" |
||||
> |
||||
跟进 |
||||
</el-button> |
||||
<el-button |
||||
v-if="!row.userIdList.includes(currentUserId) && row.completeStatus == 1" |
||||
style="padding: 0; margin-right: 10px; margin-left: 0" |
||||
type="primary" |
||||
text |
||||
@click="handleNotice(row)" |
||||
> |
||||
催办 |
||||
</el-button> |
||||
<el-button |
||||
v-if="row.creator == currentUserId && row.completeStatus == 1" |
||||
style="padding: 0; margin-right: 10px; margin-left: 0" |
||||
type="primary" |
||||
text |
||||
@click="handleEdit(row)" |
||||
> |
||||
修改 |
||||
</el-button> |
||||
<el-button |
||||
v-if="row.creator == currentUserId && row.completeStatus == 1" |
||||
style="padding: 0; margin-right: 10px; margin-left: 0" |
||||
type="danger" |
||||
text |
||||
@click="handleDelete(row)" |
||||
> |
||||
删除 |
||||
</el-button> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
<Pagination |
||||
v-model:limit="searchForm.pageSize" |
||||
v-model:page="searchForm.pageNo" |
||||
:total="total" |
||||
@pagination="getList" |
||||
/> |
||||
|
||||
<DialogWait ref="waitDialogRef" @success="getList" /> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup name="WaitTarget"> |
||||
import { useUserStore } from '@/store/modules/user' |
||||
import { dateFormatter } from '@/utils/formatTime' |
||||
import DialogWait from './Components/DialogWait.vue' |
||||
|
||||
import { getWaitPage, deleteWait, getWaitCount, urgeWait } from '@/api/okr/wait' |
||||
|
||||
const route = useRoute() |
||||
const userStore = useUserStore() |
||||
const currentUserId = userStore.getUser.id |
||||
|
||||
const message = useMessage() |
||||
|
||||
const searchForm = ref({ |
||||
title: undefined, |
||||
completeStatus: undefined, |
||||
priority: undefined, |
||||
pageNo: 1, |
||||
pageSize: 50 |
||||
}) |
||||
|
||||
const statusOptions = [ |
||||
{ label: '未完成', value: 1, tagType: 'warning' }, |
||||
{ label: '已关闭', value: 2, tagType: 'success' } |
||||
] |
||||
|
||||
const statusFilter = (status) => { |
||||
return statusOptions.find((item) => item.value == status)?.tagType |
||||
} |
||||
|
||||
const statusNameFilter = (status) => { |
||||
return statusOptions.find((item) => item.value == status)?.label |
||||
} |
||||
|
||||
const priorityOptions = [ |
||||
{ label: '高', value: '1', tagType: 'danger' }, |
||||
{ label: '中', value: '2', tagType: 'warning' }, |
||||
{ label: '低', value: '3', tagType: 'info' } |
||||
] |
||||
|
||||
const priorityFilter = (priority) => { |
||||
return priorityOptions.find((item) => item.value == priority)?.tagType |
||||
} |
||||
|
||||
const priorityNameFilter = (priority) => { |
||||
return priorityOptions.find((item) => item.value == priority)?.label |
||||
} |
||||
|
||||
const tabIndex = ref(1) |
||||
|
||||
onMounted(() => { |
||||
if (route?.query?.type) { |
||||
tabIndex.value = Number(route.query.type) |
||||
} else { |
||||
tabIndex.value = 1 |
||||
} |
||||
searchList() |
||||
}) |
||||
|
||||
function searchList() { |
||||
searchForm.value.pageNo = 1 |
||||
getList() |
||||
} |
||||
|
||||
const tabCount = ref({ |
||||
dayEndAgentWorkNum: 0, |
||||
myAgentWorkNum: 0, |
||||
urgeAgentWorkNum: 0, |
||||
notifyNum: 0 |
||||
}) |
||||
function getTabCount() { |
||||
getWaitCount({ |
||||
title: searchForm.value.title, |
||||
priority: searchForm.value.priority |
||||
}).then((res) => { |
||||
tabCount.value = res |
||||
}) |
||||
} |
||||
|
||||
const loading = ref(false) |
||||
const tableList = ref([]) |
||||
// const mentionedList = ref([]) |
||||
const total = ref(0) |
||||
function getList() { |
||||
loading.value = true |
||||
try { |
||||
searchForm.value.queryType = tabIndex.value |
||||
getWaitPage(searchForm.value).then((res) => { |
||||
tableList.value = res.list |
||||
total.value = res.total |
||||
loading.value = false |
||||
}) |
||||
getTabCount() |
||||
} catch (error) {} |
||||
} |
||||
|
||||
function handleDo(row) { |
||||
waitDialogRef.value.open('do', row.workId) |
||||
} |
||||
|
||||
const waitDialogRef = ref() |
||||
function handleAdd() { |
||||
waitDialogRef.value.open('create') |
||||
} |
||||
|
||||
function handleEdit(row) { |
||||
waitDialogRef.value.open('update', row.workId) |
||||
} |
||||
|
||||
function handleDelete(row) { |
||||
message.confirm('确定删除待办事项吗？').then(() => { |
||||
deleteWait(row.workId).then(() => { |
||||
message.success('删除成功') |
||||
getList() |
||||
}) |
||||
}) |
||||
} |
||||
|
||||
function handleNotice(row) { |
||||
message.confirm('即将发送微信通知提醒执行人，是否继续？').then(() => { |
||||
urgeWait(row.workId).then(() => { |
||||
message.success('发送成功') |
||||
}) |
||||
}) |
||||
} |
||||
|
||||
// function handleShow(row) { |
||||
// console.log(row) |
||||
// message.success('打开okr详情页') |
||||
// } |
||||
</script> |
||||
|
||||
<style lang="scss" scoped></style> |
||||
Loading…
Reference in new issue