caolin 2 weeks ago
commit 5d88d06707
  1. 18
      src/api/okr/okr.js
  2. 13
      src/views/Basic/Dept/DeptForm.vue
  3. 11
      src/views/Basic/Dept/index.vue
  4. 20
      src/views/OKR/Management/Components/AllTarget.vue
  5. 35
      src/views/OKR/Management/Components/DialogOkr.vue
  6. 2
      src/views/OKR/Management/Components/DialogWait.vue
  7. 26
      src/views/OKR/Management/Components/MyDuty.vue
  8. 175
      src/views/OKR/Management/Components/ObjectList.vue
  9. 2
      src/views/OKR/Management/Components/OkrTable.vue

@ -90,3 +90,21 @@ export const updateOkrProgress = (data) => {
// headers: { 'instance-id': 1016 } // 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 }
})
}

@ -32,9 +32,10 @@
<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 userList" v-for="item in employeeOptions"
:key="item.id" :key="item.id"
:label="item.nickname" :disabled="item.status == 1"
:label="item.name"
:value="item.id" :value="item.id"
/> />
</el-select> </el-select>
@ -73,7 +74,7 @@
<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 * as UserApi from '@/api/system/user' import { getEmployeeSimpleList } from '@/api/pers/employee'
import { CommonStatusEnum } from '@/utils/constants' import { CommonStatusEnum } from '@/utils/constants'
const { t } = useI18n() // const { t } = useI18n() //
@ -104,7 +105,7 @@ const formRules = reactive<any>({
}) })
const formRef = ref() // Ref const formRef = ref() // Ref
const deptTree = ref() // const deptTree = ref() //
const userList = ref<UserApi.UserVO[]>([]) // const employeeOptions = ref<any>([]) //
/** 打开弹窗 */ /** 打开弹窗 */
const open = async (type: string, id?: number) => { const open = async (type: string, id?: number) => {
@ -122,7 +123,9 @@ const open = async (type: string, id?: number) => {
} }
} }
// //
userList.value = await UserApi.getSimpleUserList() getEmployeeSimpleList().then((data) => {
employeeOptions.value = data
})
// //
await getTree() await getTree()
} }

@ -22,8 +22,15 @@
<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="sort" label="排序" width="200" /> <el-table-column prop="" label="业务系统" width="200" />
<el-table-column prop="status" label="状态" width="100" /> <el-table-column prop="sort" label="排序" width="80" />
<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">

@ -16,10 +16,19 @@
</el-row> </el-row>
<el-row> <el-row>
<el-button type="info" @click="handleShowOkr(searchForm.nodeId)"> 节点详情 </el-button> <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 type="success" @click="handleUpdateProcess">更新进度</el-button> <el-button
type="success"
v-if="searchForm.executor?.includes(currentUserId)"
@click="handleUpdateProcess"
>更新进度</el-button
>
</el-row> </el-row>
</div> </div>
@ -36,8 +45,11 @@ 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, findNode } 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',
@ -52,9 +64,7 @@ const searchForm = ref({
const peroidList = ref([]) const peroidList = ref([])
onMounted(() => { handleSearchPeroid()
handleSearchPeroid()
})
// //
// //

@ -22,7 +22,7 @@
</div> </div>
</div> </div>
<div class="flex items-center"> <div class="flex items-center">
<el-button link @click="emit('edit')"> <el-button v-if="nodeInfo.creatorId == currentUserId" 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>
@ -47,7 +47,7 @@
</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">{{ nodeInfo.executorName || '无' }}</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>
@ -55,7 +55,7 @@
</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="nodeInfo.progress || 0" :stroke-width="8" /> <el-progress :percentage="parseInt(nodeInfo.progress) || 0" :stroke-width="8" />
</div> </div>
</div> </div>
<div class="flex detail-basic-info"> <div class="flex detail-basic-info">
@ -72,7 +72,7 @@
</div> </div>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
<el-button class="sav-btn" type="primary" @click="handleSaveProcess"> <el-button v-if="canEdit" class="sav-btn" type="primary" @click="handleSaveProcess">
保存并更新 保存并更新
</el-button> </el-button>
</div> </div>
@ -86,7 +86,7 @@
:key="item.nodeId" :key="item.nodeId"
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" @click="handleChildItem(item)"
> >
<div <div
class="flex justify-between items-center overflow-hidden text-16px" class="flex justify-between items-center overflow-hidden text-16px"
@ -95,21 +95,21 @@
<div class="child-label">节点{{ item.nodeName }}</div> <div class="child-label">节点{{ item.nodeName }}</div>
<el-progress <el-progress
type="line" type="line"
:percentage="item.progress || 0" :percentage="parseInt(item.progress) || 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.objectiveCount }}</span> <span style="color: #aaa">{{ item.objectiveNum }}</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">{{ item.executorName || '无' }}</span>
</div> </div>
</div> </div>
<div <div
@ -314,8 +314,11 @@ import {
} from '@/api/okr/comment' } from '@/api/okr/comment'
import { listToTree } from '@/utils/tree' import { listToTree } from '@/utils/tree'
import { getEmployeeSimpleList } from '@/api/pers/employee' import { getEmployeeSimpleList } from '@/api/pers/employee'
import { useUserStore } from '@/store/modules/user'
const message = useMessage() 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)
@ -348,7 +351,7 @@ const nodeInfo = ref({})
const nodeRecords = ref([]) const nodeRecords = ref([])
const commentTypeOptions = ref([]) const commentTypeOptions = ref([])
async function open(curNode) { function open(curNode) {
canEdit.value = curNode.canEdit canEdit.value = curNode.canEdit
nodeInfo.value.nodeId = curNode.nodeId nodeInfo.value.nodeId = curNode.nodeId
// //
@ -361,7 +364,12 @@ const employeeOptions = ref([])
function searchInfo(curNode) { function searchInfo(curNode) {
try { try {
getOkrNodeDetail(curNode.nodeId).then((resp) => { getOkrNodeDetail(curNode.nodeId).then((resp) => {
nodeInfo.value = resp nodeInfo.value = {
...resp,
executor: resp.executor || []
}
canEdit.value =
canEdit.value && currentUserId == nodeInfo.value.executor.includes(currentUserId)
if (resp.objectives) { if (resp.objectives) {
okrList.value = resp.objectives.map((item) => ({ okrList.value = resp.objectives.map((item) => ({
...item, ...item,
@ -410,8 +418,11 @@ function handleSaveProcess() {
}) })
} }
function handleChildItem() { function handleChildItem(item) {
console.log('handleChildItem') 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 addNewComment = ref(false)

@ -237,7 +237,7 @@ const rules = ref({
const followList = ref([]) const followList = ref([])
async function open(type, id) { 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

@ -13,11 +13,12 @@
/> />
</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" @row-click="handleShowOkr" /> <OkrTable ref="okrTableRef" canEdit />
<DialogOkr ref="dialogOkr" @edit="handleEditOkr" /> <DialogOkr ref="dialogOkr" @edit="handleEditOkr" />
<DialogOkrInfo ref="dialogOkrInfo" /> <DialogOkrInfo ref="dialogOkrInfo" />
</div> </div>
@ -46,11 +47,11 @@ const searchForm = ref({
const peroidList = ref([]) const peroidList = ref([])
onMounted(() => { // onMounted(() => {
handleSearchPeroid() handleSearchPeroid()
}) // })
async function handleSearchPeroid() { function handleSearchPeroid() {
getMyNodeTree().then((resp) => { getMyNodeTree().then((resp) => {
peroidList.value = listToTree(resp.tree, { peroidList.value = listToTree(resp.tree, {
id: 'nodeId', id: 'nodeId',
@ -62,7 +63,7 @@ async function handleSearchPeroid() {
}) })
} }
async function getOkrList() { function getOkrList() {
getMyOkrPage(searchForm.value).then((resp) => { getMyOkrPage(searchForm.value).then((resp) => {
const list = resp const list = resp
nextTick(() => { nextTick(() => {
@ -82,13 +83,18 @@ function handleEditOkr() {
} }
function handleUpdateProcess() { function handleUpdateProcess() {
message.success('更新进度成功') okrTableRef.value.updateProcess(searchForm.value.nodeId).then(() => {
getOkrList() message.success('更新成功')
getOkrList()
})
} }
const dialogOkr = ref(null) const dialogOkr = ref(null)
function handleShowOkr(row) { function handleShowOkr(id) {
dialogOkr.value.open(row.id) dialogOkr.value.open({
nodeId: id,
canEdit: true
})
} }
</script> </script>

@ -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.peroidName ? searchForm.peroidName : '选择周期' }} {{ searchForm.nodeName ? searchForm.nodeName : '选择周期' }}
</span> </span>
</div> </div>
</template> </template>
@ -15,11 +15,13 @@
<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.peroidId" :label="row.id">{{ row.name }}</el-radio> <el-radio v-model="searchForm.nodeId" :label="row.nodeId">{{
row.nodeName
}}</el-radio>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="开始日期" prop="startDate" width="120" /> <el-table-column label="开始日期" prop="startTime" width="120" />
<el-table-column label="截止日期" prop="endDate" width="120" /> <el-table-column label="截止日期" prop="endTime" width="120" />
</el-table> </el-table>
</div> </div>
</div> </div>
@ -27,7 +29,13 @@
<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 :data="dataList" center collapsable @on-node-click="handleClickNode"> <vue3-tree-org
: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">
@ -35,15 +43,19 @@
<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"> 目标数 3</div> <div class="tip"> 目标数 {{ getNodePropData(node.id, 'objectiveNum') }}</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 3" :key="i" class="mt-5"> <div v-for="i in getNodePropData(node.id, 'objectives')" :key="i.id" class="mt-5">
<span style="color: #aaa">0%</span> <span style="color: #aaa">{{ parseInt(i.progress) }}%</span>
<span style="margin-left: 0.5rem"> <span style="margin-left: 0.5rem">
成交数达到10个且订单的利润不能低于成交价的30% {{ i.objectiveName }}
</span> </span>
</div> </div>
</div> </div>
@ -51,7 +63,12 @@
</el-popover> </el-popover>
</div> </div>
<div class="p-5px"> <div class="p-5px">
<el-progress type="line" :percentage="80" text-inside :stroke-width="12" /> <el-progress
type="line"
:percentage="parseInt(getNodePropData(node.id, 'progress')) || 0"
text-inside
:stroke-width="12"
/>
</div> </div>
</div> </div>
</template> </template>
@ -67,95 +84,69 @@ 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'
const dataList = ref({ import { getOkrRelationTree, getOkrRelationTreeChildren } from '@/api/okr/okr'
id: 1, import { listToTree } from '@/utils/tree'
label: '寻驾全年目标',
noDragging: true, const dataList = ref({})
disabled: true, const helpDataList = ref([])
children: [ const treeProps = {
{ children: 'children',
id: 2, label: 'nodeName',
pid: 1, id: 'nodeId',
label: '1月', pid: 'parentId'
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({
peroidName: '', nodeName: '',
peroidId: null nodeId: 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()
})
async function handleSearchPeroid() { function handleSearchPeroid() {
peroidList.value = [ getOkrRelationTree().then((resp) => {
{ peroidList.value = resp
id: 1, if (resp && resp.length && !searchForm.value.nodeId) {
name: '2025年寻驾okr', searchForm.value.nodeId = resp[0].nodeId
startDate: '2022-01-01', searchForm.value.nodeName = resp[0].nodeName
endDate: '2022-01-31' getOkrList()
},
{
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.peroidName = row.name searchForm.value.nodeName = row.nodeName
searchForm.value.peroidId = row.id searchForm.value.nodeId = row.nodeId
handleSearchOkr() getOkrList()
} }
function handleSearchOkr() { function getNodePropData(nodeId, prop) {
console.log(searchForm.value) const nodeData = helpDataList.value.find((it) => it.nodeId == nodeId)
if (nodeData) {
return nodeData[prop]
} else {
return ''
}
} }
function toggleExpand(data, val) { function toggleExpand(data, val) {
@ -177,19 +168,23 @@ function toggleExpand(data, val) {
toggleExpand(dataList.value, true) toggleExpand(dataList.value, true)
const dialogOkr = ref(null) const dialogOkr = ref(null)
const okrId = ref(null) const clickNode = ref(null)
function handleClickNode(node, data) { function handleClickNode(node, data) {
okrId.value = data.id clickNode.value = data
openOkr() openOkr()
} }
function openOkr() { function openOkr() {
okrId.value && dialogOkr.value.open(okrId.value) clickNode.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() {
okrId.value = null clickNode.value = null
dialogOkrInfo.value.open('create', null) dialogOkrInfo.value.open('create', null)
} }

@ -50,7 +50,7 @@
</el-table-column> </el-table-column>
<el-table-column prop="progress" label="进度" width="200px"> <el-table-column prop="progress" label="进度" width="200px">
<template #default="{ row }"> <template #default="{ row }">
<el-progress :percentage="row.progress || 0" /> <el-progress :percentage="parseInt(row.progress) || 0" />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="executorName" label="执行人" width="200px" /> <el-table-column prop="executorName" label="执行人" width="200px" />

Loading…
Cancel
Save