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