sc
This commit is contained in:
qsh
@@ -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)
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user