You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
602 lines
19 KiB
602 lines
19 KiB
<template>
|
|
<div>
|
|
<el-row class="mb-10px flex justify-between items-start">
|
|
<el-tree-select
|
|
v-model="searchForm.nodeId"
|
|
:data="peroidList"
|
|
:props="defaultProps"
|
|
:render-after-expand="false"
|
|
:default-expand-all="false"
|
|
check-strictly
|
|
style="width: 300px"
|
|
@change="nodeChange"
|
|
/>
|
|
<div class="flex justify-end flex-1">
|
|
<el-button type="info" @click="handleExport">导出</el-button>
|
|
<el-popover
|
|
ref="countRef"
|
|
placement="left"
|
|
:title="`${currentNode?.nodeName} 数据汇总`"
|
|
trigger="click"
|
|
width="500px"
|
|
v-model:visible="showCountPop"
|
|
>
|
|
<template #reference><el-button>数据汇总</el-button></template>
|
|
<el-table :data="countInfo" stripe>
|
|
<el-table-column prop="keyResultShowName" label="项目名称" />
|
|
<el-table-column prop="currentValue" label="当前值" width="90" />
|
|
<el-table-column prop="targetValue" label="预期值" width="90" />
|
|
<el-table-column label="完成度" width="150">
|
|
<template #default="{ row }">
|
|
<el-progress
|
|
:percentage="parseInt((row.currentValue / row.targetValue) * 100) || 0"
|
|
:color="customColors"
|
|
/>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-popover>
|
|
<el-button type="primary" @click="openDrawer(1, currentNode.nodeId, currentNode.nodeName)">
|
|
节点笔谈
|
|
</el-button>
|
|
</div>
|
|
</el-row>
|
|
|
|
<el-table
|
|
id="okrAnalysisTable"
|
|
:data="originList"
|
|
border
|
|
:span-method="objectSpanMethod"
|
|
:show-summary="!!tableKeywords"
|
|
@cell-click="handleClickCell"
|
|
>
|
|
<el-table-column prop="objectInfo.objectiveName" label="目标">
|
|
<template #default="{ row }">
|
|
{{ row.objectInfo.objectiveName }}
|
|
</template>
|
|
</el-table-column>
|
|
<!-- <el-table-column prop="objectiveId" label="占比" width="100px">
|
|
<template #default> 0 </template>
|
|
</el-table-column> -->
|
|
<el-table-column prop="keyResultShowName">
|
|
<template #header>
|
|
<div class="flex items-center justify-center">
|
|
<div class="flex-1 mr-10px">
|
|
<el-input
|
|
v-if="showTableSearch"
|
|
v-model="tableKeywords"
|
|
placeholder="请输入关键字"
|
|
size="small"
|
|
style="width: 100%"
|
|
clearable
|
|
@change="handleTableFilter"
|
|
/>
|
|
<div v-else>关键成果</div>
|
|
</div>
|
|
<el-button type="primary" size="small" @click="handleFilterTableClick">
|
|
{{ showTableSearch ? '取消' : '筛选' }}
|
|
</el-button>
|
|
</div>
|
|
</template>
|
|
<template #default="{ row }">
|
|
{{ row.sourceName ? `【${row.sourceName}】` : '' }} {{ row.keyResultShowName }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="targetValue" label="目标值" width="100px" />
|
|
<el-table-column prop="currentValue" label="当前进度" width="100px" />
|
|
<el-table-column label="开始日期" width="120px">
|
|
<template #default>
|
|
{{ currentNode.startTime }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="status" label="完成状态" width="100px">
|
|
<template #default="{ row }">
|
|
<el-tag v-if="row.currentValue >= row.targetValue" type="success">完成</el-tag>
|
|
<el-tag v-else type="danger">未完成</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="muis" label="差值" width="100px">
|
|
<template #default="{ row }">
|
|
<span
|
|
:style="{
|
|
color: row.targetValue >= row.currentValue ? 'red' : '#333',
|
|
'font-weight': row.targetValue >= row.currentValue ? 'bold' : '500'
|
|
}"
|
|
>
|
|
{{ parseInt(row.targetValue - row.currentValue) }}
|
|
</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="complete" label="完成度" width="200px">
|
|
<template #default="{ row }">
|
|
<el-progress :percentage="parseInt(row.progress)" :color="customColors" />
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="endTime" label="结束日期" width="120px">
|
|
<template #default>
|
|
{{ currentNode.endTime }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="objectInfo.progress" label="目标完成度" width="100px" align="center">
|
|
<template #default="{ row }">
|
|
{{ parseInt(row.objectInfo.progress) }}%
|
|
<!-- <el-progress :percentage="parseInt(row.objectInfo.progress)" :color="customColors" /> -->
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<el-drawer
|
|
v-if="showDrawer"
|
|
v-model="showDrawer"
|
|
:title="drawerTitle"
|
|
size="60vw"
|
|
direction="rtl"
|
|
append-to-body
|
|
destroy-on-close
|
|
>
|
|
<el-tabs v-model="currentType" @tab-click="searchCommentList()">
|
|
<el-tab-pane
|
|
v-for="item in commentTypeOptions"
|
|
:key="item.id"
|
|
:label="item.label"
|
|
:name="item.id"
|
|
>
|
|
<div v-if="item.id == currentType">
|
|
<div v-if="addNewComment">
|
|
<div class="flex justify-between items-center">
|
|
<div>
|
|
<el-button size="small" @click="addNewComment = false"> 取消 </el-button>
|
|
<el-button type="primary" size="small" @click="handleSaveComment">
|
|
发布
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
<div class="mt-10px" v-if="addNewComment">
|
|
<Editor
|
|
v-model:modelValue="form.commentValue"
|
|
height="300px"
|
|
:toolbarConfig="toolbarConfig"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<el-button v-else type="primary" size="small" @click="handleInsertComment">
|
|
新增
|
|
</el-button>
|
|
<div
|
|
v-for="(it, index) in commentList"
|
|
:key="it.commentId"
|
|
class="border-b-1"
|
|
style="padding: 10px 5px"
|
|
>
|
|
<div
|
|
class="flex items-center justify-between overflow-hidden text-16px"
|
|
style="line-height: 30px"
|
|
>
|
|
<div class="flex items-center">
|
|
<el-avatar
|
|
shape="circle"
|
|
style="
|
|
background-color: var(--el-color-primary-light-3);
|
|
width: 30px;
|
|
height: 30px;
|
|
"
|
|
fit="fill"
|
|
>
|
|
<span class="text-12px">{{ it.creatorName.slice(-2) }}</span>
|
|
</el-avatar>
|
|
<div class="ml-10px text-16px">{{ it.creatorName }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="ml-10px" v-dompurify-html="it.content"></div>
|
|
<div
|
|
class="ml-10px mt-10px flex items-center justify-between text-12px"
|
|
style="line-height: 20px; color: #aaa"
|
|
>
|
|
<div class="flex items-center">
|
|
<div class="flex items-center mr-50px">
|
|
<el-button link @click="good(it)">
|
|
<Icon
|
|
icon="fa:thumbs-o-up"
|
|
:size="16"
|
|
:color="it.currentUserIsLike ? 'var(--el-color-primary)' : '#333'"
|
|
/>
|
|
</el-button>
|
|
<span
|
|
class="ml-5px"
|
|
:style="{
|
|
color: it.currentUserIsLike ? 'var(--el-color-primary)' : '#333'
|
|
}"
|
|
>{{ it.likeCount }}</span
|
|
>
|
|
</div>
|
|
<div class="flex items-center mr-50px">
|
|
<el-button link @click="showChildComment(index)">
|
|
<Icon icon="ep:chat-dot-square" :size="16" color="#333" />
|
|
</el-button>
|
|
<span class="ml-5px" style="color: #333">{{ it.commentCount }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="ml-10px text-13px text-gray-400">
|
|
{{ formatDate(it.createTime, 'YYYY-MM-DD HH:mm') }}
|
|
</div>
|
|
</div>
|
|
<!-- 评论 -->
|
|
<div
|
|
v-if="showCommentIndex == index"
|
|
class="bg-gray-100 pl-10px pr-10px pt-5px pb-5px"
|
|
style="margin: 10px 10px 0 10px; border-radius: 4px"
|
|
label="笔谈"
|
|
>
|
|
<div
|
|
v-for="subComment in it.children.sort((a, b) => a.createTime - b.createTime)"
|
|
:key="subComment.commentId"
|
|
class="text-14px"
|
|
style="line-height: 24px"
|
|
>
|
|
<span class="font-bold">{{ subComment.creatorName }}：</span>
|
|
<span>
|
|
{{ subComment.content }}
|
|
</span>
|
|
</div>
|
|
<div class="mt-10px relative">
|
|
<!-- <el-input
|
|
v-model="form.commentValue"
|
|
placeholder="请输入评论"
|
|
type="textarea"
|
|
:autosize="{ minRows: 4 }"
|
|
clearable
|
|
size="small"
|
|
style="width: 100%"
|
|
/> -->
|
|
<el-mention
|
|
v-model="form.commentValue"
|
|
type="textarea"
|
|
:autosize="{ minRows: 4 }"
|
|
:options="employeeOptions"
|
|
style="width: 100%"
|
|
size="small"
|
|
whole
|
|
placeholder="请输入内容"
|
|
@select="handleMention"
|
|
>
|
|
<template #label="scope">
|
|
<div class="flex items-center justify-between h-full">
|
|
<span class="text-14px text-dark-700">{{ scope.item.name }}</span>
|
|
<span class="text-12px text-gray-400">{{ scope.item.dept }}</span>
|
|
</div>
|
|
</template>
|
|
</el-mention>
|
|
<el-button
|
|
type="primary"
|
|
size="small"
|
|
style="position: absolute; right: 2px; bottom: 2px"
|
|
@click="handleSendCommnet(index)"
|
|
>
|
|
发布
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</el-drawer>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup name="Analysis">
|
|
import { listToTree, findNode } from '@/utils/tree'
|
|
import { formatDate } from '@/utils/formatTime'
|
|
import { getAllNodeTree, getAllOkrPage, getOkrStatisticsTotal } from '@/api/okr/okr'
|
|
import { getEmployeeSimpleList } from '@/api/pers/employee'
|
|
import { cloneDeep } from 'lodash-es'
|
|
import {
|
|
getCommentTypeOptions,
|
|
createComment,
|
|
getCommentPage,
|
|
likeComment
|
|
} from '@/api/okr/comment'
|
|
import { exportTableWithVue } from '@/utils'
|
|
|
|
const message = useMessage()
|
|
const defaultProps = {
|
|
value: 'nodeId',
|
|
label: 'nodeName',
|
|
children: 'children'
|
|
}
|
|
const searchForm = ref({
|
|
nodeId: undefined
|
|
})
|
|
|
|
const currentNode = ref(undefined)
|
|
const showDrawer = ref(false)
|
|
const drawerTitle = ref('详情')
|
|
|
|
const customColors = [
|
|
{ color: 'rgb(196, 86.4, 86.4)', percentage: 20 },
|
|
{ color: 'rgb(196, 86.4, 86.4)', percentage: 40 },
|
|
{ color: 'rgb(237.5, 189.9, 118.5)', percentage: 60 },
|
|
{ color: 'rgb(159.5, 206.5, 255)', percentage: 80 },
|
|
{ color: 'rgb(179, 224.5, 156.5)', percentage: 100 }
|
|
]
|
|
|
|
const peroidList = ref([])
|
|
|
|
const showTableSearch = ref(false)
|
|
const tableKeywords = ref('')
|
|
|
|
handleSearchPeroid()
|
|
getOptions()
|
|
|
|
// 当前是否是叶子节点
|
|
// 如果不是叶子节点，则表格数据不可修改
|
|
const isCurrentLeafNode = ref(false)
|
|
|
|
function handleSearchPeroid() {
|
|
getAllNodeTree().then((resp) => {
|
|
if (resp.nodeId) {
|
|
peroidList.value = listToTree(resp?.tree || [], {
|
|
id: 'nodeId',
|
|
pid: 'parentId',
|
|
children: 'children'
|
|
})
|
|
nodeChange(resp.nodeId)
|
|
currentNode.value = (resp.tree || []).find((item) => item.nodeId === resp.nodeId)
|
|
} else {
|
|
message.warning('请先创建节点数据')
|
|
}
|
|
})
|
|
}
|
|
const showCountPop = ref(false)
|
|
function nodeChange(nodeId) {
|
|
if (nodeId) {
|
|
showTableSearch.value = false
|
|
tableKeywords.value = ''
|
|
searchForm.value.nodeId = nodeId
|
|
getOkrList()
|
|
getCountInfo()
|
|
currentNode.value = findNode(peroidList.value, (node) => {
|
|
return node.nodeId == nodeId
|
|
})
|
|
searchForm.value.creatorId = currentNode.value.creatorId
|
|
if (!currentNode.value.children || currentNode.value.children.length == 0) {
|
|
isCurrentLeafNode.value = true
|
|
} else {
|
|
isCurrentLeafNode.value = false
|
|
}
|
|
}
|
|
}
|
|
|
|
const originList = ref([])
|
|
const defaultTableList = ref([])
|
|
const spanObj = ref([])
|
|
function getOkrList() {
|
|
getAllOkrPage(searchForm.value).then((resp) => {
|
|
originList.value = []
|
|
spanObj.value = []
|
|
if (resp && resp.length) {
|
|
resp.map((o) => {
|
|
if (o.keyResults && o.keyResults.length) {
|
|
const arr = o.keyResults.map((k, index) => {
|
|
spanObj.value.push(index == 0 ? o.keyResults.length : 0)
|
|
const obj = cloneDeep(o)
|
|
delete obj.keyResults
|
|
return {
|
|
...k,
|
|
objectInfo: obj
|
|
}
|
|
})
|
|
originList.value = [...originList.value, ...arr]
|
|
}
|
|
})
|
|
defaultTableList.value = [...originList.value]
|
|
}
|
|
})
|
|
}
|
|
|
|
const countInfo = ref([])
|
|
function getCountInfo() {
|
|
getOkrStatisticsTotal({ nodeId: searchForm.value.nodeId }).then(async (resp) => {
|
|
countInfo.value = resp || []
|
|
// await nextTick(() =)
|
|
showCountPop.value = true
|
|
})
|
|
}
|
|
|
|
function objectSpanMethod({ column, rowIndex }) {
|
|
if (['目标', '目标完成度'].includes(column.label)) {
|
|
let _row = spanObj.value[rowIndex]
|
|
let _col = _row > 0 ? 1 : 0
|
|
return {
|
|
rowspan: _row,
|
|
colspan: _col
|
|
}
|
|
}
|
|
}
|
|
|
|
function handleClickCell(row, column) {
|
|
if (column.property === 'keyResultShowName') {
|
|
openDrawer(2, row.keyResultId, `${row.sourceName} ${row.keyResultShowName}`)
|
|
} else if (column.property === 'objectInfo.objectiveName') {
|
|
openDrawer(3, row.objectInfo.objectiveId, row.objectInfo.objectiveName)
|
|
}
|
|
}
|
|
|
|
const commentTypeOptions = ref([])
|
|
const currentType = ref(1) // 默认评论类型为1
|
|
function getOptions() {
|
|
getCommentTypeOptions().then((resp) => {
|
|
commentTypeOptions.value = (resp || []).sort((pre, cur) => pre.sort - cur.sort)
|
|
currentType.value = resp[0].id
|
|
})
|
|
getEmployeeSimpleList({ status: 0 }).then((resp) => {
|
|
employeeOptions.value = resp.map((item) => ({
|
|
...item,
|
|
label: item.name,
|
|
value: item.name
|
|
}))
|
|
})
|
|
}
|
|
|
|
const commentList = ref([])
|
|
const commentInfo = ref({
|
|
businessType: undefined,
|
|
businessId: undefined,
|
|
commentType: undefined,
|
|
pageSize: -1
|
|
})
|
|
function openDrawer(type, id, name) {
|
|
showDrawer.value = true
|
|
drawerTitle.value = `【${name}】笔谈`
|
|
commentInfo.value = {
|
|
businessType: type,
|
|
businessId: id,
|
|
commentType: currentType.value,
|
|
pageSize: -1
|
|
}
|
|
searchCommentList()
|
|
}
|
|
|
|
function searchCommentList() {
|
|
commentInfo.value.commentType = currentType.value
|
|
getCommentPage(commentInfo.value).then((resp) => {
|
|
// commentList.value = resp.list
|
|
commentList.value = listToTree(resp.list, {
|
|
id: 'commentId',
|
|
pid: 'parentId',
|
|
children: 'children'
|
|
})
|
|
})
|
|
}
|
|
|
|
const showCommentIndex = ref(-1)
|
|
function showChildComment(index) {
|
|
showCommentIndex.value = showCommentIndex.value == index ? -1 : index
|
|
}
|
|
|
|
function good(item) {
|
|
likeComment(item.commentId).then(() => {
|
|
message.success('点赞成功')
|
|
searchCommentList()
|
|
})
|
|
}
|
|
|
|
const form = ref({
|
|
commentValue: '',
|
|
mentionedUserIdList: []
|
|
})
|
|
const employeeOptions = ref([])
|
|
|
|
function handleMention(item) {
|
|
form.value.mentionedUserIdList.push(item.id)
|
|
}
|
|
|
|
function handleSendCommnet(idx) {
|
|
try {
|
|
// 过滤掉删除的用户，方式为遍历mentionedUserIdList，查找评论中是否有对应的用户名
|
|
const userList = [...form.value.mentionedUserIdList]
|
|
const arr = []
|
|
userList.map((item) => {
|
|
if (form.value.commentValue.indexOf(`@${item.name}`) != -1) {
|
|
arr.push(item.id)
|
|
// 然后移除对应的用户名，防止有多个
|
|
form.value.commentValue = form.value.commentValue.replace(`@${item.name}`, '')
|
|
}
|
|
})
|
|
const data = {
|
|
businessType: commentInfo.value.businessType,
|
|
businessId: commentInfo.value.businessId,
|
|
commentType: currentType.value,
|
|
content: form.value.commentValue,
|
|
mentionedUserIdList: arr,
|
|
parentId: commentList.value[idx].commentId
|
|
}
|
|
createComment(data)
|
|
.then(() => {
|
|
message.success('创建成功')
|
|
searchCommentList()
|
|
})
|
|
.finally(() => {
|
|
form.value.commentValue = ''
|
|
})
|
|
} catch (error) {
|
|
console.log(error)
|
|
message.error('创建失败')
|
|
}
|
|
}
|
|
|
|
const addNewComment = ref(false)
|
|
function handleInsertComment() {
|
|
addNewComment.value = true
|
|
form.value.commentValue = commentTypeOptions.value.find(
|
|
(item) => item.id == currentType.value
|
|
).remark
|
|
}
|
|
|
|
const toolbarConfig = {
|
|
toolbarKeys: [
|
|
'bold', // 加粗
|
|
'underline', // 下划线
|
|
'italic', // 斜体
|
|
'color', // 文字颜色
|
|
'bgColor', // 背景色
|
|
'fontSize', // 字号
|
|
'bulletedList', // 无序列表
|
|
'numberedList', // 有序列表
|
|
'insertTable', // 插入表格
|
|
'insertLink', // 插入链接
|
|
'undo' // 撤销
|
|
]
|
|
}
|
|
|
|
function handleSaveComment() {
|
|
addNewComment.value = false
|
|
try {
|
|
const data = {
|
|
businessType: commentInfo.value.businessType,
|
|
businessId: commentInfo.value.businessId,
|
|
commentType: currentType.value,
|
|
content: form.value.commentValue,
|
|
mentionedUserIdList: form.value.mentionedUserIdList
|
|
}
|
|
createComment(data)
|
|
.then(() => {
|
|
message.success('创建成功')
|
|
searchCommentList()
|
|
})
|
|
.finally(() => {
|
|
form.value.commentValue = ''
|
|
})
|
|
} catch (error) {
|
|
message.error('创建失败')
|
|
}
|
|
}
|
|
|
|
function handleExport() {
|
|
exportTableWithVue('#okrAnalysisTable', `OKR分析报表-${currentNode.value.nodeName}`)
|
|
}
|
|
|
|
function handleTableFilter() {
|
|
console.log('tableKeywords', tableKeywords.value)
|
|
|
|
if (tableKeywords.value) {
|
|
originList.value = defaultTableList.value.filter(
|
|
(item) =>
|
|
item.keyResultName.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>
|
|
|