You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
95 lines
1.9 KiB
95 lines
1.9 KiB
2 months ago
|
<template>
|
||
|
|
<div>
|
||
|
|
<div class="flex items-center justify-between">
|
||
|
|
<el-row>
|
||
|
|
<el-tree-select
|
||
|
|
v-model="searchForm.nodeId"
|
||
|
|
:data="peroidList"
|
||
|
|
:props="defaultProps"
|
||
|
|
:render-after-expand="false"
|
||
|
|
:default-expand-all="false"
|
||
|
|
style="width: 400px"
|
||
|
|
@change="getOkrList"
|
||
|
|
/>
|
||
|
|
</el-row>
|
||
|
|
<el-row>
|
||
|
|
<el-button type="info" @click="handleShowOkr(searchForm.nodeId)"> 节点详情 </el-button>
|
||
|
|
</el-row>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<OkrTable ref="okrTableRef" canEdit />
|
||
|
|
<DialogOkr ref="dialogOkr" @edit="handleEditOkr" />
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup name="MyDuty">
|
||
|
|
import OkrTable from './OkrTable.vue'
|
||
|
|
import DialogOkr from './DialogOkr.vue'
|
||
|
|
import { listToTree } from '@/utils/tree'
|
||
|
|
|
||
|
|
import { getMySonNodeTree, getMySonOkrPage } from '@/api/okr/okr'
|
||
|
|
|
||
|
|
const props = defineProps({
|
||
|
|
userId: {
|
||
|
|
type: Number,
|
||
|
|
default: undefined
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
const defaultProps = {
|
||
|
|
value: 'nodeId',
|
||
|
|
label: 'nodeName',
|
||
|
|
children: 'children'
|
||
|
|
}
|
||
|
|
|
||
|
|
const okrTableRef = ref(null)
|
||
|
|
const searchForm = ref({
|
||
|
|
nodeId: undefined
|
||
|
|
})
|
||
|
|
|
||
|
|
const peroidList = ref([])
|
||
|
|
|
||
|
|
handleSearchPeroid()
|
||
|
|
|
||
|
|
function handleSearchPeroid() {
|
||
|
|
getMySonNodeTree({ userId: props.userId }).then((resp) => {
|
||
|
|
peroidList.value = listToTree(resp.tree, {
|
||
|
|
id: 'nodeId',
|
||
|
|
pid: 'parentId',
|
||
|
|
children: 'children'
|
||
|
|
})
|
||
|
|
searchForm.value.nodeId = resp.nodeId
|
||
|
|
getOkrList()
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
function getOkrList() {
|
||
|
|
getMySonOkrPage({
|
||
|
|
...searchForm.value,
|
||
|
|
userId: props.userId
|
||
|
|
}).then((resp) => {
|
||
|
|
const list = resp
|
||
|
|
nextTick(() => {
|
||
|
|
okrTableRef.value.prepareData(list)
|
||
|
|
})
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
const dialogOkr = ref(null)
|
||
|
|
function handleShowOkr(id) {
|
||
|
|
dialogOkr.value.open({
|
||
|
|
nodeId: id,
|
||
|
|
canEdit: true,
|
||
|
|
queryType: 1
|
||
|
|
})
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
:deep(.el-overlay-dialog) {
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
</style>
|