Compare commits

..

2 Commits

Author SHA1 Message Date
7c7bf51518 Merge branch 'main' of http://114.55.169.15:3000/qiushanhe/ss-oa-manage-web into dev-cl
# Conflicts:
#	.env.base
#	yarn.lock
2025-03-26 23:12:53 +08:00
65dae80239 1 2025-03-26 23:10:46 +08:00
15 changed files with 561 additions and 707 deletions

View File

@@ -4,10 +4,10 @@ VITE_NODE_ENV=development
VITE_DEV=true VITE_DEV=true
# 请求路径 # 请求路径
#VITE_BASE_URL='http://118.31.23.45:48080'
# VITE_BASE_URL='http://114.55.169.15:48080'
VITE_BASE_URL='http://localhost:48080' VITE_BASE_URL='http://localhost:48080'
# VITE_BASE_URL='http://47.98.161.246:48080'
# VITE_BASE_URL='http://114.55.169.15:48080'
# 上传路径 # 上传路径
VITE_UPLOAD_URL='http://47.98.161.246:48080/admin-api/system/file/upload' VITE_UPLOAD_URL='http://47.98.161.246:48080/admin-api/system/file/upload'

View File

@@ -4,8 +4,10 @@ VITE_NODE_ENV=production
VITE_DEV=false VITE_DEV=false
# 请求路径 # 请求路径
#VITE_BASE_URL='http://47.98.161.246:48080'
VITE_BASE_URL='http://localhost:48080' VITE_BASE_URL='http://localhost:48080'
# 上传路径 # 上传路径
VITE_UPLOAD_URL='http://47.98.161.246:48080/admin-api/system/file/upload' VITE_UPLOAD_URL='http://47.98.161.246:48080/admin-api/system/file/upload'

View File

@@ -1,5 +0,0 @@
{
"i18n-ally.localesPaths": [
"src/locales"
]
}

View File

@@ -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 }
})
}

View File

@@ -5,8 +5,8 @@ export const createOkrNode = (data) => {
return request.post({ return request.post({
url: '/admin-api/okr/node/add', url: '/admin-api/okr/node/add',
data, data,
isSubmitForm: true isSubmitForm: true,
// headers: { 'instance-id': 1016 } headers: { 'instance-id': 1016 }
}) })
} }
@@ -14,8 +14,8 @@ export const createOkrNode = (data) => {
export const updateOkrNode = (data) => { export const updateOkrNode = (data) => {
return request.put({ return request.put({
url: '/admin-api/okr/node/update', url: '/admin-api/okr/node/update',
data data,
// headers: { 'instance-id': 1016 } headers: { 'instance-id': 1016 }
}) })
} }
@@ -23,8 +23,8 @@ export const updateOkrNode = (data) => {
export const getOkrNodeDetail = (nodeId) => { export const getOkrNodeDetail = (nodeId) => {
return request.get({ return request.get({
url: '/admin-api/okr/node/get', url: '/admin-api/okr/node/get',
params: { nodeId } params: { nodeId },
// headers: { 'instance-id': 1016 } headers: { 'instance-id': 1016 }
}) })
} }
@@ -32,8 +32,8 @@ export const getOkrNodeDetail = (nodeId) => {
export const getMyNodeTree = (params) => { export const getMyNodeTree = (params) => {
return request.get({ return request.get({
url: '/admin-api/okr/node/my/list', url: '/admin-api/okr/node/my/list',
params params,
// headers: { 'instance-id': 1016 } headers: { 'instance-id': 1016 }
}) })
} }
@@ -41,8 +41,8 @@ export const getMyNodeTree = (params) => {
export const getMyOkrPage = (params) => { export const getMyOkrPage = (params) => {
return request.get({ return request.get({
url: '/admin-api/okr/node/my/object/list', url: '/admin-api/okr/node/my/object/list',
params params,
// headers: { 'instance-id': 1016 } headers: { 'instance-id': 1016 }
}) })
} }
@@ -50,8 +50,8 @@ export const getMyOkrPage = (params) => {
export const getAllNodeTree = (params) => { export const getAllNodeTree = (params) => {
return request.get({ return request.get({
url: '/admin-api/okr/node/all/list', url: '/admin-api/okr/node/all/list',
params params,
// headers: { 'instance-id': 1016 } headers: { 'instance-id': 1016 }
}) })
} }
@@ -59,52 +59,7 @@ export const getAllNodeTree = (params) => {
export const getAllOkrPage = (params) => { export const getAllOkrPage = (params) => {
return request.get({ return request.get({
url: '/admin-api/okr/node/all/object/list', url: '/admin-api/okr/node/all/object/list',
params params,
// headers: { 'instance-id': 1016 } 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 }
}) })
} }

View File

@@ -5,8 +5,8 @@ export const createWait = (data) => {
return request.post({ return request.post({
url: '/admin-api/okr/agent-work/create', url: '/admin-api/okr/agent-work/create',
data, data,
isSubmitForm: true isSubmitForm: true,
// headers: { 'instance-id': 1016 } headers: { 'instance-id': 1016 }
}) })
} }
@@ -14,8 +14,8 @@ export const createWait = (data) => {
export const updateWait = (data) => { export const updateWait = (data) => {
return request.put({ return request.put({
url: '/admin-api/okr/agent-work/update', url: '/admin-api/okr/agent-work/update',
data data,
// headers: { 'instance-id': 1016 } headers: { 'instance-id': 1016 }
}) })
} }
@@ -23,8 +23,8 @@ export const updateWait = (data) => {
export const getWaitPage = (params) => { export const getWaitPage = (params) => {
return request.get({ return request.get({
url: '/admin-api/okr/agent-work/page', url: '/admin-api/okr/agent-work/page',
params params,
// headers: { 'instance-id': 1016 } headers: { 'instance-id': 1016 }
}) })
} }
@@ -32,8 +32,8 @@ export const getWaitPage = (params) => {
export const getWaitDetail = (id) => { export const getWaitDetail = (id) => {
return request.get({ return request.get({
url: '/admin-api/okr/agent-work/get', url: '/admin-api/okr/agent-work/get',
params: { id } params: { id },
// headers: { 'instance-id': 1016 } headers: { 'instance-id': 1016 }
}) })
} }
@@ -41,8 +41,8 @@ export const getWaitDetail = (id) => {
export const deleteWait = (id) => { export const deleteWait = (id) => {
return request.delete({ return request.delete({
url: '/admin-api/okr/agent-work/delete', url: '/admin-api/okr/agent-work/delete',
params: { id } params: { id },
// headers: { 'instance-id': 1016 } headers: { 'instance-id': 1016 }
}) })
} }
@@ -50,8 +50,8 @@ export const deleteWait = (id) => {
export const urgeWait = (workId) => { export const urgeWait = (workId) => {
return request.get({ return request.get({
url: '/admin-api/okr/agent-work/urge', url: '/admin-api/okr/agent-work/urge',
params: { workId } params: { workId },
// headers: { 'instance-id': 1016 } headers: { 'instance-id': 1016 }
}) })
} }
@@ -60,8 +60,8 @@ export const followWait = (data) => {
return request.post({ return request.post({
url: '/admin-api/okr/agent-work-follow/create', url: '/admin-api/okr/agent-work-follow/create',
data, data,
isSubmitForm: true isSubmitForm: true,
// headers: { 'instance-id': 1016 } headers: { 'instance-id': 1016 }
}) })
} }
@@ -69,15 +69,15 @@ export const followWait = (data) => {
export const getFollowWaitPage = (params) => { export const getFollowWaitPage = (params) => {
return request.get({ return request.get({
url: '/admin-api/okr/agent-work-follow/list', url: '/admin-api/okr/agent-work-follow/list',
params params,
// headers: { 'instance-id': 1016 } headers: { 'instance-id': 1016 }
}) })
} }
export const getWaitCount = (params) => { export const getWaitCount = (params) => {
return request.get({ return request.get({
url: '/admin-api/okr/agent-work/getAgentWorkNum', url: '/admin-api/okr/agent-work/getAgentWorkNum',
params params,
// headers: { 'instance-id': 1016 } headers: { 'instance-id': 1016 }
}) })
} }

View File

@@ -32,10 +32,9 @@
<el-form-item label="负责人" prop="leaderUserId"> <el-form-item label="负责人" prop="leaderUserId">
<el-select v-model="formData.leaderUserId" clearable placeholder="请输入负责人"> <el-select v-model="formData.leaderUserId" clearable placeholder="请输入负责人">
<el-option <el-option
v-for="item in employeeOptions" v-for="item in userList"
:key="item.id" :key="item.id"
:disabled="item.status == 1" :label="item.nickname"
:label="item.name"
:value="item.id" :value="item.id"
/> />
</el-select> </el-select>
@@ -56,26 +55,6 @@
<el-input-number v-model="formData.sort" :min="0" /> <el-input-number v-model="formData.sort" :min="0" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12" :offset="0">
<el-form-item label="开通系统" prop="instanceIds">
<el-select
v-model="formData.instanceIds"
placeholder="选择开通系统"
multiple
collapse-tags
clearable
filterable
>
<el-option
v-for="item in instanceIdsOptions"
:key="item.instanceId"
:label="item.instanceName"
:disabled="item.status == 1"
:value="item.instanceId"
/>
</el-select>
</el-form-item>
</el-col>
</el-row> </el-row>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="24" :offset="0"> <el-col :span="24" :offset="0">
@@ -94,9 +73,8 @@
<script lang="ts" name="SystemDeptForm" setup> <script lang="ts" name="SystemDeptForm" setup>
import { defaultProps, handleTree } from '@/utils/tree' import { defaultProps, handleTree } from '@/utils/tree'
import * as DeptApi from '@/api/system/dept' import * as DeptApi from '@/api/system/dept'
import { getEmployeeSimpleList } from '@/api/pers/employee' import * as UserApi from '@/api/system/user'
import { CommonStatusEnum } from '@/utils/constants' import { CommonStatusEnum } from '@/utils/constants'
import { getSimpleAppList } from '@/api/system/app'
const { t } = useI18n() // 国际化 const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗 const message = useMessage() // 消息弹窗
@@ -112,8 +90,7 @@ const formData = ref({
sort: 1, sort: 1,
leaderUserId: undefined, leaderUserId: undefined,
status: CommonStatusEnum.ENABLE, status: CommonStatusEnum.ENABLE,
remark: undefined, remark: undefined
instanceIds: undefined
}) })
const formRules = reactive<any>({ const formRules = reactive<any>({
parentId: [{ required: true, message: '上级部门不能为空', trigger: 'blur' }], parentId: [{ required: true, message: '上级部门不能为空', trigger: 'blur' }],
@@ -127,8 +104,7 @@ const formRules = reactive<any>({
}) })
const formRef = ref() // 表单 Ref const formRef = ref() // 表单 Ref
const deptTree = ref() // 树形结构 const deptTree = ref() // 树形结构
const employeeOptions = ref<any>([]) // 用户列表 const userList = ref<UserApi.UserVO[]>([]) // 用户列表
const instanceIdsOptions = ref<any>([]) // 实例ids
/** 打开弹窗 */ /** 打开弹窗 */
const open = async (type: string, id?: number) => { const open = async (type: string, id?: number) => {
@@ -146,13 +122,7 @@ const open = async (type: string, id?: number) => {
} }
} }
// 获得用户列表 // 获得用户列表
getEmployeeSimpleList().then((data) => { userList.value = await UserApi.getSimpleUserList()
employeeOptions.value = data
})
//实例
getSimpleAppList().then((data) => {
instanceIdsOptions.value = data
})
// 获得部门树 // 获得部门树
await getTree() await getTree()
} }
@@ -193,8 +163,7 @@ const resetForm = () => {
sort: 1, sort: 1,
leaderUserId: undefined, leaderUserId: undefined,
status: CommonStatusEnum.ENABLE, status: CommonStatusEnum.ENABLE,
remark: undefined, remark: undefined
instanceIds: undefined
} }
formRef.value?.resetFields() formRef.value?.resetFields()
} }

View File

@@ -22,15 +22,8 @@
<el-table v-loading="loading" :data="list" row-key="id" default-expand-all border> <el-table v-loading="loading" :data="list" row-key="id" default-expand-all border>
<el-table-column prop="name" label="部门名称" /> <el-table-column prop="name" label="部门名称" />
<el-table-column prop="leaderUserName" label="负责人" width="120" /> <el-table-column prop="leaderUserName" label="负责人" width="120" />
<el-table-column prop="instanceNames" label="业务系统" width="200" /> <el-table-column prop="sort" label="排序" width="200" />
<el-table-column prop="sort" label="排序" width="80" /> <el-table-column prop="status" label="状态" width="100" />
<el-table-column prop="status" label="状态" width="100">
<template #default="scope">
<el-tag :type="scope.row.status == 0 ? 'success' : 'danger'">
{{ scope.row.status == 0 ? '正常' : '停用' }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="创建时间" prop="createTime" width="180" :formatter="dateFormatter" /> <el-table-column label="创建时间" prop="createTime" width="180" :formatter="dateFormatter" />
<el-table-column label="操作" class-name="fixed-width" width="160"> <el-table-column label="操作" class-name="fixed-width" width="160">
<template #default="scope"> <template #default="scope">

View File

@@ -7,34 +7,23 @@
:data="peroidList" :data="peroidList"
:props="defaultProps" :props="defaultProps"
:render-after-expand="false" :render-after-expand="false"
:default-expand-all="false" default-expand-all
check-strictly
style="width: 400px" style="width: 400px"
@change="nodeChange" @change="getOkrList"
/> />
<el-button class="ml-10px" type="primary" @click="handleAddNode">新建节点</el-button> <el-button class="ml-10px" type="primary" @click="handleAddNode">新建节点</el-button>
</el-row> </el-row>
<el-row> <el-row>
<el-button type="info" @click="handleShowOkr(searchForm.nodeId)"> 节点详情 </el-button> <el-button type="warning" @click="handleEditOkr(searchForm.nodeId)">
<el-button
type="warning"
v-if="currentUserId == searchForm.creatorId"
@click="handleEditOkr(searchForm.nodeId)"
>
修改当前节点 修改当前节点
</el-button> </el-button>
<el-button <el-button type="success" @click="handleUpdateProcess">更新进度</el-button>
type="success"
v-if="searchForm.executor?.includes(currentUserId)"
@click="handleUpdateProcess"
>更新进度</el-button
>
</el-row> </el-row>
</div> </div>
<OkrTable ref="okrTableRef" :canEdit="isCurrentLeafNode" /> <OkrTable ref="okrTableRef" />
<DialogOkr ref="dialogOkr" @edit="handleEditOkr" /> <DialogOkr ref="dialogOkr" @edit="handleEditOkr" />
<DialogOkrInfo ref="dialogOkrInfo" @success="handleSearchPeroid" /> <DialogOkrInfo ref="dialogOkrInfo" />
</div> </div>
</template> </template>
@@ -44,12 +33,9 @@ import DialogOkrInfo from './DialogOkrInfo.vue'
import DialogOkr from './DialogOkr.vue' import DialogOkr from './DialogOkr.vue'
import { getAllNodeTree, getAllOkrPage } from '@/api/okr/okr' import { getAllNodeTree, getAllOkrPage } from '@/api/okr/okr'
import { listToTree, findNode } from '@/utils/tree' import { listToTree } from '@/utils/tree'
import { useUserStore } from '@/store/modules/user'
const message = useMessage() const message = useMessage()
const userStore = useUserStore()
const currentUserId = userStore.getUser.id
const defaultProps = { const defaultProps = {
value: 'nodeId', value: 'nodeId',
@@ -64,11 +50,9 @@ const searchForm = ref({
const peroidList = ref([]) const peroidList = ref([])
onMounted(() => {
handleSearchPeroid() handleSearchPeroid()
})
// 当前是否是叶子节点
// 如果不是叶子节点,则表格数据不可修改
const isCurrentLeafNode = ref(false)
function handleSearchPeroid() { function handleSearchPeroid() {
getAllNodeTree().then((resp) => { getAllNodeTree().then((resp) => {
@@ -77,21 +61,9 @@ function handleSearchPeroid() {
pid: 'parentId', pid: 'parentId',
children: 'children' children: 'children'
}) })
nodeChange(resp.nodeId) searchForm.value.nodeId = resp.nodeId
})
}
function nodeChange(nodeId) {
searchForm.value.nodeId = nodeId
getOkrList() getOkrList()
const currentNode = findNode(peroidList.value, (node) => {
return node.nodeId == nodeId
}) })
if (!currentNode.children || currentNode.children.length == 0) {
isCurrentLeafNode.value = true
} else {
isCurrentLeafNode.value = false
}
} }
function getOkrList() { function getOkrList() {
@@ -114,19 +86,14 @@ function handleEditOkr() {
} }
function handleUpdateProcess() { function handleUpdateProcess() {
okrTableRef.value.updateProcess(searchForm.value.nodeId).then(() => { message.success('更新进度成功')
message.success('更新成功')
getOkrList() getOkrList()
})
} }
const dialogOkr = ref(null) const dialogOkr = ref(null)
function handleShowOkr(id) { // function handleShowOkr(row) {
dialogOkr.value.open({ // dialogOkr.value.open(row.id)
nodeId: id, // }
canEdit: isCurrentLeafNode.value
})
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

View File

@@ -18,11 +18,11 @@
<span class="text-14px ml-0.25">ork落地</span> <span class="text-14px ml-0.25">ork落地</span>
<div class="ml-20px text-14px"> <div class="ml-20px text-14px">
<span>节点</span> <span>节点</span>
<span>{{ nodeInfo.allNodeName }}</span> <span>寻驾全年目标 -> 1</span>
</div> </div>
</div> </div>
<div class="flex items-center"> <div class="flex items-center">
<el-button v-if="nodeInfo.creatorId == currentUserId" link @click="emit('edit')"> <el-button link @click="emit('edit')">
<el-tooltip content="编辑" placement="top" effect="dark"> <el-tooltip content="编辑" placement="top" effect="dark">
<Icon icon="ep:edit" :size="16" /> <Icon icon="ep:edit" :size="16" />
</el-tooltip> </el-tooltip>
@@ -43,36 +43,36 @@
<div class="detail-basic-title"> <div class="detail-basic-title">
<div class="basic-title-item"> <div class="basic-title-item">
<div class="basic-title-label">创建人</div> <div class="basic-title-label">创建人</div>
<div class="basic-title-value">{{ nodeInfo.creator }}</div> <div class="basic-title-value">张三</div>
</div> </div>
<div class="basic-title-item"> <div class="basic-title-item">
<div class="basic-title-label">执行人</div> <div class="basic-title-label">执行人</div>
<div class="basic-title-value">{{ nodeInfo.executorName || '无' }}</div> <div class="basic-title-value">张三李四</div>
</div> </div>
<div class="basic-title-item"> <div class="basic-title-item">
<div class="basic-title-label">目标数</div> <div class="basic-title-label">目标数</div>
<div class="basic-title-value">{{ okrList.length }}</div> <div class="basic-title-value">3</div>
</div> </div>
<div class="basic-title-item" style="min-width: 200px"> <div class="basic-title-item" style="min-width: 200px">
<div class="basic-title-label">总体进度</div> <div class="basic-title-label">总体进度</div>
<el-progress :percentage="parseInt(nodeInfo.progress) || 0" :stroke-width="8" /> <el-progress :percentage="60" :stroke-width="8" />
</div> </div>
</div> </div>
<div class="flex detail-basic-info"> <div class="flex detail-basic-info">
<span>开始日期{{ nodeInfo.startTime }}</span> <span>开始日期2025-01-01</span>
<span>截止日期{{ nodeInfo.endTime }}</span> <span>截止日期2025-01-31</span>
<span>最新更新时间{{ nodeInfo.updateTime }}</span> <span>最新更新时间2025-01-15</span>
</div> </div>
</div> </div>
<div class="flex" style="position: relative; flex: 1; height: 100px"> <div class="flex" style="position: relative; flex: 1; height: 100px">
<el-tabs v-model="workIndex" style="flex: 1"> <el-tabs v-model="workIndex" style="flex: 1">
<el-tab-pane label="目标/关键成果" name="okr"> <el-tab-pane label="目标/关键成果" name="okr">
<div class="content-wrap"> <div class="content-wrap">
<OkrTable ref="okrTableRef" :canEdit="canEdit" /> <OkrTable ref="okrTableRef" />
</div> </div>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
<el-button v-if="canEdit" class="sav-btn" type="primary" @click="handleSaveProcess"> <el-button class="sav-btn" type="primary" @click="handleSaveProcess">
保存并更新 保存并更新
</el-button> </el-button>
</div> </div>
@@ -82,43 +82,43 @@
<el-tab-pane label="子节点" name="subNode"> <el-tab-pane label="子节点" name="subNode">
<div class="overflow-y-auto" style="height: calc(100% - 50px)"> <div class="overflow-y-auto" style="height: calc(100% - 50px)">
<div <div
v-for="item in childNodeList" v-for="index in 12"
:key="item.nodeId" :key="index"
class="border-b-1 child-item" class="border-b-1 child-item"
style="padding: 10px 5px; cursor: pointer" style="padding: 10px 5px; cursor: pointer"
@click="handleChildItem(item)" @click="handleChildItem"
> >
<div <div
class="flex justify-between items-center overflow-hidden text-16px" class="flex justify-between items-center overflow-hidden text-16px"
style="line-height: 30px" style="line-height: 30px"
> >
<div class="child-label">节点{{ item.nodeName }}</div> <div class="child-label">节点子节点{{ index }}</div>
<el-progress <el-progress
type="line" type="line"
:percentage="parseInt(item.progress) || 0" :percentage="0"
:stroke-width="6" :stroke-width="6"
style="width: 120px" style="width: 120px"
/> />
</div> </div>
<div class="ml-10px flex items-center text-13px" style="line-height: 30px"> <div class="ml-10px flex items-center text-13px" style="line-height: 30px">
<span>目标数</span> <span>目标数</span>
<span style="color: #aaa">{{ item.objectiveNum }}</span> <span style="color: #aaa">4</span>
<el-divider direction="vertical" style="margin: 0 20px" /> <el-divider direction="vertical" style="margin: 0 20px" />
<div <div
class="flex-1 overflow-hidden h-30px" class="flex-1 overflow-hidden h-30px"
style="text-overflow: ellipsis; white-space: nowrap" style="text-overflow: ellipsis; white-space: nowrap"
> >
<span>执行人</span> <span>执行人</span>
<span style="color: #aaa">{{ item.executorName || '无' }}</span> <span style="color: #aaa">张三李四王二</span>
</div> </div>
</div> </div>
<div <div
class="ml-10px flex items-center text-12px" class="ml-10px flex items-center text-12px"
style="line-height: 20px; color: #aaa" style="line-height: 20px; color: #aaa"
> >
<span>开始日期{{ item.startTime }}</span> <span>开始日期2025-01-01</span>
<el-divider direction="vertical" style="margin: 0 20px" /> <el-divider direction="vertical" style="margin: 0 20px" />
<span>截止日期{{ item.endTime }}</span> <span>截止日期2025-01-31</span>
</div> </div>
</div> </div>
</div> </div>
@@ -134,12 +134,11 @@
style="width: 120px" style="width: 120px"
@change="getCommentTemplate" @change="getCommentTemplate"
> >
<el-option <el-option label="总结" :value="1" />
v-for="it in commentTypeOptions" <el-option label="日报" :value="2" />
:label="it.label" <el-option label="周报" :value="3" />
:value="it.id" <el-option label="月报" :value="4" />
:key="it.id" <!-- <el-option label="评论" :value="5" disabled /> -->
/>
</el-select> </el-select>
<div v-if="addNewComment"> <div v-if="addNewComment">
@@ -159,12 +158,7 @@
:toolbarConfig="toolbarConfig" :toolbarConfig="toolbarConfig"
/> />
</div> </div>
<div <div v-for="index in 12" :key="index" class="border-b-1" style="padding: 10px 5px">
v-for="(it, index) in commentList"
:key="it.commentId"
class="border-b-1"
style="padding: 10px 5px"
>
<div <div
class="flex items-center justify-between overflow-hidden text-16px" class="flex items-center justify-between overflow-hidden text-16px"
style="line-height: 30px" style="line-height: 30px"
@@ -179,42 +173,28 @@
" "
fit="fill" fit="fill"
> >
<span class="text-12px">{{ it.creatorName.slice(-2) }}</span> <span class="text-12px">门庆</span>
</el-avatar> </el-avatar>
<div class="ml-10px text-16px">{{ it.creatorName }}</div> <div class="ml-10px text-16px">西门庆</div>
</div> </div>
<div class="ml-10px text-13px text-gray-400">01-01 12:15</div>
</div> </div>
<div class="ml-10px" v-dompurify-html="it.content"></div> <div class="ml-10px" v-dompurify-html="commentListVal"></div>
<div <div
class="ml-10px mt-10px flex items-center justify-between text-12px" class="ml-10px mt-10px flex items-center text-12px"
style="line-height: 20px; color: #aaa" style="line-height: 20px; color: #aaa"
> >
<div class="flex items-center">
<div class="flex items-center mr-50px"> <div class="flex items-center mr-50px">
<el-button link @click="good(it)"> <el-button link @click="good(index)">
<Icon <Icon icon="fa:thumbs-o-up" :size="16" />
icon="fa:thumbs-o-up"
:size="16"
:color="it.currentUserIsLike ? 'var(--el-color-primary)' : '#333'"
/>
</el-button> </el-button>
<span <span class="ml-5px">6</span>
class="ml-5px"
:style="{
color: it.currentUserIsLike ? 'var(--el-color-primary)' : '#333'
}"
>{{ it.likeCount }}</span
>
</div> </div>
<div class="flex items-center mr-50px"> <div class="flex items-center mr-50px">
<el-button link @click="showComment(index)"> <el-button link @click="showComment(index)">
<Icon icon="ep:chat-dot-square" :size="16" color="#333" /> <Icon icon="ep:chat-dot-square" :size="16" />
</el-button> </el-button>
<span class="ml-5px" style="color: #333">{{ it.commentCount }}</span> <span class="ml-5px">1</span>
</div>
</div>
<div class="ml-10px text-13px text-gray-400">
{{ formatDate(it.createTime, 'YYYY-MM-DD HH:mm') }}
</div> </div>
</div> </div>
<!-- 评论 --> <!-- 评论 -->
@@ -224,19 +204,22 @@
style="margin: 10px 10px 0 10px; border-radius: 4px" style="margin: 10px 10px 0 10px; border-radius: 4px"
label="评论" label="评论"
> >
<div <div class="text-14px" style="line-height: 24px">
v-for="subComment in it.children.sort((a, b) => a.createTime - b.createTime)" <span class="font-bold">武大郎</span>
:key="subComment.commentId"
class="text-14px"
style="line-height: 24px"
>
<span class="font-bold">{{ subComment.creatorName }}</span>
<span> <span>
{{ subComment.content }} 大官人你要脆饼不要卖完最后一个我要回家了我家婆娘熬了鸡汤给我补身子
</span> </span>
</div> </div>
<div class="text-14px" style="line-height: 24px">
<span class="font-bold">潘金莲</span>
<span>西门大官人我要给你生猴子(^_-)</span>
</div>
<div class="text-14px" style="line-height: 24px">
<span class="font-bold">武二郎</span>
<span>如同天上降魔主真乃人间太岁</span>
</div>
<div class="mt-10px relative"> <div class="mt-10px relative">
<!-- <el-input <el-input
v-model="form.commentValue" v-model="form.commentValue"
placeholder="请输入评论" placeholder="请输入评论"
type="textarea" type="textarea"
@@ -244,30 +227,12 @@
clearable clearable
size="small" size="small"
style="width: 100%" 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 <el-button
type="primary" type="primary"
size="small" size="small"
style="position: absolute; right: 2px; bottom: 2px" style="position: absolute; right: 2px; bottom: 2px"
@click="handleSendCommnet(index)" @click="handleSendCommnet"
> >
发布 发布
</el-button> </el-button>
@@ -279,16 +244,23 @@
<el-tab-pane label="进度历史" name="history"> <el-tab-pane label="进度历史" name="history">
<div class="overflow-y-auto pl-15px" style="height: calc(100% - 50px)"> <div class="overflow-y-auto pl-15px" style="height: calc(100% - 50px)">
<el-timeline class="ml-10px"> <el-timeline class="ml-10px">
<el-timeline-item <el-timeline-item placement="bottom" timestamp="2025-01-20" color="#30d1fc">
v-for="item in nodeRecords" <div>张三</div>
: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"> <div class="mt-10px text-14px" style="line-height: 24px; color: #666">
{{ item.content }} 进度变化40% -> 60%
节点进度是读取目标进度计算的目标进度根据关键成果计算关键成果在提交跟新时会有
</div>
</el-timeline-item>
<el-timeline-item placement="bottom" timestamp="2025-01-15" color="#30d1fc">
<div>张三</div>
<div class="mt-10px text-14px" style="line-height: 24px; color: #666">
更新节点
</div>
</el-timeline-item>
<el-timeline-item placement="bottom" timestamp="2025-01-01" color="#30d1fc">
<div>张三</div>
<div class="mt-10px text-14px" style="line-height: 24px; color: #666">
创建节点
</div> </div>
</el-timeline-item> </el-timeline-item>
</el-timeline> </el-timeline>
@@ -302,27 +274,11 @@
</template> </template>
<script setup name="DialogOkr"> <script setup name="DialogOkr">
import { formatDate } from '@/utils/formatTime'
import OkrTable from './OkrTable.vue' 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']) const emit = defineEmits(['edit'])
const show = ref(false) const show = ref(false)
const canEdit = ref(false)
const toolbarConfig = { const toolbarConfig = {
toolbarKeys: [ toolbarKeys: [
@@ -342,63 +298,123 @@ const toolbarConfig = {
const workIndex = ref('okr') const workIndex = ref('okr')
const okrList = ref([]) const okrList = ref([])
const childNodeList = ref([])
const sideIndex = ref('subNode') const sideIndex = ref('subNode')
const okrTableRef = ref(null) const okrTableRef = ref(null)
const nodeInfo = ref({})
const nodeRecords = ref([]) async function open(id) {
const commentTypeOptions = ref([])
function open(curNode) {
canEdit.value = curNode.canEdit
nodeInfo.value.nodeId = curNode.nodeId
// 获取数据详情
searchInfo(curNode)
show.value = true show.value = true
// 获取数据详情
console.log(id)
okrList.value = [
{
id: 1,
name: '销售成交额达到1000万总体成交率15%',
process: 60,
type: 'object',
children: [
{
id: 11,
type: 'keyresult',
channelName: '抖音',
target: '线索目标',
targetType: 'value',
isSystem: true,
targetNum: 10000,
targetValue: false,
currentNum: 5000,
currentValue: false,
process: 60,
users: '张三、李四'
},
{
id: 12,
type: 'keyresult',
channelName: '抖音',
target: '成交数',
isSystem: true,
targetType: 'value',
targetNum: 2500,
targetValue: false,
currentNum: 500,
currentValue: false,
process: 60,
users: '张三、李四'
} }
]
const employeeOptions = ref([]) },
{
function searchInfo(curNode) { id: 2,
try { name: '运营消耗预算控制在20万以内获得10万条线索',
getOkrNodeDetail(curNode.nodeId).then((resp) => { process: 80,
nodeInfo.value = { type: 'object',
...resp, children: [
executor: resp.executor || [] {
id: 21,
type: 'keyresult',
target: '本月抖音运营投入相较上月少10%',
targetType: 'radio',
isSystem: false,
targetNum: 0,
targetValue: false,
currentNum: 0,
currentValue: false,
process: 0,
users: ''
},
{
id: 22,
type: 'keyresult',
target: '累计输出作品',
process: 15,
users: '',
isSystem: false,
targetType: 'value',
targetNum: 200,
targetValue: false,
currentNum: 30,
currentValue: false
} }
canEdit.value = ]
canEdit.value && currentUserId == nodeInfo.value.executor.includes(currentUserId) },
if (resp.objectives) { {
okrList.value = resp.objectives.map((item) => ({ id: 3,
...item, name: '目标3',
keyResults: item.keyResults || [] process: 40,
})) type: 'object',
} else { children: [
okrList.value = [] {
id: 31,
type: 'keyresult',
target: '关键成果1',
process: 100,
users: '',
isSystem: false,
targetType: 'radio',
targetNum: 0,
targetValue: false,
currentNum: 0,
currentValue: true
},
{
id: 22,
type: 'keyresult',
target: '关键成果2',
process: 15,
users: '',
isSystem: false,
targetType: 'value',
targetNum: 200,
targetValue: false,
currentNum: 30,
currentValue: false
} }
childNodeList.value = [...resp.children] ]
}
]
nextTick(() => { nextTick(() => {
okrTableRef.value.prepareData(okrList.value) 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() { function close() {
@@ -407,96 +423,42 @@ function close() {
defineExpose({ open, close }) defineExpose({ open, close })
function handleMention(item) {
form.value.mentionedUserIdList.push(item.id)
}
function handleSaveProcess() { function handleSaveProcess() {
okrTableRef.value.updateProcess(nodeInfo.value.nodeId).then(() => { console.log(okrList.value)
message.success('更新成功')
searchInfo()
})
} }
function handleChildItem(item) { function handleChildItem() {
const arr = item.executor || [] console.log('handleChildItem')
const isExecutor = arr.includes(currentUserId)
canEdit.value = isExecutor && (!item.children || item.children.length == 0)
searchInfo(item)
} }
const addNewComment = ref(false) const addNewComment = ref(false)
const form = ref({ const form = ref({
commentValue: '', commentValue: '',
commentType: undefined, commentType: 1
mentionedUserIdList: []
}) })
function handleInsertComment() { function handleInsertComment() {
addNewComment.value = true addNewComment.value = true
const defaultComment = commentTypeOptions.value[0]
if (defaultComment) {
form.value = { form.value = {
commentType: defaultComment.id, commentValue: '',
mentionedUserIdList: [] commentType: 1
}
} }
getCommentTemplate() getCommentTemplate()
} }
function 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> &nbsp; &nbsp;</p><h2 style=\"text-align: start;\">二、数据统计</h2><ol><li>呼出电话数:</li><li>有效沟通数:</li><li>销售成果</li></ol><h2 style=\"text-align: start;\">三、问题与改进方案</h2><p><br></p>` form.value.commentValue = `<h2 style=\"text-align: start;\">一、工作概况</h2><p> &nbsp; &nbsp;</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() { function handleSaveComment() {
addNewComment.value = false addNewComment.value = false
try {
const data = {
businessType: 1,
businessId: nodeInfo.value.nodeId,
contentType: 1,
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) { const commentListVal = ref(
likeComment(item.commentId).then(() => { `<h2 style=\"text-align: start;\">一、工作概况</h2><p> &nbsp; 刷牙洗脸吃饭穿鞋出门开车上班捣台球&nbsp;</p><h2 style=\"text-align: start;\">二、数据统计</h2><ol><li>呼出电话数666</li><li>有效沟通数123</li><li>销售成果今日成交20本月成交120距离目标还差888</li></ol><h2 style=\"text-align: start;\">三、问题与改进方案</h2><p>无<br></p>`
message.success('点赞成功') )
searchCommentList()
}) function good(index) {
console.log(index)
} }
const showCommentIndex = ref(-1) const showCommentIndex = ref(-1)
@@ -504,37 +466,8 @@ function showComment(index) {
showCommentIndex.value = showCommentIndex.value == index ? -1 : index showCommentIndex.value = showCommentIndex.value == index ? -1 : index
} }
function handleSendCommnet(idx) { function handleSendCommnet() {
try { console.log(form.value.commentValue)
// 过滤掉删除的用户方式为遍历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,
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> </script>

View File

@@ -1,5 +1,6 @@
<template> <template>
<el-dialog <el-dialog
v-if="show"
v-model="show" v-model="show"
width="900px" width="900px"
class="dialog-okr" class="dialog-okr"
@@ -18,7 +19,7 @@
</div> </div>
</template> </template>
<template #default> <template #default>
<div class="dialog-okr-body" v-loading="formLoading"> <div class="dialog-okr-body">
<el-form :model="form" ref="formRef" :rules="rules" label-width="0"> <el-form :model="form" ref="formRef" :rules="rules" label-width="0">
<el-row :gutter="10"> <el-row :gutter="10">
<el-col :span="4" :offset="0"> <el-col :span="4" :offset="0">
@@ -177,13 +178,12 @@
allow-create allow-create
:reserve-keyword="false" :reserve-keyword="false"
class="flex-1 w-150px" class="flex-1 w-150px"
@change="krChange(i, index)"
> >
<el-option <el-option
v-for="it in krOptions" v-for="it in krOptions"
:key="it.value" :key="it.keyResultId"
:label="it.label" :label="it.keyResultName"
:value="it.value" :value="it.keyResultId"
/> />
</el-select> </el-select>
<el-button type="danger" text @click="removeKR(i, index)"> <el-button type="danger" text @click="removeKR(i, index)">
@@ -331,8 +331,7 @@ import {
getOkrNodeDetail, getOkrNodeDetail,
createOkrNode, createOkrNode,
updateOkrNode, updateOkrNode,
getAllOkrPage, getAllOkrPage
getDefaultOkrOptions
} from '@/api/okr/okr' } from '@/api/okr/okr'
import { listToTree } from '@/utils/tree' import { listToTree } from '@/utils/tree'
import { getEmployeeSimpleList } from '@/api/pers/employee' import { getEmployeeSimpleList } from '@/api/pers/employee'
@@ -378,6 +377,7 @@ const defaultProps = {
} }
const sourceOptions = ref([]) const sourceOptions = ref([])
const objectList = ref([]) const objectList = ref([])
function open(type, val) { function open(type, val) {
show.value = true show.value = true
title.value = type == 'update' ? '修改Okr' : '新增Okr' title.value = type == 'update' ? '修改Okr' : '新增Okr'
@@ -393,9 +393,6 @@ function open(type, val) {
children: 'children' children: 'children'
}) })
}) })
getDefaultOkrOptions().then((resp) => {
krOptions.value = resp
})
if (val) { if (val) {
formLoading.value = true formLoading.value = true
try { try {
@@ -492,18 +489,6 @@ function getLastDayOfMonth(year, month) {
return date.getDate() 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() { async function handleSave() {
// 校验表单 // 校验表单
if (!formRef.value) return if (!formRef.value) return
@@ -529,19 +514,19 @@ async function handleSave() {
)}-${getLastDayOfMonth(defaultTime.getFullYear(), month)}`, )}-${getLastDayOfMonth(defaultTime.getFullYear(), month)}`,
children: [ children: [
{ {
nodeName: `${month + 1}月第1周`, nodeName: `${month + 1}月第1周`,
children: [] children: []
}, },
{ {
nodeName: `${month + 1}月第2周`, nodeName: `${month + 1}月第2周`,
children: [] children: []
}, },
{ {
nodeName: `${month + 1}月第3周`, nodeName: `${month + 1}月第3周`,
children: [] children: []
}, },
{ {
nodeName: `${month + 1}月第4`, nodeName: `${month + 1}月第3`,
children: [] children: []
} }
] ]

View File

@@ -237,7 +237,7 @@ const rules = ref({
const followList = ref([]) const followList = ref([])
function open(type, id) { async function open(type, id) {
show.value = true show.value = true
title.value = { create: '新增待办', update: '修改待办', do: '更新待办进度' }[type] title.value = { create: '新增待办', update: '修改待办', do: '更新待办进度' }[type]
formType.value = type formType.value = type

View File

@@ -7,18 +7,17 @@
:data="peroidList" :data="peroidList"
:props="defaultProps" :props="defaultProps"
:render-after-expand="false" :render-after-expand="false"
:default-expand-all="false" default-expand-all
style="width: 400px" style="width: 400px"
@change="getOkrList" @change="handleSearchOkr"
/> />
</el-row> </el-row>
<el-row> <el-row>
<el-button type="info" @click="handleShowOkr(searchForm.nodeId)"> 节点详情 </el-button>
<el-button type="success" @click="handleUpdateProcess">更新进度</el-button> <el-button type="success" @click="handleUpdateProcess">更新进度</el-button>
</el-row> </el-row>
</div> </div>
<OkrTable ref="okrTableRef" canEdit /> <OkrTable ref="okrTableRef" @row-click="handleShowOkr" />
<DialogOkr ref="dialogOkr" @edit="handleEditOkr" /> <DialogOkr ref="dialogOkr" @edit="handleEditOkr" />
<DialogOkrInfo ref="dialogOkrInfo" /> <DialogOkrInfo ref="dialogOkrInfo" />
</div> </div>
@@ -28,9 +27,6 @@
import OkrTable from './OkrTable.vue' import OkrTable from './OkrTable.vue'
import DialogOkrInfo from './DialogOkrInfo.vue' import DialogOkrInfo from './DialogOkrInfo.vue'
import DialogOkr from './DialogOkr.vue' import DialogOkr from './DialogOkr.vue'
import { listToTree } from '@/utils/tree'
import { getMyNodeTree, getMyOkrPage } from '@/api/okr/okr'
const message = useMessage() const message = useMessage()
@@ -42,34 +38,185 @@ const defaultProps = {
const okrTableRef = ref(null) const okrTableRef = ref(null)
const searchForm = ref({ const searchForm = ref({
nodeId: undefined nodeId: 4
}) })
const peroidList = ref([]) const peroidList = ref([])
// onMounted(() => { onMounted(() => {
handleSearchPeroid() handleSearchPeroid()
// })
function handleSearchPeroid() {
getMyNodeTree().then((resp) => {
peroidList.value = listToTree(resp.tree, {
id: 'nodeId',
pid: 'parentId',
children: 'children'
})
searchForm.value.nodeId = resp.nodeId
getOkrList() getOkrList()
}) })
async function handleSearchPeroid() {
peroidList.value = [
{
nodeId: 1,
nodeName: '2025年寻驾okr',
startDate: '2022-01-01',
endDate: '2022-01-31',
children: [
{
nodeId: 2,
nodeName: '1月',
startDate: '2022-01-01',
endDate: '2022-01-31',
children: [
{
nodeId: 3,
nodeName: '第1周',
startDate: '2022-01-01',
endDate: '2022-01-31',
children: [
{
nodeId: 4,
nodeName: '仇山河',
startDate: '2022-01-01',
endDate: '2022-01-31'
}
]
},
{
nodeId: 5,
nodeName: '第2周',
startDate: '2022-02-01',
endDate: '2022-02-28',
children: [
{
nodeId: 6,
nodeName: '仇山河',
startDate: '2022-02-01',
endDate: '2022-02-28'
}
]
}
]
}
]
}
]
} }
function getOkrList() { // function handleSelectPeroid(row) {
getMyOkrPage(searchForm.value).then((resp) => { // searchForm.value.peroidName = row.name
const list = resp // searchForm.value.nodeId = row.id
// handleSearchOkr()
// }
function handleSearchOkr() {
console.log(searchForm.value)
}
async function getOkrList() {
const list = [
{
id: 1,
name: '销售成交额达到1000万总体成交率15%',
process: 60,
type: '目标',
children: [
{
id: 11,
type: 'keyresult',
channelName: '抖音',
target: '线索目标',
targetType: 'value',
isSystem: true,
targetNum: 10000,
targetValue: false,
currentNum: 5000,
currentValue: false,
process: 60,
users: '张三、李四'
},
{
id: 12,
type: 'keyresult',
channelName: '抖音',
target: '成交数',
isSystem: true,
targetType: 'value',
targetNum: 2500,
targetValue: false,
currentNum: 500,
currentValue: false,
process: 60,
users: '张三、李四'
}
]
},
{
id: 2,
name: '运营消耗预算控制在20万以内获得10万条线索',
process: 80,
type: '目标',
children: [
{
id: 21,
type: 'keyresult',
target: '本月抖音运营投入相较上月少10%',
targetType: 'radio',
isSystem: false,
targetNum: 0,
targetValue: false,
currentNum: 0,
currentValue: false,
process: 0,
users: ''
},
{
id: 22,
type: 'keyresult',
target: '累计输出作品',
process: 15,
users: '',
isSystem: false,
targetType: 'value',
targetNum: 200,
targetValue: false,
currentNum: 30,
currentValue: false
}
]
},
{
id: 3,
name: '目标3',
process: 40,
type: '目标',
children: [
{
id: 31,
type: 'keyresult',
target: '关键成果1',
process: 100,
users: '',
isSystem: false,
targetType: 'radio',
targetNum: 0,
targetValue: false,
currentNum: 0,
currentValue: true
},
{
id: 22,
type: 'keyresult',
target: '关键成果2',
process: 15,
users: '',
isSystem: false,
targetType: 'value',
targetNum: 200,
targetValue: false,
currentNum: 30,
currentValue: false
}
]
}
]
nextTick(() => { nextTick(() => {
okrTableRef.value.prepareData(list) okrTableRef.value.prepareData(list)
}) })
})
} }
const dialogOkrInfo = ref(null) const dialogOkrInfo = ref(null)
@@ -83,18 +230,13 @@ function handleEditOkr() {
} }
function handleUpdateProcess() { function handleUpdateProcess() {
okrTableRef.value.updateProcess(searchForm.value.nodeId).then(() => { message.success('更新进度成功')
message.success('更新成功')
getOkrList() getOkrList()
})
} }
const dialogOkr = ref(null) const dialogOkr = ref(null)
function handleShowOkr(id) { function handleShowOkr(row) {
dialogOkr.value.open({ dialogOkr.value.open(row.id)
nodeId: id,
canEdit: true
})
} }
</script> </script>

View File

@@ -6,7 +6,7 @@
<div class="flex items-center border-1px w-300px h-32px p-10px peroid-select"> <div class="flex items-center border-1px w-300px h-32px p-10px peroid-select">
<Icon icon="ep:calendar" style="color: #aaa" /> <Icon icon="ep:calendar" style="color: #aaa" />
<span class="text-14px ml-10px" style="color: #aaa"> <span class="text-14px ml-10px" style="color: #aaa">
{{ searchForm.nodeName ? searchForm.nodeName : '选择周期' }} {{ searchForm.peroidName ? searchForm.peroidName : '选择周期' }}
</span> </span>
</div> </div>
</template> </template>
@@ -15,13 +15,11 @@
<el-table :data="peroidList" @row-click="handleSelectPeroid"> <el-table :data="peroidList" @row-click="handleSelectPeroid">
<el-table-column label="节点名称"> <el-table-column label="节点名称">
<template #default="{ row }"> <template #default="{ row }">
<el-radio v-model="searchForm.nodeId" :label="row.nodeId">{{ <el-radio v-model="searchForm.peroidId" :label="row.id">{{ row.name }}</el-radio>
row.nodeName
}}</el-radio>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="开始日期" prop="startTime" width="120" /> <el-table-column label="开始日期" prop="startDate" width="120" />
<el-table-column label="截止日期" prop="endTime" width="120" /> <el-table-column label="截止日期" prop="endDate" width="120" />
</el-table> </el-table>
</div> </div>
</div> </div>
@@ -29,13 +27,7 @@
<el-button class="ml-10px" type="primary" @click="handleAddNode">新建节点</el-button> <el-button class="ml-10px" type="primary" @click="handleAddNode">新建节点</el-button>
</div> </div>
<vue3-tree-org <vue3-tree-org :data="dataList" center collapsable @on-node-click="handleClickNode">
:data="dataList"
center
collapsable
:props="treeProps"
@on-node-click="handleClickNode"
>
<template #default="{ node }"> <template #default="{ node }">
<div style="cursor: pointer"> <div style="cursor: pointer">
<div class="tree-org-node__text node-label"> <div class="tree-org-node__text node-label">
@@ -43,19 +35,15 @@
<template #reference> <template #reference>
<div> <div>
<div style="max-height: 40px; overflow: hidden">{{ node.label }}</div> <div style="max-height: 40px; overflow: hidden">{{ node.label }}</div>
<div class="tip"> 目标数 {{ getNodePropData(node.id, 'objectiveNum') }}</div> <div class="tip"> 目标数 3</div>
<!-- 执行人 -->
<div class="tip">
执行人 {{ getNodePropData(node.id, 'executorName') || '无' }}
</div>
</div> </div>
</template> </template>
<template #default> <template #default>
<div style="font-size: 0.875rem; line-height: 1.5"> <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"> <div v-for="i in 3" :key="i" class="mt-5">
<span style="color: #aaa">{{ parseInt(i.progress) }}%</span> <span style="color: #aaa">0%</span>
<span style="margin-left: 0.5rem"> <span style="margin-left: 0.5rem">
{{ i.objectiveName }} 成交数达到10个且订单的利润不能低于成交价的30%
</span> </span>
</div> </div>
</div> </div>
@@ -63,12 +51,7 @@
</el-popover> </el-popover>
</div> </div>
<div class="p-5px"> <div class="p-5px">
<el-progress <el-progress type="line" :percentage="80" text-inside :stroke-width="12" />
type="line"
:percentage="parseInt(getNodePropData(node.id, 'progress')) || 0"
text-inside
:stroke-width="12"
/>
</div> </div>
</div> </div>
</template> </template>
@@ -84,69 +67,95 @@ import 'vue3-tree-org/lib/vue3-tree-org.css'
import DialogOkr from './DialogOkr.vue' import DialogOkr from './DialogOkr.vue'
import DialogOkrInfo from './DialogOkrInfo.vue' import DialogOkrInfo from './DialogOkrInfo.vue'
import { getOkrRelationTree, getOkrRelationTreeChildren } from '@/api/okr/okr' const dataList = ref({
import { listToTree } from '@/utils/tree' id: 1,
label: '寻驾全年目标',
const dataList = ref({}) noDragging: true,
const helpDataList = ref([]) disabled: true,
const treeProps = { children: [
children: 'children', {
label: 'nodeName', id: 2,
id: 'nodeId', pid: 1,
pid: 'parentId' label: '1月',
noDragging: true,
disabled: true,
children: [
{ id: 6, pid: 2, label: '第一周', noDragging: true, disabled: true },
{ id: 8, pid: 2, label: '第二周', noDragging: true, disabled: true },
{ id: 10, pid: 2, label: '第三周', noDragging: true, disabled: true },
{ id: 10, pid: 2, label: '第四周', noDragging: true, disabled: true }
]
},
{
id: 3,
pid: 1,
label: '2月',
noDragging: true,
disabled: true,
children: [
{ id: 6, pid: 2, label: '第一周', noDragging: true, disabled: true },
{ id: 8, pid: 2, label: '第二周', noDragging: true, disabled: true },
{ id: 10, pid: 2, label: '第三周', noDragging: true, disabled: true },
{ id: 10, pid: 2, label: '第四周', noDragging: true, disabled: true }
]
},
{
id: 4,
pid: 1,
label: '3月',
noDragging: true,
disabled: true,
children: [
{ id: 6, pid: 2, label: '第一周', noDragging: true, disabled: true },
{ id: 8, pid: 2, label: '第二周', noDragging: true, disabled: true },
{ id: 10, pid: 2, label: '第三周', noDragging: true, disabled: true },
{ id: 10, pid: 2, label: '第四周', noDragging: true, disabled: true }
]
} }
]
})
const searchForm = ref({ const searchForm = ref({
nodeName: '', peroidName: '',
nodeId: null peroidId: null
}) })
const peroidList = ref([]) const peroidList = ref([])
onMounted(() => {
handleSearchPeroid() handleSearchPeroid()
if (!searchForm.value.peroidId && peroidList.value.length) {
searchForm.value.peroidId = peroidList.value[0].id
searchForm.value.peroidName = peroidList.value[0].name
}
handleSearchOkr()
})
function handleSearchPeroid() { async function handleSearchPeroid() {
getOkrRelationTree().then((resp) => { peroidList.value = [
peroidList.value = resp {
if (resp && resp.length && !searchForm.value.nodeId) { id: 1,
searchForm.value.nodeId = resp[0].nodeId name: '2025年寻驾okr',
searchForm.value.nodeName = resp[0].nodeName startDate: '2022-01-01',
getOkrList() endDate: '2022-01-31'
},
{
id: 2,
name: '2024年寻驾okr',
startDate: '2022-02-01',
endDate: '2022-02-28'
} }
}) ]
}
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) { function handleSelectPeroid(row) {
searchForm.value.nodeName = row.nodeName searchForm.value.peroidName = row.name
searchForm.value.nodeId = row.nodeId searchForm.value.peroidId = row.id
getOkrList() handleSearchOkr()
} }
function getNodePropData(nodeId, prop) { function handleSearchOkr() {
const nodeData = helpDataList.value.find((it) => it.nodeId == nodeId) console.log(searchForm.value)
if (nodeData) {
return nodeData[prop]
} else {
return ''
}
} }
function toggleExpand(data, val) { function toggleExpand(data, val) {
@@ -168,23 +177,19 @@ function toggleExpand(data, val) {
toggleExpand(dataList.value, true) toggleExpand(dataList.value, true)
const dialogOkr = ref(null) const dialogOkr = ref(null)
const clickNode = ref(null) const okrId = ref(null)
function handleClickNode(node, data) { function handleClickNode(node, data) {
clickNode.value = data okrId.value = data.id
openOkr() openOkr()
} }
function openOkr() { function openOkr() {
clickNode.value && okrId.value && dialogOkr.value.open(okrId.value)
dialogOkr.value.open({
nodeId: clickNode.value.nodeId,
canEdit: !clickNode.value.children || clickNode.value.children.length == 0
})
} }
const dialogOkrInfo = ref(null) const dialogOkrInfo = ref(null)
function handleAddNode() { function handleAddNode() {
clickNode.value = null okrId.value = null
dialogOkrInfo.value.open('create', null) dialogOkrInfo.value.open('create', null)
} }

View File

@@ -15,42 +15,42 @@
v-if="!expandedRows[row.id]" v-if="!expandedRows[row.id]"
class="line1" class="line1"
:style="{ :style="{
top: row.type == '目标' ? '30px' : 0, top: !row.keyResultId ? '30px' : 0,
height: getHeight(row, $index) height: getHeight(row, $index)
}" }"
></span> ></span>
<span v-if="row.type == '目标'">目标{{ row.name }}</span> <span v-if="!row.keyResultId">目标{{ row.objectiveName }}</span>
<template v-else> <template v-else>
<span class="line2"></span> <span class="line2"></span>
<span> <span>
关键成果{{ row.channelName }} {{ row.name }} 关键成果{{ row.channelName }} {{ row.target }}
<span v-if="row.resultType == 1"> {{ row.targetValue }}</span> <span v-if="row.targetType == 'value'">{{ row.targetNum }}</span>
</span> </span>
<div class="flex items-center mt-10px ml-50px"> <div class="flex items-center mt-10px ml-50px">
<span>当前进度</span> <span>当前进度</span>
<span v-if="row.isSys || !props.canEdit">{{ row.currentValue }}</span> <span v-if="row.isSystem">{{ row.currentNum }}</span>
<el-input <el-input
v-else-if="row.resultType == 1" v-else-if="row.targetType == 'value'"
v-model="row.currentValue" v-model="row.currentNum"
clearable clearable
size="small" size="small"
style="width: 200px" style="width: 200px"
/> />
<el-radio-group <el-radio-group
v-else-if="row.resultType == 2" v-else-if="row.targetType == 'radio'"
v-model="row.currentValue" v-model="row.currentValue"
size="small" size="small"
> >
<el-radio :value="1"></el-radio> <el-radio :value="true"></el-radio>
<el-radio :value="0"></el-radio> <el-radio :value="false"></el-radio>
</el-radio-group> </el-radio-group>
</div> </div>
</template> </template>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="progress" label="进度" width="200px"> <el-table-column prop="process" label="进度" width="200px">
<template #default="{ row }"> <template #default="{ row }">
<el-progress :percentage="parseInt(row.progress) || 0" /> <el-progress :percentage="row.process" />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="executorName" label="执行人" width="200px" /> <el-table-column prop="executorName" label="执行人" width="200px" />
@@ -59,61 +59,26 @@
</template> </template>
<script setup name="OkrTable"> <script setup name="OkrTable">
import { updateOkrProgress } from '@/api/okr/okr'
const emit = defineEmits(['rowClick']) const emit = defineEmits(['rowClick'])
const props = defineProps({
canEdit: {
type: Boolean,
default: false
}
})
const okrList = ref([]) const okrList = ref([])
const helpList = ref([]) const helpList = ref([])
function prepareData(list) { function prepareData(list) {
okrList.value = list
helpList.value = [] helpList.value = []
expandedRows.value = {} okrList.value.map((item) => {
okrList.value = list.map((item) => { helpList.value.push(item)
let obj = { item.children?.map((child) => {
id: item.objectiveId, helpList.value.push(child)
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.keyResultName,
progress: child.progress,
executorName: child.executorName,
type: '关键成果',
resultType: child.resultType,
targetValue: child.targetValue,
currentValue: Number(child.currentValue)
}
helpList.value.push(kr)
return kr
}) })
}
return obj
}) })
} }
defineExpose({ defineExpose({
prepareData, prepareData
updateProcess
}) })
function getHeight(row, index) { function getHeight(row, index) {
if (helpList.value.length - 1 == index || helpList.value[index + 1].type == '目标') { if (helpList.value.length - 1 == index || helpList.value[index + 1].type == '目标') {
return '22px' return '22px'
@@ -127,25 +92,6 @@ function handleExpand(row, expanded) {
expandedRows.value[row.id] = !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) { function handleRowClick(row) {
emit('rowClick', row) emit('rowClick', row)
} }